Dinámica El framework RADical J2EE sin complicaciones

Transcripción

1 Biblioteca Técnica: plantilla de solución PL017 Grids paginados y vinculados Última actualización: Requiere framework v2.1.4 en adelante Contenido Sumario...2 Demo online permanente...2 Screenshots...3 Arquitectura de la solución...4 Diagrama de Actions...4 Diagramas de clases...5 Estructura de directorios...6 Cómo instalar la demo...7 Cómo funciona el sistema...7 Aspectos relevantes...8 Mostrar Iframe...8 Ocultar Iframe...8 Control de paginación de los recordsets...9 Cómo reutilizar y adaptar la plantilla Notas importantes Procedimiento paso a paso Biblioteca técnica Página 1 de 11

2 Sumario Esta plantilla muestra el uso de la paginación de múltiples grid, los cuales tienen que ser empotrados en un IFRAME, ya que el framework tiene la limitante que no permite tener dos grid paginados en el mismo template, se mostrará como resolverlo de una manera sencilla y sofisticada. Para entender esta plantilla es necesario que esté familiarizado con la plantilla PL003 (Vista paginada ajax (sin formulario filtro)). Este documento se apoya en las facilidades de esta plantilla, y no repite lo que ya se explicó en el documento respectivo, por ejemplo: como funciona el resultado paginado, o como se hace el POST de un formulario con Ajax. Para reutilizar esta plantilla requiere de conocimientos elementales de programación en Dinámica, además de conocimientos básicos de SQL, DHTML, Java y JavaScript. Demo online permanente Si desea probar como funciona esta plantilla, puede visitarla en este URL: Corre con Tomcat 6, Java 6 y PostgreSQL Biblioteca técnica Página 2 de 11

3 Screenshots Biblioteca técnica Página 3 de 11

4 Arquitectura de la solución Diagrama de Actions Biblioteca técnica Página 4 de 11

5 Diagramas de clases Esta plantilla solo utiliza clases genéricas del framework. Biblioteca técnica Página 5 de 11

6 Estructura de directorios Biblioteca técnica Página 6 de 11

7 Cómo instalar la demo 1) Para correr la demo tal como está, requiere de la base de datos de demo de Dinámica, la aplicación donde instale esta demo debe estar configurada para conectarse a esta base de datos. 2) Se recomienda haber montado una aplicación Dinámica como un proyecto en Eclipse, para que todo esté en su lugar y se compile automáticamente a medida que hace cambios o añade clases. 3) Copiar el directorio /templates/linkedgrids a /WEB-INF/action, también lo puede copiar dentro de un subdirectorio de /action, como /action/demo por ejemplo. 4) Navegar a: donde MiContexto es el nombre de su aplicación o contexto. Cómo funciona el sistema 1) El mecanismo arranca con la acción form, esta sirve la página que inicializa todo el mecanismo, contiene los DIVs e iframes donde irán apareciendo los resultados, así como todo el javascript requerido por esta plantilla. 2) Cuando la página se carga se invoca la acción search vía Ajax, una vez que llega el resultado se muestra en el DIV correspondiente. El resultado que retorna tiene el recordset previamente paginado. 3) El resultado puede ser explotado en un detalle, el cual será llamado dentro de un IFRAME para poder mostrarlo en la acción form previamente paginado. Biblioteca técnica Página 7 de 11

8 Aspectos relevantes Mostrar IFRAME Cuando se carga la acción form, se oculta el IFRAME. //inicializacion de la pagina cuando carga onload = function() { search(); document.getelementbyid("detail").style.visibility = "hidden"; } Una vez que llega la respuesta de la llamada ajax, se puede explotar cada registro en un detalle paginado. Se hace visible el IFRAME y se le coloca la referencia de la locación de la acción. <td align="center"> <!--comando para ver detalle de cada registro--> <img src="${def:context}/images/search.gif" style="cursor:pointer" onclick="calliframe('${fld:orderid}')" title="ver detalle de la orden"> </td> //llamar detalle en el iframe una vez que llega la consulta function calliframe(id) { document.getelementbyid("detail").style.visibility = "visible"; frames['detail'].location.href='${def:context}${def:actionroot}/detail/form?i d=' + id; } Ocultar IFRAME El manejo de estados para regresar a la vista anterior se maneja ocultando el IFRAME. <span style="float:left;margin-left:60px"> <img src="${def:context}/images/grid-split.gif" class="tool"> <img src="${def:context}/images/back.gif" onclick="javascript:detailhidden()" title="regresa a la órden" class="tool"> </span> Biblioteca técnica Página 8 de 11

