Laboratorio desarrollo de aplicaciones WEB con GeneXus Tilo

Laboratorio GeneXus Tilo “Aplicaciones Web”

Laboratorio GeneXus Tilo. “Aplicaciones Web” | 2

Copyright 1988 - 2013| 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

Contenido .......................................................................................................................... 3

Objetivo ............................................................................................................................ 4

Preparación ....................................................................................................................... 4

Parte 1 .............................................................................................................................. 5

CSS3, HTML 5, Dominios semánticos y Client Side Validation .............................................. 5

Parte 2 .............................................................................................................................. 9

Nuevo orden de disparo de eventos en la versión Tilo y mejoras en la experiencia de usuario

en la navegación de páginas (Single Page Applications). ..................................................... 9

Parte 3 ............................................................................................................................ 14

Mejora de la experiencia de usuario mediante la notificación de mensajes del server al

cliente: Web Notifications .............................................................................................. 14

Cómo recepciono la notificación y hago una carga liviana de la pantalla ante la llegada de

esta notificación? ....................................................................................................... 16

Parte 4 ............................................................................................................................ 17

¡Gracias por participar! ..................................................................................................... 18

Glosario ........................................................................................................................... 19


Objetivo

Ver las nuevas funcionalidades de GeneXus Web para la versión X Evolution 2 y Tilo.

Se trata de una aplicación de una agencia de viajes, compuesta por un backend para ingreso de

datos, y un frontend, destinado al usuario final (que selecciona y compra paquetes turísticos).

Preparación

Para este laboratorio utilizaremos la versión GeneXus Tilo y el browser Chrome.

El icono asociado se encuentra en el escritorio, ejecútelo.

Abrir la Base de Conocimiento que se encuentra en C:\LabWeb\labweb

En este laboratorio ejecutaremos nuestra aplicación localmente y posteriormente se generará

un ambiente en la nube. Sobre el environment “Java Environment” (local) asegurarse de tener

la siguiente configuración

DBMS: SQL Server

Database Name: labweb

Server Name: localhost

User id: labweb

User password: labweb!13

Luego de verificar la configuración inicial, ejecutar un Rebuild All; se espera un diálogo

solicitando la creación de la base de datos del GAM además de la base de datos de la

aplicación.

Abrir el procedimiento ProcLoaddata y asegurarse que el valor de la variable &Path sea:

&Path = "C:\LabWeb\material\Data\Data\"

Ejecutar el procedimiento ProcLoaddata (opción Run with this only) para inicializar la base de

datos.

Si desea puede hacer un Freeze del estado actual de la base de conocimiento en caso que

quiera volver al inicio del práctico nuevamente. Para ello seleccionar la opción View ->

Versions; posteriormente seleccionar el menú contextual Freeze y seleccionar un nombre por

ejemplo “Inicial”.


Utilizar la opción Run para ejecutar la aplicación, se abre el DeveloperMenu.xml en el browser

predeterminado, que contiene la lista de Objetos Web de nuestra KB.

Parte 1

Ejecutaremos el Backend de nuestra aplicación de ejemplo.

CSS3, HTML 5, Dominios semánticos y Client Side Validation

Aplicaremos el Pattern Work With para Web a las Transacciones Flight, Airport (Folder

ModuleFlights) y Hotel (Folder ModuleAttractions) como se indica a continuación: botón

derecho sobre la solapa -> Apply Pattern -> Work With for Web. Ver figura.


Como resultado, se van a crear nuevos objetos que implementan el Patrón Work With de

estas Transacciones.

Tip: Cómo ubicar los objetos generados con el Pattern Work With? Sobre la

solapa del objeto, botón derecho -> Locate in Folder View. A la izquierda (en

el Folder View) tendremos el objeto seleccionado y la lista de objetos generados

por el pattern.

Hacer F5 (Run) para ver en ejecución estos objetos.

Terminado el Build, observar que en el browser se ejecuta el DeveloperMenu.xml, que contiene

la lista de Objetos Web de nuestra KB.

Hacer click en el Objeto Home.

1. Ejecutar el link Work With Airport. Acceder a los diferentes aeropuertos existentes usando

la Transacción Airport.

Observar! El objeto Theme (Cascading Style Sheet) usado es el

GeneXusXev2. Se realizaron cambios para usar algunas propiedades CSS3;

verificar el grupo “Text Shadow” (subgrupo Text) de la clase TextBlockHeader.

Los valores predeterminados son:


Modificar los valores de las siguientes propiedades de la clase TextBlockHeader (Theme

GeneXusXev2):

Horizontal Shadow = 10px

Vertical Shadow = 10px

Blur = 10px

Ejecutar F5 y verificar el cambio visual en la Master Page. Asegúrese de ejecutar Ctrl+F5 en

el browser para recargar la nueva definición del objeto theme; se espera el siguiente resultado:

2. Ejecutar el link Work With Flights. Ingresar a la Transacción Flight para ingresar un

