Laboratorio GeneXus Tilo

Aplicaciones Web
Copyright 1988 - 2013| Artech Consultores S. R. L.

Todos los derechos reservados. Este documento no puede ser reproducido en cualquier medio sin el consentimiento
explcito de Artech Consultores S.R.L. La informacin 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 dems marcas mencionadas en
este documento son propiedad de sus respectivos dueos.

Laboratorio GeneXus Tilo. Aplicaciones Web | 2

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

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

Preparacin ....................................................................................................................... 4

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

CSS3, HTML 5, Dominios semnticos y Client Side Validation .............................................. 5

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

Nuevo orden de disparo de eventos en la versin Tilo y mejoras en la experiencia de usuario

en la navegacin de pginas (Single Page Applications)...................................................... 9

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

Mejora de la experiencia de usuario mediante la notificacin de mensajes del server al

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

Cmo recepciono la notificacin y hago una carga liviana de la pantalla ante la llegada de
esta notificacin? ....................................................................................................... 16

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

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

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

Laboratorio GeneXus Tilo. Aplicaciones Web | 3

Objetivo
Ver las nuevas funcionalidades de GeneXus Web para la versin X Evolution 2 y Tilo.

Se trata de una aplicacin 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 tursticos).

Preparacin
Para este laboratorio utilizaremos la versin GeneXus Tilo y el browser Chrome.

El icono asociado se encuentra en el escritorio, ejectelo.

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

En este laboratorio ejecutaremos nuestra aplicacin localmente y posteriormente se generar

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

DBMS: SQL Server

Database Name: labweb
Server Name: localhost
User id: labweb
User password: labweb!13

Luego de verificar la configuracin inicial, ejecutar un Rebuild All; se espera un dilogo

solicitando la creacin de la base de datos del GAM adems de la base de datos de la
aplicacin.

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

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

Ejecutar el procedimiento ProcLoaddata (opcin 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 prctico nuevamente. Para ello seleccionar la opcin View ->
Versions; posteriormente seleccionar el men contextual Freeze y seleccionar un nombre por
ejemplo Inicial.

Laboratorio GeneXus Tilo. Aplicaciones Web | 4

Utilizar la opcin Run para ejecutar la aplicacin, 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 aplicacin de ejemplo.

CSS3, HTML 5, Dominios semnticos 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 continuacin: botn
derecho sobre la solapa -> Apply Pattern -> Work With for Web. Ver figura.

Laboratorio GeneXus Tilo. Aplicaciones Web | 5

Como resultado, se van a crear nuevos objetos que implementan el Patrn Work With de
estas Transacciones.

Tip: Cmo ubicar los objetos generados con el Pattern Work With? Sobre la
solapa del objeto, botn 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 ejecucin 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 Transaccin 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:

Laboratorio GeneXus Tilo. Aplicaciones Web | 6

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. Asegrese de ejecutar Ctrl+F5 en

el browser para recargar la nueva definicin del objeto theme; se espera el siguiente resultado:

2. Ejecutar el link Work With Flights. Ingresar a la Transaccin Flight para ingresar un

vuelo (opcin ). Ingresar valores en los campos Arrival Airport, Departure Airport,
Flight Price, que provoquen error segn las rules de la Transaccin.

Tip: Las reglas de negocio de la Transaccin 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 versin Xev2)

3. En GeneXus, a nivel de la versin 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 versin, en la seccin User

Interface -> Web Interface -> Client Side Validation Behaviour. Para buscar
una propiedad, puede usar el filtro que se encuentra en la parte superior del
dilogo de propiedades.

Hacer Build With This Only de la Transaccin Flight y observar el nuevo comportamiento.

Laboratorio GeneXus Tilo. Aplicaciones Web | 7

 Tip: Cmo hacer Build With This Only de un objeto? Seleccionando el objeto
con botn 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 semntico.

(disponible desde la versin Xev2)

5. Ejecutar la Transaccin Hotel para ingresar un nuevo hotel.

Observar! La validacin automtica sobre el campo Email Contact si el

valor ingresado no cumple con el patrn vlido 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 dilogo de upload que

permite subir una imagen local o ingresar una URL.

Laboratorio GeneXus Tilo. Aplicaciones Web | 8

Parte 2
Ejecutaremos el frontend de nuestra aplicacin de ejemplo; los objetos del frontend utilizan la
Master Page AppMasterpageFront.

Nuevo orden de disparo de eventos en la versin Tilo y mejoras en

la experiencia de usuario en la navegacin de pginas (Single
Page Applications).

1. En GeneXus, abrir el Web Panel AttractionsList. Este Web Panel contiene un grid freestyle
que carga las atracciones tursticas filtrando por el parmetro CategoryId (categora de
atraccin turstica).

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

Page del Web Panel).

Marcar AttractionsList como Startup Object de la aplicacin.

Tip: Cmo marcar un objeto como Startup Object? Seleccionar el objeto con
botn derecho -> Set as Startup Object.

