Actualización a GX Ev3 Ejercicios Prácticos

Práctico – Actualización Ev3 – Web

Copyright  Artech Consultores S. R. L. 1988-2014. Todos los derechos reservados. Este documento no puede ser reproducido en cualquier medio sin el consentimiento explícito de Artech Consultores S.R.L. La información contenida en este documento es para uso personal únicamente.

Marcas Registradas Artech y GeneXus son marcas registradas de Artech Consultores S.R.L. Todas las demás marcas mencionadas en este documento son propiedad de sus respectivos dueños.

2

Práctico – Actualización Ev3 – Web

1. PRIMEROS PASOS .............................................................................................................. 4 2. APLICACIÓN WEB............................................................................................................... 4 Creación de Módulos................................................................................................................ 4

3. HACIENDO QUE LA APLICACIÓN SEA RESPONSIVE .......................................................... 5 4. DISEÑANDO PANTALLAS INTERACTIVAS (WEB ABSTRACT EDITOR) ............................... 7 Evento de usuario: Grids relacionados ..................................................................................... 7 Evento de usuario: Actualizando las líneas de un grid ............................................................ 10

5. DISEÑANDO LISTADOS PDF ............................................................................................. 11 Listado de oradores agrupados por sesión ............................................................................. 11 Listado de oradores con la cantidad de sesiones en las que participa (cláusula Unique) ........ 13

6. UTILIZANDO DATA PROVIDERS ....................................................................................... 14 7. TRANSICIONES ................................................................................................................. 16 8. TRABAJANDO CON MÓDULOS ........................................................................................ 17 Interface ................................................................................................................................. 17 Diagram .................................................................................................................................. 17

9. OPCIONAL ........................................................................................................................ 17 Diseñando la interfaz.............................................................................................................. 17

3

Práctico – Actualización Ev3 – Web

1. Primeros Pasos A lo largo de este práctico se desarrollará una aplicación para un Evento (en inglés: EventDay), que incluye países, oradores, sesiones, etc. 





Crear una nueva Knowledge Base (si usa la versión Trial el Environment se configurará automáticamente con generador C#, interfase Web y DataStore SQL Server) Observar las propiedades del generador Default, en particular las del grupo Execution. La propiedad Deploy to Cloud tiene el valor YES (que en la versión la Trial es la opción por defecto). Esto hace que las propiedades Database Name, Web Root, Deploy Virtual Directory y Deploy Server URL se configuren automáticamente para que la aplicación se despliegue en la nube de Artech. Observar las propiedades del Data Store Default que indica donde se va a crear la aplicación –en la versión Trial esta información no está visible y la base de datos estará alojada en la nube–.

En el servidor samples.genexusserver.com/xev3/ podrá acceder a la aplicación EventDay, más compleja, que fue modelo para este práctico, así como para el teórico. Para probarla, haga desde GeneXus un “New Knwoledge Base from GXserver”.

2. Aplicación Web Creación de Módulos 

Crear la siguiente estructura de Módulos:



Importar en la KB el archivo: UpgradeWebEv3.xpz. Aquí importará los objetos que utilizará más adelante.



Observe los objetos importados y organícelos en los Módulos como muestra la figura:

4

Práctico – Actualización Ev3 – Web



Aplicar el pattern Work With for Web a las transacciones Country, Session y Speaker Para inicializar las tablas con datos: Agregar en el Evento Start del Web Panel Home (se encuentra en el folder GeneralWeb) la invocación a los siguientes procedimientos que se importaron con el xpz anterior:

3. Haciendo que la aplicación sea Responsive 

Configurar las correspondientes propiedades de la versión para que la aplicación sea responsive:

5

Práctico – Actualización Ev3 – Web



Editar la master page RwdMasterPage (bajo el nodo Root Module/GeneralWeb) y modificar su Caption.



Ejecutar la aplicación presionando F5 (tendrá que reorganizar). Ejecutar el Web Panel Home para la inicialización y ver los datos cargados. Acceda al Work With Countries, Work With Speaker y Work With Session para comprobar que efectivamente se hayan cargado. Observe la referencia al Módulo donde pertenece cada objeto.



Ejecutar el web panel WPPivot (Sessions.Statistics.WPPivot). Observe las modificaciones estéticas del la pivot table (muestra las sesiones por día, con sus respectivos oradores).

6

Práctico – Actualización Ev3 – Web

4. Diseñando pantallas Abstract Editor)

interactivas