vuelo (opción ). Ingresar valores en los campos Arrival Airport, Departure Airport,

Flight Price, que provoquen error según las rules de la Transacción.

Tip: Las reglas de negocio de la Transacción se ven y se pueden editar

usando el tab rules de la misma.

Observar! El comportamiento del despliegue de los mensajes de error en

el disparo de las rules. (disponible desde la versión Xev2)

3. En GeneXus, a nivel de la versión cambiar las siguientes propiedades:

Stop on error = Yes

Validation Message Position = Top

Validation Message Overlap Adyacent Controls = No

Validation Message Display = One at a time

Tip: Las propiedades se encuentran a nivel de la versión, en la sección User

Interface -> Web Interface -> Client Side Validation Behaviour. Para buscar

una propiedad, puede usar el filtro que se encuentra en la parte superior del

diálogo de propiedades.

Hacer Build With This Only de la Transacción Flight y observar el nuevo comportamiento.


Tip: Cómo hacer Build With This Only de un objeto? Seleccionando el objeto

con botón derecho se habilita el Build With This Only del mismo.

4. Ejecutar el link Work With Hotel.

Observar! El campo Email Contact Hotel es un dominio semántico.

(disponible desde la versión Xev2)

5. Ejecutar la Transacción Hotel para ingresar un nuevo hotel.

Observar! La validación automática sobre el campo Email Contact si el

valor ingresado no cumple con el patrón válido para un email: “Field Hotel

contact email does not match the specified pattern” (utilizando la propiedad

Regular Expression).

Observar! El campo image en modo editable abre un diálogo de upload que

permite subir una imagen local o ingresar una URL.


Parte 2

Ejecutaremos el frontend de nuestra aplicación de ejemplo; los objetos del frontend utilizan la

Master Page AppMasterpageFront.

Nuevo orden de disparo de eventos en la versión Tilo y mejoras en

la experiencia de usuario en la navegación de páginas (Single

Page Applications).

1. En GeneXus, abrir el Web Panel AttractionsList. Este Web Panel contiene un grid freestyle

que carga las atracciones turísticas filtrando por el parámetro CategoryId (categoría de

atracción turística).

El panel está contenido en la Master Page AppMasterpageFront (ver la propiedad Master

Page del Web Panel).

Marcar AttractionsList como Startup Object de la aplicación.

Tip: Cómo marcar un objeto como Startup Object? Seleccionar el objeto con

botón derecho -> Set as Startup Object.

Abrir el objeto Master Page AppMasterpageFront. Ver que contiene un menú llamado

SmoothNavMenu (un User Control). A través de los User Controls se puede enriquecer la

interfaz de usuario y dar mayor flexibilidad al desarrollo.


En la solapa de eventos, verificar que se encuentre descomentado el siguiente código para que

se pueble el menú con la salida del Data Provider GetCategories.

Sub 'SmoothNavMenu'

&SmoothNavMenuData = GetCategories()

EndSub

El Data Provider GetCategories barre la tabla de categorías turísticas y carga una colección

de datos estructurados que devuelve al llamador.

Para terminar con la construcción del menú en la Master Page, descomentar el siguiente

código:


Event SmoothNavMenu1.OnClick

call(&SmoothNavMenuSelectedItem.Link)

EndEvent

Ejecutar F5 (Run).

Observar! En ejecución cuando se selecciona una opción del menú se muestra

la lista de atracciones turísticas con un efecto de transición. Este efecto

se configura a través del objeto Theme de GeneXus; las propiedades Enter

Effect y Close Effect de la clase Form; notar que el frontend utiliza la clase

Form2.

Observar! Si se selecciona una opción turística de la lista se carga el detalle

de la misma (Web Panel AttractionForm) y permanece fijo en pantalla el

contenido de la Master Page que contiene a ambas páginas (salvo los

RecentLinks). Esto es Single Page Applications (SPA). Usando Ajax y SPA se


evita el parpadeo de la pantalla en la navegación de una página a otra.

2. Abrir el Web Panel AttractionForm porque estaremos trabajando sobre él en breve.

Recibe como parámetro AttractionId y despliega información del paquete turístico en

promoción.

Este Web Panel contiene un botón Book que permite realizar la reserva del paquete. Como

es de esperar al momento de hacer la reserva se solicita al usuario que se autentique. Para la

autenticación usaremos el GAM (un módulo de seguridad que se incorpora de manera

automática a la base de conocimientos).

El botón Book usa el tipo de datos Window para que se abra una ventana embebida en la

página con un nuevo form (objeto TripReservationForm).

Event 'Book'

&window.Object = TripReservationForm.Create(PackTourId)

&window.Open()

EndEvent

El objeto TripReservationForm tiene la propiedad Integrated Security Level =

Authentication, por lo cual al momento de ejecutar se verifica automáticamente si el usuario

está logueado, y de no estarlo se invoca al objeto configurado en la propiedad Login Object

