Actualización a GX Ev3 - GeneXus

Actualización a GX Ev3

Ejercicios Prácticos

2

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.

3


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

4


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:

5


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:

6


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).

7


4. Diseñando pantallas interactivas (Web

Abstract Editor)

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:

8


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:

9


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:

10


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.

11


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”.

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).

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.

12


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):

13


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:

14


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.

15


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.

16


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.

17


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.

18


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:

19


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.

20


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

Actualización a GX Ev3 - GeneXus

Documents

Transcript of Actualización a GX Ev3 - GeneXus