Web Components

En este capítulo veremos los conceptos de Web Component y Embedded Page (página embebida).

El primero nos permite la reutilización de lógica entre los objetos y el segundo permite incluir dentro de sitios
diseñados con GeneXus páginas de terceros.

142
 Web Components
Son objetos Web que tienen una propiedad en la cual se indica
que son componentes.

• Objetivo: 
• Disminuir costo desarrollo y mantenimiento 
(reutilización y simplificación)
• Ejemplos: menú, login, etc.
• ¿Cómo definir un Web Component?
Propiedad del Objeto Type = Component
• Pueden ser ejecutados en forma independiente  o 
pueden formar parte de otro objeto Web
Propiedad Url Access

Normalmente cuando se desarrolla una aplicación hay muchas partes de la misma que pueden ser reutilizadas
en varios objetos.
El objetivo de los Web Components es permitir un alto grado de reutilización de estas partes (componentes)
disminuyendo así el costo de desarrollo y mantenimiento de las aplicaciones.

Los ‘Web Components’ son Web Panels que tienen una propiedad que indica que son componentes (Type =
Component).

Es decir, pueden ser ejecutados por sí solos como cualquier otro Web Panel siempre que la propiedad URL
Access sea igual a Yes.

Cualquier parte de un Web Panel que se repita en varios Web Panels o Web Transactions de una aplicación
puede ser definida como Web Component.
Algunos ejemplos de ello: menús, login, área que permite la personalización, etc..

La idea entonces es, en lugar de tener implementado, por ejemplo, la carga del menú en cada uno de los Web
Panels que requieren el mismo, programarla en un Web Component y reutilizarlo en cada Web Panel que
requiere un menú.

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

143
 Web Components
Uso
• Cómo insertar un Web Component
• Insert/Web Component en Webobject “contenedor” ó
• Desde la Toolbox arrastrar Web Componnet en Webobject 
“contenedor”.

• Propiedades:

Para insertar un Web Component en un Web Panel o Web Transaction se debe elegir la opción Insert / Web
Component, con lo cual se creará un objeto de tipo ‘Web Component’ en el mismo.

El objeto Web Component tiene una propiedad de diseño que se permite configurar en su diálogo de
propiedades:

ControlName: Nombre del control

144
 Web Components
Uso
El objeto a mostrar en el web component se puede configurar tanto en diseño
como en ejecución.
En diseño:

Asignación de Web Components.

Ésta puede ser dinámica. Como lo demuestra la sintaxis, es posible dinamizar los Web Components, es decir
que el contenido de un Web Component sea variable. Por ejemplo:

&variable = ‘HMenu’
Comp1.Object = Create(&variable)

En el momento de hacer el Create (al ejecutar) GeneXus busca qué nombre de objeto (de los que tengan
definida la propiedad “Type” en “Component”) es igual al valor de la variable, si lo encuentra, evalúa que
coincidan los parámetros (cantidad y tipo), si no encuentra el objeto el espacio del Web Component queda en
blanco al ejecutar el Web Panel que lo contiene.

Esto implica que si se agrega un componente al modelo y el mismo será llamado de forma dinámica, basta con
generar y compilar el componente mismo.

Estos objetos se verán además en el object browser como objetos llamados.

145
 Web Components
Uso
En ejecución:
• 1º Asignar un nombre al control
Web Component 

• 2º En un evento se asigna el Objeto Web a cargar en el control (Propiedad Object):

La asignación de el Objeto Web puede ser dinámica, lo veremos más adelante.

146
 Web Component
Propiedades
• En Diseño:
• ControlName: Nombre del control
• Object: Permite asociar un objeto Web al Web Component. Sólo 
se aceptan objetos con la propiedad “Type” en “Component”.
• Floating
• Overlap
• Parameters: Permite especificar la lista de parámetros con los 
que se invocará el Web Component

• En Ejecución:
• Object:  permite indicar el Objeto Web  que se va a cargar. 
• Floating
• Overlap
• Visible:  permite ocultar/visualizar Web Component.

Propiedades modificables en ejecución

A continuación se detallan las propiedades de los Web Components que se pueden modificar en tiempo de
ejecución:

