Laboratorio WEB GXEv3

Laboratorio GeneXus Xev3
“Aplicaciones Web”

Laboratorio GeneXus X Evolution 3. “Aplicaciones Web” | 2
Copyright 1988 - 2014| Artech Consultores S. R. L. 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.

Contenido
Objetivo ............................................................................................................................ 4
Preparación ....................................................................................................................... 4
Ejecución de la aplicación inicial como en versiones anteriores ............................................... 5
Haciendo que la aplicación sea Responsive ........................................................................... 9
Web Abstract Editor .......................................................................................................... 11
Smooth - Ejecución optimizada de eventos haciendo la interacción con la aplicación más rápida y fluida. ........................................................................................................................... 12
Smooth - Transiciones (SPA) ............................................................................................. 15
Smooth - WEB Notifications ............................................................................................... 16
¡Gracias por participar! ..................................................................................................... 20
Glosario ........................................................................................................................... 21

Objetivo
Ver las nuevas funcionalidades de GeneXus X Evolution 3 para generar aplicaciones Web.
Se trata de una aplicación de eventos para manejar charlas y oradores, compuesta por un backend para ingreso de datos, y un frontend, destinado a los participantes del evento.
Preparación
Para este laboratorio utilizaremos la versión GeneXus Xev3 Upgrade 2 y el browser Chrome.
El icono asociado a GeneXus, se encuentra en el escritorio, ejecútelo.
Como primer paso, crear una nueva Base de Conocimiento configurando lo siguiente:
 Name = “LabWeb<NroUsuario>” El nro de Usuario lo encuentra en el monitor.
 Directory = C:models
 Prototyping Environment = C# Environment
 En Advanced, configurar Server = “SERVER2012-5GENEXUS”, y marcar la opción “Use Windows NT integrated Security”

Importe el siguiente xpz: G:LabWebGx24-LabWebInicial.xpz
En este laboratorio ejecutaremos nuestra aplicación en la Nube
Ejecución de la aplicación inicial como en versiones anteriores
Comenzaremos ejecutando la aplicación con la interfaz ‘vieja’, y en el correr de este laboratorio iremos incorporando las nuevas funcionalidades y notaremos las diferencias en ejecución.

Para poder ejecutar en la Nube, cambiar la propiedad “Deploy to cloud” = Yes . La misma se encuentra aquí:
Luego presione F5. Solicitará el ingreso de su usuario GxTechnical. Ingrese el suyo o cancele si no cuenta con él. Luego confirmar la creación de la base de datos y tablas del sistema en la nube. Haga click en el botón ‘Create’ para ejecutar la reorganización. Posteriormente hará el build y deploy de la aplicación.
Se ejecutará el Developer Menu en el navegador, entre al link Home

Observar la interfaz de la aplicación generada, como muestra las imágenes a continuación:
Entre al link “Work with Countries”

Haciendo que la aplicación sea Responsive
Haremos que nuestra aplicación Event Day sea Responsive. Responsive significa que las páginas generadas se ajusten automáticamente según el tamaño de la pantalla en la que se muestran (monitor grande, monitor mediano, tabletas o teléfonos).
Solución
1. Configurar las propiedades “Web Form Default” = Responsive Web Design, y “Default Web Form Editor” = Abstract Layout Las mismas se encuentran en las propiedades de la versión de la KB, bajo el grupo ‘User Interface’

2. Hacer Rebuild All y luego F5 (Run) para ver en ejecución estos objetos. Se ejecutará el Developer Menu. Entrar nuevamente al link Home.
3. Acceda al Work With Countries, Work With Speaker y Work With Session para ver la nueva interfaz obtenida con solo el cambio de la propiedad.
4. Minimizar el tamaño de la ventana del browser
Observar cómo automáticamente se van ‘eliminando’ columnas a medida que se va achicando la ventana, en vez de aparecer scrollbars. Y vuelven a aparecer a medida que se agranda. Observar cómo cambia el lugar del botón Insert al cambiar el tamaño de la pantalla.

Web Abstract Editor
Para generar las aplicaciones responsive, es necesario utilizar el nuevo editor, conocido como Abstract Layout.
El editor utiliza Responsive Tables para poder generar estas páginas. Una Responsive Table es una tabla como la del editor HTML, pero permite configurar diferentes tamaños para cada pantalla.
Veamos un ejemplo. Abrir el web form de la transacción Country. Observar los controles y propiedades. Las responsive tables son los controles ‘rosados’. En las siguientes figuras se notan las diferencias entre ambos editores
Editor HTML
Editor Abstract Layout

Smooth - Ejecución optimizada de eventos haciendo la interacción con la aplicación más rápida y fluida.
Ejemplo 1: Refresh de SOLO un grid
La idea es contar con un web panel que permita seleccionar el título de una charla en una grilla, y en otra grilla al costado muestre los datos de los oradores
Solución
1. Abrir el web panel SpeakersAndSessions (se encuentra bajo Root Module)
2. Observar que se cuenta con dos grids. El verde a la izquierda son las charlas, y el celeste a la derecha (es un grid free style) con los oradores.
3. Ir a los Eventos y declarar el siguiente Evento:

4. Especificar en el Grid2 (Oradores) la siguiente condición:
Haga F5 (Run) y desde el Develper Menu, llame al web panel SpeakersAndSessions
Al declarar el Grid2.Refresh() en forma explícita, sucede que al seleccionar el título de una charla se provoque la carga SOLO de los oradores en el otro grid SIN refrescar el resto de la página.
Para contar con este tipo de aplicaciones en Genexus, tan solo hay que tener seteada la propiedad “Web user Experience” = Smooth. La propiedad se encuentra a nivel de versión y también a nivel de objeto.