Abrir el objeto Master Page AppMasterpageFront. Ver que contiene un men llamado
SmoothNavMenu (un User Control). A travs de los User Controls se puede enriquecer la
interfaz de usuario y dar mayor flexibilidad al desarrollo.

Laboratorio GeneXus Tilo. Aplicaciones Web | 9

En la solapa de eventos, verificar que se encuentre descomentado el siguiente cdigo 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 categoras tursticas y carga una coleccin
de datos estructurados que devuelve al llamador.

Para terminar con la construccin del men en la Master Page, descomentar el siguiente
cdigo:

Laboratorio GeneXus Tilo. Aplicaciones Web | 10

Event SmoothNavMenu1.OnClick
call(&SmoothNavMenuSelectedItem.Link)
EndEvent

Ejecutar F5 (Run).

Observar! En ejecucin cuando se selecciona una opcin del men se muestra

la lista de atracciones tursticas con un efecto de transicin. Este efecto
se configura a travs 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 opcin turstica 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 pginas (salvo los
RecentLinks). Esto es Single Page Applications (SPA). Usando Ajax y SPA se

Laboratorio GeneXus Tilo. Aplicaciones Web | 11

 evita el parpadeo de la pantalla en la navegacin de una pgina a otra.

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

Recibe como parmetro AttractionId y despliega informacin del paquete turstico en
promocin.

Este Web Panel contiene un botn 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
autenticacin usaremos el GAM (un mdulo de seguridad que se incorpora de manera
automtica a la base de conocimientos).

El botn Book usa el tipo de datos Window para que se abra una ventana embebida en la
pgina 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 automticamente 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 versin de la KB).

Laboratorio GeneXus Tilo. Aplicaciones Web | 12

En ejecucin del Web Panel AttractionForm presionar el botn Book. Se abre el objeto
GAMLogin, en donde debe ingresar con el usuario: john / john.
Confirmar la reserva.

Laboratorio GeneXus Tilo. Aplicaciones Web | 13

 Observar! El Web Panel de login aparece de manera automtica porque el
Web Panel a ejecutar (TripReservationForm) tiene la propiedad Integrated
security level = Authentication.

Parte 3
Seguimos trabajando sobre el frontend de la aplicacin.

Mejora de la experiencia de usuario mediante la notificacin 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 atraccin turstica 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 atraccin.

Queremos resolver lo siguiente

Laboratorio GeneXus Tilo. Aplicaciones Web | 14

 Cuando john ingresa un nuevo comentario, un usuario distinto (puede ser annimo)
debe recibir el comentario de john sin necesidad de refrescar la pantalla.

Ante la notificacin de un nuevo comentario no se debe refrescar todo el grid de

comentarios, solo se debe agregar una lnea con el nuevo comentario.

La solucin consiste en resolver las siguientes preguntas

Cmo envo una notificacin 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 enva una
notificacin a todos con el comentario nuevo.

Ver el cdigo 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.

Laboratorio GeneXus Tilo. Aplicaciones Web | 15

Cmo recepciono la notificacin y hago una carga liviana de la pantalla
ante la llegada de esta notificacin?
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 notificacin recibida y agrega una lnea al grid con dicha informacin.

Observar! Dentro del Evento OnMessage se obtiene la notificacin y se carga

en el grid. El comando grid.load dentro de este evento hace que solo se cargue
una lnea 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 atraccin, notar que al confirmar un comentario en una de las pginas,
se refresca en ambas instancias.

Laboratorio GeneXus Tilo. Aplicaciones Web | 16

Parte 4
Realizar un deploy de la aplicacin en el cloud.

Crear un nuevo environment de nombre Java Cloud con la siguiente configuracin:

Language: Java
Data Source: mySQL
Target Path: JavaCloud

Utilizar la opcin Set as Target Environment en la seccin de Preferences (en el

Knowledge Base Navigator) sobre el nuevo environment.

En las propiedades del generador especificamos Deploy to cloud = yes y tambin 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. Adems, la propiedad Server Name es: apps4.genexus.com

Se espera una configuracin similar a:

Laboratorio GeneXus Tilo. Aplicaciones Web | 17

Ejecutar un Rebuild All; para configurar el ambiente en la nube; se espera la autenticacin
con GXtechnical, creacin de la base de datos del GAM y aplicacin adems de la generacin y
compilacin de fuentes.

Ejecutar nuevamente el procedimiento ProcLoaddata utilizando la opcin Run with this only.

Utilizar la opcin Run para ejecutar la aplicacin, se espera que ejecute el objeto AttractionsList
en el ambiente generado en la nube.

Si lo desea puede revisar las diferentes partes del prctico en este caso ejecutando en un
ambiente paralelo en la nube.

Gracias por participar!

Laboratorio GeneXus Tilo. Aplicaciones Web | 18

Glosario
Dominios semnticos

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

Client Side Validation

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

Single Page Applications

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

Web Notifications

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

Web Fonts

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

Mejoras en theme editor: import css

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

Cloud Prototyping

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

Multimedia Fields

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

Laboratorio GeneXus Tilo. Aplicaciones Web | 19