Object: permite determinar en tiempo de ejecución qué Web Panel o Transacción se va a desplegar en el lugar
del control.
Sintaxis
Control.Object = Create(Wxxx, [par1], ... [parn])

Donde:
Wxxx
Es el Web Panel o Transacción al que se le ha configurado la propiedad “Type” en “Component”.
[par1], ... [parn]
Son los parámetros recibidos por el mencionado objeto.

Visible: determina si el control Web Component está visible o no.

Sintaxis:
Control.Visible = Value
Valores:
0: False. El control no se muestra en el form.
1: True. El control se muestra en el form.

147
 Web Components - Observaciones

• En diseño tamaño fijo, en ejecución se ajusta a 
tamaño real

• Web Component puede contener Web 
Component

• Parámetros recibidos por Web Component no 
son opcionales

• En diseño, el tamaño del Web Component permanece fijo, pero en ejecución, en caso de tratarse de un Web
Component el tamaño quedará sujeto al espacio ocupado por el mismo. La forma de fijar el tamaño del Web
Component en ejecución es entonces incluyéndolo en una tabla y fijando el tamaño de la celda.
• Un Web Component puede a su vez contener otros Web Components.
• Los parámetros de los Web Components, cuando son utilizados como tales, no son opcionales. Notar que
esto es una diferencia con los Web Panels ‘comunes’ cuyos parámetros sí son opcionales.

148
 Web Components Dinámicos
en ejecución
• Para crear aplicaciones altamente dinámicas
• Función Create
• Sintaxis:
• Control.Object = Create( xxx, [parámetros])

• Función CrateFromURL (mayor dinamismo)
• Sintaxis:
• Control.Object = CreateFromURL( URL: Character).

• Opciones
• Estática (no permite cambiar la referencia en ejecución)
• Dinámica (permite cambiar el nombre, pero los parámetros y tipos de 
datos son fijos)

Creación de Web Components Dinámicos

El uso de Web Components es una de las opciones disponibles para desarrollar componentes con un alto
grado de reutilización, unificando el comportamiento en un único objeto.
La creación de un Web Component en tiempo de ejecución brinda la posibilidad de crear aplicaciones
altamente dinámicas, lo que permite cambiar la apariencia o comportamiento de la aplicación creando
diferentes Web Components dependiendo de ciertos parámetros.

Cuando se emplean Web Components es posible alcanzar un alto grado de parametrización utilizando las
funciones Create y CreateFromURL para cambiar dinámicamente el objeto que se despliega en algún lugar de
la página Web.
Para usarlo, solamente es necesario insertar un Web Component en cualquier Web Object y asignar a la
propiedad object del control el resultado de la ejecución de la función Create o CreateFromURL.
La función Create es utilizada para crear una instancia de un Web Component.
Existen 2 opciones posibles: static y dynamic.

Create

Sintaxis
Control.Object = Create( xxx, [parámetros])

Donde:
Control es el nombre del control Web Component agregado al objeto.
xxx es un WebComponent o un atributo\variable conteniendo el Web Component.
parámetros es una lista de los parámetros de xxx separados por punto y coma.

149
La opción static no puede cambiar la referencia del Web Component en ejecución mientras que la opción
dynamic permite cambiar el nombre del Web Component en ejecución, pero los parámetros y los tipos de datos
son fijos.

La función CreateFromURL es utilizada para alcanzar un mayor gado de dinamismo, al permitir cambiar el
nombre del objeto, su cantidad y el tipo de parámetros.

CreateFromURL

Sintaxis
Control.Object = CreateFromURL( URL: Character).

Donde:

URL es una variable tipo String que contiene el objeto y parámetros, utiliza la función link para crear el enlace.

Ejemplos
// Creación estática
Control.Object = View.Create( &var1, &usr)
// Creación Dinámica utilizando la función Create ( Objeto Variable con parámetros fijos )
&Object = "View"
Control.Object = Create(&Object, &var1, &usr)
// Creación Dinámica utilizando la función CreateFromURL
&Object = "View"
&link = link( &Object , &var1 , &usr )
Control.Object = CreateFromURL(&link)

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

150
 Comunicación entre Web
Components
• Pasaje de parámetros.
• Uso de cookies o WebSessions.
• Context Sensitive User Interfases.

151
 Orden de Ejecución de objetos Web