Ejemplo 2: Actualizando SOLO las líneas de un grid
En el web panel SpeakersAndSessions se desea ahora poder visualizar la cantidad de “Likes” que tiene cada charla. 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
Abrir el web panel SpeakersAndSessions y agregar el siguiente evento asociado a la variable &Like. Ésto permite que al hacer click sobre ella se dispare el procedimiento OneLike (ya se encuentra en la kb) que recibe el identificador de la charla y actualiza la cantidad de “likes”.
Haga F5 para ejecutar la aplicación y probar la nueva funcionalidad implementada, sumando ‘Likes’ a las charlas.
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.

Smooth - Transiciones (SPA)
Se desea cambiar el efecto de transición entre las páginas de la aplicación. Deseamos que cuando se llame a una página B desde una página A, que la página B tenga el efecto de venir desde abajo, y que la página A tenga el efecto de irse hacia abajo.
Solución
1. Abrir el tema Flat. Edite las propiedades de la clase Form .
2. Seleccione el efecto deseado en las propiedades Enter/Exit Effect.

Ejecute nuevamente la aplicación – F5 – y entre al link Home, y luego al Work With Sessions y vuelva al Home. Observe cómo aparecen y desaparecen las páginas al navegar por las mismas.
Nota: es necesario realizar un CTRL+F5 en el navegador para no utilizar la versión anterior del theme, ya que ésta puede encontrarse cacheada en el navegador.
Smooth - WEB Notifications
La idea es que la aplicación permita ingresar comentarios sobre las charlas, y que estos comentarios sean visibles por todos los usuarios que estén conectados en ese momento.
Por ejemplo cuando alguien, llamémosle John, ingresa un nuevo comentario, un usuario distinto (puede ser anónimo) debe recibir el comentario de John sin necesidad de refrescar la pantalla.
Además se requiere que ante la notificación de un nuevo comentario no se debe refrescar todo el grid de comentarios, sino que solo se debe agregar una línea con el nuevo comentario.
Veámoslo en ejecución.
Para esta funcionalidad se requiere IIS8 y compilar con el framwork 4.0 de Net. Cambiar las siguientes propiedades del generador como se muestra en las figuras:
 “Compiler Path” = C:WindowsMicrosoft.NETFrameworkv4.0.30319csc.exe
 “IIS Version” = IIS8

Ejecute la aplicación, F5 (Run) . Llame al web panel SessionsList y navegue a alguna de las charlas. Esto mismo hágalo dos veces, de manera de tener dos instancias del browser levantado sobre la misma página / charla.
Entre al link “Show Comments”, e ingrese su nombre y un comentario y haga click en el botón “Send comment”.
Observar! Al ingresar el comentario, SOLO se refresca el grid de los comentarios y no toda la página.
Observar! Al ingresar el comentario en una de las instancias del browser, éste aparece automáticamente en la otra instancia del browser.

¿Cómo fue implementado?
Abrir el web panel SessionInfoAndComments (se encuentra dentro del Folder WebNotifications). Desde este web panel el usuario puede ingresar comentarios acerca de la charla. Contiene un link para que el usuario pueda ver los comentarios e ingresar uno nuevo (link Show Comments).
Este link crea un web component llamado SessionComments que lista los comentarios de esa charla.
¿Cómo envío una notificación a todos?
En el evento “Send Comment” del web component SessionComments (usado para agregar un comentario) se invoca un procedimiento, el AddPost, que permite ingresar el comentario en la base de datos y enviar una notificación a todos a través de una llamada al procedimiento NewPostNotification
Ver el código del procedimiento NewPostNotification.
Observar! En el NewPostNotification, llamado por el AddPost, se usa el tipo de datos WebNotification para hacer un broadcast a todos los usuarios cuando se ingresa el nuevo comentario. La variable &NotificationInfo es de un tipo de datos predefinido – NotificationInfo – y permite persistir los datos a notificar.
¿Cómo recepciono la notificación y hago una carga liviana de la pantalla ante la llegada de esta notificación?
Abrir el web component SessionComments, que es el que maneja los comentarios utilizando las notificaciones. Observe el evento ‘OnMessage’

Este evento procesa la notificación recibida y agrega una línea al grid con dicha información. Observar! En el evento OnMessage se obtiene la notificación y se carga en el grid. El comando Grid1.Load() dentro de este evento hace que solo se cargue una línea del grid con el contenido deseado, no se refresca el grid por entero.

¡Gracias por participar!

Glosario
En los siguientes links puede encontrar documentación para profundizar en lo visto en este laboratorio, así como otros documentos relacionados que pueden resultarles interesantes.
 Responsive Web Design (RWD) http://wiki.genexus.com/commwiki/servlet/hwikibypageid?25186
 Web Abstract Editor http://wiki.genexus.com/commwiki/servlet/hwikibypageid?24795
 Smooth http://wiki.genexus.com/commwiki/servlet/hwikibypageid?25801
 Single Page Applications (SPA) http://wiki.gxtechnical.com/commwiki/servlet/hwikibypageid?22455
 Transitions http://wiki.genexus.com/commwiki/servlet/hwikibypageid?22460
 Web Notifications http://w iki.gxtechnical.com/commwiki/servlet/hwikibypageid?22442

Laboratorio WEB GXEv3

Más contenido relacionado

Destacado

Similar a Laboratorio WEB GXEv3

Más de GeneXus

Último

Laboratorio WEB GXEv3