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

Transcripción

1 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

2 Objetivo: Web Components Son objetos Web que tienen una propiedad en la cual se indica que son componentes. 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ú

3 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

4 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

5 En ejecución: 1º Asignar un nombre al control Web Component Web Components Uso 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

6 En Diseño: Web Component Propiedades 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

7 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

8 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

9 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) 150

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

11 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: A B 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 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

12 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 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. B 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

13 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

14 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

15 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

16 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

17 Embedded Pages Propiedades Propiedades en diseño: ControlName: Nombre del control. BorderStyle Scrollbars Source TooltipText Height Width Align Propiedades en ejecución: BorderStyle TooltipText Source Visible Height Width HeightUnit WidthUnit Nota: La propiedad TooltipText no funciona en Internet Explorer 6.0 o menor. Sí funciona en Netscape 6.0 o superior. 158

18 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 = siendo MyPage el nombre del control Embedded Page. Se permite la asignación dinámica de URLs. Por ejemplo: &url = MyPage.Source = &url Se pueden incluir Embedded Pages dentro de grids free style. 159