con Web Components
• Web Components en área plana del objeto Web
• Primer llamada (GET)
1. Evento START del objeto Web que contiene el Web Component (objeto Web ‘padre’),
2. Evento REFRESH del objeto Web ‘padre’,
3. Evento START de todos los Web Components dentro del objeto Web que no están dentro de grids,
4. Eventos REFRESH y LOAD de cada uno de los Web Components y de los grids en el orden que aparecen en 
pantalla (de arriba a abajo y de izquierda a derecha). 
• Ejemplo:
1. Evento START del Web Panel
2. Evento REFRESH del Web Panel
A B 3. Evento START del Web Component A
4. Evento START del Web Component B
5. Evento REFRESH del Web Component A y
6. Evento LOAD del grid en el Web Component A
7. Evento LOAD del grid del Web Panel
8. Evento REFRESH del Web Component B y
9. Evento LOAD del grid en el Web Component B

Orden de Ejecución de los eventos

Se pueden diferenciar dos instancias al ejecutar un objeto Web que incluye un Web Component: primera
llamada al objeto Web (GET) y disparo de un evento en el objeto (POST).
Primer llamada (GET)
El orden de ejecución de los eventos al realizar la primer llamada al mismo (GET) es el siguiente:
1. Evento START del objeto Web que contiene el Web Component (objeto Web ‘padre’),
2. Evento REFRESH del objeto Web ‘padre’,
3. Evento START de todos los Web Components dentro del objeto Web que no están dentro de grids,
4. Eventos REFRESH y LOAD de cada uno de los Web Components y de los grids en el orden que aparecen
en pantalla (de arriba a abajo y de izquierda a derecha).

Ejemplo:
Web Panel que contiene 2 Web Components (A y B) y un grid. Cada Web Component tiene a su vez un grid.

En este caso el orden de los eventos cuando se ejecuta por primera vez es el siguiente:
1. Evento START del Web Panel
2. Evento REFRESH del Web Panel
3. Evento START del Web Component A
4. Evento START del Web Component B
5. Evento REFRESH del Web Component A y evento LOAD del grid en el Web Component A
6. Evento LOAD del grid del Web Panel
7. Evento REFRESH del Web Component B y evento LOAD del grid en el Web Component B

152
 Orden de Ejecución de objetos Web
con Web Components
• Web Components en área plana del objeto Web
• Disparo de un evento de un Web Component (POST) A B
1. Evento START del objeto Web ‘padre’
2. Evento START del Web Component cuyo evento se disparó
3. Evento de usuario del Web Component
4. Evento REFRESH del objeto Web ‘padre’
5. Evento START de los Web Components restantes 
6. Eventos REFRESH y LOAD cada uno de los Web Components y grids en el orden que aparecen en pantalla.

• Disparo de un evento en el objeto Web ‘padre’ (POST)
1. Evento START del objeto Web ‘padre’
2. Evento de usuario del objeto Web ‘padre’
3. Evento REFRESH del objeto Web ‘padre’
4. Eventos START de todos los Web Components en el orden que se encuentran en pantalla
5. Eventos REFRESH y LOAD de los Web Components y grids en el orden que aparecen en pantalla.

Disparo de un evento (POST)

Al disparar un evento, el orden de los eventos depende de si se disparó el evento en el objeto Web ‘padre’ o en
un Web Component. A continuación se analizan ambos casos.

Nota: La lectura de variables de cada objeto se realiza siempre inmediatamente después del evento Start de
dicho objeto.

En el ejemplo, si se dispara un evento del Web Component A, el orden de los eventos sería el siguiente:

1. Evento START del Web Panel

2. Lectura de variables del Web Panel
3. Evento START del Web Component A
4. Lectura de variables del Web Component A
5. Evento de usuario del Web Component A
6. Evento REFRESH del Web Panel
7. Evento START del Web Component B
8. Lectura de variables del Web Component B
9. Evento REFRESH del Web Component A y evento LOAD del grid en el Web Component A
10. Evento LOAD del grid del Web Panel
11. Evento REFRESH del Web Component B y evento LOAD del grid en el Web Component B

153
En el ejemplo, al dispararse un evento del Web Panel, el orden de los eventos sería el siguiente:

