1

Diseo de Aplicaciones para Internet

INTRODUCCINConceptos bsicos Web. Arquitectura y alternativas con GX Web Objects Web Panels Web Transactions Web Components Requerimientos y Configuracin C/ SQL JAVA VB

2

CONCEPTOS BSICOS WEB WEB Pginas grficas con hipertexto Dos tipos fundamentales: Pginas estticas Pginas dinmicas (Aplicaciones) En el Web se distinguen, bsicamente, dos tipos de pginas: Pginas Estticas Pginas Dinmicas Pginas estticas: Las pginas estticas son las ms sencillas. Se realizan usando un editor de pginas Web o bien escribiendo el cdigo HTML. Mientras que se ajustan muy bien a los requerimientos iniciales de hacer promocin y obtener alguna venta ocasional, o bien la venta masiva de muy pocos productos, no se adecuan a la mayor parte de las necesidades de la venta. La desventaja que presentan es que el mantenimiento de las mismas implica un alto costo si se realizan cambios con frecuencia, ya que una persona debe realizar las modificaciones correspondientes. Ej: Informacin general, Marketing, Informacin similar a la que se distribuye en folletos y documentos, Acceso rpido y cmodo a informacin, Direcciones correo electrnico para informacin y soporte. Pginas dinmicas: Las pginas dinmicas son creadas en el momento en que son referenciadas por el usuario. Si bien tienen un estilo base, la informacin desplegada en las mismas es dinmica. Son interactivas, ya que permiten que la pgina a visualizar pueda ser creada en base a la informacin creada por el usuario. Por ejemplo, una consulta de los pedidos pendientes de una orden de compra. Las pginas dinmicas permiten interactuar con una base de datos, por lo que son una poderosa herramienta para favorecer los negocios de la empresa. De esta forma la actualizacin se realiza en forma automtica, ya que al acceder a la pgina se accede a la base de datos con la informacin actualizada.

3Pginas dinmicas (Aplicaciones): Clasificacin (segn frecuencia de visitas): Usuarios causales: Pginas dinmicas. Usuarios frecuentes: Aplicacin JAVA. Una posible clasificacin de las aplicaciones en Internet es teniendo en cuenta la frecuencia con que los usuarios las acceden: Usuarios casuales: Los usuarios de este tipo de aplicaciones son OCASIONALES, es decir, es alta la probabilidad de usarla una sola vez, o con una baja frecuencia (digamos una vez al mes). Adems, se trata de aplicaciones sencillas, de muy fcil uso, que no requiera experiencia ni conocimiento previo por parte de sus usuarios. Un ejemplo de estas aplicaciones son las compras por Internet. Solucin GeneXus: HTML - Web Paneis Usuarios frecuentes: los usuarios de este tipo de aplicaciones son ms avanzados, y realizan un uso altamente frecuente, diario o hasta ms de una vez al da. Un ejemplo de estas aplicaciones son sucursales, vendedores fuera de la central conectndose a los datos de la base centralizada, incluso ingresando y actualizando datos de sus ventas, stock, etc. Solucin GeneXus: Java Algunas definiciones: URL: Uniform Resource Locator HTTP: HyperTex Transfer Protocol HTML: HyperTex Markup Language Para poder entender cmo funciona el Web, necesitamos definir ciertos conceptos, que son los que se van a manejar de ahora en adelante: URL: HTTP: HTML: Uniform Resource Locator HyperText Transfer Protocol HyperText Markup Language URL: Protocol://host/path/filename[? Parm1, , [parmn]] Protocol: Especifica el protocolo de acceso. Ejemplos: file, ftp, http, telnet. Host: Nombre del host al cual deseamos conectarnos. Ejemplo: www.artech.com Path/filename: Ubicacin y nombre del documento en el servidos.

4[Parm1, , [parmn]]: Informacin opcional para consultas. Bsicamente una URL es una direccin WEB. Cuando visualizamos una pgina Web con Netscape, Internet Explorer o cualquier otro browser, los links (visualizados subrayados y generalmente en color azul), contienen informacin oculta que apunta a la ubicacin del recurso al que se hace referencia. Se puede pensar una URL como un puntero estndar a un recurso Internet. El recurso podra ser un grfico, un sonido o simplemente un archivo de texto. Las URL's tambin pueden usarse para iniciar sesiones telnet. ftp y otros servicios. En muchos casos es conveniente conceptuar una URL como el equivalente de estndar DOS para nombre y path de un archivo. De hecho una URL puede apuntar a un archivo en la mquina local y tambin puede apuntar a un archivo especfico de un directorio especfico en una mquina remota. Protocolo http:

Como vimos antes, un documento WWW HyperMedia es servido por el protocolo http. Esto significa que los browsers WWW y los servidores WWW se comunican entre s para procesar las solicitudes del usuario utilizando un conjunto de mensajes y respuestas que son nicos para el cliente (web browser) y el servidor (programa HTTP server). Aunque existen algunas diferencias entre browsers y servidores WWW, todos se comunican a travs del protocolo HTTP. Se establecen 4 pasos bsicos en el protocolo HTTP: Conexin Solicitud Respuesta Cierre Durante la conexin, el Web browser intenta conectarse al servidor. Si el browser no logra la conexin en una determinada cantidad pre-configurada de tiempo, se desplegar un mensaje de error y la consulta del usuario cancelar.

5Una vez que la conexin al servidor HTTP ha sido establecida, el browser enva una solicitud para el recurso deseado en el servidor. Si el servidor encuentra el recurso, ste es enviado al browser y se cierra la conexin. De lo contrario, un mensaje de error es enviado y la conexin es cerrada. Si el servidor retorn el recurso solicitado, el browser realizar la carga del mismo y ser desplegado al usuario. HTML: Esta es mi primera pgina Esto muestra de una forma muy simple , la estructura bsica de un documento HTML. HTML es el lenguaje en el cual estn escritos los documentos del WWW. Es un subconjunto especializado del lenguaje ms general SGML (Standard Generalizad Markup Language). El lenguaje HTML est compuesto por una serie de cdigos o tags ubicados dentro de un documento ASCII, que son traducidos por un web browser como Netscape, Internet Explorer o Lynx en instrucciones especficas para formatear el documento que se va a desplegar en la pantalla. Entre dichos tags estn incluidos los tags de hyperlinks, que permiten especificar enlaces hacia otros recursos en el Web. Un documento HTML consiste de texto que compone el contenido del documento y tags, los cuales definen la estructura y apariencia del documento. La estructura de un documento HTML es simple. Cada documento tiene un cabezal (head) y un cuerpo (body), delimitados por los tags y . El cabezal es donde se indica un ttulo al documento y donde se indican otros parmetros que el browser podra utilizar en el momento de desplegar el documento. El cuerpo es donde se coloca el contenido propiamente dicho del documento HTML. Esto incluye el texto a desplegar y otros controles que indican al browser cmo desplegar el texto. Los tags tambin referencian archivos de efectos especiales como imgenes y sonido e indican los hot spots que enlazan el documento a otros documentos.

6

El cdigo HTML de la pgina anterior, se vera de esta forma en el browser Web.

Otros conceptos: CGI: Common Gateway Interface Web Classes Servlet ISAPI Para poder comprender mejor la tecnologa escondida detrs de las aplicaciones desarrolladas para el web, es necesario aclarar algunos conceptos adicionales: CGI (Common Gatewav Interface): CGI es un estndar que define la interface entre aplicaciones externas y servidores de informacin (Web Servers y HTTP). Con CGI el servidor Web puede realizar llamadas a programas externos, pasando datos especficos del usuario al programa. El programa luego procesa esos datos y el servidor devuelve la respuesta del programa al Web browser. Un programa CGI puede ser escrito en diferentes lenguajes como: C/C++, Visual Basic, PERL. etc. Web Classes: La solucin de Microsoft para la ejecucin de procesos en el servidor son las ASP o Active Server Pages. El servidor puede alterar una pgina utilizando ASP antes de enviarla al browser. Para poder utilizarlas se debe estar corriendo un servidor web de Microsoft (especficamente IIS 3.0 en adelante). De todas formas existen algunos productos de otras compaas que permiten correrlas sobre otras plataformas como UN IX. Serviets: Junto con JAVA aparecieron componentes para el web con la misma funcionalidad mencionada anteriormente en relacin a CGI y ASP denominados serviets. Son clases JAVA que ejecutan en el servidor y permiten obtener informacin en forma dinmica que luego envan al cliente.

7

ISAPI (Internet Server Application Interface): Provee un mecanismo para desarrollar aplicaciones que se ejecutan en el espacio de direcciones del servidor Web en ambiente Windows, teniendo acceso a todos los recursos disponibles por dicho servidos.

8

ARQUITECTURA Y ALTERNATIVAS CON GX

Arquitectura General:

En la imagen se puede observar un esquema simplificado de la topologa de Internet. Por un lado se tiene la red de la empresa (Intranet), donde se tiene un Servidor Web en el cual se publican las pginas Web. Este mismo servidor puede ser tambin el servidor de base de datos, o se puede tener un servidor especfico para realizar esta tarea. Los usuarios de Internet tendrn acceso a las pginas que sean pblicas y podrn acceder a los datos almacenados en la empresa a travs de pginas dinmicas. Por otro lado, los usuarios de la empresa (Intranet) podrn acceder a las pginas pblicas y a las pginas privadas de la empresa.

9Servidor Web:

Qu es un Servidor Web? Es un software que habilita al servidor la publicacin de pginas Web (Web Server). Debe ser configurado, de forma que permita el acceso de usuarios de Internet. La imagen que se muestra, es simplemente un ejemplo de Servidor Web, hay que tener en cuenta que si bien la informacin a configurar es siempre la misma, el dilogo de configuracin va a variar dependiendo del Servidor que se est utilizando. Bsicamente la configuracin consiste en determinar un alias que ser utilizado por los usuarios de Internet para el directorio raz, y su correspondiente directorio fsico en el Servidor. Usualmente este directorio raz se denomina '/', para que los usuarios digiten nicamente la direccin Web en el browser para acceder a la pgina principal del sitio Web. Este directorio slo tiene permiso de lectura. Para poder publicar pginas dinmicas, normalmente se debe definir uno o varios directorios adicionales con permisos de ejecucin. Es muy comn que este directorio sea denominado cgibin, cuando las pginas dinmicas utilizan cgi para acceder a la base de datos. Cabe destacar, que el nombre de este directorio puede ser cualquiera, y que tambin se puede definir ms de uno. Tambin en este caso se debe indicar el nombre "virtual" que ser utilizado por los usuarios de Internet y su correspondiente ubicacin en el disco del servidor.

10Plataformas y alternativas:

