107

User Controls

En este capítulo veremos algunas de las funcionalidades web mas trascendentes que permiten generar aplicaciones web ricas en interfaz y que mejoran la usabilidad e interacción con el usuario final.

Comenzaremos por ver los User Controls.

108

User Controls

Definición Un User Control (UC) es un control Web creado por el usuario, que puede insertarse en el form de cualquier objeto Web de GeneXus (Web Transactions, Web Panels) para enriquecer el aspecto y funcionalidad de las aplicaciones generadas.

Chart

ImageGallery

Map

Treeview

QueryViewer

USER CONTROLS ESTANDAR DE GENEXUS

A través del User Control Editor se podrán crear y/o editar nuevos UC e incorporarlos a GeneXus.

Características generales

Por más detalles, consultar:http://wiki.gxtechnical.com/commwiki/servlet/hwikibypageid?5273

109

Ejemplo

1) Arrastrar el UC sobre el form.

2) Configurar las propiedades (F4)

User ControlsCaracterísticas generales

110

Ejemplo

SDT automáticamentecreado al insertar el UC en el form

Objetivo del UC Chart: Desplegar gráficos generados en forma dinámica

User ControlsChart

111

Objetivo del UC ImageGallery: Ofrecer una forma elegante de desplegar e interactuar con imágenes.

User ControlsImageGallery

112

Objetivo del UC Map: Incluir un mapa en el Web Form y determinar puntos sobre él.

User ControlsMap

113

Objetivo del UC Treeview: Proveer de una forma visual para presentar datos jerárquicos.

User ControlsTreeview

114

¡Utilizando el User Control Editor (UCE), se podrán crear y/o editar nuevos User Controls e incorporarlos a GeneXus!

User Control EditorGeneralidades

UCE: Procedimiento general

• Abrir el UCE:  Archivo UserControlEditor.exe, en el directorio de instalación de GX.

• Crear o editar el UC. Definir sus propiedades y comportamiento. Salvar.

• Ejecutar GeneXus.exe /install por línea de comando. Abrir GeneXus en forma habitual.

- Desarrolladores que utilizan UC en sus aplicaciones.

- Programadores de User Controls

Esto provoca que se pueda independizar:

Procedimiento• Abrir el UCE (UserControlEditor.exe que se encuentra bajo el directorio de instalación de GeneXus.• Crear y/o editar el UC.

Importante: Todos los UC deberán almacenarse bajo el directorio User Controls que se encuentra, a su vez, bajo el directorio de instalación de GeneXus.

• Definir las propiedades y programar el comportamiento del UC. La programación se realizará utilizando código Jscript, el cual será luego incorporado a GeneXus. Salvar el UC.

• Cerrar GeneXus (si es que se encontraba abierto), y ejecutar por línea de comando el archivo GeneXus.exe /install (que se encuentra bajo el directorio de instalación de GeneXus).

• Ejecutar GeneXus en la forma habitual. ¡El nuevo UC aparecerá en la Toolbox como un nuevo User Control integrado a GeneXus!

115

User Control EditorEjemplo: Crear un UC que despliegue el texto “Hello World!!”

1) Abrir el UCE, y crear el nuevo UC con nombre Hello World. Grabarlo en la carpeta User Controls bajo el directorio de instalación de GeneXus.

• Hello WorldProperties.xml: guarda la definición de las propiedades

• Hello WorldRender.xsl:guarda la definición del comportamiento del UC cuando está siendo diseñando en GX.

• Hello WorldRender.js: guarda la definición del comportamiento del UC cuando está en ejecución.

Todos los nombres de archivos que se observan en la imagen son creados en forma automática por el UCE.

116

User Control Editor(Continuación)

2) Properties Definición de Propiedades

Se definen los valores, alcance, tipo de dato y valor por defecto de la propiedad seleccionada.

Definición de las Propiedades.

117

User Control Editor

3) JScript Runtime Render Programación del comportamiento del UC cuando esé en ejecución. Se deberá utilizar código JScript.

Código ingresado por el analista.Determina el comportamiento del UC en ejecución.

Áreas en gris: definidas por GX en forma automática.

(Continuación)

118

User Control Editor(Continuación)

4) xsl Designer Render Programación de la apariencia que tendrá el UC insertado en el web form.

Provocará que el UC se vea con su nombre dentro del web form

119

User Control Editor

5) Salvar el UC y ejecutar en línea de comando el archivo GeneXus.exe /install. Al abrir luego GX en forma habitual, el nuevo UC estará incorporado a la Toolbox. Arrastrar el UC al form de un Web Panel, setear sus propiedades y ejecutar.

Se arrastra el UC al form de un Web Panel

Finalmente, el Web Panel en ejecución.

(Continuación)

120

Tipo de datos Window

121121

Tipo de datos Window

El tipo de datos Windows permite abrir un objeto o una URL externa, en una ventana emergente (ventana popup).

