Page 1

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.

107


User Controls

Características generales 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

USER CONTROLS ESTANDAR DE GENEXUS

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

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

108


User Controls

CaracterĂ­sticas generales Ejemplo 2) Configurar las propiedades (F4)

1) Arrastrar el UC sobre el form.

109


User Controls Chart

Objetivo del UC Chart: Desplegar grรกficos generados en forma dinรกmica Ejemplo

SDT automรกticamente creado al insertar el UC en el form

110


User Controls ImageGallery

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

111


User Controls Map Objetivo del UC Map: Incluir un mapa en el Web Form y determinar puntos sobre ĂŠl.

112


User Controls Treeview

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

113


User Control Editor Generalidades

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

Esto provoca que se pueda independizar: - Desarrolladores que utilizan UC en sus aplicaciones.

- Programadores de User Controls 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.

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!

114


User Control Editor Ejemplo: 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.

115


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.

116


User Control Editor (Continuación)

3) JScript Runtime Render Programación del comportamiento del UC cuando esé en ejecución. Se deberá utilizar código JScript. Áreas en gris: definidas por GX en forma automática. Código ingresado por el analista. Determina el comportamient o del UC en ejecución.

117


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

118


User Control Editor (Continuaci贸n) 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.

119


Tipo de datos Window

120


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

121


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

122


Tipo de datos Window Ejemplo: Abrir URL www.google.com Event 'OpenGoogle' &window.URL = 'http://www.google.com' &window.Open() EndEvent

123


Evento Isvalid

124


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)

125


Evento IsValid • Ejemplo:

teacherId

En el form

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

126


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:

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

CourseId* TeacherId TeacherName …

Event TeacherId.IsValid teacherView.call(TeacherId) EndEvent

127


Evento IsValid • Ejemplo: ¿Si el usuario pasa con el mouse del campo &a al &c? Se disparan los eventos IsValid de &a y de &c &a &b

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

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

128


Drag and Drop en aplicaciones

129


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

130


Drag & Drop en aplicación Propiedades de Grid

Eventos Drag & Drop

• AllowDrag • AllowDrop

• 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.

131


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.

132


Drag & Drop en aplicación Entre diferentes Web Components Web Component A P1

P2

Pn

Web Component B Control (Image, TextBlock, Table Grid, Button)

Pn+ m

Propiedad del grid: AllowDrag = True

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

133


Aplicaciones Sensibles al contexto

134


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.

135


UI dependiente del contexto propiedad 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.

136


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.

137


UI dependiente del contexto Evento 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

138


UI dependiente del contexto Track 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.

139


UI dependiente del contexto Track Context

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

Objeto A &X

Si notifica contexto, se suscribe a

En form o grid

Lo mismo ocurre para atributos

Event TrackContext( &X ) … endevent

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.

140


UI dependiente del contexto Ejemplo

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. En este caso, las filas del grid pueden ser read-only.

141

06-RIA-CursoGXXAvaWeb  

107 En este capítulo veremos algunas de las funcionalidades web mas trascendentes que permiten generar aplicaciones web ricas en interfaz y...

Read more
Read more
Similar to
Popular now
Just for you