Los generadores disponibles para generar Objetos Web son: Visual Basic C/SQL Java Por lo tanto, pueden ejecutarse en un servidor Windows NT (VB, C/SQL, Java), en servidores UNIX (usando C/SQL, Java) o en servidores AS/400 (Java). Los Web panels podrn usar todas las bases de datos soportadas, dentro de las plataformas soportadas por cada uno de los generadores. Dependiendo del servidor de Base de Datos y del servidor Web a utilizar es el generador GeneXus que puede seleccionarse. En varias plataformas, se plantean varias alternativas. La decisin del generador a utilizar se tomar principalmente por los requerimientos adicionales o interacciones con otras aplicaciones, ya que el 'look and feel de la aplicacin ser el mismo independientemente del generador que se utilice. Bojetos Web: Arquitectura:

11

Al utilizar Web Objects las pginas se crean en tiempo de ejecucin, basadas en el Input del usuario. Para comprenderlo mejor, veamos un ejemplo: 1. Supongamos que tenemos un documento Web que permite al usuario ingresar un nmero de cliente y, de regreso, el servidor formatea y despliega el estado de la orden del cliente. Para realizar esto, es necesario incluir en el documento un form input que solicite al usuario el ingreso del nmero del cliente. 2. Cuando esta informacin es ingresada, el nmero de cliente es enviado al servidor para ser procesado. Para poder realizar dicho procesamiento, es necesaria una consulta a una base de datos y los resultados deben ser capturados, formateados apropiadamente (en HTML) y retornados al usuario. En este proceso, el servidor Web est actuando como un gateway entre la base de datos y el cliente de browser. En realidad el servidor Web simplemente est pasando el nmero de cliente al Web Object que realizara la consulta a la base de datos, formatear los resultados y retornar los datos formateados al servidor, el cual, a su vez, pasar esta salida al browser para que sea desplegado al usuario. 3. Los datos que devuelve el Web Object (en nuestro ejemplo, el estado de la orden del cliente) al servidor, son simplemente escritos por el mismo utilizando el mtodo normal de retorno de informacin del lenguaje utilizado. 4. El servidor luego captura esa informacin y se la pasa al browser, el cual la despliega al usuario. Bojetos Web: Arquitectura (Continuacin)

12Anteriormente se explic el funcionamiento de un Web Object al ser ejecutado desde el browser. Los diferentes generadores utilizan diferentes tecnologas para solucionar el acceso a la base de datos. C/SQL: En el caso de C/SQL se utiliza CGI o ISAPI para los programas que devuelven la informacin requerida de la base de datos. Visual Basic: Si se generan Web Objects con Visual Basic, la tecnologa va a depender de la versin utilizada. VB 5.0 genera programas CGI, mientras que con VB 6.0 se tiene la posibilidad de utilizar una nueva facilidad llamada WebClasses Designer. Estos objetos son programados en Visual Basic y al compilarlos se crea un ActiveX DLL que ser ejecutado por el Web Server y un archivo ASP que sirve como punto de entrada para cada clase en la DLL. JAVA: Si se generan Web Objects con JAVA, se utilizan servlets para acceder a la informacin. Una de las grandes ventajas que presenta esta tecnologa es que permiten mantener conexiones abiertas, as como que permiten compartir conexiones a la base de datos. Tambin permiten la compresin de pginas HTML.

13

WEB OBJECTS

Web Objects Introduccin:

Editor WYSIWYG orientado a pginas. Trabajando en pantalla completa. Ejecuta en el servidor.

Los Web Objects agrupan los objetos Web que se pueden desarrollar con GeneXus: Web Panels y Web Transactions. A continuacin, se enumeran las principales diferencias de dichos objetos con respecto al resto de los objetos GeneXus: Se utiliza un editor WYSIWYG (What You See Is What You Get) orientado a pginas para la edicin de Web Objects. El trabajo se realiza a pantalla completa (dilogo full screen en lugar de campo a campo). Los objetos ejecutan en el servidor. Editor de Web Objects: Tiempo de desarrollo ocupado en armado de la pgina. Editor WYSIWYG (similar al From Page). En la versin GeneXus 7.0, se incluy un nuevo editor para objetos Web, cuya finalidad es potenciar y simplificar la edicin del form de estos objetos, permitiendo crear fcilmente Web sites vistosos y potentes. Este editor es del tipo "WYSIWYG" (What You See Is What You Get) lo que permite al desarrollador visualizar en diseo la pgina Web que se va a publicar. Para esto se licenci un editor similar al Front Page de Microsoft, que fue diseado siguiendo el estndar de las herramientas Microsoft Office, lo que permite que los usuarios puedan utilizarlo rpidamente y en forma intuitiva. La diferencia fundamental existente con respecto al editor que se dispona hasta el momento, es que el nuevo editor est orientado a pginas, lo que significa que la posicin de los controles que se encuentran dentro del form en diseo es relativa al tamao de la ventana que contenga la pgina.

14FORM Propiedades:

Al form de los web objects se le pueden asignar propiedades en tiempo de diseo y algunas de ellas pueden modificarse en tiempo de ejecucin (mediante eventos). La ltima columna del dilogo indica si el valor asignado a la propiedad es el valor por defecto o no. El asterisco de color negro significa que el valor es el valor por defecto, el gris es que fue modificado. Backcolor: Se usa para setear el color del fondo del panel. Si se indica un background, el backcolor no va a tener efecto. Text Color: Color de los textos por defecto que estarn en el form. Background: Se utiliza para seleccionar el fondo del panel. Deben usarse bitmaps con extensin JPG o .GIF. Lo aconsejable es que estn en un directorio debajo de la raz del Servidor Web. Background Properties: Esta propiedad es exclusiva de Internet Explorer y slo funciona con la propiedad Background. Tiene un valor nico fixed, el cual inmoviliza la imagen de fondo en la ventana del navegador, de modo que no se desplaza con el resto del contenido de la ventana. TooltipText: Texto que se muestra en tiempo de ejecucin sobre cualquier parte del control. Word Wrap: Permite indicar si los controles del form tendrn o no word-wrap. Controles: De objetos Standard de Genexus: Edit Combo/ Combo dinmico/ List Box Checkbox Radio Button Botones Imgenes (*) Subfilo (*)

15

De Web objects de Genexus: Texto Text Block Tabla Subfile Free Style Embedded Page Web Component Los controles disponibles en Web Objects pueden dividirse en dos categoras: 1.2.Los que estn disponibles en el resto de los objetos GeneXus, y Los que son particulares de estos objetos.

Dentro de la primera categora tenemos: Edit Combo/Combo dinmico/List Box Checkbox Radio Button Botones Imgenes (*) Subfile (*) Los controles marcados por (*) presentan algunas diferencias con respecto a su comportamiento en otros objetos GeneXus. Dentro de la categora de controles particulares a los Web Panels se encuentran los siguientes controles: Texto Text Block Tabla Subfle Free Styie Embedded Page Web Component Texto: Se puede escribir directamente dentro del Form. Es posible formatearlo utilizando la barra de herramientas del editor HTML.

16