Si la página requerida está en el mismo servidor que la página que la invoca, la ventana abierta será del tipo modal.

Objetos soportados:

•Web Panels•Web Components con propiedad: URL Access=Yes•Transacciones con propiedades: Type=Component y URL Access=Yes•Procedimientos con propiedad: Call Protocol = HTTP Web Panels

Por más información, consultar:http://wiki.gxtechnical.com/commwiki/servlet/hwikibypageid?7112

122122

Tipo de datos Window

Ejemplo: Abrir Web Panel Tourist Attraction Category

Event image1.click&window.Object= create(TouristAttractionCategory,TrnMode.Update,TouristAttractionCategoryIdentifier)&window.Open()refresh

EndEvent

123123

Tipo de datos Window

Ejemplo: Abrir URL www.google.com

Event 'OpenGoogle'&window.URL = 'http://www.google.com'&window.Open()

EndEvent

124

Evento Isvalid

125125

Evento IsValid• Útil para disparar acciones luego de abandonar un campo del form.

• Se dispara, si el control es:• Edit  cuando se abandona el campo.• Checkbox, listbox, combo, radiobutton  cuando se selecciona un valor en el control.

• Solo se dispara el evento si el valor del campo cambia. 

• Los ‘messages’ dentro del evento serán desplegados en el control ErrorViewer. 

