Laboratorio desarrollo de aplicaciones WEB con GeneXus Tilo
Upcoming SlideShare
Loading in...5
×
 

Laboratorio desarrollo de aplicaciones WEB con GeneXus Tilo

on

  • 2,162 views

Laboratorio desarrollo de aplicaciones WEB con GeneXus Tilo

Laboratorio desarrollo de aplicaciones WEB con GeneXus Tilo

Statistics

Views

Total Views
2,162
Slideshare-icon Views on SlideShare
2,020
Embed Views
142

Actions

Likes
0
Downloads
58
Comments
0

2 Embeds 142

http://www5.genexus.com 141
https://www.facebook.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Laboratorio desarrollo de aplicaciones WEB con GeneXus Tilo Laboratorio desarrollo de aplicaciones WEB con GeneXus Tilo Document Transcript

    • 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.
    • Laboratorio GeneXus Tilo. “Aplicaciones Web” | 3 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
    • Laboratorio GeneXus Tilo. “Aplicaciones Web” | 4 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”.
    • Laboratorio GeneXus Tilo. “Aplicaciones Web” | 5 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.
    • Laboratorio GeneXus Tilo. “Aplicaciones Web” | 6 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:
    • Laboratorio GeneXus Tilo. “Aplicaciones Web” | 7 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.
    • Laboratorio GeneXus Tilo. “Aplicaciones Web” | 8 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.
    • Laboratorio GeneXus Tilo. “Aplicaciones Web” | 9 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.
    • Laboratorio GeneXus Tilo. “Aplicaciones Web” | 10 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:
    • Laboratorio GeneXus Tilo. “Aplicaciones Web” | 11 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
    • Laboratorio GeneXus Tilo. “Aplicaciones Web” | 12 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).
    • Laboratorio GeneXus Tilo. “Aplicaciones Web” | 13 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.
    • Laboratorio GeneXus Tilo. “Aplicaciones Web” | 14 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…
    • Laboratorio GeneXus Tilo. “Aplicaciones Web” | 15  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.
    • Laboratorio GeneXus Tilo. “Aplicaciones Web” | 16 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.
    • Laboratorio GeneXus Tilo. “Aplicaciones Web” | 17 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:
    • Laboratorio GeneXus Tilo. “Aplicaciones Web” | 18 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!
    • Laboratorio GeneXus Tilo. “Aplicaciones Web” | 19 Glosario  Dominios semánticos 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