(Web

Evento de usuario: Grids relacionados 

Crear un web panel de nombre SessionsAndSpeakers que permita seleccionar el título de una sesión de una grilla, y en otra grilla al costado se visualicen los datos de los oradores, como se muestra:

7

Práctico – Actualización Ev3 – Web

Solución: a) Crear un web panel de nombre SpeakersAndSessions dentro del Módulo Speakers b) Insertar una Responsive Table y dentro un Grid con los atributos SessionId (oculto), SessionTitle y SessionDate. c) A la derecha insertar otra Responsive Table. Insertar dentro un Grid free style con el atributo SpeakerImage d) A la derecha de la imagen, dentro del Grid, insertar otra Responsive Table con los atributos SpeakerFullName y SpeakerDVMini. Eliminar las etiquetas.

e) Editar la propiedad Responsive Size de la Main Table como se muestra:

f)

Para personalizar la apariencia de los controles, editar las clases del Theme Flat aplicado. g) Editar la clase AttSubTitle como se muestra:

8

Práctico – Actualización Ev3 – Web

h) Editar la clase BlobContentAttSubTitle como se muestra:

i)

Editar la clase Grid como se muestra:

j) A los atributos SessionTitle y SessionDate asignarles la clase AttSubTitle. k) Al atributo SpeakerFullName asignarle la clase BlobContentAttSubTitle. l) Al atributo SpeakerCVMini asignarle la clase AttSubTitle. m) Declarar el siguiente evento en el web panel:

n) Espedificar en el Grid2 la siguiente condición:

9

Práctico – Actualización Ev3 – Web

Nota: Ejecute la aplicación. Recordar que es necesario declarar el Refresh en forma explícita para que al seleccionar el título de una sesión se provoque la carga de los oradores en el otro grid.

Evento de usuario: Actualizando las líneas de un grid 

En el web panel SessionsAndSpeakers se desea ahora poder visualizar la cantidad de “Likes” que tiene cada sesión. Además al hacer click sobre la imagen de la carita, se sumará un “like” (“me gusta”) más al atributo SessionLikesQty (que lleva la cantidad acumulada de “likes”).

Solución: a) En el web panel SessionsAndSpeakers agregar dos nuevas columnas en el Grid1 (Sessions). Agregar el atributo SesstionLikesQty y una variable &Like de tipo Image.

10

Práctico – Actualización Ev3 – Web

b) En el evento Start declarar la carga de la variable &Like con la imagen correspondiente (la imagen ha sido importada en el archivo UpgradeCourseEv3.xpz. Verifíquelo.):

c) Declarar también el evento asociado a la variable &Like para que al hacer click sobre ella se dispare el procedimiento OneLike (importado previamente) que recibe el identificador de la sesión y actualiza la cantidad de “likes”.

Nota: Ejecute la aplicación. Observe que al hacer click sobre la imagen de la carita, solamente se actualiza la línea correspondiente. El resto de la página no se recarga.

5. Diseñando listados PDF Listado de oradores agrupados por sesión 

Se desea diseñar un listado pdf (ViewSessions) que muestre los oradores agrupados por sesión. El listado se visualizará en una ventana popup (se utilizará el tipo de dato Window).

11

Práctico – Actualización Ev3 – Web

Solución: a)

Abra el procedimiento de nombre ViewSessions, previamente importado y observe el diseño del layout. La imagen en el printblock Title corresponde a simple_event importada en el archivo UpgradeWebEv3.xpz, el printblock Session incluye a los atributos SessionDate y SessionTitle y el printblock Speakers a los atributos SpeakerImage, SpeakerFullName y SpeakerCVMini.

Nota: Para que el contenido del atributo SpeakerCVMini se vea en varias lineas, dar al control el tamaño deseado y especificar la propiedad Alignment = TopJustify.

a) Codificar el source:

b) Volver al web panel SessionsAndSpeakers, agregar un botón “View all” y codificar lo siguiente en el evento Enter asociado (recuerde crear la variable &Window como se muestra):

12

Práctico – Actualización Ev3 – Web

Nota: Recuerde vreificar que el procedimiento ViewSessions tenga las propiedades Main Program = True Call Protocol = HTTP Y la regla Output_file(“ViewSessions”, “pdf”); Ejecute la aplicación. Presione F5, abra el web panel SessionsAndSpeakers y presione al botón “View all”.

Listado de oradores con la cantidad de sesiones en las que participa (cláusula Unique) 