Dentro de un Web Object se puede escribir un texto directamente dentro del form al igual que si se estuviera trabajando con un editor de texto. Esto ejemplifica una de las diferencias importantes entre el editor de objetos web y el editor del resto de los objetos GeneXus. Como se mencion al comienzo, el editor de Web Panels es orientado a pginas y por lo tanto permite formatear el texto de la misma forma en que se realizan estas operaciones en un editor como Word. Link: Caracterstica principal de WWW Permiten navegar entre pginas. Existe como funcin y como comando. El link o hipervnculo es una caracterstica nica del World Wide Web, y es lo que permite "navegar" al usuario. Puede estar asociado a una imagen o a un texto/de forma que cuando el usuario hace click sobre el mismo llama a otra pgina HTML. Dentro de GeneXus/ el link puede ser utilizado como funcin o como comando. A continuacin se definen ambos casos de uso... Funcin Link: Asociada a la propiedad Link de los controles. Sintaxis: Control.link = link(html://www.artech.com.uy) Control.link = link(, [par1],[parn]) Para definir un link en GeneXus, existe una funcin llamada link, la cual puede ser asociada a una imagen, un texto, un atributo o variable que recibe una serie de parmetros como se detalla a continuacin. La sintaxis de la funcin es: Link(UsrPgm/URL,[,...,]) Donde: UsrPgm/URL: Puede ser otro Web Panel o la URL absoluta o relativa de otra pgina esttica o dinmica. ...: son los parmetros que recibe la pgina llamada.

17

Estos parmetros son opcionales, ya que como mencionamos anteriormente se puede estar llamando a una pgina esttica. Ejemplos de uso: Llamada con objeto (relativa): Unk(Hregistracion) Llamada absoluta: LinkChttp^/www.artech.com.uy/webpnl.htmr) Llamada relativa con pasaje de parmetros: LinkChupdcl.exe/,CliCod) Llamada con contenido de atributo: link(att:CILnk) Comando Link: Permite redireccionar a una URL. Equivalente al comando call. Sintaxis: Link( , , ...,) Link(http://www.artech.com.uy') El comando link es equivalente al comando call para llamar a pginas estticas o redireccionar a una URL esttica. Este comando puede ser utilizado dentro de cualquier evento en un Web Panel con excepcin del evento Load. El resultado de la utilizacin de este comando es el redireccionamiento en forma automtica a la URL especificada dentro del mismo. La sintaxis de este comando es la siguiente: lnk( , , ...,) Donde: : Es el nombre de la URL a la que se va a redireccionar. ...: son los parmetros que recibe la URL. El pasaje de parmetros es opcional. Ej.: Event ENTER Link(http://www.artech.com.uy') Endevent CALL en Web Objects: Sintaxis anloga a la del resto de los objetos. No pueden realizarse llamadas a programas que tengan salida: De un Web Object o a un procedimiento o reporte que no tenga salida en pantalla.

18Tener en cuenta que el programa est ejecutado en el servidor. El comando call no presenta grandes diferencias con respecto al resto de los objetos. Es importante siempre tener en cuenta que los Web Objects ejecutan en el servidor y por consiguiente no pueden realizar llamadas a programas que tengan salida en pantalla, ya que la ejecucin de dicha llamada cancelara por time-out.

Calls v/s Links: Pueden hacerse calls a: Web Objects Procedimientos Son permitidos links a: Web Objects Pginas HTML estticas. Para relacionar Web Objects dentro de una aplicacin se dispone de los comandos call, link y la funcin link. A continuacin se realiza una comparacin para aclarar las diferencias entre los mismos. Desde un web object se puede hacer CALL a: Web Objects Procedimientos (que no tengan "salida") La funcin y el comando LINK puede hacer referencia a: Web Objects Pginas HTML estticas NOTAS: 1. La funcin link se dispara cuando el usuario hace click sobre el mismo. 2. El comando link, en cambio se ejecuta en forma automtica cuando se ejecuta el evento. A diferencia del call, el comando link permite redireccionar a otros sitios web o pginas dentro de otros directorios del sitio donde se est ejecutando el Web Object. La nica forma de llamar a un procedimiento es con un call. Frames: Frames: divisin de pgina (o ventana) en varias reas. Divisin vertical y horizontal. Sintaxis: No se pueden definir Frames desde Gexexus, pero se puede trabajar con Frame en Genexus.

19La divisin de una pgina (o ventana) en varias reas es muy utilizada para facilitar la navegacin del usuario dentro de un sitio. Cada una de estas reas donde se cargan diferentes pginas en forma simultnea se denomina frames. Todas las pginas que definen trames comienzan con el tag , que remplaza el tag de las paginas HTML normales. Este tag describe la forma en que la pgina se divide. Estas secciones a su vez, tambin pueden ser divididas en otros frames. La sintaxis utilizada para definir trames, es la siguiente: Con el valor rows o cols se indica si las secciones (trames) definidas son horizontales o verticales. A continuacin, separados con coma, se indican los anchos de cada uno de los frames a definir. El ancho de los trames puede estar definido como porcentaje (Ej.: 20%) o en pixeles (Ej.: 200). El valor asterisco (*), indica que el ltimo valor se calcula como la diferencia del ancho total de la ventana con anchos de los trames previamente definidos. Ejemplo: En el ejemplo se definen dos columnas, la primera (izquierda) ocupa el 66% del ancho total de la ventana, mientras que la segunda ocupa la diferencia, es decir, el 34%. A continuacin se debe definir un tag por cada una de las secciones. En este caso la sintaxis es: En SRC se define la pgina inicial que se carga y en FRAME se debe indicar un nombre (interno) que ser utilizado cuando se quieran definir links entre los frames. Para definir un trame el tag correspondiente debe ir fuera del tag , en caso contrario crea una pgina en blanco y no considera los tags del trame. Por este motivo, no es posible definir trames desde GeneXus, ya que todo lo que se encuentra dentro del Form del Web Panel, as como el cdigo de los eventos va entre los tags . S es posible usar trames con GeneXus. Para esto, se deber definir en HTML una pgina, solamente con la definicin de los trames y que invoque a los web panels. LinkTarget: Propiedad asociada a la propiedad link. Permite trabajar con Frames en genexus.

20Hacer referencia al name de un frame definido. Sintaxis: Control.linktarget = namef1 El uso de la propiedad esta orientado al manejo de Frames y/o ventanas del Browser y tiene sentido cuando la propiedad Link del control tiene un valor diferente al string vaco. Esta propiedad, asociada a la propiedad Link del control permite establecer en qu ventana (o instancia) del Browser se mostrar un Link cuando sea seleccionado. Todos los Links cuyo LinkTarget tenga el mismo valor se mostrarn en la misma ventana (o instancia). La excepcin es para el valor "_blank" de la propiedad LinkTarget. Este es un valor especial que fuerza al Browser a crear una nueva ventana cada vez que se selecciona un Link. Edit Propiedades diseo: En diseo:

El control edit es el mismo que se encuentra en el resto de los objetos GeneXus, salvo que posee algunas propiedades que son particulares de los objetos web. En diseo se pueden modificar las siguientes propiedades: ControlType: Esta propiedad permite indicar el tipo del control asociado a variables. Los tipos posibles son: Check Box, Combo Box, Dynamic Combo Box, Dynamic List Box, Edit, List Box, Radio Button. ReadOnly: Esta propiedad permite indicar si un control es modificable o no. Es vlido nicamente para variables. Tiene dos valores posibles: 1. True: se despliega el contenido de la variable en el control y no es posible modificarlo. Es el nico valor posible para los atributos.

212. False: aplica nicamente a variables y es el valor que tienen por defecto. Se puede ingresar el contenido de la variable. AutoResize: Esta propiedad permite indicar si el control mantendr o no el tamao por detecto. Se dispone de dos valores: 1. True: mantiene el tamao por defecto del control. 2. False: habilita la modificacin del tamao del control. Fill: Esta propiedad permite indicar si el control toma el color de fondo del form o no. Es vlido nicamente para controles Read Only. Tiene dos valores posibles: 1. True: se despliega el color de fondo seleccionado. 2. False; se despliega el color de fondo del Web Object. Backcolor: permite indicar el color de fondo del control. Forecolor: permite indicar el color del contenido del control. Si el control es editable depende del browser la visualizacin del mismo. Font: permite indicar el tipo, tamao y formato del tipo de letra del control. Si el usuario no tiene instalada dicha font en su PC, se ignora esta configuracin. Format: se ver ms adelante. ReturnOnClick: est relacionada con Prompts. Se ver ms adelante. Edit propiedades ejecucin: En ejecucin: Enabled Backstyle FontUnderline FonBold, FontItalic, FontName, FontSize, FontStrikeThru, FontUnderline ForeColor IsPassword Link LinkTarget Visible

Enabled: La propiedad Enabled de Runtime tiene el mismo comportamiento que la propiedad Read only en diseo, pero los valores son los opuestos, es decir readonly = true es lo mismo que enabled = 0 y por otro lado readonly = false es lo mismo que enabled = 1.

22Backstyie: La propiedad Backstyle es equivalente a la propiedad Fill de diseo. Indica si el control va a ser transparente o no. FontBold, Fontitalic, FontName, FontSize, FontStrikeThru, FontUnderline: permiten Forma-tear el tipo de letra a utilizar. ForeColor: Se usa para setear el color del contenido del control. IsPassword: Tiene como resultado el desplegar * en lugar de lo digitado por el usuario. Ej.: &var.IsPassword=1 Link: Esta propiedad permite asociar un link a un control. El link se va a ejecutar nicamente si el control tiene la propiedad Enabled en 0 (o esta marcado como Read only). Imgenes: 2 Ambientes: Diseo. Ejecucin Path fsico v/s virtual C:\kb\imgenes\img.gif /imgenes/img.gif Cuando se trabaja con Web Objects se pueden distinguir dos ambientes muy diferentes: el de diseo y el de ejecucin. Ambiente de diseo: Nos referimos al ambiente en que se desarrollan los Web Objects. Ambiente de ejecucin: Se refiere a la ejecucin propiamente dicha de los Web Objects. En particular esto es muy importante al trabajar con imgenes, ya que en diseo las mismas se buscan en el camino ingresado (ej: c:\modelo\imagenes\img.gif), pero en ejecucin es necesario referenciar el camino virtual donde se encuentran las mismas - normalmente en el Servidor Web -(ej: /imagenes/img.gif). Hay que recordar que el servidor Web tiene acceso nicamente a aquellos directorios definidos en el software de administracin del mismo.

Imgenes (Preferente Diseo) Base path for relative images: vlida para toda la KB. Al insertar imagen se ingresa path relativo. Ejemplo: C:\kb /imgenes/img.gif

23Debido a las diferencias entre los ambientes de diseo y ejecucin es que se dispone de una preference a nivel de diseo denominada Base path for relativo magos'. Base path for relative images En esta preference del modelo de diseo, se puede ingresar el pathabsoluto que se va a utilizar mientras se trabaja en diseo (siguiendo con el ejemplo anterior: c:\modelo). Luego en el Web Object, para insertar una imagen se debe seleccionar el botn g de la barra de controles disponibles, Y en e dialogo para ingresar el origen de la imagen se debe ingresar el path relativo (eje: /imgenes/mg.gf) De esta forma la imagen seleccionada se va a visualizar tanto en diseo como en ejecucin. Imgenes propiedades diseo: En Diseo:

Control Frame: Nombre asignado al control Se usar luego para asignarle propiedades al mismo en tiempo de ejecucin. Source: Ubicacin de la imagen en el servidor. LowResSource: Se pueden referenciar versiones de alta y baja resolucin para las imgenes de manera que la imagen de baja resolucin se cargue rpidamente y logre mantener el inters del visitante mientras que se actualiza la imagen de alta resolucin cuando est correctamente cargada. Esto no es HTML standard pero los principales browsers lo reconocen. Height: Indica en pixels el alto de la imagen. Width: Esta propiedad permite establecer ancho del control. Borderwidth: Permite indicar al usuario el ancho en pixels que desea como borde del control.

24

Alternate Text: Algunos browsers no soportan imgenes. Otros soportan, pero el navegante puede tener una conexin lenta por lo que prefieran no ver las imgenes o cargarlas 'a pedido'. Este texto es el que aparecer si la imagen no apareciera en el browser. TooltipText: Texto que se muestra en tiempo de ejecucin sobre cualquier parte del control. Horizontal Space: Cantidad de Pixels de espacio en blanco que agrega a ambos costado (izquierdo y derecho) de la imagen. Vertical Space: Cantidad de Pixels de espacio en blanco que agrega a los bordes superior e inferior de la imagen. Align: Permite seleccionar la alineacin de la imagen respecto al texto que la rodea. Los valores posibles son: Left, rigth: para poner la imagen a la izquierda o a la derecha de la pantalla, mientras que el texto cambia al lado contrario. Texttop: Alinea la imagen respecto al elemento mas alto de la lnea. Top: Alinea la imagen respecto al texto mas alto de la lnea. Middie: Alinea el medio de la imagen respecto a la base de la lnea. Absmiddie: Alinea el medio de la imagen respecto al medio del tem mas alto. Bottom: Alinea la base de la imagen respecto a la base del texto. Absottom: Alinea la base de la imagen con la base del tem mas alto.

Imgenes propiedades ejecucin: En ejecucin: Borderwidth ToolTipText AlternateText Bitmap Enabled Link LinkTarget Visible Las siguientes propiedades pueden asignarse en tiempo de ejecucin, el funcionamiento de las mismas es anlogo a las propiedades de diseo vistas anteriormente:

25

Borderwidth ToolTipText AlternateText Bitmap: La propiedad se nicializa con el valor de la propiedad Source de diseo. Enabled: La propiedad Enabled de Runtime permite habilitar (Enabled = 1)/ deshabilitar (Enabled = 0) la ejecucin del evento asociado a la variable bitmap. Link: Permite asignar un link a la imagen. Si se programa el evento Clic de una imagen se ignora la propiedad Link. LinkTarge: Visible: Permite ocultar o visualizar una imagen. Botones Propiedades:

Control Name: Nombre asignado al control. Se usar luego para asignarle propiedades al mismo en tiempo de ejecucin. On Click Event: Evento asociado al botn que se ejecutar al momento de presionarlo. Caption: Texto que describe al botn en el form. Puede modificarse en tiempo de ejecucin. Primer Ejemplo:

26El primer ejemplo consiste en disear una pgina donde el usuario pueda ingresar su nombre de usuario y contrasea para validarse dentro de nuestra aplicacin. Para realizarlo se definir un style con las imgenes que se van a mantener en todas las pginas de nuestra aplicacin y luego se definirn las variables para aceptar los datos en pantalla. Web Objects Funcionamiento: Esquema de trabajo Internet No tiene control sobre operaciones de usuario. Eventos en work/web panels: Start, Refresh, Load, Enter y de usuario. Diferencia: Orden de disparo de los eventos. Esquema de trabajo en Internet: Es importante entender la diferencia del ambiente en el que se est trabajando: en Internet, cuando el usuario accede a una pgina del servidor Web para visualizarla, el Browser baja la pgina al cliente. Por lo tanto, no existe forma de detectar lo que realiza el usuario: el Servidor Web volver a tener el control cuando se presione el evento ENTER o algn evento de usuario. En ese momento se enva (o se somete) el resultado al servidor para continuar con su procesamiento. Relacionado con esto es importante destacar el momento en que las variables adquieren los valores ingresados por el usuario: solamente lo harn despus de presionar un botn (que es cuando el servidor Web tiene el control del procesamiento). Esto implica algunos cambios importantes en la forma de programar los objetos. Eventos: Los eventos de los web panels son los mismos que los eventos de los work panels, es decir, evento Start, Refresh, Load, Enter y los definidos por el usuario. La diferencia con los work panels es el orden de disparo de estos eventos. Se distingue la primera ejecucin de las siguientes del mismo Web Panel. Orden de disparo de eventos (GET): Al ejecutar un Web Panel se disparan los siguientes eventos: Start Refresh Load Es importante aclarar la lgica en Web Panels, ya que la misma tiene pequeas diferencias con la lgica asociada a un Work Panel. Al llamar a un Web Panel desde el browser se ejecutan los siguientes eventos, en el orden presentado a continuacin (GET):

27Start Refresh Load Una vez finalizado el evento Load, tambin finaliz la ejecucin del Web Panel. Esto permite que se puedan definir links o calls explcitos al propio Web Panel dentro del mismo, sin que esto represente una recursividad en ejecucin. Una vez ejecutado el Web Panel al hacer click sobre un link o un botn que contenga un call a s mismo, la llamada se vuelve a realizar como si fuese la "primera vez" que se llama al mismo. Orden de disparo de eventos (POST): Start Lectura de variables en pantalla Eventos Enter y de usuarios (submit) refresh Load Cuando se presiona un botn o se fuerza la ejecucin del evento asociado a una imagen (haciendo click sobre la misma), el orden de disparo de los eventos es diferente al orden de ejecucin en la primera llamada al mismo. En este caso se realizan las siguientes operaciones: Evento Start Lectura de variables en pantalla Evento Enter o evento de usuario Evento Refresh Evento Load El orden de los eventos aclara el concepto de 'someter' los valores ingresados por el usuario. Web panel Comandos: Comandos: Load Return Refresh: Equivalente a hacer un call al Web Panel. A continuacin se van a documentar los comandos existentes dentro de los Web Panels: Load: es anlogo a los Work Panels se utiliza cuando se necesita cargar en forma explcita los registros de un subfle. Return: Se ver a continuacin con ms detalle. Refresh: Lo que hace es un call al Web Panel. Tiene el mismo efecto que el F5 del browser.

28

Return: Equivalente a un call No puede ser invocado desde el evento Load o desde una subrutina o procedimiento llamada/o desde este evento. Si no hay llamador queda en el directorio de ejecucin. Otras alternativas: botn Close o programar el back. El comando Return vuelve a la pgina anterior. Incluir el comando return en un Web panel es equivalente a hacer un CALL al Web panel que lo invoc. En consecuencia no equivale a presionar el botn 'Back' del browser, ya que si se ingresaron valores en variables del Web Panel llamador, los mismos no son mantenidos al ejecutar el comando Return. Este comando Return puede ser ejecutado en cualquier evento subrutina del Web Panel, salvo el evento Load y los mtodos Load de subfiles. Tampoco puede ser ejecutado en subrutinas llamadas directa o indirectamente por el evento Load o mtodos Load de subfiles. En el caso del primer web panel, el return no tiene efecto. Observaciones: En caso que se ejecute en las mencionadas situaciones los resultados son impredecibles. Si se utiliza la funcin SetCookie (Ver funciones estndar Setcookie, Getcookie) y luego se ejecuta el comando Return el valor de la(s) cookie(s) se establece correctamente. De todas formas hay otras alternativas para permitir que el usuario vuelva atrs que se vern ms adelante. Webobjects Variables: Variables: Adquieren valor luego de sometido evento. Eje: link definido en evento Start con variable que se encuentra en form. Como se dijo anteriormente, las variables adquieren los valores ingresados por el usuario despus de presionar algn botn en un Web Object. Por ejemplo, cualquier link a otro Web panel especificado en el evento Start con una variable que se ingresa en el Web panel no va a tener ningn valor cuando se haga click sobre el link. Si en un Evento se usa una variable que se carga en otro evento, entonces esa variable debe estar presente en el form. Si no esta en el form, la variable no tendr valor cuando se disparan los otros eventos (esto es por el "orden" en que ocurren los eventos).

29

Adems, deber estar en el form despus del control en el que se carga la variable. Por ejemplo, si la variable se carga en el LOAD de un subfile entonces la variable tiene que estar en pantalla despus del subfile. Alineacin de Controles:

La nica forma existente para alinear controles dentro de un Web Object es la utilizacin de tablas. El concepto de tabla es muy sencillo, una tabla est compuesta por filas, las cuales a su vez estn compuestas por celdas como lo indica la figura. Finalmente dentro de las celdas se pueden insertar controles. Grosor y Separacin de una celda:

30Las propiedades Cell Padding y Cell Spacing de una tabla permiten indicar el tamao del margen entre celdas y del margen entre el contenido de una celda y el borde de la misma como se puede observar en la diapositiva. Cell Padding: Se debe ingresar en pixels, la distancia deseada entre el contenido y el borde de las celdas. Cell Spacing: Indica en pixeis, el grosor del borde de las celdas. Tablas Propiedades:

Las propiedades varan dependiendo de la seleccin realizada, es decir, que las propiedades disponibles para una celda tienen alguna variacin con respecto a las disponibles para la tabla o la fila. A continuacin se documentan las propiedades a nivel de tabla, fila y celda. Tooltip: Texto que se muestra en ejecucin junto al control. Align: Indica la alineacin de la tabla respecto a la ventana del browser, los valores posibles son: 1. Left: la tabla queda a la izquierda de la pantalla del navegador. 2. Center: la tabla queda centrada en la pantalla del navegador. 3. Right: la tabla queda a la derecha de la pantalla del navegador. Background Pcture: Path relativo a la imagen que se desea desplegar como fondo de la tabla. Background Color: Permite seleccionar el color que se desea como fondo de la tabla (en formato RGB). Border Wdth: Ancho en pixels del borde de la tabla. Height, Width: Indica el alto y el ancho de la tabla, puede ser un porcentaje (ej.: 20%) o un valor (ej.: 20). Si se ingresa nicamente el valor, se asume el tamao en pixels. Rules: Esta propiedad permite indicar si se desean visualizar las lneas de la tabla. Los valores posibles son:

31All: se desean visualizar todas las lneas de la tabla. Columns: se desea visualizar nicamente las lneas que separan columnas. Rows: se desea visualizar nicamente las lneas que separan las filas de las tablas. None: Slo se visualiza el borde de la tabla. Vertical Align: Indica la alineacin vertical del contenido de las celdas de toda la fila de la tabla: 1. Baseline: alinea el contenido a la base del control que se encuentra en la celda. 2. Bottom: alinea el contenido al borde inferior de la celda. 3. Middle: alinea el contenido al centro de la celda (valor por defecto) 4. Top: alinea el contenido al borde superior de la celda. Col span: Permite que la celda se expanda para ocupar ms de una columna. Row span: Permite que la celda se expanda para ocupar ms de una columna. Text Block: Ingreso de texto en pantalla. Propiedades modificables en ejecucin. texto v/s Text Block Texto: esttico. Text Block: dinmico. El control Text Block permite ingresar texto en pantalla al que luego se puede modificar sus propiedades en ejecucin. La diferencia fundamental entre el texto y el Text Block radica en que el Text Block es dinmico, mientras que el texto es esttico. En consecuencia el Text Block se utiliza normalmente para enviar mensajes al usuario como se ver ms adelante en un ejemplo y para definir links en tiempo de ejecucin. Text Blocks Propiedades: En diseo:

32

En ejecucin: Caption Link

Los text blocks slo tienen 2 propiedades modificables en diseo: ControlName: permite dar un nombre al control para poder modificar sus propiedades en ejecucin. Format: los valores posibles son: HTML Text Esta propiedad indica si el contenido del Text Block debe interpretarse como texto o como HTML. Ej.: Si el Text Block contiene el string 'Bold' y la propiedad Format tiene el valor'HTML', en ejecucin se visualizar 'Bold, si la propiedad tiene el valor Text' se visualizar 'Bold'. En ejecucin se puede modificar el Caption, as como definir un link al control. Ejemplo con Text Block:

33Subfile: Permiten desplegar datos repetitivos. En ejecucin es una tabla. Por defecto todas las columnas de un subfilo son Read-Only. For each line o evento clic, modifica valor por defecto y permite trabajar con los valores ingresados. Regla noaccept(). Los subfiles permiten desplegar datos repetitivos, en atributos o variables. Las columnas de los subfiles pueden ser atributos, variables (incluyendo las de tipo bitmap). Cmo desplegar datos en un subfile: Por defecto todo atributo y variable que est dentro de un subfile se despliega en ejecucin como texto, es decir que son nicamente de lectura y por consiguiente no pueden ser modificados. Cmo aceptar datos en un subfilo: Es posible aceptar datos en las variables de un subfile dependiendo de la programacin de los eventos existentes en el objeto: si dentro de un evento del Web Panel se est utilizando el comando For each line o se tiene un evento click asociado a algn control del subfile, todas las variables que estn dentro del subfile pasan a ser de ingreso. Es posible indicar en este caso cules son las variables que no van a poder ser modificadas, utilizando la regla noaccept() o modificando la propiedad Read Oniy de la variable dentro del subfile. Cmo asociar eventos a una lnea de un subfile: Es posible asociar un evento a una variable de tipo bitmap o a cualquier control que soporte el evento click que pertenezca al subfile. Subfilo - Propiedades:

34Control Name: Permite indicar el nombre del control. Siempre se le asigna un nombre por defecto. Auto Resize: En esta opcin se dispone de dos valores posibles: 1. True: mantiene el tamao por defecto del subfile. 2. Falso: habilita la modificacin del tamao del subfile. Width: Esta propiedad permite establecer ancho del control. Se habilita nicamente cuando la propiedad AutoResize tiene el valor False'. Debe indicarse el ancho del control. Por defecto se propone el valor del control insertado, pero puede ser modificado para cambiar el tamao del mismo. El ancho puede ser especificado en pixels (nnn) o como porcentaje del ancho de la ventana (nnn%). El browser tiene una heurstica compleja que se aplica a las tablas y sus celdas para procurar presentar una tabla lo mejor posible. Al fijar esta propiedad se reemplaza esta heurstica y en lugar de eso, el esfuerzo se usa en poner el ancho deseado segn lo especificado. En las tablas cuando se especifican los valores como porcentajes, son porcentajes respecto a la ventana o a la celda en donde est la misma. Es importante saber que al asignarle un valor a estas propiedades, se le est indicando el valor mnimo deseado, o sea que si dentro de la tabla existe un control ms grande, se asignar el tamao necesario para incluirlo, por lo que el tamao ser mayor que el especificado. Si se quiere que una tabla ocupe todo el ancho de la ventana, se pone width = 100 en la propiedad de la tabla. Lo mismo si se tiene una tabla adentro de otra, y se quiere que la tabla interior ocupe todo el ancho de la celda de la tabla exterior. Si se quiere que una columna de una tabla ocupe un tamao mnimo de 200 pixels se pone width = 200 en una de las celdas de la columna. Si se tiene una tabla de 2 columnas y se quiere que la primera ocupe el y 20% la segunda con respecto a la tabla, se pone la propiedad width = 80% para una celda de la primera columna. Con esto es suficiente ya que el 20% de la segunda se deduce. LinesColor: Permite indicar el color de la letra de las lneas del subfile. LinesFont: Permite indicar el tipo de letra de las lneas del subfiles. Rows: Esta propiedad permite al usuario indicar la cantidad de registros que va a cargar en el subfile. Aplica nicamente a los subfiles que tienen tabla base. Si el valor de esta propiedad es 0, se despliegan tantas lneas como registros resulten de la consulta asociada. El valor por defecto de esta propiedad es 0 para subfiles y 25 para subfiles Freestyle.

35Es importante destacar que esta propiedad no optimiza la recorrida que se realizar para desplegar los registros; se recorrer la tabla base segn el orden definido en el objeto. TitleColor: Color de letra del ttulo de la columna. TitleFont: Permite indicar el tipo de letra de los ttulos de las columnas del subfile. BackcolorStyle: Haciendo clic sobre +, se expanden las opciones que permiten asignar un estilo al subfile. Los estilos disponibles son: 1. None - el subfile tendr el diseo del form. 2. Header - permite especificar un color para el fondo de los ttulos del subfilo y otro para las lneas del mismo. 3. Report - permite especificar un color para el fondo de los ttulos y alternar colores para las lneas pares e impares del subfile. 4. Uniform - permite especificar un nico color para el fondo del subfile (tanto el ttulo como las lneas). Table: Este grupo de propiedades es anlogo a los de las tablas. En ejecucin, se pueden modificar las siguientes propiedades del subfile: Backstyie Rows Visible Ejemplo con subfile:

36Freestyle: Nuevo tipo de subfilo para Web Panels. Permite formato libre de los registrosTabla con registros repetitivos. Propiedades de diseo de tablas. Propiedades de subfile. El subfile Freestyle: Permite al usuario definir el formato de los datos a desplegar de una forma menos estructurada que con el subfile tradicional. El subfile Freestyle es bsicamente una tabla a la que se le pueden insertar los atributos y/o variables que se van a mostrar posteriormente en la pantalla. Este nuevo tipo de subfile no posee ttulos para las columnas y adems permite tener ms de un atributo/variable en una misma celda, proporcionando de esta forma mayor libertad de diseo. Cabe destacar que el subfile posee las mismas propiedades mencionadas anteriormente para el subfile tradicional. En este caso para poder visualizar las propiedades hay que seleccionar la tabla donde se encuentran los atributos/variables. El comportamiento de las variables dentro de un subfile Freestyle es anlogo al que presentan dentro de un subfile, por lo tanto tambin quedan de ingreso si existe un For each line o For each line in dentro de algn evento. Nuevamente este comportamiento puede modificarse, agregando la regla noaccept o cambiando la propiedad Read Oniy. Subfile Freestyle Propiedades:

A continuacin se documentan las propiedades disponibles para el subfile Freestyie: Control Name: Es el nombre del control, siempre tiene un valor por defecto asignado por GeneXus. Cols: Esta propiedad permite al usuario indicar cuntas columnas va a tener el subfile Freestyie en ejecucin. Si se ingresa un valor distinto de 1, el subfile Freestyie va a mostrar los registros en tantas columnas como se haya especificado en la propiedad. Si el valor de esta

37propiedad es 0, se despliegan tantas columnas como registros resulten de la consulta asociada. El valor por defecto de esta propiedad es 1. Rows: Esta propiedad es anloga a la propiedad de los subfiles. Propiedad Backcolor Styie: Es anloga a la propiedad de los subfiles. Ejemplo con subfile Freestyle:

Web Panels v/s Work panels (Carga del subfile): Siempre se hace loadAll. Se puede programar paginacin a pedido.

La razn por la cual no existe paginacin a pedido es que una vez que se ejecuta el Web Panel, primero se procesa la consulta sobre la base de datos y luego se arma la pgina Web para ser

38visualizada por el usuario. Esta es una limitacin del cdigo HTML que no posee controles como los que se utilizan en lenguajes visuales para el subfile. Es decir que un subfile es bsicamente una tabla, con ttulos en la que se despliegan los datos. Para evitar que se carguen todos los datos, se puede programar la paginacin a pedido que se va a documentar a continuacin. Paginacin a pedido: Asignarle el valor a propiedad Rows para indicar cantidad de registros por pgina. Mtodos: FirstPage NextPage previousPage LastPage GotoPage Propiedades: RecordCount PageCount El paginado de subfiles aplica a subfiles comunes y free-style cuya propiedad 'Rows' tiene un valor diferente de cero. Los subfiles pueden estar anidados. El paginado aplica a subfiles con tabla base, as como a subfiles sin tabla base. Cada subfile y subfile free-style dispone de mtodos, que habilitan la navegacin entre registros: FirstPage: lleva al usuario al primer conjunto de registros devueltos. NextPage: lleva al usuario al siguiente conjunto de registros. previousPage: lleva al usuario al conjunto anterior de registros. LastPage: lleva al usuario al ltimo conjunto de registros. GotoPage(PageNumber): permite acceder en forma directa a un determinado conjunto de registros. Todos los mtodos retornan un valor numrico. Si el valor devuelto es cero, indica que la operacin result exitosa, en caso contrario dicho valor indica un error o warning. Si el paginado no est habilitado se devuelve 1. El mtodo LastPage aplica nicamente a subfiles con atributos. Cada subfile dispone de las siguientes propiedades que son utilizadas en la paginacin: RecordCount

39 IpageCount: Esta propiedad devuelve la cantidad de pginas del subfile en base a las propiedades Rows y Columns del mismo. Al igual que la propiedad RecorCount, devuelve -1 si el subfile no tiene tabla base. Paginacin a pedido - Consideraciones: Eficiencia asociada a navegacin del subfile. RecordCount implica que DBMS barre dos veces la tabla del subfile. Lastpage: un solo comando Load por registro. Si hay ms de uno pueden haber resultados inesperados. Se aconseja: Buen filtrado de datos. La eficiencia de los mtodos FirstPage, NextPage, PreviousPage y GotoPage(N) esta asociada a la eficiencia de la definicin de la navegacin del subfile correspondiente. En otras palabras, si el subfile, sin paginado tiene buenos tiempos de respuesta, los tiempos con paginado sern semejantes. El mtodo LastPage determina cul sera la ltima pgina utiliza la propiedad Rows y la propiedad RecordCount del subfile. El hecho de utilizar la propiedad RecordCount implica que el DBMS (no el cdigo generado) barre dos veces la tabla base del Subfile (la primera vez para contar y la siguiente para "cargar"). El mtodo LastPage ha sido pensado para que se ejecute un nico comando Load por cada registro de la tabla base. Por ello, si existen IFs en el evento Subfile.Load que pueden condicionar la ejecucin del comando mencionado o se ejecuta ms de una vez el mtodo Load por cada registro, los resultados pueden ser inesperados. El paginado se realiza por "nmero de registro". Esto quiere decir que, la pgina 1 tendr los registros del 1 al valor de la propiedad Rows, la pgina 2 los que van del Rows +1 al Rows * 2 y as sucesivamente. Para mostrar la pgina 2, internamente, se "pasa por" los registros de la pgina 1 sin mostrarlos. En general, para mostrar la pgina N, se "pasa por" los registros de las pginas N-1 sin mostrarlos. Dada la implementacin, se recomienda tener un buen filtrado de datos (de forma que no existan muchas pginas) y evitar, cuando el costo sea alto, el uso de GotoPage(N) con valores altos de N, as como el uso de LastPage. Tambin se recomienda salvar el valor de la propiedad RecordCount es una variable ya que cada invocacin de la propiedad implica un COUNT en la base de datos. Ejemplo Paginado subfilos: Los mtodos de paginado de subfiles pueden ser utilizados en los eventos escritos por el usuario. Por ejemplo: Event Start &Count = MySubfile.RecordCount If &Count > MySubfile.Rows

40Pagina2.Visible = 1 Endif If &Count > MySubfile.Rows * 2 Pagina3.Visible = 1 Endif Endevent Event Siguiente.Click MySubfile.NextPage() Endevent

41

WEB PANELS Soporte de Mltiples Subfiles: Se soportan mltiple subfiles por objetos. Analoga: procedimiento con For eachs paralelos. El objetivo de soportar mltiples subfiles por objeto es tener la posibilidad de disear Web Panels con ms de una grilla o Subfile para potenciar el desarrollo de estos objetos, entre otras cosas para resolver en el mismo objeto accesos a diferentes tablas. El uso de varios subfiles en un Web Panel, implicaron un cambio en la forma de especificar en GeneXus las reglas, los eventos y las condiciones asociados a los mismos. A continuacin se detallan los cambios de comportamiento y las formas de uso de las entidades pertenecientes a estos objetos GeneXus. Soporte de Mltiples Subfiles: Reglas a nivel de Web Panel y de subfile. Hidden se aconseja incluir atributo en el subfile y cambiar la propiedad visible Order: asociado al subfile. Conditions del Web Panel y del subfile. Quedan asociadas al subfile o en el evento load del mismo. Order: Quedan asociadas al subfile. (Se puede editar dando clic con botn derecho sobre el subfile) Hidden: Los atributos nombrados en esta regla son colocados como "hidden en cada uno de los subfiles. No se recomienda su uso, en contrapartida se recomienda agregar el atributo al subfile y luego ocultarlo usando la propiedad visible. La razn para promover el uso de los atributos con la propiedad Visible en False en lugar de la regla hidden es que los atributos referenciados en las reglas hidden estn en TODOS los subfilos mientras que los otros slo estn para el subfile en que fueron definidos. Esto redunda en menos cdigo HTML a enviar al Browser y, en consecuencia, mejor performance. Precedencias: Order: Si el conjunto de atributos de la regla se corresponde con los de algn subfile y este tiene un orden asignado explcitamente este ltimo es el que se toma en cuenta. Las condiciones se pueden indicar por cada subfile o en forma general para el objeto. Si hay condiciones generales y particulares sobre los mismos atributos, se toma en cuenta a todas.

42

Soporte de Mltiples Subfiles: Eventos: Refresh Subfile.Load Subfile.Refresh Comandos: Load For each line in Los eventos del subfile conservan su comportamiento actual. Los eventos Load y Refresh deben referenciar al subfile usando la siguiente nomenclatura: Event .< Refresh | Load>

EndEvent Se agrega adems un evento Refresh independiente de los subfiles. Cundo se debe usar el evento Refresh? Algunos ejemplos son: Cuando se quiere llamar a un programa que calcule algo dependiendo de variables que estn en pantalla y no estn asociadas a ningn subfile. Cuando se quiere acceder a la informacin de una tabla que no esta asociada a ninguna de las tablas bases de los subfiles. Si el objeto solo tiene un subfile, no es necesario usar la nomenclatura nueva. Los comandos que actan especficamente sobre el subfile cambian de forma de que, en caso de haber ms de un subfile, se pueda determinar a cual subfile se aplica, estos comandos son: For each line: Este comando debe venir con una referencia al subfile de la siguiente forma: For each line IN Load: Dispara la carga del subfile. Carga de Mltiples Subfiles: No se relacionan cargas Refresh independientes de subfiles. refresh subfile 1 Load subfile 1 refresh subfile 2 Load subfile 2

43La carga se realiza para cada subfile de forma independiente, es decir, an si los datos que se muestran en ambos subfiles estn relacionados, el especificador no relaciona las cargas. La carga incluye el evento refresh, o sea que la secuencia de carga de un objeto con 2 subfiles es: Evento Evento Evento Evento Evento Refresh refresh del subfile 1 Load subfile 1 refresh del subfile 2 Load subfle 2

Web Panel Tabla base: Determinacin de tabla base: Atributos en subfile. Atributos en regla hidden y order. Atributos fuera del Subfile? Atributos en eventos fuera de For each? Como los web panels permiten tener ms de un subfile, es que hay una tabla base por cada subfile. Los atributos que participan en la determinacin de la tabla base de cada subfile son los que: Estn en el subfile Estn referenciados en las reglas Hidden y Order aplicadas al subfile Los atributos de la parte fija no participan en la determinacin de la tabla base de ninguno de los subfiles, pero debern pertenecer a la tabla extendida de alguno de ellos. Si hay alguno que no cumpla la condicin da el warning: "Attribute not instantiated". Notar que es posible que algunos atributos de la parte fija estn en una tabla extendida y otros en otras. Tampoco participan los atributos que estn en los Eventos (fuera de los grupos For each) como ocurre en los work panels. Estos, debern pertenecer a la tabla extendida de alguno de los subfiles. Soporte de Subfile Anidados: Varios niveles de anidacin. Anidaciones paralelas. Ej: categora y Productos Electrodomsticos Heladera

44TV Muebles de escritorio --Tambin se pueden definir subfiles 'anidados'. Los subfiles anidados consisten de un subfile Freestyle al que se puede insertar dentro de una celda otro subfile estndar u otro Freestyle. Se soportan varios niveles de anidacin, as como anidaciones paralelas. La restriccin existente es que para poder anidar un subfile a otro, el primero debe ser Freestyle, es decir que nicamente el subfile del ltimo nivel de anidacin puede ser un subfile estndar. Esta nueva opcin es til cuando se desea tener un Web Panel que despliegue por ejemplo productos indentados por categora. Por ejemplo: Electrodomsticos Heladera TV Muebles de escritorio Silla ejecutiva Mesa de directorio --Para poder implementar el ejemplo anterior se debe definir un subfile Freestyie con la categora y dentro de ste insertar otro subfile con los productos. Subfilos Anidados: Determinacin de la tabla base Cada subfile tabla base independiente. Hay que relacionar los subfilos anisados. Ej: SF1 CatID CatDsc SF2 CatID PrdID PrdDsc Cada subfile tiene una tabla base independiente a la del resto de los subfilos del rbol de anidacin. Para relacionarlas, se deben incluir en los subfiles los atributos relacin necesarios. Generalizando el concepto, se deben incluir atributos que determinen especficamente la tabla base deseada. Como existen las propiedades Visible y Hidden, no tendrn porque visualizarse en el subfile, pero s deben participar en la definicin. Siguiendo con el ejemplo anterior, el subfile de Productos deber tener el cdigo de la categora para que los relacione. Los subfiles debern tener:

45

Sf1: Sf2:

CatID CatDsc CatID PrdID PrdDsc Carga de subfilos anidados: Refresh del subfile padre Load del primer registro del subfile padre. Refresh del subfile hijo. Load del subfile hijo. Load del segundo registro del subfile padre. ---

El manejo de eventos es anlogo al del resto de los subfiles: se tienen los eventos refresh, load. Cada vez que se ejecuta el comando Load en un subfile con anidaciones, se llama al evento Refresh de cada hijo. Cada subfile puede o no tener tabla base (es decir un for each implcito). Si no lo tiene se deben cargar los datos con el comando Load como en el resto de los subfiles sin tabla base. Ejemplo de Subfilos Anidados: Veamos en nuestro ejemplo: Categoras. Pelculas.

46

WEB TRANSACTIONS Web Transactions: Nuevo form dentro del objeto Transaction. Se crea un form por defecto. Errorviewer: Control que permite visualizar los mensajes de error. Se crea por defecto y se puede modificar su ubicacin. Las Transacciones Web no son un nuevo tipo de objeto GeneXus, sino un nuevo form para las transacciones tradicionales que permiten su ejecucin en navegadores. La ventaja de estas transacciones es que facilitan la distribucin de la aplicacin, ya que slo se requiere un navegador instalado en el cliente. Tambin facilitan el diseo de aplicaciones Web porque permiten resolver el ingreso de datos sin tener que definir Web Panels y Procedimientos para resolverlo, realizando automticamente todos los controles de integridad referencial necesarios. Para disear este nuevo form HTML, que ser el que se visualizar en ambientes Internet se utiliza el mismo editor HTML que en el diseo de Web Panels. Cmo se define en GeneXus? Para disear el form HTML de una transaccin, se debe abrir la transaccin y seleccionar la opcin Object/HTML Form del men GeneXus. Otra forma de editar el HTML form, es seleccionando el tab HTML Form. Inicialmente se crea un form donde se muestran los botones de movimiento, los atributos que componen la transaccin y sus descripciones y los botones para confirmar los datos. Tambin tiene un control denominado Error Viewer donde se despliegan los mensajes. Este control podr ubicarse en cualquier parte del form y se le podrn asignar propiedades (tipo de letra, color, etc.). Web Transactions Form HTML: Botones: Confirm: Agregar o Actualizar realiza operacin para llave primaria de nivel donde est. Check: Validacin de datos. No actualiza BD. Hace rollback automtico. Delete: Elimina instancia con llave primaria del primer nivel. Movimiento: aplican nicamente al primer nivel. Pueden ser sustituidos por imgenes.

47Confirm: Al presionar este botn es que se realizan los cambios (insercin o modificacin) en la base de datos para la instancia de la llave primaria del primer nivel que est, en el momento de ser presionado el botn. Inicialmente tendr el "caption" con el valor "Agregar" o "Actualizar, dependiendo del modo. Check: Al presionar este botn se validan los datos que se ingresaron (se calculan las frmulas, se obtienen atributos inferidos, etc.) permitiendo al usuario corroborar visualmente los valores antes de confirmarlos. No actualiza la base de datos (salvo que en las reglas se invoque un programa que s la actualice y adems, realice un COMMIT). El cdigo del botn de Check hace un Rollback automtico por si llam a algn programa que actualiz la base de datos. Delete: Elimina la instancia utilizando el valor de llave primaria del primer nivel que est en el navegador, en el momento de ser presionado el botn. Movimiento: Los botones de movimiento aplican nicamente al primer nivel y estn deshabilitados cuando la Transaccin Web recibe instanciado el modo. Los botones definidos automticamente por GeneXus pueden cambiarse por imgenes a las que se les asocian en la propiedad OnClickEvent los eventos estndar de GeneXus (por ejemplo, 'Next, 'Last, 'Get', etc.). Como en las transacciones tradicionales el concepto de Siguiente o Anterior esta relacionado con el orden por llave primaria. El botn Primero y Ultimo, buscan el registro que contiene el valor menor o mayor de llave primaria respectivamente. Nota: El botn siguiente puede, al ser presionado, tener tiempos de respuesta altos si la tabla base tiene un nmero significativo de registros. Web Transactions Consideraciones generales: Cambio en el dilogo: Diferencias en validacin. Disparo de reglas. Dilogo pantalla completa por performance. Dilogo de reglas: No se valida campo a campo. No se disparan reglas del tipo alter(atribute). Atributos de la extendida se cargan al momento de confirmar los datos. La principal diferencia de las Transacciones Web con las transacciones de las aplicaciones tradicionales es el dilogo que emplea, lo que implica diferencias en la validacin de los datos y en el disparo de las reglas. Las Transacciones Web tienen un dilogo a pantalla completa, semejante al que se provee en el AS/400 en pantallas de texto. La razn de este diseo es facilitar el uso en ambientes de

48Internet donde un dilogo de tipo campo a campo como en los ambientes visuales (Visual Basic, Visual FoxPro, etc.) resultara inviable por performance. Con este tipo de dilogo, las reglas se disparan en dos momentos: al ingresar a la transaccin (las que no tienen condiciones de disparo) y tambin al confirmar los datos. Esto determina diferencias en el comportamiento de aplicaciones que tienen dilogo campo a campo: No se valida campo a campo. No se pueden disparar reglas entre un atributo y otro con reglas 'after attribute. El 'After(Attribute)' se comporta como el 'After (Level). Los atributos de la tabla extendida se cargan al momento de confirmar los datos y no antes.

Web Transactions Integridad Transaccional: Web Transaction vive entre que se llama y se carga el navegador. Web Trn inicia UTL al comenzar y la cierra (por COMMIT o ROLLBACK) antes de finalizar. No puede formar parte de otra UTL. No aplica propiedad Commit on exit Por la forma de trabajo en Internet, las Transacciones Web "viven" solamente el tiempo entre que el usuario de un navegador seleccion el link o presion un botn y la nueva pgina es mostrada. Toda modificacin a la base de datos que se haga durante la "vida" debe ser confirmada o eliminada antes de que la Transaccin Web "muera" y retorne la pgina resultante. Como consecuencia, una Transaccin Web inicia una UTL (unidad de trabajo lgica) al comenzar a ejecutar y la cierra (ya sea por COMMIT o ROLLBACK) antes de terminar. No puede formar parte de otra UTL. Si un programa llama a una Transaccin Web, sta iniciar otra (nueva) UTL. Por todo esto, no aplica la propiedad 'Commit on Exit en las Transacciones Web. Web Transactions Control de Concurrencia: Dilogo pseudo convencional. Durante visualizacin no hay locks sobre base de datos. Control de cambios a nivel de tabla. Se comparan valores de envo con los de recepcin (menos LongVarChar). Las Transacciones Web utilizan el dilogo pseudo-conversacional. Esto implica que, mientras el usuario esta realizando modificaciones a los datos o simplemente vindolos, no existe ningn tipo de locks en la base de datos.

49El control de cambios (es decir la validacin entre la lectura inicial y la confirmacin) se realiza a nivel de cada tabla involucrada en la Transaccin Web. Los valores ledos al momento de "enviar" los datos son comparados con sus correspondientes, en cada tabla, en el momento de "recibir" las modificaciones (cuando el usuario presiona Confirm). Si los valores no coinciden, se informa al usuario que hubo cambios y que debe intentar nuevamente. Es importante notar que el control de cambios se realiza sobre todos los atributos involucrados salvo aquellos de tipo Long VarChar por su tamao. Web Transactions Sin Modo instanciado: Modo Insert. Caption Agregar del botn Confirm. Si existe registro existe, mensaje en error viewer. Caption Confirmar. Modo Update. Ingreso de clave y botn Get. Caption Actualizar del botn Confirm Modo Delete. Ingreso de clave y botn Get. Botn Eliminar. Las transacciones Web pueden invocarse sin recibir el modo instanciado. Se detalla el comportamiento de las mismas dependiendo de la accin: insercin, modificacin o eliminacin de registros. Modo Insert: Una diferencia respecto a las transacciones tradicionales, es que el botn 'Confirmar dice 'Agregar. Si se quiere ingresar un registro nuevo, se digitan los datos en la pantalla y se presiona el botn Verificar para validarlos. Luego de verificarlo, se presiona el botn 'Agregar. En caso de que ya exista el registro va a dar un mensaje de error que se despliega en el Error Viewer. El mensaje es 'Ya existe el registro. Si no se trabaja con confirmacin, se insertarn los datos. Si se trabaja con confirmacin, se validarn los datos, se traern las descripciones, y el botn 'Agregar cambiar su contenido para 'Confirmar. Si se presiona 'Confirmar se agregar el registro y se despliega el mensaje 'Los datos han sido agregados. Si se hace cualquier modificacin, el botn pasar a decir 'Agregar nuevamente, y se volver el comienzo del ciclo.

50Modo Update: Para entrar en modo Update, se deber poner un valor en la clave y presionar el botn 'Get. Una vez trados los datos, el ttulo del botn 'Agregar' pasar a ser 'Actualizar. Al cargar los datos tambin se traen las descripciones. Se pueden modificar los datos y presionar el botn 'Actualizar, y se actualizarn los datos con un procedimiento anlogo al que se sigue para el modo Insert. Modo Delete: Para eliminar un registro primero se debe ingresar en modo 'Update' (ingresando la clave y presionando el botn 'Get), y luego presionar el botn 'Eliminar. Los datos se eliminan sin pedir confirmacin, y se cargan los datos correspondientes al siguiente registro, quedando en modo 'Actualizar. Si se borran todos los registros, queda en modo 'Insert. Web transaction Modo instanciado: Modo Insert Se deshabilitan botones movimiento. Caption Agregar del botn Confirm. Modo Update. Se deshabilitan botones movimiento. Caption Actualizar del botn Confirm. Modo Delete. Se deshabilitan botones menos Eliminar, Cerrar, Ayuda. Caption Eliminar Modo Insert: Las Transacciones Web que se invocan seleccionando el modo Insert, deshabilitan los botones de movimiento entre registros y el botn 'Seleccionar. Adems el ttulo del botn 'Confirmar es 'Agregar. Modo Update: Cuando se invoca una Transaccin Web seleccionando el modo Update se deshabilitan los botones de movimiento entre registros y el botn 'Seleccionar. Adems el ttulo del botn 'Confirmar es 'Actualizar. Modo Delete: Cuando se invoca una Transaccin Web seleccionando el modo Delete se deshabilitan todos los botones excepto los de 'Eliminar, 'Cerrar y 'Ayuda'. Al botn 'Confirmar' se le pone como ttulo 'Eliminar. No se pide confirmacin para la eliminacin (se supone que ya presion 'Eliminar en el 'Trabajar Con'). Web Transactions de ms de un nivel: Nmero de niveles de una Web transaction. Ingreso de lneas.

51Presionar botn Actualizar para agregar lneas. Eliminacin de lneas. Marcar check box y presionar Actualizar. Botn Eliminar borra toda la transaccin. Cuando se trabaja con Transacciones Web de mas de un nivel, se tienen que tener en cuenta los siguientes puntos: Nmero de niveles de una transaccin: Las Transacciones Web pueden tener N niveles de anidamiento. El primer nivel tiene que representarse sin subfile y para los niveles subordinados, se tiene que representar el primero necesariamente como un subfile. Ingreso de lneas: Si se quieren ingresar ms lneas a un subfile que ya tiene lneas, se deben ingresar, y luego presionar el botn de "Actualizar", no de "Agregar. El botn "Agregar" intentar agregar una nueva instancia de toda la transaccin. Eliminacin de lneas: Cuando se desea eliminar alguna lnea del subfile, se debe marcar la misma con el check box que se encuentra a la izquierda, y presionar el botn de "Actualizar", no de "Eliminar". El botn "Eliminar" eliminara toda la transaccin, no las lneas marcadas. Nota: Es importante considerar nuevamente que cuando se est en una Transaccin Web se est modificando todo el "documento" y no se esta en un nivel en particular de la misma. Por eso para eliminar lneas se debe utilizar el botn "Actualizar porque en realidad se esta actualizando el "documento". Lo mismo para agregar lneas, se debe utilizar el botn "Actualizar" porque se est actualizando el "documento". Regla Prompt: Se generan en forma automtica prompts. Se puede utilizar regla prompt tanto en Web transactions como en Web Panels. Reglas: Prompt on. Para cada Transaccin Web se genera un Web Panel que ser el prompt por defecto (autoprompt), y los prompts correspondientes a las claves forneas que se tengan. Se puede utilizar la regla prompt al igual que en Transacciones. La regla prompt on permite determinar qu control de la Web Transaction determina la invocacin al prompt.

52Web Panels como Prompts: Condiciones: Uno o ms parmetros de tipo output. Algn control con propiedad ReturnOnClick en true. Los valores devueltos se determinan al armar la pgina. Existe Funcin ReturnOnClick() El web panel que ser utilizado como prompt debe cumplir ciertas condiciones: 1. Debe tener uno o ms parmetros de tipo output. Puede tener de in, de inout tambin pero lo importante es que tenga de output que son los que devolver. 2. Alguno de los atributos, variables, text blocks o imgenes del form debe tener la propiedad de diseo ReturnOnClick en True. Puede tener habilitada esta propiedad en ms de un atributo/variable. En caso de ser un atributo o una variable, tiene que estar Read Only para que la propiedad est habilitada. 3. Los valores a retornar (de los parmetros definidos como de output) no se determinan al realizar click, sino al desplegarse la pantalla por lo que tienen que tener el valor vlido a retornar en cada Load (si se muestra un subfile, por ejemplo). Si uno de los atributos variables, text blocks o imgenes del form que tienen la propiedad de diseo ReturnOnClick en True tambin tiene programado el evento Click, el cdigo que este en el dicho evento se ignora. Simplemente al hacer click se asignan los valores a las variables de tipo OUT y se retorna. Web Panels trabajar con : Varias Implementaciones posibles: Botones/ Imgenes fuera subfile. Botones/ Imgenes con evento clic en cada lnea. Variables con link. Los Web Panels 'Trabajar con..." se pueden implementar de varias formas: Botones/imgenes fuera subfile: En este caso se procesan todas las lines con un For each line al presionar el botn. Botones/imgenes con evento click en cada lnea: En este caso se dispara el cdigo del evento en la lnea donde se presion el botn o se hizo click. Variables con link: En este caso se agregan click's, ya que se llama a un Web Panel intermedio para realizar alguna operacin.

53

WEB OBJECTS Web Components: Objetivo: Disminuir costo desarrollo y mantenimiento simplificacin). Web Panels con propiedad de Web Component. Ejemplos: men, login, etc.

