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:LabWeblabweb
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:LabWebmaterialDataData"
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

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (20)

Similaire à Laboratorio desarrollo de aplicaciones WEB con GeneXus Tilo

Similaire à Laboratorio desarrollo de aplicaciones WEB con GeneXus Tilo (20)

Plus de GeneXus

Plus de GeneXus (20)

Laboratorio desarrollo de aplicaciones WEB con GeneXus Tilo