Se desea visualizar un listado pdf solamente con todos los oradores registrados en alguna sesión. Junto a la imagen y nombre del orador se verá la cantidad de sesiones en las que participa.

Solución: a) Hacer Save As... del procedimiento anterior y salvarlo con el nombre ViewSpeakers. Asígnelo al Módulo Speakers. b) Modificar el layout como se muestra:

13

Práctico – Actualización Ev3 – Web

Codificar el source:

Ejecute el listado pdf. Sobre la solapa del mismo, haga click con el botón derecho del mouse y seleccione Run.

6. Utilizando Data Providers Se desea entregar una mención especial a los oradores que participaron de la sesión marcada como preferida por los usuarios (SessionLikesQty). Observe que en el xpz importado se incorporó una transacción de nombre Mentions que ha sido definida como Business Component. Se necesita diseñar una pantalla que simplemente ofrezca un botón que dispare el proceso de premiación. Se deberá buscar la sesión que tenga mayor valor en el atributo SessionLikesQty, y generar un registro en la tabla MENTION para cada orador participante.

14

Práctico – Actualización Ev3 – Web

Solución: a) Crear un web panel de nombre SpecialMentions dentro del Módulo Speakers y diseñar el form como se muestra (control Layout). b) Insertar un control ErrorViewer, un Text block y un botón como se muestra:

c) Abra y observe el procedimiento BestSession (previamente importado) que devuelva el identificador de la sesión más votada:

d) Crear un Data Provider de nombre DPMentions (dentro del mismo Módulo Speakers) que devolverá la colección de menciones a generar para los correspondientes oradores de la sesión indicada. Obsreve que el output será la transacción Mention (Business Component):

e) Codificar el evento asociado al botón del web panel SpecialMentions para que reciba la salida del data provider y guarde físicamente cada registro en la tabla MENTION.

15

Práctico – Actualización Ev3 – Web

Observe siempre la referencia a los objetos dentro de los respectivos Módulos. Nota: Observar que el mensaje automáticamente se visualiza en el control Error viewer insertado. Vale mencionar que esta implementación permite que se premie varias veces a los oradores de la misma sesión. Si lo desea, implemente algún control que no lo permita.

7. Transiciones Se desea cambiar el efecto de transición entre las páginas de la aplicación.

Solución a) Edite las propiedades de la clase Form del Theme Flat aplicado. b) Seleccione el efecto deseado en las propiedades Enter/Exit Effect.

c) Ejecute nuevamente la aplicación, y observe el comportamiento al pasar de una página a otra.

16

Práctico – Actualización Ev3 – Web

8. Trabajando con Módulos Interface 

Abra los Módulos creados y observe la organización de los objetos dentro de la Interface.

Diagram 

Abra el Módulo Root Module y genere el diagrama completo de interacción entre todos los Módulos de la KB.

Solución a) Abra el Root Module (Click derecho / Open). b) Seleccione la solapa Diagram. c) Click derecho / Add all SubModules

9. Opcional Diseñando la interfaz 

Utilizando un user control, crear un menú de acceso a las funcionalidades implementadas, de forma tal que se encuentre siempre visible.

17

Práctico – Actualización Ev3 – Web

Solución: a) Si bien en la imagen de muestra se utilizó el user control Dolphin Style menu, es posible utilizar cualquier otro user control que implemente un menú de acceso. b) En cualquier caso, verificar que el user control esté integrado a la toolbox de GeneXus.

Nota: Para que el user control quede integrado a la toolbox, deberá copiar la carpeta del user control bajo la carpeta UserControls que se encuentra bajo la carpeta de instalación de GeneXus. Luego por línea de comando ejecutar GeneXus exe /install.

c) Crear un web panel de nombre Menu y arrastrar el user control sobre el form. Observe que se creó la carpeta DolphinStyleMenu (bajo RootModule), y dentro los objetos necesarios para su uso: el SDTMenuData y el data provider DPDolphinMenuData.

d) Edite el data provider DPDolphinMenuData para que devuelva la carga de las opciones que implementó en este práctico:

18

Práctico – Actualización Ev3 – Web

e) Desde el evento Start del web panel Menu, invoque al data provider:

f)

Editar las propiedades del web panel y especificar Type = Component.

g) Editar la master page RwdMasterPage. Arrastrar un control Web Component y asociarlo con el web panel Menu.

19

Práctico – Actualización Ev3 – Web

h) Ejecute nuevamente la aplicación y observe el menú en ejecución.

20