(reutilizacin

y

Normalmente cuando se desarrolla una aplicacin 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 reutilizacin 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. Es decir, pueden ser ejecutados por s solos como cualquier otro Web Panel o pueden formar parte de otro objeto Web Panel o Web Transaction y por ende permiten a los diseadores de aplicaciones Web GeneXus un alto grado de reutilizacin de los mismos. Cualquier parte de un Web Panel que se repita en varios Web Panels o Web Transactions de una aplicacin puede ser definida como Web Component. Algunos ejemplos de ello: mens, login, rea que permite la personalizacin, 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. Web Components definicin: Definicin: seteado de preferencia Web Component en Yes. Si Web Panel es main puede ser ejecutado adicionalmente en forma independiente. Se generan dentro de HTML del Web Panel Contenedor y se enva HTML completo al navegador. Para definir un Web Panel como Web Component se debe configurar la propiedad 'Web Component' del objeto en 'YES. Se debe notar que un Web Panel definido como Web Component no pierde ninguna de sus dems facilidades, o sea, si por ejemplo es un Web Panel MAIN, puede ser ejecutado en forma autnoma.

54Los Web Components se generan dentro del mismo HTML del Web Panel que los contiene. Esto es, el servidor resuelve la inclusin del Web Component en tiempo de ejecucin y devuelve al navegador el cdigo HTML con el Web Component ya incluido. Web Components Uso: Agregado de Web Component: Insert/ Web Component en Webobject contenedor. Se da un nombre al control Web Component (Propiedad ControlName). En evento Start se asigna Web Panel a carga en el control: WC.Object = Create(nombre_objeto). La asignacin puede ser dinmica. Para insertar un Web Component en un Web Panel o Web Transaction se debe elegir la opcin 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 diseo que se permite configurar en su dilogo de propiedades: ControlName: Nombre del control Web Component Propiedades: Object: permite indicar el Web Panel que se va a cargar. Visible: Permite ocultar / visualizar Web Component. A continuacin se detallan las propiedades que se pueden modificar a los Web Components en tiempo de ejecucin: 1. Object: permite determinar en tiempo de ejecucin el Web Panel que se va a desplegar en el lugar del control. 2. Visible: si la propiedad Visible tiene el valor 0, el Web Component desaparece del formulario. Web Components Orden de los eventos (GET): Start del Web object "contenedor" Refresh del Web Panel "contenedor" Load del Web Panel "contenedor" Start Web Component1 Refresh Web Component1 Load Web Component1 .

55El orden de carga de los Web Components se corresponde con la ubicacin de los mismos en el Form y va de izquierda a derecha y de arriba hacia abajo. Cuando se ejecuta un 'GET (la primer llamada a un Web Object), el orden de los eventos de un Web Object que contiene un Web Component es el siguiente: Start del Web object "contenedor" Refresh del Web Panel "contenedor" Los eventos que se disparan a continuacin dependen del orden de los controles en el form (de izquierda a derecha y de arriba abajo). Si el Web Object tiene un subfile ANTES de cualquier Web Component, el orden de los eventos que siguen a los anteriores es el siguiente: Load del Web Panel "contenedor" Start Web Component 1 Refresh Web Component 1 Load Web Component 1 . Si el Web Object tiene un subfile al DESPUS de los Web Components, el orden pasa a ser: Start Web Component 1 Refresh Web Component 1 Load Web Component 1 . Load del Web Panel "contenedor" Si el subfile est intercalado, se intercala tambin el disparo del evento Load. Web Components Orden de los eventos (POST): Start del Web object "contenedor" Start del Web Component cuyo evento se dispar. Evento de usuario del Web Component. Refresh del Web Component. Load del Web Component. Refresh del Web Object Contenedor. Start Web Component (menos en aquel que proces el evento) Refresh Web Component. Load Web Component. Cuando se ejecuta un 'POST (el disparo de un evento de usuario en un Web Object), el orden de los eventos de un Web Object que contiene un Web Component es el siguiente: Start del Web object "contenedor" Start del Web Component cuyo evento se dispar

56Lectura de variables Evento de usuario del Web Component Refresh del Web Component Load del Web Component El orden de los eventos que siguen se corresponde con el orden descrito en el caso anterior. Web Components en subfile: Se pueden tener dentro de un subfile Freestyle. Por cada lnea del subfile se disparan los eventos Start, Refresh y Load del Web Component. Si se dispara un evento de usuario del Web Component, al llegar a la lnea se dispara el order correspondiente al POST. Web Componets Observaciones: Sustitucin de eventos desde Web Object Contenedor. En diseo tamao fijo, en ejecucin se ejecuta a tamao real. Web Component puede contener Web Component. Parmetro recibido por Web Component no son opcionales. Propiedades, mtodos y variables de Web Component no son accesibles desde Contenedor. Se heredan propiedades del Form del Contenedor. En diseo, el tamao del Web Component permanece fijo, pero en ejecucin, en caso de tratarse de un Web Component el tamao quedar sujeto al espacio ocupado por el mismo. La forma de fijar el tamao del Web Component en ejecucin es entonces incluyndolo en una tabla y fijando el tamao de la celda. Un Web Component puede a su vez contener otros Web Components. En el evento START o REFRESH se deber asignar un objeto al Web Component mediante la funcin link. Por ejemplo Comp1.component = link(hmenu,1). Los parmetros de los Web Components, cuando son utilizados como tales, no son opcionales. Notar que esto es una diferencia con los Web Panels 'comunes' cuyos parmetros s son opcionales. Las propiedades, los mtodos y las variables de los Web Components no son accesibles por los objetos que los contienen. Si por ejemplo se desea que un campo del Web Component tenga un color determinado por el padre, se le tendr que pasar por parmetro el color y asignarlo en el evento Start del Web Component. En ejecucin, las propiedades del form del Web Component son heredadas del Web Panel que lo contiene. Por ejemplo si el form de un Web Component tiene color verde, pero el

57form del Web Panel que lo contiene tiene color blanco, entonces este ltimo predominar sobre el primero. No es as con las propiedades de los dems controles. Se puede usar el evento click de imgenes en Web Components. Embedded Page: Objetivos: Incluir informacin externa. Dividir carga en varios sectores web. Control al que se puede asociar un Web Object en cualquier servidor o cualquier URL. El objetivo de las 'Embedded Pages' es poder incluir informacin 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 una Web transaction. A este control se le puede asociar cualquier pgina u objeto web GeneXus, cuyo contenido luego ser incluido en ejecucin dentro del objeto. En particular, la pgina u objeto web GeneXus asociado a un control de tipo 'Embedded Page' puede estar en otro servidor. Embedded Page Definicin: Agregado de Embedded Page: Insert/ Embedded Page en Webobject Contenedor. Embedded Pages se generan como un inline frame () en el HTML final. El navegador se encarga de realizar el requerimiento e incluirla en el inline frame. Para insertar una Embedded Page en un Web Panel o Web Transaction se debe seleccionar la opcin Insert / Embedded Page, con lo cual se crear un control de tipo 'Embedded Page' en el mismo. 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 pgina asociada y de incluirla dentro del inline trame. Embedded Page Propiedades: En diseo:

58Propiedades: El control 'Embedded Page tiene las siguientes propiedades: ControlName: Nombre del control. BorderStyIe Scrollbars Source TooltipText Height Width Align Embedded Page Propiedades: En ejecucin: BorderStyIe TooltipText Source Visible

Propiedades modificables en ejecucin: A continuacin se detallan las propiedades modificables en tiempo de ejecucin: BorderStyIe TooltipText Source Visible Embedded Page en subfile: Se puede incluir Embedded page en subfile Freestyle. Si es un Web Panel externo, el orden de los eventos se corresponde con el de un Web Component. Consideraciones finales diseo: Browsers proveen soporte diferente de HTML. Al disear se deben tener en cuenta diferencias. Funciones: BrowserID, BrowserVersion. Al disear pginas HTML en general se debe tener en cuenta que los browsers presentan soportes diferentes de cdigo HTML. No todos implementan todas las caractersticas posibles, de forma que al encontrarlas, normalmente se ignoran, pero en algunos casos se pueden obtener resultados inesperados.

59Consejo: probar en todos los browsers mientras se va diseando la aplicacin. Adems, se dispone de las funciones BrowserID, BrowserVersion, que permite obtener el browser que ests usando el cliente, de forma de poder condicionar algunos detalles de diseo. Modificar HTML: Mayor potencia. Se modifica el cdigo directamente en la seccin Source. Atencin: No se puede modificar cdigo entre tags . La posibilidad de modificar el cdigo HTML agrega potencia a los Web Objects, ya que permite al usuario realizar llamadas a Javascripts, o simplemente agregar funcionalidad al cdigo HTML existente. Para modificar el cdigo HTML se puede directamente editarlo de la seccin 'Source' del formulario y agregarlo como se va a mostrar en el ejemplo que sigue a continuacin. Hay que tener en cuenta que no se pueden realizar modificaciones al cdigo que se encuentra entre los tags , ya que los mismos son utilizados para identificar los controles que se encuentran en pantalla. En caso de modificar los mismos, el cdigo generado no va a ser correcto y los resultados impredecibles. Ejemplo Modificar cdigo HTML:

En el primer ejemplo se va a modificar el cdigo HTML para que al hacer clic en una imagen se vuelva a la pgina visualizada anteriormente en el navegador. Para esto se inserta una imagen en el formulario obteniendo la pantalla que se observa en la diapositiva. Al seleccionar la seccin Source dentro del formulario, se puede observar el cdigo HTML correspondiente a la imagen insertada en la seccin Diseo:

60

Para poder agregar el cdigo HTML para volver hacia atrs, se debe modificar el cdigo generado para la imagen, agregando una opcin onclick y asignndole history.back(). De esta forma al ejecutar el Web Object, cuando se hace click sobre la imagen se vuelve a la pgina visualizada antes de llamar al Web Object. Asignar cdigo HTML a variables/ atributos:

Otra forma posible de agregar cdigo HTML es asignndoselo a una variable que tenga la propiedad Read Only'=True o a al caption de un Text Block. Con este mtodo no se puede modificar el cdigo HTML generado, como en el caso presentado anteriormente, por lo que para realizar la misma operacin, se tiene que definir todo el cdigo correspondiente a la imagen como se muestra a continuacin: En diseo se define una variable o un Text Block como se ve en la diapositiva. En el evento Start de este Web Panel se debera definir el cdigo HTML correspondiente a la imagen, junto con la opcin que permite retroceder en el browser. Event Start &pruhtml= ' txthtml.caption=' Endevent

61Pastear HTML: Se puede pastear cdigo HTML de otras pginas? Limitaciones: . Se puede pastear cdigo HTML de otras pginas? La respuesta a esta pregunta es afirmativa, p ero se debe tener cuidado al realizar esta operacin, ya que en la copia puede incluirse cdigo que se encuentra dentro de tags que pueden provocar un comportamiento impredecible. SSP: Generacin inteligente de pginas estticas. Web Panel intancia datos recibidos por parmetro. Resultado: pgina.html (Ej: hpelicul_1.html) Conviven con Web Panels dinmicos. El objetivo es posibilitar la generacin inteligente de pginas estticas desde GeneXus. Como SSP entendemos la ejecucin de un web panel dinmico para una instancia de los datos que recibe como parmetro, es decir archivos de texto conteniendo HTML con la informacin obtenida a partir de la base de datos. Estas SSP pueden convivir con los web panels dinmicos, tanto pudiendo llamarlos como pudiendo ser llamados. Esto ser muy til en sitios de informacin (portales) donde gran parte de la informacin, despus de generada ser esttica. El nombre de las SSP resulta de la concatenacin del nombre de! objeto web panel (8 caracteres) con la lista de parmetros que recibe separados por el carcter '_ y la extensin HTML. Ventajas y uso de SSP: Ventajas: Mejor performance. Mejor sobrecarga del servidor. Uso: Contenido que vara con periodicidad conocida. Informacin NO on-line. Porque usar SSP? 1. Se comportan con mejor performance que los dinmicos. 2. Recargan menos al servidor en tiempo de ejecucin. En que casos es viable la utilizacin de SSP? 1. Si tenemos pginas cuyo contenido vara en la base de datos con una periodicidad conocida.

62Si nuestra aplicacin puede soportar mostrar alguna informacin no on-line sino que se actualice hacia el web con cierta periodicidad. Generacin SSP: Preference: Generation Mode. Dynamic Panels Smart Static panels. A nivel de modelo y a nivel de objeto. Se genera desde lnea de comandos o desde otro Web Panel. Existe una nueva preference a nivel del modelo, en la seccin Web Information denominada 'Generation Mode. Las opciones son 'Dynamic Panels' (que es el valor por defecto) y 'Smart Static Panels. El valor Dynamic Panels significa que el web panel se generar con acceso dinmico a la base de datos. El valor Smart Static Panels significa que el web panel se generara en fo