1. Evento START del Web Panel

2. Lectura de variables del Web Panel
3. Evento de usuario del Web Panel
4. Evento REFRESH del Web Panel
5. Evento START del Web Component A
6. Lectura de variables del Web Component A
7. Evento START del Web Component B
8. Lectura de variables del Web Component B
9. Evento REFRESH del Web Component A y evento LOAD del grid en el Web Component A
10. Evento LOAD del grid del Web Panel
11. Evento REFRESH del Web Component B y evento LOAD del grid en el Web Component B

Nota: si el objeto Web tiene más de un grid, primero se ejecuta el Refresh independiente de los grids y luego el
refresh de cada uno de los grids en el orden en que aparecen en pantalla.

154
 Orden de Ejecución de objetos Web
con Web Components
Web Components en grid free style
Orden de ejecución de los eventos
1. En caso de haber Web Components en grids, se ejecuta el evento Start del Web Component justo antes del 
evento Refresh en vez de ejecutarse al principio.
2. Todos los eventos del Web Component (Start, Refresh y Load si tiene grids) se ejecutan cada vez que aparece 
el Web Component.

155
 Embedded Pages
Es un control que se puede insertar en un objeto Web.  A este 
control se le puede asociar cualquier página u objeto Web,
cuyo contenido será incluido en ejecución dentro del objeto.

• Se generan como un ‘inline frame’ en el HTML final

• Uso: Insert / Embedded Page o clic en la Toolbox

• Orden de los Eventos: es una página independiente, los eventos 
de éste y del contenedor se dispararán en forma independiente.

Embedded Pages
El objetivo de las páginas embebidas o ‘Embedded Pages’ es poder incluir información externa; es decir
desplegar el contenido de cualquier URL en objetos Web generados por GeneXus.

Una ‘Embedded Page’ es un control que se puede insertar en un Web Panel o Web Transaction. A este control
se le puede asociar cualquier página u objeto Web GeneXus, cuyo contenido luego será incluido en ejecución
dentro del objeto.

El uso de Embedded Pages brinda a los usuarios GeneXus la siguiente posibilidad de incluir información
externa: permite que se incluyan páginas estáticas o dinámicas de la propia aplicación o desarrolladas por
terceros.
Dichas páginas pueden estar en el mismo servidor que la aplicación o en otro servidor. Esta característica
brinda gran dinamismo a las aplicaciones Web desarrolladas con GeneXus.

Generación
Las Embedded Pages se generan como un ‘inline frame’ en el HTML final. Al ejecutar el objeto que contiene
una Embedded Page, el browser se encarga de realizar el requerimiento de la página asociada y de incluirla
dentro del inline frame.

Uso de Embedded Pages

Para insertar una Embedded Page en un objeto Web se debe seleccionar la opción Insert / Embedded Page,
con lo cual se creará un control de tipo Embedded Page. También es posible insertarla desde la Toolbox.

156
Orden de los eventos
Como se mencionó anteriormente la Embedded Page es una página totalmente independiente del objeto Web
que la contiene, por consiguiente, si se utiliza un objeto GeneXus en una Embedded Page, los eventos de éste
y del contenedor se dispararán en forma independiente y no es posible establecer a priori cuándo se ejecutan
los de uno con relación a los del otro.

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

157
 Embedded Pages
Propiedades

• Propiedades en diseño: • Propiedades en ejecución:
ControlName: Nombre del control.  BorderStyle
BorderStyle TooltipText
Scrollbars Source
Source Visible
TooltipText Height
Height Width
Width HeightUnit
Align  WidthUnit

Nota: La propiedad TooltipText no funciona en Internet Explorer 6.0 o menor. Sí funciona en Netscape 6.0 o
superior.

158
 Embedded Pages
Consideraciones
• Si en las propiedades del control no se especifica la propiedad Source, 
entonces en el evento Start o Refresh se debe asignar algún valor a la misma. 
Por ejemplo:
MyPage.Source = “http://www.genexus.com”
siendo MyPage el nombre del control Embedded Page.

• Se permite la asignación dinámica de URLs.
Por ejemplo:

&url = “http://www.genexus.com”
MyPage.Source = &url

• Se pueden incluir Embedded Pages dentro de grids free style.

159