9 //llamar funcion padre para ocultar iframe function detailhidden() { parent.iframehidden(); } //ocultar iframe function iframehidden() { document.getelementbyid("detail").style.visibility = "hidden"; } Control de paginación de los recordsets Al tener dos acciones paginadas es importante definir nombres distintos para cada recodset, ya que de no hacerlo se estaría sustituyendo el recordset en sesión por otro nuevo de igual nombre. <?xml version='1.0' encoding='iso '?> <config> </config> <summary> Ejecutar consulta y enrutar dependiendo de que un recordset tenga o no registros </summary> <log>false</log> <!--configura el control de paginacion--> <set-request-attribute id="paging.recordset" value="query.sql" /> <set-request-attribute id="paging.pagesize" value="6" /> <transaction> <classname>dinamica.generictransaction</classname> <validator>false</validator> <transaction>false</transaction> <jdbc-log>false</jdbc-log> <recordset id="query.sql" source="sql" scope="session" on-empty-return="1"/> </transaction> <on-exit return-code="0" forward-to="/action/initview"/> <on-exit return-code="1" forward-to="${def:actionroot}/notfound"/> Biblioteca técnica Página 9 de 11

10 <?xml version='1.0' encoding='iso '?> <config> <summary> Ejecutar consulta y enrutar dependiendo de que un recordset tenga o no registros </summary> <log>false</log> <!--configura el control de paginacion--> <set-request-attribute id="paging.recordset" value="detail.sql" /> <set-request-attribute id="paging.pagesize" value="6" /> <transaction> <classname>dinamica.generictransaction</classname> <validator>false</validator> <transaction>false</transaction> <jdbc-log>false</jdbc-log> <recordset id="detail.sql" source="sql" scope="session" on-empty-return="1"/> <recordset id="total.sql" source="sql" scope="session"/> </transaction> <on-exit return-code="0" forward-to="/action/initview"/> <on-exit return-code="1" forward-to="${def:actionroot}/notfound"/> </config> Cómo reutilizar y adaptar la plantilla Notas importantes Sugerimos ejecutar estos pasos con Eclipse, simplifica mucho todas las tareas que tendrá que ejecutar. Es conveniente que antes de reutilizar la plantilla, la haya corrido contra la base de datos de demo. Así tendrá una comprensión cabal desde la óptica del usuario de lo que hace la plantilla. Recuerde que la plantilla tiene un propósito específico, pueden ser necesarias algunas modificaciones para lograr un efecto particular. Biblioteca técnica Página 10 de 11

11 Procedimiento paso a paso 1. Crear un directorio debajo de /WEB-INF/action o debajo de una subcarpeta dentro de esta ubicación. 2. Copiar todo el contenido de /linkedgrids a su nueva carpeta. El contenido solamente, no copie la carpeta linkedgrids. 3. Editar template.htm en la acción form. 4. Cambiar la acción search, modificar todos los SQL y la estructura del archivo validator.xml. 5. Cambiar la acción view, modifique template.htm para que refleje las etiquetas y nombres de campo que usted utiliza, recuerde que por defecto, cada registro de la tabla se puede explotar en un detalle, si no quiere esta funcionalidad, remueva el icono que permite invocar este servicio. 6. Si decidió usar el detail en el punto anterior, entonces tiene que editar template.htm en la acción detail/form. 7. Cambiar la acción detail/search, modificar todos los SQL y la estructura del archivo validator.xml. 8. Cambiar la acción detail/view, modifique template.htm para que refleje las etiquetas y nombres de campo que usted utiliza. Recuerde que para probar su nuevo modulo debe navegar a la acción de entrada del mecanismo, en este caso /form. La ruta en el browser dependerá de cómo haya nombrado su carpeta raíz (en vez de linkedgrids ) y donde la ubicó dentro de /WEB-INF/action/.. Biblioteca técnica Página 11 de 11