for Web (que se encuentra a nivel de la versión de la KB).


En ejecución del Web Panel AttractionForm presionar el botón Book. Se abre el objeto

GAMLogin, en donde debe ingresar con el usuario: john / john.

Confirmar la reserva.


Observar! El Web Panel de login aparece de manera automática porque el

Web Panel a ejecutar (TripReservationForm) tiene la propiedad Integrated

security level = Authentication.

Parte 3

Seguimos trabajando sobre el frontend de la aplicación.

Mejora de la experiencia de usuario mediante la notificación de

mensajes del server al cliente: Web Notifications

Seguiremos trabajando sobre el Web Panel AttractionForm. Este Web Panel permite al

usuario ingresar comentarios acerca de la atracción turística que muestra. Contiene un link

para que el usuario pueda ver los comentarios e ingresar uno nuevo (link Show Comments).

El link Show Comments crea un Web Component llamado CommentsWP que lista los

comentarios de esa atracción.

Queremos resolver lo siguiente…


Cuando john ingresa un nuevo comentario, un usuario distinto (puede ser anónimo)

debe recibir el comentario de john sin necesidad de refrescar la pantalla.

Ante la notificación de un nuevo comentario no se debe refrescar todo el grid de

comentarios, solo se debe agregar una línea con el nuevo comentario.

La solución consiste en resolver las siguientes preguntas

Cómo envío una notificación a todos?

En el evento AddPost del Web Component CommentsWP (que se usa para agregar un

comentario) se invoca un procedimiento que permite ingresar el comentario en la base de datos

y luego se llama se invoca a un Procedure (NewPostNotification), que envía una

notificación a todos con el comentario nuevo.

Ver el código del Procedure NewPostNotification.

Observar! En el Procedure NewPostNotification, llamado por el

Procedure 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 Panel CommentsWP. Este es el Web Panel que lista los comentarios.

Descomentar y analizar el evento OnMessage.

Event OnMessage(&NotificationInfo)

if (&NotificationInfo.Object="Post")

&postid = &NotificationInfo.Id.Trim().ToNumeric()

&postid.Visible=false

&commentNotificationInfo.FromJson(&NotificationInfo.Message)

&PostTitle = &commentNotificationInfo.PostTitle

&PostCustomerName = &commentNotificationInfo.PostCustomerName

&PostCustomerPhoto.FromURL(&commentNotificationInfo.PostCustomerPhoto)

if &PostCustomerPhoto.IsEmpty()

&PostCustomerPhoto.FromImage("anyone")

endif

grid1.Load()

endif

Endevent

Este evento procesa la notificación recibida y agrega una línea al grid con dicha información.

Observar! Dentro del Evento OnMessage se obtiene la notificación y se carga

en el grid. El comando grid.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.

Para validar dicho mecanismo puede ejecutar 2 instancias del browser y agregar diferentes

comentarios a la misma atracción, notar que al confirmar un comentario en una de las páginas,

se refresca en ambas instancias.


Parte 4

Realizar un deploy de la aplicación en el cloud.

Crear un nuevo environment de nombre “Java Cloud” con la siguiente configuración:

Language: Java

Data Source: mySQL

Target Path: JavaCloud

Utilizar la opción Set as Target Environment en la sección de Preferences (en el

Knowledge Base Navigator) sobre el nuevo environment.

En las propiedades del generador especificamos Deploy to cloud = yes y también el Deploy

Virtual Directory, al cual le asignaremos labweb concatenado con su usuario GXtechnical.

Luego, en la propiedad Deploy Server URL, escribimos: http://apps4.genexus.com

El resultado esperado es similar al siguiente:

Modificar las propiedades del datastore default de la misma forma; para las propiedades

Database name, User id y User password utilizar labweb concatenado con el usuario de

GXtechnical. Además, la propiedad Server Name es: apps4.genexus.com

Se espera una configuración similar a:


Ejecutar un Rebuild All; para configurar el ambiente en la nube; se espera la autenticación

con GXtechnical, creación de la base de datos del GAM y aplicación además de la generación y

compilación de fuentes.

Ejecutar nuevamente el procedimiento ProcLoaddata utilizando la opción Run with this only.

Utilizar la opción Run para ejecutar la aplicación, se espera que ejecute el objeto AttractionsList

en el ambiente generado en la nube.

Si lo desea puede revisar las diferentes partes del práctico en este caso ejecutando en un

ambiente paralelo en la nube.

¡Gracias por participar!


Glosario

Dominios semánticos

http://wiki.gxtechnical.com/commwiki/servlet/hwikibypageid?17227

Client Side Validation


Single Page Applications


Web Notifications


Web Fonts


Mejoras en theme editor: import css


Cloud Prototyping


Multimedia Fields










Laboratorio desarrollo de aplicaciones WEB con GeneXus Tilo

Documents

Transcript of Laboratorio desarrollo de aplicaciones WEB con GeneXus Tilo