Bienvenido al curso Desarrollo de aplicaciones para Internet con GeneXus

Este curso - actualizado a la versin GENEXUS 8.0 - lo va a capacitar en el desarrollo de aplicaciones para Internet utilizando los objetos web GENEXUS. Para poder realizar el curso debe contar con la versin 8.0 de GENEXUS o superior. El curso consta de los conceptos tericos necesarios para el desarrollo de una aplicacin web, as como la puesta en prctica de los mismos en una aplicacin ejemplo. El desarrollo de esta aplicacin podr ser visualizado paso a paso a lo largo del curso mediante videos incluidos en el mismo. La idea es que Ud. vaya realizando esta aplicacin en paralelo (a medida que avanza captulo por captulo en forma ordenada). En caso de estar interesado en consultar a un docente del curso las dudas que le vayan surgiendo, y/o dar un examen final de forma tal de obtener (en caso de aprobacin) un certificado de haberlo realizado en modalidad no presencial, dirjase a nuestro sitio de capacitacin a distancia: http://www.gxtechnical.com/capacitacionadistancia , donde podr informarse y contratar estos servicios.

INTRODUCCION AL CAPITULO 1
Para poder entender cmo funciona el Web, necesitamos primero conocer el significado de ciertos conceptos que vamos a usar frecuentemente a lo largo de todo el curso. Por lo cual, comenzaremos con estas definiciones para luego s introducirnos en el desarrollo de aplicaciones para Internet. Comencemos entonces con algunas definiciones

Qu es INTERNET?
Internet es el nombre genrico que recibe la unin de todas las redes de comunicacin a nivel mundial. Se podra definir como una red global en la que se unen todas las redes que utilizan protocolos TCP/IP y que son compatibles entre s.

Qu es el WEB o WWW?
El Word Wide Web (Web o WWW) brinda una interfaz grfica, fcil de usar que permite navegar para buscar documentos en Internet. Estos documentos, como tambin los links que existen entre ellos forman un "web" de informacin. El WEB permite saltar o "hyperlink" de una pgina web (o web page) a otras. Puede pensarse en el WEB como una gran biblioteca. Web sites son como los libros (libros electrnicos) y las pginas web son como las pginas especficas de estos libros. Estas pginas pueden contener noticias, imgenes, sonidos, 3D, etc. Adems pueden estar ubicadas en computadoras de cualquier parte del mundo. Los libros electrnicos mantienen el concepto bsico del libro, y adems, brindan la oportunidad de disponer de una estructura no lineal, la que permitir, entre otras cosas, decidir el orden en el que se desea recibir la informacin.

EN EL WEB SE DISTINGUEN, BASICAMENTE, DOS TIPOS DE PAGINAS

o o

Pginas estticas Pginas dinmicas

Pginas estticas
Las pginas estticas son las ms sencillas, se crean usando un editor de pginas Web o bien escribiendo directamente 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. Algunos ejemplos de estas pginas son: Informacin general, Marketing, Informacin similar a la que se distribuye en folletos y documentos. Tienen la ventaja de brindar un acceso rpido y cmodo a informacin y brindar direcciones de 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 ingresada 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 impulsar los negocios de la empresa.

Al utilizar este tipo de paginas, 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.

A continuacin se presenta una lista de ejemplos que se prestan para una aplicacin que utilice pginas dinmicas:

Home Banking: operaciones varias sobre cuentas bancarias. Divulgacin de informacin: acceso a informacin publicada por la empresa. * sin costo en el caso de que la informacin sea pblica
* con costo para aplicaciones en el que se exigen una validacin de usuario.

Comunicacin con proveedores: para hacer rdenes de compra, verificar existencia de stock. Intranet: Aplicaciones internas de la empresa. No pueden ser accedidas desde fuera. Venta directa: Compra de artculos desde la casa, similar a la compra por catlogo.

APLICACIN 3 CAPAS WIN VS APLICACIN WEB

Anteriormente se clasificaban las soluciones en Internet segn la frecuencia con la que los usuarios las accedan. Para usuarios casuales, se recomendaba una solucin Web. Para aplicaciones con usuarios frecuentes, y ms avanzados, a los cuales se les poda capacitar en el uso de una aplicacin ms sofisticada, se recomendaba una aplicacin 3 capas (usando Java por ejemplo). Hoy da una aplicacin web ha alcanzado el mismo nivel de sofisticacin de interfaz que cualquier aplicacin Win, y debido a las ventajas que presenta (facilidad en la instalacin de la aplicacin, solo se requiere un cliente fino: un browser, y alta escalabilidad), ha marcado una tendencia en lo que a soluciones de software se refiere.

Por lo tanto, la clasificacin en base a la frecuencia de uso de la aplicacin pasa a ser obsoleta, y los parmetros de decisin en cuanto a que tipo de solucin implementar giran en torno a otros factores. Si la aplicacin se va a crear de cero, lo que se recomienda es implementar una solucin Web. En caso de que se disponga de una solucin 2 capas, y se quiera migrar a una arquitectura 3 capas: Si el tiempo es un factor relevante en la migracin del proyecto, pasar a Win 3 capas es ms rpido que a Web. Migrar a Web implica un costo de conversin vinculado al cambio de ambiente. Ms adelante en el curso se tratarn temas ms especficos en cuanto a la comparacin GUI WEB. Son ambientes diferentes (GUI - HTML) y es necesario tener en cuenta ciertas consideraciones cuando se hace la conversin. Detalles de estas consideraciones se vern tambin ms adelante en el curso.

ALGUNAS DEFINICIONES
Para poder entender cmo funciona el web, necesitamos definir ciertos conceptos, que son los que se van a manejar de ahora en adelante: URL: Uniform Resource Locator HTTP: HyperText Transfer Protocol HTML: HyperText Markup Language

URL
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 URLs 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. Sintxis 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.genexus.com

path/filename: Ubicacin y nombre del documento en el servidor. [parm1,...,[parmn]] Informacin opcional para consultas

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: 1) Conexin: 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. 2) Solicitud: Una vez que la conexin al servidor HTTP ha sido establecida, el browser enva una solicitud para el recurso deseado en el servidor. 3) Respuesta: Si el servidor encuentra el recurso, ste es enviado al browser y se pasa al ltimo paso. De lo contrario, un mensaje de error es enviado y se pasa al ltimo paso. 4) Se cierra la conexin. Si el servidor retorn el recurso solicitado, el browser realizar la carga del mismo y ser desplegado al usuario.

HTML
Es el lenguaje en el cual estn escritos los documentos del WWW. Es un subconjunto especializado del lenguaje ms general SGML (Standard Generalized 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, etc, 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 <head> y <body>. 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.

Un ejemplo de cdigo HTML podra ser el siguiente:

<HTML> <HEAD> <TITLE>This is my first page </TITLE> </HEAD> <BODY>shows in a very <I>simple</I> way,the basic structure of an HTML document. </BODY> </HTML>
el cual se vera en un browser de la siguiente forma:

Para poder comprender mejor la tecnologa escondida detrs de las aplicaciones desarrolladas para el web, es necesario aclarar algunos conceptos adicionales, los cuales definimos en orden de aparicin histrica: CGI: Common Gateway Interface WEB CLASSES SERVLETS ASP.NETCGI CGI es un estndar que define la interfaz 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

A partir de Visual Basic 6.0 existen nuevas facilidades para generar aplicaciones para Internet, la ms notoria es la llamada WebClasses Designers. Estos objetos son programados en Visual Basic y al compilarlos se crea un ActiveX DLL, que ser ejecutado por el Web Server (Microsoft Internet Information Server), y un archivo .ASP (Active Server Page) que sirve como punto de entrada para cada clase en la DLL.

SERVLETS
Junto con JAVA aparecieron componentes para el web con la misma funcionalidad mencionada anteriormente en relacin a CGI y ASP denominados servlets. Son clases JAVA que ejecutan en el servidor y permiten obtener informacin en forma dinmica que luego envan al cliente.

ASP.NET
ASP.NET es otra alternativa de Microsoft para el desarrollo de aplicaciones web. Esta tecnologa se desarroll para la nueva plataforma .NET de Microsoft y se trata de una evolucin de las ASP o Active Server Pages. Tambien en este caso se trata de aplicaciones que ejecutan en el servidor y envian el HTML resultante al cliente. Los programas en el servidor son .dlls que se invocan con extensin .aspx.

ARQUITECTURA GENERAL
En la imagen que mostramos a continuacin 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 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.

REQUERIMIENTOS BASICOS PARA PUBLICAR PAGINAS (ESTATICAS O DINAMICAS) EN INTERNET

Se debe disponer de una red TCP/IP, es decir, que tanto el servidor como el cliente deben tener instalado el protocolo de red TCP/IP. El servidor debe tener un software que lo habilite como servidor Web, normalmente es a este software al que se denomina Servidor Web o Web Server. El cliente nicamente necesita un browser para poder visualizar las pginas Web. Ms adelante, se especificar el software adicional necesario, dependiente del generador, para poder desarrollar los objetos Web. Los requerimientos de software para el desarrollo varan dependiendo de la plataforma y generador en la cual se est trabajando.

Resumiendo, los requerimientos bsicos, independientes de plataforma y generador, seran los siguientes: EN EL SERVIDOR TCP/IP - protocolo de comunicacin que conforma la red. Servidor Web - software que se instala en el servidor y permite hacer pblicas las pginas.

EN EL CLIENTE TCP/IP Browser - nos permite visualizar las pginas.

QUE ES UN SERVIDOR WEB?

El servidor web, es un software que habilita al servidor para la publicacin de pginas web, tambin es denominado Web Server. Debe ser configurado, de forma que permita el acceso de usuarios que se conectan a travs de Internet. La imagen que se muestra a continuacin, es simplemente un ejemplo de Servidor Web. Debe tenerse en cuenta que si bien la informacin a configurar es siempre la misma, el dilogo de configuracin vara dependiendo del Servidor Web que se est utilizando. La imagen muestra en la consola del IIS (Internet Information Server), como se ha definido un alias de nombre services.

En la figura a continuacin se pueden ver las propiedades del alias services definido, en particular el directorio fsico al cual se corresponde (Local Path).

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. En particular en el caso del generador .Net (que hemos elegido para ejemplificar los ejercicios prcticos del curso), el directorio virtual y su alias son creados automticamente y no es necesario que el usuario lo haga por su cuenta en etapa de desarrollo.

Para poder publicar pginas dinmicas, es comn definir uno o varios directorios adicionales con permisos de ejecucin.

Tambin se pueden definir mltiples directorios virtuales con permisos de lectura para colocar diversas pginas estticas, imgenes, etc.
Los conceptos de directorio virtual y alias son manejados en todos los servidores Web, lo que vara es la interfaz que provee cada Web Server para realizar la configuracin correspondiente. El alias es el nombre que utilizarn los usuarios de Internet para acceder a las pginas web. Estas pginas estn fsicamente almacenadas en un directorio (conocido como directorio virtual). Veamos un ejemplo para ilustrar esto:

Podemos tener en el directorio c:\empresa\prensa\publicaciones pginas web en formato .htm las cuales queremos publicar en la web. Entonces, con un directorio virtual podemos colocarle un alias a esta direccin (denominado PUBLICO). De esta forma, los usuarios web mediante la url http://ServerWeb/publico/prensa.htm accedern al archivo fsico que se encuentra ubicado en c:\empresa\prensa\publicaciones\prensa.htm del disco local de la mquina que tiene el servidor Web instalado (ServerWeb).

PLATAFORMAS Y ALTERNATIVAS PARA EL DESARROLLO DE APLICACIONES WEB

Los generadores disponibles para generar objetos web son:

C/SQL .Net Java Visual Basic

Por lo tanto, pueden ejecutarse en un servidor Web Windows (usando C/SQL, .Net, Java o VB), en servidores UNIX (usando C/SQL o Java) o en servidores Iseries (Java).

Los objetos web podrn usar cualquier manejador de base de datos, dentro de las plataformas soportadas por cada uno de los generadores GeneXus.

Grficamente, las alternativas seran las siguientes:

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.

INTRODUCCION AL CAPITULO 2
Identificamos como objetos web a los objetos que se utilizan para desarrollar aplicaciones web con GENEXUS: Web Panels y Transacciones con form HTML.

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 objetos web (Web Objects). Los objetos ejecutan en el servidor. El trabajo se realiza a pantalla completa (dilogo full screen en lugar de campo a campo)

A lo largo del curso profundizaremos sobre estos aspectos.

En este captulo, comenzaremos a trabajar con el editor de objetos web y veremos sus principales caractersticas

FUNCIONAMIENTO - ARQUITECTURA
Al utilizar objetos web 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 objeto web que realizar 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 objeto web (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.Grficamente, el ciclo sera el siguiente:

Dado que los diferentes generadores utilizan diferentes tecnologas para solucionar el acceso a la base de datos. Analicemos esto, para cada uno de los generadores.

C/SQL
En el caso de C/SQL se utiliza CGI para los programas que devuelven la informacin requerida de la base de datos.

.NET
Los objetos web generados con .Net son .dlls que son invocados con extensin .aspx. La tecnologa utilizada en este caso se denomina ASP.NET.

VISUAL BASIC
Los objetos web generados con Visual Basic, utilizan la tecnologa denominada 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 objetos web 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, como tambin compartir conexiones a la base de datos. Mas adelante veremos en mas detalle cada uno de los generadores.

EDITOR HTML DE OBJETOS WEB

Introduccin
La finalidad de este editor es potenciar y simplificar la edicin del form HTML de los objetos web, permitiendo crear fcilmente sitios web 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. Es un editor 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.

Complementando este editor, existe el Editor de Temas, que permite definir clases para los controles usados en una aplicacin web GeneXus y configurar de una forma sencilla las propiedades de estos controles simplificando el desarrollo y mantenimiento de las aplicaciones web.

Descripcin del Editor HTML

El uso de este editor es muy sencillo, de forma que todo el diseo realizado se puede visualizar en ejecucin sin necesidad de incluir cdigo HTML en el Form. A modo de ejemplo, si se desea modificar el tamao de la font utilizada en el objeto web, simplemente se selecciona el texto y se cambia al tamao deseado.

El editor facilita el formateo de textos (tamao de letra, tipo de letra, color, etc.), y permite la insercin de controles GeneXus (Controles edit, grid, botones, etc.). Este editor provee el manejo de tablas, caracterstica fundamental a la hora de disear pginas web. Esta facilidad habilita al usuario a disear mejores pginas, as como le permite tener el control de la alineacin de los controles dentro del Web Panel.

Diseo de Objetos Web

A continuacin se documentan las caractersticas ms importantes para el diseo de objetos web. Para trabajar con objetos web se dispone de dos barras de herramientas, una habilita las funcionalidades del editor, mientras que la otra permite la insercin de los controles. A

continuacin se documentan las operaciones que se pueden realizar con cada una de ellas, as como las caractersticas de los controles disponibles en objetos web.

Insertar controles y sus propiedades

Los controles que se pueden utilizar dentro de los objetos Web podemos clasificarlos en dos grupos:

1. Aquellos que pueden ser usados en todos los objetos GeneXus: Atributos Variables Botones

2. Los que son propios de los Web Objects, o tienen un comportamiento diferente que en el resto de los objetos. Imagenes Grilla Texto Text Block Tabla Grilla Free Style Error viewer Web Components Embedded Pages

Para insertar controles en el form del objeto web se puede utilizar la opcin Insert del men de GeneXus o la siguiente barra de herramientas.

Ms adelante se detallan los controles disponibles, as como las opciones disponibles en esta barra de herramientas.

Formateo de texto
La barra de herramientas disponible para realizar estas operaciones es la siguiente:

Las operaciones que se pueden realizar son las estndares de edicin y formateo de texto. Una de las opciones destacables relacionada con objetos web es , que permite visualizar los bordes de las tablas cuya propiedad Border est con valor 0. De esta forma, se pueden ver en diseo los bordes de las tablas an cuando stos no se vean en ejecucin. Otra opcin interesante es que facilita el trabajo con controles de tipo Text Block.

Design VS. Source

En el borde inferior de la pantalla cuando se visualiza el form de un objeto web, se pueden observar varias secciones, entre ellas Web Form. Al hacer clic sobre esta seccin se puede disear la pantalla del objeto web, es decir se insertan los controles y se visualiza el aspecto que va a tener en ejecucin el mismo.

Si se presiona el botn derecho del mouse dentro del formulario del objeto web, adems de la opcin Properties (que permite configurar las propiedades del form) se visualizan dos opciones: View Source y Edit HTML Source. Al seleccionar la opcin View Source se abre una ventana donde se puede visualizar el cdigo HTML que se va a generar al ejecutar dicho objeto. Al cerrarla, se vuelve al formulario del objeto web. Si se selecciona la opcin Edit HTML Source, se puede modificar el cdigo HTML o agregar cdigo, de forma tal que el cambio se mantiene en el objeto y se genera posteriormente. En este caso, el cdigo se visualiza dentro de la ventana del objeto web y para volver al formulario, es necesario volver a presionar el botn derecho del mouse y seleccionar la opcin Edit Web Form. La opcin Edit HTML Source se usa para cualquier caso en el que sea necesario agregar cdigo HTML manualmente, por ejemplo, agregar cdigo javascript (si bien esto se puede hacer de otras formas). Todo el HTML que se agregue queda entre los Tags <Body></Body> del objeto generado.

CONTROLES Y SUS PROPIEDADES

En este captulo iremos viendo los diferentes controles de los objetos web y las propiedades de cada uno de ellos.

Es importante resaltar que la asignacin de las propiedades puede hacerse directamente en el control o en una clase de un Tema.

En ambos casos, se asigna el valor a la misma, pero lo que vara es el costo de mantenimiento posterior que implicarn cambios a las mismas.

En el caso de asignar las propiedades directamente en el control, estas solamente aplicarn al mismo. Esta asignacin puede hacerse en tiempo de diseo y para algunas de las propiedades pueden modificarse en tiempo de ejecucin (programando los eventos del objeto). Cualquier cambio, requerir generar y compilar el objeto.

En el caso de asignar las propiedades en la clase de un tema, cualquier cambio de diseo, se realizar en el Tema, sin necesidad de generar/compilar absolutamente nada.

En este captulo se ver una introduccin al objeto Tema y el Editor de Temas, y ms adelante en el curso, se ver en detalle el funcionamiento de ambos.

Por detalles de la forma de configurar las propiedades de los controles, referirse a: Orden de precedencia de las propiedades

CREACION DEL MODELO DE PROTOTIPO

Vamos entonces a crear el modelo de prototipo para poder ejecutar nuestra aplicacin. Como ya vimos antes, los generadores disponibles para generar objetos web son: C/SQL, Java, .Net y Visual Basic. Como primer paso, deben crearse la Base de Conocimiento (en GeneXus 8.0 o una versin superior) y consolidar el archivo initial.xpz el cual contiene todas las transacciones y procedimientos de los cuales partimos. El generador que vamos a utilizar en el curso es .Net con SQL Server como DBMS, pero ud. puede elegir el generador que desee y disponga. Les recordamos leer en el Captulo 15 Requerimientos y configuraciones necesarias por generador para

conocer los detalles correspondientes al generador que ud. haya elegido, antes de crear el modelo de prototipo. Vamos a crear entonces el modelo de prototipo...

CREACION DEL PRIMER WEB PANEL

Vamos entonces a crear nuestro primer web panel, para ver cmo es el editor HTML y cul es la forma de trabajar en l.

A lo largo del curso vamos a ir desarrollando una aplicacin web, un Sitio de ventas de pelculas en sus diferentes formas (videos, DVD, etc.) del cual se tienen ya definidas las estructuras de las transacciones y procedimientos necesarios y nos concentraremos nicamente en el desarrollo de los objetos web.

Las Transacciones que ya se tienen definidas son las siguientes:

MoviesType

MovieTypeId* MovieTypeDsc Tipo de pelcula (Video, DVD)

Actors

ActId* ActLastName ActName

Customer CustId* CustName CustLastName CustUsr CustPsw CustEmail CustNews Si desea suscribirse a la lista de noticias del sitio (Y/N)

MovieGenre MovGenId* MovGenDesc (MovieId* MovieTitle)

Movies

MovieId* MovieImg Path de la imagen de la pelcula MovieTitle MovieSumry MovieStck Cuantas pelculas hay en stock MovieQtity Cantidad de pelculas vendidas (MovieTypeId* MovieTypeDsc (MovieLinDate* MovieLinPrc)) (ActId* ActLastName ActName)

Purchase Order

PurOrdId* PurOrdSts (Status de la orden Pendiente, Finalizada) CustId CustNameCustLastName PurOrdDate PurOrdTot= SUM(PurOrdLinTot) frmula PurOrdLastLin (PurOrdLinId* MovieId MovieTitle MovieTypeId MovieTypeDsc PurOrdQtity

PurOrdLinUnPrc = udp(PUnitaryPrice, MovieId, MovieTypeId) frmula PurOrdLinTot = PurOrdQtity * PurOrdLinUnPrc frmula )

La forma de trabajo que vamos a tener a lo largo del curso es ir mostrando primero cmo definir cada objeto web de la aplicacin, e inmediatamente despus de terminar de definirlo, Uds. debern hacer lo mismo, siguiendo los pasos indicados. Comencemos por crear el web panel de "Venta de pelculas" (SaleMovie). Lo primero que haremos es definir en el Web form la interfase para permitir el ingreso de usuario y password. Haga clic aqu para ver la demostracin

Qu es un Tema?

A partir de GeneXus 8.0 se cuenta con un nuevo objeto para el diseo de aplicaciones web, los Temas; y una herramienta para el mantenimiento del nuevo objeto, que es el Editor de Temas. Un Tema es un objeto GeneXus, mediante el cual se pueden definir clases para los diferentes controles Web GeneXus, y asignar propiedades a dichas clases.

Una vez asociado un Tema a un objeto (propiedad Theme), los controles de ese objeto podrn ser asociados a alguna clase del Tema correspondiente.

Cuando un control es asociado a una clase ste pasa a heredar la configuracin de las propiedades dada en la clase.

El siguiente documento, describe las caractersticas esenciales del Editor de Temas: Generalidades del Editor de Temas.

Los objetos a los que se les puede asignar un Tema son Web Panels y Web Transactions.

Los Temas se asocian a un objeto GeneXus de la siguiente forma:

Al objeto directamente, mediante Object Properties -> Theme. Propiedad Theme. Al modelo, configurando la propiedad Theme (File -> Edit Model -> Properties). A la base de conocimiento (File -> Edit Model -> Properties -> Theme, en diseo)

El valor default de la property Theme del modelo es el valor de la misma property de la KB, y el valor default de la property Theme de un objeto es el valor de la property Theme del modelo.

Observe en la KB que usted ha creado para realizar los ejercicios prcticos, existe un Tema de nombre Default. Este Tema se crea automticamente siempre que se crea una nueva base de conocimiento.

La propiedad Theme del modelo, est asociada por defecto al Tema Default, por lo cual, por defecto los objetos de la KB estn asociados al mismo Tema. Observe lo dicho anteriormente, en el web panel creado.

La forma de asociar una Clase de un Tema a un control, es a travs de la propiedad Class. La propiedad Class es una propiedad del control, y es posible tambin cambiarla en runtime.

Vamos a modificar el Tema Default, de forma de ejemplificar como se trabaja con los Temas.

Haremos las siguientes modificaciones:

Darle un valor a la propiedad BackColor y ForeColor de la clase Attribute. A la clase Button, le asignaremos un BackColor y un Height.

En la siguiente demostracin veremos los pasos seguidos para modificar el Tema Default y el efecto de esos cambios sobre el web panel que hemos creado en este captulo.

Es posible tambin definir la configuracin de los HTML Tags involucrados en el HTML de la Web page. En el curso, a medida que se vayan realizando los ejercicios prcticos, se explicarn

ms detalles del objeto Tema y su funcionalidad, incluyendo casos de uso de los HTML Tags, y

HTML

las ventajas que presenta a la hora de realizar el diseo esttico del sitio web.Form

Al form de los objetos web se le pueden asignar propiedades haciendo clic y seleccionando la opcin Properties del men.

Esta asignacin de propiedades, puede hacerse en un objeto tema o directamente en el control.

En el caso de asignar propiedades en el control solamente aplicar al mismo y puede hacerse en tiempo de diseo y algunas de ellas pueden modificarse en tiempo de ejecucin (programando los eventos del objeto).

Propiedades del form HTML en diseo

Las propiedades para el form son las siguientes:

1. Class: La propiedad Class solo se encuentra disponible si el form pertenece a un objeto que tiene un Tema asociado. 2. BackColor 3. TextColor 4. Background 5. Background Properties 6. TooltipText 7. Word Wrap Propiedades para el color de los Links: 8. Active Link Color 9. Visited Link Color 10. Not Visited Link Color Propiedades para los mrgenes 11. 12. 13. 14. Top Margin Bottom Margin Left Margin Right Margin

Propiedades del form HTML en tiempo de ejecucin

En ejecucin se pueden modificar las siguientes propiedades del Form:

1. BackColor 2. Background 3. Caption: El caption del form se transforma en el ttulo de la ventana. Por defecto, tiene el nombre del web panel. Esta propiedad solamente puede modificarse en tiempo de ejecucin.

Propiedades del Form en los Temas

Es posible configurar en la Clase Form (o derivadas de ella) en el objeto tema, varias de las propiedades de los forms disponibles en GeneXus y otras que no estn en GeneXus.

En el caso de que una propiedad est asignada en el control (en diseo o en ejecucin) ese valor tiene precedencia respecto al asignado en el tema. Ver orden de precedencia de las propiedades

Por detalles de propiedades del Form en los Temas, referirse a Clase Form

Atributos y Variables
Al seleccionar un control y presionar el botn derecho del mouse aparecen las propiedades para ser editadas.

Para modificar las propiedades de estos controles en ejecucin (es decir en algn evento del objeto), es necesario programarlo (ejemplo: &pwd.IsPassword = 1) Recuerde que muchas de estas propiedades pueden asignarse en el objeto Tema en la clase Attribute.

Si en el dilogo de seleccin de atributos o en el dilogo de seleccin de variables se seleccionan varios a la vez, stos se insertan en el formulario dentro de una tabla, simplificando as la tarea de alineacin.

Propiedades del control Edit en diseo

Las variables y atributos son controles de tipo Edit, que tienen las siguientes propiedades:

1. Attribute 2. Class La propiedad Class solo se encuentra disponible en las propiedades del control si el objeto tiene un tema asociado. 3. Control Type: Las propiedades que se aplican sobre atributos y variables , dependen del tipo de control que se seleccione. (Ver propiedades segn el tipo de control). Dentro del grupo Appearance se encuentran todas las propiedades que aplican al aspecto del control. Se detallan a continuacin:
4. Read Only 5. Auto Resize: Esta propiedad aplica a controles edit que NO tengan la propiedad Read-Only con el valor True, ya que en este caso se ignora el ancho especificado. 6. Fill 7. BackColor 8. ForeColor 9. Font 10. Format 11. ReturnOnClick 12. OnClickEvent

Propiedades del Control Edit en Tiempo de Ejecucin

Adems de las propiedades vistas anteriormente, existen otras que permiten modificar en tiempo de ejecucin los controles de tipo edit. Las propiedades son:

1. Backcolor 2. BackStyle 3. Enabled 4. FontBold 5. FontItalic 6. FontName 7. FontSize 8. FontStrikethru 9. FontUnderline 10. ForeColor 11. Format 12. InternalName 13. IsPassword 14. Link 15. LinkTarget 16. Visible 17. Class

PROPIEDADES SEGN EL TIPO DE CONTROL

Hay otras propiedades, especficas segn el tipo de control que se utilice.

COMBO BOX
Las propiedades a nivel de diseo que aplican son: 1. 2. 3. 4. 5. 6. Attribute BackColor ForeColor Fill Font Read Only

Las propiedades a nivel de ejecucin son: 1. Backcolor 2. BackStyle 3. Enabled 4. FontBold 5. FontItalic 6. FontName 7. FontSize 8. FontStrikethru 9. FontUnderline 10. ForeColor 11. InternalName 12. Visible NOTA : Alineacin de un combo/dyncombo en grillas. Siempre se alinea a la izquierda independientemente del tipo de datos. Esto se hace as porque aun cuando el combo sea sobre un atributo numrico los valores que se muestran en el combo son de tipo carcter.

RADIO BUTTON, CHECK BOX

Las propiedades a nivel de diseo que aplican son: 1. 2. 3. 4. 5. Attribute BackColor ForeColor Fill Font

Los radio button tienen tambin la propiedad Radio Direction que permite indicar si las opciones del radio se desplegarn en forma vertical u horizontal. Las propiedades a nivel de ejecucin son: 1. Backcolor 2. BackStyle 3. Enabled 4. FontBold 5. FontItalic 6. FontName 7. FontSize 8. FontStrikethru 9. FontUnderline 10. ForeColor 11. InternalName 12. Visible

Propiedades de atributos/variables en el Tema

Las propiedades se pueden configurar tambin en el Tema. La clase predefinida Attribute del Editor de Temas rene las propiedades para todos los controles en los cuales se puedan representar atributos/variables en el form, a saber: Edit Combo Box List Box Radio Button Obviamente se pueden derivar clases de la clase predefinida Attribute, por mas informacin referirse a Clase Attribute

Propiedades de variables de tipo bitmap en diseo

Las propiedades que se detallan a continuacin aplican nicamente a variables de tipo bitmap.

1. 2. 3. 4. 5. 6. 7. 8. 9.

Class Autoresize Borderwidth Alternate Text Tooltiptext HSpace VSpace ReturnOnClick OnClickEvent

Propiedades variables bitmap en tiempo de ejecucin

A las variables de tipo bitmap se le pueden modificar las siguientes propiedades en tiempo de ejecucin: 1. Alternate Text 2. Borderwidth 3. Class 4. Enabled 5. HSpace 6. InternalName 7. Link 8. LinkTarget 9. TooltipText 10. Visible 11. VSpace NOTA:La propiedad Enabled de Runtime permite habilitar (Enabled=1)/deshabilitar (Enabled=0) la ejecucin del evento asociado a la variable bitmap.

Propiedades de variables bitmap en el Tema Las propiedades de las variables bitmap (y controles imagen), se pueden configurar en los Temas. Referirse a Clase Image

METODOS DE LOS CONTROLES EDIT

Los mtodos que aplican a los controles edit de tipo combo box, dynamic combo box, listbox y radio button son: AddItem Clear

Picture de los tipos de datos dates y datetimes

Se formatea lo digitado por el usuario en campos de tipo Date y Datetime. Esto permite, por ejemplo, que el usuario final digite una fecha u hora sin los separadores ('/', ':', Etc.) y se mejore la "visualizacin".

El formateo ocurre cuando el usuario "sale" del campo y controla nicamente que el formato sea correcto. No se controla que la fecha y/o hora sea vlida: esto lo hacen los programas.

En caso que el formato no sea correcto, se emite un mensaje de error (una ventana con el mensaje 'Date or time format is not correct') y se vuelve el foco al campo incorrecto.

Botones
Para insertar un botn en el formulario se puede seleccionar el disponibles. de la barra de controles

En los objetos web se pueden usar varios botones y asociarles eventos (predefinidos de GeneXus o definidos por el usuario). Al presionar el botn derecho del mouse se visualiza el siguiente dilogo que habilita al usuario a editar las propiedades del mismo o a editar el evento que el botn tiene asociado.

Propiedades de botones
Las propiedades de los controles de tipo Button que pueden modificarse en diseo son:

1. 2. 3. 4. 5. 6. 7. 8. 9.

ControlName Class OnClickEvent Caption Font ForeColor BackColor BorderWidth BorderColor

En ejecucin se pueden modificar todas estas propiedades (excepto la control name) del boton y adems las siguientes: 1. Enabled 2. Internal Name

PROPIEDADES DE BOTONES EN TEMAS

Adems de estas propiedades, en la clase Button de un tema se pueden setear otras propiedades que permiten definir otras caractersticas a los botones. Ver Clase Button

Tamao de botones
El tamao del botn queda determinado por el texto ingresado en la propiedad Caption del mismo.

Si se desea que los botones tengan un tamao fijo, se deben asociar mediante la propiedad Class a una clase de un tema que tenga un tamao definido (propiedades Heigth y Width). En este caso, el tamao quedar fijo independientemente del caption.

Cmo asignar un evento a un botn

Para asignar un evento a un botn se puede ingresar directamente el nombre . Al utilizar este del evento (entre comillas simples) o hacer clic al botn selector de eventos se visualiza el siguiente dilogo, con los eventos disponibles, habilitando al usuario la creacin un nuevo evento (mediante el botn New).

COMO EVITAR VISUALIZAR EL INGRESO DE UNA PASSWORD

Una cosa que vamos a querer cuando un cliente digita su password, es que no se visualice lo que escribe, es decir, que aparezcan asteriscos mientras la ingresa.

Para hacer esto, utilizamos la propiedad IsPassword asociada a las variables. Si programamos Variable.IsPassword = 0 se puede visualizar lo que el usuario digita sobre la variable Si por el contrario, programamos Variable.IsPassword = 1, al ejecutar aparecen asteriscos (*******) mientras el usuario digita sobre la variable. Haremos los cambios correspondientes en el objeto SaleMovie. Observe que como el objeto ser utilizado como punto de entrada a nuestra aplicacin, lo definiremos como un objeto de tipo main. Haga clic aqu para ver la demostracin

IMAGENES
En el desarrollo de aplicaciones web al igual que cualquier tipo de aplicaciones, se distinguien dos ambientes o fases muy diferentes: el de diseo y el de ejecucin. Por ambiente de diseo, nos referimos al ambiente utilizado por los usuarios GeneXus que desarrollan la aplicacin web; por ambiente de ejecucin entendemos a la ejecucin propiamente dicha de los objetos web (normalmente realizada por los usuarios finales).

Identificar estos dos ambientes es muy importante al trabajar con imgenes ya que determinar que las mismas sean ubicadas correctamente y no ocurran errores del estilo File not found.

En el ambiente de diseo (mientras se trabaja con GeneXus editando los objetos web) las imgenes se buscan en el camino indicado en cada imagen (Ej.: c:\modelo\imagenes\img.gif), pero en ejecucin es necesario referenciar el camino virtual donde se encuentran las mismas, que normalmente es 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.

Para solucionar esto, se dispone de una preferencia a nivel de diseo denominada Base image path .

Preferencia Base image path

En esta preferencia del modelo de diseo, se debe ingresar el camino absoluto que se va a utilizar para referenciar las imgenes en tiempo de diseo, es decir mientras se desarrollan los objetos web. En el caso en que se tenga acceso al servidor Web que se usar para produccin final, este camino puede referenciarse como una URL o tambin como un path absoluto (respecto al servidor de archivos). Esta forma de trabajo, permite que las imgenes esten en un nico directorio y pueden ser accedidas tanto en tiempo de desarrollo como en produccin. Cuando no se tiene acceso al servidor Web que se usar para produccin (que es el caso mas comn), se debern tener las imgenes duplicadas para poder accederlas en desarrollo y posteriormente en produccin. En este caso, en la preferencia se deber referenciar el path absoluto al directorio que las contenga en tiempo de diseo. Por ejemplo, si el directorio raz del servidor Web es c:\inetpub\wwwroot y para las imgenes de la aplicacin existe el subdirectorio images esta preferencia podr contener el valor c:\inetpub\wwwroot o la url http://myserver.com. (siempre que en tiempo de desarrollo se tenga conexin al servidor Web). En cada una de las imgenes se pondr el camino /images seguido del nombre del archivo. Si se coloca el camino images (sin el carcter barra) intentar ubicar el directorio en forma relativa al directorio de la aplicacin y no respecto a la raz del servidor web. Continuando con el ejemplo, si tenemos: En c:\inetpub\wwwroot la raz del servidor web En c:\myapp\extranet el directorio de la aplicacin web Si las imgenes se indican como /images/image.jpg significa que existe el directorio c:\inetpub\wwwroot\images, por lo tanto en la preferencia se deber indicar el valor c:\inetpub\wwwroot. Si las imgenes se indican como images/image.jpg significa que existe el directorio c:\myapp\extranet\images, por lo tatno en la preferencia se deber indicar el valor c:\myapp\extranet\images.

Luego en el objeto web, para insertar una imagen se debe seleccionar el botn de la barra de controles disponibles, y en el dilogo para ingresar el origen de la imagen se debe seleccionar la misma.
Observaciones: Si la imagen seleccionada est bajo el path ingresado en la preferencia de diseo, en la propiedad Source queda el nombre de la imagen (ej: /imagenes/img.gif). Dado que delante del nombre de la imagen queda /, en ejecucin el servidor web va a buscar la imagen bajo el directorio raz del mismo. Si se desea ubicar la imagen bajo el mismo directorio donde est el resto de los objetos web, se debe eliminar el / de la propiedad Source.

Si se prefiere que las imgenes de la aplicacin se ubiquen en forma relativa al directorio de los web panels, en las imgenes se deber referenciar el directorio imagenes\imagen.gif es decir sin la barra al principio.

Una vez agregada una imagen al objeto web, se puede editar la propiedad Source de la misma e ingresar cualquier path. Si la imagen seleccionada no est bajo el path ingresado en la preferencia Base image path de diseo, la propiedad Source queda con el path absoluto, por lo que la misma no va a ser desplegada al ejecutar el objeto.

Como asignar un evento a una imagen

Existen dos formas de asignar un evento a una imagen: en diseo o en ejecucin.

Asignacin de evento en diseo

Para asignar el evento en diseo se puede utilizar la propiedad OnClickevent. Esta propiedad permite asociar un evento de los objetos Web a una imagen. Tiene el mismo funcionamiento que la propiedad de igual nombre para los botones. En particular, permite asociar un evento estndar de GeneXus (como First, Next, Previous, Last, Enter, etc.) a una imagen. Esta propiedad OnClickEvent es usada principalmente en las Transacciones Web para poder asociar imgenes a los eventos estndar: Previous, Next, etc. En Web Panels, sirve para asociar el evento Enter a las imgenes.

Asignacin de evento en ejecucin

Otra forma de asignar un evento a una imagen, es agregar el evento click de la misma con el cdigo deseado. De la misma forma, es posible asociar a una variable de tipo bitmap un evento .

Si la imagen tiene asociado un link, pierde el mismo al quedar asociada a un evento.

Como se mencion anteriormente, para asociar eventos de usuario a una imagen puede usarse la propiedad Onclickevent o el evento Click. Si una imagen tiene evento Click y, a su vez, un valor en la propiedad Onclickevent, prevalece este ltimo (se ignora el evento Click).

Con formato: Numeracin y vietas

TRABAJAR CON IMAGENES

Volvamos a nuestro web panel de "Ingreso al sitio de ventas" (SaleMovie) y agregumosle dos imgenes, que formarn parte del diseo de nuestro sitio web. Todas las imgenes necesarias para el diseo del sitio se encuentran en el archivo images.zip. Para poder usarlas hay que descomprimirlas y almacenarlas en algn directorio del disco duro. En nuestro ejemplo, descomprimimos las imgenes en el directorio images bajo el directorio de la KB (c:\InternetApp), y las copiamos tambin al directorio images bajo el directorio raz de nuestro servidor web.

Primero, tenemos que ir al modelo de diseo y setear la preferencia "Base Image Path" para indicar dnde estn ubicadas de forma tal de poder verlas mientras diseamos. Como discutimos anteriormente (ver Imgenes), existen diferentes alternativas para completar esta opcin, y en consecuencia tambin el lugar donde deben estar al momento de ejecutar el objeto en el web.

Para insertar una imagen tenemos que posicionarnos en el lugar que queremos insertarla, y seleccionar la opcin Insert/Image o el item Image de la toolbar de Controls y escribir solamente el nombre de la imagen a insertar donde dice "Picture Source" (es decir, que cuando ingresamos las imgenes hacemos el seteo de la propiedad "Source" de la misma). Haga clic aqu para ver la demostracin

Propiedades de las imgenes

A continuacin se detallan las propiedades disponibles para las imgenes en tiempo de diseo.

1. ControlName 2. Class La propiedad Class solo se encuentra disponible si el control est en el form de un objeto que tiene un Tema asociado. 3. Source 4. LowResSource 5. OnClickEvent 6. Height 7. Width 8. Borderwidth 9. AlternateText 10. TooltipText 11. HorizontalSpace 12. VerticalSpace 13. Align 14. UseMap 15. ReturnOnClick

Propiedades De Las Imgenes En Tiempo De Ejecucin

Las propiedades de las imgenes que pueden modificarse en tiempo de ejecucin son: 1. BorderWidth 2. TooltipText 3. AlternateText 4. InternalName 5. Bitmap

6. Enabled: La propiedad Enabled de Runtime permite habilitar (Enabled=1)/deshabilitar (Enabled=0) la ejecucin del evento asociado a la variable bitmap. 7. Link: Si se programa el evento Click de una imagen se ignora la propiedad Link. 8. LinkTarget 9. Visible 10. Class PROPIEDADES DE IMGENES EN LOS TEMAS
Adems de estas propiedades, en la clase Image (o derivadas de ella) de un Tema, se pueden setear otras propiedades que permiten definir otras caractersticas a las imgenes. Ver Clase Image

LINK
Los links son una caracterstica nica del WWW que nos permite saltar o navegar entre pginas web. Cuando queremos poner un link, tenemos que especificar la URL de la pgina web a la cual queremos acceder.

Las urls pueden ser absolutas o relativas. Una url absoluta es una direccin completa que incluye el camino completo al archivo.
Cuando se referencia un archivo (pgina) de alguien ms, normalmente se va a usar una url absoluta (por ej: www.yahoo.com)

Una urls relativa es una direccin relativa al archivo que la contiene. Si solamente se referencia el nombre del archivo, se asume que estar en el mismo directorio que la pgina que contiene el link.
En las urls relativas no debe indicarse el protocolo (http, ftp, etc.). Es suficiente con el nombre del archivo.

El link puede estar asociado a una imgen o a un texto, de forma que cuando el usuario hace clic sobre el mismo, se llama a otra pgina esttica, pgina dinmica o archivo multimedia.

Dentro de GENEXUS, el link puede ser utilizado como funcin o como comando. A continuacin se definen ambos casos de uso.

Funcin LINK
La funcin LINK permite enlazar un objeto web con otro objeto web o con una URL. Esta funcin se puede asociar a la propiedad link de un control dentro de cualquier evento del

objeto web, teniendo como resultado que al hacer click sobre dicho control se realiza la llamada al objeto web o URL referenciado en el link.

La sintaxis de la funcin link es: link(Objeto/URL/Att:Atributo/&var, [par1], [par2],..., [parn])

el primer parmetro contiene el objeto web, o la URL a llamar y [par1]...[parn] son el conjunto de parmetros a pasar a los mismos. El primer parmetro, tambien puede ser un atributo o una variable con la url o el objeto a invocar.

NOTAS: 1. Solamente se puede asociar la funcin link a controles que sean Read Only. 2. El objeto debe ser seleccionado utilizando la opcin Insert/Object o Ctrl+B. Ej: &var.link = link(hLogin). Se considera como una url relativa.

3. Si se desea llamar a una URL, la URL debe ser ingresada entre (comillas simples/dobles). Se considera como una url absoluta. Ej.: &var.link = link(http://www.artech.com.uy).

4. Si se desea hacer un link, utilizando un atributo que contiene la url o el nombre del objeto web correspondiente, se debe utilizar la siguiente sintaxis: &var.link = link(att:AplLnk), siendo AplLnk un atributo de alguna tabla.

5. Tambin se puede definir un link utilizando una variable que contiene la url o el nombre del objeto web correspondiente con la siguiente sintaxis: &var.link = link(&varurl), siendo &varurl la variable que contiene la URL.

6. El pasaje de parmetros es opcional.

OBSERVACIONES
En el caso de utilizar un atributo o una variable dentro de la funcin link, el armado de la URL depende del contenido del atributo o la variable: Si la variable contiene http, el link se corresponde con el contenido de la misma. Ej: &var/att=http://www.artech.com.uy, al posicionarse sobre el link, se visualiza en la parte inferior del browser: http://www.artech.com.uy. Si se encuentra un /, simplemente concatena el nombre del servidor (ej: http://servidor/...) al comienzo del contenido del atributo o la variable. Ej: &var/att=/index.html, al posicionarse sobre el link, se visualiza en la parte inferior del browser: http://servidor/index.html Si no es ninguno de los casos mencionados anteriormente, se concatena la URL actual, al comienzo del contenido del atributo o la variable. Ej: &var/att=index.html, al posicionarse sobre el link, se visualiza en la parte inferior del browser: http://servidor/diractual/index.html En caso de almacenar el nombre de un objeto GeneXus hay que destacar que no se agrega ninguna extensin. Por lo cual esta administracin queda por parte del desarrollador. Ej: &var/att=&PgmName, al posicionarse sobre el link, se visualiza en la parte inferior del browser: http://servidor/diractual/obj, por lo tanto al hacer clic sobre el link, el usuario va a recibir un mensaje que le indica que no se pudo resolver la url.

Mailto
Una caracterstica interesante del link es que se puede definir de forma tal que al hacer clic sobre el mismo se abre una ventana para el envo de mail. Para poder hacerlo, simplemente se debe concatenar una direccin de e-mail a la palabra mailto como se describe a continuacin:

&mail = mailto:+trim(AttMail/&varmail) &var.link = link(&mail)

siendo &mail una variable de tipo caracter y AttMail o &varmail el atributo o variable que contienen la direccin e-mail.

Comando LINK
Ver Comandos/LINK.

CALL
Ver Comandos/CALL.

Como navegar entre objetos web

Para relacionar objetos web 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 objeto web se puede hacer CALL a: Objetos web Procedimientos

La funcin y el comando LINK puede hacer referencia a: 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 objeto web. 3. La nica forma de llamar a un procedimiento es con un call. Objetos web Pginas HTML estticas

PRIMERA EJECUCION DEL WEB PANEL

Una vez creada la base de datos, luego de especificar y generar todos los programas ejecutemos nuestro primer web panel (habindolo compilado previamente). La pantalla de nuestro primer web panel en ejecucin sera la siguiente:

Si observamos bien el web panel, las variables de ingreso de datos no estn alineadas. Para alinear controles (por ejemplo: que todas las variables donde el usuario va a ingresar los datos queden alineadas a la izquierda), se deben usar las TABLAS. En el prximo punto veremos cmo alinear los controles del web panel "Sale of Movies" insertndolos dentro de una tabla.

TABLAS
Cuando se trabaja con objetos web, es necesario utilizar tablas para poder alinear los controles dentro del formulario para mejorar el diseo de los mismos.

Agregar tabla
Para insertar una tabla se debe utilizar el botn de la barra de controles. Una tabla est compuesta por filas y celdas, dentro de las que se encuentran los controles.

Propiedades de las tablas

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.

Para editar las propiedades de una tabla se debe marcar la tabla (el puntero del mouse cambiar al posicionarse en los bordes de la misma y en la barra de status se indicar el nombre del control seleccionado) y presionar el botn derecho del mouse. Seleccionar la opcin Properties del men pop-up que se despliega.

Otra forma de editarlas es presionando el botn derecho del mouse estando posicionado en cualquier celda de la tabla, y despus ir a la seccin de Table. En este caso, se podrn editar adems de las propiedades de la tabla, las de la fila a la que pertenezca la celda y las propias de la celda.

1. ControlName 2. Class La propiedad Class solo se encuentra disponible si el control est en el form de un objeto que tiene un Tema asociado. 3. Tooltiptext 4. Align 5. Background 6. Backcolor
7. BorderWidth: 0 indica que no tendr borde en ejecucin, pero podr verse en diseo usando el botn valor por defecto es 1. de la barra de herramientas. El

8. BorderColor

9. 10. 11. 12. 13.

Cellpadding Cellspacing Height Width Rules

Propiedades de las filas de una tabla

Como se puede observar en el dilogo de propiedades seccin ROW-, se pueden asignar valores a propiedades para una fila particular dentro de las tablas. Estos valores tendrn preferencia a los asignados para la tabla en general. Las propiedades de las filas, son algunas de las propiedades de las tablas, ms una propiedad adicional: Vertical Align.

1. 2. 3. 4. 5. 6.

Identifier TooltipText Align Vertical Align Backcolor BorderColor

Propiedades de las celdas de una tabla

Las propiedades de una celda de una tabla son las que se muestran a continuacin:

1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11.

Identifier Tooltiptext Align VerticalAlign Background Backcolor Bordercolor Height Width Colspan Rowspan

PROPIEDADES DE TABLAS EN LOS TEMAS Adems de estas propiedades, en la clase Table (o derivadas de ella) de un Tema, se pueden configurar otras propiedades que permiten definir otras caractersticas a las tablas. Ver Clase Table

PROPIEDADES DE LAS TABLAS - APLICACION PRACTICA

Comencemos por insertar en una tabla (de 3 filas x 2 columnas) el texto y la variable correspondiente al Usuario, el texto y la variable correspondiente a la Password y el botn Login, ya que como podemos observar en la imagen del web panel Sale of Movies en ejecucin, dichos controles no estn perfectamente alineados entre s.

Haga clic aqu para ver demostracin

Dado que ya vimos todas las propiedades de las tablas, celdas, filas y form, vamos a utilizar alguna de ellas en este web panel. Vamos entonces a tener que crearnos una tabla de 2 x 2 donde vamos a tener que incluir dentro los controles que ya tenemos en el formulario y hacer los siguientes seteos en las propiedades Colspan y Width:

Haga clic aqu para ver la demostracin

Text Block
Los controles Text Block pueden ser vistos como texto insertado directamente en el form, con la ventaja que en forma dinmica (en ejecucin) se puede modificar el mismo. Para insertar un Text Block, se puede presionar el botn de la barra de controles disponibles.

Edicin de control Text Block

En la barra de herramientas para el form HTML se incluye un botn que facilita el trabajo con controles de tipo Text Block. Al presionar el botn mencionado, se visualizan los TAGs que lo definen permitiendo detectar cualquier problema en diseo.

Propiedades Text Block en diseo

Las propiedades de este tipo de control son:

1. ControlName 2. Class: La propiedad Class solo se encuentra disponible si el control est en el form de un objeto que tiene un Tema asociado. 3. Format: El valor por defecto para TextBlocks es Text (se puede cambiar a travs de la propiedad Default HTML Format(Textblocks only) del modelo de diseo). 4. OnClickEvent 5. ReturnOnClick Adems el textblock se puede configurar usando la barra de formateo de texto de GeneXus (seleccionando el textblock).

Propiedades Text Block en ejecucin

Adems de las propiedades detalladas anteriormente, se pueden modificar las siguientes propiedades de los Text Blocks en tiempo de ejecucin:

1. 2. 3. 4. 5. 6.

Visible Caption Link LinkTarget Format Class

PROPIEDADES DEL CONTROL TEXTBLOCK EN LOS TEMAS

Adems de estas propiedades mencionadas, en la clase Textblock (o alguna clase derivada de ella) de un Tema, se pueden configurar otras propiedades para los

Textblocks. Ver Clase Textblock.

Error Viewer
El control Error Viewer es utilizado para desplegar mensajes al usuario, utilizando la funcin msg(). Para insertarlo ir por el men de GeneXus: Insert -> Error Viewer

Si no se inserta explcitamente en un lugar determinado del form, y se usa en el cdigo del web object la funcin Msg(), de todas formas aparece el mensaje (en la esquina superior izquierda del form).

Propiedades del Error Viewer en diseo

Las propiedades del control Error Viewer en diseo son:

1. ControlName 2. Class La propiedad Class solo se encuentra disponible si el control est en el form de un objeto que tiene un Tema asociado. 3. Display Mode 4. ForeColor 5. Font 6. Fill 7. BackColor

Propiedades del Error Viewer en ejecucin

Adems de las propiedades detalladas anteriormente, se pueden modificar las siguientes propiedades en tiempo de ejecucin: 1. 2. 3. 4. BackColor DisplayMode ForeColor Class

PROPIEDADES DEL CONTROL ERROR VIEWER EN LOS TEMAS

Adems de las propiedades mencionadas, en la clase Error Viewer de un Tema (o alguna clase derivada de ella), se pueden setear otras propiedades para el control. Ver Clase ErrorViewer

COMO DARLE UN MENSAJE AL USUARIO

En este momento ya tenemos implementada nuestra pantalla donde el cliente va a ingresar su usuario y password. Tenemos que verificar en el evento Login si existe en nuestra tabla de clientes un cliente con dicho usuario. Si existe, verificar que la password ingresada sea correcta y en caso de no existir darle un mensaje al cliente informndole que se debe registrar como nuevo usuario. Esto normalmente en un work panel lo haramos utilizando la funcin msg(), y se abrira una nueva ventana con el mensaje. En los objetos web, si utilizamos la funcin msg(), el mensaje se despliega usando el control Error Viewer. Si el control error viewer no se coloca en una posicin determinada del form, y se usa la funcin msg(), el mensaje aparece en la esquina superior izquierda de la pantalla, de lo contrario, aparece donde se coloc el control. Esto significa que los objetos web tienen un control ErrorViewer implcito que es donde se despliega el mensaje al usar la funcin msg(). Otra forma de darle un mensaje al usuario en los objetos web, es utilizando un control de tipo Text Block y modificando su caption en tiempo de ejecucin. No servira incluir en la pantalla un control de tipo Texto ya que la diferencia entre los controles de tipo Text Block con los Texto es que a los Text Block se les pueden modificar las propiedades en tiempo de ejecucin (como por ejemplo la propiedad caption), mientras que a los controles de tipo Texto se le pueden cambiar las propiedades solamente mientras estamos diseando.

Volvamos entonces a nuestro ejemplo para hacer el control del usuario y password en el evento Login y agregar un Text Block en la pantalla para desplegarle al cliente el mensaje que corresponda.
Haga clic aqu para ver la demostracin

COMO ASOCIARLE UN LINK ESTATICO A UN TEXTO

Veamos ahora entonces cmo haramos para permitir que el cliente se pueda registrar por primera vez. Una forma es agregar en el web panel que estamos diseando un botn en cuyo evento se programa un CALL a otro objeto, donde el cliente va a poder ingresar todos sus datos por primera vez (nombre, direccin de mail, usuario, password, etc.).

Otra forma, es incluir en lugar de un botn, un LINK al objeto web de ingreso de usuarios (el cual no hemos creado an). Es decir, insertar en el formulario un Texto y asociarle al mismo un Link Esttico (con la opcin Insert/Hyperlink o Ctrl K teniendo el texto marcado) que nos permita acceder al objeto web de ingreso de datos del usuario. Esto lo podemos hacer con un Texto ya que la propiedad que le queremos asociar al mismo es "esttica", es decir, queremos que el link haga siempre referencia al mismo objeto web. Es por esto, que podemos hacerlo con un control de tipo Texto y no es necesario un Text Block.
Vamos a realizarlo con el LINK ESTATICO ya que con el botn es conocido por todos cmo hacerlo. Tengamos en cuenta que cuando hagamos Insert/Hyperlink nos va aparecer la siguiente imagen, donde tenemos que especificar la URL donde se encuentra el objeto web que queremos invocar.

Dado que el objeto web que queremos invocar todava no lo creamos, es que vamos a tener que definir ya el nombre que le vamos a poner, en nuestro ejemplo va a ser una transaccin con form HTML que se denominar Customer. Si definimos el link en forma absoluta, tambin vamos a tener que saber desde ya el nombre del servidor web en el que van a estar todos los objetos web de la aplicacin. En nuestro caso, el nombre del servidor web va a ser localhost, y los objetos web los vamos a tener bajo el directorio web del modelo. Es decir, que la URL que tenemos que poner debe ser http://localhost/services/TCustomer.aspx (services es el alias del directorio virtual donde se encuentran los ejecutables) Tambin podemos ingresar el link en forma relativa, simplemente marcando en la opcin Type el valor (other) e ingresando el path relativo. Es importante destacar que al definir un link esttico, es necesario incluir la extensin del objeto web. Por lo tanto, si el mismo objeto fuese generado en otro lenguaje, va a ser necesario editar el mismo y modificar el link.

Haga clic aqu para ver la demostracin Esta no es la nica alternativa disponible para agregar el link a un objeto web, existen otras posibilidades que son mas dinmicas que vamos a ver ms adelante, y que son mas adecuadas en este caso para mantener la portabilidad de la aplicacin. Los links estticos normalmente se utilizan para referenciar a pginas externas o que utilizan otros protocolos.

INTRODUCCION AL CAPITULO 3
A lo largo de este captulo profundizaremos sobre el funcionamiento de los web panels. Para una mejor comprensin del desarrollo de aplicaciones para Internet, estaremos comparando los web panels con los work panels. Esta comparacin nos permitir destacar las diferencias que existen al desarrollar aplicaciones para este ambiente. Por supuesto seguiremos avanzando sobre nuestra aplicacin Sitio de ventas de

pelculas.

CREACION DEL SEGUNDO WEB PANEL

Lo que vamos a hacer a continuacin es crear un web panel CustProfile, donde vamos a colocar los datos del cliente (nombre, mail, usuario). La siguiente demostracin corresponde a la creacin del web panel CustProfile. Vamos a agregar la regla parm(CustId); de forma de que el web panel se comporte como un work panel. Es decir que nos va a permitir desplegar los datos del usuario. Haga clic aqu para ver la demostracin En conclusin, recordemos que los web panels se comportan como work panels, en el sentido de que si se colocan atributos en el form, la informacin desplegada no puede ser modificada y si colocamos variables se puede ingresar informacin. Para dar de alta en la base de datos, es necesario utilizar procedimientos (para cambios batch) o invocar a transacciones web (en caso de querer actualizar la base de datos en forma interactiva con el usuario).

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 dispare 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. Es por esta razn que es importante destacar el orden en que se disparan los eventos y el momento en que las variables adquieren el valor ingresado por el usuario.

Orden de ejecucin de los eventos

El orden de ejecucin de los eventos en web panels se diferencia si es la primer llamada al mismo o si se dispar algn evento de usuario.

PRIMERA EJECUCIN DE LOS WEB PANELS La primera vez que se ejecuta el web panel (se conoce tambin como el momento en que se hace el GET de la pgina) los eventos que se disparan son los siguientes y en el siguiente orden: 1. Start 2. Refresh 3. Load Luego de esto, cuando el usuario presione un botn (ya sea asociado al evento ENTER o a un evento de usuario) que no llame a ningn otro web panel, se ejecutar nuevamente ste y el orden de disparo de los eventos ser diferente.

RESTO DE LAS EJECUCIONES DE LOS WEB PANELS En el resto de las ejecuciones, momento que se conoce tambin como el POST de la pgina, los eventos se dispararn en el siguiente orden:

1. Start (nuevamente se dispara el evento Start) 2. Nueva lectura de las variables de la pantalla. Esto se realiza porque el usuario puede haberlas modificado (por ejemplo las variables de la parte fija del web panel que estn involucradas en las conditions) 3. Cdigo correspondiente al evento asociado al botn seleccionado. 4. Refresh 5. Load 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.

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 clic 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 est en el form, la variable no tendr valor cuando se disparan los otros eventos (esto es por el orden en que ocurren los eventos). 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 grid entonces la variable tiene que estar en pantalla despus del grid.

Nota: En HTML se puede especificar dos mtodos distintos de someter el form. El mtodo se especifica dentro del elemento HTML FORM, usando el atributo METHOD, por ejemplo:

<form id="MAINFORM" name="MAINFORM" method="POST" ACTION="hwfmain.aspx">

Las especificaciones HTML definen tcnicamente la diferencia entre GET y POST de la siguiente forma: En el GET los datos del form son codificados por el browser en la URL misma. En el POST, los datos del form van en el cuerpo del mensaje.

Entonces, cuando es METHOD="GET" los datos del form se codifican en una URL (o mas genricamente en una URI), lo cual significa que esa forma de someter el form es equivalente a seguir un link a la URL codificada. En general, el GET es para recuperar datos mientras que el POST sera para grabar, actualizar datos, ordenar un producto, etc.

En GeneXus todos los eventos se resuelven con un POST y se ejecutan en el servidor web.

EJEMPLO ESQUEMA DE TRABAJO EN INTERNET

Aunque decimos que los web panels son similares a los work panels, hay una diferencia fundamental entre ellos relacionada con el hecho que el objeto web una vez que finaliza la ejecucin, no queda en memoria. Como consecuencia, la forma

en que programamos este tipo de aplicaciones presenta algunas diferencias con respecto a lo acostumbrado en ambientes no web. Es por esta razn que es importante tener claro el orden de ejecucin de los eventos.

Ejemplifiquemos esto, programando nuestro sitio de ventas.

Supongamos que en el evento donde validamos el usuario y la contrasea (en el web panel Sale of Movies), guardamos en una variable el cdigo de usuario para poder utilizarlo en otro evento. Esto nos permitira, por ejemplo, llamar a un objeto que permita visualizar los datos del usuario. En consecuencia, deberamos programar lo siguiente en el evento donde validamos el usuario: Event Login For each Where &CustUsr = CustUsr If CustPsw = &CustPsw &CustId= CustId Message.Caption = Welcome to Movies.com Else Message.Caption = Invalid password, try again please Endif When none Message.Caption = User name not found Endfor Endevent Para realizar la llamada al web panel Datos del Cliente (CustProfile), existen varias alternativas: se puede definir un link en algn evento, o se puede agregar un botn y en el evento asociado invocar al objeto. El link se podra definir en el mismo evento Login a continuacin de la asignacin de la variable. Si agregsemos un botn o una imagen con un evento clic asociado, entonces el cdigo seria el siguiente: Event profile.clic/profile Call(HCustProfile,&CustId) Endevent Otra alternativa (la que vamos a implementar en este caso), es usar un control textblock y hacer el llamado al webpanel en el evento clic del textblock. Repasemos entonces lo que pasa en este segundo caso: 1. En la primer ejecucin se disparan los eventos: Start, Refresh y Load y podemos ingresar el usuario y password. 2. Cuando presionamos el botn para validar el login, se asigna a la variable &CustId el cdigo de usuario correspondiente. 3. Cuando presionamos la imagen con el evento clic asociado, se dispara el evento Start, se leen las variables que estn en pantalla, se ejecuta el evento clic y ah cuando trata de redireccionarnos al Web Panel CustProfile,

la variable &CustId no tiene valor ninguno, ya que la misma se perdi luego de haber finalizado la ejecucin del Web Panel en el punto 2. Haga clic aqu para ver la demostracin Probemos el web panel con el usuario myuser, y password mykey. Este usuario ya ha sido definido en los datos que se distribuyen con el curso. Haga clic aqu para ver la ejecucin Es por esta razn, que si queremos disponer del valor de la misma, deberamos agregar la variable &CustId en el form y la ocultaramos usando la propiedad Visible (por ejemplo en el evento Start). Entonces en este caso, cuando el Web Panel ejecute por segunda vez, se dispararn los eventos: 1. Start 2. Se leen las variables del form (en este momento se obtiene el valor de CustId) 3. Se ejecuta el evento clic, y por consiguiente se llama al Web Panel con el cdigo de cliente correcto! Haga clic aqu para ver la demostracin Haga clic aqu para ver la ejecucin
Nota: Conviene hacer en este punto del curso un Estilo de Web Panels (que llamaremos SaleMovie), es decir un Web Panel con la propiedad Style Object habilitada, en el que basaremos luego la definicin de los nuevos objetos. Para quienes conocen y utilizan los Styles habitualmente, es importante destacar que en el caso de los web panels, los styles aplican solamente al momento de inicializar el objeto, es decir los cambios que se hacen en el style luego de estar aplicado no se heredan. Haga clic aqu para ver la demostracin

COMPARACIN ENTRE WEB PANELS Y WORK PANELS

Se puede decir que los objetos Web Panel y Work Panel de GeneXus son similares ya que ambos permiten definir consultas interactivas a la base de datos. Son objetos muy flexibles que se prestan para mltiples usos, cuya programacin est dirigida por eventos. De todos modos, hay algunas diferencias causadas principalmente por el esquema de trabajo en Internet.

Tabla Base
La determinacin de la tabla base de los Web panels es anloga a la determinacin de los work panels. La determinacin de la tabla base puede encontrarse en el captulo: Mltiples Grids.

Eventos
Los eventos de los Web Panels son los mismos que en 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. Esto est relacionado con el esquema de trabajo en Internet.

Variables
Como se menciona en la seccin Esquema de trabajo en Internet, las variables adquieren los valores ingresados por el usuario despus de presionar algn botn en el web panel.

Por ejemplo, cualquier link a otro web panel especificado en el evento Start con una variable que se ingresa en un web panel no va a tener ningn valor cuando se haga clic 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 est en el form, la variable no tendr valor cuando se disparan los otros eventos (esto es por el orden en que ocurren los eventos). 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 grid entonces la variable tiene que estar en pantalla despus del grid.

Gatillado de frmulas stand alone

En un Web Panel existen frmulas que pueden ser gatilladas antes del evento Start y otras que deben gatillarse luego del mismo evento. Las frmulas que se gatillan ANTES del evento Start son aqullas que slo dependen de los parmetros que llegan al programa (regla parm()) Las frmulas que se gatillan DESPUS del evento Start son aqullas que dependen de atributos o variables instanciados (va asignacin, Call, etc.) en el evento Start.

Reglas ms importantes
En el objeto Work Panel, las reglas ms importantes son las siguientes: ORDER, NOACCEPT, SEARCH, HIDDEN y WORKFILE_LINES. En los web panels, hay algunas diferencias en el uso de las mismas.

ORDER, NOACCEPT, HIDDEN

Estas tres reglas se utilizan de la misma forma en los Work Panels que en los Web Panels. Cuando se quiere usar la regla hidden para atributos de un grid, se recomienda en lugar de eso, utilizar la propiedad de Visible. El valor de los atributos / variables de la regla hidden se "guarda" para cada lnea de cada grid que exista en la pantalla. Los atributos con Visible en False, no se ven en el grid final pero tambin se "guardan" aunque solamente para cada lnea del grid en el que fueron definidos. Se sugiere que se promueva el uso de los atributos con Visible en False para el desarrollo de aplicaciones en lugar de la regla HIDDEN. La causa de esto es que los hiddens se mandan en TODOS los grids mientras que los otros slo para el grid en que fueron definidos. Esto redunda en menos cdigo HTML a enviar al Browser y, en consecuencia, mejor performance.

WORKFILE_LINES
Esta regla no aplica a los Web Panels. La forma de hacer esto es usando la propiedad ROWS del grid.

Propiedades

En los Web Panels para resolver la visualizacin de grandes cantidades de registros se dispone de la paginacin automtica del grid.

Comandos soportados por los objetos web

A continuacin se detallan los comandos soportados por los objetos web.

CALL
El comando Call no presenta grandes diferencias con respecto al resto de los objetos GeneXus. Es importante tener en cuenta que los objetos web 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. En resumen, desde un objeto web, se puede llamar a otro objeto web, a un procedimiento o reporte que no tengan salida en pantalla.

Link
El comando link es equivalente al comando call para llamar a pginas estticas o redireccionar a una URL. Este comando puede ser utilizado dentro de cualquier evento de un objeto web 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:

Link( usr-pgm | url [{parm1, parmn}] )

donde usr-pgm es el nombre del web object al que se va a redireccionar <URL> es el nombre de la URL a la que se va a redireccionar <parm1>...<parmn>: son los parmetros que recibe la URL. El pasaje de parmetros es opcional.

Por ejemplo:

Event ENTER Link(http://www.ARTech.com.uy) Endevent

Load
El comando Load es anlogo al resto de los objetos GeneXus.

Refresh
El comando Refresh vuelve a cargar la pgina, teniendo el mismo efecto que el F5 del browser. La pgina se cargar manteniendo los ltimos valores sometidos para las variables ingresadas por el usuario.

Return
Incluir el comando return en un objeto web, es equivalente a hacer un CALL al objeto 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 o 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 caso que se ejecute en las mencionadas situaciones los resultados son impredecibles.

En el caso del primer objeto web, el return intentar cerrar el navegador.

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

INTRODUCCION AL CAPITULO 4
Volvamos al web panel de "Sale of Movies. Se quiere que en este Web Panel (el cual es de acceso pblico) se muestre todo el "Catlogo de pelculas", pudiendo filtrar por "gnero" y por "ttulo", cargando 5 pelculas cada vez. Se deber programar la paginacin a pedido cargando en una grilla pelculas. Para cada pelcula, se quiere ver: la imagen de la misma, su ttulo debajo. El ttulo a su vez, deber de contener un link a otro web panel que muestre ms informacin de la pelcula seleccionada y nos permita comprar dicha pelcula en sus diferentes formas (dvd, video, etc.). Ms adelante veremos cmo hacer esto, ya que por lo que se pide podemos notar que esto no se puede hacer en una grilla estndar ya que queremos para cada pelcula de la grilla desplegar un control debajo del otro). Se quiere tambin, desplegar la imagen y resumen de la "Pelcula del Mes", asumiendo que sta es fija y es la de cdigo 4 (si bien esta informacin podra almacenarse en alguna tabla, lo que nos permitira que la pelcula del mes vare) y debajo de esta informacin se desea tambin mostrar los actores de dicha pelcula (desplegando el nombre y apellido de cada uno). La pantalla que se desea obtener en ejecucin es la siguiente: de a 5

Es decir, que se desea incluir todo lo mencionado anteriormente, en el rea vaca hasta el momento del web panel Sale of Movies. A lo largo de este captulo iremos implementando todo esto a medida que vamos viendo los conceptos tericos necesarios para su desarrollo.

DIFERENTES TIPOS DE GRILLA

En los objetos web, se dispone de ms de un tipo de grilla:

Grilla estndar Grilla Freestyle

Estas grillas, agregan potencia al diseo de aplicaciones web, permitiendo al desarrollador mayor libertad a la hora del diseo.

GRIDS EN WEB PANELS

El botn que se encuentra en la barra de controles, permite insertar el control grid.

Los grids permiten trabajar con datos repetitivos en web panels y transacciones con form HTML. Las columnas de los grids pueden ser atributos, variables (incluyendo las de tipo bitmap). En ejecucin, el grid es una tabla HTML. A continuacin se detalla la forma de trabajo con grids en web panels.

Cmo desplegar datos en un grid

Por defecto todo atributo y variable que est dentro de un grid 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 grid

Es posible aceptar datos en las variables de un grid dependiendo de la programacin de los eventos existentes en el objeto:

1. si dentro de un evento del Web Panel se est utilizando el comando For each line o For each line in <grid>, todas las variables que estn dentro del grid 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 Only de la variable dentro del grid. 2. si dentro de la fila hay algn control con un evento clic asociado.

Cmo asociar eventos a una lnea de un grid

Es posible asociar un evento a cualquier variable que pertenezca al grid.

Propiedades del Grid

A continuacin se detallan las propiedades generales del grid:

1. Control Name 2. Class La propiedad Class solo se encuentra disponible si el control est en el form de un objeto que tiene un Tema asociado. 3. Auto Resize 4. Width 5. Heigth 6. LinesColor 7. LinesFont 8. TitleForeColor 9. TitleFont 10. BackColorStyle 11. BorderColor 12. Rows 13. AllowCollapsing 14. Collapsed 15. AllowSelection 16. SelectionColor 17. AllowHovering 18. HoveringColor Dependiendo del valor de la propiedad BackColorStyle, estarn disponibles otras propiedades adicionales relacionadas con la configuracin de las lneas del grid.

Si BackColorStyle = Header 1. LinesBackColor 2. TitleBackColor Si BackColorStyle = Report 1. LinesBackColor 2. LinesBackColorEven 3. TitleBackColor Si BackColorStyle = Uniform 1. BackColor Clculo del ancho de cada columna de un grid. El ancho de cada columna de un grid se especifica como un porcentaje del ancho total del grid (que por defecto no se especifica, el browser lo calcula en funcin al contenido de todas las celdas).

El ancho del grid NO se deduce como la suma de los anchos de las columnas, ya que si estos se especifican en valores relativos (porcentajes), puede no corresponderse a lo deseado.

Las propiedades LinesColor, LinesFont, TitleForeColor y TitleFont: Aplican a todas las columnas del grid, para modificar los valores correspondientes a una determinada columna, se deben modificar las propiedades de la misma (ver mas adelante).

Table
Los grids tambin tienen algunas propiedades configurables para las tablas propiedades son: 1. ToolTiptext 2. Align 3. Background 4. BorderWidth 5. Cellpadding 6. Cellspacing 7. Rules. Estas

Propiedades modificables en ejecucin

A continuacin se detallan las propiedades que se pueden modificar a los grids en tiempo de ejecucin:
1. Visible: si la propiedad Visible tiene el valor 0, el grid completo desaparece del formulario. 2. Backstyle 3. BackColor 4. BackColorEven 5. BackColorOdd 6. PageCount 7. RecordCount 8. Rows 9. Class

Propiedades de las columnas del grid

Tambin es posible indicar propiedades particulares para las diferentes columnas que forman el grid. Para esto, se debe seleccionar la opcin Columns del men que aparece al hacer clic en el grid.

En ese dilogo, seleccionando Properties sobre una columna se despliega un dilogo, como el siguiente:

1. ControlName 2. Class La propiedad Class solo se encuentra disponible si el control est en el form de un objeto que tiene un Tema asociado. 3. ControlType 4. ReadOnly 5. Autoresize 6. Font 7. ForeColor 8. Title 9. TitleFont 10. TitleForeColor 11. Format 12. Visible 13. ReturnOnClick

Propiedades de columnas en tiempo de ejecucin

En tiempo de ejecucin se pueden modificar las siguientes propiedades de las columnas de un grid:

1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23. 24.

Backcolor Backstyle Enabled FontBold FontItalic FontName FontSize FontStrikeThru FontUnderline ForeColor Format Title TitleBackcolor TitleBackstyle TitleFontBold TitleFontItalic TitleFontName TitleFontSize TitleFontStrikeThru TitleFontUnderline TitleForeColor TitleFormat Visible Class

PROPIEDADES DE GRIDS EN LOS TEMAS

En la clase Grid o derivada de ella, en los Temas, es posible configurar propiedades adicionales para dicho control. Ver Clase Grid

GRID FREESTYLE
El grid Freestyle permite al usuario definir el formato de los datos a desplegar de una forma menos estructurada que el grid tradicional.

Para insertar el grid Freestyle se debe utilizar el botn

de la barra de controles disponibles.

El grid Freestyle es bsicamente una tabla a la que se le pueden insertar los atributos / variables, text blocks, imgenes, botones, web components, embedded pages, grids freestyle y/o grids que se van a mostrar posteriormente en la pantalla. Este tipo de grid no posee ttulos para las columnas y adems permite tener ms de un tipo de control, atributo / variable en una misma celda, proporcionando de esta forma mayor libertad de diseo. Cabe destacar que el grid Freestyle posee las mismas propiedades mencionadas anteriormente para el grid 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 grid Freestyle es anlogo al que presentan dentro de un grid, por lo tanto tambin quedan de ingreso si existe un For each line o For each line in <grid> dentro de algn evento, o si se asocia un evento a cualquier control de la fila. Nuevamente este comportamiento puede modificarse, agregando la regla noaccept o cambiando la propiedad Read Only.

Propiedades del grid Freestyle

Para visualizar las propiedades de un grid Freestyle, hay que seleccionar la tabla del grid, presionar el botn derecho del mouse y seleccionar la opcin Properties.

A continuacin se documentan las propiedades disponibles para el grid Freestyle.

1. Control Name 2. Class La propiedad Class solo se encuentra disponible si el control est en el form de un objeto que tiene un Tema asociado. 3. BackColorStyle 4. Rows 5. Columns 6. AllowCollapsing 7. Collapsed Dependiendo del valor de la propiedad BackColorStyle, estarn disponibles otras propiedades adicionales relacionadas con la configuracin de las lneas del grid.

Si BackColorStyle = Report 4. LinesBackColor 5. LinesBackColorEven Si BackColorStyle = Uniform 1. BackColor

Propiedades modificables en ejecucin

En tiempo de ejecucin se puede modificar la siguiente propiedad:
1. Visible: Si la propiedad Visible tiene el valor 0, el grid free-style desaparece del formulario En el caso de tener grids anidados, la propiedad Visible aplicada al grid padre, aplica tambin a los grids hijos.

2. 3. 4. 5. 6. 7. 8. 9.

Backcolor BackColorEven BackColorOdd Columns PageCount RecordCount Rows Class

PROPIEDADES DE FREESTYLEGRIDS EN LOS TEMAS

En la clase FreeStyleGrid o derivada de ella, en los Temas, es posible configurar propiedades adicionales para dicho control. Ver Clase FreeStyleGrid

PAGINADO DE GRIDS EN WEB PANELS

Introduccin
A partir de la versin GeneXus 7.5 se brinda al usuario una serie de mtodos que habilitan el paginado automtico en grids y grids freestyle.

Alcance
Objetos: Web Panels Generadores: C/SQL VB JAVA - .Net Plataformas: Web

Descripcin
El paginado de grids aplica a grids comunes y freestyle cuya propiedad Rows tiene un valor diferente de cero. Los grids pueden estar anidados. Existen algunas diferencias relacionadas con la paginacin cuando un grid tiene tabla base o no.

Mtodos
A continuacin se describen los mtodos disponibles:.

FIRSTPAGE:
El mtodo FirstPage lleva al usuario al primer conjunto de registros devueltos. Los valores devueltos por este mtodo son los siguientes:

0: Operacin exitosa

1: No est habilitado el paginado en el grid

NEXTPAGE
El mtodo NextPage lleva al usuario al siguiente conjunto de registros. Los valores devueltos por este mtodo son los siguientes: 0: Operacin exitosa 1: No est habilitado el paginado en el grid 2: Ya se encuentra en la ltima pgina.

PREVIOUSPAGE
El mtodo PreviousPage lleva al usuario al conjunto anterior de registros. Los valores devueltos por este mtodo son los siguientes: 0: Operacin exitosa 1: No est habilitado el paginado en el grid 2: Ya se encuentra en la primera pgina

LASTPAGE
El mtodo LastPage lleva al usuario al ltimo conjunto de registros. Puede ser utilizado nicamente si el grid tiene tabla base. Los valores devueltos por este mtodo son los siguientes: 0: Operacin exitosa 1: No est habilitado el paginado en el grid 3: El grid no tiene tabla base

GOTOPAGE
El mtodo GotoPage(PageNumber) permite acceder en forma directa a un determinado conjunto de registros. Puede ser utilizado nicamente si el grid tiene tabla base. Los valores devueltos por este mtodo son los siguientes: 0: Operacin exitosa 1: No est habilitado el paginado en el grid

RESUMEN
A continuacin se incluye una tabla con un resumen de los mtodos disponibles cuando un grid tiene tabla base y cuando no. Grid con tabla base FirstPage NextPage PreviousPage LastPage GoToPage Grid sin tabla base

Propiedades
Cada grid dispone de las siguientes propiedades que son utilizadas en la paginacin:

RecordCount PageCount

Consideraciones
Si el web panel que se est paginando tiene filtros, se debera agregar el mtodo FirstPage dentro del evento que aplica el filtro, a los efectos de evitar que el resultado desplegado corresponda a la pgina en la que se encontraba anteriormente. La eficiencia de los mtodos FirstPage, NextPage, PreviousPage y GotoPage( N) esta asociada a la eficiencia de la definicin de la navegacin del grid correspondiente. En otras palabras, si el grid, sin paginado tiene buenos tiempos de respuesta, los tiempos con paginado sern semejantes. El mtodo LastPage determina cul sera la ltima pgina, para lo que utiliza la propiedad Rows y la propiedad RecordCount del grid. El hecho de utilizar la propiedad RecordCount implica que el DBMS (no el cdigo generado) barre dos veces la tabla base del Grid (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 Grid.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.

Implementacin
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 anteriores (N-1) sin mostrarlos.

Dada la implementacin, se recomienda: 1. Tener un buen filtrado de datos (de forma que no existan muchas pginas) 2. Evitar, cuando el costo sea alto, el uso de GotoPage( N) con valores altos de N, as como el uso de LastPage. 3. Tambin se recomienda salvar el valor de la propiedad RecordCount en una variable ya que cada invocacin de la propiedad implica un COUNT en la base de datos.

Ejemplo
Los mtodos de paginado de grids pueden ser utilizados en los eventos escritos por el usuario. Por ejemplo:

Event Start &Count = MyGrid.RecordCount If &Count > MyGrid.Rows Pagina2.Visible = 1 EndIf If &Count > MyGrid.Rows * 2 Pagina3.Visible = 1 EndIf Endevent

Event Siguiente.Click MyGrid.NextPage() Endevent

Event Anterior.Click MyGrid.PreviousPage() Endevent

Event Enter MyGrid.FirstPage() Endevent

APLICACION PRACTICA
Paginacin a pedido
Como ya mencionamos en la introduccin de este captulo, se quiere mostrar en el web panel Sale of Movies el "Catlogo de pelculas" programando la paginacin a pedido en la grilla de pelculas, cargando 5 pelculas a la vez y pudiendo filtrar por gnero y por ttulo. Para hacer esto vamos a tener que crearnos dos variables en la parte fija del web panel, donde el usuario va a indicar los filtros correspondientes (&genre y &title), pudiendo en el caso de la variable &genre definirnos un dynamic combo box que nos cargue los gneros existentes de la tabla de gneros, agregando una opcin (con el mtodo additem) para poder ver las pelculas de todos los gneros. Es decir, poner la siguiente sentencia en el evento start: &genre.additem(0,'All') Haga clic aqu para ver la demostracin Dado que en la grilla de Pelculas queremos desplegar las pelculas filtradas por gnero o simplemente desplegar todas las pelculas, una posibilidad es realizar la carga en forma manual utilizando variables. La ventaja de la carga manual (con respecto a usar tabla base) es que se puede optimizar la consulta si el usuario no ingresa un gnero, recorriendo nicamente la tabla Movies, evitando el join. Por defecto, GeneXus propone nombres para los controles (que los genera segn el tipo de control y la cantidad de ese tipo que existan en el form). En muchos casos para simplificar la comprensin de la lgica del control puede ser til asignarles nombres ms intuitivos. Es por este motivo que a esta grilla le asignaremos como nombre Movies y a la otra (con los Actores de la pelcula del mes) la llamaremos Actors. Entonces la carga de las pelculas la tenemos que programar en el Event Movies.load, haciendo el load de cada registro con el comando load. Como se quieren cargar de a 5 pelculas, debemos modificar la propiedad Rows de la grilla y asignarle 5 como valor. Por otro lado, vamos a agregar dos imgenes en el formulario Ver anteriores y Ver siguientes (prev.jpg y next.jpg respectivamente), programando su comportamiento en el evento click de cada una.

Event next.click //cdigo que se va a ejecutar cuando el usuario haga clic sobre la imagen next.jpg

Movies.NextPage() EndEvent

Para implementar la opcin de Ver Anteriores (asociada a la imagen prev.jpg), debemos programar el siguiente evento: Event prev.click //cdigo que se va a ejecutar cuando el usuario haga clic sobre la imagen prev.jpg Movies.PreviousPage() Endevent

Cuando modifiquemos los valores de las variables &genre y &title de la parte fija, vamos a presionar el botn de Buscar (Search) queriendo que se carguen las primeras 5 pelculas que cumplen con los nuevos valores de &genre y &title Para esto, vamos a tener que programar en el evento asociado al botn de Buscar lo siguiente: Event 'Search' Movies.FirstPage() EndEvent Haga clic aqu para ver la demostracin Veamos entonces como quedaron los eventos Refresh y Load de la grilla de pelculas:

Event Movies.Refresh EndEvent

Event Movies.Load If null(&genre) // si no se filtra por gnero, se recorre la tabla de Movies For each Where MovieTitle >= &title when not null(&title) &photo = loadbitmap(MovieImg) //cargamos la imagen de la pelcula &MovieTitle = MovieTitle load //cargamos la pelcula Endfor Else // si se filtra tambin por gnero recorremos la tabla Gen_Movie For each where (MovGenId = &genre) where MovieTitle >= &title when not null(&title) &photo = loadbitmap(MovieImg) &MovieTitle = MovieTitle

Endfor Endif EndEvent

load

Notar que la condicin de filtro por pelcula se realiza con la clusula WHEN para indicar que la misma se toma en cuenta cuando la variable tenga un valor. En el caso de tener un valor nulo, no se considera la condicin por lo que se recorrer toda la tabla. Si ejecutamos el web panel, podemos notar que los controles que estn en la columna 1 (imagen de Chaplin, link de Registrar nuevo usuario, Usuario, Password y botn de Login) aparecen alineados verticalmente en el "centro" de la celda en la que se encuentran, y como esa celda crece verticalmente segn el tamao de la grilla de pelculas, puede ocurrir que en ciertas ocasiones no podamos ver a todos esos controles (a menos que hagamos scroll vertical). Para cambiarle la alineacin a TOP, lo que tenemos que hacer es presionar el botn derecho del mouse estando posicionado en la celda de dichos controles y seleccionar la opcin de "Top" en la propiedad "Vertical Align". Haga clic aqu para ver la demostracin Haga clic aqu para ver la ejecucin

MLTIPLES GRIDS EN WEB PANELS

Introduccin
Poder disear Web Panels con ms de un grid potencia el desarrollo de estos objetos, ya que permite, entre otras cosas resolver en el mismo objeto accesos a diferentes tablas.

Descripcin
El uso de varios grids 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.

Atributos.
No se permite referencias <Grid Control Name>.<Attribute>.

Esto implica que si un atributo se encuentra en ms de un grid, los cambios de las propiedades afectan a todos los grids en los que se encuentra.

Variables.
No se permite <Grid Control Name>.<Variable>.

Esto implica que no se recomienda tener la misma variable en mas de un grid ya que cuando la misma variable est presente en ms de un grid, los cambios de las propiedades afectan a todos los grids en los que se encuentra.

Propiedades.
Las propiedades de los grids conservan la implementacin y comportamiento actual ya que siempre estuvieron asociadas al objeto.

Eventos.
Los eventos del grid conservan su comportamiento actual. Los eventos Load y Refresh deben referenciar al grid usando la siguiente nomenclatura: Event <Grid Control Name>.<Refresh | Load> .... EndEvent

Si el objeto solo tiene un grid, no es necesario usar la nomenclatura nueva.

Comandos.
Los comandos que actan especficamente sobre el grid cambian de forma de que, en caso de haber ms de un grid, se pueda determinar a cual grid se aplica, estos comandos son:

For each line: Este comando debe incluir una referencia al grid de la siguiente forma: For each line IN <Grid Control Name> Load: Dispara la carga del grid. La sintaxis continua siendo Load, pero debe incluirse dentro del evento load asociado a dicho grid. Si el objeto solo tiene un grid, no es

necesario usar la nomenclatura nueva. Ejemplo Event Grid1.Load Load Endevent

Reglas.
Order: Quedan asociadas al grid. (Se puede editar dando clic con botn derecho sobre el grid) Hidden: Los atributos / variables nombrados en esta regla son colocados como hidden en cada uno de los grids. No se recomienda su uso, en contrapartida se recomienda agregar el atributo / variable al grid y luego ocultarlo usando la propiedad visible. La razn para promover el uso de los atributos / variables 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 grids mientras que los otros slo estn para el grid 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 grid y este tiene un orden asignado explcitamente este ltimo es el que se toma en cuenta.

Conditions.
Las condiciones se pueden indicar por cada grid o en forma general para el objeto. Si hay condiciones generales y particulares sobre los mismos atributos, se toman en cuenta todas.

Determinacin de la tabla base

Como los web panels permiten tener mas de un grid, es que hay una tabla base por cada grid.

Los atributos que participan en la determinacin de la tabla base de cada grid son los que: Estn en el grid

 Estn referenciados en las reglas Hidden y Order aplicadas al grid y en conditions aplicadas al grid Los atributos de la parte fija no participan en la determinacin de la tabla base de ninguno de los grids, 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 grids.

Carga.
La carga se realiza para cada grid de forma independiente, es decir, an si los datos que se muestran en ambos grids 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 grids es: Evento refresh del grid 1 Evento Load grid 1 Evento refresh del grid 2 Evento Load grid 2

El orden en que se cargan los grids es como aparecen en el form: de arriba hacia abajo y de izquierda a derecha.

Aplicacion practica
Multiples subfilesgrillas
Lo que nos quedara por hacer en este web panel es desplegar la imagen y resumen de la "Pelcula del Mes" (que para simplificar la supusimos fija, la de cdigo 4), y una grilla subfile con los Actores de dicha pelcula. Recordemos cmo es que dijimos que queramos que apareciera el formulario en ejecucin

Lo primero que debemos hacer para poder mostrar la pelcula del mes es agregar una celda a la derecha de la celda donde desplegamos todas las pelculas. La forma mas sencilla de hacerlo es seleccionar la opcin Split Cell. Una vez realizado este cambio es necesario modificar el valor de la propiedad Colspan de la celda superior a 3, ya que ahora la misma debe abarcar 3 celdas en lugar de 2. Dado que ya sabemos que le pelcula del mes es la de cdigo 4, entonces podemos cargar la imagen y resumen de la misma en el evento Start.

Por otro lado, vamos a tener que crear una grilla subfile FreeStyle (para no ponerle ttulo al mismo) con los actores de la pelcula del mes, y vamos a tener que realizar su carga en el evento actoresActores.load (siendo Aactores el Control Name del grid FreeStyle). Para que no se vean en ejecucin los bordes donde se carga el resumen de la Pelcula del Mes (&moviesmrymresu), lo que hay que hacer es poner a la variable &resumoviesmrym como ReadOnly. Vamos entonces a hacer estos cambios a la aplicacin Haga clic aqu para ver la demostracin

Vamos entonces a crear el web panel "Detalles de una pelcula" (de nombre MovieDetails)
Se quiere desplegar en la parte fija de este web panel la imagen, ttulo y resumen de la pelcula recibida como parmetro, as como un grid con los actores (la concatenacin del apellido y nombre de cada actor separados por una coma) y otro grid con el precio de la pelcula (el de fecha mxima, ya que se guarda el histrico de precios) para cada tipo de pelcula (dvd, video, etc.), teniendo tambin en dicho grid una variable donde permita al usuario seleccionar la cantidad que desea comprar, para luego presionar un botn (Add to cart) para generar una orden de compra con lo seleccionado en el grid. Vamos a crear entonces un webpanel MovieDet (Movie Details), cuya pantalla es como la siguiente:

Tenemos que desplegar en la parte fija de este web panel la imagen, ttulo y resumen de la pelcula recibida como parmetro. Para desplegar el ttulo y resumen podemos poner directamente en el form los atributos correspondientes (MovieTitle y MovieSumry); pero para desplegar la imagen de la pelcula tenemos que definir en el form una variable en la cual debemos cargar la imagen correspondiente. Haga clic aqu para ver la demostracin El cdigo de la pelcula se recibe por parmetro, entonces, agregue la siguiente regla al webpanel: Parm(MovieId); Dado que el cdigo de pelcula lo recibimos por parmetro, cargaremos la imagen de la pelcula en el evento Start, como mostramos a continuacin: Event Start For each MovieId &photo =loadbitmap(MovieImg ) //cargamos la Imagen de la pelcula recibida en la regla parm Endfor EndEvent

Grid de actores
Es necesario desplegar un grid con los actores de la pelcula recibida como parmetro. Vamos a desplegar en cada lnea del grid, la concatenacin del apellido y nombre de cada actor separado por coma, para lo cual vamos a tener que realizar la carga manualmente, esto es, en el evento Actors.load. Haga clic aqu para ver como inclumos en el form el grid de Actores, y le llamamos Actors. Usted debe programar lo siguiente: Event Actors.Load For each MovieId //se recorre la tabla Movie_Act &actorname = concat(ActLastName, ActName,', ') // &actorname es la variable presente en el grid de actores. actors.load() Endfor Endevent

Grid de precios
Carga del grid

Recordemos las estructuras de algunas tablas: Movies MovieId* MovieImg MovieTitle MovieSumry MovieStck MovieQtity Movie_Type MovieId* MovieTypeId* Movie_Prc MovieId* MovieTypeId* MovieLinDate* MovieLinPrc Movie_Act MovieId* ActId* MoviesType MovieTypeId* MovieTypeDsc

En el grid de precios vamos a tener que desplegar para cada tipo de pelcula un nico registro con el precio (el de fecha mxima).

Recuerde que el MovieId se recibe como parmetro. Entonces recorremos la tabla Movie_Prc, para obtener para cada tipo de pelcula (MovieTypeId), el precio (MovieLinPrc) que se corresponde con la fecha ms reciente (MovieLinDate).

Es decir, que se va a hacer un corte de control por MovieTypeId en la tabla Movie_Prc, de forma de desplegar los valores de MovieTypeDsc y MovieLinPrc para la fecha mxima.

En una variable el usuario indicar la cantidad que desea comprar (la vamos a implementar con un combo box con los valores del 0 al 5, y la llamaremos Qty).
Observe que hay que tener disponible para cada lnea del grid el valor del MovieTypeId , ya que lo vamos a tener que pasar como parmetro al momento de presionar el botn de Add to cart para generar la orden de compra correspondiente. Entonces, haremos la carga del grid en forma manual, incluyendo las siguientes variables: Variable &Qty &MovieTypeDsc &MovieTypeId &MovieLinPrc Type N(5) Based on MovieTypeDsc Based on MovieTypeId Based on MovieLinPrc

El controlname del grid de precios, ser Prices. Haga clic aqu para ver la demostracin

Observar que cuando definamos mas adelante el for each line in Prices, la variable &Qty y el resto de las variables del grid van a tener un accept implcito. Cambiamos este comportamiento modificando la propiedad ReadOnly de las variables que nos interesa que no sean editables. En el caso de la variable &actorname del grid de actores (Actors), como no existe un for each line sobre dicho grid, es que la variable &actorname tiene un noaccept implcito. En el load del grid Prices programamos lo siguiente: Event Prices.Load for each MovieTypeId defined by MovieLinPrc &Movietypeid = MovieTypeId &MovieTypeDsc = MovieTypeDsc &flag = 0 for each (MovieLinDate) if &flag = 0 &MovieLinPrc = MovieLinPrc &flag = 1 endif endfor prices.Load() endfor EndEvent Recorrida del grid, lgica del Evento Add to cart

Se va a tener que recorrer el grid de precios para ver las cantidades que se desean comprar para cada tipo de pelcula y acceder a la tabla de rdenes para ver si existe una orden para ese cliente que se encuentre en estado de "Pendiente", y de ser as agregar esta compra a las lneas de la orden. En caso de no existir una orden pendiente para ese cliente, se deber dar de alta una orden nueva (como "Pendiente") y las lneas que correspondan. Una vez recorridas todas las lneas del grid se quiere llamar a una web transaction (Purchase Order) que despliegue los datos de la orden generada hasta el momento, donde se va a permitir eliminar o modificar los datos de las lneas de la orden.

Event Add to cart

For each Where CustId = &CustId and PurOrdSts = OrderStatus.Pending &PurOrdId = PurOrdId Endfor For each line in Prices se recorre el grid de precios, donde se indic la cantidad que se desea comprar if not null(&Qty) If null(&PurOrdId)

&PurOrdId = udp(PAddHead, &CustId) endif call(PAddLine,&PurOrdId ,MovieId, &MovieTypeId,&Qty) endif Endfor call(TPurchaseOrder,&PurOrdId) muestra la orden de compra generada hasta el momento
EndEvent Nota Importante 1. En el evento asociado al botn Add to cart, se deber controlar que el usuario ya se haya logueado al sistema y slo en caso de ser un usuario vlido es que se le va a permitir hacer compras. Esto lo veremos ms adelante, en el captulo correspondiente a "Seguridad" (captulo 8). Observe que en ese evento se usa el CustId, para armar la orden de compra. Por el momento (hasta que no veamos el captulo de Seguridad), asumiremos que el usuario ingresa su usuario, contrasea y presiona el botn de LOGIN inmediatamente antes de presionar el botn de Add to cart. De esta forma obtenemos en el evento correspondiente al botn de LOGIN, en la variable &CustId, el CustId del cliente logueado, para luego poder usuarlo en el evento correspondiente al botn de Add to cart. Como vimos en captulos anteriores, es necesario en este caso tener la variable &CustId en el form. Revise lo visto en Ejemplo: Esquema de trabajo en Internet 2. En el web panel Sale of Movies, en el grid donde cargamos las pelculas tenemos que agregar un link en el ttulo de cada pelcula al web panel que acabamos de crear. Cuando programamos la carga de dicho grid en el evento movies,Load debemos incluir el link de la siguiente manera dentro de cada uno de los for each: &MovieTitle.Link = link(HMovieDet, MovieId)

GRIDS ANIDADOS
Es posible definir grids 'anidados' en un web panel.

Los grids anidados consisten en un grid Freestyle al que se puede insertar dentro de una celda otro grid estndar u otro Freestyle.

Por ejemplo, se quiere tener un web panel que muestre los productos, pero indentados por categora:

Electrodomsticos Heladera TV Muebles de escritorio Silla ejecutiva Mesa de directorio ...

Para ello se define un grid free-style con la categora y dentro de este se inserta otro grid con los productos.

Puede haber grids anidados de varios niveles y puede haber tambin paralelos. Puede decirse que se est definiendo un rbol en donde cada nodo es un grid. Cada grid puede ser un free-style o un grid comn, aunque si es comn no puede tener ninguno anidado. Los grids comunes solo pueden ser hojas del rbol de anidacin.

Determinacin de tablas bases

Cada grid tiene una tabla base independiente a la del resto de los grids del rbol de anidacin.

Para relacionarlas, se deben incluir en los grids 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 grid, pero s deben participar en la definicin.

Siguiendo con el ejemplo anterior, el grid de Productos deber tener el cdigo de la categora para que los relacione.

Los grids debern tener: Sf1: CatDsc Sf2: CatDsc PrdDsc

Disparo de Eventos
El manejo de eventos es anlogo al del resto de los grids: se tienen los eventos refresh, load.
Cada vez que se ejecuta el comando Load en un grid con anidaciones, se llama al evento Refresh y load de cada hijo. Cada grid 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 grids sin tabla base.

Ejemplo de aplicacion de grids anidados

Una posible aplicacin del uso de grids anidados en nuestro Sitio de Venta, es disponer de un catlogo completo de pelculas clasificadas por su gnero. Para eso creamos un web panel con el estilo del sitio, denominado MovieCatalog y agregamos un grid freestyle donde colocamos los atributos MovGenId, MovGenDesc y dentro de este grid colocamos otro (tambin de tipo freestyle) con los atributos MovieId, MovieTitle para desplegar la informacin de la pelcula. Como vimos anteriormente el grid puede ser estndar o Freestyle, en este caso elegimos un grid Freestyle simplemente por el modo en que esta pgina va a ser diseada. Haga clic aqu para ver la demostracin

Si especificamos este Web Panel vamos a ver que el reporte de especificacin muestra por navegacin de la tabla de gneros por un lado y de la tabla de pelculas por otro. Para que se realice la anidacin, debemos relacionar las cargas de ambos grids. Esto podemos hacerlo, agregando en el grid interno el atributo MovGenId. Ahora s, en el reporte de especificacin vemos que se navega la tabla de gneros y por cada gnero, la que relaciona la pelcula con el gnero.

Haga clic aqu para ver la demostracin

Pero como no queremos que se despliegue un gnero que no tiene pelculas asociadas (en nuestros datos de ejemplo el gnero Childrens), entonces necesitamos un corte de control. Esto lo logramos forzando que ambas grillas tengan la misma tabla base, la tabla relacin Generos (MovieGenre) y Pelculas (Movies). Para esto tenemos que agregar en la primer grilla el atributo MovieId. As obtenemos el corte de control. Dado que no queremos ordenar por la clave de la tabla MovGenId, MovieId ya que no tiene ningn sentido, debemos agregar un orden de recorrido que nos interese, en este caso la descripcin del genero (*). Para lograrlo, agregamos el atributo MovGenDesc en la opcin Order de la primer grilla. De esta forma logramos programar nuestro Catlogo de Pelculas clasificado por gnero. La manera de ocultar los atributos que no queremos que se vean dentro de los freestyle grids, es poner lo siguiente en el evento start: MovGenId.Visible = 0 MovieId.Visible = 0 (*)Nota: el atributo MovGenDesc no pertenece a la tabla de clave primaria MovGenId, MovieId (que es la que se est recorriendo) por lo cual estamos ordenando por un atributo de la tabla extendida. Esto NO es vlido en ambientes locales como Access, pero SI en ambientes Client/Server donde se puede ordenar por atributos de la tabla extendida. En el caso de que ud. est trabajando en un ambiente local, debera hacer el corte de control por MovGenId que s pertenece a la tabla que se est recorriendo. Haga clic aqu para ver la demostracin

Para mejorar el diseo de nuestro catalogo, podemos agregarle las imgenes de las pelculas y realizar algunas pequeas modificaciones. Haga clic aqu para ver la demostracin

Haga clic aqu para ver la ejecucin

Queda a cargo del lector, poner en el webpanel Sale of movies, un link al webpanel recin creado (MovieCatalog) de ttulo Complete list of recent releases.

COMO TRABAJAR CON LOS "REGISTROS DE UN GRID"

Vamos a implementar una libreta de direcciones para el cliente.

Primero vamos a definir la transaccin Direcciones

del Cliente (Trn CustAddresses)

La estructura de la transaccin es la siguiente: CustId* CustAddssId* CustAddssDsc Haga clic aqu para ver la demostracin

Vamos entonces a crear el web panel Trabajar con direcciones" (de nombre CustAddresses)
En el formulario vamos a querer desplegar una lista de las direcciones que tiene ingresadas el cliente.

Cmo implementar la "eliminacin" de direcciones de la libreta de direcciones?

Esto lo podemos resolver de tres formas. 1) Si queremos permitir seleccin mltiple, lo que tendramos que hacer es agregar una variable &dlt en el grid y definirla como check box. De esta forma, el usuario seleccionara el check box en las direcciones que desea eliminar. A su vez, tendramos que tener un botn "Delete" y en el cdigo del evento asociado a dicho botn deberamos recorrer el grid (con el comando For each line) y para cada lnea seleccionada invocar a un procedimiento que haga la eliminacin fsica de dicha direccin (DelAddress). La creacin del procedimiento DelAddress queda por cuenta del lector. Haga clic aqu para ver la demostracin. 2) Agregar una imagen o botn en cada lnea del grid, y en el evento asociado llamar a otro objeto que permita realizar la modificacin En la siguiente demostracin, modificamos el webpanel creado con la solucin 1, de forma de implementar la solucin 2. La siguiente pantalla es como se visualiza en ejecucin la solucin 2.

3) Otra alternativa es usar la propiedad AllowSelection del grid. Haga clic aqu para ver la demostracin (modificamos el webpanel CustAddresses de manera de usar esta solucin) Note que tambin se configuraron las siguientes propiedades: AllowHovering AllowCollapsing

Modificaremos el webpanel de forma de que el grid y el botn queden alineados verticalmente hacia arriba, dentro de la tabla que los contiene. Haga clic aqu para ver la demostracin. Haga clic aqu para ver la ejecucin. En resumen, si lo implementamos permitiendo Seleccin Mltiple (opcin nro. 1) el usuario tendra que seleccionar los check box de cada una de las lneas que desea eliminar y luego presionar el botn de "Delete". Si lo implementamos como mencionamos en la opcin 2 o 3, el usuario tiene que hacer clic solamente en las lneas que desea eliminar, de a una.

Cmo implementar la "modificacin" de las direcciones de la libreta?

En el caso de querer modificar una direccin de la libreta, la forma de implementarlo es similar a la solucin 2 y 3 vistas anteriormente. Es decir, se puede tener un control o variable en cada lnea, al que se le asocie un link a un webpanel para modificar la lnea, o un link a la transaccin de direcciones pasndole llave primaria y modo. Tamben se puede implementar la solucin 3, haciendo uso de la propiedad AllowSelection, para llamar a un webpanel o procedimiento que modifique la lnea, dado que cuando el usuario selecciona una lnea quedan instanciados los datos de esa lnea, de forma de llamar al objeto con los parmetros adecuados. Por qu no se puede implementar esto de la forma mencionada en la opcin 1? Porque de querer hacerlo as, en el cdigo asociado al botn tendramos que hacer lo siguiente: Event 'Update Addresses' For each line //Seleccin mltiple para modificar las lneas de la orden If &upd = 'S' call( HModifyAddress, CustId ,CustAddssId ) Endif Endfor Endevent Tenemos que recordar que cuando el usuario presione el botn de Modificar

direcciones, el cdigo de dicho evento se ejecuta en el Servidor (para todas las lneas), por lo cual cuando se devuelve el control al browser, nos va a cargar el webpanel ModifyAddress , pero slo para la ltima direccin. Es por este motivo que la nica forma de implementar esto como lo explicamos anteriormente. Queda a cargo del lector la implementacin de ambas soluciones. Recordar lo que se vi anteriormente (captulo Grids): En forma predeterminada todas las columnas de un grid son Read-Only (esto aplica tanto a grids como a grids freestyle). La forma de hacer que una variable dentro de un grid sea editable, para que el usuario la pueda modificar es la siguiente: Tener un for each line en el evento asociado a algn control del form, un evento click asociado a algn control en las lneas del grid

Si se quiere que algunas variables sean editables y otras no, usar la Regla noaccept() para aquellas variables que se quiere que sean readonly.

Nota:

El webpanel CustAddresses puede ser invocado desde el webpanel CustProfile; queda a cargo del lector agregar en este ltimo webpanel un botn o un link a CustAddresses pasando como parmetro el CustId. Por ejemplo, la siguiente es la imagen del webpanel CustProfile al cual le agregamos el botn My Addresses:

Y el evento sera:

Event 'My Addresses' call(HCustAddresses ,CustId) EndEvent // 'My Addresses'

INTRODUCCION AL CAPITULO 5
En nuestra aplicacin ventas de pelculas el rea de login, se repite en gran parte de los web panels que hemos diseado. Hasta el momento, usbamos un style para inicializar el objeto, pero como se mencion anteriormente los styles en ambiente web no tienen el dinamismo que tienen en ambiente win. Lo que proponemos ahora son diferentes formas de componentizar una pgina, para poder reutilizar otros objetos web y simplificar el diseo de la aplicacin Los Web Components son Web Objects que tienen una propiedad que indica que son componentes. Es decir, pueden ser ejecutados en forma independiente como cualquier otro Web Object o pueden formar parte de otro objeto web (Web Panel o Web Transaction); 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 objetos web de una aplicacin, puede ser definida como Web Component. Algunos ejemplos: 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.

Definicin de Web Components

Para definir un Web Object como Web Component se debe configurar la propiedad Web Component del objeto en YES. Se debe notar que un Web Object definido como Web Component no pierde ninguna de sus caracteristicas, por lo tanto, puede ser ejecutado en forma autnoma.

Los Web Components se generan dentro del mismo HTML del Web Panel que los contiene. Esto significa que 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.

Uso de Web Components

Para insertar un Web Component en un Web Panel o Web Transaction se debe elegir la opcin Insert / Web Component, o la opcin de la barra de controles, con lo cual se crear un objeto de tipo Web Component en el objeto.

Adems, se pueden insertar Web Components en grids freestyle.

Para determinar el objeto que se va a desplegar en lugar del control Web Component, se utilizan las propiedades del mismo. El web object a desplegar se puede fijar en diseo o en tiempo de ejecucin, como se describe a continuacin.

Propiedades
El objeto Web Component tiene las siguientes propiedades de diseo:

ControlName: Nombre del control Object: Permite asociar un objeto web al web component. Slo se aceptan objetos con la propiedad Web Component en YES. Parameters: Permite especificar la lista de parmetros con los que se invocar el web component.

PROPIEDADES MODIFICABLES EN EJECUCIN

A continuacin se detallan las propiedades de los Web Components que se pueden modificar en tiempo de ejecucin:

Object: permite determinar en tiempo de ejecucin el Web Object que se va a desplegar en el lugar del control. Para invocar el Web Component se debe utilizar la siguiente sintaxis: Control.Object = Create(Hxxx, [par1], ... [parn] Siendo Control el nombre del control Web Component agregado al objeto, Hxxx el Web Object que est configurado como Web Component (Propiedad Web Component con valor Yes) y par1 a parn los parmetros que recibe dicho Web Object. Visible: si la propiedad Visible tiene el valor 0, el Web Component desaparece del formulario.

Web Components dinmicos

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)

Tanto si se invoca de forma dinmica como esttica, en el programa generado la invocacin ser esttica. Es decir la invocacin dinmica (create(&Var)) se genera como:

Do Case Case &Var=Objeto1 Create(Objeto1) Case &Var=Objeto2 Create(Objeto2) .... endcase

Esto implica que si se agrega un componente al modelo y el mismo ser llamado de forma dinmica, se debern regenerar y compilar todos los invocadores de ese nuevo componente. Esto, en .Net y Java no es estrictamente necesario; basta con generar y compilar el componente mismo. GeneXus determina automticamente un dominio de objetos llamados en un create dinmico. El dominio esta definido por los Web Objects que tienen la propiedad WebComponent en YES y que tienen igual cantidad y tipo de parmetros que el create. Estos objetos se vern adems en el object browser como objetos llamados.

Por lo tanto, al compilar el web panel padre C/SQL y VB compilan en forma automtica los posibles Web Components llamados.

Observaciones
En diseo, el tamao del Web Component permanece fijo, pero en ejecucin, 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. Los parmetros de los Web Objects cuando son utilizados como Web Components no son opcionales. Notar que esto es una diferencia con los Web Panels comunes cuyos parmetros s son opcionales. La asignacin de un Web Component puede realizarse dentro de cualquier evento del web panel padre. Si se asigna un Web Component en el evento Start del padre, los parametros se pasarn solamente la primera vez que se crea. En sucesivos POST, los parmetros se recordarn del render anterior. Si se asigna un Web Component en cualquier otro evento (Refresh, Load, de usuario, etc.), los parmetros se pasarn siempre que se ejecute dicho evento. Si se asigna el web panel en la propiedad Object del control Web Component en diseo, el pasaje de parmetros se realiza en forma anloga a lo descrito en el punto anterior. Los controles y las variables de los Web Components no son accesibles por los objetos que los contienen (objeto web padre). 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 objeto web que lo contiene. Por ejemplo si el form de un Web Component tiene color verde, pero el form del objeto web que lo contiene tiene color blanco, entonces este ltimo predominar sobre el primero. No es as con las propiedades de los dems controles. No se soporta el uso de atributos como primer parmetro de la funcin Create. En C/Sql y Visual Basic el .EXE o .ASP del main incluir los fuentes de todos los web components llamados por l. Esto es diferente en Java y .Net, donde cada objeto tiene su propio .class o .dll. Esto no necesariamente es un problema para Visual Basic o C (los servidores tienen tecnologa de swapping lo cual implica que no haya perdida de performance por el tamao del EXE o ASP).

TRANSACCIONES COMO WEB COMPONENTS

Introduccin
A partir de la versin 8.0, no solo un Web Panel puede ser un Web Component, sino tambien cualquier Transaccin con interfaz web.

Alcance
Objetos: Transacciones Lenguajes: .Net, C/SQL, Visual Basic, Java. Interfaces: Web

Descripcin
La posibilidad de definir una transaccin como Web Component permite tener en un Web Panel varios componentes, algunos conteniendo Transacciones (para altas, bajas y modificaciones de datos) y otros conteniendo Web Panels que despliegan informacin relacionada, menues, etc. La definicin y el uso de una transaccin como Web Component es similar al caso de Web Panels como Web Components Por ms informacin referirse al documento de Web Components.

Observaciones
Es posible tener varios web components con transacciones en un mismo web panel, pero se deben tener en cuenta los siguientes puntos: El estado de grabacin no se mantiene por cada componente. Esto significa que si el usuario ingresa a un componente y realiza una operacin (por ejemplo modifica un atributo de la transaccion y oprime el boton Aplicar Cambios por primera vez) y no reconfirma la misma, al realizar una operacin en otro componente (por ejemplo un GET), se pierden los cambios realizados en el primero (es decir se refresca la pgina con el valor y estado que tena antes de modificar el atributo).

Ejemplos
Puede obtener un ejemplo en esta URL: http://www.gxopen.com.uy/hproject.asp?122

EJECUCIN DE OBJETOS WEB CON WEB COMPONENTS

A continuacin se describe la ejecucin de objetos Web que contienen Web Components. Web Components en rea plana del objeto Web Orden de ejecucin de los eventos Se puede 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 ejecucin de los eventos al realizar la primer llamada al mismo (GET) es el siguiente: Evento START del objeto web que contiene el Web Component (objeto Web padre), Evento REFRESH del objeto Web padre, Evento START de todos los Web Components dentro del objeto web que no estn dentro de subfiles, Eventos REFRESH y LOAD de cada uno de los Web Components y de los subfiles en el orden que aparecen en pantalla (de arriba a abajo y de izquierda a derecha). Ejemplo: En la siguiente figura, se puede observar un Web Panel que contiene 2 Web Components (A y B) y un subfile. Cada Web Component tiene a su vez un subfile.

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

7. Evento REFRESH del Web Component B y evento LOAD del subfile en el Web Component B Disparo de un evento (POST) Al disparar un evento, el orden de los eventos depende de si se dispar el evento en el padre o en un Web Component. A continuacin se analizan ambos casos. NOTA: La lectura de variables de cada objeto se realiza siempre inmediatamente despus del evento START de dicho objeto. Disparo de un evento de un Web Component Evento START del objeto web padre, Evento START del Web Component cuyo evento se dispar, Evento de usuario del Web Component, Evento REFRESH del objeto web padre, Evento START de los Web Components restantes Eventos REFRESH y LOAD cada uno de los Web Components y subfiles en el orden que aparecen en pantalla.

En el ejemplo, si se dispara un evento del Web Component A, el orden de los eventos sera el siguiente: 1. 2. 3. 4. 5. 6. 7. 8. 9. Evento START del Web Panel Lectura de variables del Web Panel Evento START del Web Component A Lectura de variables del Web Component A Evento de usuario del Web Component A Evento REFRESH del Web Panel Evento START del Web Component B Lectura de variables del Web Component B Evento REFRESH del Web Component A y evento LOAD del subfile en el Web Component A 10. Evento LOAD del subfile del Web Panel 11. Evento REFRESH del Web Component B y evento LOAD del subfile en el Web Component B Disparo de un evento en el objeto web padre Evento START del objeto web padre Evento de usuario del objeto web padre Evento REFRESH del objeto web padre Eventos START de todos los Web Components en el orden que se encuentran en pantalla Eventos REFRESH y LOAD de los Web Components y subfiles en el orden que aparecen en pantalla.

En el ejemplo, al dispararse un evento del Web Panel, el orden de los eventos sera el siguiente: 1. Evento START del Web Panel 2. Lectura de variables del Web Panel 3. Evento de usuario del Web Panel

4. 5. 6. 7. 8. 9.

Evento REFRESH del Web Panel Evento START del Web Component A Lectura de variables del Web Component A Evento START del Web Component B Lectura de variables del Web Component B Evento REFRESH del Web Component A y evento LOAD del subfile en el Web Component A 10. Evento LOAD del subfile del Web Panel 11. Evento REFRESH del Web Component B y evento LOAD del subfile en el Web Component B Nota: si el objeto web tiene ms de un subfile, primero se ejecuta el REFRESH independiente de los subfiles y luego el refresh de cada uno de los subfiles en el orden en que aparecen en pantalla. Web Components en subfile freestyle Orden de ejecucin de los eventos En caso de haber Web Components en subfiles, se ejecuta el evento START del Web Component justo antes del evento REFRESH en vez de ejecutarse al principio.

Todos los eventos del Web Component (START, REFRESH y LOAD si tiene subfiles) se ejecutan cada vez que aparece el Web Component.

Consideraciones de diseo para la optimizacin de Web Components

A continuacin se describen algunos puntos a considerar para el diseo de pginas Web con GeneXus y Web Components para lograr una optimizacin del cdigo HTML generado:

USO DEL CREATE

Evitar el uso de CREATE y especificar, siempre que sea posible, el nombre del Objeto Web Component en las propiedades del Control Web Component. Cuando se utiliza CREATE (especificando un objeto o una variable) los generadores tienen que incrementar el cdigo HTML generado para saber cul fue el nombre del Objeto Web Component que se utiliz. El incremento en el cdigo HTML por utilizar CREATE es relativamente menor. De todas formas, en pginas con muchos Web Components y/o con Web Components dentro de grids, puede sumar varios KBytes ms a la pgina.

EVITAR EL USO DE CREATE CON UNA VARIABLE

En algunos generadores (VB, C/SQL, etc.) el CREATE con una variable es transformado, por el especificador, en un DO CASE con CREATEs "fijos" (con nombre de objeto) basndose en los parmetros especificados. Resulta evidente que el DO CASE puede incluir CREATEs de Web Components que nunca van a ser llamados (porque no son necesarios en la lgica del programa) y entonces nos encontraramos como en el punto anterior.

UTILIZAR TEXT BLOCKS EN LUGAR DE VARIABLES SIEMPRE QUE SEA POSIBLE

Un Text Block tiene menos funcionalidad que una variable. Sin embargo, en la medida en que la funcionalidad adicional no sea necesaria es recomendable utilizar un Text Block en lugar de una variable ya que el cdigo HTML generado para un Text Block es normalmente menor (en algunos casos la mitad) que el de una variable. Es importante notar que la cantidad de cdigo HTML generado depende del contenido de la variable o del valor de la propiedad Caption de un Text Block. Un ejemplo de esto es la inclusin de cdigo HTML escrito por el usuario en las pginas generadas. Es muy recomendable utilizar Text Blocks en este caso.

ELIMINAR ATRIBUTOS/VARIABLES QUE NO ESTN SIENDO UTILIZADOS EN LA PANTALLA

Genera menos cdigo HTML un atributo/variable que no esta en la pantalla que uno que s esta pero tiene la propiedad Visible en cero. Ninguno de los dos se "ve" en la pgina generada.

Lo que vamos a hacer ahora es reemplazar el rea de login en el web panel Sale of

Movies por un web component.

Para poder hacerlo, lo primero que vamos a hacer es definir un nuevo web panel, que llamaremos Login, e indicar que el mismo es un web component.

Haga clic aqu para ver la demostracin

A continuacin, vamos a agregar un control de tipo web component en el web panel Sale of Movies en el lugar del rea de login y vamos a indicar que se debe cargar el web panel Login que acabamos de definir.

Haga clic aqu para ver la demostracin

Nota: Observe que lo ms correcto sera inclur el textblock My profile en el webcomponent Login. Hgalo como ejercicio, sin olvidar que es necesario recuperar la variable &CustId en el evento login y colocar esa variable en el form para que sea posible instanciar el Id del cliente cuando se llama al webpanel que permite visualizar los datos del cliente (webpanel CustProfile creado en el captulo 3).

EMBEDDED PAGES
Introduccin
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.

Alcance
Objetos: Web Panels, Web Transactions Lenguajes: C/SQL Java Visual Basic .Net Interfases: Web

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

Ventajas del uso de Embedded Pages

El uso de Embedded Pages brinda a los usuarios GeneXus la siguiente ventaja:

Incluir informacin externa: permite que se incluyan pginas estticas o dinmicas de la propia aplicacin o desarrolladas por terceros. Dichas pginas pueden estar en el mismo servidor que la aplicacin o en otro servidor. Esta caracterstica brinda gran dinamismo a las aplicaciones web desarrolladas con GeneXus.

Generacin de Embedded Pages

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

Requerimientos
Para poder visualizar objetos Web que contienen Embedded Pages, se requieren browsers que soporten el tag correspondiente al inline frame (<IFRAME>). En consecuencia, el browser (en el cliente) debe ser como mnimo Internet Explorer 4.0, Netscape 6.0 o versiones superiores.

Uso de Embedded Pages

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 como se puede observar en la siguiente figura:

Tambien es posible insertarla con un solo clic en el cono

de la barra de controles.

Propiedades
El control Embedded Page tiene las siguientes propiedades:

ControlName: Nombre del control. BorderStyle Scrollbars Source TooltipText

Height

Width Align

PROPIEDADES MODIFICABLES EN EJECUCIN

A continuacin se ejecucin: BorderStyle TooltipText Source Visible Height Width HeightUnit WidthUnit detallan las propiedades modificables en tiempo de

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

Observaciones
Si en las propiedades del control no se especifica la propiedad

Source, entonces en el evento START o REFRESH se debe asignar algn valor a la misma. Por ejemplo EP.Source = http://www.genexus.com, siendo EP el nombre del control Embedded Page. Se permite la asignacin dinmica de URLs, es decir se permite algo del estilo &url = http://www.genexus.com EP.Source = &url Se pueden incluir Embedded Pages dentro de subfilegrids freestyle.

Orden de los eventos

Como se mencion anteriormente la Embedded Page es una pgina 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 dispararn en forma independiente y no es posible establecer a priori cuando se ejecutan los de uno con relacin a los del otro.

INTRODUCCION AL CAPITULO 6
A lo largo de este captulo discutiremos como se comportan las transacciones que se ejecutan en el web (transacciones con form HTML).

Para destacar el funcionamiento de las mismas, se describirn sus diferencias con respecto al comportamiento de las transacciones en ambiente grfico. De esta forma podremos seguir avanzando sobre nuestra aplicacin

TRANSACCIONES WEB
Descripcin
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 Web, 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 Web de una transaccin, se debe abrir la transaccin y seleccionar la opcin Object/Web Form del men GeneXus.

Otra forma de editar el HTML form, es seleccionando el tab Web 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.
Adicionalmente, se crea un botn a continuacin del atributo clave. Este botn tiene asociado el evento Get y permite obtener la informacin correspondiente a un registro cuando se ingresa un valor en el/los atributo/s clave.

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

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

Se muestra un ejemplo a continuacin:

Consideraciones Generales
La principal diferencia de las Transacciones Web con las transacciones de las aplicaciones tradicionales es el dilogo que emplean, 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 iSeries en pantallas de texto. La razn de este diseo es facilitar el uso en ambientes de Internet donde un dilogo de tipo campo a campo como en los ambientes visuales (Visual Basic, Visual FoxPro, etc.) resultara inviable por performance.

Arbol de evaluacin
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. El usuario puede visualizarlos presionando el botn Check.

ORDEN DE DISPARO DE LOS EVENTOS Y ARBOL DE EVALUACIN

Cuando se ejecuta por primera vez una transaccin, el orden de disparo de eventos y reglas es el siguiente:

1. Evento Start 2. Reglas que no tienen condiciones de disparo Al presionar el botn Get, el botn Confirm o cualquier botn con un evento de usuario asociado, el disparo de eventos y reglas es el siguiente: 1. Evento Start 2. Lectura de los atributos/variables de la pantalla 3. Reglas

REGLAS
La regla Default_mode no aplica en Transacciones Web. La regla Default (Att,&today) se dispara nicamente la primera vez que se ejecuta la Transaccin Web, en su lugar se aconseja utilizar default(Att,today()). Lo mismo ocurre con la variable &time y la funcin Time() correspondiente.

Integridad transaccional
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.

Control de concurrencia
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. El 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.

Prompts
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. Para modificar el prompt llamado por defecto, se puede utilizar la regla prompt. Tambin es posible definir web panels como prompt, por mas informacin referirse a la seccin Web panels como prompt

Transacciones Web sin Modo instanciado

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
Al ingresar a una Transaccin Web de este tipo, se comienza en modo Insert, y se despliega una pantalla con la siguiente forma:

Si se quiere ingresar un registro nuevo, se digitan los datos en la pantalla y se presiona el botn Apply Changes. Esto provoca, en primera instancia, que se validen los datos ingresados en forma similar a cuando se presiona el botn Check. 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 Record already exists.

Adems, si no se trabaja con confirmacin (propiedad Confirmation del objeto), se insertarn los datos. Si se trabaja con confirmacin, se desplegar el mensaje Please confirm the data. Al presionar nuevamente el botn Apply Changes, se insertarn los datos.

Luego de actualizada la base de datos, se despliega el mensaje Data has been successfuly added.

Modo Update
Para entrar en modo Update, se deber poner un valor en la clave y presionar el botn Get ( ). Esto hace que se carguen los datos del registro.

Al cargar los datos tambin se traen las descripciones. Se pueden modificar los datos y presionar el botn Apply Changes, 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 Delete All, lo que provoca que se deshabilite dicho botn. En el caso de trabajar con confirmacin, se desplegar el mensaje Confirm deletion

Al presionar el botn Apply Changes, se eliminarn los datos y de desplegar el mensaje Data has been successfuly deleted:

En el caso de que no se trabaje con confirmacin, al presionar el botn Delete All se eliminarn directamente los datos y se desplegar el mensaje Data has been successfuly deleted, sin necesidad de presionar Apply Changes.

Al eliminarse un registro se cargan los datos correspondientes al registro anterior, quedando en modo Actualizar. Si se borran todos los registros, la transaccin queda en modo Insert.

Transacciones Web con Modo instanciado

Las Transacciones Web que se invocan instanciando el modo Insert, Update o Delete, deshabilitan los botones de movimiento entre registros y los botones Get, Select y Delete All.

Modo Delete
Cuando se invoca una Transaccin Web instanciando el modo Delete siempre se despliega el mensaje Confirm deletion, sin importar si se esta trabajando con confirmacin o no. Al presionar el botn Apply Changes, se elimina el registro.

Ahora que ya vimos como funcionan las transacciones web, podemos definir la transaccin para registrar un nuevo usuario que es invocada en el link que definimos en el Web Panel Sale of Movies. Para hacerlo, tenemos que editar la transaccin de Clientes (Customer) y en el web form disearlo como se muestra a continuacin:

Haga clic aqu para ver la demostracin La numeracin del Cliente es realizada en forma automtica, a partir de la propiedad Autonumber que le asignaremos a la clave primaria de la tabla.

Haga clic aqu para ver la demostracin

Agregaremos las siguientes reglas a la transaccin:

Parm(&CustId,&Mode); CustId=&CustId if update .OR. delete;

Adems, debemos agregar una regla que evite que el cdigo de Cliente sea ingresado: Noaccept(CustId);

El ingreso de todos los campos es obligatorio, por lo cual debemos agregar reglas que hagan este control: Error(Please specify a Last Name) if null(CustLastName); Error(Please specify a First Name) if null(CustName); Error(Please specify an E-Mail account) if null(CustEmail); Error(Please specify a User name) if null(CustUsr); Error(Please specify a Password) if null(CustPsw); Error(Please confirm the Password) if null(&PswConf);

Para que la variable &PswConf sea de ingreso, se debe agregar la regla: Accept(&PswConf);

Finalmente, se debe controlar que la contrasea concuerde con la confirmacin ingresada, para eso es necesario agregar: Error(Your password entries did not match) if CustPsw <> &PswConf;

En el evento start, agregar el cdigo siguiente para que los controles de ingreso de passwords queden enmascarados:

Event Start &PswConf.IsPassword = 1 CustPsw.IsPassword = 1 EndEvent

Ahora que ya definimos la transaccin web, podemos modificar el link para registrar un nuevo usuario, en la pgina principal, de forma de que le pase los parmetros adecuados a la transaccin Customer. Recuerde que la pgina principal del sitio Sale of movies contiene un webcomponent Login, que es el que tiene el link para registrar un nuevo usuario, vamos a modificar ese mismo link.

Haga clic aqu para ver la demostracin

Ahora si, veamos la ejecucin de nuestra aplicacin y registremos un nuevo usuario

Haga clic aqu para ver la ejecucin

Transacciones Web de ms de un nivel

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 un nivel anidado y pueden tener varios niveles paralelos. El primer nivel debe respresentarse plano (sin grid) y el nivel subordinado necesariamente debe tener un grid.
Grid Eliminacin de lneas

En diseo se utiliza una variable &GxRemove definida y agregada automticamente a los subfiles de la pantalla por defecto. Esta variable es un check box que se ubica en la primera columna del grid.

Cuando se desea eliminar alguna lnea del grid, se debe marcar la misma con el check box, y presionar el botn de Apply Changes, no de Delete All. Este ltimo eliminar 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 est en un nivel en particular de la misma. Por eso para eliminar lneas se debe utilizar el botn Apply Changes porque en realidad se est actualizando el documento. Lo mismo para agregar lneas, se debe utilizar el botn Apply Changes porque se est actualizando el documento.

REGLA PROMPT ON
Introduccin
Es posible definir el control que activa la llamada a un determinado prompt en objetos Web, en lugar del bitmap utilizado por defecto.

Esto posibilita adems la llamada desde Web Panels a prompts de GeneXus o de usuario.

Alcance
Objetos: Web Panels, Transactiones Lenguajes: Java, C/Sql, Visual Basic, .Net Interfaz: Web

Descripcin
La regla PROMPT permite especificar (opcionalmente) el nombre del control que activa la llamada a un determinado prompt.

La sintaxis pasa a ser la siguiente:

Prompt( <program>, [p1, ] ... pn) [on <control>];

En caso de omitirse on <control> se agregar (en los ambientes que corresponda) una imagen, botn, etc. a la derecha del o los campo(s) que tienen prompt, como hasta ahora.

Cuando se especifica on <control> se utilizar el control referenciado. Los controles posibles son aquellos que tengan la propiedad link (TextBlock, Imagen, etc).

Al utilizarse esta regla se mostraran en el diagrama de navegacin los prompts utilizados.

Nota: Esta regla aplica nicamente a objetos que se especifiquen para interface Web, en caso que se utilice en otros objetos, se ignora la nueva funcionalidad.

USO DE WEB PANELS EN REGLAS PROMPT

Introduccin
En muchas circunstancias, en una transaccin Web es necesario utilizar Web Panels de usuario en lugar de las listas de seleccin generadas automticamente por GENEXUS, mediante el uso de la regla Prompt.

Alcance
Objetos: Transacciones Lenguajes: C/SQL JAVA - Visual Basic .Net Interface: Web

Descripcin
Existen casos en los que un usuario requiere crear un Web Panel que luego quiere utilizar como prompt para obtener valores de atributos.

Para invocar el Web Panel, simplemente se utiliza la regla prompt en una transaccin web o dentro de un web panel. Al dispararse la regla prompt (haciendo click sobre un control) se abre una ventana con el Web Panel y, al seleccionar un valor (nuevamente haciendo click) se cierra la ventana y el valor se asigna a lo(s)/la(s) atributos/variables que corresponda.

Programacin de un Web Panel como prompt

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 imagenes 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 grid, por ejemplo). Si uno de los atributos variables, text blocks o imagenes 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.

Uso avanzado
Esta funcionalidad puede no contemplar todos los casos. Por ello, tambin se implement la funcin ReturnOnClick() (sin parmetros) que puede ser asignada a la propiedad Link de cualquier control (que tenga esta propiedad).

Ejemplos
Prompt de Clientes
Un prompt de clientes se programa as:

En las Reglas del web panel:

parm( out: &CliCod);

En los Eventos:

event Grid1.load &CliCod = CliCod endevent

En el form: Un grid que tiene CliNom y CliCod, donde CliNom (por ejemplo) tiene la propiedad ReturnOnClick en true.

TRANSACCION ORDEN DE COMPRA

Una vez que el cliente selecciona una pelcula para comprarla, debe visualizar la lista de pelculas que tiene seleccionadas hasta el momento. Es por esta razn, que vamos a disear la transaccin Orden de Compra (Purchase Order). Lo primero que vamos a hacer es abrir la transaccin Purchase Order y vamos a agregar una regla para recibir por parmetro el nro. de orden de compra. Parm(PurOrdId); Adems, vamos a permitir que el cliente modifique su orden de compra, es decir, que pueda agregar nuevas pelculas, o modificar la cantidad que orden. La modificacin de la cantidad de pelculas ordenadas es inmediata, simplemente cambiando el valor ingresado en el atributo PurOrdQtity. Para poder agregar una nueva pelcula, vamos a tener que agregar un prompt en el grid sobre el atributo MovieId, que invoque al web panel Sale of movies. Haga clic aqu para ver la demostracin Adems, tenemos que modificar el web panel Sale of Movies para poder devolver el cdigo de la pelcula elegida cuando el cliente haga clic sobre la imagen. Esto se logra modificando la propiedad Returnonclick (valor True) de la imagen, y poniendo como parmetro de salida el MovieId. Haga clic aqu para ver la demostracin Se quiere dar al usuario la posibilidad de dar por finalizada la orden, para lo cual agregaremos en la pantalla de la transaccin un botn de "Confirm Order". En el evento asociado, vamos a tener que cambiar el status de la orden a "Finalizada" (invocando al procedimiento ProcofPurchOrder) y llevar en forma automtica al usuario al web panel principal del Sitio (Sale of movies).

Haga clic aqu para ver la demostracin

Observe en la ejecucin de la transaccin Purchase Order, como automticamente el campo fecha de la misma se despliega en forma de un calendario popup:

Las atributos y variables de tipo Date y DateTime que se despliegan en el form de los objetos web (transacciones HTML y webpanels) pueden tener opcionalmente un calendario asociado. El calendario se despliega en forma de una ventana popup, o flat en el form (esto es configurable). Por defecto, se usa un calendario popup. Esta funcionalidad, facilita la visualizacin y la seleccin de una fecha y hora. Por ms informacin referirse a Web control calendar: Datepicker

INTRODUCCIN AL CAPTULO 7

Las aplicaciones Web necesitan un look & feel bastante ms sofisticado que las aplicaciones Winform y los desarrolladores no tenemos las habilidades y el tiempo para lograr un diseo con esas caractersticas.

Por esa razn, por lo general se opta por contratar servicios de diseo. Por lo cual, es necesario luego integrar ese diseo con la aplicacin GeneXus. Esta integracin se logra a travs de los Themes.

Para el diseo grfico contamos con el Editor de Themes, una herramienta de libre distribucin que se puede ejecutar en forma independiente de GeneXus.

Mientras que en versiones anteriores las propiedades de los controles en los html forms (Web Panels y forms html de las transacciones) debian ser configuradas en los controles, hoy mediante los Themes se pueden definir Clases para los diferentes tipos de controles y asignarles propiedades a esas Clases.

Luego, los controles se asocian a esas clases, y stos heredarn las propiedades all configuradas. Por lo tanto ya no es necesario establecer los valores de las propiedades para cada control en el form. Las propiedades de los controles se configuran en un nico lugar: en las clases del Theme.
Cualquier cambio de diseo que se requiera hacer, se realizar en el Theme (sin necesidad de generar/compilar absolutamente nada), de esta forma se logra la uniformidad esttica del sitio con un bajo costo de mantenimiento (no es necesario cambiar cada uno de los objetos), y como consecuencia se obtiene una mayor productividad en el desarrollo de aplicaciones Web.

Recuerde que en el captulo 2 se di una introduccin del objeto Theme e incluso se realizaron algunos ejercicios para comprender su funcionamiento. Veremos a lo largo de este captulo en forma ms completa, las diferentes funcionalidades que brinda este objeto, que se introdujo en la versin 8.0 de GeneXus. El editor de Themes es una herramienta de libre distribucin que se puede ejecutar en forma independiente de GeneXus. Esto es para que la herramienta pueda ser usada por el diseador grfico, y el desarrollo de la aplicacin se independice e incluso se paralelice con su diseo.

Se despliega como una estructura jerrquica de Clases, la siguiente es una imagen del editor de Themes:

Se puede observar que descendiendo en la estructura jerrquica, se presentan un nodo Classes y un nodo HTML tags (parte izquierda). Al centro, tenemos las propiedades correspondientes a cada una de las Clases, y Tags HTML; y a la derecha un preview que es una vista de cmo se visualizar en ejecucin un control asociado a la clase correspondiente. CLASES A partir del nodo Classes se despliega un conjunto de clases predefinidas, correspondientes a controles GeneXus.

Cada clase rene un conjunto de propiedades configurables por el diseador, y constituye un diseo para un tipo de control GeneXus.

Una clase podr ser asignada a un control en tiempo de diseo, y en runtime a travs de la Propiedad Class.

clases predefinidas 1. Attribute 2. Button 3. Error Viewer

4. FreeStyle Grid 5. Grid 6. HyperLink 7. Image 8. Table 9. Textblock 10. Form Nota 1: Existen tambin especficas de botones, correspondientes a aquellos que son generados en forma automtica por GeneXus en Web Transactions y Web Prompts. Cuando se crean dichos objetos los botones se asocian correspondientes. Estas clases son descendientes directas SpecialButtons que es hija de la clase Button: a las clases de la clase

BTnCancel BtnCheck BtnDelete BtnEnter BtnFirst BtnGet BtnHelp BtnLast BtnNext BtnPrevious BtnRefresh BtnSelect

Nota 2:

Las propiedades del Form, que se definen en GeneXus se aplican al BODY del HTML. Esto es porque algunas de esas propiedades no son soportadas por el tag FORM (por ejemplo, el background color). Por la misma razn, la clase Form queda en runtime asociada al tag BODY.

Clases derivadas

Se pueden crear clases derivadas a partir de las clases predefinidas; el proceso de definir una clase significa para el desarrollador asignarle un nombre y configurar las propiedades que le corresponden a esa clase.

Las clases hijas o derivadas quedan implcitamente vinculadas en una relacin de herencia con las clases de las cuales derivan. Como consecuencia de esto, las modificaciones en las clases padre se vern reflejadas en las hijas, con algunas

excepciones. Las modificaciones consisten en cambiar los valores de alguna de las propiedades de la clase.

La parte inferior del editor muestra el nombre de la propiedad, junto con una descripcin de la misma. Adems dir Inherited: True o Inherited: False

segn corresponda.

Si para una propiedad de una clase dice Inherited: True, significa que su valor es un reflejo del valor de la misma propiedad del padre. Es decir, cualquier cambio en la clase padre se traduce en un cambio en la misma propiedad en el hijo.

En cambio, "Inherited: False" implica que un cambio en la propiedad en la clase padre no se reflejar en la clase hija. La herencia en el valor de las propiedades se pierde cuando stas son alteradas en las clases hijas.

Propiedades de un Theme
Las propiedades de un Theme son las siguientes:

FileName: Es el nombre del archivo fsico que corresponde al Theme o al Template.

Name: Nombre lgico del Theme (o Template).

XML Template: Es el XML default con el cual se inicializa el Theme (o Template)

BaseImagePath: Es una propiedad editable nicamente cuando se trabaja con Templates. Si se configura la propiedad Base Image Path del modelo, y al salvar el Theme, si parte del path dado en alguna propiedad de una clase (como ser la propiedad Background) coincide con el indicado en la Base Image Path, la imagen se salva relativa. Esto es porque cuando se trabaja desde dentro de GeneXus el valor de la propiedad coincide con el Base Image Path de la KB. La utilidad de esta funcionalidad es la siguiente: si el usuario que est trabajando en la KB tiene seteada la propiedad Base Image Path (por ejemplo en el directorio: e:\images), pero el diseador grfico (quien usa el editor por fuera de GeneXus) tiene las imgenes en el directorio c:\cliente\imagenes. Si no se setea la propiedad cuando se trabaja con el Template, es decir, se usan caminos absolutos y no relativos, todas las imgenes quedarn apuntando a c:\cliente\imagenes que no existe en la mquina del usuario GeneXus y por lo tanto no se va a visualizar correctamente el Theme cuando se incorpore a la KB (adems del hecho de que el usuario seguramente tuviera que cambiar ese path porque no ser vlido en produccin) Si el diseador configura la propiedad (en el ejemplo, con el valor c:\cliente\imagenes), las imgenes quedarn salvadas en forma relativa, luego el usuario GeneXus debe copiar las imgenes a e:\images para poder visualizar correctamente el Theme al incorporarlo a la KB, sin necesidad de algn otro procedimiento (como sera ir a cambiar uno por uno las imgenes utilizadas en el Theme para que apunten a la imgen correcta). Nota: 1. El valor por defecto de la propiedad Base Image Path es el directorio de la KB. 2. Se crea automticamente un flder CSSDesign bajo el directorio del modelo (dataXXX). En el directorio CSSDesign se guardan los .css generados para usar en GeneXus, con paths absolutos; en el directorio Web se generan los css con paths relativos. Por lo tanto, No es correcto distribuir los .css que se encuentran bajo el directorio CSSDesign.

Panel de propiedades del Editor de Temas

En este panel es posible configurar las propiedades de la clase seleccionada, o del HTML Tag seleccionado, como se visualiza en la figura:

Las propiedades en el Editor de Temas estn clasificadas de la siguiente manera:

1. 2. 3. 4. 5. 6.

Background Properties Box Classification Font Misc Text

Esa es la clasificacin estndar de las propiedades de los CSS (Cascading Style Sheets), con la excepcin del grupo Misc, cuyo propsito es centralizar las propiedades que pueden ser editadas en GeneXus, para el control correspondiente a la clase.

Clase Form
El control Form, se modifica segn la clase Form. Las propiedades bajo el grupo Misc son las que pueden ser editadas en las properties del control Form en diseo, ms algunas propiedades que complementan la funcionalidad de aquellas y se encuentran en el estndar de CSS, que son las siguientes:

BorderColor BorderStyle* BorderWidth Font Height Width

Las siguientes propiedades an no es posible configurarlas en el Theme:

TooltipText Word Wrap Caption

Los colores de los links, se configuran agregando Tags HTML.

Clase Button
Dentro de las propiedades del grupo Misc, se tienen las siguientes propiedades, que si bien pertenecen a ese grupo, no se encuentran dentro de GeneXus para los botones:

Background BorderStyle* Height Width

Adems, se tienen todas las propiedades, fuera del grupo Misc, que como se mencion anteriormente son propias de los CSS.

Clase Attribute
Dentro de las propiedades del grupo Misc, se tienen las siguientes propiedades, que si bien pertenecen a ese grupo, no se encuentran dentro de GeneXus para los atributos/variables:

Background BorderColor BorderStyle* BorderWidth Height Width

Las propiedades de los dems grupos aparte del Misc tienen su definicin correspondiente al pi del Editor de Temas, y pertenecen al estndar de CSS.

Clase Image
La clase Image se puede asignar tanto a controles imagen, como a variables de tipo bitmap.

Las propiedades del grupo Misc, que no se encuentran disponibles en diseo en GeneXus para imgenes son las siguientes:

BackColor BorderColor BorderStyle* Font ForeColor

Las propiedades de los grupos distintos de Misc pertenecen al estndar de CSS.

En particular, el valor de la propiedad Margin del Editor de Themes, se suma al valor de las propiedades Hspace y Vspace de GeneXus (caso de imgenes).

En la documentacin del CSS se muestran que se maneja el siguiente concepto:

Margin Border Padding Content

La hspace y vspace son similares al border, por eso se "suman" cuando se define un margin.

Clase Table
Las propiedades del grupo Misc, que no se encuentran disponibles en diseo en GeneXus para tablas son las siguientes:

BorderStyle* LinesColor LinesFont

Clase Grid
La propiedad que se encuentra en el grupo Misc, y no est en diseo en GeneXus, es: Borderstyle*

Propiedades que estn en diseo en GeneXus, y no estn disponibles en el Editor de Themes:

Backcolorstyle : Debe ser asignada en diseo.

CellPadding, CellSpacing: A nivel del Editor de Themes, no existe la propiedad Cellpadding y Cellspacing, esto es porque no las soporta el CSS. Existe la propiedad Padding, que se compone de BottomPadding, LeftPadding, RigthPadding, TopPadding.

En Internet Explorer a la propiedad Padding, se la interpreta como cellPadding cuando se le pone cellPadding en 0 en diseo, y se ignora si cellPadding es diferente de 0.

Clase FreeStyleGrid

Aplican las mismas observaciones que para la clase Grid.

Clase TextBlock
Las propiedades del grupo Misc, que no se encuentran disponibles en diseo en GeneXus para textblocks son las siguientes:

BackColor Background BorderColor BorderStyle* BorderWidth Height Width Font** ForeColor**

**Las propiedades de Font y ForeColor, si bien no estn disponibles en el dilogo de configuracin de los textblocks en diseo (y s estn en el Tema), en diseo, se pueden configurar seleccionando el textblock y usando la barra de formato de texto de GeneXus.

Clase ErrorViewer
Las propiedades del grupo Misc, que no se encuentran disponibles en diseo en GeneXus para el control ErrorViewer son las siguientes:

Background

 Nota:

BorderColor BorderStyle* BordeWidth Height Width

*La propiedad BorderStyle, en el Tema, tiene una gama de valores ms amplia que en el caso de la misma propiedad en GeneXus. Los valores que la propiedad acepta en el Tema son los que admite la tecnologa CSS y son los siguientes:

None Dotted Dashed Solid Double Groove Ridge Inset outset

Preview del editor de Themes

En la barra vertical derecha del editor, hay un botn Preview mediante el cual se puede mostrar o no, una vista previa de cmo se visualizara un control asociado a dicha clase.

La vista previa del editor se puede personalizar, agregndole Custom Views, que son archivos .HTML. Para eso, agregar una nueva vista a travs del men contextual del nodo Custom Views, o presionando la tecla INS sobre el mismo. Para eliminar una vista personalizada basta con presionar DEL/SUPR.

La vista consiste de varios tabs (HTML browser, HTML Source y CSS). Se puede modificar el source y ver los cambios reflejados en el HTML, pero no se salvan dichos cambios en el documento que est activo.

La siguiente figura muestra un ejemplo en el cual se agreg una vista previa llamada Transaccin.

Nota: Si se tienen diferentes clases form definidas (es decir, distintas clases hijas de la clase predefinida form), el preview para el resto de los controles se ve con un aspecto de fondo correspondiente a la configuracin de aquella clase form que sea la default.

HERENCIA DE LAS PROPIEDADES DE UNA CLASE

En el caso de que una propiedad de una clase est marcada como Inherited:False, es posible revertir la situacin. Haciendo click con botn derecho sobre la propiedad correspondiente, aparece un men Inherit Value. Seleccionando dicha opcin, la propiedad pasar a heredar el valor de la misma propiedad del padre.

La derivacin de clases, y en particular la "herencia" le brinda al usuario facilidades en la tarea de mantenimiento de las Clases y claridad en el diseo. Por ejemplo si se define una clase Bullet derivada de Texblock, con el fin de definir las propiedades de los textos en listas con vietas. Supongamos que ahora se quiere tener otra clase para los textos anidados a aquellos que estan asociados a la clase Bullet, y se desea que tengan las mismas caractersticas que la clase Bullet a excepcin de la indentacin. Llamemos a esa clase SubBullet y cremosla como hija de Bullet. Esta clase solo difiere con su padre en la propiedad TextIndent. Por lo cual, esa es la nica propiedad que no hereda, y la nica propiedad que habindose modificado en el padre no se refleja en la clase SubBullet.

Herencia: aplicacin prctica

Como ejemplo del concepto de herencia en los Temas, edite el Tema default de la KB, y modifique la propiedad BackColor de la clase Button.

Observe que para todas las clases hijas de Special Buttons, que es a su vez hija de Button, la propiedad Backcolor est indicada como inherited:True, por lo cual, las clases hijas heredan esa propiedad del padre.

Vea en la web transaction Customer como todos los botones cambian el Backcolor, siendo que cada uno de ellos est asociado a una clase diferente derivada de Button.

Haga clic aqu para ver la demostracin..

Haga clic aqu para ver cmo se pierde la herencia de las propiedades, al ser modificadas en la clase hija.

HTML TAGS Los HTML Tags complementan la funcionalidad de los Themes, en cuanto a que permiten definir las caractersticas de un Tag HTML, en un determinado contexto. Es decir, siempre que se quiera establecer la configuracin de un determinado Tag dentro de un contexto, se puede hacer mediante el Editor de Themes. Por ejemplo, definir las propiedades de los links dentro de una tabla.

La configuracin de los Tags HTML, dada en el editor, se ve reflejada en la pgina Web si esos Tags estn en el HTML de la pgina, en el mismo contexto con el cual fueron definidos en el editor.

El contexto est determinado por la jerarqua con la cual se definen los Tags.

Para el ejemplo que mencionbamos anteriormente, de definir las propiedades de los links dentro de una tabla, se hara como se muestra en la figura:

Se define un Tag A hijo de un Tag TD.

Es decir, siempre que un tag A se encuentre anidado a un tag TD en el HTML generado, se tomar el forecolor definido en el ejemplo. Otro caso de ejemplo sera definir un tag body y la propiedad ForeColor del mismo, con lo cual el texto libre de la pgina tomar ese color.

Aplicacin prctica: Temas

Cuando se hace una aplicacin Web es necesario que el sitio se vea uniforme. Esto implcitamente requiere de un alto costo de mantenimiento, ya que si por ejemplo hay que cambiar el color de una grilla de azul a celeste, probablemente habra que hacerlo en todas las pginas del sitio para mantener la uniformidad del mismo. Antes, haba que ir por cada uno de los controles de cada objeto. Hoy el cambio se realiza en un solo lado: el Tema.
Todos los objetos basados en el Tema van a reflejar el cambio automticamente. Cuando se salva un Tema con el editor de Temas ejecutado desde dentro de GeneXus, se obtiene un archivo con extensin .CSS (Cascading Style Sheet) en el directorio web del modelo. En tiempo de ejecucin, ese archivo .CSS (que contiene la definicin de las clases) es referenciado en el Header de las pginas generadas, y se transfiere al pc del cliente para almacenarse en su cach. Por lo cual, siempre que realicemos un cambio en el Tema asociado a un objeto, basta con llevar el archivo .CSS a produccin, para que el usuario final perciba los cambios estticos realizados (no es necesario generar ni compilar!!) Veamos un ejemplo con la aplicacin del curso. Observe que los objetos de la Kb del curso estn asociados al Tema Default (a travs de la propiedad Theme del objeto), y los controles de cada uno de los objetos estn asociados a la clase default correspondiente (propiedad Class de los controles). Realizaremos algunos cambios a las clases de Tema Default y veremos como se reflejan los cambios en ejecucin. Note que en nuestro caso, el directorio de produccin coincide con el directorio web del modelo, por lo cual no es necesario copiar el .CSS a ningn lado. Haga clic aqu para ver la demostracin.

Crear un nuevo Tema

Se puede crear un Tema de dos maneras: 1. Desde el Editor de Temas 2. Desde el men de GeneXus. Para crear un nuevo Theme desde dentro de GeneXus, se debe ir a la opcin Object > New Object > Theme. Un nuevo Theme consiste de los siguientes elementos:

Un nombre (nombre del nodo raz) Un conjunto de elementos predefinidos, correspondientes a las clases, dentro del

folder Classes. Un folder HTML tags inicialmente vaco.

Como ejercicio, crearemos un nuevo Tema de nombre Movie. En ese Tema vamos a definir una clase BtnLogin para la cual definiremos algunas propiedades. En particular, vamos a asignarle una imagen a la propiedad Background de la clase.

Observe que la propiedad Base Image Path del Tema coincide con la misma propiedad del modelo de diseo. Entonces, dado que vamos a usar una imagen que se encuentra bajo el Base Image Path, el path de la propiedad Background del Tema quedar relativo.

Al Tema Movie lo vamos a asociar al web panel Login. Debemos cambiar la clase del botn Login para que sea BtnLogin.

Haga clic aqu para ver la demostracin.

Observe que en este caso si es necesario generar/compilar antes de ejecutar, ya que cambiamos una property del objeto y una property del control.

Uso del Editor de Themes

El editor se puede ejecutar desde GeneXus y como un programa independiente.

Dentro de la KB es posible salvar los Themes como archivos con extensin .CSS (objeto theme de la KB). Asimismo, dentro y fuera de GeneXus, el editor permite trabajar con archivos con extensin XML. Esta ltima funcionalidad (trabajar con archivos XML) es la que permite la integracin entre el editor como aplicacin independiente y como tool de GeneXus. Nomenclatura: Llamaremos Template a los archivos XML que tienen el formato de Themes, pero no son objetos GeneXus Theme. Cuando el Editor es ejecutado en forma independiente de GeneXus, siempre se trabaja con Templates. Entonces, un usuario podr disear un sitio utilizando el editor de Themes independientemente de GeneXus; el producto de su trabajo sern archivos .XML

que otro usuario (posiblemente quien desarrolle la aplicacin) podr integrar a la KB, y salvar como objetos GeneXus Theme (archivos .CSS). Por otro lado, tambin se podr desde la KB salvar un Theme con extensin .XML de manera de poder editarlo y modificarlo por fuera de GeneXus. Con esto se logra independizar el trabajo de diseo de las pginas, del desarrollo de la aplicacin. Dado un diseo en formato XML (un Template creado con el Editor por fuera de GeneXus), se puede incorporarlo a la KB rpidamente siguiendo los siguientes pasos: 1. Abrir el Template usando el Editor desde dentro de GeneXus (opcin File > Open Template) 2. Salvar el Template como un Theme (opcin File -> save as)

Opciones del Editor para el manejo de Themes y Templates

OPCIN SAVE AS Cuando el Editor es ejecutado desde dentro de GeneXus, mediante la opcin del men : File -> Save As se puede:

1. 2. 3. 4.

Salvar un Template como un objeto GeneXus Theme Salvar un Template como otro Template Salvar un Theme como otro Theme Salvar un Theme como un Template

Si se tiene el check GeneXus habilitado, se salva como un objeto Theme.

De lo contrario (si el checkbox est deshabilitado), se habilita la opcin File Name, para ingresar el nombre que se le dar al archivo XML generado.

Si el Editor se ejecuta por fuera de GeneXus la nica opcin del save as es guardar un Template como otro Template.

OPTIONS -> CUSTOMIZE -> TEMPLATES

En el Men Options -> Customize del Editor de Themes se presenta el siguiente dilogo:

Mediante este dilogo se incorporan archivos XML al Editor, y se determina uno de ellos como Default Template. El default Template se usa para: 1. Inicializar el Theme que se crea automticamente cada vez que se crea una nueva KB. 2. Para inicializar un Theme si se crea desde el men de GeneXus (Object -> New Theme).

Los templates Custom se graban en el registry de la mquina, y por lo general solo va a ser necesario incorporar aquellos que se sepa que se van a usar habitualmente como base para crear Themes.

FILE -> NEW THEME

Es posible crear un objeto GeneXus Theme desde dentro del Editor de Themes, cuando ste es ejecutado dentro de GeneXus. Mediante el siguiente dilogo (men File->New del Editor) se puede crear un nuevo Theme en base a alguno de los Templates (incorporados mediante el dilogo Options->Customize Templates.)

Por defecto el nuevo objeto se basar en el Template default. Mediante el combo box Based On se puede seleccionar un Template con el cual se inicializar el nuevo Theme creado (los Templates de esta lista son los incorporados mediante el dilogo Options->Customize Templates) Notas: 1. Se puede optar por crear un XML o un objeto Theme GeneXus. Si el check GeneXus est seleccionado, se crear un objeto Theme, de lo contrario, se crea un Template. 2. GeneXus distribuye cinco templates (archivos con extensin .XML) que podrn ser usados opcionalmente como default. Estos quedan en el folder THEMES de la instalacin de GeneXus.

Los Templates que son incluidos con la versin son los siguientes:

Beach.xml Classic.xml Executive.xml Extreme.xml Fancy.xml Light.xml PinkPanther.xml

Los cuatro primeros son serios y siguen las recomendaciones de "buen uso" del diseo en internet, el resto son divertidos y radicales. OPTIONS -> CUSTOMIZE -> EDITORS
Mediante el men del editor Options->Customize-> seleccionar el tipo de dilogo para los colores. Esta configuracin se guarda por usuario. Las opciones son: 1. Default 2. Designer Si se usa el dilogo "Designer", y se definen Custom Colors (botn Add to Custom Colors), estos valores son almacenados con el Theme. Editors es posible

De esta forma si se define un conjunto de colores bsicos para el Theme, estarn disponibles cada vez que se quiera editar. Por ejemplo: si se crea un Theme Gold (toda una combinacin de amarillos y naranjas), en los custom colors quedan los colores definidos como custom.

El editor como aplicacin independiente

Usando el editor desde fuera de GeneXus, se pueden salvar los Themes en archivos con extensin XML.

Se puede llamar al editor desde fuera de GeneXus, haciendo doble click en el GXThemeEditor.exe o desde lnea de comandos pasndole como parmetro opcionalmente un archivo con extensin .XML. De forma de distinguir cuando se edita un Template de cuando se edita un Theme, la interfaz del Editor cambia en algunos aspectos: 1. El ttulo de la ventana indica que es un Template 2. El color de fondo del Treeview es gris y no blanco como en el caso de cuando se edita un Theme GeneXus.

Creacin de un objeto Theme por defecto cuando se efecta la creacin de una kb en GeneXus

Cuando se crea una nueva base de conocimiento en GeneXus, se crea un objeto Theme por defecto.

Para la inicializacin de este objeto se utiliza el Theme definido como Default en el editor (Default Template ver seccin Uso del editor). En particular, se utiliza aquel Theme definido en el registry de la mquina: HKEY_LOCAL_MACHINE\Software\Artech\GxTheme Editor\1.0\ThemeTemplates\DefaultTheme.
Al ejecutar el setup de distribucin de GeneXus queda grabado el registry con un Theme default.

Interaccin diseador desarrollador de la aplicacin Web

Debido a las exigencias de un buen diseo esttico del sitio, por lo general es necesario contratar el servicio de un diseador grfico. De ah es que surge la necesidad de una buena interaccin entre el diseador y quien programa la aplicacin, e incluso el hecho de paralelizar ambas tareas. Veremos en un ejemplo prctico, como a travs del Editor de Temas, se logra independizar el diseo de las pginas, del desarrollo de la funcionalidad de la aplicacin.

El diseador grfico (sin tener GeneXus instalado en su mquina), se instalar el Editor de Temas a travs de un setup de nombre GXThemeEditor.exe Al ejecutar el setup, aparece la siguiente ventana:

Los nicos requerimientos para instalar el Editor de Temas en un pc son: .NET Framework 1.1 Redistributable Package

 Internet Explorer 6.0 SP 1 o superior

Vamos a crear un Template ejecutando el editor en forma independiente a GeneXus, y luego integraremos ese Template a la KB del curso, para crear un Tema y asociarlo al modelo de la aplicacin que estamos desarrollando.

Lo primero, es ejecutar el GXThemeEditor.exe. Una opcin es ejecutarlo desde la instalacin de GeneXus, la otra posibilidad es instalarlo en un directorio aparte corriendo el setup del Editor de Temas.

Una vez abierto el Editor de Temas como aplicacin independiente a GeneXus, disearemos un Template y lo salvaremos en algn directorio (es un archivo con extensin XML).

Haga clic aqu para ver como creamos el template por fuera de GeneXus.

Una vez salvado el Template en algn directorio, vamos a ejecutar esta vez el Editor de Temas desde dentro de la aplicacin GeneXus (mediante la opcin Tools->GX Theme Editor) Para editar el Template anteriormente creado, ir al men del Editor de Temas File -> Open Template y seleccionar el Template del directorio donde lo hemos guardado (con extensin XML).

Para salvarlo como un Theme de la KB, ir al men File -> Save As, y estando chequeada la opcin GeneXus del dilogo, salvarlo con el nombre Movie2.

Una vez que es un Theme de la KB, lo podemos asociar a la propiedad Theme del modelo.

Haga clic aqu para ver como integramos el template anteriormente creado, al modelo del curso.

INTRODUCCION AL CAPITULO 8
Una pregunta muy importante a la hora de desarrollar una aplicacin para Internet, es la siguiente:

Es segura nuestra aplicacin en Internet? Como la seguridad es un concepto muy amplio, la respuesta a esta pregunta no es sencilla. Sin embargo, dependiendo del tipo de aplicacin que se est desarrollando, este punto puede ser crucial. Se puede decir que al publicar una aplicacin en Internet, se tienen 3 niveles distintos de seguridad:

SEGURIDAD A NIVEL DEL SERVIDOR WEB. SEGURIDAD A NIVEL DE LA BASE DE DATOS. SEGURIDAD A NIVEL DE LA APLICACIN.

A lo largo de este captulo se va a desarrollar cada uno de los puntos mencionados anteriormente...

SEGURIDAD A NIVEL DEL SERVIDOR WEB

Cuando se habla de la seguridad a nivel del servidor web, se estn enfrentando bsicamente los siguientes riesgos:

Intercepcin de informacin enviada a travs de la red desde el navegador al servidor o viceversa. Errores o problemas de configuracin del servidor web, que permitan a usuarios no autorizados: o acceder a informacin confidencial que se encuentra en el servidor, o ejecutar comandos que afecten el comportamiento del servidor y les permita ingresar al sistema.

Intercepcin de informacin
El protocolo TCP/IP no fue diseado para ofrecer servicios de comunicacin seguros. En consecuencia, la informacin enviada desde el navegador al servidor web o viceversa puede ser interceptada por alguien. Es por esta razn que se debe agregar tecnologa adicional para resolver problemas de seguridad.

Desde siempre, existe una nica tecnologa que provee los principios para resolver estos problemas: CRIPTOGRAFIA.

Existen servidores web, que pueden trabajar como servidores seguros. Un servidor seguro es un servidor web, al cual se le habilit la posibilidad de encriptar los datos que se envan al navegador, as como desencriptar la informacin recibida del mismo.

El standard ms conocido de autenticacin y encriptacin de datos para el Web es el SSL. Este standard fue propuesto por Netscape Communications Corporation y es el que soportan la mayora de los navegadores (Internet Explorer, Netscape).

Para habilitar la encriptacin de datos se necesita obtener un certificado de una autoridad certificadora (por Ej.: Verisign, El Correo (en Uruguay)), este certificado es instalado en el servidor web, quedando habilitada la encriptacin de datos. Finalmente, para activar la encriptacin de los datos a transferir, todo lo que el usuario debe hacer es realizar la solicitud del recurso a travs del protocolo HTTPS: en lugar de HTTP.

La seguridad ofrecida por el servidor web, depende en parte tambin del largo del certificado soportado. Cuanto ms largo sea el mismo ms segura es la comunicacin de los datos. Hay que destacar que los servidores seguros protegen nicamente la informacin confidencial de ser interceptada por terceros, pero sin seguridad a nivel del sistema el servidor web sigue siendo vulnerable a ataques.

La property Protocol Specification aplica a la generacin automtica de links entre webpanels, y el objetivo es identificar el protocolo default a usar cuando se construyen los links (HTTP, HTTPS.)

Acceso de usuarios no autorizados

La mayor parte de los riesgos que se presentan al tener un servidor web pblico son asumidos por el administrador del sitio. Desde el momento que se instala un servidor web en un sitio, se abre para la comunidad Internet una ventana a la red de rea local. La mayor parte de los usuarios nicamente visitan el sitio, otros, sin embargo intentarn entrar por la ventana abierta. Los resultados pueden ser variados, desde el simple descubrimiento que la pgina principal del sitio web fue cambiada, hasta el robo de la base de datos que contiene la informacin de sus clientes.

Es entonces importante que el administrador del sistema defina polticas de seguridad, as como tome las medidas necesarias para evitar el acceso de usuarios no deseados. Estas

medidas pueden ser a nivel del sistema operativo (restringir las operaciones que se pueden realizar, limitar los permisos sobre documentos y directorios, deshabilitar servicios no utilizados, etc.), como a nivel del servidor (aislamiento de la red, instalacin de firewall).

Existe abundante documentacin sobre el tema, que es recomendable leer, para saber que pasos debera seguir al publicar documentos, o aplicaciones en su sitio web.

Bibliografa:
Verisign: http://www.verisign.com/products/site/faq/40-bit.html#6

El correo: http://www.correo.com.uy/CorreoCert/sitio_seguro.htm

Microsoft: Internet Information Services (IIS) 6.0 security overview http://www.microsoft.com/resources/documentation/WindowsServ/200 3/enterprise/proddocs/enus/Default.asp?url=/resources/documentation/WindowsServ/2003/ent erprise/proddocs/en-us/iis_security.asp

Hardening Systems and Servers: Checklists and Guides http://www.microsoft.com/technet/security/topics/hardsys/default .mspx#XSLTfullModule122121120120

Apache Web Server: Securing Apache: Step-by-Step http://www.securityfocus.com/infocus/1694

SEGURIDAD A NIVEL DE LA BASE DE DATOS

La seguridad a nivel de la base de datos es tambin un punto sensible a la hora de publicar una aplicacin en Internet. Es de fundamental importancia evitar que usuarios no autorizados puedan acceder a los datos corporativos, as como que un usuario autorizado realice operaciones que le deberan estar negadas.

Desde el punto de vista de la configuracin del modelo de GENEXUS, no se deben realizar configuraciones especficas para mejorar la seguridad de la base de datos.

SEGURIDAD A NIVEL DE LA APLICACION

A nivel de la aplicacin, la seguridad depende del tipo de aplicacin que se est desarrollando. La implementacin de controles de seguridad, es importante en aplicaciones en las cuales los usuarios acceden a informacin confidencial, como por ejemplo sus datos personales. La razn por la cual son necesarios dichos controles, es que los parmetros que se pasan entre objetos web (y entre pginas dinmicas en general) viajan visibles al usuario, como por ejemplo:

http://www.artech.com.uy/cgibin/hmyapp.exe?1,NOMBRE.

Por lo tanto, por ms que se disponga de una pgina de login, donde se valida el usuario y su contrasea para ingresar al sistema, el usuario eventualmente podra saltearse la misma, ingresando en el navegador la URL de la siguiente pgina con un cdigo de usuario vlido.

Para evitar que se burle el control de acceso y permitir que se acceda a informacin confidencial, es que se debe agregar algn tipo de control adicional de seguridad. A continuacin, se van a discutir diferentes posibilidades que se encuentran disponibles.

MANEJO DE SESIONES
Una de las posibles alternativas para solucionar el problema de seguridad mencionado anteriormente, es el uso de sesiones.
El uso de sesiones se compone de una transaccin (SECURITY) que almacena el usuario logueado, un nmero randmico de sesin y la fecha y hora del comienzo de la misma. Mediante este nmero de sesin se controla que un usuario no pueda acceder a los datos de otro usuario.

Cada vez que el usuario ingresa a una pgina del sistema, se chequea el nmero de usuario y el nmero de sesin. Si estos no se corresponden con los datos almacenados en la tabla SECURITY, se muestra una pantalla indicando el error y se vuelve al usuario a la pgina donde se pide login y password nuevamente. Este nmero de sesin es vlido por un tiempo determinado que se configura en el procedimiento. Si el usuario est logueado por ms de dicha cantidad de tiempo, se muestra la misma pantalla de error. A continuacin se presenta un ejemplo del funcionamiento de las sesiones. La pgina principal de la aplicacin es Login, donde se controla la validez del usuario y su contrasea.

La primera vez que un usuario ingresa al sitio debe registrarse al mismo, creando un nuevo usuario (navegando a travs del link Click here to complete a brief registration form, el cual lo lleva a la transaccin Customer). De esa forma se da de alta el cliente, y se crea un registro en la tabla SECURITY con el identificador del cliente, el nmero randmico de sesin, la fecha y hora de la registracin.

Luego se llama a la pgina donde se muestra la informacin a la cual nicamente los clientes registrados pueden acceder, en este caso, ingresar productos al carrito de compras e ingresar a la transaccin de orden de compra PurchaseOrder para modificar detalles de la compra y confirmar la misma.

En el evento Start de la transaccin PurchaseOrder, se llama al procedimiento Checksesion. Este procedimiento verifica que el nmero de sesin del cliente recibido se corresponda con el que se encuentra almacenado, as como su validez. Si alguna de las condiciones anteriores no

se cumple, se llama a una pgina de error, donde se explica al cliente la causa del mismo. Hay que darse cuenta que en ese caso nunca llegara a visualizarse la pgina PurchaseOrder.

Login

Customer

Purchase Order

InsertSec

CheckSession

El otro caso que queda por analizar, es cuando el cliente ya est registrado. En este caso en el evento que valida el usuario se realiza una llamada al procedimiento GenSesNum que actualiza en la tabla SECURITY el nmero de sesin asignado al usuario, as como la fecha y hora de generacin del mismo. Igualmente que en el caso anterior, en la transaccin PurchaseOrder se invoca al procedimiento CheckSession para validar la sesin.

Login

Purchase Order

GenSesNum

CheckSession

FUNCIONES DE COOKIES
Introduccin
El objetivo es proveer funciones que permitan leer y grabar cookies desde objetos web generados por GeneXus.

Que son las cookies?

Las Cookies son archivos pequeos que se graban desde un web site en las mquinas de los clientes. Los programas CGI o cualquier aplicacin que corre en un servidor, puede leer o grabar las cookies en el cliente.

El uso ms comn de las cookies es la identificacin de usuarios. Cuando un usuario se registra en un web site (Portal o E-Store), el sitio graba una cookie en la mquina del cliente con la identificacin del cliente. De este modo la prxima vez que el cliente visite este sitio, intenta leer la cookie y si la misma existe usa el valor de la cookie para identificar el usuario y recuperar sus preferencias desde una base de datos.

Tambin existen otros usos de las cookies, como rotacin de contenido (especialmente avisos), mantener estado de una aplicacin, etc. Incluso se pueden usar como mtodo de almacenar el carrito de compras de modo que la informacin del mismo quede en la mquina cliente y se mantiene entre conexiones.

Como se menciona anteriormente, generalmente se usa una cookie para identificar el usuario (en algunos casos, una para la sesin, en otros para el usuario), aunque se podran poner todos los valores de las preferencias en cookies. Lo ideal es tener una clave que viaje y con esta clave leer la informacin del usuario. De este modo la informacin del usuario no viaja hacia el cliente, ni est en la URL. (Ej. tarjetas de crdito, nombre, direccin) simplemente permanece en el servidor.

Hay que tener en cuenta que existe un lmite en cuanto a la cantidad de cookies que el cliente puede aceptar. El mximo son 300 cookies en total por cliente (para todos los servidores juntos por cada browser/cliente) y 20 cookies por server o dominio lo cual quiere decir que si una aplicacin graba ms de 20 cookies las ltimas van a borrar los valores de las primeras.

Adems existe un lmite de tamao de 4K por cookie, si una cookie supera ese lmite es truncada.

El usuario puede preferir no grabar la cookie permanentemente (por ej. si est accediendo desde una mquina pblica como podra ser un cybercafe) o incluso puede deshabilitar el uso de cookies, por lo cual esta no debe ser la nica manera de identificar al usuario, sino que se debe poder usar un mtodo alternativo en caso de que el browser no soporte o no tenga habilitado el manejo de cookies.

Otra particularidad es que el lugar donde se almacenan las cookies (al menos en Windows) depende del browser, por lo que si un usuario tiene ms de un browser, cada uno tendr un conjunto independiente de cookies.

El ciclo de vida de una cookie es como sigue:

1. El usuario se conecta a un servidor que por alguna razn quiere grabar una cookie. 2. En la respuesta (HTML Headers), se indica el nombre y valor de la cookie a grabar, as como otros valores (el ms relevante es la fecha de expiracin). 3. El browser recibe la respuesta y, si el valor de la fecha de expiracin es en el futuro, la graba; en caso contrario busca una con ese nombre y la borra. 4. Cada vez que el usuario se conecte a una URL de este dominio el browser enviar al server las cookies que se hayan grabado desde el dominio y no hayan expirado. 5. Una vez pasada la fecha de expiracin, las cookies se borran.

Para obtener ms informacin tcnica sobre cookies y su uso : http://www.cookiecentral.com

Descripcin
Se dispone de las siguientes funciones, las que pueden ser utilizadas en cualquier objeto GeneXus, el resultado tiene sentido nicamente si dicho objeto fue llamado en forma directa o indirecta por un objeto web o est ejecutando en un ambiente Web.

GetCookie
Permite leer una cookie, devolviendo un string con el valor. Si no encuentra la cookie (o no la puede leer por estar deshabilitada) devuelve el string vaco.

La sintaxis es:

&var_char = GetCookie(NombreCookie)

NombreCookie carcter &var_char carcter

SetCookie

Permite grabar una cookie. Devuelve 0 (cero) si el resultado es correcto, valor si hubo algn error.

otro

La sintaxis es:

&var_num = SetCookie(NombreCookie, Valor, [path], [exp-date], [domain-name], [secure])

Los parmetros entre parntesis rectos son opcionales. Si alguno de los parmetros va nulo se asume el default.

&var_num variable numrica.

NombreCookie -Carcter Nombre de la cookie

Valor - Carcter Valor a almacenar

path - Carcter Camino que indica para qu web panels la cookie es vlida. Si no se especifica, la cookie es vlida para los web panels que estn en el mismo directorio que el que la grab, o en directorios subordinados. Si se indica / la cookie ser vlida para todo el dominio.

Exp-date - Date/Datetime Indica la fecha de expiracin de la cookie. Si no se especifica, la misma expirar cuando se cierre la sesin en el browser.

Domain-name - Carcter Dominio donde es vlida la cookie. Por default es el dominio desde donde se cre.

Secure - Numrico Si est en 1 la cookie se trasmite solamente si la conexin es segura (HTTPS). Si est en 0 se trasmite siempre.

NOTA: Si se activa el trace para el generador C/SQL, y se pone TraceLevel=4 o mayor se ver en el trace todas las Cookies que llegan al programa. Se imprimen una por cada lnea precedidos por la palabra Cookie.

Observaciones
Las funciones mencionadas anteriormente siempre devuelven 0. La nica forma de detectar si una cookie fue almacenada es leerla. En consecuencia no se puede obtener la configuracin del navegador.

Ejemplos
Algunos ejemplos sencillos sobre cmo grabar una cookie son:

&Op= SetCookie(ID_USER, Str(UsrId), /, CTOD(01/01/2002) )

Aqu se est grabando una cookie -vlida para todo el dominio- de nombre ID_USER con el valor correspondiente al atributo UsrId y que expirar el 1 de Enero de 2002.

&OK= SetCookie(SESSION_ID_GX, &StrSession, , Nullvalue(&Fecha) )

Aqu se est grabando una cookie -vlida para los web panels de la misma aplicacin -de nombre SESSION_ID_GX- con el valor correspondiente a la variable &Strsession. La cookie expirar al cerrar la sesin del browser.

&Op= SetCookie(USR_PAIS, otrodom.artech.com.uy, 1)

UY,

/,

ADDYR(&Today,

1),

Aqu se est grabando una cookie -vlida para todo el dominio otrodom- de nombre USER_PAIS con el valor UY y que expirar exactamente dentro de un ao.

TIPO DE DATOS WEBSESSION

Introduccin
WebSession es un nuevo tipo de datos de GeneXus que permite almacenar datos en una sesin de usuario del servidor Web. De esta manera se pueden tener variables globales, accesibles mientras la sesin est activa.

Alcance
- Objetos: Transacciones, Web Panel, Procedimientos - Lenguajes: Java - Visual Basic - C# - Interfaces: Web

Descripcin
Los servidores Web permiten manejar el concepto de sesin. Una sesin se identifica por una clave nica, que se mantiene mientras el usuario contine en el sitio Web. El objeto WebSession permite almacenar informacin que ser visible desde cualquier objeto Web dentro de la sesin activa como si fueran variables globales al sitio.

Para utilizar el objeto WebSession, se debe definir una variable de este mismo tipo y aplicarles los mtodos y propiedades adecuados.

Propiedades:
Id

Esta propiedad retorna un String que es el identificador de la sesin. Por ejemplo: &Iden = &Session.Id

Metodos:
Set(key, value)

Permite hacer una entrada en la sesin activa. Key y value deben ser del tipo String. Por ejemplo &Session.set(user, &User) Get(key) Retorna un String correspondiente a la entrada key de la sesiones. En caso de que la clave no exista retorna el String nulo. Por ejemplo: &User = &session.get(user) Remove(key) Permite remover un valor de una sesin. Por ejemplo: &Session.remove(user) Destroy() Detruye el contenido de la sesin. Es recomendable utilizarlo cuando el usuario hace un logout, si es que existe este concepto en la misma. Por ejemplo: &Session.destroy()

Consideraciones Generales

El ID de la sesin se guarda en una cookie en el cliente, aunque esto es transparente para el programador. La validez de la Websession es similar a la validez de las cookies que solo valen por la sesin. Esto quiere decir que si se abre una instancia nueva del browser, se pierde la sesin, pero si abro en una ventana nueva se mantiene. Los datos y el ID de una sesin son diferentes para cada generador. Esto implica que no puedo hacer un link de un Web Panel VB a un Web Panel Java y mantener los valores de la sesin Si no se ejecuta el 'destroy()', el servidor Web destruye la sesin cuando ha pasado un determinado tiempo desde la ltima vez que se utiliz. Esto depende del servidor Web/plataforma, y se configura de forma nativa en cada una. La forma en que se almacena la informacin de sesin tambin depende de la plataforma, y condiciona la capacidad de tener la aplicacin en mas de un servidor Web. Bsicamente, si la sesin se almacena de forma local al servidor Web, solo es visible en ese servidor Web, por lo que si el siguiente request del cliente va a parar a otro servidor Web, no va a tener disponible los valores de sesin.

Consideraciones especficas para el Generador Visual Basic

En VB el destroy() limpia los valores almacenados en la sesin, pero si inmediatamente se pide ID de la sesin devuelve el mismo ID. Java devuelven un nuevo ID.

Ejemplos
Supongamos un sistema Web donde el usuario debe autentificarse por medio de un usuario y una password que estn previamente grabadas en la base de datos. Entonces podemos definir en el Web Panel de Inicio una variable tipo WebSession (&Session) y las variables de entrada &User y &Password. En el evento Enter del Web Panel definir For each Where UsrNom = &User Where UsrPsw = &Password &Session.Set(Name, UsrNombre) Call (HWelcome) When none Return //Usuario no valido endfor De esta manera validamos el usuario con la base de datos y en caso de los valores correspondan guardamos el nombre del usuario en la sesin y vamos a un Web Panel de bienvenida (HWelcome) . Luego en el Web Panel Welcome definir en el evento Start: &UsrNombre = &session.Get(Name) If Trim(&UsrNombre)= Return ///Sesin no valida Else TX.Caption = Bienvenido + &UsrNombre + a nuestro sitio! Endif De esta manera, obtenemos el nombre del usuario desde la sesin y escribimos un mensaje de bienvenida en pantalla.

ENCRIPTACION DE PARAMETROS
Introduccin
Los objetos Web generados con GeneXus, permiten visualizar los parmetros que se pasan entre los objetos en la barra de direccin del navegador.

Esto hace que, si se pasa informacin reservada como parmetro entre objetos Web (Nmero de cliente, por ejemplo), las aplicaciones no sean muy confiables en cuanto a la seguridad, porque un usuario podra simplemente cambiar el valor de dicho parmetro en la URL y disponer de informacin sobre la que no debera tener acceso. No sucede lo mismo si se utilizan cookies, en este caso no hay problemas de seguridad.

Es por eso que se hace necesario pasar los parmetros sin que el usuario de la aplicacin los conozca o sea encriptar los parmetros. En la versin 7.5 de GeneXus se implementa la encriptacin de los parmetros de los objetos Web que van en la URL en forma automtica y transparente para el usuario.

Alcance
Objetos: Web Panels, Transacciones Lenguajes: C/SQL, Java, Visual Basic, .Net Interface: Web

Descripcin
Para poder realizar la encriptacin de parmetros en objetos Web se implementaron funciones estndar que contienen las funciones bsicas de encriptacin y algunas funciones adicionales (las que requieren manejo de parmetros y cookies).

Con respecto al diseo de los objetos la encriptacin de parmetros no implica ningn cambio, se programan de la misma forma que hasta el momento. Las ventajas del uso de la encriptacin de parmetros son: Que los usuarios finales no sepan el o los datos que van en los parmetros Que los usuarios finales no puedan modificar el o los datos que van en los parmetros

Se agrega la preferencia Encrypt URL Parameters a nivel de modelo, en el grupo Web Information y tambin a nivel de objeto.

Para la preferencia a nivel de modelo los valores posibles son: No Indica que No se van a encriptar los parmetros que van en la URL de los objetos Web, siendo ste el valor por defecto.

Session Key Indica que se van a encriptar los parmetros que van en la URL, utilizando una clave diferente para cada sesin. La encriptacin se realiza a travs del uso de cookies locales. Este valor ofrece un nivel de seguridad mayor, pero no permite compartir URLs. Esto significa que no es posible para un usuario X enviar una URL que tenga parmetros a otro usuario Y, ya que en este caso la URL no va a funcionar porque se necesita la cookie correspondiente para la desencriptacin.

Site Key Se encriptan los parmetros que van en la URL de los objetos Web, pero la clave de encriptacin va a ser la misma para todo el sitio. En este caso no se utilizan cookies. Esto da un nivel de seguridad menor pero facilita el traspaso de links.

La propiedad a nivel de objeto, adems de los valores mencionados tiene el valor Use models preference value. Este valor indica que se va a tomar el valor de la preferencia del modelo para realizar la encriptacin de ese objeto. Este es el valor por defecto.

Consideraciones Generales
Sesiones del Navegador
Una sesin del navegador queda determinada por una instancia del mismo. Por ejemplo, si en un mquina se ejecuta el navegador de Internet y a partir de ese navegador se abre otra sesin (a partir de la opcin de men File/New/Window o a partir de un link), ambas sesiones pertenecen a la misma instancia del navegador.

En cambio, si se abre una sesin del navegador, y luego se ejecuta nuevamente el exe del navegador para abrir una nueva ventana, las dos ventanas no pertencen a la misma instancia.

Con esto, si se ejecutan objetos Web, y se configur la preferencia del modelo (o la propiedad a nivel de objeto) con el valor Session Key, la cookie que se defina para guardar este valor va a funcionar en las sesiones del navegador que compartan la misma instancia.

Preferencia a nivel de modelo vs. Propiedad a nivel de objeto

Los valores Session Key y Site Key a nivel de la preferencia del modelo, determinan que todos los llamados entre objetos Web se harn con parmetros encriptados. Para tener unicamente las llamadas entre algunos objetos con parmetros encriptados se debe indicar el valor No en la preferencia a nivel de modelo y el valor Session Key o Site Key en el objeto Web que lo requiera. Si se tienen valores configurados para la preferencia a nivel de modelo y la propiedad a nivel de objeto para encriptar parmetros, sta ltima tiene prioridad sobre la primera.

Cuando se utiliza la propiedad a nivel de objeto para encriptar parmetros, y se realizan varios llamados entre objetos Web, se debe tener en cuenta que los valores utilizados por todos lo objetos involucrados debe ser el mismo. Por ejemplo: Si se tiene un Web Panel que llama a otro pasndole parmetros, y se quieren visualizar estos parmetros encriptados, en ambos Web Panels se debe configurar el mismo valor para la propiedad Encrypt URL Parameters. Lo mismo sucede si el arbol de llamadas involucra a ms objetos Web, todos (los llamados y los llamadores) deben tener configurada la propiedad Encrypt URL Parameters y todos deben tener el mismo valor en la propiedad.

Propiedad Encrypt URL Parameters en Prompts

Los parmetros de los prompts asociados a las Transacciones Web no es posible encriptarlos. Esto es porque el llamado a los prompts se realiza desde el cliente y para realizar la encriptacin se debe ir al servidor.

Ejemplos
Si se tiene un Web Panel que recibe parmetros y no se utiliza la encriptacin de parmetros, la URL correspondiente al Web Panel ser del estilo:

http://localhost/HINGRESO_WebObj/hdospar.asp?2,3

Si, en cambio se utiliza encriptacin de parmetros (preferencia Encrypt URL Parameters = Session Key Site Key), la misma URL se generar de la siguiente forma:

http://localhost/HINGRESO_WebObj/hdospar.asp?lQ/tK1lefxCZMVoXrnmrTQ==

COMPARACION DE ALTERNATIVAS DE SEGURIDAD EN LA APLICACIN

A continuacin se realiza una comparacin entre las soluciones disponibles para agregar seguridad a una aplicacin web.

Cookies
Ventajas:
No es necesario el pasaje de parmetros entre Web Panels, ya que los valores se graban en la cookie. Si las cookies no son temporales, se puede saber si el usuario ya accedi anteriormente a la aplicacin.

Desventajas:
Tienen limitaciones en cuanto al tamao mximo, cantidad de cookies que se pueden grabar. Se tiene dependencia de la configuracin del navegador.

Manejo de sesiones
Ventajas
Es independiente de la configuracin del navegador del PC del cliente.

Desventajas
Mayor complejidad de programacin Prdida de informacin: si el usuario pasa a una pgina esttica, y luego vuelve a ingresar la URL en el navegador, debe volver a loguearse.

Tipo de datos Web Session

Ventajas
Presenta las mismas ventajas que el uso de cookies.

Desventajas
Depende de la configuracin del navegador. No permite compartir datos si los objetos son generados en diferentes lenguajes. Por el momento no es soportado por C/SQL. No es posible compartir la informacin de sesin entre diferentes servidores, ya que es local al webserver. La destruccin de los datos depende del browser utilizado.

Encriptacin de la URL
Ventajas
No se requiere programacin alguna, simplemente se modifica el valor de una preferencia.

Desventajas
El tamao de la URL aumenta al ser encriptada, por lo tanto si el pasaje de parmetros es importante, se puede llegar al mximo aceptado por el browser. Requieren del uso de cookies en el caso de Session Key.

Lo que nos quedara por implementar en el web panel de Movie Details es el evento asociado al botn Add to Cart
Como hemos visto hasta el momento, si bien el web panel Sale of Movies permite loguearnos al sistema, recin cuando el usuario desea realizar alguna compra (en el botn de "Add to cart" en el web panel Movie Details) se exige que el usuario ya se haya identificado y que sea por supuesto un usuario vlido. En caso de ser un usuario registrado y haberse identificado, se genera la orden de compra correspondiente (invocando a los procedimientos "AddHead" y "AddLine" segn corresponda), pero en caso contrario se le dar al usuario un mensaje dicindole que "Debe identificarse antes de realizar alguna compra". Todo esto es lo que tenemos que implementar en el evento asociado al botn "Add to cart" del web panel Movie Details. Es decir, que a partir del evento asociado al botn de Add to cart del web panel Movie Details se requiere que la aplicacin sea segura.

Utilizaremos cookies temporales para evitar que todo usuario que se registre al sitio desde el mismo computador utilice la misma informacin de conexin.

Disponemos de un Business Object (security.xpz) que brinda los objetos necesarios para definir la seguridad en las aplicaciones Internet utilizando cookies.

Implementacin aplicacin

de

la

seguridad

en

nuestra

El control de la seguridad lo implementaremos utilizando:

Una tabla denominada Security donde se almacena para cada nuevo cliente el nmero generado en forma aleatoria para su sesin, as como la fecha y hora de la ltima sesin activa.
La SecId* SecRnd SecDate SecHour estructura de la tabla sera de entonces la siguiente: randmico) Sesin) Sesin)

(Nmero (Fecha (Hora

de de

sesin Inicio Inicio

de de

Una cookie denominada SECURITY que concatena (separados por una coma) el nmero identificador del cliente (atributo CustId), as como un nmero generado en forma aleatoria de la sesin de este cliente (atributo SecRnd).

Descripcin de Objetos del archivo security.xpz

A los efectos de una buena comprensin del xpz, se describen los objetos que lo integran y utilizaremos.

SECURITY
Es la transaccin que define la tabla de SECURITY.

INSERTSEC
Este procedimiento da de alta en la tabla SECURITY la primera vez que el usuario inicia una sesin en el web.

CHECKSESSION
Este procedimiento valida el nmero de sesin recibido con el usuario que est logueado, y devuelve el cdigo de validacin resultante. A la sesin se le da una validez de 1 da. Se distinguen tres casos: cuando el Usuario tiene iniciada una sesin vigente (valor S), cuando el usuario tiene una sesin vencida (valor V) y cuando el usuario tiene una sesin, pero no coincide el nmero randmico de sesin

(valor I).

GENSESNUM
Este procedimiento actualiza el nmero randmico de sesin del usuario, junto con la fecha y hora en que se logue por ltima vez.

RETSTR
Este procedimiento devuelve los dos valores almacenados en la cookie: nmero de usuario y el nmero de sesin. el

ERROR
Este web panel se invoca siempre que sea necesario cancelar la ejecucin de la aplicacin (por ejemplo: cuando la sesin ya no est vigente se invoca automticamente a este web panel, desplegndole al usuario el mensaje correspondiente). Lo primero a hacer entonces es consolidar en la KB del curso el archivo security.xpz.

Dnde dentro de la aplicacin tenemos que grabar las cookies? o lo que es lo mismo Dnde dentro de la aplicacin tenemos que invocar a la funcin SetCookie?
La cookie se debe grabar cuando el cliente se registra en el sitio por primera vez (en la transaccin TCustomer)) y cada vez que se identifique (evento LOGIN de todos los web panels del sitio). 1) Cuando el cliente se identifica, luego de chequear que el usuario y password ingresados son vlidos, tenemos que grabar una cookie (con la funcin SetCookie), y luego en el evento Start de cada uno de los web panels de acceso limitado a usuarios registrados tenemos que leer la cookie (con la funcin GetCookie). Como definimos anteriormente un web component para encapsular el procedimiento de login, simplemente debemos editar el evento 'Login' del web panel definido como web component y realizar la siguiente modificacin: Event for where CustUsr if upper(CustPsw) = upper(&CustPsw) &SecRnd &CookieVal &result = = = 'Login' each &CustUsr

Udp(PGenSesNum,CustId) Concat(trim(Str(CustId)),trim(Str(&SecRnd)),',') SetCookie('SECURITY',&CookieVal)

message.Caption = 'Welcome to movies.com' else message.Caption endif = 'Invalid password, try again please'

when message.Caption endfor EndEvent // 'Login' Haga clic aqu para ver la demostracin = 'User name not

none found'

2) El otro lugar donde tenemos que grabar una cookie es cuando se da de alta un usuario nuevo. Es decir, que en la transaccin Customer (TCustomer), luego de dar de alta el cliente, tenemos que grabar una cookie en el PC Cliente con el CustId del cliente nuevo y el nmero de sesin randmico. Para esto vamos a crear un procedimiento Login con el siguiente cdigo: &SecRnd = Udp(PInsertSec,&CustId) &cookieVal = Concat(trim(Str(&CustId)), trim(Str(&SecRnd)),,) &result = SetCookie(SECURITY,&cookieVal) Este procedimiento deberia recibir como parmetro la variable &CustId. En la transaccin TCustomer, deberamos agregar en las reglas: Call(Plogin,CustId) if after(Trn);

Hagamos entonces estas modificaciones necesarias

Dnde tenemos que leer las Cookies? Es decir, dnde tenemos que invocar a la funcin GetCookie?
Como ya dijimos antes, todos los web panels del sitio de acceso limitado a usuarios registrados, deben realizar el control de la seguridad leyendo la cookie y comparando los valores obtenidos con los valores almacenados en la tabla de SECURITY. En nuestro caso, en el evento asociado al botn de Add to cart y en el evento Start de la transaccin Orden de Compra (Purchase Order).

1) VAMOS A TENER QUE INCLUIR LAS SIGUIENTES LNEAS DE CDIGO EN EL EVENTO START DE LA TRANSACCION PURCHASE ORDER: &CookieVal = GetCookie('SECURITY') Call(PRetStr,&CookieVal,&CustStr,&SecStr) &CustId = Val(&CustStr) &SecRnd = Val(&SecStr) &result = Udp(PCheckSession,&CustId,&SecRnd) If &result <>'S' si la sesin de dicho usuario no est vigente

Call(HError) Endif Haga clic aqu para ver la demostracin

2) HAGAMOS EL CONTROL (EN EL WEB PANEL MOVIE DETAILS) DE QUE EL USUARIO TIENE QUE SER UN USUARIO REGISTRADO PARA PODER REALIZAR COMPRAS ...
El evento asociado al botn de "Add to cart" quedara entonces:

Event Add to cart &CookieVal = GetCookie('SECURITY') Call(PRetStr,&CookieVal,&CustStr,&SecStr) &CustId = Val(&CustStr) &SecRnd = Val(&SecStr) &result = Udp(PCheckSession,&CustId,&SecRnd)

If &result = S

// si la sesin de dicho usuario est vigente

For each Where CustId = &CustId and PurOrdSts = OrderStatus.Pending &PurOrdId = PurOrdId Endfor For each line in prices if not null(&Qty) If null(&PurOrdId) &PurOrdId = udp(PAddHead, &CustId) endif call(PAddLine,&PurOrdId ,MovieId, &MovieTypeId,&Qty) endif Endfor

call(TPurchaseOrder,&PurOrdId) Else // si la sesin de dicho usuario no est vigente Call(HError) Endif EndEvent Haga clic aqu para ver la demostracin

Nota: 1. Observe que para el usuario de prueba que se estaba usando en los ejercicios anteriores, al momento de creado no se tena en cuenta la seguridad del sistema, por lo cual no fue dado de alta en la tabla de seguridad, y cualquier intento de realizar una compra con l va a dar error. Entonces, para probar el ejercicio hecho en este captulo, d de alta un nuevo usuario a travs de la transaccin Customer, y luego pruebe agregar alguna pelcula al carrito de compras. 2. El webcomponent Login, es el que tiene la lgica de seguridad para que el usuario compre pelculas, y es importante que el usuario en cualquier parte del sitio se pueda logear, y navegar por toda la aplicacin hasta que opte por realizar una compra. Entonces, el webcomponent Login debe estar en todos los webpanels del sitio.

INTRODUCCION AL CAPITULO 9
Existen otras caractersticas interesantes para el desarrollo de aplicaciones en el web, que presentamos en este captulo

WAP

WebWrapper Manejo HTTP Funciones de acceso al header de un objeto Web Tipos de datos estructurados

INTERNET MOVIL (WAP)

Introduccin
En los ltimos aos tanto Internet como la telefona celular han tenido un gran crecimiento y se han hecho accesibles a millones de personas. Es posible ahora unir estas dos tecnologas accediendo de forma fcil y rpida a la informacin que brinda Internet desde los telfonos celulares ( mviles).

A partir de esta versin GeneXus permite generar salidas para Internet mvil, generando objetos con contenido WML.

Alcance
Objetos: WebPanels Lenguajes: Visual Basic, Java, C/SQL y .NET Interfaces: Web

Algunas definiciones
WAP (Wireless Aplication Protocol)
Es el protocolo ms comn de Internet Mvil. Internet mvil es el trmino comercial para acceder a informacin de Internet a travs de dispositivos mviles. Los dispositivos mviles ms comunes son los telfonos celulares con microbrowser pero tambin entran en esta categora, los dispositivos de tipo palm y cualquier dispositivo de informacin porttil, que pueda disponer de una conexin inalmbrica. Este protocolo consiste en un modelo de capas que incluyen un IP inalmbrico, capas de seguridad (WSL) y lenguajes de descripcin de contenidos entre ellos WML.

WML
Lenguaje de tags basado en XML. Es interpretado por los celulares WAP compatibles. Es parecido al HTML, pero tiene menos potencia y soporta algunas cosas que el HTML no y es bastante ms estricto en la sintaxis.

WML vs HTML
Por el tamao de la pantalla, es imposible traducir o ver de forma satisfactoria una pgina de web normal (HTML) en un celular. El tamao, los tipos de letra, las imgenes y la cantidad de informacin que se soporta en el WEB no se puede soportar en un microbrowser y no es prctico hacerlo. La navegacin, adems, es diferente, el usuario no tiene ratn, ni teclado por lo que el ingreso de datos debe ser limitado y la navegacin, mucho ms simple.

MicroBrowser
Es un software instalado en el telfono o dispositivo inalmbrico que interpreta el WML (y el WMLScript, WTAI, etc.) y despliega la informacin en la pantalla.

Es posible acceder a emuladores de celulares y sus microbrowser. Algunos de los ms conocidos son UP Browser (Unwired Planet) de Phone.com, RS380 Ericsson, Nokia, etc.

Arquitectura
La arquitectura es similar a Internet. El cliente es el telfono celular con MicroBrowser y en el servidor se encuentra la lgica en objetos (ejecutables o ASP) con contenido WML o sea que al ser interpretados por los browsers generan WML.

Descripcin
Para generar Web Panels con contenido WML, se implement una nueva propiedad (a nivel de objeto) denominada Tag Language. Los valores de la propiedad son: HTML WML

El valor por defecto es HTML para cualquier objeto Internet. Con el valor WML es posible generar objetos con contenido WML, estos podrn ser vistos desde un browser WAP.

Requerimientos
Para testear esta caracterstica directamente en la mquina de desarrollo es necesario tener instalado el emulador de microbrowser. Recomendamos el UP Browser (UP.SDK version 4.0) que es posible bajarlo de: http://www.openwave.com/products/developer_products/sdk/ El producto es sin cargo, para acceder al mismo se debe realizar la registracin en dicha pgina. El archivo ocupa aproximadamente 7 MB.

Diseo
Se deben definir los Web Panel como hasta el momento y configurar la propiedad Tag Language = WML.

En el diseo del objeto se deben tener en cuenta las siguientes limitaciones del lenguaje generado (WML):

Los objetos WML estn limitados en el tipo y cantidad de controles que se soportan as como en el tamao de las pginas debido a la cantidad de memoria de los mviles y el tamao de la pantalla. Las pantallas permiten entre 4 a 8 lneas de texto, dependiendo del mvil, por lo que no se recomienda que las pantallas superen estos tamaos. No es conveniente que se tenga scroll en una pantalla de telfono celular. Solo se soportan los siguientes controles: o Edit o Textblocks o Texto libre o Tablas simples o Subfile freestyles simples No se soportan o Variables dentro de tablas o Ninguna anidacin de tablas y/o subfile freestyle o Subfiles comunes o Campos LongVarchar o La letra o Tag <BR> o Botones o Cookies o Encriptacin de parmetros Las propiedades de runtime soportados son o Link o Ispassword o Visible y o Enabled. El softbutton del telfono (botn que se encuentra en la parte superior izquierda), se asocia al Evento Enter.

Ejecucin
Luego de generado el objeto se debe ejecutar desde el emulador celular, esto se realiza escribiendo la direccin donde se encuentra el Web Panel en la barra de direcciones del mismo.

Ejemplo
Se desea desplegar un texto de prueba en un telfono celular, los pasos a seguir son los siguientes:

- Insertar el texto en un textblock en el form de un Web Panel.

Es aconsejable verificar el cdigo generado, en el Tab Source, teniendo en cuenta las consideraciones

- Especificar, generar y compilar el Web Panel desde GeneXus. - Ejecutar el UP.Simulator. - Escribir la direccin donde se encuentra el objeto (por ej. http://localhost/cgibin/hPrueba.exe) en Go, y presionar Enter o el Softbutton. - En el telfono celular se visualizar el texto ingresado en el Web Panel.

- Si se producen errores en la pantalla del telfono celular siempre se despliega el siguiente mensaje: Compile error: See info windows for details.

El texto completo del error se debe visualizar en el Phone information (ventana DOS que se ejecuta detrs del emulador).

Hay un ejemplo disponible en : http://www.gxtechnical.com/main/Hdcenter.aspx?2,5,36,408

Errores comunes
Error Error : Invalid element PCDATA in contents Sntoma Se debe a la ausencia de <P> en textblock o

of card. Error : Invalid element br in contents of card. Error : Uncompiled data from http <head>.

variable. Se debe a un tag <BR> en el Source del objeto

La pgina no es WML es HTML, se debe configurar la preference Tag Language=WML Se esta usando un longvarchar o un char de varias lneas. Hay algn dato con la letra y el microbrowser no lo puede interpretar. Se introdujo algun tag <P> anidado, esto no es vlido en WML

Error : Invalid element textarea

Error : Missing entity ntilde

Error : Invalid element P in content of p. excpectde PCDATA | em | b

Consideraciones

Consideraciones a tener en cuenta con el editor o El editor no toma en cuenta algunas restricciones necesarias para WML y puede generarse cdigo no vlido, es preciso en estos casos modificar el source en el editor de diseo de GeneXus. No es posible hacer Cut & paste de controles y/o del Source. Existen algunos tags HTML (no vlidos en WML) generados por el editor. Por ejemplo el tag <BR> es generado por la combinacin de teclas Shift+Enter en el editor. Textblock y variables deben generarse entre <P> y </P>. La generacin de estos tags se da con un enter al final del edit o modificando Cdigo en el Tab Source. Subfiles o tablas no deben limitarse por tags <P>. Es posible generar este cdigo con algunas combinaciones de teclas. Igualmente no es recomendable modificar el cdigo WML (bajo el tab HTML Source ) pues pueden dar errores en ejecucin .

o o

No se reciben correctamente variables por parmetro en los llamados realizados mediante call.

TIPO DE DATOS WEBWRAPPER

Introduccin
WebWrapper es un nuevo tipo de datos de GeneXus que permite encapsular la ejecucin de los objetos Web (el cdigo HTML generado). En particular permite enviar el contenido de un Web Panel por mail.

Alcance
- Objetos: Transacciones, Work Panel, Web Panel, Procedimientos - Lenguajes: Java - Visual Basic C/SQL .Net - Interfaces: Web, Win

Descripcin
Para poder enviar el contenido de un Web Panel va mail desde un objeto GeneXus es necesario definir una variable de tipo WebWrapper, para luego aplicar los mtodos y propiedades necesarios. La idea es capturar el contenido de un Web Panel en su cdigo HTML, y enviar este va mail, por lo tanto hay que tener en cuenta que el cliente de correo que reciba el mail debe tener la capacidad de interpretar lenguaje HTML, en caso contrario ver el cdigo del Web Panel.

Propiedades:

BaseURL Es la direccin Base del Web Panel

La direccin base determina el servidor y directorio virtual al que apuntarn los links y a donde se ir a buscar el Web Panel en caso de que se presione algn botn. La direccin base es agregada al cdigo HTML que devuelve el mtodo GetResponse. Object

Objeto Web a encapsular en la variable de tipo WebWrapper

A la propiedad Object debe asignrsele siempre el resultado de la funcin Create( Objeto, Parmetros)

Metodos:
GetResponse Retorna el cdigo HTML que devolvera el objeto Web especificado en la propiedad Source con los parmetros all indicados.

Consideraciones Generales
Los objetos Web Panel de GeneXus, no son estticos, por este motivo al enviarlos va mail, en realidad se est enviando una imagen esttica. Por lo tanto cualquier evento que se produzca en el Web Panel que realice un post al servidor ( por ejemplo hacer click en un botn, disparar un procedimiento, etc) producir que se abra el web panel en el browser, en la direccin especificada en la propiedad BaseURL. Si se desea hacer un WebWrapper de un Web Panel que incluya imgenes, se puede hacer de dos maneras: Poner en el Web Panel las imgenes en forma absoluta, el inconveniente de esto es que el usuario debe estar conectado en el momento de leer el mail. Poner en el Web Panel las imgenes relativas y mandarlas como atachment en en el mail. En este caso la ruta de la imagen no debe incluir directorios (i.e. /imgenes/logo.jpg) si no hacer referencia directamente a la misma (i.e. logo.jpg).

Si se utiliza un objeto WebWrapper para mandar un Web Panel mediante mail, y dicho Web Panel tiene un botn o evento click, el comportamiento al apretar dicho botn (o control con evento click) en Outlook XP difiere del de Outlook 2000 y Outlook Express.

En Outlook 2000 y Outlook Express el comportamiento es el esperado: se abre un browser, se hace el POST al servidor Web, y en el browser se muestra la respuesta (incluso puede haber una redireccion, call o link, en el evento).

En Outlook XP el comportamiento es el siguiente: el POST lo hace el propio Outlook (no se abre un browser para hacer el POST). Luego se abre un browser haciendo un GET de la pgina para mostrarla. Pero dicho GET se hace solamente si no haba una redireccin en el evento que ejecut el POST. (De todas formas, el evento se ejecuta siempre).

Por ejemplo, si se tiene un evento asociado a un botn que graba algo en la base de datos y asigna cierto valor a una variable que est en el form. En Outlook 2000 y Outlook Express, al apretar dicho botn en el mensaje se ejecutar el evento, por lo que se har el cambio a la base de datos, y se abrir un browser donde se ver en el form la variable con el valor que se le asign en el evento. En Outlook XP se ejecutar el evento, haciendo el cambio en la base de datos, pero el form de respuesta nunca se mostrar. Luego se abrir un browser donde se desplegar el form SIN MODIFICAR LA VARIABLE.

Otro ejemplo: el evento asociado al botn modifica la base de datos y hace un call a otro webpanel. En Outlook 2000 y Outlook XP, al apretar el botn se hace la modificacin a la base de datos y se abre un browser donde se muestra el Web Panel llamado. En Outlook XP se hace la modificacin a la base de datos pero no se muestra nada, ni siquiera se abre el browser.

Hay dos formas en las cuales podemos cambiar nuestra programacin para asegurarnos de que el comportamiento sea el mismo en los 3 clientes de mail:

1) No usar eventos. Siempre se pueden usar links.

2) Usar un Web Component. Es decir, el Web Panel que se manda por email est compuesto solamente por un webcomponent. Dicho WebPanel tendra en el evento Refresh algo as: Event Refresh if base de datos fue modificada webcomponent.object = create( HGracias, pars...) else webcomponent.object = create( HMailForm, pars...) endif End Event

En el evento de usuario de HMailForm se hara la modificacin a la base de datos por la cual se chequea en la condicin. HGracias es el Web Panel al cual se quera hacer la redireccin al procesar el evento.

Consideraciones especficas del generador C/SQL

Al utilizar el tipo de dato WebWrapper con el generador C/SQL, hay que tener en cuenta los siguientes factores:

El objeto Web que se crea para enviar por mail por medio de la funcin Create no puede ser main, si puede ser un WebComponent. La propiedad BaseUrl debe estar despus de la funcin Create.

Consideraciones especficas del generador Visual Basic

En caso de tener en el Web Panel que se enva como Web Wrapper Link o Embedded Pages a objetos GeneXus del mismo modelo, se debe indicar la preferencia del objeto Generation Mode en Smart Static Panel.

Ejemplo
El siguiente ejemplo es un procedimiento que ilustra como enviar por mail, mediante Outlook, el Web Panel Hnotify para cada registro de la tabla CLIENTE. Dicha tabla tiene clave primaria CliCod, el cual se pasar como parmetros al Hnotify. Tambin tiene entre sus atributos secundarios a CliNom, con el nombre del cliente, y CliMail, con la direccin de correo el electrnico del cliente. Variables Definidas: &Wrap del tipo WebWrapper &MailMsg del tipo MailMessage &Outlook del tipo OutlookSession &Wrap.BaseURL = http://myserver/mysystem/ For each CliCod &Wrap.Object = Create(Hnotify, CliCod) &MailMsg.To.New(CliNom, CliMail) &MailMsg.HTMLText = &Wrap.GetResponse() &Oulook.Send(&MailMsg) EndFor

TIPO DE DATOS HTTPCLIENT, HTTPRESPONSE Y HTTPREQUEST

Introduccin
Esta funcionalidad provee a los usuarios GeneXus una forma de poder utilizar el protocolo HTTP en sus programas. Para ello se crearon los tipos de datos HttpClient, HttpResponse y HttpRequest.

Alcance
Objetos: HttpClient (Transacciones, Work Panels, Web Transactions, Web Panels, Reportes, Procedimientos), HttpResponse y HttpRequest (Procedimientos y Reportes con el valor http en la propiedad call protocol, Web Panels y WebTransactions ). Lenguajes: Java Visual Basic Visual Fox C/SQL C#. Interfaces: Web Form, Win Form.

Descripcin
Los tres tipos de datos que se definen para interactuar con http son:

HttpClient Permite armar un request, enviarlo a una URL y leer los resultados.

HttpResponse y HttpRequest Permiten leer los datos del request y grabar el response. Son objetos disponibles solo en WebProcs.

HttpClient
Este objeto refleja una conexin http. Puede usarse desde cualquier objeto GeneXus.

PROPIEDADES:
Host Define el nombre del host. Tipo- String Port Define el puerto del host. Tipo- String Secure Indica si el protocolo es http o https. Tipo- Boolean Timeout Determina el Timeout de la conexin. Tipo- Integer

BaseURL Indica la URL base de los request que se hagan al host. Tipo- String StatusCode Retorna el cdigo de error HTTP. Tipo- Integer ReasonLine Retorna el texto del error HTTP. Tipo- String ErrCode Retorna si ocurri algn error en algn comando, en cuyo caso retorna un valor distinto de cero. Tipo- Integer ErrDescription Retorna el mensaje del error si ocurri alguno en algn comando. Tipo- String Basic y Digest Son constantes que determinan un tipo de autenticacin. Se utilizan en el mtodo AddAuthentication. Basic=0 : Para autentificar se enva el usuario y password sin encriptar. Digest=1: Para autentificar se enva el usuario y password encriptados. ProxyHost y ProxyPort Permiten especificar un proxy http. En ambiente windows se utiliza automticamente el que esta configurado en la mquina. ProxyHost- String ProxyPort- Integer

MTODOS
AddHeader(<Name>, <Value>) Agrega un header con el valor dado. Ejemplo: AddHeader(User-Agent, GeneXus) <Name>- String <Value>- String

Agrega una variable al form.

AddVariable(<Name>,<Value>)

Ejemplo: AddVariable(CliCod, &CliCod)

<Name>- String <Value>- String AddString(<Value>) Agrega el contenido del string al buffer de datos a enviar. <Value>- String AddFile(<Value>) Agrega el contenido del archivo al buffer de datos a enviar. <Value>- String

Execute(<Method>,<URL>) Ejecuta un mtodo en la URL definida. Se pondra solo la parte final de la URL Ejemplo: execute("POST", "/servlet/awebproc") <Method>- String <URL>- String ToString() Retorna un String con todo el cuerpo del response. ToFile(<FileName>) Graba en un archivo el contenido del stream. <FileName>- String GetHeader(<Name>,<Value>) Retorna en <Value> el valor del header convertido al tipo de la variable. <Name>- String <Value>- Anytype AddAuthentication(<Method>, <Realm>, <User>, <Password>) Se autentifica con <User> y <Password> al dominio <Realm> utilizando el tipo de autenticacin <Method> <Method>- Integer (Pueden utilizarse las propiedades Basic y Digest) <Realm>- String <User>- String <Password>- String

HttpRequest
Este objeto permite leer el request http. Puede instanciarse solo en el contexto de un WebProc.

PROPIEDADES
Method Retorna el mtodo HTTP. Tipo- String

Retorna el nombre del servidor

Tipo- String ServerPort Retorna el puerto en el servidor Tipo- Integer Secure Indica si se esta utilizando HTTPS. Si el valor retornado es 1, se esta utilizando HTTPS; si es 0, se esta utilizando http. Tipo- Integer ScriptPath Retorna la porcin de URL correspondiente el nombre del directorio virtual.

ServerHost

Tipo- String ScriptName Retorna el nombre del objeto con la extensin correspondiente que se esta ejecutando, tal como aparece en la URL Tipo- String Referrer Retorna la URL del llamador Tipo-String QueryString Retorna la porcin de la URL que est despus del signo ?; o sea los parmetros. Tipo- String RemoteAddress Devuelve la direccin del cliente. Tipo- String ErrCode Retorna si ocurri algn error en algn comando, en cuyo caso retorna un valor distinto de cero. Tipo- Integer ErrDescrption Retorna el menaje del error si ocurri alguno en algn comando. Tipo- String

MTODOS

GetVariable(<Variable>)
Retorna en un String el valor con el que viene cargada la <Variable> en el post. <Variable>- String GetHeader(<Header>) Retorna un String con el valor del header <Header>. <Header>- String ToString() Retorna un String con todo el cuerpo del request. ToFile(<FileName>) Graba en un archivo el contenido del stream. <FileName>- String

HttpResponse
Este objeto permite escribir el response http. Puede instanciarse solo en el contexto de un WebProc.

PROPIEDADES
ErrCode Retorna si ocurri algn error en algn comando, en cuyo caso retorna un valor distinto de cero. Tipo- Integer ErrDescrption Retorna el menaje del error si ocurri alguno en algn comando. Tipo- String

METODOS
AddHeader(<Name>,<Value>) Agrega un header con el valor dado. Ejemplo: AddHeader(User-Agent, GeneXus) <Name>- String <Value>- String AddString(<Value>) Agrega el contenido del string al buffer de datos a enviar. <Value>- String AddFile(<Value>) Agrega el contenido del archivo al buffer de datos a enviar. <Value>- String

Interaccin con XML

Estos objetos permiten la interaccin con los objetos XMLReader y XMLWriter. Para ello existen los siguientes mtodos:

XMLReader.openRequest(HttpRequest) Se utiliza en un WebProc para leer un xml que viene en el body del http request.

XMLReader.openResponse(HttpClient) Se utiliza en cualquier objeto para leer como XML lo que devolvi un request.

XMLWriter.openRequest(HttpClient) Se utiliza para enviar un XML en el body de un http request.

XMLWriter.openResponse(HttpResponse) Se utiliza en un WebProc para escribir un xml que se retornara en el body del http response.

Ejemplo
Este ejemplo muestra como un objeto GeneXus llama a otro va http, pasndole parmetros en un XML y recibiendo los mismos tambin en un XML.

El XML a enviar tiene la forma

<parameters> <a>valor</a> <b>valor</b> </parameters>

El XML que se devuelve es igual, con los valores de A y B modificados.

El programa cliente sera:

&Client de tipo HttpClient &Writer de tipo XMLWriter &Reader de tipo XMLReader

// Determino el host y el puerto a donde hacer el request &client.host = "localhost" &client.port = 88

// Agrego el XML al request

&writer.openRequest(&client) &writer.WriteStartElement("parameters") &writer.WriteElement("a", &A) &writer.WriteElement("b", &B) &writer.WriteEndElement() &writer.close()

// Hago el POST al webproc &client.execute("POST", "/servlet/awebproc")

// Leo el XML que devuelve y lo cargo en las variables internas

&reader.openResponse(&client) &reader.read()

&reader.read() &a = val(&reader.value)

&reader.read() &b = val(&reader.value)

&reader.close()

El programa servidor seria el siguiente WebProc:

&Request de tipo HttpRequest

&Response de tipo HttpResponse &Writer de tipo XMLWriter &Reader de tipo XMLReader

// Leo los parmetros del XML &reader.openRequest(&Request) &reader.read() &reader.read() &a = val(&reader.value) &reader.read() &b = val(&reader.value) &reader.close()

// Le sumo uno a cada valor &a = &a + 1 &b = &b + 1

// Grabo los parmetros en el response

&writer.openResponse(&Response) &writer.WriteStartElement("parameters") &writer.WriteElement("a", &A) &writer.WriteElement("b", &B) &writer.WriteEndElement() &writer.close()

Consideraciones para el generador Java

En el caso de que se ejecute el motor de servlet en Windows, la aplicacin obtendr automticamente la configuracin del proxy http y la lista de hosts para los que no se debe utilizar el proxy.

En caso de que se ejecute en otra plataforma, es necesario especificar el proxy como una System Property desde la lnea de comandos del intrprete, por ej:

java -Dhttp.proxyHost=your.proxy.com -Dhttp.proxyPort=XX <mainclass>

(Consideraciones Generales)
La propiedad secure del tipo de datos HTTPClient en el generador C/SQL solo puede ser utilizada en clientes Microsoft. En los generadores Visual Basic, Visual FoxPro, y C/Sql el tipo de datos HTTPClient permite manipular solamente URLs cuyo Response tenga contenido de tipo texto. No esta implementado para otros tipos de contenido (por ej. imgenes).
Con formato: Numeracin y vietas

Con formato: Numeracin y vietas

ACCESO AL HEADER DE UN OBJETO WEB

Alcance
Objetos: Web Panels, Transacciones Lenguajes: C/SQL, Java, Visual Basic, .Net Interfaz: Web

Introduccin

Se introducen controles, con mtodos y propiedades para manejar TAG en el header de un objeto Web. Esto posibilita agregar informacin descriptiva, que puede utilizarse para ser referenciado por buscadores, agregar referencias a JavaScript para dar dinamismo a la aplicacin o todo aquello que se pueda definir entre los TAgs <Head></Head> para aprovechar al mximo las caractersticas del HTML.

Descripcin
Se denomina Header de un objeto WEB a cdigo HTML definido entre los TAGS <HEAD> </HEAD>. Se puede agregar informacin en el Header, que puede servir, entre otras cosas, para ser referenciado por buscadores, o simplemente para agregar funcionalidades a la pgina, como es el caso de JavaScript. Dicha informacin se debe agregar en forma de Tag.

Los Tags HTML que GeneXus permite agregar son:

<meta name=X content=Y/> <meta http-equiv=X content=Y/> <script language="JavaScript" src="Y>

Adems permite introducir cdigo libre directamente en el <head> </head>

Para poder trabajar con estos Tag, se implementaron una serie de propiedades y mtodos del Form:

Form.Meta
Esta propiedad permite trabajar con los TAG de la forma <meta name=X content=Y/>. Los mtodos correspondientes son:

AddItem

Permite agregar un TAG <meta name=X content=Y/>, a partir de los valores X e Y pasados por parmetros

Sintaxis:

Form.Meta.AddItem(<name>,<content>)

Donde <name>, <content> : Character Por ejemplo GeneXus agrega por defecto al form el Tag: <meta name="Generator" content="GeneXus .NET> Para indicar con que generador fue creado el objeto.

RemoveItem Permite eliminar un TAG <meta name=X content=Y/>, a partir del valor X.

Sintaxis:

Form.Meta.Remove(<name>)

Donde <name> : Character

Text Retorna el valor correspondiente al name del TAG referenciado.

Sintaxis: Form.Meta.Text(<indice>)

Donde: <Indice> : Numrico que representa el nmero de Tag Meta en el Form Valor de retorno: Character

Value Retorna el valor correspondiente al content del TAG referenciado.

Sintaxis: Form.Meta.Value(<indice>)

Donde: <Indice> : Numrico, que representa el nmero de Tag Meta en el Form Valor de retorno: Character

Count Retorna la cantidad de TAG de la forma correspondiente

Sintaxis: Form.Meta.Count

Valor de Retorno: Numrico

Clear Elimina todos los TAG de la forma correspondiente

Sintaxis: Form.Meta.Clear()

Form.MetaEquiv
Esta propiedad permite trabajar con los TAG de la forma <meta http-equiv=X content=Y/>. Los mtodos correspondientes son:

AddItem Permite agregar un TAG <meta http-equiv=X content=Y/>, a partir de los valores X e Y pasados por parmetros

Sintaxis:

Form.MetaEquiv.AddItem(<name>,<content>)

Donde <name>, <content> : Character

RemoveItem Permite eliminar un TAG <meta http-equiv=X content=Y/>, a partir del valor X.

Sintaxis:

Form.MetaEquiv.Remove(<name>)

Donde <name> : Character

Text Retorna el valor correspondiente al name del TAG referenciado.

Sintaxis: Form.MetaEquiv.Text(<indice>)

Donde: <Indice> : Numrico, que representa el nmero de Tag MetaEquiv en el Form

Valor de retorno: Character

Value Retorna el valor correspondiente al content del TAG referenciado.

Sintaxis: Form.MetaEquiv.Value(<indice>)

Donde: <Indice> : Numrico, que representa el nmero de Tag MetaEquiv en el Form

Valor de retorno: Character

Count Retorna la cantidad de TAG de la forma correspondiente

Sintaxis: Form.MetaEquiv.Count

Valor de Retorno: Numrico

Clear Elimina todos los TAG de la forma correspondiente

Sintaxis: Form.Meta.Clear()

Form.JScriptSrc
Permite referenciar fuentes con cdigo JavaScript que se deseen incluir en el Header de la pgina generada, de la forma <script language="JavaScript" src="Y> Los mtodos correspondientes son:

Add Agrega un TAG de la forma antes descrita.

Sintaxis:

Form.JScriptSrc.Add(<src>)

Donde: <src> :Carcter, nombre del arcjivo js con el JavaScript definido

(ej: ValidarFecha.js)

Clear Elimina todas las instancias del TAG

Sintaxis:

Form.JScriptSrc.Clear()

Item Retorna el elemento correspondiente al src del tag referenciado

Sintaxis:

Form.JScriptSrc.Item(<Indice>)

Donde: <Indice>:Numrico, que representa el nmero de Tag JScriptSrc en el Form

Valor de Retorno: Character

Count Retorna la cantidad de TAG de la forma correspondiente

Sintaxis:

Form.JScriptSrc.Count

Valor de Retorno: Nmerico

Form.HeaderRawHTML
Esta propiedad del form permite agregar texto libre en el Header (los Tag <head> </head>)

Sintaxis:

Form.HeaderRawHTML = <Texto>

Donde: <Texto>: Character

Consideraciones
GeneXus agrega por defecto en los objetos web los tags Generator, Version y Description de tipo Meta Name. Por ejemplo: <meta name="Generator" content="GeneXus C#"/> <meta name="Version" content="7_6_0-034"/> <meta name="Description" content="webPanel"/>

TIPOS DE DATOS ESTRUCTURADOS

Alcance
Objetos: Transactions, Work Panels, Web Panels, Procedures, Reports Lenguajes: Java, .NET, Visual Basic Interfaces: Web, Win

Introduccin
El objeto GeneXus Structured Data Type (SDT), permite definir estructuras de datos. Estas representan, de una forma simple, datos cuya estructura est compuesta por varios elementos. Esto facilita y potencia la programacin.

Descripcin
Los SDT tienen mltiples usos posibles:

facilitan el pasaje de parmetros (en particular permite proveer/consumir informacin estructurada en el uso de webservices) - simplifican la lectura y escritura automtica de XML (con funciones de alto nivel), - permite mejorar la legibilidad del cdigo, - permite el manejo de listas de largo variables de elementos. Detallamos algunos de los posibles casos de uso.

Se podrn definir variables, en cualquier objeto, basados en un objeto estructurado (SDT) o una estructura definida en el.

En Edicin el objeto tiene dos secciones - Estructura : aqu mediante un editor es posible definir la estructura del objeto. - Documentacin : documentacin del objeto. Como todos los objetos GeneXus, tambin tiene asociado un conjunto de propiedades y mtodos.

Estructura
La estructura puede ser multinivel, semejante a la de las transacciones, cada nivel puede tener uno o ms elementos (o tems). Podemos clasificarlos en elementos simples o elementos compuestos (por otros elemento). ELEMENTOS SIMPLES En el diseo de un SDT, al definir un elemento, se debe especificar la propiedad Name que identifica al elemento, por lo tanto no pueden existir dos elementos con el mismo nombre. La propiedad Data type permite seleccionar entre los siguientes tipos de datos : Tipos bsicos de GeneXus (numrico, date, etc.) Dominios otro SDT ya definido.

La propiedad Collection indica si el elemento tiene o no mltiples instancias (puede repetirse). Tiene dos valores posibles, True o False

ELEMENTOS COMPUESTOS Se identifican con un bullet de color, en el editor, y son aquellos que definen un nuevo agrupamiento de elementos (una nueva coleccin o un agrupamiento de elementos simples).

Tiene las mismas propiedades que los elementos simples, pero no se habilita la propiedad data type. Hay una excepcin en el caso de un SDT que sea coleccin de tipo simple, ver caso de uso 2.3

Se habilita la propiedad Item Name solo cuando el elemento compuesto define una Collection (propiedad Collection en True).Esta propiedad indica el nombre de cada uno de sus elementos. Este nombre, calificado por el nombre del SDT, ser seleccionable como tipo de datos para la definicin de variables, esto significa que se crearan dos tipos de datos uno con el Name (nombre del SDT) y otro con Name.ItemName.

Documentacin
Permite escribir un texto descriptivo del objeto.

Propiedades del objeto

El objeto SDT tiene un Name que lo identifica, por lo tanto no es posible definir un SDT con el nombre de otro objeto. El formato es el mismo de los objetos GeneXus en cuanto a caracteres vlidos para inicio, caracteres siguientes al primero vlidos, cantidad de caracteres, etc.

Tiene un Description y un External Name. Este ltimo es el nombre con el que se publica el tipo de datos en el WSDL, para el caso de Webservices. El valor por defecto es el de la propiedad Name. La propiedad External Namespace es un string que representa el name space que aplica al External name (WSDL). El valor por defecto es el nombre del modelo sustituyendo los caracteres no vlidos.

Operadores
NEW Este operador retorna una nueva instancia inicializada, o sea una nueva referencia al tipo de datos que se especifica. La sintxis es:

New SDTName()

SDTName es el nombre de un SDT o un tem de una collection (cualquiera que pueda ser el tipo de datos de una variable). Por ejemplo A = New Client() o ClientList.Add( New Client())

Desde la opcin Insert/SDT (o con ctrl. + Space) es posible incluir un estructurado.

Mtodos
Cualquier SDT tiene los mtodos que se describen a continuacin. TOXML Retorna un string con el formato XML de los datos de la variable SDT. Sintaxis: &a = &b.ToXml() devuelve la representacin XML del contenido de &b en la variable &a

El XML resultante tiene la siguiente estructura:

La raz del XML tiene el nombre de la estructura. Un nodo para cada elemento simple. El nombre del nodo ser el valor de la propiedad Name de dicho elemento. Un nodo para cada elemento compuesto. El nombre del nodo ser el valor de la propiedad Name de dicho elemento. No tendr valores sino los nodos correspondientes a su composicin. En el caso de colecciones simples define un elemento item por cada campo

Por ejemplo con un estructurado de pas:

el contenido del string resultado seria: <Pais xmlns = name_Kb> <Nombre>Uruguay</Nombre> <Idioma>Espaol</Idioma> <Coordenadas> <Latitud>30</Latitud > <Longitud>35</Longitud> </Coordenadas>

<Ciudades> <item> Montevideo </item> <item> Paysand </item> </Ciudades> FROMXML Es el opuesto del ToXML. recibe como parmetro un string que tiene una estructura XML desde la cual se carga el SDT. Sintaxis: &b.FromXml( &a) carga la estructura &b a partir del contenido de la variable &a. CLONE Crea una nueva rea de memoria y copia los datos de la variable en esta. Sintaxis: &var1 = &var2.clone() Siempre debe estra asignado a una variable, la nica excepcin es dentro del comando Add &var1.add(var2.clone())

Mtodo clone vs Operador New El mtodo Clone equivale a new de una variable y la asignacin de cada item de la misma o sea: Z = Y.clone() Z = New SDT() z.a = y.a z.b = y.b Siendo a y b los elementos del estructurado SDT

Notar que la asignacin Z = Y simplemente redirecciona ambas variables al misma rea de memoria y al modificar una estoy modificando la otra. La ventaja del mtodo clone, frente al new, es que realiza la copia automtica de cada item del estructurado sin necesidad de hacer la asignacin.

En el caso de subestructuras dentro del SDT (colecciones o no) no se crea una nueva instancia de sta con el mtodo clone (la copia es shallow), es necesario hacer un new o clone explicito

por cada subestructura. En el caso de subestructuras definidas dentro del SDT, que no sean colecciones no esta habilitado el mtodo clone. Por ejemplo, con el SDT Pais Nombre Char Continente Nombre Char

&Pais.Nombre = 'Uruguay' &Pais.Continente.Nombre = 'Amrica' &Paises.Add(&Pais.clone())

&Pais.Nombre = 'Senegal' &Pais.Continente.Nombre = 'Africa' &Paises.Add(&Pais.clone())

En ambos pases el continente es Africa. Para que cada registro tenga distinto continente se debe programar con el operador new.

Collections
Existen un conjunto de mtodos y propiedades que solo aplican a colecciones de SDT. La propiedad Count retorna la cantidad de elementos de la coleccin. Es read only. Los siguientes mtodos solo aplican a SDT que sean colecciones :

Add( Item[, Position]) Agrega Item en la posicin relativa Position de la collection. Si se omite Position o se especifica 0, se agrega el Item al final de la collection. Position comienza en 1.

Item( Position) Retorna una referencia al elemento con posicin relativa Position en la collection. En caso de especificar posicin (de un item de coleccin ) mayor a la ultima, el programa cancela. No es vlido asignar un valor con esta propiedad, por lo tanto no es correcto el cdigo &sdt.item(&i) = Att, para cambiar un valor se debe remover (mtodo remove) y agregar (mtodo add)

Remove( Position) Elimina el elemento en la posicin relativa Position de la collection y corre un lugar todas las posiciones.

Clear() Elimina todos los elementos de la collection.

IndexOf( Item) Retorna la posicin relativa de Item en la collection. 0 (cero) si Item no esta en la collection.

Tener en cuenta que este mtodo trabaja con las referencias de los elementos y no con su contenido. Esto implica que si por parmetro se recibe una variable con una lista de SDT y se carga una variable temporal con el contenido de un item, IndexOf devolver 0 (vaco) pues esa referencia no esta dentro de la lista. Puede resultar til nicamente al momento de cargar la lista.

Consideraciones
DEFINICIN DE VARIABLES Para cada SDT se define un tipo de datos y otro por cada uno de los Items de sus collections. Por ejemplo Si se define una coleccin de Ciudades, se define un tipo de datos Ciudades y otro Ciudades.Ciudad Las variables cuyo tipo sea una SDT no pueden ser vectores o matrices. PASAJE DE PARMETROS No es posible referenciar variables de tipo SDT en: parmetro de Objetos Web parmetro de Objeto Main con Call protocol Command line

Si bien no se controla, no es posible definir en la rule parm un item de una SDT, por ejemplo: Parm(&sdt.item) DISPARO DE RULES Se deben instanciar los elementos de una variable SDT, para poder disparar rules que dependen de dicha variable. Para esto se debe cumplir al menos una de las siguientes condiciones: asignar el elemento del SDT en el evento Start o en una regla inicializar a la variable SDT:

new en Evento Start o parmetro de Trn o parmetro en Call en el evento Start.

ASIGNACIN La asignacin de una variable de tipo Structure a otra del mismo tipo implica un incremento en la cantidad de referencias a la estructura. Hecha la asignacin, una modificacin a cualquier elemento de la estructura se ver reflejado en todas las variables que "apunten" a la estructura.

Por ejemplo en el cdigo: &Pais.PaisNom = Uruguay &PaisAux = &Pais &PaisAux.PaisNom = Brasil &PaisNom = &Pais.PaisNom

La variable PaisNom tiene el valor Brasil, pues la direccin de la variable Pais y PaisAux es la misma luego de la asignacin FORM No es posible incluir un SDT en el form o printblock de un objeto, en ese caso ocurrir un error de spec spc0071: '%1 cannot be displayed or printed due to its data type (%2) RECORRIDA Para recorrer una coleccin de elementos, es posible hacerlo con el comando for in array

For &pais in &paises &paisCod = &pais.Codigo &PaisNom = &pais.Nombre Load Endfor

O con el comando do while:

Do while &I<= &Paises.Count &Pais =&Paises.Item(&I) ... &I=&I+1 Enddo

INTEGRIDAD No es posible eliminar un SDT que esta siendo utilizado por otro objeto. Si es posible modificar la estructura de un SDT y por ejemplo eliminar un elemento del mismo, aunque este siendo referenciado por otro objeto. ESPECIFICACIN Y GENERACIN No es posible especificarse/generarse directamente un SDT. La especificacin/generacin es implcita cuando se especifica un objeto que lo utiliza si el SDT cambi desde la ltima vez que fue especificado o se realiza una generacin forzada. Las variables definidas como estructuras son ignorada si la especificacin es para lenguajes que no las soportan (RPG, Cobol, etc.). Esto evitar errores de generacin si las variables no son utilizadas (esta parte corre por cuenta del desarrollador).

KNOWLEDGE MANAGER Si es posible exportar/consolidar un objeto SDT, al exportar un objeto que usa un SDT, se exportan automticamente los SDT llamados.

Si se exporta un objeto que contiene variables que son estructuras a un modelo que no contiene la definicin de dichas estructuras aparecer, al especificar, el mensaje: spc0056, Internal error. Variable %1 definition is incorrect or not available. Data:%2.

En el dilogo de consolidacin se agrega un nuevo valor SDTs a la opcin Do NOT overwrite, esto permite sobrescribir o no las definiciones de los SDT de la knowledge Base consolidada.

LISTADOS Si es posible listar los objetos SDT desde List/Object, o ver el arbol de llamadas desde List/Browser

WEBSERVICES Los Web Services normalmente retornan valores en estructuras de datos. Por ejemplo, retornan un "Cliente" que es una estructura que tiene "Codigo" y "Nombre" que a su vez es otra estructura que tiene "PrimerNombre", "SegundoNombre", etc.

Ahora es posible acceder a estos datos con variables de tipo "Cliente" y modificar/acceder a sus "miembros"

Al consumir un servicio, con el WSDL Inspector, en el caso de recibir datos complejos, este incluir por lo tanto nuevas definiciones de SDT

RECURSIVIDAD No son soportadas las definiciones recursivas. El Data type de una elemento de una estructura no puede ser el mismo que se esta definiendo.

INTRODUCCION AL CAPITULO 10
Cada vez se escucha mas el concepto de Web Services, fundamentalmente relacionado con Internet y el futuro de una arquitectura orientada a servicios. Es por esta razn, que GENEXUS incluye la posibilidad de desarrollar y consumir Web Services.

Comenzaremos con una introduccin al concepto de Web Services para luego realizar ejercicios prcticos que permitan profundizar los conocimientos adquiridos.

WEB SERVICES

Abstract
En los ltimos tiempos ha surgido con mucha fuerza el concepto de web services, incluso afirmndose que el mismo cambiara la forma de programar las aplicaciones orientadas a Internet hacia una arquitectura orientada a servicios. Todo esto se ha visto potenciado luego del anuncio de Microsoft de su nueva estrategia .NET que est basada en el modelo de web services.

Este documento describe que son los web services y como es la arquitectura general del modelo, adicionalmente se provee una introduccin de los estndares en los cuales se basa este modelo como ser SOAP, WSDL y UDDI.

Qu es un web service?
Un web service es una aplicacin que puede ser descripta, publicada, localizada e invocada a travs de una red, generalmente Internet. Combinan los mejores aspectos del desarrollo basado en componentes y la Web. Al igual que los componentes, los web services son funcionalidades que se encuentran dentro de una caja negra, que pueden ser reutilizados sin preocuparse de cmo fueron implementados. A diferencia de la actual tecnologa de componentes, no son accedidos por medio de protocolos especficos del modelo de objetos como ser RMI, DCOM o IIOP; sino que son accedidos utilizando protocolos web como ser HTTP y XML. La interface de los web services esta definida en trminos de los mensajes que el mismo acepta y retorna, por lo cual los consumidores de los web services pueden ser implementados en cualquier plataforma y en cualquier lenguaje de programacin, solo tiene que poder crear y consumir los mensajes definidos por la interface de los web services.

El modelo de web services.

La arquitectura bsica del modelo de web services describe a un consumidor, un proveedor y ocasionalmente un corredor (broker). Relacionados con estos agentes estn las operaciones de publicar, encontrar y enlazar. La idea bsica consiste en que un proveedor publica su servicios en un corredor, luego un consumidor se conecta el corredor para encontrar los servicios deseados y una vez que lo hace se realiza un lazo entre el consumidor y el proveedor.

Cada entidad puede jugar alguno o todos los roles.

Proveedor

Publicar

Enlazar

Corredor

Consumidor

Encontrar

Por todo lo anterior hay ciertos requerimientos a la hora de desarrollar o consumir un web services: Una forma estndar de representar los datos. XML es la opcin obvia para este requerimiento. Un formato comn y extensible de mensajes.
SOAP es el elegido en este caso; SOAP es un protocolo liviano para el intercambio de informacin. Ms adelante en este documento lo veremos con ms detalle.

Un lenguaje comn y extensible para describir los servicios.

La opcin en este caso es WSDL. Es un lenguaje basado en XML desarrollado en forma conjunta por IBM y Microsoft. Lo veremos con ms detalle mas adelante en este documento.

Una forma de descubrir los servicios en Internet. UDDI se utiliza en este caso; el mismo especifica un mecanismo para publicar y localizar los servicios por parte de los proveedores y consumidores respectivamente. Se ver con ms detalle mas adelante en este documento.

Ventajas y retos.
Los web services apuntan a ser la piedra fundamental de la nueva generacin de sistemas distribuidos. Estos son algunos puntos para fundamentar esta afirmacin: Interoperabilidad:
Cualquier web service puede interactuar con otro web service. Como los web services pueden ser implementados en cualquier lenguaje, los desarrolladores no necesitan cambiar sus ambientes de desarrollo para producir o consumir web services.

Ubicuidad:

Los web services se comunican utilizando HTTP y XML. Por lo tanto cualquier dispositivo que soporte estas tecnologas pueden implementar o acceder web services. Muy pronto estarn presentes en telfonos, autos e incluso mquinas expendedoras, las que avisarn a la central cuando el stock sea menor al indicado. Encapsular reduce la comlejidad
Todos los componentes en un modelo de web services son web service. Lo importante es la interface que el servicio provee y no como esta implementado, por lo cual la complejidad se reduce.

Fcil de utilizar:
El concepto detrs de los web services es fcil de entender, incluso existen toolkits de vendedores como IBM o Microsoft que permiten a los desarrolladores crear web services en forma rpida y fcil.

Soporte de la Industria:
Todos las empresas de software importantes soportan SOAP, e incluso estn impulsando el desarrollo de web services. Por ejemplo la nueva plataforma de Microsoft .NET esta basada en web services, haciendo muy simple el desarrollo de los mismos que luego podran ser consumidos por un web service desarrollado utilizando VisualAge de IBM y viceversa.

A la vez hay ciertos retos tcnicos que los web services tienen que sortear para poder tener xito. Muchos de estos retos estn relacionados con el ambiente abierto en el que tienen que sobrevivir. Estos son algunos de esos puntos: Descubrimiento: Como un web service se anuncia para ser descubierto por otro servicio? Qu pasa si el servicio se cambio o se movi luego de ser anunciado? WSDL y UDDI son dos nuevos estndares que manejan este punto. Confiabilidad: Algunos web services son ms confiables que otros. Cmo puede ser medida esa confiabilidad y comunicada? Qu pasa cuando un web service esta off-line en forma temporaria? Localizamos y utilizamos un servicio alternativo brindado por otra empresa o esperamos a que el servicio este de nuevo on-line? Seguridad: Muchos web services son publicados para ser utilizados sin ninguna restriccin, pero muchos otros van a necesitar autenticacin para que los utilicen solo los usuarios autorizados. Cmo autentifica a los usuarios un web service? Lo hace a nivel del mtodo que lo implementa o utiliza otro web service para realizar la autenticacin? Responsabilidad En caso de que el web service no sea de acceso libre, Cmo puedo definir cuantas veces un consumidor puede acceder al web service una vez contratado? Cmo se cobra su uso? Cmo se indica que un servicio ya no esta ms en lnea?

Tecnologas asociadas
El modelo de web services est basado en ciertas tecnologas emergente que es el resultado del trabajo de varias compaas y organizaciones entre las cuales se destacan IBM y Microsoft. Estas tecnologas son SOAP, WSDL y UUDI.

SOAP (Simple Object Access Protocol)

SOAP es un protocolo para el intercambio de informacin en un ambiente descentralizado y distribuido. Es el protocolo ms utilizado para realizar el intercambio de informacin en el modelo de web services. Esta basado en XML y potencialmente puede ser utilizado en combinacin con una variedad de protocolos de comunicacin, siendo el ms utilizado HTTP. Por lo tanto se utiliza HTTP para transportar la informacin, y XML para representar la misma. El protocolo completo se puede encontrar en http://www.w3.org/TR/soap

EL MODELO DE COMUNICACIN DE SOAP El modelo de comunicacin de SOAP es muy similar al de HTTP. Un cliente hace un requerimiento (request), el servidor que esta escuchando los requerimientos lo atiene y responde (response) brindando la informacin solicitada o enviando un mensaje de error en caso de que el requerimiento no haya sido vlido.

El mensaje SOAP consiste en un elemento envelope SOAP obligatorio, un cabezal SOAP opcional y un cuerpo SOAP obligatorio como un documento XML. El cabezal SOAP es utilizado para definir informacin acerca del requerimiento, mientras que el cuerpo SOAP contiene el mtodo llamado y los parmetros con los que se llama al mismo.

Request

Cliente
Response

Servidor

Todo esto es un modelo de mensajes request/response con una forma de describir un conjunto de mtodos y pasarle a los mismos parmetros. Esto parece la base del protocolo RPC y de hecho es el uso ms comn de SOAP. El potencial es entregar esto sobre Internet utilizando HTTP para realizar comunicaciones entre organizaciones permitiendo realizar

comunicaciones entre aplicaciones con diferente plataforma, sistema operativo y lenguaje de programacin.

A continuacin se muestra un mensaje SOAP embebido en un request HTTP:

POST /StockQuote HTTP/1.1 Host: www.stockquoteserver.com Content-Type: text/xml; charset="utf-8" Content-Length: nnnn SOAPAction: "Some-URI" <SOAP-ENV:Envelope xmlns:SOAP-ENV="http://schemas.xmlsoap.org/soap/envelope/" SOAP-ENV:encodingStyle="http://schemas.xmlsoap.org/soap/encoding/"> <SOAP-ENV:Body> <m:GetLastTradePrice xmlns:m="Some-URI"> <symbol>DIS</symbol> </m:GetLastTradePrice> </SOAP-ENV:Body>

Este ejemplo invoca al servicio StockQuote llamando al mtodo GetLastTradePrice con el smbolo DIS por parmetro.

Este es la respuesta al requerimiento anterior, el cual retorna el precio de la accin solicitada:

HTTP/1.1 200 OK Content-Type: text/xml; charset="utf-8" Content-Length: nnnn <SOAP-ENV:Envelope xmlns:SOAP-ENV="http://schemas.xmlsoap.org/soap/envelope/" SOAP-ENV:encodingStyle="http://schemas.xmlsoap.org/soap/encoding/"/> <SOAP-ENV:Body> <m:GetLastTradePriceResponse xmlns:m="Some-URI"> <Price>34.5</Price> </m:GetLastTradePriceResponse> </SOAP-ENV:Body>

Si usted quedo asustado por la aparente complejidad del protocolo SOAP pensando lo engorroso que sera armar los mensajes de requerimiento y parsear los mensajes de respuesta despreocpese; la mayora de los lenguajes de programacin proveen o proveern soporte para realizar esto. La idea fundamental consiste en utilizar algn objeto al cual se le brinda un WSDL y se le indica que mtodo se quiere llamar y con que parmetros. Esto arma en tiempo de ejecucin el mensaje SOAP, lo manda y parsea el resultado adjudicndoselo a alguna variable en forma trasparente para el usuario como si hubiera hecho un call comn.

WSDL: Web Services Description Language

WSDL es un lenguaje basado en XML que se utiliza para describir un Web Services. Ha sido suministrado por la W3C por estandarizacin. Un archivo con formato WSDL provee informacin de los distintos mtodos (operaciones) que el Web Services brinda, muestra cmo accederlos y que formatos deben de tener los mensajes que se envan y se reciben. Es como un contrato entre el proveedor del servicio y el cliente, en el cual el proveedor se compromete a brindar ciertos servicios solo si el cliente enva un requerimiento con determinado formato. Es el documento principal a lo hora de documentar un Web Services, pero puede no ser el nico. En la mayora de los casos es conveniente que este acompaado por un documento escrito en lenguaje natural que brinde informacin de que es lo que hace cada uno de los mtodos brindados por el Web Services as como tambin ejemplos, por ejemplo, de los mensajes SOAP que espera y responde el servicio.

En forma resumida podramos decir que un archivo WSDL describe lo siguiente: Mensajes que el servicio espera y mensajes que el servicio responde. Protocolos que el servicio soporta. A donde mandar los mensajes. FORMATO DE UN ARCHIVO WSDL: A continuacin se muestra como es el formato bsico de un archivo WSDL. La especificacin completa de este lenguaje se puede encontrar en http://www.w3.org/TR/wsdl.html

Un archivo con formato WSDL bsicamente contiene los siguientes elementos:

Type: Describe los tipos no estndar usados por los mensajes (Message).

Message: Define los datos que contienen los mensajes pasados de un punto a otro.

PortType: Define una coleccin de operaciones brindadas por el servicio. Cada operacin tiene un mensaje de entrada y uno de salida que se corresponde con algn Message antes definido.

Binding: Describe los protocolos que se utilizan para llevar a cabo la comunicacin en un determinado PortType; actualmente los protocolos soportados son SOAP, HTTP GET, HTTP POST y MIME, siendo SOAP el ms utilizado.

Port: Define una direccin (URL) para un determinado Binding

Service: Define una coleccin de Ports.

El siguiente es un ejemplo de archivo WSDL: El mismo define dos mensajes (Simple.foo y Simple.fooResponse), luego define un mtodo llamado foo el cual recibe el mensaje Simple.foo y retorna el mensaje Simple.fooResponse. A continuacin se define un binding para el mtodo foo asocindolo con el protocolo SOAP. Por ltimo se da una URL fsica que implementa lo antes descrito.

<?xml version="1.0" encoding="UTF-8" ?>

<definitions name="FooSample"

targetNamespace=http://tempuri.org/wsdl/

xmlns:wsdlns=http://tempuri.org/wsdl/

xmlns:typens=http://tempuri.org/xsd

xmlns:xsd=http://www.w3.org/2001/XMLSchema

xmlns:soap=http://schemas.xmlsoap.org/wsdl/soap/

xmlns:stk=http://schemas.microsoft.com/soaptoolkit/wsdl-extension

xmlns="http://schemas.xmlsoap.org/wsdl/"> <message name="Simple.foo">

<part name="arg" type="xsd:int"/>

</message>

<message name="Simple.fooResponse">

<part name="result" type="xsd:int"/>

</message> <portType name="SimplePortType">

INTERFASE E IMPLEMENTACIN La estructura bsica de archivo con formato WSDL podra ser dividido en dos partes lgicas: la interfase del servicio, y la implementacin del mismo. Esta divisin lgica divide los elementos de la siguiente forma: Interface del servicio: Type, Message, PortType, Binding.

Contiene una definicin abstracta y reusable del servicio que puede ser instanciada y referenciada por distintos proveedores del mismo.

Implementacin del servicio: Port, Service. Contiene una implementacin de una determinada Interface del servicio.

A partir de esta divisin lgica se puede definir por medio de una Interfase del servicio una estndar para realizar, por ejemplo, ordenes de compras que puede ser reutilizada e implementada por todas las empresas, sin tener que redefinir cada una de ellas la interfase.

Si al igual que con SOAP se siente preocupado por la complejidad de los archivos WSDL de nuevo despreocpese; la mayora de los lenguajes de programacin proveen o proveern herramientas para generar en forma automtica el archivo WSDL a partir de un determinado mtodo o funcin.

UDDI (Universal Description, Discovery and Integration).

UDDI (www.uddi.org) es un proyecto inicialmente propuesto por Ariba, Microsoft e IBM; es un estndar para registrar y descubrir web services. La idea es que las distintas empresas registran su informacin acerca de los web services que proveen para que puedan ser descubiertas y utilizadas por potenciales usuarios. La informacin es ingresada al registro de empresas UDDI, un servicio lgicamente centralizado, y fsicamente distribuido a travs de mltiples nodos los cuales replican su informacin en forma regular. Una vez que una empresa se registra en un determinado nodo del registro de empresas UDDI la informacin es replicada a los otros nodos y queda disponible para ser descubierta por otras empresas.

EL ESQUEMA UDDI El modelo de informacin base utilizado por los registros UDDI es definido en un esquema XML. Este esquema define cuatro tipos bsicos de informacin, cada uno de los cuales proveen la clase de informacin que un usuario necesita saber para utilizar un web service de otra empresa. Los cuatro tipos de informacin son: Informacin del negocio.

Este tipo de informacin esta definido en el elemento businessEntity. Contiene informacin de la empresa, como ser su nombre, los contactos, el tipo de empresa, etc.

Informacin del servicio.

Dentro del elemento businnessEntity se encuentran los elementos businessServices, estos elementos contienen informacin sobre web services generalmente agrupados por procesos de negocio o categoras de servicios.

Informacin del enlace (binding). Dentro de cada elemento businessServices se encuentran los elementos bindingTemplate. Cada uno de ellos brinda una direccin fisica para hacer contacto con los servicios descriptos anteriormente.

Informacin sobre las especificaciones del servicio.

Cada bindingTemplate tiene asociado un tModel, el cual brinda informacon sobre las especificaciones del servicio, por ejemplo, como tienen que ser los mensajes que el servicio espera y responde, etc.

Un tModel puede ser asociado con elementos bindingTemplate de distintas empresas que brindan la misma especificain del servicio. Utilizando entonces los tModels se pueden encontrar todas las empresas que brindan tal servicio.

businessEntity tModel businnessEntity

bindingTemplate

Por ms informacin sobre el esquema UDDI: http://www.uddi.org/pubs/ProgrammersAPI_v2.pdf

API UDDI
El acceso al registro UDDI, ya sea para realizar bsquedas o para ingresar o modificar un registro, se puede realizar a travs de una pgina web que

implemente el acceso o utilizando ciertas interfaces (web services) que provee la especificacin de UDDI. Estas interfaces estn descriptas en una API, que puede ser dividida en dos partes lgicas, la API de consultas y la API de publicacin.

Por ms informacin sobre la API UDDI: http://www.uddi.org/pubs/ProgrammersAPI_v2.pdf

Un ejemplo
Las formas en que se puede realizar negocios utilizando web services es muy variada. El consumidor podra pagar por utilizar los servicios brindados por un proveedor, o el proveedor podra pagar para que aparezcan los servicios que l ofrece en un determinado consumidor, o incluso existen casos en los cuales ni el consumidor ni el proveedor pagan por consumir o proveer los servicios en forma respectiva. Este es el caso que se presenta a continuacin. El ejemplo es tomado de la vida real y es sobre la compaa area Southwest. En su portal http://www.southwest.com/ , esta compaa area permite hacer reservas de boletos, pero adems como valor agregado a los clientes permite hacer reservas de hoteles y reservas de alquileres de autos. Los datos para poder realizar estas reservas estn tomados de web services que brindan los distintos hoteles y rentadoras de autos. Este es un ejemplo de uso de web services en el cual ni el consumidor ni los proveedores pagan; a ambos le sirve este intercambio ya que la compaa de aviones le brinda un valor agregado a sus clientes, y los hoteles y rentadoras de autos estn expuestos a ser contratos por potenciales clientes. Es ms, estas empresas no publicaron sus servicios para que fueran exclusivamente utilizados por la compaa area, sino que los mismos pueden ser descubiertos y utilizados por cualquier empresa que los necesite. Claramente se muestra en este ejemplo el gran poder de los web services, y la ventaja que tendrn las empresas que los sepan utilizar en forma adecuada con respecto a las otras. Imagnese en este caso si usted fuera a reservar boletos de avin y pudiera elegir por una compaa que adems de reservar los boletos le permitiera hacer la reserva de hotel, y otra que no; por cual hara la reserva? Por otro lado imagine que usted es dueo de una rentadora de autos y sabe que su competencia esta brindando sus servicios en un portal de una compaa area y usted no, qu hara?.

XML
Introduccin
Hoy en da, se pueden encontrar muchsimos sitios web que brindan servicios on-line como por ejemplo reservas de asientos para espectculos, aviones, reportes meteorolgicos, etc.; para poder brindar estos servicios a los usuarios, los diseadores y los programadores web deben combinar los datos y la presentacin en un documento HTML. Muchas veces el proveedor de determinada informacin no es quien la va a procesar (sea esto publicarla en un sitio, ingresarla en una aplicacin, etc).

La necesidad de generar grandes cantidades de datos dinmicos y complejos por un lado y la necesidad de procesarlos y publicarlos por otro, han provocado la definicin de un formato de datos universal: XML.

Descripcin
La idea principal detrs de XML es el desarrollo de un lenguaje estndar de etiquetas (similar a HTML) para describir datos en forma estructurada. Este lenguaje debe poder ser interpretado tanto por computadoras como por seres humanos. Si una aplicacin en el servidor del servicio meteorolgico graba un documento XML con el reporte del tiempo y luego otro sitio web puede leer dicho documento, se puede publicar el estado del tiempo en forma automtica, sin necesidad de ingresarlo dentro de la aplicacin del sitio web cada da o convertir la informacin recibida.

El lenguaje XML est compuesto por etiquetas que describen el contenido del documento. Un elemento XML queda definido por una etiqueta de comienzo y otra de fin con el valor del elemento entre ambas etiquetas. Los elementos pueden estar anidados y adems pueden contener en forma opcional, uno o ms atributos. Los atributos son usados para adjuntar informacin secundaria a los elementos.

A continuacin se visualiza un ejemplo de un documento XML:

<weather-report> <date>March 25, 2000</date> <time>08:00</time> <area> <city>Montevideo</city> <country>Uruguay</country> </area> <measurements> <skies>partly cloudy</skies> <temperature>26</temperature> <wind> <direction>SW</direction> <windspeed>6</windspeed> </wind> <humidity>87</humidity> <visibility>10</visibility> </measurements>

</weather-report>

El ejemplo anterior est compuesto nicamente por elementos XML, pero el mismo podra redefinirse, de forma que la informacin correspondiente al rea estuviese representada por atributos, como se representa a continuacin:

<weather-report city=Montevideo country=Uruguay> <date>March 25, 2000</date> <time>08:00</time> <measurements> <skies>partly cloudy</skies> <temperature>26</temperature> <wind> <direction>SW</direction> <windspeed>6</windspeed> </wind> <humidity>87</humidity> <visibility>10</visibility> </measurements> </weather-report>

Si bien el hecho de estar compuesto por etiquetas hace que sea parecido a HTML, hay una diferencia muy importante: en un documento XML no hay informacin acerca de cmo deben ser presentados los datos. As, como HTML provee etiquetas especficas para formatear un documento, XML provee un marco para crear etiquetas. Resumiendo, XML es un lenguaje estndar definido por el Consorcio World Wide Web para permitir grabar y leer datos en forma estructurada con formato estndar independiente de aplicaciones y vendedores.

En GeneXus, se cuenta con funciones para el manejo de XML : XMLWriter, XMLReader.

PROTOCOLO SOAP
Introduccin
SOAP es un protocolo liviano basado en XML, para invocar procedimientos en forma remota (Remote Procedure Call). Utiliza cualquier protocolo que permita transportar mensajes de texto, siendo HTTP el ms utilizado.

Su especificacin describe el contenido que debe tener un mensaje XML para ser usado en una invocacin remota.

Cualquier aplicacin que cumpla la especificacin puede invocar y proveer servicios sin importar en que lenguaje o plataforma est implementado, lo nico necesario es que la aplicacin sea capaz de interpretar el mensaje SOAP que recibe, realizar el procesamiento que el mensaje requiera, y devolver otro mensaje SOAP con la respuesta.

En las aplicaciones generadas por GeneXus se utiliza SOAP para invocar a objetos en forma remota, usando HTTP como protocolo de transporte.

Alcance
Objetos llamadores (Clientes)
Objetos: Todos los objetos Lenguajes: C/SQL - Java - Visual Basic Visual FoxPro .Net Interfaces: Win/Web

Los objetos llamadores son los que invocan servicios mediante SOAP

Objetos llamados (Servidores)

Objetos: Procedimientos y Reportes Lenguajes: C/SQL - Java - Visual Basic .Net Interfaces: Web

Los objetos llamados son los brindan un servicio invocado mediante SOAP

Descripcin
Algunas de las ventajas de utilizar este protocolo en aplicaciones GeneXus son la posibilidad de desarrollar servicios web, asi como el poder hacer invocaciones entre objetos de diferentes generadores (por ej. llamar desde Visual Basic a Java, o desde C/Sql a Visual Basic), funcionalidad que no estaba permitida en versiones anteriores, excepto llamadas RPC desde los generadores visuales a los generadores CSql/Cobol/RPG.

Servidor
Para indicar en GeneXus que un objeto main va a ser llamado utilizando el protocolo SOAP, se deber seleccionar el valor SOAP en la propiedad Options/Call Protocol. Nos referiremos en adelante a dichos objetos como Servidores o Servicios web. Solo pueden ser reportes o procedimientos, sin ningn tipo de interfaz con el usuario.

Se requiere un servidor Web que haga el hosting de los servicios a ser invocados.

Los programas Servidores reciben la invocacin http, procesan el mensaje SOAP que enva el Cliente con sus parmetros, realizan la accin requerida, y generan otro mensaje SOAP de respuesta (eventualmente con los parmetros modificados).

Cliente
Los objetos que van a invocar al servicio web, a los que llamaremos Clientes, pueden ser cualquier objeto GeneXus. La invocacin se hace con el comando call() de GeneXus. Los programas Clientes realizan las tareas necesarias para ensamblar el mensaje SOAP, hacer la invocacin http, y desensamblar la respuesta, obteniendo los parametros modificados en forma automtica. Todo esto se realiza en forma automtica y transparente para el usuario.

Locations
Para indicar cual va a ser la ubicacin de los servicios invocados se utiliza un esquema conocido como Locations.

Manejo de errores

Comportamiento frente a un error

Si al hacer un llamado SOAP desde un objeto GeneXus se produce un error, normalmente la ejecucin del llamador se cancelar mostrando el error que ocurri.

Si el objeto llamado es un procedimiento o reporte GeneXus, es posible indicar que se detenga la ejecucin de los programas llamadores en caso de fallar la llamada. Esto se hace mediante la propiedad Cancel Caller Execution on Error:

Esta propiedad se habilita solamente cuando la propiedad Call Protocol tiene el valor SOAP. El valor por defecto es Yes. De tener valor No, la ejecucin no se cancelar y se podr obtener el cdigo numrico de error con la funcin GetSOAPErr(), y el mensaje de error mediante la funcin GetSOAPErrMsg().

Cdigos de error en el cliente

Los posibles cdigos de error que pueden ser retornados mediante la funcin GetSOAPErr() son los siguientes:

0: Operacin completada con xito. Mayor que 0 y menor que 10000: Algn parmetro retornado por el servidor no tiene el nombre esperado. El cdigo de error indica la posicin del parmetro que ocasion el conflicto. Menor que 0 y mayor que -10000: Sucedi un error al interpretar el XML de respuesta. Suceder por lo general si la respuesta no es XML o no es XML bien formado. Si se toma el valor absoluto del cdigo de error el resultado corresponder a un cdigo de error del objeto XMLReader. De todas formas, getSOAPErrMsg() retornar una descripcin del error.

Menor que -10000: Sucedi un error en la comunicacin HTTP. Si se toma el valor absoluto del cdigo de error y se le resta 10000 el resultado corresponder a un cdigo de error del objeto HTTPClient. De todas formas, getSOAPErrMsg() retornar una descripcin del error. -20001: La respuesta recibida es un XML vlido pero no es un mensaje SOAP vlido.

-20004: El servidor retorn que hay un error en el pedido SOAP realizado por el cliente. En este caso getSOAPErrMsg() retornar un mensaje conteniendo el cdigo y el mensaje de error retornados por el servidor. Si el servidor es un procedimiento o reporte GeneXus, retornar alguno de los cdigos de error descriptos ms abajo. -20006: Sucedi un error no identificado. En este caso getSOAPErrMsg() retornar un mensaje conteniendo el cdigo y el mensaje de error retornados por el servidor. -20007: Nombre de location no vlido. Sucede cuando se llama a la funcin GetLocation(Nombre) con un nombre de location que no est definido para ningn objeto en la KB.

Cdigos de error en el servidor

Un procedimiento o reporte GeneXus que es llamado mediante SOAP puede retornar alguno de los siguientes cdigos de error:

-20000: No se recibi un mensaje SOAP. -20001: El mensaje recibido es un XML vlido pero no es un mensaje SOAP vlido (igual que en el cliente).

-20002: El mtodo llamado no es el esperado. (El mtodo SOAP de los objetos GeneXus siempre se llama Execute).

Casos de Web Services en GeneXus

Proveedores
El Servidor o proveedor es un procedimiento o reporte main con la propiedad Call Protocol = SOAP. El archivo WSDL se genera automticamente.

Por la naturaleza del protocolo SOAP los programas generados con GeneXus pueden ser invocados por cualquier cliente SOAP, sea o no generado por GeneXus. La informacin acerca de cmo invocarlo se encuentra en el archivo WSDL (Web Services Description Language) que es generado automticamente. Dicho archivo se obtiene pasndole el parmetro wsdl a la URL del servicio, por ejemplo: http://localhost:80/c/sqlsolis/prg/nombredeprograma?wsdl En el caso particular en que el Cliente es cualquier objeto de la misma KB, la invocacin se resuelve haciendo un call() al Web Service. La ubicacin del Web Service se configura utilizando el esquema de locations. Los objetos Cliente y Servidor pueden estar generados con diferentes generadores, teniendo en cuenta la seccin Alcance: Cliente Servidor C/SQL C/SQL Java Visual Basic Visual FoxPro

(*)

(*)

(*)

(*)

Java Visual Basic Visual Fox

(*) El generador C/Sql adopt desde la versin 7.5 el SOAP como protocolo por defecto para las llamadas RPC, por lo que una llamada RPC a un programa C/Sql siempre se va a hacer va SOAP, no importando el generador con el que se genere el objeto llamador (con el valor Internal para la propiedad Call Protocol; en este caso no esta disponible la propiedad Cancel Caller Execution on Error, y cancelar el programa llamador en el caso de que se produzca un error en el programa llamado). Es posible a partir de esta caracterstica hacer llamadas RPC desde programas C/Sql hacia programas generados por cualquier generador que genere servicios SOAP. Por ejemplo es posible llamar desde un objeto main C/Sql a otro objeto main C/Sql, caracterstica no disponible hasta la versin 7.5 de GeneXus.

En caso en que el Servidor es un objeto externo a la KB, se cuenta a partir de la versin 8.0 de GeneXus con el WSDL Inspector. La invocacin se hara usando el WSDL Inspector desde la KB consumidora. En la versin 7.5, se resolvera creando en la KB del Cliente un objeto dummy con el mismo nombre y parmetros que el objeto Servidor, y haciendo un call() a dicho objeto desde el objeto Cliente.

NOTA: Se esta generando dentro del archivo WSDL de los servidores SOAP un elemento <documentation> que incluye el Help del objeto. Esto permite incluir en el WSDL informacin acerca del uso del Servicio, parmetros que recibe, para que sirve, etc. El elemento tiene los siguientes subelementos:

<documentation> <URL>Character</URL> <line>Character</line> <line>Character</line> . . </documentation>

En el elemento URL se indica la URL al Help HTML del objeto que se genera. En los elementos line se genera el Help del objeto. Solo la parte de texto es generada, ignorndose el resto. Se generan lneas con un mximo de 80 caracteres, en caso de que la lnea de Help sea mas larga, se generan tantos elementos line como sean necesarios.

Consumidores a Web Services externos

Usando GeneXus 8.0 o posterior se utiliza el WSDL Inspector, que permite importar la definicin del servicio que se desea consumir.

Igualmente en la versin 7.5 es posible invocar a un servicio web externo utilizando los tipos de datos HttpClient, XmlWriter y XmlReader.

WEB SERVICES CON GENEXUS

A continuacin se detallarn los mecanismos para proveer y consumir web services con GeneXus.

Proveer
Para proveer web services con GeneXus se debe definir un objeto procedimiento o reporte, que debe ser de tipo main, y asociado a un generador Web.

Se debe configurar la propiedad de objeto Call protocol con el valor SOAP.

Se debe publicar el objeto en un web server, con lo que el web service queda operativo para ser invocado.

El WSDL del servicio queda disponible agregando el parmetro wsdl a la URL del mismo. Por ej.:

http://server/baseurl/aservice.aspx?wsdl

Estas funcionalidades estn disponibles a partir de la versin 7.5 de GeneXus.

Consumir
Usando GeneXus 8.0 o posterior:
Se utiliza el WSDL Inspector, que permite importar la definicin del servicio que se desea consumir. Se debe indicar el WSDL del mismo, y el utilitario definir los tipos de datos necesarios para poder consumirlo desde GeneXus.

En el caso de que el web service utilice tipos de datos estructurados, los mismos sern agregados a la base de conocimiento al importar la definicin con el WSDL Inspector.

Adems, es necesario configurar la propiedad de objeto Location. Esto servir luego para configurar, en los objetos GeneXus que vayan a invocar al web service, la ubicacin del mismo (host, port, etc).

CREACION DE WEB SERVICE GENEXUS

En esta seccin crearemos un Web Service GeneXus, y veremos como consumirlo desde una aplicacin GeneXus.

Supongamos que quisiramos publicar un servicio de nuestro sitio web, por ejemplo un ranking con las 10 pelculas ms vendidas.

Vamos a definir entonces un Web Service al que llamaremos Ranking.

Lo primero es definir un SDT con las siguientes caractersticas, que nos permita almacenar la informacin de las pelculas que nos interesa publicar:

Nombre: Moviesdt

Structure

Type

MovieId MovieTitle

Identifier Character(60)

Moviesdt ser una Collection.

Haga clic aqu para ver la demostracin

Para programar el procedimiento Ranking se recorre la tabla Movies en forma descendente por MovieQtity, que indica para una pelcula en particular, qu cantidad ha sido vendida. De esa forma, obtendremos las 10 ms vendidas.

Definiremos una variable que nos permita contar la cantidad de pelculas: &Qty, ms una variable que permita almacenar toda la coleccin de pelculas ms vendidas (Movie) junto con una variable que cargue cada uno de los items de esa coleccin de pelculas (MovieItem).

Las variables a definir entonces son las siguientes:

Name

Type

Qty Movie MovieItem

N(2) S(Moviesdt) S(Moviesdt.MoviesdtItem)

&Qty = 1 for each (MovieQtity) &MovieItem.MovieId = MovieId &MovieItem.MovieTitle = MovieTitle &Movie.Add(&MovieItem) &MovieItem = new Moviesdt.MoviesdtItem() &Qty +=1 if &Qty > 10 exit endif endfor

Rules: parm(out:&Movie);

Haga clic aqu para ver la demostracin.

Observe que es necesario que el procedimiento sea main, y configurar la propiedad Call protocol con el valor SOAP.

Luego de generar y compilar el procedimiento Ranking, verifique el Web Service generado automticamente por GeneXus, digitando la siguiente URL en el browser:

http://localhost/services/aranking.aspx?wsdl

Creacin del Consumidor del Web Service

A continuacin crearemos un web panel que ser el consumidor del Web Service Ranking recientemente creado.

En general un Web Service ser externo a la KB, por lo cual vamos a crear una nueva base de conocimiento para crear ese web panel al que llamaremos ViewRanking.

1. Creacin de una nueva base de conocimiento, de nombre Consumer Haga clic aqu para ver la demostracin.

2. Desde diseo, ejecutar el WSDL Inspector, (Tools->WSDL Inspector). En web service URL colocar la siguiente URL http://localhost/services/aranking.aspx?wsdl y clickear en el botn Inspect

Observe que el mtodo del Web Service es Execute y el tipo de datos que devuelve es Moviesdt.

Cuando Clickeamos en el botn Add Reference se definen los tipos de datos adems de toda la informacin necesaria para poder consumir el Web Service.

Pasar a prototipo forzando el impacto.

Haga clic aqu para ver la demostracin.

3. Vamos a crear el web panel ViewRanking, para eso definiremos las siguientes variables:

Name MovieId MovieTitle Movie MovieItem Rank

Type N(3) Character(60) S(Moviesdt) S(Moviesdt_MoviesdtItem) O(org_tempuriaction_.Ranking)

Observe que los tipos de datos Moviesdt (coleccin de pelculas), Moviesdt_MoviesdtItem (cada item de la coleccin) y org_tempuriaction_.Ranking (Web Service) se crearon automticamente al inspeccionar el servicio con el WSDL Inspector.

El form del web panel ViewRanking contendr un grid con las variables &MovieId y &MovieTitle.

Programaremos los eventos Refresh y Load del web panel, como se muestra a continuacin:

Event Refresh &Movie = &Rank.Execute() //aqu se invoca la ejecucin del Web Service y se carga la coleccin en la //variable &Movie EndEvent // Refresh

Event Grid1.Load for &MovieItem in &Movie //se recorre la coleccin y se carga el grid &MovieId = &MovieItem.MovieId &MovieTitle = &MovieItem.MovieTitle load endfor EndEvent // Grid1.Load

Haga clic aqu para ver la demostracin.

Ejecute el web panel ViewRanking y observe como se obtiene la informacin requerida.

EJEMPLO DE CMO CONSUMIR UN WEB SERVICE EXTERNO

Una de las caractersticas interesantes de los web services, es que podemos agregar valor a nuestro sitio web, sin necesidad que el usuario deba ir a otro sitio. Es importante evitar perder el usuario al llevarlo a otras paginas web.

Lo que queremos ver en esta seccin es como incluir un web service externo no GeneXus en nuestra aplicacin (Ya hemos visto en este captulo un ejemplo de como crear y consumir un web service hecho con GeneXus).

Lo que haremos es importar un web service que prove Google. Google es una compaa especializada en la bsqueda de informacin en la web. En su pgina web (http://www.google.com) se puede ingresar una lista de palabras por las cuales buscar y retorna todos los sitios web en las cuales encontr esas palabras. Esta misma funcionalidad Google la provee por medio de un web service. El WSDL de dicho web service es: http://api.google.com/GoogleSearch.wsdl

El WSDL Inspector permite a partir del WSDL de un web service definir los tipos de datos necesarios en GeneXus para poder consumir el web service en forma transparente, sin tener que preocuparse de los protocolos involucrados en el proceso y la definicin del mismo.

Que es wsdl? WSDL es un lenguaje basado en XML que se utiliza para describir un web service. Un archivo con formato WSDL provee informacin de los distintos mtodos (operaciones) que el web service brinda y sus parmetros, muestra cmo accederlos y que formatos deben de tener los mensajes que se envan y se reciben.

Entonces, el procedimiento a seguir para incluir el web service de Google en el sitio de pelculas es el siguiente:

Ejecutar el WSDL Inspector (Tools/WSDL Inspector en el modelo de diseo). En Web Service URL ingresar: http://api.google.com/GoogleSearch.wsdl. Presionar el botn Inspect. Notar que el WSDL Inspector determin que el web service tiene los siguientes mtodos: doGetCachedPage, doSpellingSuggestion y doGoogleSearch (este ltimo es el que luego vamos a consumir).

Notar en el costado inferior izquierdo los tipos de datos complejos que va a crear GeneXus para consumir el web service en forma adecuada. Presionar el botn Add Reference para que GeneXus cree en la base de conocimientos todo lo necesario para consumir el web service. Cerrar el WSDL Inspector. Impactar el modelo de diseo.

Haga clic aqu para ver la demostracin

A continuacin es necesario consolidar el GoogleSearch.xpz, que contiene el web panel GoogleSearch donde vamos a consumir el web service de Google.

En ese web panel, crear las siguientes variables:

NOMBRE Ws Return ResultElements ResultElement

Tipo
GoogleSearch.GoogleSearchService GoogleSearchResult ResultElementArray ResultElement

Ya estn definidas en el xpz el resto de las variables necesarias para hacer el ejercicio.

Luego, debemos programar el evento search.click de la siguiente forma:

Event search.click &Key = "3yHXpPZQFHKdexiyPjqTPYNqVvnYj8cZ" &MaxResult = 10 &Filter = 1 &SafeSearch = 1 &Return= &Ws.doGoogleSearch(&Key,trim(&Query),&Start,&MaxResult,&Filter, &Restrict,&Safesearch,&Lr,&Ie,&Oe)

&ResultElements = &Return.resultElements &searchTime = &return.searchTime EndEvent

En este evento se realiza la invocacin al mtodo doGoogleSearch del web service. Los resultados son devueltos en una Collection de un tipo de datos estructurado, el que es definido automticamente en GeneXus por el WSDL Inspector.

Programar el evento Load de la grilla de la siguiente forma:

Event Grid1.Load For &ResultElement in &ResultElements Title.Caption = &ResultElement.title &url = &resultElement.URL Title.LinkTarget = "_BLANK" Title.Link = link(&ResultElement.URL) &Summary = &ResultElement.snippet &cachedsize = &resultelement.cachedSize grid1.Load() Endfor EndEvent

En este evento se recorre la Collection con los resultados devueltos por el web service y se realiza la carga del grid.

Haga clic aqu para ver la demostracin.

Especificar, generar, compilar y ejecutar el web panel GoogleSearch.

Haga clic aqu para ver la ejecucin.

Nota: La especificacin del web service del ejemplo, se puede leer de: http://www.google.com/apis/reference.html

INTRODUCCIN AL CAPTULO 11
Cada vez mas, el uso masivo de Internet propicia el desarrollo de aplicaciones de mayor versatilidad y complejidad para ambiente Web. Es por esto que est surgiendo la necesidad de aplicar una reingeniera a las aplicaciones existentes y tambin, en muchos casos, la necesidad de desarrollar nuevas aplicaciones para Internet.

Existen varias diferencias entre los ambientes GUI (aplicaciones con Interfaz de Usuario Grafica) y WEB, las que debern evaluarse al momento de determinar la conveniencia del tipo de aplicacin a desarrollar.

En este captulo veremos los principales aspectos a ser tenidos en cuenta para los usuarios GeneXus.

COMPARACIN GUI WEB

Objetivo.

El objetivo de este artculo es brindar una herramienta de referencia, para asistir en la decisin de migrar o desarrollar una aplicacin con interfaz de usuario grafica (GUI), o una aplicacin web. Para analizar las diferencias entre los dos tipos de aplicaciones se compararn las ventajas y desventajas de las aplicaciones web frente a las aplicaciones GUI.

Existe otro articulo (Conversin de Aplicaciones GUI a WEB) sobre esta misma temtica en donde se dan los detalles tcnicos de cmo realizar esta tarea, por lo que aqu no se mencionarn esos detalles.

Introduccin.

Aplicaciones con interfaz de usuario grfica.

Las aplicaciones con Interfaz de Usuario Grafica (GUI) estn compuestas por uno o varios programas GeneXus que utilizan objetos de tipo, transaccin, work panel, procedimientos y reportes.

Aplicaciones Web.

Se entender por aplicaciones Full Web a aquellas aplicaciones en las que la interfaz del usuario es nicamente realizada utilizando el lenguaje HTML y son accedidas desde un browser. En GeneXus estas aplicaciones se implementan con objetos web como web panels o Transacciones Web. El lenguaje HTML es un lenguaje de marcas (tags) para la estructuracin de un documento. Si bien el lenguaje es estndar, en la prctica, cada browser toma algunas partes de la especificacin, agrega e ignora otras. Como consecuencia de esto una aplicacin Web puede quedar levemente distinta segn el browser que se utilice.

Caractersticas de las aplicaciones Web.

Ventajas de las aplicaciones Web.

Una aplicacin Web tiene diversas ventajas frente a las aplicaciones GUI. INSTALACIN.

Las aplicaciones Web presentan varias ventajas tanto en la instalacin y actualizacin como en los requerimientos necesarios para utilizarlas.

Cliente fino. Para utilizar la aplicacin Web solo se necesita un browser. Los browsers son distribuidos por Internet y no tienen costo. Generalmente vienen incluidos al instalar el sistema operativo. Adicionalmente se pueden instalar plugs-in, que son programas que agregan funcionalidades adicionales al browser. Un ejemplo muy comn es el plug-in de Acrobat, utilizado para visualizar archivos en formato PDF o plugs-in para video o sonido.

Flexibilidad en software y hardware en el cliente. En las aplicaciones Web, el cliente puede tener instalado cualquier sistema operativo en cualquier versin. Las aplicaciones Web no utilizan tantos recursos de hardware por lo que el costo de las computadoras clientes es menor y no necesita actualizaciones frecuentes.

La aplicacin solo se instala en el servidor. Generalmente la instalacin y actualizacin de aplicaciones GUI en arquitecturas cliente / servidor implica, alguna instalacin en las computadoras cliente. En el caso de aplicaciones Java GUI, esta instalacin es automtica, pero tambin existe ya que es necesario bajar la aplicacin. En el caso de una aplicacin web no se requiere ninguna instalacin adicional a la del browser, para poder accederla o acceder a otras aplicaciones web. ESCALABILIDAD.

Las aplicaciones Web utilizan una arquitectura de tres capas compuesta por la capa cliente, donde est nicamente el browser, la capa del Servidor Web donde esta la aplicacin y la capa de datos donde se encuentra la Base de Datos. Capa Cliente Capa Servidor Web Aplicacin Web Capa
Browser

BD
Arquitectura en tres capas.

de Datos

Esta arquitectura presenta varias ventajas en cuanto a la escalabilidad.

Escalabilidad de usuarios. En la concepcin de la aplicacin, no se tiene en cuenta la cantidad de usuarios que van a utilizarla. Es decir que la misma aplicacin puede ser utilizada por algunos pocos usuarios o varios cientos. El limite estar determinado por el desempeo de la aplicacin, que depende principalmente de la potencia de los servidores y las caractersticas de la red. Una ventaja de la arquitectura en tres capas es que no es necesario pagar nuevas licencias por cada nuevo usuario que accede a la aplicacin (por ejemplo los drivers de acceso a la base de datos se pagan por cantidad de usuarios concurrentes).

Escalabilidad de servidores. El desempeo de la aplicacin depende directamente de la potencia de los servidores en la que este instalada. Se puede migrar la aplicacin a servidores ms potentes, sin necesidad de que los usuarios cambien el modo en que acceden a la aplicacin.

INDEPENDENCIA.

Acceso. La aplicacin puede ser accedida desde cualquier lugar que cuente con acceso a Internet. Esto puede tener un fuerte impacto en el modo de trabajo ya que se pueden acceder a las aplicaciones desde la oficina, el hogar o incluso desde otros pases.

Hosting Services Provider (HSP). La aplicacin puede ser instalada en un centro de computo propio o puede contratarse un Hosting Service Provider (son empresas que proveen un centro de computo para aplicaciones Web) e instalarla en los servidores del HSP. Para los usuarios, el acceso a la aplicacin es independiente de donde este instalada.

INTERFAZ GRFICA.

Uniformidad. La forma de navegar por la aplicacin web ser siguiendo links o presionando botones y si bien hay mas opciones, estas son las ms comunes y se mantendrn por toda la aplicacin. Si bien este modo de interaccin es limitado con respecto a las aplicaciones GUI, al ser tan simple y uniforme en toda la aplicacin, al usuario final le resultar sencillo e intuitivo aprender a utilizar nuevas funcionalidades.

El diseo grfico es realizado por expertos. Un aspecto sumamente importante en la interfaz grafica de una aplicacin Web es el diseo grafico. Este aspecto sumamente delicado se deja a cargo de diseadores grficos especializados, que hacen que las aplicaciones tengan aspectos atractivos y funcionales.

El trabajo con los diseadores grficos sigue pautas similares a la metodologa de prototipacin utilizada en el desarrollo de aplicaciones GeneXus. Cuando los diseadores tienen listo un prototipo, es conveniente que los desarrolladores lo evalen para validarlo desde el punto de vista del desarrollo. Para esto se cuenta a partir de la versin 8.0 de GeneXus, con el Editor de Temas, herramienta que puede ser usada tanto desde GeneXus como en forma independiente, por lo cual flexibiliza notablemente la interaccin con el diseador grfico, adems de todas las ventajas adicionales que trae el uso de Temas en el diseo de la aplicacin WEB. Por detalles sobre Temas ver el documento Themes

Al evaluar un diseo hay que tener en cuenta ciertos aspectos: Impacto del diseo de las pginas Web finales. Si se utilizan demasiadas imgenes, con muchos botones, el tamao final de la pgina, puede ser excesivamente grande, por lo que se demorar mucho el acceso. La recomendacin es cuidar de que las imgenes sean de pocos Kbytes. Los links de texto son muy livianos, en el caso de una aplicacin muy accedida, puede ser conveniente utilizarlos. Los sitios web de Amazon y Yahoo, son buenos ejemplos de interfaces livianas, con pocas imgenes y muchos links de texto. El diseo debe ser consistente. Por ejemplo la tipografa, los colores, la ubicacin de botones, etc. debe seguir una pauta bien definida, que los desarrolladores deben respetar al mximo. El diseo debe ser simple y sencillo. El exceso de detalles grficos, puede complicar el desarrollo y evolucin del sitio. El diseo debe ser robusto de modo de poder soportar evoluciones, y nuevos requerimientos. Componentizacin. Es muy importante que la estructura de las pginas pueda ser separado en componentes, de modo de poder reutilizar los mismos objetos para simplificarle al usuario el conocimiento del sitio. En GeneXus esto, se implementa utilizando Web Components.

Mantenimiento. La posibilidad de desarrollar una pgina dividida en Web Components, permite tratar cada componente en forma independiente. Esto no solo hace las interfaces ms robustas frente a cambios y extensiones, sino que adems al cambiar un componente, se reflejan los cambios en todas las pginas que lo incluyen. O sea que no es necesario reprogramar todas las pginas, solo el componente adecuado, haciendo del mantenimiento de la aplicacin sencillo.

Integracin de nuevas aplicaciones. La interfaz con el usuario se puede personalizar dinmicamente, de acuerdo a las caractersticas del usuario. Por ejemplo con menes donde las opciones se cargan dinmicamente, segn las aplicaciones a las que puede acceder el usuario. De este modo se logran aplicaciones mas integradas y donde es ms sencillo incorporar nuevas aplicaciones.

Interfaz multimedia. Es muy sencillo incluir en las aplicaciones web caractersticas multimedia como audio, video, imgenes, etc.

APPLICATION SERVICE PROVIDERS Y SERVICIOS WEB. Los Application Service Providers (ASP), son empresas que brindan servicios y soluciones, basadas en software, a travs de Internet. Ejemplos muy comunes de ASP en portales de Internet son los proveedores de noticias, banners, clima, etc. Tener aplicaciones web habilita a la empresa a funcionar como ASP, brindando como servicio el uso de las aplicaciones web desarrolladas. Tambin habilita a contratar a otros ASP para potenciar las aplicaciones propias. INTEGRACIN DE APLICACIONES INTERNET E INTRANET. Las aplicaciones web desarrolladas pueden ser utilizadas en Internet o en una Intranet, para uso interno. Adems las aplicaciones web ya existentes, utilizadas en la Intranet pueden ser integradas a las nuevas aplicaciones web desarrolladas.

EXTENSIONES CON JAVA Y JAVASCRIPT. En las aplicaciones Web se pueden incorporar extensiones en lenguajes como Java y JavaScript. Para controlar distintos aspectos de la interaccin con pginas web se utiliza el lenguaje JavaScript. El cdigo escrito en este lenguaje es incorporado en el HTML e interpretado por el browser. Java es un lenguaje de programacin muy potente, entre sus propiedades, se destaca la de ser multiplataforma. Esto quiere decir que las aplicaciones desarrolladas en Java pueden ejecutarse en cualquier sistema operativo y cualquier plataforma de hardware. Esta propiedad lo hace especialmente atractivo para aplicaciones que ejecutan a travs de Internet. Por lo tanto se pueden incorporar aplicaciones GUI desarrolladas en Java, para potenciar la aplicacin web.

MLTIPLES FORMAS DE ACCESO. Mltiples tecnologas como computadores de bolsillo y telfonos celulares estn teniendo un fuerte desarrollo, principalmente como formas alternativas de acceso a Internet. Las caractersticas de hardware de estos dispositivos hacen que las aplicaciones web sean las mas adecuadas. La principal diferencia con las aplicaciones web para estos dispositivos es el tamao reducido de la pantalla. Si bien es necesario crear una versin particular para el dispositivo, se puede reutilizar mucho conocimiento de una aplicacin web ya desarrollada.

Inconvenientes de las aplicaciones web.

En la siguiente seccin se discuten las desventajas que presentan las aplicaciones web frente a las aplicaciones GUI.

Es necesaria una reingeniera de la aplicacin. El lenguaje HTML presenta ciertas limitaciones que implica que migrar aplicaciones GUI a aplicaciones Web no sea una A S tarea automtica. Entre los puntos que deben tenerse en cuenta al realizar la reingeniera de la aplicacin sep destacan los siguientes: e lr i v Seguridad. Es imprescindible tener un esquema de seguridad en la aplicacin, de c i modo de restringir el acceso a determinadas aplicaciones. Este puede basarse en a d definir roles con determinados accesos o un esquema en el cual a cada usuario se le o asignan permisos particulares. c otro lado la aplicacin puede requerir que algunas Por i r aplicaciones particulares necesiten un esquema mas fuerte de seguridad y requieran pginas Web seguras y servidores seguros. n W e Transacciones e Integridad transaccional. Las Transacciones Web utilizan la misma b arquitectura que los Web Panels. En la figura se ve la secuencia de acciones que W ocurren al someter las Transacciones Web al servidor. e b Respuesta HTML del programa F O R M

Browser

Funcionamiento de las Transacciones Web y Web Panels.

El tiempo de vida de las UTL (unidades de trabajo lgicas) en los objetos web, se mantiene nicamente durante la ejecucin del objeto. Cuando la ejecucin termina se deben hacer commit o roll back. Por lo tanto no es posible definir una UTL a travs de varias Transacciones Web. Sin embargo, es posible mantener la UTL a travs de varios procedimientos que se invoquen unos a otros, siempre que se mantengan dentro de la misma ejecucin. En las aplicaciones GUI es comn encontrar que durante varias transacciones se van ingresando datos y luego en la ltima transaccin se hace el commit de todos los datos ingresados, por lo que se deben contemplar estos casos en la reingeniera de la aplicacin. Las alternativas posibles a esta situacin son:

Unificar todas las transacciones GUI en una sola Transaccin Web. Dividir el proceso de ingreso en varias etapas y utilizar mltiples Transacciones Web. Al finalizar el ingreso podra tenerse un procedimiento que valide que el ingreso en varias etapas es consistente. Ingresar toda la informacin en tablas temporales y luego ingresar la informacin a la base de datos mediante procedimientos.

Validacin de datos. La validacin se realiza a nivel de todo el documento. Esto implica que en un documento con cabezal y lneas no se puedan ejecutar reglas al pasar del cabezal a las lneas o luego de ingresar un valor, etc. Por lo tanto la validacin de todos los datos se realiza cuando se completa toda la informacin y se presiona el botn de confirmacin, si los datos cumplen las reglas, entonces el botn de confirmacin cambia para que se ingresen efectivamente los datos. Tambin es posible trabajar sin confirmacin y en este caso si la informacin cumple las reglas se ingresa directamente a la base de datos.

Limitacin entre la interaccin de objetos GeneXus. La interaccin entre objetos GeneXus, en aplicaciones web es mas limitada que la interaccin en aplicaciones GUI. Las Transacciones Web y los Web Panels pueden ser invocados entre s, y ambos pueden invocar a procedimientos. Desde objetos web no es posible invocar objetos no web como transacciones, work panels y reportes, aunque para los reportes existe la posibilidad de generarlos en formato PDF. Este tipo de comportamiento que puede encontrarse en una aplicacin GUI, debe ser tratado en la reingeniera de la aplicacin.

Diferencias en los Work Panel Trabajar con. En las aplicaciones Web, los work panels de tipo Trabajar con presentan algunas diferencias que en las aplicaciones GUI. El alto de la pantalla cambia, dependiendo de la cantidad de lneas del subfile. En las aplicaciones GUI, el tamao de los formularios se determina en el diseo de este y queda fijo en el momento de ejecucin. En las aplicaciones Web, el tamao de la pgina web se puede extender (horizontal o verticalmente) si se presentan muchas lneas en los grids. La seleccin de lneas es diferente. En las aplicaciones GUI, las lneas se seleccionan al hacer clic en ellas, adems se puede seleccionar un rango de lneas, continuo o con lneas salteadas, todo esto sin necesidad de programacin extra. En las aplicaciones Web, la seleccin mltiple de lneas debe programarse mediante campos de chequeo. Una posibilidad es permitir la seleccin de mltiples lneas y utilizar el carrito de compras (se describe ms adelante). Se puede usar la propiedad AllowSelection de los grids para que sea posible seleccionar de a una lnea.

El modelo del carrito de compras. El carrito de compras, es muy utilizado en los sitios web con e-commerce y permite recordar los objetos que compra los usuarios. En el carrito de compras se van seleccionando distintos items que se desean comprar. El carrito mantiene almacenado

el contenido hasta que el dueo decide comprar alguno o todos los items. Esta idea resulta practica en casos como estos: Factura de compras. La factura se va armando seleccionando los elementos que la componen: lista de productos disponibles, lista de clientes, formas de pago, monedas, etc. Cuando se termino de armar, se construye la factura con toda la informacin del carrito. Si se quiere realizar alguna accin a una serie de lneas en un Trabajar con, se pueden ingresar en el carrito y luego automticamente se van presentando una a una las paginas adecuadas para la accin determinada, hasta vaciar el carrito.

Ejecucin en el servidor. A diferencia de las aplicaciones GUI cliente / servidor, donde pueden ejecutarse acciones tanto en el cliente como en el servidor, en las aplicaciones web, solo se pueden ejecutar acciones en el servidor. Podra decirse que el cliente prcticamente no tiene capacidad de computo, adems como se mencion anteriormente tampoco tienen memoria. Es decir que no es posible definir un valor, almacenarlo en la computadora del cliente y luego recuperarlo. Sin embargo hay algunas alternativas: Cookies. Son archivos de texto, que quedan salvados en las computadoras cliente. En ellos se puede guardar variables y luego recuperar su valor. Aunque browser permite al usuario a opcin de deshabilitar el uso de cookies, son ampliamente utilizadas. Pasaje de parmetros. En este mtodo se utiliza el pasaje de parmetros entre los objetos web para el pasaje de informacin. Todos los objetos web de la aplicacin tendrn los primeros parmetros iguales, en donde se pasarn datos comunes a toda la aplicacin, como nmero de cliente, etc. y luego tendrn parmetros especficos de cada uno. La ventaja de este mtodo es que los usuarios que no permiten cookies no tienen problemas en utilizar la aplicacin, la desventaja es que los cambios en los parmetros tienen un fuerte impacto. Como el pasaje de parmetros se realiza a travs de la url de la aplicacin y los browsers permiten que se vea esa url, el usuario puede ver el valor de los parmetros, e incluso modificarlos. Sin embargo, GeneXus brinda la posibilidad de encriptar los parmetros en forma transparente al desarrollador, esto es importante porque se puede pasar nmeros de cliente, nmeros de factura, etc. en forma segura. Crear sesiones. Este mtodo mantiene la informacin en sesiones que son almacenadas en la base de datos. Por cada usuario que utiliza la aplicacin debe crearse su sesin particular. Adems debe ser complementada con el pasaje de parmetros o cookies para recuperar el nmero de sesin. La ventaja sobre el mtodo anterior es que si se necesita almacenar mas informacin se afecta solo los objetos que necesitan esa informacin.

Infraestructura de hardware. La performance de una aplicacin Web depende en gran medida de la cantidad de usuarios concurrentes accediendo a la aplicacin, el ancho de banda de la

conexin y la potencia de los servidores. Por lo tanto los servidores (web y de base de datos) y el ancho de banda de salida debe ser adecuado a la cantidad de usuarios esperada. Tambin es imprescindible un esquema fuerte de seguridad principalmente de la base de datos. Una aplicacin web debe estar disponible los 7 das de la semana, durante las 24 horas del da. Esto implica un servicio de alta disponibilidad en el cual posiblemente se maneje redundancia de servidores y de informacin.

Conclusiones.

Las aplicaciones web son una nueva alternativa a las aplicaciones de interfaz grafica. Ambos tipos de aplicacin tienen sus caractersticas propias por lo que en cada aplicacin se debe evaluar si conviene realizarla como web o GUI. Los puntos discutidos en este articulo pueden ser considerados como una gua para tomar esta decisin. Como requisito para tomar una decisin correcta se debe comprender:

El funcionamiento de la interfaz web y las limitaciones que ello trae como consecuencia. Las limitaciones en la integridad transaccional.

Algunos puntos a tener en cuenta para evaluar la creacin o migracin a aplicaciones web son:

Requerimientos y proceso de instalacin de la aplicacin final Ambiente en donde se ejecute la aplicacin. Requerimientos en el acceso. Interfaz grfica en cuanto a facilidad de uso, diseo grafico atractivo y capacidades multimedia. Acceso desde mltiples plataformas como computadoras de bolsillo, etc. Requerimientos de seguridad en la aplicacin. Complejidad en las transacciones GeneXus, especialmente en la validacin de datos y disparo de reglas. Restricciones en la interaccin de objetos GeneXus. Debe ser evaluado cuidadosamente en el caso de migrar una aplicacin GUI a web. Servidores. En las aplicaciones web la ejecucin se realiza completamente en el servidor.

Como punto final hay que tener en cuenta evolucin de la aplicacin en cuanto a la creacin de nuevos mdulos, cantidad de usuarios y mantenimiento.

CONVERSIN DE APLICACIONES GUI A WEB

Objetivo

El objetivo de este documento es describir los principales aspectos tcnicos a tener en cuenta al momento de convertir una aplicacin GeneXus de tipo GUI-Windows a una aplicacin Web.

Introduccin

Aplicacin GUI
Entendemos como aplicacin GUI (Graphic User Interface) a toda aquella que tiene interfaz grfica Windows, compuesta bsicamente por los objetos transacciones, work panels, procedimientos y reportes, generadas con los generadores GeneXus Visual Basic, Visual Fox, Java y .Net.

Aplicacin Web
Una aplicacin Full Web tiene una interfaz HTML (HyperText Markup Language) y se ejecuta dentro de un browser. Este tipo de aplicaciones se desarrolla bsicamente con los objetos Web de GeneXus: web panels y web transactions. Se generan con cualquiera de los generadores Web: Visual Basic, Java, .Net y C/SQL

Reingeniera de la aplicacin
La premisa fundamental para convertir una aplicacin WIN a WEB es que los ambientes implicados (grfico, html) son diferentes y por lo tanto la conversin implicar algo mas que la mera conversin de los objetos. Deber programarse con estilo web.

En este documento centralizamos consideraciones a tenerse en cuenta para los diferentes objetos y modalidades de programacin.

La conversin de los objetos implica: 1. Conversin de Work Panels 2. Conversin de Transacciones 3. Conversin de Reportes

1. Conversin de Work Panels a Web Panels

Una posibilidad para realizar la conversin de los Work Panels a Web Panels es utilizar la facilidad de SAVE AS que brinda GeneXus. De esta forma, se convierte en forma automtica el form grfico al form html y se mantiene toda la lgica del objeto. Algunos controles WIN no

son soportados en WEB (por ejemplo el tab control), con lo cual no siempre es automtica la conversin de un form a otro. Otra posibilidad es crear un nuevo objeto (Web panel) y copiar la lgica del work panel hacia el web panel. Observe que se debe revisar la lgica ya que existen ciertas diferencias en la interfaz que obligan a cambios en la programacin.

Se recomienda leer el documento Comparacin entre Web Panels y Work Panels donde se comparan generalidades de ambos tipos de objetos.

NOTA Luego de convertir el objeto, se debe editar el cdigo HTML del mismo y quitar los tags <pre> y </pre> que quedan al principio y al final respectivamente del mismo. Hay que tener en cuenta que la conversin no crea una tabla con los controles dentro, por lo tanto al quitar los tags mencionados anteriormente la pantalla se desarma y quedan todos los controles juntos. Se aconseja por lo tanto, crear primero una tabla donde se pueden arrastrar los controles y finalmente quitar los tags <pre> y </pre>

2. Conversin de Transacciones a Transacciones Web

Se cuenta con un form HTML default por cada transaccin web (con los atributos de la transaccin, as como los controles propios de Transacciones Web, como ser el Error Viewer). Luego ese form se puede modificar a gusto del programador. En algunos aspectos, el comportamiento de las Transacciones Web es diferente al de las Transacciones con interfaz grfica por lo tanto se recomienda la lectura del documento Transacciones Web.

3. Conversin de Reportes

Una posibilidad para manejar reportes es programar un webpanel, de forma que el usuario final pueda imprimirlo con las opciones de impresin del browser.

Otra posibilidad como solucin a la necesidad de implementar un reporte en ambiente WEB es generar un reporte con salida PDF.

Diferencias entre los ambientes y como manejarlas

Work Panel Trabajar con
Es muy comn el uso de web panels del estilo Trabajar con donde se despliega un grid con registros y una cantidad de opciones aplicables a cada una de las lneas del mismo. Por ejemplo: 2 Modificar, 3 Visualizar, etc.

MANEJO DE OPCIONES

En el objeto Web Panel, existen algunas alternativas para implementarlo: 1. Agregar en el grid una variable de tipo Combobox y programar las diferentes acciones en el evento Clic de la misma. 2. Definir una imagen o un text block en el grid por cada una de las opciones y programar la accin en el evento clic. 3. Si se utiliza un grid free-style, puede utilizarse en lugar de una imagen con el evento CLIC, un botn para cada una de las opciones. 4. Configurar la propiedad AllowSelection del grid. FILTROS
Si un Web Panel Trabajar con tiene variables que se aplican como filtro a los registros desplegados en el grid, al seleccionar un registro y llamar a otro objeto (por ej. Transaccin Web) que tiene un return, se vuelve al Web Panel Trabajar con pero se pierden los valores ingresados a los filtros. Para poder mantener el comportamiento de los Work Panels Trabajar con se deberan utilizar cookies que almacenen los filtros ingresados.

REFRESH
En Work Panels Trabajar con, es comn tener un comando Refresh o Refresh keep dentro de un evento, luego de llamar a una transaccin. Cuando estos se convierten a Web Panels Trabajar con el Refresh no es necesario, ya que al ejecutar el comando Return hay un refresh implcito del Web Panel. Por lo tanto, los comandos Refresh y Refresh keep deben ser eliminados de los eventos mencionados anteriormente.

Procesamiento de varias filas en grid - For each line selected

En web panels, no existe la forma de seleccionar con el mouse varias lneas del grid ya que no existe posicionamiento en ninguna parte del form. Para implementar la seleccin mltiple, se debe definir una variable en el grid y asignarle un valor a cada una de las lneas que se quieren procesar. Luego, se debe usar el comando For each line para procesar cada una de las lneas y filtrar por las que estn seleccionadas (&valor = X). Debe considerarse que se puede utilizar nicamente para invocar a objetos sin interfaz. Si se invoca a otro web panel, solamente se ejecuta para el ltimo registro del grid.

Para la seleccin de una linea se cuenta con la propiedad AllowSelection.

Call de un objeto sin interfaz a otro con interfaz

En las aplicaciones GUI puede definirse una cadena de llamadas entre objetos del estilo: work panel -> call procedure -> call work panel. En las aplicaciones HTML esto no puede usarse. Las llamadas a un web panel solamente pueden realizarse desde otro web panel (mediante el call o el link). Por lo tanto, deber modificarse la programacin a algo del estilo:

Web panel -> call procedure -> Call web panel

Integridad transaccional: manejo de UTLs

Las transacciones Web siempre hacen commit, por lo que el manejo de transacciones anidadas, con la propiedad commit on exit en NO no se puede lograr. En muchos casos la alternativa es utilizar la lgica del modelo del Carrito de Compras

Uso de Tab Dialogs

En las aplicaciones GUI, se pueden definir tab dialogs para organizar los datos del form en varias secciones. En las aplicaciones HTML no se tiene este control por lo que ser necesario redisear el form. Una alternativa puede ser definir un objeto por cada Tab Dialog.

Otra alternativa es usar cdigo HTML externo que permite simular estos tabs

Styles para Web Panels.

En web panels los styles sirven a diferencia del resto de los objetos GeneXus- nicamente para inicializarlos pero no tienen dinamismo por lo que las modificaciones realizadas al style despus de haberlo aplicado no se reflejarn en los objetos. Esto se debe a que el concepto de Data Area en el cual se basa el dinamismo de los styles no es aplicable a la interfaz HTML por la diversidad de los diseos.

La forma de obtener el dinamismo en este caso es utilizando el concepto de Web Components que permite incluir un mismo objeto en varios, simplificando as el mantenimiento. De esta forma, lo que deberia hacerse es definir un style con el diseo del form y los web components que incluir y aplicarlo a los nuevos objetos Web Panel creados. Las modificaciones de cada web component se reflejarn automticamente en todos los web panels.

INTRODUCCIN CAPTULO 12
Una solucin para la generacin de reportes en WEB es trabajar con reportes PDF. Con este tipo de reporte, se cuenta con mayor potencialidad para el desarrollo de aplicaciones web. El reporte generado como PDF puede visualizarse directamente desde el browser.

En este captulo profundizaremos en la generacin de reportes PDF.

Aplicacin prctica de reportes PDF

Lo siguiente que haremos es crear un reporte en formato PDF que pueda ser visualizado desde el browser, y referenciado con un link desde el Web Panel MovieCatalog, de manera de poder imprimir el catlogo completo de pelculas.

El nombre del objeto ser ViewCatalog.

Lo primero es crear un objeto reporte con el siguiente layout:

(Puede disear el layout del reporte como usted lo crea ms conveniente)

Haga clic aqu para ver el diseo del reporte.

Lo que haremos es un corte de control sobre la tabla Gen_Movie, de forma similar a como se hizo en el webpanel MovieCatalog.

Haga clic aqu para ver la demostracin..

Es necesario configurar las siguientes propiedades al objeto reporte recin creado:

Main Call Protocol = HTTP Report OutPut = Only to File

Y la siguiente rule: output_file('movies.pdf','PDF');

Haga clic aqu para ver la demostracin..

Nota: Para comprobar que el reporte ejecuta correctamente, basta con ejecutarlo directamente desde el browser, digitando en nuestro caso la siguiente URL:

http://localhost/services/oViewCatalog.aspx

Haga clic aqu para ver la ejecucin del reporte..

Nota: Se necesita el Acrobat Reader en el cliente, para visualizar el reporte PDF.

Seguidamente, pongamos en el webpanel MovieCatalog un link a este reporte.

Para eso, agregar un textblock en el form del webpanel, de nombre PrintCatalog, y en el evento start del webpanel MovieCatalog agregar:

PrintCatalog.Caption = 'Print Catalog' PrintCatalog.Link = link(RViewCatalog )

INTRODUCCION AL CAPITULO 13
Como mencionamos al comienzo del curso, los sitios estn compuestos normalmente de una combinacin de paginas estticas y dinmicas. Las pginas dinmicas tardan mas en bajar que las estticas, por la simple razn que tienen que ejecutar antes de poder enviar la informacin al browser del usuario. Dentro de este tiempo esta la conexin a la base de datos, la ejecucin de las sentencias, etc. Algunas veces este tiempo de ejecucin no es necesario, ya que los datos no han cambiado. Es por esta razn, que GENEXUS incluye una caracterstica denominada Smart Static Panels (SSP) que permite estatizar paginas de la aplicacin. En este captulo vamos a ver que posibilidades nos brinda esta caracterstica

SMART STATIC PANELS

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

Alcance
Lenguaje: C/SQL, Java, Visual Basic Interfaces: Web

Descripcin
La finalidad es permitir desde GeneXus la generacin de pginas estticas de una forma inteligente, es decir consultando dinmicamente a la base de datos.

Porque usar SSP? 1. Se comportan con mejor performance que los objetos dinmicos 2. Recargan menos al servidor en tiempo de ejecucin. En que casos es viable la utilizacin de SSP? 1. Si existen pginas cuyo contenido vara en la base de datos con una periodicidad conocida. 2. Si la aplicacin puede soportar mostrar alguna informacin no on-line sino que se actualice hacia el web con cierta periodicidad.

Generacin de SSP
La preferencia a nivel del modelo denominada Generation Mode de la seccin Web Information permite la generacin de las pginas estticas. Las opciones son:

1. Dynamic Panels Este es el valor por defecto . Significa que el web panel se generar con acceso dinmico a la base de datos.

2. Smart Static Panels

Este valor significa que el web panel se generara en forma esttica (SSP). Esta generacin de las pginas debe resolverse con anteriordad. 3. Create Static panels on request Este valor significa que al ejecutar el web panel con acceso dinmico, automaticamente se generar la pgina esttica correspondiente a la instancia de datos. Este valor, permite tener un sitio compuesto por paginas dinmicas y pginas estticas sin que sea necesario ejecutar un proceso que genere todo el sitio en forma esttica con anterioridad, sino que estas pginas estticas se generarn para las instancias de datos que se requiera cuando se ejecute la pgina dinmica correspondiente en el sitio.

Adems de la preferencia Generation Mode, existe tambin la propiedad con el mismo nombre- a nivel de objeto. Los valores posibles son Dynamic Panels, Smart Static Panels, Create Static panels on request y Use models preference value (que es el valor por defecto).

Esta ejecucin puede hacerse desde la lnea de comandos o desde otro objeto GeneXus no web. Analizaremos ambos casos.

Cmo funcionan las SSP?

La generacin de SSP se logra a partir de la ejecucin del web panel dinmico. Cuando este web panel recibe parmetros existir una SSP por cada instancia de datos posible.

El nombre de las SSP resulta de la concatenacin del nombre del objeto web panel con la lista de parmetros que recibe separados por el carcter _ y la extensin HTML.

Por ejemplo, se tiene el web panel Clientes que recibe como parmetros la Empresa (atributo EmpID num(3))y la categora (CatId char(1)), algunos nombres de las SSP son:

hcliente_203_A.html hcliente_999_S.html

Si el web panel dinmico tiene eventos que ocurren en el servidor asociados a controles del form (por ejemplo botones, o eventos Click asociados a imgenes, etc) las SSP invocarn al web panel dinmico al ejecutar dicho evento.

Independientemente de la property Generation Mode por cada link a un web panel, si este web panel esta marcado como esttico, hace un call al web panel (de modo que este tambin generar un .html, etc), y el link lo deja apuntando al archivo .html.

Los links a web transactions siempre seran a la transaccion web porque estas no se estatizan

Estatizacin de SSP
Denominamos Estatizacin al proceso de generacin de las SSP correspondientes a un web panel.

Existen varias formas de estatizar un sitio web:

Generacin a Pedido Generacin desde objetos GeneXus. Generacin desde la lnea de comandos

La primera opcin aplica cuando el web panel tiene el valor Create Static panels on request. La generacin de SSP a partir de objetos GeneXus y a partir de la lnea de comandos aplican cuando el web panel tiene el valor Static Panel y son tiles para generar estas pginas en forma masiva para las posibles instancias de datos que existan en la base de datos.

GENERACIN A PEDIDO La generacin a pedido de las pginas SSP se realiza cuando la preferencia del modelo o del objeto tienen el valor Create Static panels on request.

El sitio funcionar siempre como si fuera dinmico, esto significa que los links siempre son al objeto web panel dinmico. Al ejecutarse el web panel dinmico, lo primero que se controla es que exista la pgina esttica (.html ) correspondiente a si mismo incluyendo tambien los parmetros que se le pasaron. Si este archivo existe, se redirecciona la llamada a dicho html. Si no existe automticamente se crea el .html y luego se redirecciona. Existen dos preferencias: On request SSP server directory Esta preferencia indica el directorio del servidor en donde el webpanel genera los archivos .HTML. El directorio debe existir previamente. Si no se especifica esta preferencia, se generarn en el directorio donde esta el web panel. On request SSP client URL Esta preferencia indica la URL en donde estan los archivos html. Se corresponde fsicamente al mismo directorio que se configur en la preferencia anterior.

GENERACIN DE SSP A PARTIR DE OTRO OBJETO GENEXUS

Al invocar a un web panel -que tiene la preferencia Generation Mode con el valor Static Panel - desde otro objeto GeneXus, se genera las pgina SSP correspondiente al mismo para la instancia de datos recibida como parmetro. Esto permite, por ejemplo, poner el mecanismo de generacin de los SSP dentro de un workflow.

PARMETROS ADICIONALES
Existen ciertos parmetros adicionales configurables al momento de invocar al web panel que cambian el funcionamiento del programa.

Los parmetros soportados son:

SSP Directory

Indica el directorio en donde se generarn las SSP. generan en el directorio corriente. SSP Dynamic URL

Si no se especifica se

Indica la URL base para los web panels dinmicos. Si una SSP tiene un link a un web panel dinmico, se agrega esta URL antes del nombre del mismo. Adems, si la SSP tiene un evento que ocurre en el servidor (por ej. Un botn) , al dispararlo se hace un POST al web panel dinmico cuyo nombre es el valor de este parmetro y el nombre del web panel. Esto implica que se puede tener un SSP en el cual cuando se dispara un evento se llama al dinmico.

Si no se especifica esta propiedad, no se agrega ningn prefijo a los web panels dinmicos que se invoquen. SSP Overwrite pages Indica si se generan las SSP para los que ya existe un archivo .html con ese nombre. Si no se especifica esta propiedad siempre se sobrescribe (se asume true ).

Este parmetro es til en muchos casos en que una nueva generacin de SSP no significa que toda la informacin anterior deje de ser vlida.

Un ejemplo de esto es una lista con informacin clasificada segn la fechas (calendario de cursos, calendario de partidos jugados, etc) donde en la pgina se tiene la informacin que despus de generada no cambiar y un link a la fecha anterior y a la fecha siguiente. Si la generacin de las SSP se hace en forma diaria, el parmetro deber tener el valor overwrite en false para que no regenere todas las pginas sino solamente la ltima (la del da). Adems habr que borrar la de la fecha inmediata anterior para que se genere nuevamente con el link a la fecha siguiente corregido (ya que la ltima pgina no tiene habilitado el link a la siguiente).

SSP Expand Links Indica que se recorran todos los links del web panel principal. especifica esta propiedad siempre se recorren (se asume true) Si no se

SSP Copy directory Indica el directorio al que se copian las SSP una vez terminada la generacin. Se copian en orden inverso al que fueron generadas, de modo que primero se pongan los hijos y luego los padres.

Si no se especifica esta propiedad, no se copian a ningn lugar

FUNCIN SETENVPROPERTY
La funcin SetEnvProperty permite configurar los parmetros adicionales. La sintaxis es:

&aux = Setenvproperty('genexus.property', &value)

Por ejemplo: &aux = Setenvproperty('genexus.staticwebdir', d:\ssp)

FUNCIN COPYSTATICFILES. Esta funcin permite realizar la copia de las SSP generadas a otro directorio, por ejemplo:

&aux = copystaticfiles()

GENERACIN DE SSP A PARTIR DE LA LNEA DE COMANDOS

Las SSP se generan como resultado de la ejecucin de un web panel -que tiene la preferencia Generation Mode con el valor Static Panel - desde la lnea de comandos. Los parmetros adicionales tambien pueden configurarse desde la lnea de comandos pero la sintaxis es diferente segn el generador. Por mas detalles referirse a los documentos:

Consideraciones en C/SQL Consideraciones en Java Consideraciones en Visual Basic

Estatizacin de Web Components

Cuando se genera como Static Panel un Web Panel que incluye Web Components, tambien se estatiza el Web Component dentro de la pgina.

Consideraciones
En la generacin de los smart static panels, los parmetros juegan un papel muy importante, ya que el nombre del archivo creado depende de los valores de los mismos, por lo que para que funcione correctamente la llamada entre web panels dinmicos y smart static panels es necesario que se pasen y se reciban los parmetros con el mismo tipo de datos.

Por ejemplo, tener un programa A que llame a uno B pasando un parmetro en un Numrico de 10 (N(10)) y el B lo reciba en un N(10,2) dar problemas ya que se generar con decimales (como el llamado)pero se invocar sin decimales (como el llamador).

Ejecucin desde el browser

Cuando el SSP se invoca desde el browser, se comporta como un web panel normal, resolviendo automticamente para cada link si el web panel llamado es esttico o dinmico.

FAQ Preguntas frecuentes

P: Qu es un SSP?. R: un SSP en si no es nada mas que un objeto GX que tiene esa propiedad marcada. En si es muy similar a cualquier webobject solo que genera el HTML en lugar de mandarlo al browser y que cualquier link a l apuntara al HTML y no al exe o servlet correspondiente.

P: Porque se llaman SSP y no Pginas Estticas ? No confunde eso? R: Estatico es el HTML resultado de la ejecucin de un SSP. Es decir, hay web panels dinmicos (un EXE, un servlet) hay SSP (un EXE o servlet con la property "generation mode" en SSP) y hay HTMLs que son el resultado de la ejecucin de un SSP.

Normalmente un sitio se formar con dinmicos y/o HTMLS pero en el "background" se tienen dinmicos y SSPs que generaron esos HTMLs.

P: Se pueden tener combinadas, es decir, algunas dinmicas y otras SSPs ? R: si, es decir, puedo tener algunos dinmicos y otras generadas mediante SSP.

P: Puede un web panel dinmico llamar a un SSP? R: si claro, puede haber cualquier combinacin de llamadas. SSP-SSP, SSP-Dinmico, Dinmico-SSP.

P: En que casos aplica una solucion 100% SSP? R: La solucin de los SSPs puede aplicar a muchos problemas diferentes y dependiendo del mismo es lo que se hace. Normalmente sern sitios con web panels dinmicos y tambien SSP. Pero un ejemplo totalmente SSP puede ser para armar un CD tipo Demo de mi sitio y distribuirlo. Se indican todos los objetos como SSP, y ejecutando CALL(HMAIN) generarn todos los HTMLS del mismo.

Como solucin para bajar la carga del servidor Web, se pueden definir algunos SSPs y otros Dinmicos.

SSP - Consideraciones del generador C/SQL

Generacin de SSP a partir de la lnea de comandos
Los parmetros adicionales necesarios para la generacin de pginas SSP a configurar en C/SQL son los siguientes:

Static Web Directory Static Web Dynamic URL Static Web Overwrite pages Static Web Links Static Web Copy directory

/sd:<dir> /su:<url> /so:< true|false> /sl:< true|false> Parmetro no soportado

Estos parmetros adicionales se pasan en la lnea de comandos despus de los parmetros que el nombre del programa C pudiera tener.
Ejemplo:

Hmainwp /sd=c:\\ /su=http://server/mydirectory /so:false /sl=true

Limitaciones
El generador C/SQL no soporta la propiedad genexus.static.copydir y la funcin copystaticfiles.

SSP - Consideraciones del Generador JAVA

Generacin de SSP a partir de la lnea de comandos
Los parmetros adicionales necesarios para la generacin de pginas SSP a configurar en Java son los siguientes:

Static Web Directory Static Web Dynamic URL Static Web Overwrite pages Static Web Links Static Web Copy directory

genexus.staticweb.dir=<dir> genexus.staticweb.dynurl=<url> Genexus.staticweb.overwrite=<true|false> genexus.staticweb.links=<true|false> genexus.staticweb.copydir=<dir>

Estos parmetros adicionales se pasan en la lnea de comandos antes del nombre del programa Java. La sintaxis es diferente dependiendo de la mquina virtual que se utilice.

Mquina Virtual Sun/IBM Microsoft java Dparmetro = valor <objeto a ejecutar> jview /d:parmetro ejecutar> = valor <objeto a

Si se ejecuta con la maquina virtual de Sun o IBM, y la cantidad de web panels estticos a generar es grande, se recomienda aumentar la memoria mxima disponible para la aplicacin. Esto se hace agregando un parmetro -Xmx<memoria en MB>m al 'java.exe'.

Por ejemplo:

java -Xmx100m hmywebpanel

Esto le da 100 MB de memoria mxima a la mquina virtual Java.

EJEMPLO:

java -dgenexus.staticweb.dir=c:\ -dgenexus.staticweb.dynurl=http://server:8080/servlets -dgenexus.staticweb.overwrite=false -dgenexus.staticweb.links=true dgenexus.staticweb.copydir=d:\ hmainwp

Antes de ejecutar el comando, es necesario configurar correctamente el classpath de la aplicacin, agregando las clases de GeneXus, el archivo servlet.jar, los drivers JDBC, las clases standard de Java y el directorio corriente. Por ejemplo:

set classpath=GeneXusclassr.zip;j:\tomcat\lib\servlet.jar;j:\drivers\jt400.jar;j:\jdk11\lib\classes.zip ;

SSP - Consideraciones Visual Basic

A diferencia de otros generadores, con Visual Basic no es posible ejecutar los SSP desde la lnea de comandos, solo pueden ser ejecutados al ser llamados por otro objeto. Los parmetros a configurar son:

Parmetro SSP Directory SSP Dynamic URL SSP Overwrite pages SSP Expand Links SSP Copy directory genexus.staticweb.dir=<dir> genexus.staticweb.dynurl=<url> genexus.staticweb.overwrite=<true|false> genexus.staticweb.links=<true|false> Parmetro no soportado

NOTA: Para poder utilizar las funciones que permiten configurar los parmetros adicionales desde las aplicaciones GeneXus (funcin setenvproperty), se debe configurar la preference Functions = Allow non-standard functions tanto en diseo como en prototipo.

Para poder ejecutar los SPPs y que los mismos generen los HTMLs correspondientes se deben seguir los siguientes pasos:

Compilar el Web Panel que tiene la propiedad Generation Mode=Smart Static Panel (generando la pgina ASP y la DLL), o alternativamente ejecutarlo en forma interpretada (si se quiere se puede cerrar el browser y dejar solamente la ejecucin del VBP). Ejecutar el objeto que va a establecer los parmetros y llamar al SSP. Al ejecutarse los SSP se despliega una ventana que indica cuales fueron los HTMLs generados por la ejecucin de los SPPs. Esta ventana se corresponde con un utilitario llamado GXLOG.EXE.

Ejemplo
Se tiene un Web Panel (PruebaSSP) que ser ejecutado como SSP y Work Panel (Llamador) que ser el encargado de ejecutarlo.

A continuacin se detallan los pasos a seguir para ejecutar los SSP:

Agregar en el Work Panel Llamador un evento como el siguiente:

Event 'Llamada &aux = setenvproperty('genexus.staticweb.dir', 'd:\ssp') &aux1 = setenvproperty('genexus.staticweb.dynurl', 'http://localhost/cgi-bin/') &aux2 = setenvproperty('genexus.staticweb.overwrite', false) call(HPruebaSSP, .) EndEvent

Los parmetros adicionales que se configuraron fueron:

genexus.staticweb.dir para indicar donde quedarn las pginas HTML (d:\ssp) genexus.staticweb.dynurl para indicar la URL correspondiente a los Web Panels dinmicos que sern llamados desde los SSPs (http://localhost/cgi-bin/) genexus.staticweb.overwrite para que no se sobreescriban los SSP para los que ya existe un archivo .html con ese nombre.

Compilar el Web Panel PruebaSSP (se genera la pgina ASP y la DLL) o si se quiere ejecutarlo en forma interpretada. Ejecutar el Work Panel Llamador, y ejecutar el evento Llamada.

Al ejecutar el evento Llamador se generan las pginas HTML correspondientes al SSP, que quedarn en el directorio d:\ssp.

Limitaciones temporales
El generador VB no soporta el parmetro genexus.static.copydir y la funcin copystaticfiles. No se pueden encriptar los parmetros de los Web Panels generados como estticos. No se pueden utilizar funciones de Cookies en Web Panels generados como estticos.

Si se realiza la ejecucin de SSPs, se cierra el utilitario GXLOG.EXE y se vuelve a realizar una nueva ejecucin (sin haber cerrado previamente el programa que ejecut el SSP y el proyecto del Web Panel con la propiedad Generation Mode=Smart Static Panel en caso de ejecutarlo interpretado) se produce el siguiente error:

Para que no ocurra, se debe cerrar el programa que ejecut el SSP (y el proyecto del Web Panel en caso de ejecutarlo interpretado), y volverlos a ejecutar.

INTRODUCCION AL CAPITULO 14
En el desarrollo de una aplicacin web, la calidad de la interfaz con la que interacta el usuario determina el xito de la aplicacin. La calidad de la misma est definida por una serie de pautas y tcnicas. A este conocimiento se le llama Usabilidad.

La interfaz de una aplicacin web est determinada a grandes rasgos por la estructura de la aplicacin, el diseo de la misma y de su contenido.

Con estructura de la aplicacin nos referimos a la ubicacin de los diferentes elementos para que sean encontrados de forma intuitiva por el usuario y utilizados de forma correcta. Hay que tener esta estructura bien definida antes de aplicar un diseo.

El diseo de la aplicacin es la parte grfica de la misma, el conjunto de imgenes, colores, formas que va a tener la aplicacin.

El diseo del contenido permite que el mismo sea cmodamente ledo y correctamente interpretado.

A lo largo de este captulo desarrollaremos cada uno de estos puntos para lograr aplicaciones web exitosas y fciles de usar.

Estructura de la aplicacin Diseo de la aplicacin Diseo del contenido

ESTRUCTURA DE LA APLICACIN
Con estructura de la aplicacin nos referimos a la ubicacin de los diferentes elementos para que sean encontrados de forma intuitiva por el usuario y utilizados de forma correcta. Hay que tener esta estructura bien definida antes de aplicar un diseo.

Es importante que la estructura del sitio est reflejada en todas las pginas en forma consistente. A la hora de definir la estructura en sitios corporativos, en general es recomendable no reflejar el organigrama de la empresa, sino reflejar una estructura de acciones a realizar o de informacin a encontrar. No invente la rueda, siempre que pueda aprenda de sitios exitosos de su misma rea o aplicacin para realizar una estructura similar, que resulte intuitiva para el mismo pblico objetivo. Es recomendable:

Mostrar las barras de navegacin en todas las pginas.
No cambiar la ubicacin de las opciones de los mens segn cambien las pginas (mantener consistencia).
Aplicar los mismos conceptos para las mismas acciones (links, botones, bullets, etc.).
No poner links a la misma pgina en la que me encuentro.
Permitir que el usuario siempre controle la navegacin: no deshabilitar botones estndares de los navegadores ni botones del mouse.
Si usa un mapa del sitio (Sitemap) brinde la informacin de donde est el usuario en cada momento. Puede incluir una pequea descripcin de qu ofrece cada opcin del men.

Con formato: Numeracin y vietas

Navegacin
La navegacin de una aplicacin permite ir a las distintas partes, sectores,

pginas de la aplicacin rpidamente y en forma intuitiva. La estructura del sitio se debe reflejar en la navegacin permitiendo contestar las siguientes preguntas: Dnde estoy? - Dentro del universo de sitios/ aplicaciones web

Esto se logra mostrando el logo del sitio/ aplicacin web en todas las pginas. La ubicacin habitual del mismo, y por lo tanto el lugar donde el usuario lo ir a buscar, es la esquina superior izquierda. Esta imagen debe tener siempre un enlace a la pgina de inicio de la aplicacin o la pgina principal del sitio.

Dentro de la estructura de la aplicacin web. Para ello se recomienda:

Marcar la opcin seleccionada en la barra de navegacin. Usar ttulos en cada una de las pginas, dentro del rea de contenido de forma que el usuario sepa dnde se encuentra. Nombrar las pginas en el cabezal de las mismas para que se identifiquen en el grupo de pginas que tiene abiertas el usuario. En GENEXUS esto se hace usando la propiedad Caption del Form (Form.Caption). Para mostrar el nombre de la aplicacin y de la pgina se puede usar un formato como los siguientes: Sitio: pgina (Ej: GeneXus: Capacitacin) Sitio pgina Sitio > pgina Usar nombres cortos para las pginas igual que para los sitios de modo que se puedan visualizar bien en el cabezal de la pgina.

Dnde estaba? - Para indicar las pginas que el usuario ya visit, conviene dejar los colores de los enlaces con los colores por defecto del navegador. A dnde puedo ir? - Mostrar todas las opciones a donde puede ir el usuario desde la pgina actual, sin marearlo con demasiadas opciones. Si las opciones son muchas, convieene agruparlas por reas o sectores y dentro de los mismos mostrar submens.

Herramientas de bsquedas (search)

Si usa una herramienta de bsqueda, sta debe de estar en todas las pginas del sitio, en un lugar siempre visible sin tener que usar las barras de desplazamiento. El lugar ms intuitivo es el cabezal superior derecho, o la columna del men izquierdo. Se recomienda hacer esta funcionalidad lo ms simple posible de manera que sea fcil de usar. Lo ms sencillo es tener una caja de texto (textbox) y un botn que diga buscar. El uso de iconos, etiquetas, etc. necesita que el usuario las interprete y por lo tanto demore unos segundos en entender su uso. El resultado de la bsqueda debe ser claro, debe mostrar la cantidad de instancias encontradas, el texto usado para realizar la bsqueda, el ttulo de cada pgina que contiene el texto buscado y un enlace en ese ttulo a la pgina correspondiente.

Mens
Men superior
Tanto en sitios corporativos como en intranets y extranets se usa comnmente un men superior que contiene generalmente las siguientes opciones:

1. Pgina de Inicio
Si bien hay un enlace en el logo de cada pgina, nunca est de ms repetirlo ya que la pgina inicial es a la que se retorna con ms asiduidad.

2. Acerca de, Acerca de Nosotros, Acerca de La Empresa, La Empresa, Quines somos, etc.
Siempre es vlido un enlace a informacin sobre la empresa que representa ese sitio, el producto que se vende a travs del sitio, etc. que respalde la seriedad y veracidad del contenido presentado en el mismo.

3. Mapa del sitio, Mapa, etc. En la zona superior derecha se ubican las herramientas para encontrar pginas y contenido dentro del sitio, la ubicacin de la herramienta de bsqueda y del mapa del sitio.

4. Contacto, Contctenos, Contctese, etc. Este enlace debe conducir a una pgina que contenga informacin para contactar a la empresa a travs de telfonos, emails y direcciones fsicas. Esta opcin del men no debe ser un enlace a un correo electrnico, ya que incomoda al usuario porque ejecuta su aplicacin de manejo de emails.

En aplicaciones web, este men generalmente contiene:

Enlace a la pgina de inicio de la aplicacin
Enlaces a informacin importante, no relativa a la aplicacin en particular o a la parte de la aplicacin desplegada en la pgina, pero que sirva para la aplicacin entera, que sirva de respaldo, etc. Ejemplo: informacin de registro del usuario (a la izquierda), idiomas de la aplicacin, rea de ayuda, contacto con soporte, pgina de la informacin de la empresa, etc. Men de reas Muchas veces se usa el rea de cabezal para ubicar un men de reas o categoras dentro de la aplicacin o del sitio. Generalmente se utiliza cuando hay demasiadas opciones para ubicar en el men izquierdo (ms de 10). Categorizar los enlaces y agruparlos en reas simplifica la navegacin hacindola ms intuitiva.

Con formato: Numeracin y vietas

Men izquierdo Este men contiene las opciones de navegacin del sitio, todos los lugares del sitio a donde se puede acceder. En muchos sitios el men izquierdo cambia segn el rea en la que el usuario se encuentre. Se debe mantener el mismo diseo del men, independientemente de las opciones, para que al usuario sepa cmo usarlo ya que aprendi su uso en otras reas del sitio.

Links
Hay tres tipos de links:

Links estructurales (de navegacin)
Links asociativos. Los clsicos links que se asocian a una palabra para ver ms informacin relacionada a la misma.
Links de informacin relacionada (Related links)
Algunas recomendaciones para la definicin de links:

Con formato: Numeracin y vietas

Cuando se definen links subrayar las palabras importantes y brindar informacin suficiente para que el usuario se sienta atrado a seguir el link.
Relacionar la informacin con links del tipo "ms sobre tal tema", o sobre el autor, etc.
Usar link title siempre que no sea obvio a donde va el link, para que aparezcan los tooltips: oSi el link es externo, el nombre del sitio oSi es interno, el nombre del subsitio. oInformacin adicional que se aplique oEl tooltip debe tener menos de 60 caracteres.
Mantener siempre el color predeterminado para los diferentes links.
Siempre usar los mismos nombres para acceder al mismo contenido.

Con formato: Numeracin y vietas

DISEO DE LAS PGINAS DE LA APLICACIN

El diseo de la aplicacin es la parte grfica de la misma, el conjunto de imgenes, colores, formas que va a tener la aplicacin.

Se debe disear pensando en 1. 2. 3. 4. Velocidad de carga Pblico objetivo Uso de la aplicacin Mximo aprovechamiento de los temas

Velocidad de carga
El tiempo que demora en cargarse la totalidad de una pgina determina la percepcin que va a tener el usuario de ese sitio o aplicacin. Si la aplicacin demora en cargarse, el usuario pensar que no es buena, que no le solucionar sus problemas de forma correcta. Si la demora es excesiva, el usuario puede llegar a pensar que la empresa no es fiable.

Para mejorar los tiempos de carga se recomienda:

Usar texto en vez de imgenes siempre que se pueda (ej: para los mens)
El formato de las imgenes siempre debe de ser .gif o .jpg, nunca .bmp, ya que este formato pesa mucho ms que los anteriores.
Usar herramientas para disminuir el peso de las imgenes. Ej: http://www.netmechanic.com/GIFBot/optimize-graphic.htm
No usar imgenes animadas.
No usar flash, ya que no slo demora ms la carga de la pgina, sino que muchas veces requiere que el usuario instale la tecnologa.
No hacer pginas que requieran el uso excesivo de las barras de desplazamiento horizontal. Esto no slo ahuyenta al usuario por el tiempo que le consume, sino tambin por la cantidad de contenido que se le presenta. Es mejor hacer pginas ms cortas, con la informacin suficiente, o armar ms pginas a partir de una. Pblico objetivo
Debe tener en cuenta quin ser el pblico objetivo a quin se dirige, quines sern los usuarios- a la hora de disear y elegir los colores, los tamaos de las letras y tamaos de las pantallas.

Con formato: Numeracin y vietas

Por ejemplo, si el pblico objetivo est integrado por desarrolladores, se puede hacer un sitio o una aplicacin con letras de tamao 8 puntos, pero no se recomienda usar este tamao para un pblico masivo.

Uso de la aplicacin
Cuando est diseando tambin debe considerar cul es la finalidad de la aplicacin para no entorpecer el uso del servicio que se desea brindar.

Si se trata de un sitio Web donde se ofrece bastante texto para leer no es recomendable que las pginas tengan sectores que llamen ms la atencin que el contenido principal de la pgina. Por ejemplo, las imgenes animadas son centros de atencin. Es realmente molesto tener imgenes movindose en distintas partes de la pgina cuando se tiene que leer. Se pueden usar imgenes animadas si su movimiento se detiene una vez presentada la animacin. De esta forma, se logra captar la atencin del usuario que ingresa a la pgina para transmitir el mensaje que se desea con esas imgenes, y luego, se facilita al usuario la concentracin para la lectura del texto principal.

Si el sitio web es un portal, donde se espera encontrar muchos focos de atencin (textos cortos, muchos links) es ms adecuado usar imgenes animadas.

Mximo aprovechamiento de los temas (Themes)

Maximizar el uso de los temas permite ajustar el diseo en tiempo de ejecucin. Es recomendable que cada tem que se use est definido en el tema, de forma por ejemplo, que todos los ttulos tengan la misma apariencia y si ms tarde se quiere agregar espacio entre el ttulo y el contenido se pueda modificar automticamente en todos los ttulos de la aplicacin. Esto es vlido para cada tabla usada en la aplicacin, desde la que contiene las opciones del men hasta la que contiene el contenido, las grillas, las etiquetas de los formularios, etc.

DISEO DEL CONTENIDO

La forma de escribir en Internet difiere a la usada en publicaciones fsicas, principalmente porque es ms difcil leer en la pantalla y el pblico es ms exigente con el tiempo que le consume obtener una informacin. Debido a esto hay que escribir para Internet teniendo en cuenta las siguientes pautas:

Escribir lo ms corto y conciso posible. Se dice que en Internet hay que escribir entre un 50% y un 25% menos de lo que se escribira en papel Poner las conclusiones al principio y una opcin para ver el detalle de esa conclusin

Tipo de letras Se deben tener las siguientes consideraciones a la hora de elegir el tipo de letra a utilizar en una aplicacin Web:
1- El tipo de fuente debe estar instalada en las mquinas destino 2- El tamao debe ser adecuado para el pblico objetivo y para la resolucin ms usada 3- Elegir un estilo de letra (serif o sans serif) y no mezclar estilos Los tipos de fuentes que en general se encuentran instaladas en todas las mquinas son Arial, Verdana y Times New Roman. Legibilidad
Definicin de Legibilidad. f. Capacidad o posibilidad de ser ledo, por su claridad.

La buena tipografa depende -entre muchas otras variables- del contraste visual entre una fuente y otra, y entre los bloques de texto, los ttulos, y el espacio en blanco alrededor. Lo que ms atrae al ojo es el contraste fuerte con patrones distintivos. Seguir patrones que conserven la forma de organizar el texto y las imgenes en las distintas pginas de un sitio o una aplicacin permite entender la organizacin de la informacin, intuir la ubicacin de ms informacin y se aumenta la legibilidad de la misma. La lectura va a ser ms cmoda cuanto mayor sea el contraste de los colores. El mayor contraste se logra con fondo blanco y letras negras. Se pueden establecer las combinaciones de colores en el editor de temas, en la clase "Form" y jugar con las mismas sin tener que cambiar ni una lnea de cdigo. Mrgenes Los mrgenes definen el rea de lectura de una pgina, separando el texto principal de lo que lo rodea. Los mrgenes y el espacio en blanco se usan para delinear el texto principal de otros elementos de una pgina, y usados de igual manera en todas las pginas proveen uniformidad a travs del sitio creando una estructura consistente y una identidad visual. Es recomendable que los textos principales tengan un margen de 5 a 10 pxeles. Esto se logra en GeneXus poniendo el texto dentro de una tabla con borderwidht =0 y cellpadding=10.

Cellpadding: especifica la distancia en pxeles entre el contenido y los bordes de la celda. Cellspacing: especifica el ancho en pxeles de los bordes de la celda.

Alineacin de los textos

La alineacin izquierda de ttulos y contenidos es la ms recomendable para el pblico occidental. Los usuarios en Internet en general no leen los textos palabra a palabra, sino que escanean las pginas tomando algunas palabras de cada prrafo para entender la idea general de la pgina. La alineacin izquierda facilita este tipo de lectura.

LINKS DE INTERS
Usabilidad
Sitios con artculos sobre usabilidad y temas relacionados con mejora en los sitios Web

En espaol
http://www.masterdisseny.com/ http://sunsite.dcc.uchile.cl/~rbaeza/inf/usabilidad.html http://www.alzado.org/

En ingls
http://www.useit.com/ http://www.37signals.com/ http://www.usabilitynet.org/ http://usableweb.com http://www.w3.org/TR/WCAG20/ http://www.hildesheim.co.uk/usability/index.html

Herramientas
Herramientas para reducir el peso de las imgenes
http://www.netmechanic.com/GIFBot/optimize-graphic.htm http://www.creatingonline.com/crunchers.htm http://www.gifworks.com/

Toolbar con varias herramientas de anlisis y optimizacin de sitios

http://www.nils.org.au/ais/web/resources/toolbar/install.html

Herramientas de chequeo de links activos

http://validator.w3.org/checklink http://www.anybrowser.com/linkchecker.html

Herramientas que muestran el sitio en distintos navegadores

http://www.anybrowser.com/siteviewer.html

Herramienta para medir la velocidad de carga del sitio

http://www.webperf.org/breakdown.html

REQUERIMIENTOS DEL GENERADOR C/SQL

El generador GENEXUS C/SQL permite que el ciclo de desarrollo se realice con independencia de una conexin a una red (local o Internet) o, utilizando un servidor (mquina diferente a la de desarrollo).

Llamaremos instalacin local a aquella que es independiente de una conexin a una red e instalacin remota a la restante.

La instalacin local es soportada nicamente en Windows.

Adems, como el generador GENEXUS C/SQL permite acceder a los datos utilizando la tecnologa de acceso SQL Embedded u ODBC, llamaremos instalacin SQL Embebida a aquella que accede a los datos mediante sentencias SQL embebidas en el cdigo fuente e instalacin ODBC a la que se conecta va ODBC.

Es posible tener cualquiera de las combinaciones, instalacin SQL embebida local, SQL embebida remota, ODBC local, ODBC remota. Detallaremos a continuacin los requerimientos especficos de cada caso.

Siempre es requerido en ambiente de desarrollo:

Compilador C Rutinas de soporte del generador

Compilador
Normalmente en ambientes UNIX, el compilador C viene incluido con el sistema operativo. Si se utiliza ODBC como tecnologa de acceso a los datos, se requiere un compilador C++, el cual no viene incluido. Puede utilizarse el compilador GCC, que puede obtenerse en http://gcc.gnu.org

En ambientes Windows, el compilador no viene incluido con el sistema operativo. En este caso, lo mas comn es utilizar Microsoft Visual C++.

Rutinas de soporte del generador C/SQL

Las rutinas de soporte son un conjunto de archivos (bibliotecas, include files, etc.) que son utilizadas (referenciados) por los programas generados por el generador C/SQL. Estas rutinas se distribuyen en formato fuente y deben ser instaladas (compiladas, etc.) antes de intentar compilar o ejecutar una aplicacin generada. Durante el proceso de instalacin el utilitario GENEXUS C/SQL Setup Wizard instala, en cada ejecucin, las rutinas necesarias para cada DBMS. Si se quiere instalar para ms de un DBMS, en el caso en que la tecnologa de acceso sea Sql embebido, ser necesario ejecutar el GENEXUS C/SQL Setup Wizard tantas veces como DBMSs se tenga. Estas rutinas debe ser instaladas una nica vez por servidor (salvo nuevas versiones).

Por ms informacin sobre el proceso de instalacin de las rutinas de soporte, referirse a GeneXus C/SQL Setup Wizard.

Instalacin SQL embebida

Se requiere: Precompilador del DBMS correspondiente Instalar las rutinas de soporte para el DBMS

Precompilador
Cada proveedor de DBMSs tiene su propio precompilador, que normalmente se vende como un producto adicional. Solo es necesario si la tecnologa de acceso a utilizar en las aplicaciones desarrolladas es SQL embebido.

DBMS DB2 Informix Oracle

Precompilador Client Application Enabler ESQL C Pro*C

Instalacin ODBC
Instalar las rutinas de soporte para ODBC. Ver Configuracin de ODBC en ambiente Unx.

Instalacin remota
Los siguientes son requerimientos especficos para el caso de realizar una instalacin remota: Conexin TCP/IP Esquema de transferencia: Copy/FTP Activacin del servicio REXEC

Conexin TCP/IP desde la estacin de trabajo

Cada estacin de trabajo deber disponer de una conexin va TCP/IP con el servidor donde se realizar la compilacin.

Esta conexin se utiliza para transferir los fuentes generados al servidor y para la ejecucin de comandos remotos (REXEC) requeridos para efectuar la compilacin de programas.

El esquema de transferencia va FTP y ejecucin remota se basa en la especificacin Winsock 1.1 por lo que, prcticamente, cualquier producto que provea soporte TCP/IP puede ser utilizado.

El programa que realiza la transferencia y compilacin (GXWC.DLL) requiere directamente los servicios de la WINSOCK.DLL. Esta DLL puede, dependiendo del proveedor de conexin de TCP/IP, requerir a su vez otras DLLs.

Transferencia de fuentes
La transferencia de fuentes de los programas generados permite tres esquemas bsicos: FTP, Copy y Don't transfer. Los dos primeros asumen que el directorio del modelo (especificado en Model Properties/Target path) no est en el servidor (o no coinciden con el directorio de programas a donde se desea transferir/copiar los fuentes) y que, por consiguiente, se necesita transferir los fuentes all generados para poder compilarlos. El tercer esquema (Don' transfer) asume que el directorio mencionado arriba coincide con el directorio de los programas (es decir, donde se desea generar los ejecutables) y, en consecuencia, no es necesaria la transferencia. Si se selecciona FTP como esquema de transferencia, es necesario que el servidor tenga disponible y 'escuchando' el servicio de FTP (ver ms adelante cmo activarlo y consultar con el administrador del servidor por particularidades de su instalacin). Si se selecciona Copy o Don't transfer como esquemas de transferencia, la estacin de trabajo debe 'ver' los discos del servidor como discos de red. En otras palabras, el servidor debe funcionar tambin como servidor de archivos para la estacin. En esta situacin, no es necesario activar el FTP. Activacin del servicio de FTP Para activarlo, la operativa vara en funcin del sistema operativo del servidor. Unix Normalmente, este servicio se encuentra instalado y activo. Si no lo estuviera, los siguientes son los pasos a seguir para activarlo. Se requiere autorizacin especial (root) para realizar esta tarea. Conectarse al servidor en una terminal (telnet por ejemplo) con un usuario administrador (root). Modificar el archivo /etc/inetd.conf agregando/modificando la lnea: ftp stream tcp nowait root /etc/ftpd ftpd Ejecutar el comando: refresh -s inetd

Windows Para usar el servicio de FTP se requiere tener instalado Internet Information Server 4.0 o Personal Web Server 4.O en adelante. En el caso de Personal Web Server el servicio de FTP no se instala por defecto.

Activacin del servicio de REXEC

Con el fin de realizar la compilacin de los fuentes generados, se requiere el servicio de ejecucin remota (REXEC) activo en el servidor. El servicio REXEC siempre debe estar activo para compilar los fuentes generados. Para hacerlo la operativa vara en funcin del sistema operativo del servidor. Unix Normalmente, este servicio se encuentra instalado y activo. Para verificar que el servicio est activo, ejecute los siguientes pasos: Acceda a una terminal del servidor o utilice un programa de emulacin de terminal (telnet) y realice el login. Ejecute el siguiente comando; el resultado debe ser que la fecha y hora de servidor se muestran en la pantalla. rexec host_name time host_name es el nombre simblico del servidor o su direccin IP. Nota: An cuando est activado (el test anterior fue satisfactorio), puede que no sea posible acceder al servicio desde su PC (mquina de desarrollo donde est instalado GENEXUS y el generador C/SQL). Normalmente, esto se manifiesta al intentar instalar las rutinas de soporte o compilar un programa generado, mediante un mensaje del tipo Invalid login o 'The login is not correct' (el mensaje puede variar dependiendo del servidor Unix pero el sentido es el mismo). En este caso, la causa probable del problema es que la direccin IP del PC no es una direccin vlida desde la cual, el servidor Unix, pueda recibir solicitudes de REXEC o que la direccin IP del PC vare pues se est utilizando DHCP. Ver comentarios del mensaje Invalid login en la seccin Problemas Comunes. Si el servicio no est activado, los siguientes son los pasos a seguir para activarlo. Se requiere autorizacin especial (root) para realizar esta tarea. Conectarse al servidor en una terminal (telnet por ejemplo) con un usuario administrador (root). Modificar el archivo /etc/inetd.conf agregando/modificando la lnea: exec stream tcp nowait root /etc/rexecd rexecd Ejecutar el comando: refresh -s inetd

Windows Este sistema operativo no provee en forma nativa (al momento de la escritura de este manual) del servicio de ejecucin remota REXEC. El servicio necesario puede ser provisto por programas de diferentes casas de software y debe ser comprado aparte. Nuestra empresa ha evaluado el que vende la firma Ataman Software, Inc. (Fort Collins, Colorado USA) que funciona correctamente y tiene un bajo precio. Ver la direccin internet http://www.ataman.com/atrls_info.htm.

Instalacin local
En el caso de realizar la instalacin local solo se requiere del Compilador C, y la instalacin de las rutinas de soporte (luego los requerimientos van a depender de si la Tecnologa de acceso es ODBC o Embebido- lo cual se especifica en este mismo documento)

Nota: Usuarios de Oracle en ambientes Unix Para compilar en este ambiente, el generador C/SQL, utiliza archivos del Pro*C que el usuario debe copiar al directorio de las rutinas de soporte, modificando dicha copia segn el siguiente detalle. Hacer una copia del archivo 'proc.mk' que, normalmente, est en el directorio $ORACLE_HOME/precomp/demo/proc en el directorio donde se instalaron las rutinas de soporte. Modificar el archivo proc.mk (del directorio de rutinas de soporte) de la siguiente manera: Buscar una lnea que tiene el siguiente cdigo (o similar): INCLUDE=$(I_SYM). $(PRECOMPPUBLIC) Si encuentra la lnea, realizar los siguientes cambios: INCLUDE=$(I_SYM). $(PRECOMPPUBLIC) $(GX_INC) Si no la encuentra, buscar la lnea que tiene el siguiente cdigo (o similar): CFLAGS=-I. -O Realizar los siguientes cambios: CFLAGS=-I. -O $(GX_INC)

Buscar el siguiente bloque de cdigo (o similar): # Rule to compile any program (specify EXE= and OBJS= if [ "$(ORA_CLIENT_LIB)" = "shared" ]; then \ $(CC) -o $(EXE) $(OBJS) -L$(LIBHOME) $(PROLDLIBS); \ else \ $(CC) -o $(EXE) $(OBJS) -L$(LIBHOME) $(PROLLS); \ fi Realizar los siguientes cambios: # Rule to compile any program (specify EXE= and OBJS= if [ "$(ORA_CLIENT_LIB)" = "shared" ]; then \ $(GX_CFLAGS) -o $(EXE) $(OBJS) $(CC) $(GX_LIBS) $(PROLDLIBS); \ else \ $(GX_CFLAGS) -o $(EXE) $(OBJS) $(CC) $(GX_LIBS) $(PROLLS); \

-L$(LIBHOME) -L$(LIBHOME)

El proc.mk es dependiente de la plataforma y la versin de Oracle utilizados. El siguiente es otro ejemplo que pertenece a AIX 4.3 y Oracle 8i:

$(MAKE) -f $(MAKEFILE) samples LIBHOME=$(ORACLE_HOME)/lib64/ PRODLIBHOME=$(PRODLIBHOME64) CFLAGS="$(CFLAGS64)" LFLAGS="-q64 b64" build: $(OBJS) $(CC) $(LFLAGS) -o $(EXE) $(OBJS) -L$(LIBHOME) $(GX_LIBS) $(PROLDLIBS) build64: $(MAKE) -f $(MAKEFILE) build LIBHOME=$(ORACLE_HOME)/lib64/ PRDLIBHOME=$(PRODLIBHOME64) RDBMSLIB=$(ORACLE_HOME)/rdbms/lib64/ CFLAGS="$(CFLAGS64)" LFLAGS="-q64 -b64"

build_static: $(OBJS) $(CC) $(LFLAGS) -o $(EXE) $(OBJS) -L$(LIBHOME) $(STATICPROLDLIBS) $(AIXIMP) build_static64: $(MAKE) -f $(MAKEFILE) build_static LIBHOME=$(ORACLE_HOME)/lib64/ PRODLIBHOME=$(PRODLIBHOME64) RDBMSLIB=$(ORACLE_HOME)/rdbms/lib64/ CFLAGS="$(CFLAGS64)" LFLAGS="-q64 -b64" $(SAMPLES) $(OBJECT_SAMPLES): $(MAKE) -f $(MAKEFILE) OBJS=$@.o EXE=$@ build LIBHOME="$(LIBHOME)" PRODLIBHOME="$(PRODLIBHOME)" CFLAGS="$(CFLAGS)" LFLAGS="$(LFLAGS)"

INCLUDE=$(I_SYM). $(GX_INC) $(I_SYM)$(PRECOMPHOME)public $(I_SYM)$(RDBMSHOME)public $(I_SYM)$(RDBMSHOME)demo $(I_SYM)$(PLSQLHOME)public $(I_SYM)$(NETWORKHOME)public

Requerimientos .Net

Los requerimientos de software de Web objects en .Net se van a dividir en dos partes, los requerimientos para el ambiente de desarrollo y los requerimientos en produccin.

Requerimientos para desarrollo

Adems de los requerimientos bsicos de GeneXus 8.0 (espacio en disco, cantidad de memoria, etc.), cada equipo deber disponer de:

PLATAFORMA .NET
Para utilizar esta versin es necesario tener instalada la versin release del Framework Redistributable 1.1 y el runtime de Jsharp (en caso de generar reportes PDF).

GENEXUS o o OTROS Cliente y servidor de Base de datos de prototipo. Internet Information Server para prototipacin. IMPORTANTE: El mismo debe ser instalado antes del .NET Framework SDK. Importante: Para usuarios Oracle se requiere en el cliente el driver 8.1.75 o superior Development environment GeneXus 8.0 Generador .Net 8.0

Requerimientos en produccin
REQUERIMIENTOS ESTACIN DE TRABAJO En la estacin de trabajo de los usuarios de una aplicacin desarrollada con Web objects lo nico que se necesita es disponer de un browser y una conexin al servidor donde estn los Web Panels.

REQUERIMIENTOS SERVIDOR Los requerimientos en produccin son similares al ambiente de desarrollo.

Servidor Web: Internet Information Server (5.0 o superior) Microsoft J# .Net Redistributable Package 1.1 (para reportes PDF) Microsoft .Net Framework 1.1

 Driver ODBC y dlls de acceso ODBC (solo si la conexin es ODBC y no ADO)

Instalacin en el Cliente
Alcanza solamente con un browser.

Instalacin en el servidor
Alcanza solamente con una copia de los objetos y el archivo de configuracin web.config.

REQUERIMIENTOS GENERADOR VISUAL BASIC

Requerimientos para desarrollo
En Visual Basic 6.0 existen nuevas facilidades para generar aplicaciones para Internet, la ms notoria son las llamadas WebClasses Designers. Estos objetos son programados en Visual Basic y al compilarlos se crea una DLL, que ser ejecutada por el Web Server (Microsoft Internet Information Server), y un archivo .ASP (Active Server Page) que sirve como punto de entrada para cada clase en la DLL.

Requerimientos estacin de trabajo

Para poder compilar y/o ejecutar en forma interpretada los objetos Web generados como WebClasses se necesita:

Windows 98, Windows 2000, Windows XP con un Personal Web Server instalado o con Internet Information Server 4.0 o superior.
En principio puede ser tambin Windows 95 o cualquier sistema operativo que soporte un Personal Web Server de Microsoft. En el caso de Windows NT 4.0 (o superior) se necesita el Internet Service Manager.

Instalar Visual Basic 6.0 SP3 o superior Instalar Visual Interdev Permisos de creacin de objetos COM
Hay que ejecutar la aplicacin Dcomcnfg, que se encuentra en el directorio system32 del servidor, para dar permisos de creacin de objetos al usuario que ejecuta los objetos Web.

Para ejecutar y/o compilar Objetos Web Cliente/Servidor, se necesita adems:

Software cliente del DBMS Drivers ODBC Datasource del modelo definido

Configurar la preference Show Connection Dialog = No, y setear el usuario y la password de conexin a la base de datos para que no se despliegue el dilogo de conexin a la base de datos. Si no se configura esta preference con el valor No, se va a producir un error en el momento de ejecutar los objetos Web.

Puesta en produccin
Una vez que los objetos Web fueron probados en forma interpretada se deben compilar y llevar al servidor de produccin. La informacin sobre como poner en produccin los objetos Web VB generados como WebClasses se encuentra en: Puesta en produccion de objetos Web VB generados como WebClasses

Por ms informacin se recomienda el documento: Objetos Web Visual Basic generados como WebClasses

APLICACIONES WEBGENERADOR JAVA

Introduccin

Existe una API especificada por Sun Microsystems que se llama 'Java Servlet API'. Esta API define la forma de ejecutar lo equivalente a los objetos web de GENEXUS (web panels, web transactions, web components), por lo tanto, el generador Java, por cada objeto web de GENEXUS, genera lo que se llama un Servlet.

Los Servlets proveen una gran cantidad de ventajas que el generador Java aprovecha, como por ejemplo, la utilizacin de un pool de conexiones a la base de datos y la multiplataforma.

A su vez, el generador Java provee una funcionalidad adicional que consiste en que los Objetos objetos Web web pueden enviar la pgina HTML comprimida, para que sea descomprimida en tiempo real por el navegador. La compresin se realiza solo si el navegador indica que es capaz de descomprimirlo. Esta opcin puede deshabilitarse con la preferencia 'Auto compress web pages', para contemplar el hecho de que algunos navegadores no reporten correctamente su capacidad para descomprimir las pginas, y no las puedan desplegar correctamente. En las pruebas que hemos realizado, esta funcionalidad se ha comportado de forma correcta con todos los navegadores.

Requerimientos
Para poder ejecutar Servlets, es necesario contar con:

1) Un Servidor Web 2) Un Motor de Servlets 3) JavaServer Web Development Kit El Servidor Web y Motor de Servlets, son dos servicios que se requieren (en un mismo servidor fsico, o no) para poder ejecutar Servlets.

En teora, las aplicaciones GENEXUS pueden ejecutarse con cualquier Motor de Servlets que sea compatible con la especificacin de Servlets 2.1 o posterior.

Algunos de los motores que se han utilizado exitosamente son:

IBM WebSphere en Windows, RS/6000, Unix OS/390, Linux y AS/400 JRun en Windows Jakarta Tomcat en Windows y Linux Resin en Windows y Linux Apache Jserv en Windows y Linux

Por su parte, el JavaServer Web Development Kit, se instala automticamente con la instalacin del Motor de Servlets, y permite que el desarrollador pueda compilar los Servlets (objetos web de GENEXUS).

A continuacin explicaremos los pasos en orden, que se deben seguir para configurar y utilizar estos requerimientos. Explicaremos en forma conceptual y genrica cada punto, y tomaremos a modo de ejemplo, la opcin de utilizar el Motor de Servlets RESIN para Windows, en forma local, con el fin de mostrar un ejemplo prctico concreto.

Al final de este captulo, se incluyen URLs a papers tcnicos que describen la configuracin de otros motores de servlets.

Configuracin de un Motor de Servlets

Para ejecutar una aplicacin web Java, se debe configurar un motor de servlets; para ello se deben realizar algunos pasos, que si bien varan un poco segn el motor de servlets que se vaya a utilizar, bsicamente los pasos a seguir, son similares.

Primeramente, vamos a introducir el concepto de webapp, relacionado a los motores de servlets.

Qu es una webapp?
Cada motor de servlets crea y maneja una webapp. El nombre webapp resulta de la abreviacin de "web application" y consiste en un directorio base, que contiene a su vez una estructura de subdirectorios determinada, en la cual se deben distribuir los archivos que sean necesarios para la ejecucin de una aplicacin web.

Los tipos de archivos involucrados en la ejecucin de una aplicacin web, pueden ser los servlets (archivos .class), contenido esttico y libreras adicionales (archivos .JAR).

Una vez visto este concepto, pasemos a detallar entonces los pasos a seguir para configurar un motor de servlets:

1) Instalar el motor de servlets. 2) Definir una webapp o bien identificar cul es la webapp por defecto para utilizarla. 3) Copiar drivers JDBC y clases standard de GENEXUS (gxclassr.zip) al directorio lib de la webapp. 4) Levantar el motor de servlets. 5) Tests a. Ejecutar el servlet de ejemplo del motor de servlets, para comprobar que la instalacin haya sido correcta, as como comprobar que el motor haya levantado bien.

b. Ejecutar el servlet: com.genexus.webpanels.gxver, que devuelve la versin de las clases standard de GENEXUS. Mediante la ejecucin de este servlet se puede comprobar primeramente que se estn encontrando las clases standard de GENEXUS y luego, que se trata de la misma versin con las que se generaron los servlets.

A modo de ejemplo, si se utiliza RESIN en Windows, en forma local, se deben seguir los siguientes pasos:

1) Instalar el motor de servlets: para ello, simplemente se debe descomprimir un archivo de instalacin .ZIP en algn directorio del equipo servidor (por ejemplo en c:\resin). 2) La webapp por defecto en este caso, es: C:\resin\doc\ 3) Copiar las clases standard de GENEXUS (gxclassr.zip) y las clases del driver JDBC al directorio C:\resin\doc\WEB-INF\lib 4) Para levantar el motor de servlets, se debe ejecutar c:\resin\bin\httpd.exe. 5) Tests a. Para verificar que el RESIN haya levantado bien, se debe ejecutar el servlet que viene de ejemplo accediendo de la siguiente forma: http://localhost:8080/examples/basic/servlet/HelloServlet b. Para verificar que se estn tomando las standard de GENEXUS y cul versin, se debe ejecutar: http://localhost:8080/servlet/com.genexus.webpanels.gxver

PROPIEDADES DE EJECUCION C/SQL

A continuacin se detalla el significado de cada una de las opciones que figuran en el dilogo de configuracin del F5. Host Name: Corresponde al nombre del servidor o su direccin IP. Script Name: Indica el nombre del script utilizado para compilar los objetos C/SQL. Se asume que este archivo se encuentra en el directorio especificado en Support Files. Program Directory: Esta opcin es slo informativa e indica el valor especificado en la opcin "Programs directory".

Transfer
FTP Service: se selecciona para transferir va FTP.

Copy Files: se selecciona para copiar los fuentes. Dont Transfer: se selecciona si se est trabajando sobre la misma mquina donde se va a realizar la compilacin. Force transfer: bajo el directorio de la aplicacin se crea un directorio "Update" que contiene un archivo vaco con el mismo nombre del archivo que se transfiere, de forma que al transferir se comparan las fechas y si est actualizado la transferencia no se realiza. Si se marca, siempre se transfieren todos los archivos.

Submit Mode
REXEC: se selecciona si se desea ejecutar la compilacin en forma remota (otro servidor). Local Exec: se selecciona si se compila sobre la misma mquina donde est el modelo. Port: Es el nmero de puerto activo del servicio REXEC. Normalmente es el 512. Este servicio es utilizado para ejecutar comandos remotos, es requerido para compilar los programas. Timeout (sec.): Esta opcin le indica a GeneXus cunto tiempo debe dar al servidor para responder. 0 le indica que espere en forma indefinida.

PROGRAMS DIRECTORY AS SEEN FROM CLIENT: Este campo es vlido slo si se seleccion Copy files como mtodo de transferencia de archivos. Es el nombre del directorio donde van los programas visto desde el cliente.

PROGRAMS DIRECTORY AS SEEN FROM FTP: Es anlogo al anterior, pero cuando se elige FTP service como mtodo de transferencia. Si el directorio no existe el mismo es creado al realizar la transferencia.

START URL: Es el directorio base para los objetos web. Al seleccionar un objeto web del dilogo del F5 (Run) y presionar el botn Execute, se va a abrir el browser por defecto definido en la estacin de trabajo.

USER NAME/PASSWORD: es el usuario y la password utilizas para la transferencia. REMEMBER PASSWORD: se selecciona para guardar la contrasea.

Propiedades de ejecucin .Net

A continuacin se detalla el significado de cada una de las opciones que figuran en el dilogo de configuracin del F5.

COMPILER PATH: Determina el path del compilador (csc.exe), este se encuentra bajo el directorio de instalacin del framework en C:\WINNT\Microsoft.NET\Framework\v1.1.4322

VIRTUAL DIRECTORY: Determina la URL base de ejecucin, esta contiene el directorio virtual a ser creado (si no existe) por GeneXus en el Internet Information Service (IIS) local. El momento de la creacin es luego de la compilacin y reorganizacin.

Propiedades de ejecucin Visual Basic

Visual Basic 6.0 Path:
Indica el path del ejecutable VB6.EXE.

Execution Mode Compile & Execute

Esta es la opcin por defecto cuando se est trabajando con Web Panels Visual Basic, ya que para poder ejecutar estos objetos, es necesario compilarlos antes. Tambin se utiliza esta opcin antes de poner en produccin los Web Panels Visual Basic, ya que es necesario compilarlos para poder ejecutarlos en el servidor.

Opciones Propiedades de ejecucin para aplicaciones webJava

Para la ejecucin de aplicaciones web con Java, se debe:

1) Referenciar en el classpath las clases necesarias para compilar los servlets (clases correspondientes al JavaServer Web Development Kit). El archivo puede llamarse servlet.jar o jsdk.jar o jsdk22.jar (dependiendo del Motor de Servlets que se utilice) y por lo general se

encuentra en el subdirectorio LIB del Motor de Servlets. Estas clases se deben referenciar en el classpath, adems, del resto de los archivos de clase que se requieran referenciar en dicha variable de entorno.

2) Indicar en el Web Server Root la URL que el navegador utilizar como base para la ejecucin de los servlets.

Siguiendo el ejemplo que venimos viendo en el cual se utiliza el Motor de Servlets RESIN para Windows, instalado en forma local, a continuacin indicamos lo que corresponde completar en las opciones de ejecucin para dicho caso:

1) classpath=gxclassr.zip;.;<driverjdbc>;c:\resin\lib\jsdk23.jar

2) Web Server Root= http://servername:8080/servlet

PROPERTIES A CONSIDERAR EN EL DESARROLLO DE OBJETOS WEB

En los modelos GeneXus, existen properties que aplican exclusivamente a los objetos web. Algunas a nivel del modelo de diseo por lo que aplican a toda la base de conocimiento y otras se encuentran a nivel de los generadores (por lo que aplican al modelo de prototipo o produccin que lo utilice).

Properties generales
Estas properties se definen a nivel del modelo de Diseo. Se setean mediante la opcin File/Edit Model/Properties teniendo abierto el modelo de diseo. Las relacionadas con objetos web son:

 Base Image Path

Propertiess a nivel del Generador

A nivel de cada modelo, existen algunas properties (en la seccin Web Information) que aplican exclusivamente a los web panels.

GENERATION MODE
Esta property permite especificar si los objetos web del modelo se generarn como objetos dinmicos (acceden a la base de datos) o como pginas html inteligentes (smart static panels). Tambin existe la posibildad de generar smart static panels a pedido mediante el valor Create Static panels on request de esta preferencia. Si se elige este valor, cuando se ejecuta un webpanel, chequea si existe un .html que corresponda a si mismo, con los parmetros que se le pasaron. Si existe, se redirecciona la llamada a dicho html. Si no existe, se crea el .html y luego se redirecciona. Por mas informacin referirse a la documentacin de Smart Static Panels Existe tambin la propiedad a nivel de objeto con los mismos valores que la propiedad del modelo y tambin el valor Use model's property value.

FOCUS CONTROL
Esta property permite determinar si los objetos web, al mostrar su pgina, intentan posicionar el foco en el primer control de entrada (no read-only) o dejan librado al Browser la posicin del foco. Los valores posibles son: First input att/var on the page Browser dependent Existe tambin la propiedad a nivel de objeto con los mismos valores que la propiedad del modelo y tambin el valor Use model's property value.

PROTOCOL SPECIFICATION
Esta property permite especificar el protocolo a utilizar en la url generada para invocar a los objetos web. Tiene tres valores posibles: Unsecure (HTTP), Secure (HTTPS) y Do not specify. El valor por defecto es Unsecure (HTTP), que fuerza a generar HTTP como protocolo en la llamada al web panel e indica que el protocolo a utilizar es el Hypertext Transfer Protocol. El valor Secure HTTPS: fuerza generar HTTPS como protocolo e indica que el protocolo a utilizar es el Secure Hypertext Transfer Protocol. Para utilizar este protocolo es necesario disponer de un servidor seguro. El valor Do not specify indica que no se especificar un protocolo particular,

sino que se utiliza el mismo protocolo empleado para acceder al web panel actual. En el caso de tener aplicaciones con un esquema mixto: algunas pginas seguras y otras no, la property del modelo deber setearse con el valor Do not specify y para cambiar el protocolo deber hacerse un link al objeto indicando expresamente el protocolo a utilizar.

ENCRYPT URL PARAMETERS

Esta property permite especificar si se desea encriptar los parmetros que se envan entre objetos y que son visibles en la URL del browser. Por ms informacin referirse a la documentacin: Encriptacin de parmetros.

ON REQUEST SSP SERVER DIRECTORY

La property On request SSP server directory es requerida cuando se generan SSP (Smart Static Pages) en forma dinmica. Por ms informacin referirse a la documentacin de Smart Static Panels.

ON REQUEST SSP CLIENT URL

La property On request SSP client URL es requerida cuando se generan SSP (Smart Static Pages) en forma dinmica. Por ms informacin referirse a la documentacin de Smart Static Panels.

Properties de .Net
Estas properties se definen a nivel del modelo .Net y se setean mediante la opcin File/Edit Model/Properties teniendo abierto dicho modelo.

Namespace

Determina el namespace de la aplicacin. Los programas generados por GeneXus y compilados con .Net se encuentran disponibles bajo el namespace indicado por esta property. El default es GeneXus.Programs. Sirve para los usuarios avanzados que quieren hacer algun tipo de deployment en el GAC. Valor por defecto : GeneXus.Program.

Use .Net control

Determina la forma de hacer el rendering de los controles HTML ( para EditBox, CheckBox, RadioButtons, ListBox y Buttons), en web panels y web transactions. Por default esta en "No". Cuando el valor es Yes, indica que el rendering se hace utilizando controles .Net para generar el HTML necesario. Estando en "No" indica que use el rendering standard generado por

GeneXus en todas sus plataformas, este ltimo garantiza compatibilidad en el look and feel entre las distintas plataformas Web generadas por GeneXus.

Valor por defecto : No

Generate developer menu makefile

Indica si se generaran los archivos necesarios para compilar el developer men El valor en NO es til para evitar el armado del makefile del developer men, este es muy costoso ya que debe generar todos los response file (*.rsp) cada vez que se compila un objeto. Valor por defecto : Yes

Compiler options
La informacin de esta property se incluir en el .rsp que se usa para compilar el main. Es til por ejemplo para generar informacin de debug (incluyendo el string /debug) o para incluir una dll dentro del namespace (/r:xxx.dll ).

Manejo de contenido esttico

Las aplicaciones web manejan adems del cdigo (servlets) y archivos de configuracin (client.cfg), contenido esttico. El mismo consiste en imgenes, javascripts y en particular un archivo denominado Styles.css que contiene informacin sobre formato, colores, fuentes, etc. utilizados en el diseo del objeto web.

Para el manejo del contenido esttico, se centralizan todos estos archivos en un directorio determinado, en el servidor donde correr la aplicacin web. Para indicar este directorio se utiliza la preference Static content base URL.

Entonces, el servlet generado buscar el contenido esttico en el path resultante de concatenar la URL de la webapp en donde est corriendo el servlet, con el nombre del directorio donde se encuentre el contenido esttico (indicado en la preference Static content base URL). Esto podr visualizarse con View source del html generado por el servlet y al ejecutar el servlet (en el navegador).

Por ejemplo, si se inserta en un objeto web una imagen con el nombre "Imagen.jpg", y en la preference Static content base URL se especifica el valor "/imagenes" y el servlet se instala en la webapp cuya URL es "/Ejemplo", el camino a la imagen va a quedar de la siguiente forma: /Ejemplo/imagenes/Imagen.jpg. Por lo tanto, se debe crear un directorio imagenes bajo la URL de la webapp y copiar la imagen en l para que se visualice al ejecutar el objeto web.

Nota: Esto es vlido para las imgenes que no estn involucradas con los objetos HTML. Por ejemplo las imgenes que se ponen en los background de las tablas o celdas no estn comprendidas en el caso anterior. Este tipo de imgenes no van a concatenar ni la URL de la webapp, ni la preference Static content base URL.

El resto del contenido esttico como ser los javascripts (*.js) y el archivo styles.css que tambin debe estar fsicamente en el mismo directorio que las imgenes, no es necesario copiarlos manualmente como el caso de las imgenes, sino que en tiempo de compilacin, el generador los copia al mismo. Para ello hay que especificarle en la preference Static content directory seen from client el path al mismo, con formato X:\imagenes, donde X:\ es el mapping a la URL de la webapp.

Preference Servlet Directory

Para ejecutar los Servlets, una vez compilados, deben estar en un directorio especfico de la estructura obtenida al instalar el Motor de Servlets. La misma vara en cada caso, dependiendo del Motor de Servlets que se utilice.

El propsito de la preference, es el siguiente:

Propsito Permite especificar el directorio donde se transferirn los servlets generados. En tiempo de compilacin de cada objeto web, el generador los copiar al directorio especificado. Notas: Es necesario especificar este valor antes de generar, ya que se utiliza para la generacin del archivo de make. El path debe ser relativo al cliente, es decir un path visto desde el PC en el que se est trabajando con GENEXUS. Se copiarn adems de los archivos .class, los archivos .cfg, los cuales contienen la informacin de las preferencias ingresadas; por lo tanto, si se modifica algn valor de las preferencias del modelo, es necesario volver a generar y compilar algn objeto web. Adems, para que se tome en cuenta este cambio al ejecutar, es necesario reiniciar el servidor de servlets. Ejemplos de valores H:\servlets - Si el motor de servlets est instalado en una mquina mapeada con el drive H y servlets es el nombre del directorio

donde deben residir los servlets. C:\resin\doc\web_inf\classes Si el motor de servlets es el RESIN y esta instalado localmente en el directorio C:\resin.

Preference Static Content base URL

Propsito Indica el directorio donde los servlets buscarn el contenido esttico (imgenes, javascritps y styles.css) utilizado en los objetos web correspondientes. Los servlets siempre ejecutan en el servidor, por lo que este directorio debe especificarse relativo al directorio correspondiente a la base URL de la webapp. Notas: Cambiar el valor de esta preference no implica regenerar la aplicacin, sino solo un objeto web. Si est en produccin, solo basta con modificar el archivo client.cfg. Ejemplo de valores Si se crea un directorio llamado images bajo el directorio raz del webapp donde se instalaron los servlets, y a l se copian todas las imgenes necesarias, y en diseo solo se especifica el nombre de la imagen, entonces en esta preference habra que poner /images.

Preference Static Content directory seen from client

Propsito Permite especificar el directorio donde se transferirn los javascripts (archivos *.js) que se generan para los menubars de objetos web y web panels generados como estticos. En tiempo de compilacin, el generador los copiar al directorio especificado. Notas: En este mismo directorio tambin habrn archivos de imgenes que se utilicen en los objetos web. Los mismos se deben copiar manualmente a este directorio, y en los programas generados se referenciarn utilizando el valor de la preference Static Content Base URL concatenada con el nombre de cada imgen. El path especificado debe ser relativo al cliente, es decir un path visto desde el PC en el que se est trabajando con GENEXUS.

Ejemplos de valores X:\images - Si el servidor web est instalado en una mquina, mapeada con el drive X y es el directorio images el utilizado para dejar el contenido esttico. C:\resin\doc\images Si el motor de servlets es el RESIN, est instalado localmente en el directorio C:\resin y se le cre el directorio images donde se copiaron las imgenes.

Preference Auto compress web pages

Propsito Los objetos web, en Java, pueden enviar la pgina HTML comprimida, de modo que sea descomprimida en tiempo real por el navegador. La compresin se realiza solo si el navegador indica que es capaz de descomprimirlo. Valores Yes: envan la pgina comprimida. No: no envan la pgina comprimida. Es posible que algunos navegadores no reporten correctamente su capacidad para descomprimir las pginas, y no puedan desplegarlas correctamente. Default Value = Yes

Con formato: Ancho: 21 cm, Alto: 29,7 cm, Distancia del encabezado desde el borde: 1,25 cm, Distancia del pie de pgina desde el borde: 1,25 cm, Sin Encabezado de primera pgina diferente