Por más información, consulte el artículo del wiki “IsValid Event for Web Applications”.(http://wiki.gxtechnical.com/commwiki/servlet/hwikibypageid?6564)

126126

Evento IsValid

• Ejemplo:

Event teacherId.IsValid&window.Height = 100&window.Width = 200&window.Object = TeacherView.Create(TeacherId)&window.Open()

EndEvent

teacherId En el form

127127

Evento IsValid

• Asociado a un atributo en una Transacción, se dispara cuando el campo ingresado es válido. • Reglas, control de integridad referencial, son disparados antes del evento. 

• Ejemplo:

Event TeacherId.IsValidteacherView.call(TeacherId)

EndEvent

CourseId*TeacherIdTeacherName…

Siendo TeacherId FK, primero se hace el chequeo de IR y si no falla recién después se dispara el evento IsValid.

128128

Evento IsValid

• Ejemplo:

&a

¿Si el usuario pasa con el mouse del campo &a al &c?

&b

&c

¿Si el usuario tiene el cursor en &c y pasa con el mouse al &b?

Se disparan los eventos IsValid de &a y de &c

No se dispara ningún IsValid (No se dispara al ir hacia atrás).

129

Drag and Drop

en aplicaciones

130130

Drag & Drop en aplicación

Arrastrar información desde un lugar a otro, con motivo de tomar ciertas acciones.

Event cart.Drop(&FlightIdentifier,&FlightClassIdentifier)&FlightReservationBC.FlightIdentifier = &FlightIdentifier&FlightReservationBC.FlightClassIdentifier = &FlightClassIdentifier&FlightReservationBC.FlightReservationDate = today()&FlightReservationBC.FlightReservationConfirmed = FALSE&FlightReservationBC.UserIdentifier = &UserIdentifier&FlightReservationBC.Save()Commit

EndEvent

Mediante esta funcionalidad, se puede permitir al usuario arrastrar información desde un lugar a otro, con motivo de tomar ciertas acciones.Por ejemplo, si se quiere hacer drag del vuelo en el grid y hacer drop en la imagen del carrito de compras, de manera que se inserte ese vuelo en la lista de reservaciones para armar el viaje.

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

131131

Propiedades de Grid• AllowDrag

• AllowDrop

Drag & Drop en aplicación

Eventos Drag & Drop• Aplica a controles:

• Image

• TextBlock

• Table

• (Freestyle) Grid

• Web Component

• Button

Si se asigna el valor True para la propiedad AllowDrop de un grid, la información que se arrastre para ese grid se cargará automáticamente en el grid, sin tener que programar el load de esa línea. Esa carga se hace en el cliente, es decir, mediante un llamado Ajax.

132132

Drag & Drop en aplicación

Event photo.Drag(&productsdtitem)&productsdtitem.productid = ProductId&productsdtitem.productname = ProductName

EndEvent

Event cart.Drop(&productsdtitem)msg('Buy ' + &productsdtitem.productname)

EndEvent

El grid que se ve en ejecución es un grid freestyle, con un control imagen del producto, que hemos llamado photo.

&productsdtitem es una variable del tipo de datos productssdt.productsdtitem.

133133

Drag & Drop en aplicaciónEntre diferentes Web Components

Web Component A Web Component B

P1 P2 … Pn Pn+m

Propiedad del grid:AllowDrag = True

Control (Image, TextBlock, TableGrid, Button)

Event Control.Drop( &P1,…, &Pn)…

Endevent

De las n+m columnas del grid (que pueden ser atributos), n deben corresponder exactamente a las n variables &P1,…, &Pn recibidas por el evento Drop como parámetros (en nombre y tipo).

Si el Control es un Grid con AllowDrop en True un subconjunto de sus columnas debe coincidir con las del otro grid.

Nota:• El orden de las columnas no es relevante.• Si alguna de las variables está basada en un SDT, se matchea por tipo de datos únicamente, y no por nombre.

Para ver más ejemplos de este tema:http://wiki.gxtechnical.com/commwiki/servlet/hwikibypageid?5579

134

Aplicaciones Sensibles al contexto

135135

UI dependiente del contexto

La idea principal tras esta funcionalidad es poder tomar acciones de acuerdo al contexto del usuario dentro de la aplicación.

En el ejemplo, el usuario elige una línea del grid superior, que muestra todos los vuelos según los filtros aplicados. Al hacerlo la aplicación detecta un cambio en el contexto, y dispara una acción, en la cuál se programa la visualización debajo, de los datos del vuelo elegido.

¿Qué entendemos por contexto? Nuestro enfoque permite disparar eventos y tomar acciones dependiendo de la información de contexto de nuestra aplicación (el lugar donde está posicionado el cursor).

Es por ello que decimos que la User Interface (UI) depende del contexto, dando mayor potencia a las aplicaciones finales.

136136

UI dependiente del contextopropiedad Notify Context Change del grid

Para ello, se programa el Web Panel Travel, con un grid y un control Web Component, en los que se cargarácada una de las partes mencionadas.

En el Web Panel Travel, el grid de nombre Grid1, que como puede observarse en sus propiedades, tiene una Notify Context Change configurada en True. ¿Qué significa esto? Que habilita a que se haga un seguimiento de cambio del contexto relacionado al grid, es decir, si el usuario selecciona una línea, la aplicación lo detectará, guardando esta línea seleccionada como contexto.

137137

UI dependiente del contexto

Ahora habrá que programar la carga del Web component con los datos del vuelo elegido en el grid. Para ello se programa el evento TrackContext, que recibe como parámetro el FlightIdentifier y FlightClassIdentifier de la línea elegida.

Este evento se disparará cuando el contexto cambia. De esta manera, cuando el usuario elige una línea, se detecta, y se dispara el evento, creándose entonces en el control Web Component de la parte inferior el Web Component FlightDetails mostrado.

138138

UI dependiente del contextoEvento Set Context

• Event <control>.SetContext(parameter) • Aplica a:

• Grids (estándar y freestyle)

• Columnas de grids

• Atributos/Variables(no ReadOnly)

Es análogo a Notify Context Change, sirve para programar el valor de las variables de salida, al momento de notificar el contexto del control correspondiente.

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

139139

UI dependiente del contextoTrack Context

• Evento TrackContext escucha los cambios en el contexto de cualquier control que “notifica”.

• Programándolo, el analista recupera la información del contexto y toma las acciones deseadas. 

Event control.TrackContext( parameters )…

endevent

• Puede haber varios en el mismo objeto.• Los parámetros que recibe los diferencian.

140140

Event TrackContext( &X )…

endevent

&X

Objeto A Objeto B

Si notifica contexto, se suscribe a

En form o grid

Cualquier parámetro que no sea un SDT es calificado por su nombre.

Lo mismo ocurre para atributos

Un parámetro SDT es calificado por su tipo de datos. Es decir, si un evento TrackContext tiene un parámetro SDT y hay un grid ligado a un SDT del mismo tipo de datos, que notifica contexto, se “suscribe” a ese TrackContext.

UI dependiente del contextoTrack Context

141141

UI dependiente del contextoEjemplo

Cuando el usuario pone el foco en un campo, mostrar un textblock con info de ayuda. Supongamos 3 campos &TouristAttractionCategoryIdentifier, &TouristAttractionCategoryName, &TouristAttractionCategoryPromotion:

Event TrackContext(&TouristAttractionCategoryIdentifier)textBlock1.Caption = ‘Tourist Attraction Category. Required field'

EndEvent Event TrackContext( & TouristAttractionCategoryName )

textBlock2.Caption = Tourist Attraction Category Name. Required field'EndEvent Event TrackContext( & TouristAttractionCategoryPromotion)

textBlock3.Caption = Tourist Attraction Category Promotion.'EndEvent

Preguntas y respuestas:

P: ¿Puedo usar las funcionalidades de Contexto para realizar validaciones, por ejemplo, para validar los datos ingresados por el usuario?

R: No. Los cambios en los campos no son detectados por lo que no sirve para validar el form. Para esto utilizar el evento IsValid que ya hemos estudiado.

P: ¿Qué acción del usuario es detectada como un cambio de contexto?R: El posicionamiento del cursor en el campo de un form (el cambio de posición es detectado cuando el usuario

se mueve con el mouse o la tecla Tab). El campo del form puede ser un control edit, a dynamic/combobox, checkbox, o listbox, pero no deben ser read-only. El clic en una columna del grid, fila o el propio grid. Eneste caso, las filas del grid pueden ser read-only.