Está en la página 1de 301

Bienvenido al curso “Desarrollo de aplicaciones para Internet con GeneXus”

Este curso - actualizado a la versión 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 versión 8.0 de GENEXUS o superior. El curso consta de los conceptos teóricos necesarios para el desarrollo de una aplicación web, así como la puesta en práctica de los mismos en una aplicación ejemplo. El desarrollo de esta aplicación 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 aplicación en paralelo (a medida que avanza capítulo por capítulo 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 aprobación) un certificado de haberlo realizado en modalidad no presencial, diríjase a nuestro sitio de capacitación a distancia: http://www.gxtechnical.com/capacitacionadistancia , donde podrá informarse y contratar estos servicios.

INTRODUCCION AL CAPITULO 1
Para poder entender cómo 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 genérico que recibe la unión de todas las redes de comunicación a nivel mundial. Se podría 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 gráfica, fácil de usar que permite navegar para buscar documentos en Internet. Estos documentos, como también los links que existen entre ellos forman un "web" de información. El WEB permite saltar o "hyperlink" de una página web (o web page) a otras. Puede pensarse en el WEB como una gran biblioteca. Web sites son como los libros (libros electrónicos) y las páginas web son como las páginas específicas de estos libros. Estas páginas pueden contener noticias, imágenes, sonidos, 3D, etc. Además pueden estar ubicadas en computadoras de cualquier parte del mundo. Los libros electrónicos mantienen el concepto básico del libro, y además, 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 información.

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

Páginas estáticas Páginas dinámicas

Páginas estáticas
Las páginas estáticas son las más sencillas, se crean usando un editor de páginas Web o bien escribiendo directamente el código HTML. Mientras que se ajustan muy bien a los requerimientos iniciales de hacer promoción 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 páginas son: Información general, Marketing, Información similar a la que se distribuye en folletos y documentos. Tienen la ventaja de brindar un acceso rápido y cómodo a información y brindar direcciones de correo electrónico para información y soporte.

Páginas dinámicas

Las páginas dinámicas son creadas en el momento en que son referenciadas por el usuario. Si bien tienen un estilo base, la información desplegada en las mismas es dinámica.

Son interactivas, ya que permiten que la página a visualizar pueda ser creada en base a la información ingresada por el usuario. Por ejemplo, una consulta de los pedidos pendientes de una orden de compra.

Las páginas dinámicas 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 actualización se realiza en forma automática, ya que al acceder a la página se accede a la base de datos con la información actualizada.

A continuación se presenta una lista de ejemplos que se prestan para una aplicación que utilice páginas dinámicas:

 

Home Banking: operaciones varias sobre cuentas bancarias. Divulgación de información: acceso a información publicada por la empresa. * sin costo en el caso de que la información sea pública
* con costo para aplicaciones en el que se exigen una validación de usuario.

  

Comunicación 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 artículos desde la casa, similar a la compra por catálogo.

APLICACIÓN 3 CAPAS WIN VS APLICACIÓN WEB
Anteriormente se clasificaban las soluciones en Internet según la frecuencia con la que los usuarios las accedían. Para usuarios casuales, se recomendaba una solución Web. Para aplicaciones con usuarios frecuentes, y más avanzados, a los cuales se les podía capacitar en el uso de una aplicación más sofisticada, se recomendaba una aplicación 3 capas (usando Java por ejemplo). Hoy día una aplicación web ha alcanzado el mismo nivel de sofisticación de interfaz que cualquier aplicación Win, y debido a las ventajas que presenta (facilidad en la instalación de la aplicación, 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 clasificación en base a la frecuencia de uso de la aplicación pasa a ser obsoleta, y los parámetros de decisión en cuanto a que tipo de solución implementar giran en torno a otros factores. Si la aplicación se va a crear de cero, lo que se recomienda es implementar una solución Web. En caso de que se disponga de una solución 2 capas, y se quiera migrar a una arquitectura 3 capas: Si el tiempo es un factor relevante en la migración del proyecto, pasar a Win 3 capas es más rápido que a Web. Migrar a Web implica un costo de conversión vinculado al cambio de ambiente. Más adelante en el curso se tratarán temas más específicos en cuanto a la comparación GUI – WEB. Son ambientes diferentes (GUI - HTML) y es necesario tener en cuenta ciertas consideraciones cuando se hace la conversión. Detalles de estas consideraciones se verán también más adelante en el curso.

ALGUNAS DEFINICIONES
Para poder entender cómo 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
Básicamente una URL es una dirección WEB. Cuando visualizamos una página Web con Netscape, Internet Explorer o cualquier otro browser, los links (visualizados subrayados y generalmente en color azul), contienen información oculta que apunta a la ubicación del recurso al que se hace referencia. Se puede pensar una URL como un puntero estándar a un recurso Internet. El recurso podría ser un gráfico, un sonido o simplemente un archivo de texto. Las URL’s también pueden usarse para iniciar sesiones telnet, ftp y otros servicios. En muchos casos es conveniente conceptuar una URL como el equivalente de estándar DOS para nombre y path de un archivo. De hecho una URL puede apuntar a un archivo en la máquina local y también puede apuntar a un archivo específico de un directorio específico en una máquina remota. Sintáxis  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: Ubicación y nombre del documento en el servidor. [parm1,...,[parmn]] Información 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 través del protocolo HTTP.

Se establecen 4 pasos básicos en el protocolo HTTP: 1) Conexión: Durante la conexión, el Web browser intenta conectarse al servidor. Si el browser no logra la conexión 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 conexión al servidor HTTP ha sido establecida, el browser envía 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 conexión. 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 están escritos los documentos del WWW. Es un subconjunto especializado del lenguaje más general SGML (Standard Generalized Markup Language).

El lenguaje HTML está compuesto por una serie de códigos o tags ubicados dentro de un documento ASCII, que son traducidos por un web browser como Netscape, Internet Explorer, etc, en instrucciones específicas para formatear el documento que se va a desplegar en la pantalla. Entre dichos tags están 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 título al documento y donde se indican otros parámetros que el browser podría 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 cómo desplegar el texto. Los tags también referencian archivos de efectos especiales como imágenes y sonido e indican los hot spots que enlazan el documento a otros documentos.

Un ejemplo de código HTML podría 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 vería en un browser de la siguiente forma:

y un archivo .WEB CLASSES A partir de Visual Basic 6. El programa luego procesa esos datos y el servidor devuelve la respuesta del programa al Web browser. . pasando datos específicos del usuario al programa. PERL. Con CGI el servidor Web puede realizar llamadas a programas externos. etc.0 existen nuevas facilidades para generar aplicaciones para Internet. Un programa CGI puede ser escrito en diferentes lenguajes como: C/C++. Visual Basic. la más notoria es la llamada WebClasses Designers. que será ejecutado por el Web Server (Microsoft Internet Information Server). es necesario aclarar algunos conceptos adicionales.ASP (Active Server Page) que sirve como punto de entrada para cada clase en la DLL. los cuales definimos en orden de aparición histórica: CGI: Common Gateway Interface WEB CLASSES SERVLETS ASP.NETCGI CGI es un estándar que define la interfaz entre aplicaciones externas y servidores de información (Web Servers y HTTP). Estos objetos son programados en Visual Basic y al compilarlos se crea un ActiveX DLL.Para poder comprender mejor la tecnología escondida detrás de las aplicaciones desarrolladas para el web.

SERVLETS Junto con JAVA aparecieron componentes para el web con la misma funcionalidad mencionada anteriormente en relación a CGI y ASP denominados servlets.NET de Microsoft y se trata de una evolución de las ASP o Active Server Pages. Los usuarios de Internet tendrán acceso a las páginas que sean públicas y podrán acceder a los datos almacenados en la empresa a través de páginas dinámicas. .NET ASP. Son clases JAVA que ejecutan en el servidor y permiten obtener información en forma dinámica que luego envían al cliente. ASP.aspx.dll’s que se invocan con extensión . o se puede tener un servidor específico para realizar esta tarea. ARQUITECTURA GENERAL En la imagen que mostramos a continuación se puede observar un esquema simplificado de la topología de Internet. Por otro lado. donde se tiene un Servidor Web en el cual se publican las páginas Web. los usuarios de la empresa (Intranet) podrán acceder a las páginas públicas y a las páginas privadas de la empresa. Por un lado se tiene la red de la empresa (Intranet). 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 .NET es otra alternativa de Microsoft para el desarrollo de aplicaciones web. Esta tecnología se desarrolló para la nueva plataforma . Este servidor puede ser también el servidor de base de datos.

dependiente del generador. Resumiendo. El servidor debe tener un software que lo habilite como servidor Web. serían los siguientes: EN EL SERVIDOR   TCP/IP .software que se instala en el servidor y permite hacer públicas las páginas.protocolo de comunicación que conforma la red. Los requerimientos de software para el desarrollo varían dependiendo de la plataforma y generador en la cual se esté trabajando.REQUERIMIENTOS BASICOS PARA PUBLICAR PAGINAS (ESTATICAS O DINAMICAS) EN INTERNET Se debe disponer de una red TCP/IP. que tanto el servidor como el cliente deben tener instalado el protocolo de red TCP/IP. se especificará el software adicional necesario. independientes de plataforma y generador. los requerimientos básicos. normalmente es a este software al que se denomina Servidor Web o Web Server.nos permite visualizar las páginas. para poder desarrollar los objetos Web. es decir. El cliente únicamente necesita un browser para poder visualizar las páginas Web. Más adelante. Servidor Web . . EN EL CLIENTE   TCP/IP Browser .

de forma que permita el acceso de usuarios que se conectan a través de Internet. La imagen muestra en la consola del IIS (Internet Information Server). Debe ser configurado. como se ha definido un alias de nombre “services”. La imagen que se muestra a continuación. Debe tenerse en cuenta que si bien la información a configurar es siempre la misma.¿QUE ES UN SERVIDOR WEB? El servidor web. también es denominado Web Server. es simplemente un ejemplo de Servidor Web. el diálogo de configuración varía dependiendo del Servidor Web que se esté utilizando. . en particular el directorio físico al cual se corresponde (Local Path). En la figura a continuación se pueden ver las propiedades del alias “services” definido. es un software que habilita al servidor para la publicación de páginas web.

Net (que hemos elegido para ejemplificar los ejercicios prácticos del curso). la configuración consiste en determinar un alias que será utilizado por los usuarios de Internet para el directorio raíz. En particular en el caso del generador . y su correspondiente directorio físico en el Servidor. Para poder publicar páginas dinámicas. etc. También se pueden definir múltiples directorios virtuales con permisos de lectura para colocar diversas páginas estáticas. Los conceptos de directorio virtual y alias son manejados en todos los servidores Web.Básicamente. Veamos un ejemplo para ilustrar esto: . Estas páginas están físicamente almacenadas en un directorio (conocido como directorio virtual). El alias es el nombre que utilizarán los usuarios de Internet para acceder a las páginas web. es común definir uno o varios directorios adicionales con permisos de ejecución. el directorio virtual y su alias son creados automáticamente y no es necesario que el usuario lo haga por su cuenta en etapa de desarrollo. lo que varía es la interfaz que provee cada Web Server para realizar la configuración correspondiente. imágenes.

Podemos tener en el directorio c:\empresa\prensa\publicaciones páginas web en formato . las alternativas serían las siguientes: .Net.Net Java Visual Basic Por lo tanto. . PLATAFORMAS Y ALTERNATIVAS PARA EL DESARROLLO DE APLICACIONES WEB Los generadores disponibles para generar objetos web son:     C/SQL . en servidores UNIX (usando C/SQL o Java) o en servidores Iseries (Java). dentro de las plataformas soportadas por cada uno de los generadores GeneXus. pueden ejecutarse en un servidor Web Windows (usando C/SQL. Entonces. con un directorio virtual podemos colocarle un alias a esta dirección (denominado “PUBLICO”). los usuarios web mediante la url http://ServerWeb/publico/prensa. Los objetos web podrán usar cualquier manejador de base de datos. Java o VB). Gráficamente.htm accederán al archivo físico que se encuentra ubicado en c:\empresa\prensa\publicaciones\prensa. De esta forma.htm las cuales queremos publicar en la web.htm del disco local de la máquina que tiene el servidor Web instalado (ServerWeb).

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 páginas para la edición de objetos web (Web Objects). ya que el ‘look and feel’ de la aplicación 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 continuación. . El trabajo se realiza a pantalla completa (diálogo full screen en lugar de campo a campo)   A lo largo del curso profundizaremos sobre estos aspectos. La decisión del generador a utilizar se tomará principalmente por los requerimientos adicionales o interacciones con otras aplicaciones. es el generador GeneXus que puede seleccionarse. se plantean varias alternativas. En varias plataformas. Los objetos ejecutan en el servidor.Dependiendo del servidor de Base de Datos y del servidor Web a utilizar.

de regreso. el cual la despliega al usuario. Para comprenderlo mejor. basadas en el input del usuario.En este capítulo. En este proceso. el ciclo sería el siguiente: . el servidor Web está actuando como un gateway entre la base de datos y el cliente de browser. Los datos que devuelve el objeto web (en nuestro ejemplo. el cual. Para poder realizar dicho procesamiento. comenzaremos a trabajar con el editor de objetos web y veremos sus principales características… FUNCIONAMIENTO . el estado de la orden del cliente) al servidor. 2. veamos un ejemplo: 1. formateados apropiadamente (en HTML) y retornados al usuario. formateará los resultados y retornará los datos formateados al servidor. es necesaria una consulta a una base de datos y los resultados deben ser capturados. el número de cliente es enviado al servidor para ser procesado. En realidad el servidor Web simplemente está pasando el número de cliente al objeto web que realizará la consulta a la base de datos. El servidor luego captura esa información y se la pasa al browser.Gráficamente. Para realizar esto. Cuando esta información es ingresada. pasará esta salida al browser para que sea desplegado al usuario. 4.ARQUITECTURA Al utilizar objetos web las páginas se crean en tiempo de ejecución. Supongamos que tenemos un documento Web que permite al usuario ingresar un número de cliente y. a su vez. son simplemente escritos por el mismo utilizando el método normal de retorno de información del lenguaje utilizado. el servidor formatea y despliega el estado de la orden del cliente. 3. es necesario incluir en el documento un form input que solicite al usuario el ingreso del número del cliente.

NET.JAVA Si se generan objetos web con JAVA.NET Los objetos web generados con .dll’s que son invocados con extensión . utilizan la tecnología denominada WebClasses Designer.aspx. . 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. La tecnología utilizada en este caso se denomina ASP. . como también compartir conexiones a la base de datos. Mas adelante veremos en mas detalle cada uno de los generadores. se utilizan servlets para acceder a la información.Dado que los diferentes generadores utilizan diferentes tecnologías para solucionar el acceso a la base de datos. para cada uno de los generadores. C/SQL En el caso de C/SQL se utiliza CGI para los programas que devuelven la información requerida de la base de datos. Analicemos esto. VISUAL BASIC Los objetos web generados con Visual Basic.Net son . Una de las grandes ventajas que presenta esta tecnología es que permiten mantener conexiones abiertas.

característica fundamental a la hora de diseñar páginas web. tipo de letra. etc. de forma que todo el diseño realizado se puede visualizar en ejecución sin necesidad de incluir código HTML en el Form. mientras que la otra permite la inserción de los controles. que fue diseñado siguiendo el estándar de las herramientas Microsoft Office. existe el Editor de Temas. lo que significa que la posición de los controles que se encuentran dentro del form en diseño es relativa al tamaño de la ventana que contenga la página. Complementando este editor. y permite la inserción de controles GeneXus (Controles edit. Esta facilidad habilita al usuario a diseñar mejores páginas. simplemente se selecciona el texto y se cambia al tamaño deseado. botones.EDITOR HTML DE OBJETOS WEB Introducción La finalidad de este editor es potenciar y simplificar la edición del form HTML de los objetos web.). Es un editor orientado a páginas. Para trabajar con objetos web se dispone de dos barras de herramientas. grid. Este editor provee el manejo de tablas. El editor facilita el formateo de textos (tamaño de letra. que permite definir clases para los controles usados en una aplicación web GeneXus y configurar de una forma sencilla las propiedades de estos controles simplificando el desarrollo y mantenimiento de las aplicaciones web. si se desea modificar el tamaño de la font utilizada en el objeto web. A . Este editor es del tipo "WYSIWYG" (What you see is what you get) lo que permite al desarrollador visualizar en diseño la página web que se va a publicar. lo que permite que los usuarios puedan utilizarlo rápidamente y en forma intuitiva. así como le permite tener el control de la alineación de los controles dentro del Web Panel. Diseño de Objetos Web A continuación se documentan las características más importantes para el diseño de objetos web. Para esto se licenció un editor similar al Front Page de Microsoft.). Descripción del Editor HTML El uso de este editor es muy sencillo. permitiendo crear fácilmente sitios web vistosos y potentes. una habilita las funcionalidades del editor. color. A modo de ejemplo. etc.

Aquellos que pueden ser usados en todos los objetos GeneXus:    Atributos Variables Botones 2. así como las opciones disponibles en esta barra de herramientas. así como las características de los controles disponibles en objetos web. o tienen un comportamiento diferente que en el resto de los objetos. Insertar controles y sus propiedades Los controles que se pueden utilizar dentro de los objetos Web podemos clasificarlos en dos grupos: 1. Formateo de texto La barra de herramientas disponible para realizar estas operaciones es la siguiente: .continuación se documentan las operaciones que se pueden realizar con cada una de ellas. Más adelante se detallan los controles disponibles. Los que son propios de los Web Objects.          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 opción Insert del menú de GeneXus o la siguiente barra de herramientas.

por ejemplo. Al hacer clic sobre esta sección se puede diseñar la pantalla del objeto web. se vuelve al formulario del objeto web. se pueden ver en diseño los bordes de las tablas aún cuando éstos no se vean en ejecución. Design VS. es decir se insertan los controles y se visualiza el aspecto que va a tener en ejecución el mismo. De esta forma. En este caso. . además de la opción Properties (que permite configurar las propiedades del form) se visualizan dos opciones: ‘View Source’ y ‘Edit HTML Source’. Al cerrarla. se puede modificar el código HTML o agregar código. Otra opción interesante es que facilita el trabajo con controles de tipo Text Block. Si se presiona el botón derecho del mouse dentro del formulario del objeto web. de forma tal que el cambio se mantiene en el objeto y se genera posteriormente. Al seleccionar la opción ‘View Source’ se abre una ventana donde se puede visualizar el código HTML que se va a generar al ejecutar dicho objeto. agregar código javascript (si bien esto se puede hacer de otras formas). entre ellas ‘Web Form’.Las operaciones que se pueden realizar son las estándares de edición y formateo de texto. es necesario volver a presionar el botón derecho del mouse y seleccionar la opción ‘Edit Web Form’. que permite visualizar los bordes de las tablas cuya propiedad Border esté con valor 0. CONTROLES Y SUS PROPIEDADES En este capítulo iremos viendo los diferentes controles de los objetos web y las propiedades de cada uno de ellos. La opción “Edit HTML Source” se usa para cualquier caso en el que sea necesario agregar código HTML manualmente. Una de las opciones destacables relacionada con objetos web es . Todo el HTML que se agregue queda entre los Tags <Body></Body> del objeto generado. Source En el borde inferior de la pantalla cuando se visualiza el form de un objeto web. Si se selecciona la opción ‘Edit HTML Source’. el código se visualiza dentro de la ventana del objeto web y para volver al formulario. se pueden observar varias secciones.

Por detalles de la forma de configurar las propiedades de los controles. pero ud.Net y Visual Basic.Es importante resaltar que la asignación de las propiedades puede hacerse directamente en el control o en una clase de un Tema.0 o una versión superior) y consolidar el archivo initial. sin necesidad de generar/compilar absolutamente nada. . cualquier cambio de diseño. 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 aplicación. En el caso de asignar las propiedades en la clase de un tema. estas solamente aplicarán al mismo. Les recordamos leer en el Capítulo 15 ”Requerimientos y configuraciones necesarias por generador” para .Net con SQL Server como DBMS. se verá en detalle el funcionamiento de ambos. se asigna el valor a la misma. y más adelante en el curso. deben crearse la Base de Conocimiento (en GeneXus 8. los generadores disponibles para generar objetos web son: C/SQL. Como primer paso.xpz el cual contiene todas las transacciones y procedimientos de los cuales partimos. puede elegir el generador que desee y disponga. Como ya vimos antes. En el caso de asignar las propiedades directamente en el control. Java. Cualquier cambio. En este capítulo se verá una introducción al objeto Tema y el Editor de Temas. se realizará en el Tema. pero lo que varía es el costo de mantenimiento posterior que implicarán cambios a las mismas. Esta asignación puede hacerse en tiempo de diseño y para algunas de las propiedades pueden modificarse en tiempo de ejecución (programando los eventos del objeto). En ambos casos. El generador que vamos a utilizar en el curso es . requerirá generar y compilar el objeto.

etc.. 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) ..conocer los detalles correspondientes al generador que ud. para ver cómo es el editor HTML y cuál es la forma de trabajar en él. Vamos a crear entonces el modelo de prototipo. Las Transacciones que ya se tienen definidas son las siguientes: MoviesType MovieTypeId* MovieTypeDsc Tipo de película (Video.) 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. haya elegido. antes de crear el modelo de prototipo. CREACION DEL PRIMER WEB PANEL Vamos entonces a crear nuestro primer web panel. A lo largo del curso vamos a ir desarrollando una aplicación web. DVD. un Sitio de ventas de películas en sus diferentes formas (videos.

Finalizada) CustId CustNameCustLastName PurOrdDate PurOrdTot= SUM(PurOrdLinTot)  fórmula PurOrdLastLin (PurOrdLinId* MovieId MovieTitle MovieTypeId MovieTypeDsc PurOrdQtity .Movies MovieId* MovieImg Path de la imagen de la película MovieTitle MovieSumry MovieStck Cuantas películas hay en stock MovieQtity Cantidad de películas vendidas (MovieTypeId* MovieTypeDsc (MovieLinDate* MovieLinPrc)) (ActId* ActLastName ActName) Purchase Order PurOrdId* PurOrdSts (Status de la orden – Pendiente.

deberán hacer lo mismo. Haga clic aquí para ver la demostración Qué es un Tema? A partir de GeneXus 8.0 se cuenta con un nuevo objeto para el diseño de aplicaciones web. Los objetos a los que se les puede asignar un Tema son Web Panels y Web Transactions. Uds. que es el Editor de Temas. y asignar propiedades a dichas clases. Los Temas se asocian a un objeto GeneXus de la siguiente forma: . Un Tema es un objeto GeneXus. mediante el cual se pueden definir clases para los diferentes controles Web GeneXus. El siguiente documento. Una vez asociado un Tema a un objeto (propiedad “Theme”). describe las características esenciales del Editor de Temas: Generalidades del Editor de Temas. e inmediatamente después de terminar de definirlo. MovieId.PurOrdLinUnPrc = udp(PUnitaryPrice. MovieTypeId)  fórmula PurOrdLinTot = PurOrdQtity * PurOrdLinUnPrc  fórmula ) La forma de trabajo que vamos a tener a lo largo del curso es ir mostrando primero cómo definir cada objeto web de la aplicación. Lo primero que haremos es definir en el Web form la interfase para permitir el ingreso de usuario y password. los “Temas”. y una herramienta para el mantenimiento del nuevo objeto. siguiendo los pasos indicados. Comencemos por crear el web panel de "Venta de películas" (”SaleMovie”). Cuando un control es asociado a una clase éste pasa a heredar la configuración de las propiedades dada en la clase. los controles de ese objeto podrán ser asociados a alguna clase del Tema correspondiente.

es a través de la propiedad “Class”. Observe lo dicho anteriormente. existe un Tema de nombre “Default”. Vamos a modificar el Tema “Default”.   Al objeto directamente. Al modelo. por defecto los objetos de la KB están asociados al mismo Tema. se explicarán . En el curso. En la siguiente demostración veremos los pasos seguidos para modificar el Tema “Default” y el efecto de esos cambios sobre el web panel que hemos creado en este capítulo. Es posible también definir la configuración de los HTML Tags involucrados en el HTML de la Web page. configurando la propiedad “Theme” (File -> Edit Model -> Properties). de forma de ejemplificar como se trabaja con los Temas. A la base de conocimiento (File -> Edit Model -> Properties -> Theme. mediante “Object Properties -> Theme”. por lo cual. La propiedad Theme del modelo. ► A la clase Button. La propiedad Class es una propiedad del control. y el valor default de la property “Theme” de un objeto es el valor de la property “Theme” del modelo. “Propiedad Theme”. en diseño) El valor default de la property “Theme” del modelo es el valor de la misma property de la KB. en el web panel creado. a medida que se vayan realizando los ejercicios prácticos. Haremos las siguientes modificaciones: ► Darle un valor a la propiedad BackColor y ForeColor de la clase Attribute. La forma de asociar una Clase de un Tema a un control. le asignaremos un BackColor y un Height. Este Tema se crea automáticamente siempre que se crea una nueva base de conocimiento. y es posible también cambiarla en runtime. está asociada por defecto al Tema “Default”. Observe en la KB que usted ha creado para realizar los ejercicios prácticos.

En el caso de asignar propiedades en el control solamente aplicará al mismo y puede hacerse en tiempo de diseño y algunas de ellas pueden modificarse en tiempo de ejecución (programando los eventos del objeto). puede hacerse en un objeto tema o directamente en el control.Form Al form de los objetos web se le pueden asignar propiedades haciendo clic y seleccionando la opción Properties del menú. incluyendo casos de uso de los HTML Tags.más detalles del objeto Tema y su funcionalidad. y HTML las ventajas que presenta a la hora de realizar el diseño estético del sitio web. Propiedades del form HTML en diseño Las propiedades para el form son las siguientes: . Esta asignación de propiedades.

1. 13. Background Properties 6. Word Wrap Propiedades para el color de los Links: 8. 2. 12. TextColor 4. TooltipText 7. Class: La propiedad Class solo se encuentra disponible si el form pertenece a un objeto que tiene un Tema asociado. Not Visited Link Color Propiedades para los márgenes 11. 14. Background 5. Active Link Color 9. Top Margin Bottom Margin Left Margin Right Margin Propiedades del form HTML en tiempo de ejecución En ejecución se pueden modificar las siguientes propiedades del Form: . BackColor 3. Visited Link Color 10.

Ver orden de precedencia de las propiedades Por detalles de propiedades del Form en los Temas. En el caso de que una propiedad esté asignada en el control (en diseño o en ejecución) ese valor tiene precedencia respecto al asignado en el tema. Para modificar las propiedades de estos controles en ejecución (es decir en algún evento del objeto). es necesario programarlo (ejemplo: &pwd. varias de las propiedades de los forms disponibles en GeneXus y otras que no están en GeneXus. BackColor 2. Propiedades del control Edit en diseño Las variables y atributos son controles de tipo Edit. Propiedades del Form en los Temas Es posible configurar en la Clase Form (o derivadas de ella) en el objeto tema. que tienen las siguientes propiedades: .1. referirse a “Clase Form” Atributos y Variables Al seleccionar un control y presionar el botón derecho del mouse aparecen las propiedades para ser editadas. tiene el nombre del web panel. simplificando así la tarea de alineación. Si en el diálogo de selección de atributos o en el diálogo de selección de variables se seleccionan varios a la vez.IsPassword = 1) Recuerde que muchas de estas propiedades pueden asignarse en el objeto Tema en la clase Attribute. éstos se insertan en el formulario dentro de una tabla. Background 3. Caption: El caption del form se transforma en el título de la ventana. Esta propiedad solamente puede modificarse en tiempo de ejecución. Por defecto.

Se detallan a continuación: 4. (Ver propiedades según el tipo de control). Las propiedades son: . ForeColor 9. Fill 7. Auto Resize: Esta propiedad aplica a controles edit que NO tengan la propiedad Read-Only con el valor ‘True’. Class La propiedad Class solo se encuentra disponible en las propiedades del control si el objeto tiene un tema asociado. BackColor 8. Dentro del grupo Appearance se encuentran todas las propiedades que aplican al aspecto del control. 3. OnClickEvent Propiedades del Control Edit en Tiempo de Ejecución Además de las propiedades vistas anteriormente. Font 10. 6. dependen del tipo de control que se seleccione. Control Type: Las propiedades que se aplican sobre atributos y variables . ya que en este caso se ignora el ancho especificado.1. Format 11. Read Only 5. ReturnOnClick 12. Attribute 2. existen otras que permiten modificar en tiempo de ejecución los controles de tipo edit.

2. Class PROPIEDADES SEGÚN EL TIPO DE CONTROL Hay otras propiedades. COMBO BOX Las propiedades a nivel de diseño que aplican son: 1. FontSize 8. Enabled 4. InternalName 12. Enabled 4. Backcolor 2. Link 15. 3. BackStyle 3. FontBold 5. FontName 7. FontStrikethru 9. InternalName 13. BackStyle 3. 4. FontUnderline 10. Format 12. Visible 17. LinkTarget 16. . ForeColor 11.1. Attribute BackColor ForeColor Fill Font Read Only Las propiedades a nivel de ejecución son: 1. FontItalic 6. Siempre se alinea a la izquierda independientemente del tipo de datos. FontItalic 6. 6. Esto se hace así porque aun cuando el combo sea sobre un atributo numérico los valores que se muestran en el combo son de tipo carácter. FontUnderline 10. FontName 7. FontBold 5. específicas según el tipo de control que se utilice. 5. IsPassword 14. FontStrikethru 9. Visible NOTA : Alineación de un combo/dyncombo en grillas. Backcolor 2. FontSize 8. ForeColor 11.

InternalName 12.RADIO BUTTON. Enabled 4. a saber:  Edit  Combo Box  List Box  Radio Button Obviamente se pueden derivar clases de la clase predefinida “Attribute”. 3. 2. . 4. Visible Propiedades de atributos/variables en el Tema Las propiedades se pueden configurar también en el Tema. ForeColor 11. CHECK BOX Las propiedades a nivel de diseño que aplican son: 1. FontName 7. FontSize 8. La clase predefinida “Attribute” del Editor de Temas reúne las propiedades para todos los controles en los cuales se puedan representar atributos/variables en el form. Backcolor 2. Las propiedades a nivel de ejecución son: 1. FontBold 5. por mas información referirse a “Clase Attribute” Propiedades de variables de tipo bitmap en diseño Las propiedades que se detallan a continuación aplican únicamente a variables de tipo bitmap. FontStrikethru 9. 5. FontUnderline 10. BackStyle 3. Attribute BackColor ForeColor Fill Font Los radio button tienen también la propiedad Radio Direction que permite indicar si las opciones del radio se desplegarán en forma vertical u horizontal. FontItalic 6.

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

Referirse a “Clase Image” METODOS DE LOS CONTROLES EDIT Los métodos que aplican a los controles edit de tipo combo box. 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). dynamic combo box. 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.) y se mejore la "visualización".Propiedades de variables bitmap en el Tema Las propiedades de las variables bitmap (y controles imagen). Etc. que el usuario final digite una fecha u hora sin los separadores ('/'. por ejemplo. 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. ':'. se pueden configurar en los Temas. Esto permite. No se controla que la fecha y/o hora sea válida: esto lo hacen los programas. En caso que el formato no sea correcto. Al presionar el botón derecho del mouse se visualiza el siguiente diálogo que habilita al usuario a editar las propiedades del mismo o a editar el evento que el botón tiene asociado. El formateo ocurre cuando el usuario "sale" del campo y controla únicamente que el formato sea correcto. Botones Para insertar un botón en el formulario se puede seleccionar el disponibles. Propiedades de botones Las propiedades de los controles de tipo Button que pueden modificarse en diseño son: .

6. 3. 5. ControlName Class OnClickEvent Caption Font ForeColor BackColor BorderWidth BorderColor . 8. 9. 2. 7. 4.1.

. con los eventos disponibles. el tamaño quedará fijo independientemente del caption. es que no se visualice lo que escribe. Enabled 2.En ejecución se pueden modificar todas estas propiedades (excepto la control name) del boton y además las siguientes: 1. Internal Name PROPIEDADES DE BOTONES EN TEMAS Además de estas propiedades. Ver Clase Button Tamaño de botones El tamaño del botón queda determinado por el texto ingresado en la propiedad Caption del mismo. que aparezcan asteriscos mientras la ingresa. se deben asociar mediante la propiedad Class a una clase de un tema que tenga un tamaño definido (propiedades Heigth y Width). Si se desea que los botones tengan un tamaño fijo. es decir. en la clase Button de un tema se pueden setear otras propiedades que permiten definir otras características a los botones. Cómo asignar un evento a un botón Para asignar un evento a un botón se puede ingresar directamente el nombre . En este caso. habilitando al usuario la creación un nuevo evento (mediante el botón New). COMO EVITAR VISUALIZAR EL INGRESO DE UNA PASSWORD Una cosa que vamos a querer cuando un cliente digita su password. Al utilizar este del evento (entre comillas simples) o hacer clic al botón selector de eventos se visualiza el siguiente diálogo.

que normalmente es el Servidor Web -(Ej. Hay que recordar que el servidor web tiene acceso únicamente a aquellos directorios definidos en el software de administración del mismo. Si programamos Variable. se distinguien dos ambientes o fases muy diferentes: el de diseño y el de ejecución.gif). Haga clic aquí para ver la demostración IMAGENES En el desarrollo de aplicaciones web al igual que cualquier tipo de aplicaciones.Para hacer esto. por ambiente de ejecución entendemos a la ejecución propiamente dicha de los objetos web (normalmente realizada por los usuarios finales). programamos Variable. Identificar estos dos ambientes es muy importante al trabajar con imágenes ya que determinará que las mismas sean ubicadas correctamente y no ocurran errores del estilo “File not found”. utilizamos la propiedad IsPassword asociada a las variables. Haremos los cambios correspondientes en el objeto “SaleMovie”. Observe que como el objeto será utilizado como punto de entrada a nuestra aplicación.: c:\modelo\imagenes\img. En el ambiente de diseño (mientras se trabaja con GeneXus editando los objetos web) las imágenes se buscan en el camino indicado en cada imagen (Ej.IsPassword = 0 se puede visualizar lo que el usuario digita sobre la variable Si por el contrario. al ejecutar aparecen asteriscos (*******) mientras el usuario digita sobre la variable. pero en ejecución es necesario referenciar el camino virtual donde se encuentran las mismas. Para solucionar esto. Por ambiente de diseño. lo definiremos como un objeto de tipo main. .IsPassword = 1.: /imagenes/img.gif). nos referimos al ambiente utilizado por los usuarios GeneXus que desarrollan la aplicación web. se dispone de una preferencia a nivel de diseño denominada ‘Base image path’ .

se deberán tener las imágenes duplicadas para poder accederlas en desarrollo y posteriormente en producción. En este caso. Si las imágenes se indican como images/image. si tenemos: En c:\inetpub\wwwroot la raíz del servidor web En c:\myapp\extranet el directorio de la aplicación web Si las imágenes se indican como /images/image.Preferencia Base image path En esta preferencia del modelo de diseño. Por ejemplo. Continuando con el ejemplo. para insertar una imagen se debe seleccionar el botón de la barra de controles disponibles. Esta forma de trabajo. En el caso en que se tenga acceso al servidor Web que se usará para producción final.gif). Dado que delante del nombre de la imagen queda ‘/’. en ejecución el servidor web va a buscar la imagen bajo el directorio raíz del mismo. En cada una de las imágenes se pondrá el camino /images seguido del nombre del archivo.jpg significa que existe el directorio c:\myapp\extranet\images.  . en la preferencia se deberá referenciar el path absoluto al directorio que las contenga en tiempo de diseño. es decir mientras se desarrollan los objetos web. se debe ingresar el camino absoluto que se va a utilizar para referenciar las imágenes en tiempo de diseño. por lo tanto en la preferencia se deberá indicar el valor c:\inetpub\wwwroot. Cuando no se tiene acceso al servidor Web que se usará para producción (que es el caso mas común). Si se coloca el camino images (sin el carácter barra) intentará ubicar el directorio en forma relativa al directorio de la aplicación y no respecto a la raíz del servidor web. y en el diálogo para ingresar el origen de la imagen se debe seleccionar la misma. si el directorio raíz del servidor Web es c:\inetpub\wwwroot y para las imágenes de la aplicación existe el subdirectorio images esta preferencia podrá contener el valor c:\inetpub\wwwroot o la url http://myserver. Luego en el objeto web. en la propiedad Source queda el nombre de la imagen (ej: /imagenes/img.com. permite que las imágenes esten en un único directorio y pueden ser accedidas tanto en tiempo de desarrollo como en producción. se debe eliminar el ‘/’ de la propiedad Source. este camino puede referenciarse como una URL o también como un path absoluto (respecto al servidor de archivos). Observaciones:  Si la imagen seleccionada está bajo el path ingresado en la preferencia de diseño. Si se desea ubicar la imagen bajo el mismo directorio donde está el resto de los objetos web.jpg significa que existe el directorio c:\inetpub\wwwroot\images. por lo tatno en la preferencia se deberá indicar el valor c:\myapp\extranet\images. (siempre que en tiempo de desarrollo se tenga conexión al servidor Web).

es agregar el evento click de la misma con el código deseado. Si la imagen tiene asociado un link. Una vez agregada una imagen al objeto web.) a una imagen. En particular. un valor en la propiedad Onclickevent. Next.   Si se prefiere que las imágenes de la aplicación se ubiquen en forma relativa al directorio de los web panels. Asignación de evento en ejecución Otra forma de asignar un evento a una imagen. Esta propiedad permite asociar un evento de los objetos Web a una imagen. Si la imagen seleccionada no está bajo el path ingresado en la preferencia ‘Base image path’ de diseño. Last. Next. Previous. por lo que la misma no va a ser desplegada al ejecutar el objeto.  Con formato: Numeración y viñetas . en las imágenes se deberá referenciar el directorio imagenes\imagen. Tiene el mismo funcionamiento que la propiedad de igual nombre para los botones. Como asignar un evento a una imagen Existen dos formas de asignar un evento a una imagen: en diseño o en ejecución. Enter. etc. etc. la propiedad Source queda con el path absoluto.gif es decir sin la barra al principio.  Como se mencionó anteriormente. Asignación de evento en diseño Para asignar el evento en diseño se puede utilizar la propiedad OnClickevent. prevalece este último (se ignora el evento Click). De la misma forma. sirve para asociar el evento Enter a las imágenes. a su vez. es posible asociar a una variable de tipo bitmap un evento . Si una imagen tiene evento Click y. En Web Panels. pierde el mismo al quedar asociada a un evento. permite asociar un evento estándar de GeneXus (como First. Esta propiedad OnClickEvent es usada principalmente en las Transacciones Web para poder asociar imágenes a los eventos estándar: Previous. para asociar eventos de usuario a una imagen puede usarse la propiedad Onclickevent o el evento Click. se puede editar la propiedad ‘Source’ de la misma e ingresar cualquier path.

y seleccionar la opción 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. existen diferentes alternativas para completar esta opción. Para insertar una imagen tenemos que posicionarnos en el lugar que queremos insertarla. Primero. que cuando ingresamos las imágenes hacemos el seteo de la propiedad "Source" de la misma).zip. . y en consecuencia también el lugar donde deben estar al momento de ejecutar el objeto en el web.TRABAJAR CON IMAGENES Volvamos a nuestro web panel de "Ingreso al sitio de ventas" (”SaleMovie”) y agreguémosle dos imágenes. tenemos que ir al modelo de diseño y setear la preferencia "Base Image Path" para indicar dónde están ubicadas de forma tal de poder verlas mientras diseñamos. que formarán parte del diseño de nuestro sitio web. descomprimimos las imágenes en el directorio images bajo el directorio de la KB (c:\InternetApp). y las copiamos también al directorio ‘images’ bajo el directorio raíz de nuestro servidor web. Haga clic aquí para ver la demostración Propiedades de las imágenes A continuación se detallan las propiedades disponibles para las imágenes en tiempo de diseño. Como discutimos anteriormente (ver Imágenes). En nuestro ejemplo. Todas las imágenes necesarias para el diseño del sitio se encuentran en el archivo images. Para poder usarlas hay que descomprimirlas y almacenarlas en algún directorio del disco duro.

Align 14. Bitmap . Width 8. TooltipText 11. TooltipText 3. 3. VerticalSpace 13. InternalName 5. Height 7. ReturnOnClick Propiedades De Las Imágenes En Tiempo De Ejecución Las propiedades de las imágenes que pueden modificarse en tiempo de ejecución son: 1. UseMap 15. Source 4. Borderwidth 9. BorderWidth 2. AlternateText 10. ControlName 2. AlternateText 4. HorizontalSpace 12. OnClickEvent 6. Class La propiedad Class solo se encuentra disponible si el control está en el form de un objeto que tiene un Tema asociado.1. LowResSource 5.

6. En las urls relativas no debe indicarse el protocolo (http. LinkTarget 9. Esta función se puede asociar a la propiedad link de un control dentro de cualquier evento del .yahoo. Si solamente se referencia el nombre del archivo. 8.com)  Una url’s relativa es una dirección relativa al archivo que la contiene. de forma que cuando el usuario hace clic sobre el mismo. Es suficiente con el nombre del archivo.).  Una url absoluta es una dirección completa que incluye el camino completo al archivo. Class PROPIEDADES DE IMÁGENES EN LOS TEMAS Además de estas propiedades. Cuando se referencia un archivo (página) de alguien más. Ver Clase Image LINK Los links son una característica única del WWW que nos permite saltar o navegar entre páginas web. Función LINK La función LINK permite “enlazar” un objeto web con otro objeto web o con una URL. 7. Dentro de GENEXUS. ftp. A continuación se definen ambos casos de uso. etc. se asume que estará en el mismo directorio que la página que contiene el link. Las url’s pueden ser absolutas o relativas. tenemos que especificar la URL de la página web a la cual queremos acceder. el link puede ser utilizado como función o como comando. Cuando queremos poner un link. El link puede estar asociado a una imágen o a un texto. en la clase Image (o derivadas de ella) de un Tema. Link: Si se programa el evento Click de una imagen se ignora la propiedad Link. se llama a otra página estática. Visible 10. normalmente se va a usar una url absoluta (por ej: www. Enabled: La propiedad Enabled de Runtime permite habilitar (Enabled=1)/deshabilitar (Enabled=0) la ejecución del evento asociado a la variable bitmap. página dinámica o archivo multimedia. se pueden setear otras propiedades que permiten definir otras características a las imágenes.

6. El pasaje de parámetros es opcional. El primer parámetro. siendo &varurl la variable que contiene la URL..[parn] son el conjunto de parámetros a pasar a los mismos. NOTAS: 1. Ej. se debe utilizar la siguiente sintaxis: &var. 2. siendo AplLnk un atributo de alguna tabla. tambien puede ser un atributo o una variable con la url o el objeto a invocar. [parn]) el primer parámetro contiene el objeto web.link = link(hLogin).. Si se desea hacer un link...uy’).artech.objeto web.. La sintaxis de la función link es: link(Objeto/URL/Att:Atributo/&var.com.link = link(‘http://www. 4.: &var. utilizando un atributo que contiene la url o el nombre del objeto web correspondiente. Solamente se puede asociar la función link a controles que sean Read Only. [par1]. [par2]. Se considera como una url absoluta.. teniendo como resultado que al hacer click sobre dicho control se realiza la llamada al objeto web o URL referenciado en el link. 3. .link = link(&varurl). 5. la URL debe ser ingresada entre ‘’ (comillas simples/dobles). Ej: &var. o la URL a llamar y [par1]. Se considera como una url relativa. El objeto debe ser seleccionado utilizando la opción Insert/Object o Ctrl+B. También se puede definir un link utilizando una variable que contiene la url o el nombre del objeto web correspondiente con la siguiente sintaxis: &var. Si se desea llamar a una URL.link = link(att:AplLnk).

html’. Por lo cual esta administración queda por parte del desarrollador.artech.html’ Si no es ninguno de los casos mencionados anteriormente.) al comienzo del contenido del atributo o la variable. se visualiza en la parte inferior del browser: ‘http://www. Comando LINK Ver Comandos/LINK.uy’. el usuario va a recibir un mensaje que le indica que no se pudo resolver la url..uy’.html’. se concatena la URL actual.com.OBSERVACIONES En el caso de utilizar un atributo o una variable dentro de la función link. el armado de la URL depende del contenido del atributo o la variable:  Si la variable contiene http. al posicionarse sobre el link. al posicionarse sobre el link. Ej: &var/att=’index. Ej: &var/att=’/index.com.. Ej: &var/att=&PgmName. simplemente se debe concatenar una dirección de e-mail a la palabra mailto como se describe a continuación: &mail = ‘mailto:’+trim(AttMail/&varmail) &var.artech. al posicionarse sobre el link. Si se encuentra un ‘/’.link = link(&mail) siendo &mail una variable de tipo caracter y AttMail o &varmail el atributo o variable que contienen la dirección e-mail. por lo tanto al hacer clic sobre el link. al posicionarse sobre el link. simplemente concatena el nombre del servidor (ej: http://servidor/.    Mailto Una característica interesante del link es que se puede definir de forma tal que al hacer clic sobre el mismo se abre una ventana para el envío de mail. Ej: &var/att=’http://www. se visualiza en la parte inferior del browser: ‘http://servidor/diractual/index. el link se corresponde con el contenido de la misma. . al comienzo del contenido del atributo o la variable.html’ En caso de almacenar el nombre de un objeto GeneXus hay que destacar que no se agrega ninguna extensión. Para poder hacerlo. se visualiza en la parte inferior del browser: ‘http://servidor/index. se visualiza en la parte inferior del browser: ‘http://servidor/diractual/obj”.

3. El comando link. Desde un objeto web se puede hacer CALL a:   Objetos web Procedimientos La función y el comando LINK puede hacer referencia a:   NOTAS: 1. el comando link permite redireccionar a otros sitios web o páginas dentro de otros directorios del sitio donde se está ejecutando el objeto web. A continuación se realiza una comparación para aclarar las diferencias entre los mismos. Objetos web Páginas HTML estáticas PRIMERA EJECUCION DEL WEB PANEL Una vez creada la base de datos. link y la función link.CALL Ver Comandos/CALL. luego de especificar y generar todos los programas ejecutemos nuestro primer web panel (habiéndolo compilado previamente). La única forma de llamar a un procedimiento es con un call. A diferencia del call. Como navegar entre objetos web Para relacionar objetos web dentro de una aplicación. La función link se dispara cuando el usuario hace click sobre el mismo. 2. se dispone de los comandos call. en cambio se ejecuta en forma automática cuando se ejecuta el evento. La pantalla de nuestro primer web panel en ejecución sería la siguiente: .

se deben usar las TABLAS. .Si observamos bien el web panel. las variables de ingreso de datos no están alineadas. En el próximo punto veremos cómo alinear los controles del web panel "Sale of Movies" insertándolos dentro de una tabla. es decir que las propiedades disponibles para una celda tienen alguna variación con respecto a las disponibles para la tabla o la fila. Una tabla está compuesta por filas y celdas. Agregar tabla Para insertar una tabla se debe utilizar el botón de la barra de controles. dentro de las que se encuentran los controles. Propiedades de las tablas Las propiedades varían dependiendo de la selección realizada. es necesario utilizar tablas para poder alinear los controles dentro del formulario para mejorar el diseño de los mismos. fila y celda. Para alinear controles (por ejemplo: que todas las variables donde el usuario va a ingresar los datos queden alineadas a la izquierda). TABLAS Cuando se trabaja con objetos web. A continuación se documentan las propiedades a nivel de tabla.

pero podrá verse en diseño usando el botón valor por defecto es 1. Class La propiedad Class solo se encuentra disponible si el control está en el form de un objeto que tiene un Tema asociado. Backcolor 7. las de la fila a la que pertenezca la celda y las propias de la celda. de la barra de herramientas. BorderWidth: 0 indica que no tendrá borde en ejecución. Background 6. El 8. En este caso. Seleccionar la opción Properties del menú pop-up que se despliega. 1. 3. Align 5. Tooltiptext 4. ControlName 2.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 botón derecho del mouse. Otra forma de editarlas es presionando el botón derecho del mouse estando posicionado en cualquier celda de la tabla. se podrán editar además de las propiedades de la tabla. y después ir a la sección de Table. BorderColor .

5. 1. se pueden asignar valores a propiedades para una fila particular dentro de las tablas. Identifier TooltipText Align Vertical Align Backcolor BorderColor . Cellpadding Cellspacing Height Width Rules Propiedades de las filas de una tabla Como se puede observar en el diálogo de propiedades –sección ROW-. 6. 11. 12. 2. más una propiedad adicional: Vertical Align. 4. Las propiedades de las filas. 3. son algunas de las propiedades de las tablas. 13. Estos valores tendrán preferencia a los asignados para la tabla en general.9. 10.

11. 10. Identifier Tooltiptext Align VerticalAlign Background Backcolor Bordercolor Height Width Colspan Rowspan PROPIEDADES DE TABLAS EN LOS TEMAS Además de estas propiedades. en la clase Table (o derivadas de ella) de un Tema. 3. 9. 5. se pueden configurar otras propiedades que permiten definir otras características a las tablas. 8. Ver Clase Table . 4. 7.Propiedades de las celdas de una tabla Las propiedades de una celda de una tabla son las que se muestran a continuación: 1. 6. 2.

filas y form. celdas. Haga clic aquí para ver demostración Dado que ya vimos todas las 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. 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: .PROPIEDADES DE LAS TABLAS . dichos controles no están perfectamente alineados entre sí. ya que como podemos observar en la imagen del web panel “Sale of Movies” en ejecución. el texto y la variable correspondiente a la Password y el botón “Login”.

Haga clic aquí para ver la demostración Text Block Los controles ‘Text Block’ pueden ser vistos como texto insertado directamente en el form. Edición de control Text Block En la barra de herramientas para el form HTML se incluye un botón que facilita el trabajo con controles de tipo Text Block. con la ventaja que en forma dinámica (en ejecución) se puede modificar el mismo. se puede presionar el botón de la barra de controles disponibles. Al presionar el botón mencionado. se visualizan los TAG’s que lo definen permitiendo detectar cualquier problema en diseño. Propiedades Text Block en diseño Las propiedades de este tipo de control son: . Para insertar un Text Block.

se pueden configurar otras propiedades para los . 4. se pueden modificar las siguientes propiedades de los Text Blocks en tiempo de ejecución: 1. en la clase Textblock (o alguna clase derivada de ella) de un Tema. Format: El valor por defecto para TextBlocks es Text (se puede cambiar a través de la propiedad “Default HTML Format(Textblocks only)” del modelo de diseño). 3. 3. 5.1. OnClickEvent 5. Visible Caption Link LinkTarget Format Class PROPIEDADES DEL CONTROL TEXTBLOCK EN LOS TEMAS Además de estas propiedades mencionadas. ReturnOnClick Además el textblock se puede configurar usando la barra de formateo de texto de GeneXus (seleccionando el textblock). 2. ControlName 2. 6. Propiedades Text Block en ejecución Además de las propiedades detalladas anteriormente. 4. Class: La propiedad Class solo se encuentra disponible si el control está en el form de un objeto que tiene un Tema asociado.

Font 6. Display Mode 4. 3. Error Viewer El control Error Viewer es utilizado para desplegar mensajes al usuario. ForeColor 5. Fill 7. BackColor . utilizando la función msg(). Ver Clase Textblock.Textblocks. Class La propiedad Class solo se encuentra disponible si el control está en el form de un objeto que tiene un Tema asociado. y se usa en el código del web object la función Msg(). de todas formas aparece el mensaje (en la esquina superior izquierda del form). Propiedades del Error Viewer en diseño Las propiedades del control Error Viewer en diseño son: 1. Para insertarlo ir por el menú de GeneXus: Insert -> Error Viewer Si no se inserta explícitamente en un lugar determinado del form. ControlName 2.

Haga clic aquí para ver la demostración . se pueden setear otras propiedades para el control. y se usa la función msg(). mientras que a los controles de tipo Texto se le pueden cambiar las propiedades solamente mientras estamos diseñando. 2. Esto normalmente en un work panel lo haríamos utilizando la función msg(). se pueden modificar las siguientes propiedades en tiempo de ejecución: 1. 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. es utilizando un control de tipo Text Block y modificando su caption en tiempo de ejecución. verificar que la password ingresada sea correcta y en caso de no existir darle un mensaje al cliente informándole que se debe registrar como nuevo usuario. Esto significa que los objetos web tienen un control ErrorViewer implícito que es donde se despliega el mensaje al usar la función msg(). aparece donde se colocó el control. No serviría 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 ejecución (como por ejemplo la propiedad caption). Si el control error viewer no se coloca en una posición determinada del form. 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. 3. Si existe. el mensaje aparece en la esquina superior izquierda de la pantalla. En los objetos web. de lo contrario. BackColor DisplayMode ForeColor Class PROPIEDADES DEL CONTROL ERROR VIEWER EN LOS TEMAS Además de las propiedades mencionadas. 4. Tenemos que verificar en el evento “Login” si existe en nuestra tabla de clientes un cliente con dicho usuario. el mensaje se despliega usando el control Error Viewer.Propiedades del Error Viewer en ejecución Además de las propiedades detalladas anteriormente. Otra forma de darle un mensaje al usuario en los objetos web. en la clase Error Viewer de un Tema (o alguna clase derivada de ella). y se abriría una nueva ventana con el mensaje. si utilizamos la función msg().

donde el cliente va a poder ingresar todos sus datos por primera vez (nombre. Una forma es agregar en el web panel que estamos diseñando un botón en cuyo evento se programa un CALL a otro objeto. Es por esto. Otra forma. es que vamos a tener que definir ya el nombre que le vamos a poner. Dado que el objeto web que queremos invocar todavía no lo creamos. también vamos a tener que saber desde ya el nombre del servidor web en el que van a estar todos los objetos web de la aplicación. Es decir. Es importante destacar que al definir un link estático. usuario. en nuestro ejemplo va a ser una transacción con form HTML que se denominará “Customer”. etc.aspx (“services” es el alias del directorio virtual donde se encuentran los ejecutables) También podemos ingresar el link en forma relativa. insertar en el formulario un Texto y asociarle al mismo un Link Estático (con la opción Insert/Hyperlink o Ctrl K teniendo el texto marcado) que nos permita acceder al objeto web de ingreso de datos del usuario. Si definimos el link en forma absoluta. es necesario incluir la extensión del objeto web. donde tenemos que especificar la URL donde se encuentra el objeto web que queremos invocar. va a ser necesario editar el mismo y modificar el link. el nombre del servidor web va a ser localhost.COMO ASOCIARLE UN LINK ESTATICO A UN TEXTO Veamos ahora entonces cómo haríamos para permitir que el cliente se pueda registrar por primera vez.). es incluir en lugar de un botón. Por lo tanto. Es decir. que podemos hacerlo con un control de tipo Texto y no es necesario un Text Block. . En nuestro caso. password. Esto lo podemos hacer con un Texto ya que la propiedad que le queremos asociar al mismo es "estática". Vamos a realizarlo con el LINK ESTATICO ya que con el botón es conocido por todos cómo hacerlo. simplemente marcando en la opción Type el valor “(other)” e ingresando el path relativo. queremos que el link haga siempre referencia al mismo objeto web. que la URL que tenemos que poner debe ser http://localhost/services/TCustomer. y los objetos web los vamos a tener bajo el directorio “web” del modelo. es decir. dirección de mail. si el mismo objeto fuese generado en otro lenguaje. un LINK al objeto web de ingreso de usuarios (el cual no hemos creado aún). Tengamos en cuenta que cuando hagamos Insert/Hyperlink nos va aparecer la siguiente imagen.

Haga clic aquí para ver la demostración En conclusión. cuando el usuario accede a una página del servidor Web para visualizarla. Es decir que nos va a permitir desplegar los datos del usuario. Esta comparación nos permitirá destacar las diferencias que existen al desarrollar aplicaciones para este ambiente. 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). estaremos comparando los web panels con los work panels. La siguiente demostración corresponde a la creación del web panel CustProfile. existen otras posibilidades que son mas dinámicas que vamos a ver más adelante.Haga clic aquí para ver la demostración Esta no es la única alternativa disponible para agregar el link a un objeto web. Para una mejor comprensión del desarrollo de aplicaciones para Internet. Vamos a agregar la regla parm(CustId). Por lo tanto. donde vamos a colocar los datos del cliente (nombre. En ese momento se envía (o se somete) el resultado al servidor para continuar con su . CREACION DEL SEGUNDO WEB PANEL Lo que vamos a hacer a continuación es crear un web panel CustProfile. Los links estáticos normalmente se utilizan para referenciar a páginas externas o que utilizan otros protocolos. de forma de que el web panel se comporte como un work panel. Para dar de alta en la base de datos. Por supuesto seguiremos avanzando sobre nuestra aplicación Sitio de ventas de películas. el Browser baja la página al cliente. 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 algún evento de usuario. en el sentido de que si se colocan atributos en el form. usuario). recordemos que los web panels se comportan como work panels. la información desplegada no puede ser modificada y si colocamos variables se puede ingresar información. ESQUEMA DE TRABAJO EN INTERNET Es importante entender la diferencia del ambiente en el que se está trabajando: en Internet. INTRODUCCION AL CAPITULO 3 A lo largo de este capítulo profundizaremos sobre el funcionamiento de los web panels. y que son mas adecuadas en este caso para mantener la portabilidad de la aplicación. mail.

Orden de ejecución de los eventos El orden de ejecución de los eventos en web panels se diferencia si es la primer llamada al mismo o si se disparó algún evento de usuario. Start (nuevamente se dispara el evento Start) 2. se ejecutará nuevamente éste y el orden de disparo de los eventos será diferente. Nueva lectura de las variables de la pantalla. 4. Esto se realiza porque el usuario puede haberlas modificado (por ejemplo las variables de la parte fija del web panel que están involucradas en las conditions) 3. PRIMERA EJECUCIÓN DE LOS WEB PANELS La primera vez que se ejecuta el web panel (se conoce también como el momento en que se hace el “GET” de la página) los eventos que se disparan son los siguientes y en el siguiente orden: 1. RESTO DE LAS EJECUCIONES DE LOS WEB PANELS En el resto de las ejecuciones.procesamiento. momento que se conoce también como el “POST” de la página. Esto implica algunos cambios importantes en la forma de programar los objetos. Refresh 5. Load Relacionado con esto es importante destacar el momento en que las variables adquieren los valores ingresados por el usuario: solamente lo harán después de presionar un botón (que es cuando el servidor Web tiene el control del procesamiento). Es por esta razón 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. Start 2. . Load Luego de esto. cuando el usuario presione un botón (ya sea asociado al evento ENTER o a un evento de usuario) que no llame a ningún otro web panel. los eventos se dispararán en el siguiente orden: 1. Código correspondiente al evento asociado al botón seleccionado. Refresh 3.

ordenar un producto. Además. los datos del form van en el cuerpo del mensaje. la forma . 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 ningún valor cuando se haga clic sobre el link. etc. EJEMPLO ESQUEMA DE TRABAJO EN INTERNET Aunque decimos que los web panels son similares a los work panels. Si en un Evento se usa una variable que se carga en otro evento.Por ejemplo. no queda en memoria. el GET es para recuperar datos mientras que el POST sería para grabar. deberá estar en el form después del control en el que se carga la variable.aspx"> Las especificaciones HTML definen técnicamente 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. Entonces. actualizar datos. El método se especifica dentro del elemento HTML “FORM”. usando el atributo “METHOD”. hay una diferencia fundamental entre ellos relacionada con el hecho que el objeto web una vez que finaliza la ejecución. Si no está en el form. Por ejemplo. la variable no tendrá valor cuando se disparan los otros eventos (esto es por el “orden” en que ocurren los eventos). Nota: En HTML se puede especificar dos métodos distintos de someter el form. por ejemplo: <form id="MAINFORM" name="MAINFORM" method="POST" ACTION="hwfmain. entonces esa variable debe estar presente en el form. En general. Como consecuencia. En el POST. lo cual significa que esa forma de someter el form es equivalente a seguir un link a la URL codificada. si la variable se carga en el LOAD de un grid entonces la variable tiene que estar en pantalla después del grid. En GeneXus todos los eventos se resuelven con un POST y se ejecutan en el servidor web. cuando es METHOD="GET" los datos del form se codifican en una URL (o mas genéricamente en una URI).

guardamos en una variable el código de usuario para poder utilizarlo en otro evento. Esto nos permitiría. Si agregásemos un botón o una imagen con un evento clic asociado. El link se podría definir en el mismo evento Login a continuación de la asignación de la variable. Cuando presionamos el botón para validar el login. se asigna a la variable &CustId el código de usuario correspondiente. entonces el código seria el siguiente: Event profile. Supongamos que en el evento donde validamos el usuario y la contraseña (en el web panel Sale of Movies).Caption = ‘Invalid password.en que programamos este tipo de aplicaciones presenta algunas diferencias con respecto a lo acostumbrado en ambientes no web. o se puede agregar un botón y en el evento asociado invocar al objeto. En la primer ejecución se disparan los eventos: Start. Cuando presionamos la imagen con el evento clic asociado. existen varias alternativas: se puede definir un link en algún evento. Repasemos entonces lo que pasa en este segundo caso: 1. es usar un control textblock y hacer el llamado al webpanel en el evento clic del textblock.clic/profile Call(HCustProfile.com’ Else Message. llamar a un objeto que permita visualizar los datos del usuario. En consecuencia. deberíamos programar lo siguiente en el evento donde validamos el usuario: Event ‘Login’ For each Where &CustUsr = CustUsr If CustPsw = &CustPsw &CustId= CustId Message. try again please’ Endif When none Message. . Ejemplifiquemos esto.Caption = ‘User name not found’ Endfor Endevent Para realizar la llamada al web panel Datos del Cliente (CustProfile).&CustId) Endevent Otra alternativa (la que vamos a implementar en este caso).Caption = ‘’Welcome to Movies. se dispara el evento Start. Refresh y Load y podemos ingresar el usuario y password. por ejemplo. programando nuestro sitio de ventas. se leen las variables que están en pantalla. se ejecuta el evento clic y ahí cuando trata de redireccionarnos al Web Panel CustProfile. Es por esta razón que es importante tener claro el orden de ejecución de los eventos. 3. 2.

Para quienes conocen y utilizan los Styles habitualmente. que si queremos disponer del valor de la misma. y password “mykey”. hay algunas diferencias causadas principalmente por el esquema de trabajo en Internet. Son objetos muy flexibles que se prestan para múltiples usos. es decir un Web Panel con la propiedad Style Object habilitada. Entonces en este caso. cuando el Web Panel ejecute por segunda vez. Haga clic aquí para ver la ejecución Es por esta razón. Tabla Base La determinación de la tabla base de los Web panels es análoga a la determinación de los work panels. es decir los cambios que se hacen en el style luego de estar aplicado no se heredan. en el que basaremos luego la definición de los nuevos objetos.la variable &CustId no tiene valor ninguno. Se leen las variables del form (en este momento se obtiene el valor de CustId) 3. ya que la misma se perdió luego de haber finalizado la ejecución del Web Panel en el punto 2. los styles aplican solamente al momento de inicializar el objeto. cuya programación está dirigida por eventos. De todos modos. Este usuario ya ha sido definido en los datos que se distribuyen con el curso. deberíamos agregar la variable &CustId en el form y la ocultaríamos usando la propiedad Visible (por ejemplo en el evento Start). y por consiguiente se llama al Web Panel con el código de cliente correcto! Haga clic aquí para ver la demostración Haga clic aquí para ver la ejecución Nota: Conviene hacer en este punto del curso un Estilo de Web Panels (que llamaremos “SaleMovie”). Haga clic aquí para ver la demostración COMPARACIÓN 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. es importante destacar que en el caso de los web panels. Start 2. . La determinación de la tabla base puede encontrarse en el capítulo: ‘Múltiples Grids’. se dispararán los eventos: 1. Haga clic aquí para ver la demostración Probemos el web panel con el usuario “myuser”. Se ejecuta el evento clic.

. Gatillado de fórmulas stand alone En un Web Panel existen fórmulas que pueden ser gatilladas antes del evento Start y otras que deben gatillarse luego del mismo evento. 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 ningún valor cuando se haga clic sobre el link. si la variable se carga en el LOAD de un grid entonces la variable tiene que estar en pantalla después del grid. NOACCEPT. Load. las variables adquieren los valores ingresados por el usuario después de presionar algún botón en el web panel. SEARCH. Reglas más importantes En el objeto Work Panel. es decir evento Start. Variables Como se menciona en la sección ‘Esquema de trabajo en Internet’. Refresh. La diferencia con los work panels es el orden de disparo de estos eventos. etc. Si en un Evento se usa una variable que se carga en otro evento. Por ejemplo. Si no está en el form. Enter y los definidos por el usuario. entonces esa variable debe estar presente en el form. HIDDEN y WORKFILE_LINES. las reglas más importantes son las siguientes: ORDER.) en el evento Start. la variable no tendrá valor cuando se disparan los otros eventos (esto es por el “orden” en que ocurren los eventos).Eventos Los eventos de los Web Panels son los mismos que en los Work Panels. Call. Las fórmulas que se gatillan ANTES del evento Start son aquéllas que sólo dependen de los parámetros que llegan al programa (regla parm()) Las fórmulas que se gatillan DESPUÉS del evento Start son aquéllas que dependen de atributos o variables instanciados (vía asignación. Esto está relacionado con el esquema de trabajo en Internet. En los web panels. hay algunas diferencias en el uso de las mismas. Además. deberá estar en el form después del control en el que se carga la variable. Por ejemplo.

utilizar la propiedad de Visible. NOACCEPT. Este comando puede ser utilizado dentro de cualquier evento de un objeto web con excepción del evento Load. se recomienda en lugar de eso. El valor de los atributos / variables de la regla hidden se "guarda" para cada línea de cada grid que exista en la pantalla. La causa de esto es que los hiddens se mandan en TODOS los grids mientras que los otros sólo para el grid en 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. Propiedades En los Web Panels para resolver la visualización de grandes cantidades de registros se dispone de la paginación automática del grid. 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. Esto redunda en menos código HTML a enviar al Browser y. a un procedimiento o reporte que no tengan salida en pantalla. no se ven en el grid final pero también se "guardan" aunque solamente para cada línea del grid en el que fueron definidos. Los atributos con Visible en False. La forma de hacer esto es usando la propiedad ROWS del grid. Comandos soportados por los objetos web A continuación 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. se puede llamar a otro objeto web. Link El comando link es equivalente al comando call para llamar a páginas estáticas o redireccionar a una URL. La sintaxis de este comando es la siguiente: . En resumen. Cuando se quiere usar la regla hidden para atributos de un grid. WORKFILE_LINES Esta regla no aplica a los Web Panels. ya que la ejecución de dicha llamada cancelaría por time-out. HIDDEN Estas tres reglas se utilizan de la misma forma en los Work Panels que en los Web Panels.ORDER. en consecuencia. desde un objeto web. El resultado de la utilización de este comando es el redireccionamiento en forma automática a la URL especificada dentro del mismo. mejor performance.

El pasaje de parámetros es opcional. Tampoco puede . es equivalente a hacer un CALL al objeto que lo invocó.. teniendo el mismo efecto que el F5 del browser.uy’) Endevent Load El comando Load es análogo al resto de los objetos GeneXus.Link( usr-pgm | ’url’ [{parm1. ya que si se ingresaron valores en variables del Web Panel llamador. Por ejemplo: Event ENTER Link(‘http://www. Refresh El comando Refresh vuelve a cargar la página. La página se cargará manteniendo los últimos valores sometidos para las variables ingresadas por el usuario. Este comando Return puede ser ejecutado en cualquier evento o subrutina del Web Panel.com.<parmn>: son los parámetros que recibe la URL. 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>..ARTech. Return Incluir el comando return en un objeto web. salvo el evento Load y los métodos Load de subfiles. En consecuencia no equivale a presionar el botón ‘Back’ del browser. los mismos no son mantenidos al ejecutar el comando Return.

Getcookie) y luego se ejecuta el comando Return el valor de la(s) cookie(s) se establece correctamente . En caso que se ejecute en las mencionadas situaciones los resultados son impredecibles. el return intentará cerrar el navegador. Si se utiliza la función SetCookie (Ver funciones estándar Setcookie. En el caso del primer objeto web.ser ejecutado en subrutinas llamadas directa o indirectamente por el evento Load o métodos Load de subfiles.

lo que nos permitiría que la película del mes varíe) y debajo de esta información se desea también mostrar los actores de dicha película (desplegando el nombre y apellido de cada uno). su título debajo.INTRODUCCION AL CAPITULO 4 Volvamos al web panel de "Sale of Movies”. desplegar la imagen y resumen de la "Película del Mes". ya que por lo que se pide podemos notar que esto no se puede hacer en una grilla estándar ya que queremos para cada película de la grilla desplegar un control debajo del otro). Se quiere también. Para cada película. La pantalla que se desea obtener en ejecución es la siguiente: de a 5 . se quiere ver: la imagen de la misma. asumiendo que ésta es fija y es la de código 4 (si bien esta información podría almacenarse en alguna tabla.). pudiendo filtrar por "género" y por "título". Se deberá programar la paginación a pedido cargando en una grilla películas. etc. cargando 5 películas cada vez. Se quiere que en este Web Panel (el cual es de acceso público) se muestre todo el "Catálogo de películas". video. El título a su vez. deberá de contener un link a otro web panel que muestre más información de la película seleccionada y nos permita comprar dicha película en sus diferentes formas (dvd. Más adelante veremos cómo hacer esto.

permite insertar el control grid. en el área vacía hasta el momento del web panel “Sale of Movies”. GRIDS EN WEB PANELS El botón que se encuentra en la barra de controles. DIFERENTES TIPOS DE GRILLA En los objetos web. se dispone de más de un tipo de grilla:   Grilla estándar Grilla Freestyle Estas grillas. A lo largo de este capítulo iremos implementando todo esto a medida que vamos viendo los conceptos teóricos necesarios para su desarrollo. . permitiendo al desarrollador mayor libertad a la hora del diseño. agregan potencia al diseño de aplicaciones web.Es decir. que se desea incluir todo lo mencionado anteriormente.

utilizando la regla noaccept() o modificando la propiedad Read Only de la variable dentro del grid. variables (incluyendo las de tipo bitmap). Cómo asociar eventos a una línea de un grid Es posible asociar un evento a cualquier variable que pertenezca al grid. Propiedades del Grid A continuación se detallan las propiedades generales del grid: . 2. Las columnas de los grids pueden ser atributos. A continuación se detalla la forma de trabajo con grids en web panels. todas las variables que están dentro del grid pasan a ser de ingreso. Cómo aceptar datos en un grid Es posible aceptar datos en las variables de un grid dependiendo de la programación de los eventos existentes en el objeto: 1. es decir que son únicamente de lectura y por consiguiente no pueden ser modificados. si dentro de un evento del Web Panel se está utilizando el comando For each line o For each line in <grid>. En ejecución. el grid es una tabla HTML. Es posible indicar en este caso cuáles son las variables que no van a poder ser modificadas.Los grids permiten trabajar con datos repetitivos en web panels y transacciones con form HTML. si dentro de la fila hay algún control con un evento clic asociado. Cómo desplegar datos en un grid Por defecto todo atributo y variable que está dentro de un grid se despliega en ejecución como texto.

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

ya que si estos se especifican en valores relativos (porcentajes). Cellpadding 6. El ancho de cada columna de un grid se especifica como un porcentaje del ancho total del grid (que por defecto no se especifica. BackColor Cálculo del ancho de cada columna de un grid.Si BackColorStyle = Header 1. LinesFont. El ancho del grid NO se deduce como la suma de los anchos de las columnas. el browser lo calcula en función al contenido de todas las celdas). Background 4. Cellspacing 7. LinesBackColor 2. Table Los grids también tienen algunas propiedades configurables para las tablas propiedades son: 1. LinesBackColorEven 3. se deben modificar las propiedades de la misma (ver mas adelante). BorderWidth 5. ToolTiptext 2. Rules. Align 3. Las propiedades LinesColor. para modificar los valores correspondientes a una determinada columna. TitleBackColor Si BackColorStyle = Uniform 1. puede no corresponderse a lo deseado. TitleBackColor Si BackColorStyle = Report 1. Estas . LinesBackColor 2. TitleForeColor y TitleFont: Aplican a todas las columnas del grid.

RecordCount 8. Backstyle 3. el grid completo desaparece del formulario. Para esto. como el siguiente: . Visible: si la propiedad Visible tiene el valor 0. 2. BackColor 4. Class Propiedades de las columnas del grid También es posible indicar propiedades particulares para las diferentes columnas que forman el grid. BackColorOdd 6.Propiedades modificables en ejecución A continuación se detallan las propiedades que se pueden modificar a los grids en tiempo de ejecución: 1. BackColorEven 5. Rows 9. En ese diálogo. PageCount 7. se debe seleccionar la opción Columns del menú que aparece al hacer clic en el grid. seleccionando Properties sobre una columna se despliega un diálogo.

8. 22. 15. 19. Format 12. 5. 18. 6. 20. 13. 2. 16. Visible 13. 10. Backcolor Backstyle Enabled FontBold FontItalic FontName FontSize FontStrikeThru FontUnderline ForeColor Format Title TitleBackcolor TitleBackstyle TitleFontBold TitleFontItalic TitleFontName TitleFontSize TitleFontStrikeThru TitleFontUnderline TitleForeColor TitleFormat Visible Class . 4. 3. Autoresize 6. 14. 11. 17. ForeColor 8. ReturnOnClick Propiedades de columnas en tiempo de ejecución En tiempo de ejecución se pueden modificar las siguientes propiedades de las columnas de un grid: 1. 23. ControlType 4. Title 9. ControlName 2. 7. 3. ReadOnly 5. 21. TitleForeColor 11. 24. Font 7. Class La propiedad Class solo se encuentra disponible si el control está en el form de un objeto que tiene un Tema asociado. 9. TitleFont 10. 12.1.

. text blocks. El grid Freestyle es básicamente una tabla a la que se le pueden insertar los atributos / variables. en los Temas. web components. agregando la regla noaccept o cambiando la propiedad Read Only. o si se asocia un evento a cualquier control de la fila. proporcionando de esta forma mayor libertad de diseño. es posible configurar propiedades adicionales para dicho control. grids freestyle y/o grids que se van a mostrar posteriormente en la pantalla. El comportamiento de las variables dentro de un grid Freestyle es análogo al que presentan dentro de un grid. Nuevamente este comportamiento puede modificarse. atributo / variable en una misma celda. Para insertar el grid Freestyle se debe utilizar el botón de la barra de controles disponibles. imágenes. 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. Cabe destacar que el grid Freestyle posee las mismas propiedades mencionadas anteriormente para el grid tradicional. por lo tanto también quedan de ingreso si existe un For each line o For each line in <grid> dentro de algún evento.PROPIEDADES DE GRIDS EN LOS TEMAS En la clase Grid o derivada de ella. En este caso para poder visualizar las propiedades hay que seleccionar la tabla donde se encuentran los atributos / variables. embedded pages. botones. Este tipo de grid no posee títulos para las columnas y además permite tener más de un tipo de control.

Columns 6. presionar el botón derecho del mouse y seleccionar la opción ‘Properties’. 3. estarán disponibles otras propiedades adicionales relacionadas con la configuración de las líneas del grid.Propiedades del grid Freestyle Para visualizar las propiedades de un grid Freestyle. Collapsed Dependiendo del valor de la propiedad “BackColorStyle”. 1. A continuación se documentan las propiedades disponibles para el grid Freestyle. Class La propiedad Class solo se encuentra disponible si el control está en el form de un objeto que tiene un Tema asociado. . AllowCollapsing 7. hay que seleccionar la tabla del grid. Rows 5. Control Name 2. BackColorStyle 4.

LinesBackColorEven Si BackColorStyle = Uniform 1.Si BackColorStyle = Report 4. Visible: Si la propiedad Visible tiene el valor 0. BackColor Propiedades modificables en ejecución En tiempo de ejecución se puede modificar la siguiente propiedad: 1. . aplica también a los grids hijos. la propiedad Visible aplicada al grid padre. LinesBackColor 5. el grid free-style desaparece del formulario En el caso de tener grids anidados.

6. Backcolor BackColorEven BackColorOdd Columns PageCount RecordCount Rows Class PROPIEDADES DE FREESTYLEGRIDS EN LOS TEMAS En la clase FreeStyleGrid o derivada de ella. 4. Alcance Objetos: Web Panels Generadores: C/SQL – VB – JAVA . 3. 9. Los valores devueltos por este método son los siguientes: 0: Operación exitosa . es posible configurar propiedades adicionales para dicho control. 8. en los Temas. FIRSTPAGE: El método FirstPage lleva al usuario al primer conjunto de registros devueltos. Existen algunas diferencias relacionadas con la paginación cuando un grid tiene tabla base o no. 5.. 7.Net Plataformas: Web Descripción El paginado de grids aplica a grids comunes y freestyle cuya propiedad ‘Rows’ tiene un valor diferente de cero.2. Los grids pueden estar anidados.5 se brinda al usuario una serie de métodos que habilitan el paginado automático en grids y grids freestyle. Ver Clase FreeStyleGrid PAGINADO DE GRIDS EN WEB PANELS Introducción A partir de la versión GeneXus 7. Métodos A continuación se describen los métodos disponibles:.

Los valores devueltos por este método son los siguientes: 0: Operación exitosa 1: No está habilitado el paginado en el grid 2: Ya se encuentra en la última página. PREVIOUSPAGE El método PreviousPage lleva al usuario al conjunto anterior de registros. Los valores devueltos por este método son los siguientes: 0: Operación exitosa 1: No está habilitado el paginado en el grid 2: Ya se encuentra en la primera página LASTPAGE El método LastPage lleva al usuario al último conjunto de registros. Los valores devueltos por este método son los siguientes: 0: Operación exitosa 1: No está habilitado el paginado en el grid RESUMEN A continuación se incluye una tabla con un resumen de los métodos disponibles cuando un grid tiene tabla base y cuando no. Puede ser utilizado únicamente si el grid tiene tabla base. Los valores devueltos por este método son los siguientes: 0: Operación exitosa 1: No está habilitado el paginado en el grid 3: El grid no tiene tabla base GOTOPAGE El método GotoPage(PageNumber) permite acceder en forma directa a un determinado conjunto de registros. Grid con tabla base FirstPage NextPage PreviousPage LastPage GoToPage Grid sin tabla base           .1: No está habilitado el paginado en el grid NEXTPAGE El método NextPage lleva al usuario al siguiente conjunto de registros. Puede ser utilizado únicamente si el grid tiene tabla base.

para mostrar la página N. Por ello. para lo que utiliza la propiedad Rows y la propiedad RecordCount del grid. si el grid. los resultados pueden ser inesperados. La eficiencia de los métodos FirstPage. si existen IFs en el evento Grid. Esto quiere decir que. PreviousPage y GotoPage( N) esta asociada a la eficiencia de la definición de la navegación del grid correspondiente. se "pasa por" los registros de las páginas anteriores (N-1) sin mostrarlos. El método LastPage determina cuál sería la última página. El hecho de utilizar la propiedad RecordCount implica que el DBMS (no el código generado) barre dos veces la tabla base del Grid (la primera vez para contar y la siguiente para "cargar"). internamente. El método LastPage ha sido pensado para que se ejecute un único comando Load por cada registro de la tabla base. NextPage. a los efectos de evitar que el resultado desplegado corresponda a la página en la que se encontraba anteriormente. En otras palabras. Para mostrar la página 2. la página 1 tendrá los registros del 1 al valor de la propiedad Rows. se debería agregar el método FirstPage dentro del evento que aplica el filtro. En general. . los tiempos con paginado serán semejantes. la página 2 los que van del Rows +1 al Rows * 2 y así sucesivamente.    Implementación El paginado se realiza por "número de registro".Propiedades Cada grid dispone de las siguientes propiedades que son utilizadas en la paginación:   RecordCount PageCount Consideraciones  Si el web panel que se está paginando tiene filtros.Load que pueden condicionar la ejecución del comando mencionado o se ejecuta más de una vez el método Load por cada registro. se "pasa por" los registros de la página 1 sin mostrarlos. sin paginado tiene buenos tiempos de respuesta.

Dada la implementación, se recomienda: 1. Tener un buen filtrado de datos (de forma que no existan muchas páginas) 2. Evitar, cuando el costo sea alto, el uso de GotoPage( N) con valores altos de N, así como el uso de LastPage. 3. También se recomienda salvar el valor de la propiedad RecordCount en una variable ya que cada invocación de la propiedad implica un COUNT en la base de datos.

Ejemplo
Los métodos 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
Paginación a pedido
Como ya mencionamos en la introducción de este capítulo, se quiere mostrar en el web panel ”Sale of Movies” el "Catálogo de películas" programando la paginación a pedido en la grilla de películas, cargando 5 películas a la vez y pudiendo filtrar por género y por título. 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 géneros existentes de la tabla de géneros, agregando una opción (con el método additem) para poder ver las películas de “todos” los géneros. Es decir, poner la siguiente sentencia en el evento start: &genre.additem(0,'All') Haga clic aquí para ver la demostración Dado que en la grilla de Películas queremos desplegar las películas filtradas por género o simplemente desplegar todas las películas, 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 género, recorriendo únicamente la tabla Movies, evitando el join. Por defecto, GeneXus propone nombres para los controles (que los genera según el tipo de control y la cantidad de ese tipo que existan en el form). En muchos casos para simplificar la comprensión de la lógica del control puede ser útil asignarles nombres más intuitivos. Es por este motivo que a esta grilla le asignaremos como nombre Movies y a la otra (con los Actores de la película del mes) la llamaremos Actors. Entonces la carga de las películas 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 películas, debemos modificar la propiedad Rows de la grilla y asignarle 5 como valor. Por otro lado, vamos a agregar dos imágenes 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 //código que se va a ejecutar cuando el usuario haga clic sobre la imagen next.jpg

Movies.NextPage() EndEvent

Para implementar la opción de “Ver Anteriores” (asociada a la imagen prev.jpg), debemos programar el siguiente evento: Event prev.click //código 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 botón de Buscar (“Search”) queriendo que se carguen las primeras 5 películas que cumplen con los nuevos valores de &genre y &title Para esto, vamos a tener que programar en el evento asociado al botón de Buscar lo siguiente: Event 'Search' Movies.FirstPage() EndEvent Haga clic aquí para ver la demostración Veamos entonces como quedaron los eventos Refresh y Load de la grilla de películas:

Event Movies.Refresh EndEvent

Event Movies.Load If null(&genre) // si no se filtra por género, se recorre la tabla de Movies For each Where MovieTitle >= &title when not null(&title) &photo = loadbitmap(MovieImg) //cargamos la imagen de la película &MovieTitle = MovieTitle load //cargamos la película Endfor Else // si se filtra también por género 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 condición de filtro por película se realiza con la cláusula 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 condición por lo que se recorrerá toda la tabla. Si ejecutamos el web panel, podemos notar que los controles que están en la columna 1 (imagen de Chaplin, link de Registrar nuevo usuario, Usuario, Password y botón de Login) aparecen alineados verticalmente en el "centro" de la celda en la que se encuentran, y como esa celda crece verticalmente según el tamaño de la grilla de películas, puede ocurrir que en ciertas ocasiones no podamos ver a todos esos controles (a menos que hagamos scroll vertical). Para cambiarle la alineación a TOP, lo que tenemos que hacer es presionar el botón derecho del mouse estando posicionado en la celda de dichos controles y seleccionar la opción de "Top" en la propiedad "Vertical Align". Haga clic aquí para ver la demostración Haga clic aquí para ver la ejecución

MÚLTIPLES GRIDS EN WEB PANELS
Introducción
Poder diseñar Web Panels con más de un grid potencia el desarrollo de estos objetos, ya que permite, entre otras cosas resolver en el mismo objeto accesos a diferentes tablas.

Descripción
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 continuación 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 más 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 más 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 implementación 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 actúan específicamente sobre el grid cambian de forma de que, en caso de haber más 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 botón 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 razón 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 están en TODOS los grids mientras que los otros sólo están para el grid en que fueron definidos. Esto redunda en menos código 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 algún grid y este tiene un orden asignado explícitamente 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.

Determinación 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 determinación de la tabla base de cada grid son los que:  Están en el grid

es decir. Si hay alguno que no cumpla la condición da el warning: ”Attribute not instantiated”. deberán pertenecer a la tabla extendida de alguno de los grids. pero deberán pertenecer a la tabla extendida de alguno de ellos. Carga. Recordemos cómo es que dijimos que queríamos que apareciera el formulario en ejecución … . Tampoco participan los atributos que están en los Eventos (fuera de los grupos For each) como ocurre en los work panels. La carga se realiza para cada grid de forma independiente. Notar que es posible que algunos atributos de la parte fija estén en una tabla extendida y otros en otras. Aplicacion practica Multiples subfilesgrillas Lo que nos quedaría por hacer en este web panel es desplegar la imagen y resumen de la "Película del Mes" (que para simplificar la supusimos fija. y una grilla subfile con los Actores de dicha película. Están 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 determinación de la tabla base de ninguno de los grids. 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. la de código 4). el especificador no relaciona las cargas. aún si los datos que se muestran en ambos grids están relacionados. La carga incluye el evento refresh. Estos.

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. entonces podemos cargar la imagen y resumen de la misma en el evento Start. Dado que ya sabemos que le película del mes es la de código 4. .Lo primero que debemos hacer para poder mostrar la película del mes es agregar una celda a la derecha de la celda donde desplegamos todas las películas. La forma maás sencilla de hacerlo es seleccionar la opción ‘Split Cell’.

cuya pantalla es como la siguiente: . y vamos a tener que realizar su carga en el evento actoresActores. Vamos entonces a hacer estos cambios a la aplicación… Haga clic aquí para ver la demostración Vamos entonces a crear el web panel "Detalles de una película" (de nombre MovieDetails)… Se quiere desplegar en la parte fija de este web panel la imagen.load (siendo Aactores el Control Name del grid FreeStyle). título y resumen de la película recibida como parámetro. para luego presionar un botón (“Add to cart”) para generar una orden de compra con lo seleccionado en el grid. teniendo también en dicho grid una variable donde permita al usuario seleccionar la cantidad que desea comprar.Por otro lado.). así como un grid con los actores (la concatenación del apellido y nombre de cada actor separados por una coma) y otro grid con el precio de la película (el de fecha máxima. Vamos a crear entonces un webpanel MovieDet (“Movie Details”). video. etc. vamos a tener que crear una grilla subfile FreeStyle (para no ponerle título al mismo) con los actores de la película del mes. lo que hay que hacer es poner a la variable &resumoviesmrym como ReadOnly. Para que no se vean en ejecución los bordes donde se carga el resumen de la Película del Mes (&moviesmrymresu). ya que se guarda el histórico de precios) para cada tipo de película (dvd.

para lo cual vamos a tener que realizar la carga “manualmente”. cargaremos la imagen de la película en el evento Start. esto es. agregue la siguiente regla al webpanel: Parm(MovieId). Para desplegar el título y resumen podemos poner directamente en el form los atributos correspondientes (MovieTitle y MovieSumry). Vamos a desplegar en cada línea del grid. pero para desplegar la imagen de la película tenemos que definir en el form una variable en la cual debemos cargar la imagen correspondiente.'. ActName. actors.Load For each MovieId //se recorre la tabla Movie_Act &actorname = concat(ActLastName. Usted debe programar lo siguiente: Event Actors. ') // &actorname es la variable presente en el grid de actores. Haga clic aquí para ver como incluímos en el form el grid de Actores.Tenemos que desplegar en la parte fija de este web panel la imagen.load. como mostramos a continuación: Event Start For each MovieId &photo =loadbitmap(MovieImg ) //cargamos la Imagen de la película recibida en la regla parm Endfor EndEvent Grid de actores Es necesario desplegar un grid con los actores de la película recibida como parámetro. Haga clic aquí para ver la demostración El código de la película se recibe por parámetro. título y resumen de la película recibida como parámetro. Dado que el código de película lo recibimos por parámetro. entonces.load() Endfor Endevent . en el evento Actors. y le llamamos “Actors”. la concatenación del apellido y nombre de cada actor separado por coma.

de forma de desplegar los valores de MovieTypeDsc y MovieLinPrc para la fecha máxima. que se va a hacer un corte de control por MovieTypeId en la tabla Movie_Prc. será Prices. y la llamaremos Qty). ya que lo vamos a tener que pasar como parámetro al momento de presionar el botón de “Add to cart” para generar la orden de compra correspondiente. Haga clic aquí para ver la demostración . Entonces.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 película” un único registro con el precio (el de fecha máxima). el precio (MovieLinPrc) que se corresponde con la fecha más reciente (MovieLinDate). 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. Entonces recorremos la tabla Movie_Prc. Observe que hay que tener disponible para cada línea del grid el valor del MovieTypeId . Es decir. haremos la carga del grid en forma manual. Recuerde que el MovieId se recibe como parámetro. para obtener para cada tipo de película (MovieTypeId). 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.

Cambiamos este comportamiento modificando la propiedad ReadOnly de las variables que nos interesa que no sean editables. se deberá dar de alta una orden nueva (como "Pendiente") y las líneas que correspondan. donde se indicó la cantidad que se desea comprar if not null(&Qty) If null(&PurOrdId) .Pending &PurOrdId = PurOrdId Endfor For each line in Prices se recorre el grid de precios. lógica 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 película y acceder a la tabla de órdenes para ver si existe una orden para ese cliente que se encuentre en estado de "Pendiente".Observar que cuando definamos mas adelante el for each line in Prices.Load() endfor EndEvent  Recorrida del grid. En caso de no existir una orden pendiente para ese cliente. Event ‘Add to cart’ For each Where CustId = &CustId and PurOrdSts = OrderStatus. Una vez recorridas todas las líneas del grid se quiere llamar a una web transaction (“Purchase Order”) que despliegue los datos de la orden generada hasta el momento. En el load del grid Prices programamos lo siguiente: Event Prices. y de ser así agregar esta compra a las líneas de la orden. donde se va a permitir eliminar o modificar los datos de las líneas de la orden. En el caso de la variable &actorname del grid de actores (Actors).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. la variable &Qty y el resto de las variables del grid van a tener un accept implícito. es que la variable &actorname tiene un noaccept implícito. como no existe un for each line sobre dicho grid.

en el capítulo correspondiente a "Seguridad" (capítulo 8). para luego poder usuarlo en el evento correspondiente al botón de “Add to cart”. en el grid donde cargamos las películas tenemos que agregar un link en el título de cada película al web panel que acabamos de crear. Cuando programamos la carga de dicho grid en el evento movies. Como vimos en capítulos anteriores. Observe que en ese evento se usa el CustId. contraseña y presiona el botón de LOGIN “inmediatamente antes de” presionar el botón de “Add to cart”. asumiremos que el usuario ingresa su usuario. el CustId del cliente logueado. En el evento asociado al botón “Add to cart”. MovieId) GRIDS ANIDADOS Es posible definir grids 'anidados' en un web panel. para armar la orden de compra. Los grids anidados consisten en un grid Freestyle al que se puede insertar dentro de una celda otro grid estándar u otro Freestyle. . En el web panel Sale of Movies. en la variable &CustId. De esta forma obtenemos en el evento correspondiente al botón de LOGIN. se deberá controlar que el usuario ya se haya logueado al sistema y sólo en caso de ser un usuario válido es que se le va a permitir hacer compras. Esto lo veremos más adelante.Load debemos incluir el link de la siguiente manera dentro de cada uno de los for each: &MovieTitle.Link = link(HMovieDet. Revise lo visto en “Ejemplo: Esquema de trabajo en Internet” 2.MovieId. &MovieTypeId.&PurOrdId = udp(PAddHead.&Qty) endif Endfor call(TPurchaseOrder. Por el momento (hasta que no veamos el capítulo de Seguridad).&PurOrdId . es necesario en este caso tener la variable &CustId en el form.&PurOrdId)  muestra la orden de compra generada hasta el momento EndEvent Nota Importante 1. &CustId) endif call(PAddLine.

se quiere tener un web panel que muestre los productos. se deben incluir atributos que determinen específicamente la tabla base deseada. Cada grid puede ser un free-style o un grid común.Por ejemplo. Puede haber grids anidados de varios niveles y puede haber también paralelos. Los grids comunes solo pueden ser hojas del árbol de anidación. se deben incluir en los grids los atributos relación necesarios. Puede decirse que se está definiendo un árbol en donde cada nodo es un grid. pero sí deben participar en la definición. Como existen las propiedades Visible y Hidden... no tendrán porque visualizarse en el grid. Para ello se define un grid free-style con la categoría y dentro de este se inserta otro grid con los productos. Para relacionarlas. pero indentados por categoría: Electrodomésticos Heladera TV Muebles de escritorio Silla ejecutiva Mesa de directorio . Determinación de tablas bases Cada grid tiene una tabla base independiente a la del resto de los grids del árbol de anidación. Generalizando el concepto. aunque si es común no puede tener ninguno anidado. .

agregando en el grid interno el atributo MovGenId. en el reporte de especificación vemos que se navega la tabla de géneros y por cada género. load. Como vimos anteriormente el grid puede ser estándar o Freestyle. Esto podemos hacerlo. Los grids deberán tener: Sf1: CatDsc Sf2: CatDsc PrdDsc Disparo de Eventos El manejo de eventos es análogo al del resto de los grids: se tienen los eventos refresh. Para que se realice la anidación. Para eso creamos un web panel con el estilo del sitio. . es disponer de un catálogo completo de películas clasificadas por su género. Cada grid puede o no tener tabla base (es decir un for each implícito). Haga clic aquí para ver la demostración Si especificamos este Web Panel vamos a ver que el reporte de especificación muestra por navegación de la tabla de géneros por un lado y de la tabla de películas por otro. se llama al evento Refresh y load de cada hijo. en este caso elegimos un grid Freestyle simplemente por el modo en que esta página va a ser diseñada. Cada vez que se ejecuta el comando Load en un grid con anidaciones. se deben cargar los datos con el comando Load como en el resto de los grids sin tabla base. Si no lo tiene.Siguiendo con el ejemplo anterior. el grid de Productos deberá tener el código de la categoría para que los relacione. la que relaciona la película con el género. Ejemplo de aplicacion de grids anidados Una posible aplicación del uso de grids anidados en nuestro Sitio de Venta. debemos relacionar las cargas de ambos grids. MovieTitle para desplegar la información de la película. denominado ‘MovieCatalog’ y agregamos un grid freestyle donde colocamos los atributos MovGenId. MovGenDesc y dentro de este grid colocamos otro (también de tipo freestyle) con los atributos MovieId. Ahora sí.

Así obtenemos el corte de control. Primero vamos a definir la transacción “Direcciones . Haga clic aquí para ver la demostración Haga clic aquí para ver la ejecución Queda a cargo del lector. podemos agregarle las imágenes de las películas y realizar algunas pequeñas modificaciones. MovieId (que es la que se está recorriendo) por lo cual estamos ordenando por un atributo de la tabla extendida. un link al webpanel recién creado (‘MovieCatalog’) de título “Complete list of recent releases”. Para esto tenemos que agregar en la primer grilla el atributo MovieId. debemos agregar un orden de recorrido que nos interese. De esta forma logramos programar nuestro Catálogo de Películas clasificado por género. debería hacer el corte de control por MovGenId que sí pertenece a la tabla que se está recorriendo. poner en el webpanel ‘Sale of movies’. Para lograrlo. COMO TRABAJAR CON LOS "REGISTROS DE UN GRID" Vamos a implementar una libreta de direcciones para el cliente. Esto lo logramos forzando que ambas grillas tengan la misma tabla base. pero SI en ambientes Client/Server donde se puede ordenar por atributos de la tabla extendida. La manera de ocultar los atributos que no queremos que se vean dentro de los freestyle grids.Visible = 0 (*)Nota: el atributo MovGenDesc no pertenece a la tabla de clave primaria MovGenId.Visible = 0 MovieId. entonces necesitamos un corte de control. En el caso de que ud.Haga clic aquí para ver la demostración Pero como no queremos que se despliegue un género que no tiene películas asociadas (en nuestros datos de ejemplo el género “Children’s”). Dado que no queremos ordenar por la clave de la tabla MovGenId. la tabla relación Generos (MovieGenre) y Películas (Movies). agregamos el atributo MovGenDesc en la opción Order de la primer grilla. Haga clic aquí para ver la demostración Para mejorar el diseño de nuestro catalogo. es poner lo siguiente en el evento start: MovGenId. esté trabajando en un ambiente local. Esto NO es válido en ambientes locales como Access. en este caso la descripción del genero (*). MovieId ya que no tiene ningún sentido.

y en el evento asociado llamar a otro objeto que permita realizar la modificación En la siguiente demostración. tendríamos que tener un botón "Delete" y en el código del evento asociado a dicho botón deberíamos recorrer el grid (con el comando For each line) y para cada línea seleccionada invocar a un procedimiento que haga la eliminación física de dicha dirección (DelAddress). Haga clic aquí para ver la demostración.del Cliente” (Trn CustAddresses) La estructura de la transacción es la siguiente: CustId* CustAddssId* CustAddssDsc Haga clic aquí para ver la demostración 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. modificamos el webpanel creado con la solución 1. . 1) Si queremos permitir selección múltiple. 2) Agregar una imagen o botón en cada línea del grid. lo que tendríamos que hacer es agregar una variable &dlt en el grid y definirla como check box. De esta forma. La creación del procedimiento DelAddress queda por cuenta del lector. A su vez. ¿Cómo implementar la "eliminación" de direcciones de la libreta de direcciones? Esto lo podemos resolver de tres formas. el usuario seleccionaría el check box en las direcciones que desea eliminar. de forma de implementar la solución 2. La siguiente pantalla es como se visualiza en ejecución la solución 2.

en el código asociado al botón tendríamos que hacer lo siguiente: Event 'Update Addresses' For each line //Selección múltiple para modificar las líneas de la orden If &upd = 'S' call( HModifyAddress. CustId . 1) el usuario tendría que seleccionar los check box de cada una de las líneas que desea eliminar y luego presionar el botón de "Delete". haciendo uso de la propiedad “AllowSelection”.3) Otra alternativa es usar la propiedad AllowSelection del grid. En resumen. dado que cuando el usuario selecciona una línea quedan instanciados los datos de esa línea. el usuario tiene que hacer clic solamente en las líneas que desea eliminar. ¿Cómo implementar la "modificación" de las direcciones de la libreta? En el caso de querer modificar una dirección de la libreta. para llamar a un webpanel o procedimiento que modifique la línea. o un link a la transacción de direcciones pasándole llave primaria y modo. si lo implementamos permitiendo Selección Múltiple (opción nro. Si lo implementamos como mencionamos en la opción 2 o 3. de forma de llamar al objeto con los parámetros adecuados. al que se le asocie un link a un webpanel para modificar la línea. dentro de la tabla que los contiene. Tambíen se puede implementar la solución 3. de a una. la forma de implementarlo es similar a la solución 2 y 3 vistas anteriormente. Es decir. se puede tener un control o variable en cada línea.CustAddssId ) Endif Endfor Endevent Tenemos que recordar que cuando el usuario presione el botón de Modificar . Haga clic aquí para ver la demostración (modificamos el webpanel CustAddresses de manera de usar esta solución) Note que también se configuraron las siguientes propiedades:   AllowHovering AllowCollapsing Modificaremos el webpanel de forma de que el grid y el botón queden alineados verticalmente hacia arriba. ¿Por qué no se puede implementar esto de la forma mencionada en la opción 1? Porque de querer hacerlo así. Haga clic aquí para ver la ejecución. Haga clic aquí para ver la demostración.

Es por este motivo que la única forma de implementar esto como lo explicamos anteriormente. Queda a cargo del lector la implementación de ambas soluciones. el código de dicho evento se ejecuta en el Servidor (para todas las líneas). la siguiente es la imagen del webpanel “CustProfile” al cual le agregamos el botón “My Addresses”: Y el evento sería: . para que el usuario la pueda modificar es la siguiente:   Tener un for each line en el evento asociado a algún control del form. Por ejemplo. usar la Regla noaccept() para aquellas variables que se quiere que sean readonly. pero sólo para la última dirección. La forma de hacer que una variable dentro de un grid sea editable. Nota: El webpanel “CustAddresses” puede ser invocado desde el webpanel “CustProfile”. queda a cargo del lector agregar en este último webpanel un botón o un link a “CustAddresses” pasando como parámetro el CustId.direcciones. por lo cual cuando se devuelve el control al browser. ó un evento click asociado a algún control en las líneas del grid Si se quiere que algunas variables sean editables y otras no. Recordar lo que se vió anteriormente (capítulo Grids): En forma predeterminada todas las columnas de un grid son Read-Only (esto aplica tanto a grids como a grids freestyle). nos va a cargar el webpanel ModifyAddress .

por ejemplo. por ende permiten a los diseñadores de aplicaciones Web GeneXus un alto grado de reutilización de los mismos.CustId) EndEvent // 'My Addresses' INTRODUCCION AL CAPITULO 5 En nuestra aplicación ventas de películas el área de login. para poder reutilizar otros objetos web y simplificar el diseño de la aplicación… Los ‘Web Components’ son Web Objects que tienen una propiedad que indica que son componentes. puede ser ejecutado en forma autónoma. . en lugar de tener implementado. Es decir. Se debe notar que un Web Object definido como Web Component no pierde ninguna de sus caracteristicas. pueden ser ejecutados en forma independiente como cualquier otro Web Object o pueden formar parte de otro objeto web (Web Panel o Web Transaction). La idea entonces es. Algunos ejemplos: menús. Definición de Web Components Para definir un Web Object como Web Component se debe configurar la propiedad ‘Web Component’ del objeto en ‘YES’. pero como se mencionó anteriormente los styles en ambiente web no tienen el dinamismo que tienen en ambiente win. Esto significa que el servidor resuelve la inclusión del Web Component en tiempo de ejecución y devuelve al navegador el código HTML con el Web Component ya incluido. la carga del menú en cada uno de los Web Panels que requieren el mismo.Event 'My Addresses' call(HCustAddresses . login. área que permite la personalización. por lo tanto. programarla en un Web Component y reutilizarlo en cada Web Panel que requiere un menú. Lo que proponemos ahora son diferentes formas de componentizar una página. etc. usábamos un style para inicializar el objeto. se repite en gran parte de los web panels que hemos diseñado. Los Web Components se generan dentro del mismo HTML del Web Panel que los contiene. Hasta el momento. puede ser definida como Web Component. Cualquier parte de un Web Panel que se repita en varios objetos web de una aplicación.

Sólo se aceptan objetos con la propiedad Web Component en YES. Parameters: Permite especificar la lista de parámetros con los que se invocará el web component. Propiedades El objeto Web Component tiene las siguientes propiedades de diseño:    ControlName: Nombre del control Object: Permite asociar un objeto web al web component.Uso de Web Components Para insertar un Web Component en un Web Panel o Web Transaction se debe elegir la opción Insert / Web Component. se utilizan las propiedades del mismo. Para determinar el objeto que se va a desplegar en lugar del control Web Component. o la opción de la barra de controles. PROPIEDADES MODIFICABLES EN EJECUCIÓN A continuación se detallan las propiedades de los Web Components que se pueden modificar en tiempo de ejecución: . se pueden insertar Web Components en grids freestyle. Además. como se describe a continuación. con lo cual se creará un objeto de tipo ‘Web Component’ en el objeto. El web object a desplegar se puede fijar en diseño o en tiempo de ejecución.

. Hxxx el Web Object que está configurado como Web Component (Propiedad ‘Web Component’ con valor ‘Yes’) y par1 a parn los parámetros que recibe dicho Web Object.. Es decir la invocación dinámica (create(&Var)) se genera como: Do Case Case &Var=”Objeto1” Create(Objeto1) Case &Var=”Objeto2” Create(Objeto2) .. Para invocar el Web Component se debe utilizar la siguiente sintaxis: Control.Object = Create(&variable) Tanto si se invoca de forma dinámica como estática. [parn] Siendo Control el nombre del control Web Component agregado al objeto. el Web Component desaparece del formulario. en . Web Components ‘dinámicos’ Como lo demuestra la sintaxis. . basta con generar y compilar el componente mismo.. es decir que el contenido de un Web Component sea variable. [par1]. en el programa generado la invocación será estática. GeneXus determina automáticamente un dominio de objetos llamados en un create dinámico. Visible: si la propiedad Visible tiene el valor 0. se deberán regenerar y compilar todos los “invocadores” de ese nuevo componente... es posible dinamizar los Web Components. El dominio esta definido por los Web Objects que tienen la propiedad WebComponent en YES y que tienen igual cantidad y tipo de parámetros que el create. endcase Esto implica que si se agrega un componente al modelo y el mismo será llamado de forma dinámica. Por ejemplo: &variable = ‘HMenu’ Comp1.Net y Java no es estrictamente necesario.Object = Create(Hxxx.Object: permite determinar en tiempo de ejecución el Web Object que se va a desplegar en el lugar del control. Esto. Estos objetos se verán además en el object browser como objetos llamados.

 No se soporta el uso de atributos como primer parámetro de la función Create. Por ejemplo si el form de un Web Component tiene color verde.  Si se asigna el web panel en la propiedad Object del control Web Component en diseño.ASP del main incluirá los fuentes de todos los web components llamados por él.  Los parámetros de los Web Objects cuando son utilizados como Web Components no son opcionales.dll. En sucesivos POST. el tamaño quedará sujeto al espacio ocupado por el mismo.  Si se asigna un Web Component en el evento Start del padre.EXE o . etc. donde cada objeto tiene su propio . Observaciones En diseño.Por lo tanto. Esto no necesariamente es un problema para Visual Basic o C (los servidores tienen tecnología de “swapping” lo cual implica que no haya perdida de performance por el tamaño del EXE o ASP). Notar que esto es una diferencia con los Web Panels ‘comunes’ cuyos parámetros sí son opcionales.class o . los parámetros se recordarán del render anterior. Esto es diferente en Java y .  . pero el form del objeto web que lo contiene tiene color blanco. de usuario. el tamaño del Web Component permanece fijo. pero en ejecución. los parámetros se pasarán siempre que se ejecute dicho evento.  La asignación de un Web Component puede realizarse dentro de cualquier evento del web panel ‘padre’.Net. el pasaje de parámetros se realiza en forma análoga a lo descrito en el punto anterior. Load.  Un Web Component puede a su vez contener otros Web Components. al compilar el web panel ‘padre’ C/SQL y VB compilan en forma automática los posibles Web Components llamados. Si por ejemplo se desea que un campo del Web Component tenga un color determinado por el padre. los parametros se pasarán solamente la primera vez que se crea.  En ejecución. las propiedades del form del Web Component son heredadas del objeto web que lo contiene. La forma de fijar el tamaño del Web Component en ejecución es entonces incluyéndolo en una tabla y fijando el tamaño de la celda.  Los controles y las variables de los Web Components no son accesibles por los objetos que los contienen (objeto web ‘padre’). Si se asigna un Web Component en cualquier otro evento (Refresh.).  En C/Sql y Visual Basic el . No es así con las propiedades de los demás controles. se le tendrá que pasar por parámetro el color y asignarlo en el evento Start del Web Component. entonces este último predominará sobre el primero.

etc. bajas y modificaciones de datos) y otros conteniendo Web Panels que despliegan información relacionada. Observaciones Es posible tener varios web components con transacciones en un mismo web panel. Interfaces: Web Descripción La posibilidad de definir una transacción como Web Component permite tener en un Web Panel varios componentes. sino tambien cualquier Transacción con interfaz web.asp?122 .gxopen. menues. C/SQL. no solo un Web Panel puede ser un Web Component. pero se deben tener en cuenta los siguientes puntos: El estado de grabación no se mantiene por cada componente.com. Alcance Objetos: Transacciones Lenguajes: . se pierden los cambios realizados en el primero (es decir se refresca la página con el valor y estado que tenía antes de modificar el atributo).uy/hproject.Net. Java. Esto significa que si el usuario ingresa a un componente y realiza una operación (por ejemplo modifica un atributo de la transaccion y oprime el boton “Aplicar Cambios” por primera vez) y no reconfirma la misma. Ejemplos Puede obtener un ejemplo en esta URL: http://www.0.TRANSACCIONES COMO WEB COMPONENTS Introducción A partir de la versión 8. al realizar una operación en otro componente (por ejemplo un GET). algunos conteniendo Transacciones (para altas. La definición y el uso de una transacción como Web Component es similar al caso de Web Panels como Web Components Por más información referirse al documento de Web Components. Visual Basic.

5.EJECUCIÓN DE OBJETOS WEB CON WEB COMPONENTS A continuación se describe la ejecución de objetos Web que contienen Web Components. 4. Web Components en área plana del objeto Web Orden de ejecución 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 ejecución 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’).  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). Evento Evento Evento Evento Evento el Web 6. 2. Cada Web Component tiene a su vez un subfile. se puede observar un Web Panel que contiene 2 Web Components (A y B) y un subfile. 3.  Evento START de todos los Web Components dentro del objeto web que no están dentro de subfiles. Ejemplo: En la siguiente figura. A B En este caso el orden de los eventos cuando se ejecuta por primera vez es el siguiente: 1. 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 .  Evento REFRESH del objeto Web ‘padre’.

Evento de usuario del Web Panel . Evento de usuario del Web Component. 5. Lectura de variables del Web Panel 3. 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. NOTA: La lectura de variables de cada objeto se realiza siempre inmediatamente después del evento START de dicho objeto. 2. Disparo de un evento de un Web Component       Evento START del objeto web padre. Evento START del Web Component cuyo evento se disparó. A continuación se analizan ambos casos. 6. 7. 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. 3. Evento REFRESH del objeto web padre. el orden de los eventos sería el siguiente: 1. al dispararse un evento del Web Panel. 8. el orden de los eventos sería el siguiente: 1. Evento LOAD del subfile del Web Panel 11. el orden de los eventos depende de si se disparó el evento en el padre o en un Web Component.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. Evento START del Web Panel 2. si se dispara un evento del Web Component A. 9. En el ejemplo. 4. 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.

6. REFRESH y LOAD si tiene subfiles) se ejecutan cada vez que aparece el Web Component. 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. Consideraciones de diseño para la optimización de Web Components A continuación se describen algunos puntos a considerar para el diseño de páginas Web con GeneXus y Web Components para lograr una optimización del código HTML generado: USO DEL CREATE Evitar el uso de CREATE y especificar. el nombre del Objeto Web Component en las propiedades del Control Web Component. 7. . 8. El incremento en el código HTML por utilizar CREATE es relativamente menor. Evento REFRESH del Web Component B y evento LOAD del subfile en el Web Component B Nota: si el objeto web tiene más de un subfile. puede sumar varios KBytes más a la página. 5. De todas formas. Web Components en subfile freestyle Orden de ejecución de los eventos En caso de haber Web Components en subfiles. 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.4. Todos los eventos del Web Component (START. se ejecuta el evento START del Web Component justo antes del evento REFRESH en vez de ejecutarse al principio. Cuando se utiliza CREATE (especificando un objeto o una variable) los generadores tienen que incrementar el código HTML generado para saber cuál fue el nombre del Objeto Web Component que se utilizó. 9. Evento LOAD del subfile del Web Panel 11. siempre que sea posible. en páginas con muchos Web Components y/o con Web Components dentro de grids.

EVITAR EL USO DE CREATE CON UNA VARIABLE En algunos generadores (VB. 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 código HTML generado para un Text Block es normalmente menor (en algunos casos la mitad) que el de una variable. Para poder hacerlo. que llamaremos Login. en un DO CASE con CREATEs "fijos" (con nombre de objeto) basándose en los parámetros especificados. C/SQL. Un ejemplo de esto es la inclusión de código HTML escrito por el usuario en las páginas generadas. UTILIZAR TEXT BLOCKS EN LUGAR DE VARIABLES SIEMPRE QUE SEA POSIBLE Un Text Block tiene menos funcionalidad que una variable. Es muy recomendable utilizar Text Blocks en este caso. etc. Sin embargo. ELIMINAR ATRIBUTOS/VARIABLES QUE NO ESTÉN SIENDO UTILIZADOS EN LA PANTALLA Genera menos código HTML un atributo/variable que no esta en la pantalla que uno que sí esta pero tiene la propiedad Visible en cero.) el CREATE con una variable es transformado. lo primero que vamos a hacer es definir un nuevo web panel. e indicar que el mismo es un web component. Es importante notar que la cantidad de código HTML generado depende del contenido de la variable o del valor de la propiedad Caption de un Text Block. Resulta evidente que el DO CASE puede incluir CREATEs de Web Components que nunca van a ser llamados (porque no son necesarios en la lógica del programa) y entonces nos encontraríamos como en el punto anterior. por el especificador. Haga clic aquí para ver la demostración . Lo que vamos a hacer ahora es reemplazar el área de login en el web panel ‘Sale of Movies’ por un web component. Ninguno de los dos se "ve" en la página generada.

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. Web Transactions Lenguajes: C/SQL – Java – Visual Basic – .Net Interfases: Web Descripción Una ‘Embedded Page’ es un control que se puede insertar en un Web Panel o una Web Transaction. es decir desplegar el contenido de cualquier URL en objetos web generados por GeneXus. A este control se le puede asociar cualquier página u objeto web GeneXus. EMBEDDED PAGES Introducción El objetivo de las ‘Embedded Pages’ es poder incluir información externa. Alcance Objetos: Web Panels.A continuación. 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 capítulo 3). Hágalo como ejercicio. Haga clic aquí para ver la demostración Nota: Observe que lo más correcto sería incluír el textblock “My profile” en el webcomponent “Login”. Ventajas del uso de Embedded Pages El uso de Embedded Pages brinda a los usuarios GeneXus la siguiente ventaja: . cuyo contenido luego será incluido en ejecución dentro del objeto.

0 o versiones superiores. Uso de Embedded Pages Para insertar una Embedded Page en un Web Panel o Web Transaction se debe seleccionar la opción Insert / Embedded Page. Netscape 6. En consecuencia. con lo cual se creará un control de tipo ‘Embedded Page’ en el mismo como se puede observar en la siguiente figura: . Requerimientos Para poder visualizar objetos Web que contienen ‘Embedded Pages’. Dichas páginas pueden estar en el mismo servidor que la aplicación o en otro servidor.0. Incluir información externa: permite que se incluyan páginas estáticas o dinámicas de la propia aplicación o desarrolladas por terceros. se requieren browsers que soporten el tag correspondiente al ‘inline frame’ (<IFRAME>). el browser se encarga de realizar el requerimiento de la página asociada y de incluirla dentro del inline frame. el browser (en el cliente) debe ser como mínimo Internet Explorer 4. Esta característica brinda gran dinamismo a las aplicaciones web desarrolladas con GeneXus. Generación 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’.

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

Sí funciona en Netscape 6.0 o menor. Observaciones  Si en las propiedades del control no se especifica la propiedad . BorderStyle Scrollbars Source TooltipText Height  Width  Align PROPIEDADES MODIFICABLES EN EJECUCIÓN A continuación se ejecución:  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 superior.      ControlName: Nombre del control.

es decir se permite algo del estilo &url = “http://www. Se permite la asignación dinámica de URLs. INTRODUCCION AL CAPITULO 6 A lo largo de este capítulo discutiremos como se comportan las transacciones que se ejecutan en el web (transacciones con form HTML). Para diseñar este nuevo form Web. los eventos de éste y del contenedor se dispararán en forma independiente y no es posible establecer a priori cuando se ejecutan los de uno con relación a los del otro.com” EP. .  Source. siendo EP el nombre del control ‘Embedded Page’. Para destacar el funcionamiento de las mismas. entonces en el evento START o REFRESH se debe asignar algún valor a la misma. realizando automáticamente todos los controles de integridad referencial necesarios. De esta forma podremos seguir avanzando sobre nuestra aplicación… TRANSACCIONES WEB Descripción Las Transacciones Web no son un nuevo tipo de objeto GeneXus. por consiguiente. se describirán sus diferencias con respecto al comportamiento de las transacciones en ambiente gráfico. ya que sólo se requiere un navegador instalado en el cliente.Source = “http://www.Source = &url Se pueden incluir Embedded Pages dentro de subfilegrids freestyle.genexus.genexus. sino un nuevo form para las transacciones tradicionales que permiten su ejecución en navegadores. Por ejemplo EP. que será el que se visualizará en ambientes Internet se utiliza el mismo editor HTML que en el diseño de Web Panels.com”. También facilitan el diseño de aplicaciones Web porque permiten resolver el ingreso de datos sin tener que definir Web Panels y Procedimientos para resolverlo. si se utiliza un objeto GeneXus en una ‘Embedded Page’. La ventaja de estas transacciones es que facilitan la distribución de la aplicación. Orden de los eventos Como se mencionó anteriormente la ‘Embedded Page’ es una página totalmente independiente del objeto web que la contiene.

es seleccionando el tab Web Form: Inicialmente se crea un form donde se muestran los botones de movimiento. etc.) Se muestra un ejemplo a continuación: . Este botón tiene asociado el evento ‘Get’ y permite obtener la información correspondiente a un registro cuando se ingresa un valor en el/los atributo/s clave.¿Cómo se define en GeneXus? Para diseñar el form Web de una transacción. Adicionalmente. se crea un botón a continuación del atributo clave. Los botones definidos automáticamente por GeneXus pueden cambiarse por imágenes a las que se les asocian en la propiedad OnClickEvent los eventos estándar de GeneXus (por ejemplo. Este control podrá ubicarse en cualquier parte del form y se le podrán asignar propiedades (tipo de letra. ‘Get’. También tiene un control denominado Error Viewer donde se despliegan los mensajes. ‘Last’. etc.). Otra forma de editar el HTML form. los atributos que componen la transacción y sus descripciones y los botones para confirmar los datos. color. se debe abrir la transacción y seleccionar la opción Object/Web Form del menú GeneXus. ‘Next’.

el orden de disparo de eventos y reglas es el siguiente: . Las Transacciones Web tienen un diálogo a pantalla completa. Esto determina diferencias en el comportamiento de aplicaciones que tienen diálogo campo a campo:    No se valida campo a campo No se pueden disparar reglas entre un atributo y otro con reglas ‘after attribute’. La razón de este diseño es facilitar el uso en ambientes de Internet donde un diálogo de tipo campo a campo como en los ambientes visuales (Visual Basic. Visual FoxPro.) resultaría inviable por performance. semejante al que se provee en el iSeries en pantallas de texto. lo que implica diferencias en la validación de los datos y en el disparo de las reglas. etc.Consideraciones Generales La principal diferencia de las Transacciones Web con las transacciones de las aplicaciones tradicionales es el diálogo que emplean. las reglas se disparan en dos momentos: al ingresar a la transacción (las que no tienen condiciones de disparo) y también al confirmar los datos. El usuario puede visualizarlos presionando el botón ‘Check’. Arbol de evaluación Con este tipo de diálogo. 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. ORDEN DE DISPARO DE LOS EVENTOS Y ARBOL DE EVALUACIÓN Cuando se ejecuta por primera vez una transacción.

Es importante notar que el control de cambios se realiza sobre todos los atributos involucrados salvo aquellos de tipo Long VarChar por su tamaño. El control de cambios (es decir la validación entre la lectura inicial y la confirmación) se realiza a nivel de cada tabla involucrada en la Transacción Web. Si un programa llama a una Transacción Web. Integridad transaccional Por la forma de trabajo en Internet.today()). una Transacción Web inicia una UTL (unidad de trabajo lógica) al comenzar a ejecutar y la cierra (ya sea por COMMIT o ROLLBACK) antes de terminar. Como consecuencia. en el momento de “recibir” las modificaciones (cuando el usuario presiona Confirm). no aplica la propiedad ‘Commit on Exit’ en las Transacciones Web. Evento Start 2. Los valores leídos al momento de “enviar” los datos son comparados con sus correspondientes. Por todo esto. no existe ningún tipo de locks en la base de datos. Reglas que no tienen condiciones de disparo Al presionar el botón ‘Get’. Evento Start 2. Toda modificación a la base de datos que se haga durante la “vida” debe ser confirmada o eliminada antes de que la Transacción Web “muera” y retorne la página resultante. Control de concurrencia Las Transacciones Web utilizan el diálogo pseudo-conversacional. las Transacciones Web “viven” solamente el tiempo entre que el usuario de un navegador seleccionó el link o presionó un botón y la nueva página es mostrada. en cada tabla. Lectura de los atributos/variables de la pantalla 3. el botón ‘Confirm’ o cualquier botón con un evento de usuario asociado. Si los valores no coinciden. mientras el usuario esta realizando modificaciones a los datos o simplemente viéndolos. Lo mismo ocurre con la variable &time y la función Time() correspondiente. Reglas REGLAS La regla Default_mode no aplica en Transacciones Web. .&today) se dispara únicamente la primera vez que se ejecuta la Transacción Web.1. en su lugar se aconseja utilizar default(Att. La regla Default (Att. el disparo de eventos y reglas es el siguiente: 1. Esto implica que. No puede formar parte de otra UTL. se informa al usuario que hubo cambios y que debe intentar nuevamente. ésta iniciará otra (nueva) UTL.

Se detalla el comportamiento de las mismas dependiendo de la acción: inserción. modificación o eliminación de registros.Prompts Para cada Transacción Web se genera un Web Panel que será el prompt por defecto (autoprompt). y se despliega una pantalla con la siguiente forma: . Para modificar el prompt llamado por defecto. También es posible definir web panels como prompt. por mas información referirse a la sección “Web panels como prompt” Transacciones Web sin Modo instanciado Las transacciones Web pueden invocarse sin recibir el modo instanciado. se puede utilizar la regla prompt. y los prompts correspondientes a las claves foráneas que se tengan. Modo Insert Al ingresar a una Transacción Web de este tipo. se comienza en modo Insert.

Esto hace que se carguen los datos del registro. se insertarán los datos. En caso de que ya exista el registro va a dar un mensaje de error que se despliega en el Error Viewer. Modo Delete Para eliminar un registro primero se debe ingresar en modo ‘Update’ (ingresando la clave y presionando el botón ‘Get’). se insertarán los datos. en primera instancia. Si se trabaja con confirmación. si no se trabaja con confirmación (propiedad Confirmation del objeto). que se validen los datos ingresados en forma similar a cuando se presiona el botón ‘Check’. se deberá poner un valor en la clave y presionar el botón ‘Get’ ( ). El mensaje es ‘Record already exists’. se desplegará el mensaje ‘Please confirm the data’. Luego de actualizada la base de datos. se despliega el mensaje ‘Data has been successfuly added’. Al cargar los datos también se traen las descripciones. se digitan los datos en la pantalla y se presiona el botón ‘Apply Changes’. Modo Update Para entrar en modo Update. Se pueden modificar los datos y presionar el botón ‘Apply Changes’. Esto provoca. Además. y se actualizarán los datos con un procedimiento análogo al que se sigue para el modo Insert. se desplegará el mensaje ‘Confirm deletion’ . Al presionar nuevamente el botón ‘Apply Changes’. y luego presionar el botón ‘Delete All’. En el caso de trabajar con confirmación.Si se quiere ingresar un registro nuevo. lo que provoca que se deshabilite dicho botón.

deshabilitan los botones de movimiento entre registros y los botones ‘Get’. Update o Delete. Transacciones Web con Modo instanciado Las Transacciones Web que se invocan instanciando el modo Insert. la transacción queda en modo ‘Insert’. se eliminarán los datos y de desplegará el mensaje ‘Data has been successfuly deleted’: En el caso de que no se trabaje con confirmación. Si se borran todos los registros. sin necesidad de presionar ‘Apply Changes’. Al eliminarse un registro se cargan los datos correspondientes al registro anterior. al presionar el botón ‘Delete All’ se eliminarán directamente los datos y se desplegará el mensaje ‘Data has been successfuly deleted’.Al presionar el botón ‘Apply Changes’. quedando en modo ‘Actualizar’. ‘Select’ y ‘Delete All’. .

Haga clic aquí para ver la demostración . Al presionar el botón ‘Apply Changes’. se elimina el registro. tenemos que editar la transacción de Clientes (“Customer”) y en el web form diseñarlo como se muestra a continuación: Haga clic aquí para ver la demostración La numeración del Cliente es realizada en forma automática. sin importar si se esta trabajando con confirmación o no. Ahora que ya vimos como funcionan las transacciones web. Para hacerlo. a partir de la propiedad “Autonumber” que le asignaremos a la clave primaria de la tabla. podemos definir la transacción para registrar un nuevo usuario que es invocada en el link que definimos en el Web Panel Sale of Movies.Modo Delete Cuando se invoca una Transacción Web instanciando el modo Delete siempre se despliega el mensaje ‘Confirm deletion’.

se debe controlar que la contraseña concuerde con la confirmación ingresada. El ingreso de todos los campos es “obligatorio”.Agregaremos las siguientes reglas a la transacción: Parm(&CustId. Además. Para que la variable &PswConf sea de ingreso. por lo cual debemos agregar reglas que hagan este control: Error(‘Please specify a Last Name’) if null(CustLastName). delete. CustId=&CustId if update .&Mode). Error(‘Please specify an E-Mail account’) if null(CustEmail). se debe agregar la regla: Accept(&PswConf). debemos agregar una regla que evite que el código de Cliente sea ingresado: Noaccept(CustId). Error(‘Please specify a First Name’) if null(CustName). Error(‘Please specify a User name’) if null(CustUsr).OR. Error(‘Please confirm the Password’) if null(&PswConf). Finalmente. para eso es necesario agregar: Error(‘Your password entries did not match’) if CustPsw <> &PswConf. Error(‘Please specify a Password’) if null(CustPsw). agregar el código siguiente para que los controles de ingreso de passwords queden enmascarados: . En el evento start.

IsPassword = 1 CustPsw. El primer nivel debe respresentarse plano (sin grid) y el nivel subordinado necesariamente debe tener un grid. que es el que tiene el link para registrar un nuevo usuario. podemos modificar el link para registrar un nuevo usuario. se tienen que tener en cuenta los siguientes puntos:  Número de niveles de una transacción Las transacciones Web pueden tener un nivel anidado y pueden tener varios niveles paralelos. en la página principal. de forma de que le pase los parámetros adecuados a la transacción “Customer”. Recuerde que la página principal del sitio ‘Sale of movies’ contiene un webcomponent ‘Login’.Event Start &PswConf.   Grid Eliminación de líneas En diseño se utiliza una variable &GxRemove definida y agregada automáticamente a los subfiles de la pantalla por defecto. Esta variable es un check box que se ubica en la primera columna del grid. vamos a modificar ese mismo link. veamos la ejecución de nuestra aplicación y registremos un nuevo usuario… Haga clic aquí para ver la ejecución Transacciones Web de más de un nivel Cuando se trabaja con Transacciones Web de mas de un nivel. .IsPassword = 1 EndEvent Ahora que ya definimos la transacción web. Haga clic aquí para ver la demostración Ahora si.

Alcance Objetos: Web Panels. Lo mismo para agregar líneas. . . ] . en lugar del bitmap utilizado por defecto. se debe marcar la misma con el check box.Net Interfaz: Web Descripción La regla PROMPT permite especificar (opcionalmente) el nombre del control que activa la llamada a un determinado prompt. no las líneas marcadas. Nota: Es importante considerar nuevamente que cuando se está en una Transacción Web se está modificando todo el “documento” y no se está en un nivel en particular de la misma. pn) [on <control>].Cuando se desea eliminar alguna línea del grid. La sintaxis pasa a ser la siguiente: Prompt( <program>. Esto posibilita además la llamada desde Web Panels a prompts de GeneXus o de usuario.. Transactiones Lenguajes: Java. Este último eliminará toda la transacción. REGLA PROMPT ON Introducción Es posible definir el control que activa la llamada a un determinado prompt en objetos Web. no de ‘Delete All’.. C/Sql. Visual Basic. Por eso para eliminar líneas se debe utilizar el botón ‘Apply Changes’ porque en realidad se está actualizando el “documento”. se debe utilizar el botón ‘Apply Changes’ porque se está actualizando el “documento”. y presionar el botón de ‘Apply Changes’. [p1.

etc). se ignora la nueva funcionalidad. mediante el uso de la regla Prompt.Net Interface: Web Descripción Existen casos en los que un usuario requiere crear un Web Panel que luego quiere utilizar como prompt para obtener valores de atributos. USO DE WEB PANELS EN REGLAS PROMPT Introducción En muchas circunstancias.En caso de omitirse on <control> se agregará (en los ambientes que corresponda) una imagen. etc. botón. a la derecha del o los campo(s) que tienen prompt. en una transacción Web es necesario utilizar Web Panels de usuario en lugar de las listas de selección generadas automáticamente por GENEXUS. Al utilizarse esta regla se mostraran en el diagrama de navegación los prompts utilizados. Nota: Esta regla aplica únicamente a objetos que se especifiquen para interface Web. como hasta ahora. Cuando se especifica on <control> se utilizará el control referenciado. Imagen. . Alcance Objetos: Transacciones Lenguajes: C/SQL – JAVA .Visual Basic – . Los controles posibles son aquellos que tengan la propiedad link (TextBlock. en caso que se utilice en otros objetos.

text blocks o imagenes del form debe tener la propiedad de diseño ReturnOnClick en True. sino al desplegarse la pantalla por lo que tienen que tener el valor válido a retornar en cada Load (si se muestra un grid. Alguno de los atributos. variables.Para invocar el Web Panel. también se implementó la función ReturnOnClick() (sin parámetros) que puede ser asignada a la propiedad Link de cualquier control (que tenga esta propiedad). Al dispararse la regla prompt (haciendo click sobre un control) se abre una ventana con el Web Panel y. Si uno de los atributos variables. text blocks o imagenes del form que tienen la propiedad de diseño ReturnOnClick en True también tiene programado el evento Click. Programación de un Web Panel como prompt El web panel que será utilizado como prompt debe cumplir ciertas condiciones: 1. Simplemente al hacer click se asignan los valores a las variables de tipo OUT y se retorna. 2. Puede tener de in. simplemente se utiliza la regla prompt en una transacción web o dentro de un web panel. Uso avanzado Esta funcionalidad puede no contemplar todos los casos. 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. Debe tener uno o más parámetros de tipo output. por ejemplo). Puede tener habilitada esta propiedad en más de un atributo/variable. Ejemplos Prompt de Clientes Un prompt de clientes se programa así: En las Reglas del web panel: . 3. el código que este en el dicho evento se ignora. Los valores a retornar (de los parámetros definidos como de output) no se determinan al realizar click. En caso de ser un atributo o una variable. de inout también pero lo importante es que tenga de output que son los que devolverá. tiene que estar Read Only para que la propiedad esté habilitada. Por ello.

vamos a tener que agregar un prompt en el grid sobre el atributo MovieId.load &CliCod = CliCod endevent En el form: Un grid que tiene CliNom y CliCod. Para poder agregar una nueva película. En el evento asociado. y poniendo como parámetro de salida el MovieId. para lo cual agregaremos en la pantalla de la transacción un botón de "Confirm Order". La modificación de la cantidad de películas ordenadas es inmediata. que vamos a diseñar la transacción “Orden de Compra (Purchase Order)”. Esto se logra modificando la propiedad Returnonclick (valor “True”) de la imagen. Es por esta razón.parm( out: &CliCod). Haga clic aquí para ver la demostración Se quiere dar al usuario la posibilidad de dar por finalizada la orden. tenemos que modificar el web panel ‘Sale of Movies’ para poder devolver el código de la película elegida cuando el cliente haga clic sobre la imagen. simplemente cambiando el valor ingresado en el atributo PurOrdQtity. vamos a permitir que el cliente modifique su orden de compra. . TRANSACCION “ORDEN DE COMPRA” Una vez que el cliente selecciona una película para comprarla. es decir. Parm(PurOrdId). En los Eventos: event Grid1. Lo primero que vamos a hacer es abrir la transacción “Purchase Order” y vamos a agregar una regla para recibir por parámetro el nro. Haga clic aquí para ver la demostración Además. debe visualizar la lista de películas que tiene seleccionadas hasta el momento. Además. que invoque al web panel ‘Sale of movies’. vamos a tener que cambiar el status de la orden a "Finalizada" (invocando al procedimiento ProcofPurchOrder) y llevar en forma automática al usuario al web panel principal del Sitio (‘Sale of movies’). donde CliNom (por ejemplo) tiene la propiedad ReturnOnClick en true. de orden de compra. o modificar la cantidad que ordenó. que pueda agregar nuevas películas.

Por defecto. Esta funcionalidad. se usa un calendario popup. o “flat” en el form (esto es configurable). facilita la visualización y la selección de una fecha y hora. El calendario se despliega en forma de una ventana popup. Por más información referirse a “Web control calendar: Datepicker” INTRODUCCIÓN AL CAPÍTULO 7 .Haga clic aquí para ver la demostración Observe en la ejecución de la transacción “Purchase Order”. como automáticamente 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.

las diferentes funcionalidades que brinda este objeto. Esta integración se logra a través de los “Themes”. Cualquier cambio de diseño que se requiera hacer. El editor de Themes es una herramienta de libre distribución que se puede ejecutar en forma independiente de GeneXus. Luego. de esta forma se logra la uniformidad estética del sitio con un bajo costo de mantenimiento (no es necesario cambiar cada uno de los objetos). que se introdujo en la versión 8. y como consecuencia se obtiene una mayor productividad en el desarrollo de aplicaciones Web. Las propiedades de los controles se configuran en un único lugar: en las clases del Theme. se realizará en el Theme (sin necesidad de generar/compilar absolutamente nada). 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. y el desarrollo de la aplicación se independice e incluso se paralelice con su diseño. Por lo tanto ya no es necesario establecer los valores de las propiedades para cada control en el form. Recuerde que en el capítulo 2 se dió una introducción del objeto Theme e incluso se realizaron algunos ejercicios para comprender su funcionamiento. los controles se asocian a esas clases. es necesario luego integrar ese diseño con la aplicación GeneXus. Para el diseño gráfico contamos con el “Editor de Themes”. Esto es para que la herramienta pueda ser usada por el diseñador gráfico. hoy mediante los “Themes” se pueden definir “Clases” para los diferentes tipos de controles y asignarles propiedades a esas Clases. Se despliega como una estructura jerárquica de Clases. Por lo cual.Las aplicaciones Web necesitan un look & feel bastante más sofisticado que las aplicaciones Winform y los desarrolladores no tenemos las habilidades y el tiempo para lograr un diseño con esas características. una herramienta de libre distribución que se puede ejecutar en forma independiente de GeneXus. por lo general se opta por contratar servicios de diseño. la siguiente es una imagen del editor de Themes: . y éstos heredarán las propiedades allí configuradas. Veremos a lo largo de este capítulo en forma más completa. Por esa razón.0 de GeneXus.

y en runtime a través de la “Propiedad Class”. Attribute 2. y Tags HTML.Se puede observar que descendiendo en la estructura jerárquica. y a la derecha un preview que es una vista de cómo se visualizará en ejecución un control asociado a la clase correspondiente. correspondientes a controles GeneXus. tenemos las propiedades correspondientes a cada una de las Clases. Una clase podrá ser asignada a un control en tiempo de diseño. Al centro. clases predefinidas 1. se presentan un nodo “Classes” y un nodo “HTML tags” (parte izquierda). Cada clase reúne un conjunto de propiedades configurables por el diseñador. CLASES A partir del nodo “Classes” se despliega un conjunto de clases predefinidas. Button 3. Error Viewer . y constituye un “diseño” para un tipo de control GeneXus.

el background color). correspondientes a aquellos que son generados en forma automática por GeneXus en Web Transactions y Web Prompts.4. HyperLink 7. Form Nota 1: Existen también específicas de botones. Table 9. Las clases hijas o derivadas quedan implícitamente vinculadas en una relación de herencia con las clases de las cuales derivan. la clase Form queda en runtime asociada al tag BODY. Como consecuencia de esto. Clases derivadas Se pueden crear clases derivadas a partir de las clases predefinidas. Textblock 10. Esto es porque algunas de esas propiedades no son soportadas por el tag FORM (por ejemplo. las modificaciones en las clases “padre” se verán reflejadas en las “hijas”. FreeStyle Grid 5. que se definen en GeneXus se aplican al BODY del HTML. Grid 6. con algunas . Cuando se crean dichos objetos los botones se asocian correspondientes. Image 8. Por la misma razón. el proceso de definir una clase significa para el desarrollador asignarle un nombre y configurar las propiedades que le corresponden a esa clase. 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.

cualquier cambio en la clase padre se traduce en un cambio en la misma propiedad en el hijo. significa que su valor es un reflejo del valor de la misma propiedad del padre. Si para una propiedad de una clase dice “Inherited: True”. En cambio. junto con una descripción de la misma. Propiedades de un Theme Las propiedades de un Theme son las siguientes: FileName: Es el nombre del archivo físico que corresponde al Theme o al Template. "Inherited: False" implica que un cambio en la propiedad en la clase padre no se reflejará en la clase hija.excepciones. . La parte inferior del editor muestra el nombre de la propiedad. Las modificaciones consisten en cambiar los valores de alguna de las propiedades de la clase. La herencia en el valor de las propiedades se pierde cuando éstas son alteradas en las clases hijas. Además dirá “Inherited: True” o “Inherited: False según corresponda. Es decir.

la imagen se salva relativa. 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). luego el usuario GeneXus debe copiar las imágenes a e:\images para poder visualizar correctamente el Theme al incorporarlo a la KB. 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. Nota: 1. . con el valor c:\cliente\imagenes). Por lo tanto. con paths absolutos. Esto es porque cuando se trabaja desde dentro de GeneXus el valor de la propiedad coincide con el Base Image Path de la KB. El valor por defecto de la propiedad Base Image Path es el directorio de la KB. 2. las imágenes quedarán salvadas en forma relativa.Name: Nombre lógico del Theme (o Template). Se crea automáticamente un fólder “CSSDesign” bajo el directorio del modelo (dataXXX). Si no se setea la propiedad cuando se trabaja con el Template. No es correcto distribuir los . Si se configura la propiedad Base Image Path del modelo. en el directorio Web se generan los css con paths relativos. y al salvar el Theme. se usan caminos absolutos y no relativos. 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. todas las imágenes quedarán apuntando a c:\cliente\imagenes que no existe en la máquina del usuario GeneXus y por lo tanto no se va a visualizar correctamente el Theme cuando se incorpore a la KB (además del hecho de que el usuario seguramente tuviera que cambiar ese path porque no será válido en producción) Si el diseñador configura la propiedad (en el ejemplo.css que se encuentran bajo el directorio CSSDesign.css generados para usar en GeneXus. sin necesidad de algún otro procedimiento (como sería ir a cambiar uno por uno las imágenes utilizadas en el Theme para que apunten a la imágen correcta). En el directorio CSSDesign se guardan los . es decir. pero el diseñador gráfico (quien usa el editor por fuera de GeneXus) tiene las imágenes en el directorio c:\cliente\imagenes.

2. para el control correspondiente a la clase. 5. cuyo propósito es centralizar las propiedades que pueden ser editadas en GeneXus. 6. con la excepción del grupo “Misc”. . como se visualiza en la figura: Las propiedades en el Editor de Temas están clasificadas de la siguiente manera: 1.Panel de propiedades del Editor de Temas En este panel es posible configurar las propiedades de la clase seleccionada. 3. Background Properties Box Classification Font Misc Text Esa es la clasificación estándar de las propiedades de los CSS (Cascading Style Sheets). 4. o del HTML Tag seleccionado.

se modifica según la clase Form. . más algunas propiedades que complementan la funcionalidad de aquellas y se encuentran en el estándar de CSS. que son las siguientes:       BorderColor BorderStyle* BorderWidth Font Height Width Las siguientes propiedades aún no es posible configurarlas en el Theme:    TooltipText Word Wrap Caption Los colores de los links.Clase Form El control Form. se configuran agregando Tags HTML. Las propiedades bajo el grupo “Misc” son las que pueden ser editadas en las properties del control Form en diseño.

y pertenecen al estándar de CSS. como a variables de tipo bitmap. se tienen las siguientes propiedades.Clase Button Dentro de las propiedades del grupo “Misc”. que no se encuentran disponibles en diseño en GeneXus para imágenes son las siguientes:      BackColor BorderColor BorderStyle* Font ForeColor . no se encuentran dentro de GeneXus para los botones:     Background BorderStyle* Height Width Además. se tienen las siguientes propiedades. que si bien pertenecen a ese grupo. Clase Attribute Dentro de las propiedades del grupo “Misc”. se tienen todas las propiedades. Las propiedades del grupo “Misc”. que como se mencionó anteriormente son propias de los CSS. que si bien pertenecen a ese grupo. Clase Image La clase Image se puede asignar tanto a controles imagen. no se encuentran dentro de GeneXus para los atributos/variables:       Background BorderColor BorderStyle* BorderWidth Height Width Las propiedades de los demás grupos aparte del “Misc” tienen su definición correspondiente al pié del Editor de Temas. fuera del grupo “Misc”.

el valor de la propiedad Margin del Editor de Themes. se suma al valor de las propiedades Hspace y Vspace de GeneXus (caso de imágenes). por eso se "suman" cuando se define un margin.Las propiedades de los grupos distintos de “Misc” pertenecen al estándar de CSS. que no se encuentran disponibles en diseño en GeneXus para tablas son las siguientes:    BorderStyle* LinesColor LinesFont Clase Grid La propiedad que se encuentra en el grupo “Misc”. y no están disponibles en el Editor de Themes:  Backcolorstyle : Debe ser asignada en diseño. y no está en diseño en GeneXus. es:  Borderstyle* Propiedades que están en diseño en GeneXus. En la documentación del CSS se muestran que se maneja el siguiente concepto: Margin Border Padding Content La hspace y vspace son similares al border. Clase Table Las propiedades del grupo “Misc”. En particular. .

esto es porque no las soporta el CSS. CellSpacing: A nivel del Editor de Themes. RigthPadding. si bien no están disponibles en el diálogo de configuración de los textblocks en diseño (y sí están en el Tema). En Internet Explorer a la propiedad Padding. Existe la propiedad Padding. no existe la propiedad Cellpadding y Cellspacing. en diseño. Clase TextBlock Las propiedades del grupo “Misc”. que no se encuentran disponibles en diseño en GeneXus para el control ErrorViewer son las siguientes:  Background . Clase FreeStyleGrid Aplican las mismas observaciones que para la clase Grid. TopPadding. Clase ErrorViewer Las propiedades del grupo “Misc”. se la interpreta como cellPadding cuando se le pone cellPadding en 0 en diseño. LeftPadding. que no se encuentran disponibles en diseño en GeneXus para textblocks son las siguientes:          BackColor Background BorderColor BorderStyle* BorderWidth Height Width Font** ForeColor** **Las propiedades de Font y ForeColor. y se ignora si cellPadding es diferente de 0. CellPadding. se pueden configurar seleccionando el textblock y usando la barra de formato de texto de GeneXus. que se compone de BottomPadding.

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 “Transacción”.     Nota: BorderColor BorderStyle* BordeWidth Height Width *La propiedad BorderStyle. o presionando la tecla INS sobre el mismo. que son archivos . HTML Source y CSS). una vista previa de cómo se visualizaría un control asociado a dicha clase. La vista previa del editor se puede personalizar. Los valores que la propiedad acepta en el Tema son los que admite la tecnología 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. en el Tema.HTML. hay un botón “Preview” mediante el cual se puede mostrar o no. Para eso. Para eliminar una vista personalizada basta con presionar DEL/SUPR. . agregar una nueva vista a través del menú contextual del nodo Custom Views. Se puede modificar el source y ver los cambios reflejados en el HTML. La vista consiste de varios tabs (HTML browser. tiene una gama de valores más amplia que en el caso de la misma propiedad en GeneXus. agregándole “Custom Views”.

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

y la única propiedad que habiéndose modificado en el padre no se refleja en la clase “SubBullet”. es posible revertir la situación. Por ejemplo si se define una clase “Bullet” derivada de Texblock. Seleccionando dicha opción. esa es la única propiedad que no hereda. . y se desea que tengan las mismas características que la clase “Bullet” a excepción de la indentación. y en particular la "herencia" le brinda al usuario facilidades en la tarea de mantenimiento de las Clases y claridad en el diseño. Por lo cual. aparece un menú “Inherit Value”. la propiedad pasará a heredar el valor de la misma propiedad del padre. con el fin de definir las propiedades de los textos en listas con viñetas. Supongamos que ahora se quiere tener otra clase para los textos anidados a aquellos que estan asociados a la clase “Bullet”. La derivación de clases. Llamemos a esa clase “SubBullet” y creémosla como hija de “Bullet”. Haciendo click con botón derecho sobre la propiedad correspondiente.HERENCIA DE LAS PROPIEDADES DE UNA CLASE En el caso de que una propiedad de una clase esté marcada como “Inherited:False”. Esta clase solo difiere con su padre en la propiedad “TextIndent”.

se puede hacer mediante el Editor de Themes. se ve reflejada en la página Web si esos Tags están en el HTML de la página. Por ejemplo. siempre que se quiera establecer la configuración de un determinado Tag dentro de un contexto. siendo que cada uno de ellos está asociado a una clase diferente derivada de “Button”. dada en el editor. y modifique la propiedad “BackColor” de la clase Button. que es a su vez hija de “Button”. Es decir. HTML TAGS Los HTML Tags complementan la funcionalidad de los Themes. por lo cual. definir las propiedades de los links dentro de una tabla. . Vea en la web transaction “Customer” como todos los botones cambian el “Backcolor”. Haga clic aquí para ver cómo se pierde la herencia de las propiedades. las clases hijas heredan esa propiedad del padre. en cuanto a que permiten definir las características de un Tag HTML. Haga clic aquí para ver la demostración.. Observe que para todas las clases hijas de “Special Buttons”. en el mismo contexto con el cual fueron definidos en el editor. al ser modificadas en la clase hija. en un determinado contexto.Herencia: aplicación práctica Como ejemplo del concepto de herencia en los Temas. la propiedad “Backcolor” está indicada como inherited:True. El contexto está determinado por la jerarquía con la cual se definen los Tags. edite el Tema “default” de la KB. La configuración de los Tags HTML.

Es decir.Para el ejemplo que mencionábamos anteriormente. siempre que un tag A se encuentre anidado a un tag TD en el HTML generado. se haría como se muestra en la figura: Se define un Tag A hijo de un Tag TD. se tomará el forecolor definido en el ejemplo. de definir las propiedades de los links dentro de una tabla. . con lo cual el texto libre de la página tomará ese color. Otro caso de ejemplo sería definir un tag body y la propiedad “ForeColor” del mismo.

y los controles de cada uno de los objetos están asociados a la clase default correspondiente (propiedad “Class” de los controles). Desde el Editor de Temas 2. siempre que realicemos un cambio en el Tema asociado a un objeto. Para crear un nuevo Theme desde dentro de GeneXus.CSS a ningún lado. ya que si por ejemplo hay que cambiar el color de una grilla de azul a celeste. Haga clic aquí para ver la demostración. Hoy el cambio se realiza en un solo lado: el Tema. Todos los objetos basados en el Tema van a reflejar el cambio automáticamente.CSS (que contiene la definición de las clases) es referenciado en el Header de las páginas generadas. el directorio de producción coincide con el directorio web del modelo. Esto implícitamente requiere de un alto costo de mantenimiento. Antes. se obtiene un archivo con extensión . Cuando se salva un Tema con el editor de Temas ejecutado desde dentro de GeneXus. y se transfiere al pc del cliente para almacenarse en su caché. Crear un nuevo Tema Se puede crear un Tema de dos maneras: 1. Observe que los objetos de la Kb del curso están asociados al Tema “Default” (a través de la propiedad “Theme” del objeto). Un nuevo Theme consiste de los siguientes elementos:   Un nombre (nombre del nodo raíz) Un conjunto de elementos predefinidos. para que el usuario final perciba los cambios estéticos realizados (no es necesario generar ni compilar!!) Veamos un ejemplo con la aplicación del curso. basta con llevar el archivo . ese archivo . Por lo cual. probablemente habría que hacerlo en todas las páginas del sitio para mantener la uniformidad del mismo.Aplicación práctica: Temas Cuando se hace una aplicación Web es necesario que el sitio se vea “uniforme”. Note que en nuestro caso. se debe ir a la opción Object > New Object > Theme. Desde el menú de GeneXus. Realizaremos algunos cambios a las clases de Tema “Default” y veremos como se reflejan los cambios en ejecución. correspondientes a las clases. En tiempo de ejecución.CSS a producción. dentro del . había que ir por cada uno de los controles de cada objeto. por lo cual no es necesario copiar el .CSS (Cascading Style Sheet) en el directorio web del modelo.

En particular. dado que vamos a usar una imagen que se encuentra bajo el “Base Image Path”. pero no son objetos GeneXus Theme. folder “Classes”. En ese Tema vamos a definir una clase “BtnLogin” para la cual definiremos algunas propiedades. Observe que la propiedad “Base Image Path” del Tema coincide con la misma propiedad del modelo de diseño. Observe que en este caso si es necesario generar/compilar antes de ejecutar. crearemos un nuevo Tema de nombre “Movie”. Como ejercicio. Al Tema “Movie” lo vamos a asociar al web panel “Login”. dentro y fuera de GeneXus. ya que cambiamos una property del objeto y una property del control. Entonces. Haga clic aquí para ver la demostración. Debemos cambiar la clase del botón “Login” para que sea “BtnLogin”. el path de la propiedad Background del Tema quedará relativo. Nomenclatura: Llamaremos “Template” a los archivos XML que tienen el formato de Themes.XML .CSS (objeto theme de la KB). el producto de su trabajo serán archivos . Entonces. Asimismo. un usuario podrá diseñar un sitio utilizando el editor de Themes independientemente de GeneXus. Uso del Editor de Themes El editor se puede ejecutar desde GeneXus y como un programa independiente. vamos a asignarle una imagen a la propiedad “Background” de la clase. Cuando el Editor es ejecutado en forma independiente de GeneXus. el editor permite trabajar con archivos con extensión XML. Dentro de la KB es posible salvar los Themes como archivos con extensión . Esta última funcionalidad (trabajar con archivos XML) es la que permite la integración entre el editor como aplicación independiente y como tool de GeneXus. siempre se trabaja con Templates. Un folder “HTML tags” inicialmente vacío.

y salvar como objetos GeneXus Theme (archivos . 4. se puede incorporarlo a la KB rápidamente siguiendo los siguientes pasos: 1. . Por otro lado.CSS). 3. se salva como un objeto Theme. Con esto se logra independizar el trabajo de diseño de las páginas. 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.XML de manera de poder editarlo y modificarlo por fuera de GeneXus. Salvar el Template como un Theme (opción File -> save as) Opciones del Editor para el manejo de Themes y Templates OPCIÓN SAVE AS Cuando el Editor es ejecutado desde dentro de GeneXus. Dado un diseño en formato XML (un Template creado con el Editor por fuera de GeneXus). 2. también se podrá desde la KB salvar un Theme con extensión .que otro usuario (posiblemente quien desarrolle la aplicación) podrá integrar a la KB. del desarrollo de la aplicación. Abrir el Template usando el Editor desde dentro de GeneXus (opción File –> Open Template) 2. mediante la opción del menú : File -> Save As se puede: 1.

2. . se habilita la opción File Name. Si el Editor se ejecuta por fuera de GeneXus la única opción del “save as” es guardar un Template como otro Template. Para inicializar un Theme si se crea desde el menú de GeneXus (Object -> New Theme). para ingresar el nombre que se le dará al archivo XML generado. OPTIONS -> CUSTOMIZE -> “TEMPLATES” En el Menú Options -> Customize del Editor de Themes se presenta el siguiente diálogo: Mediante este diálogo se incorporan archivos XML al Editor. y se determina uno de ellos como “Default Template”. Inicializar el Theme que se crea automáticamente cada vez que se crea una nueva KB. El default Template se usa para: 1.De lo contrario (si el checkbox está deshabilitado).

cuando éste es ejecutado dentro de GeneXus.xml Fancy. Estos quedan en el folder “THEMES” de la instalación de GeneXus.XML) que podrán ser usados opcionalmente como default.xml Extreme.xml PinkPanther.xml Executive.xml Classic.Los templates “Custom” se graban en el registry de la máquina. GeneXus distribuye cinco templates (archivos con extensión .xml Light. 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.xml . Si el check “GeneXus” está seleccionado. Mediante el siguiente diálogo (menú “File->New” del Editor) se puede crear un nuevo Theme en base a alguno de los Templates (incorporados mediante el diálogo “Options->Customize Templates”. 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 diálogo “Options->Customize Templates”) Notas: 1. de lo contrario. se crea un Template. Los Templates que son incluidos con la versión son los siguientes:        Beach. se creará un objeto Theme.) Por defecto el nuevo objeto se basará en el Template default. 2. Se puede optar por crear un XML o un objeto Theme GeneXus.

Las opciones son: 1. “Editors” es posible De esta forma si se define un conjunto de colores básicos para el Theme. se pueden salvar los Themes en archivos con extensión XML. estos valores son almacenados con el Theme. Esta configuración se guarda por usuario. Por ejemplo: si se crea un Theme Gold (toda una combinación de amarillos y naranjas). el resto son divertidos y radicales. . OPTIONS -> CUSTOMIZE -> “EDITORS” Mediante el menú del editor Options->Customize-> seleccionar el tipo de diálogo para los colores. en los custom colors quedan los colores definidos como custom. Designer Si se usa el diálogo "Designer".Los cuatro primeros son “serios” y siguen las recomendaciones de "buen uso" del diseño en internet. y se definen “Custom Colors” (botón “Add to Custom Colors”). estarán disponibles cada vez que se quiera editar. Default 2. El editor como aplicación independiente Usando el editor desde fuera de GeneXus.

Para la inicialización de este objeto se utiliza el Theme definido como Default en el editor (“Default Template” –ver sección “Uso del editor”). El color de fondo del Treeview es gris y no blanco como en el caso de cuando se edita un Theme GeneXus. la interfaz del Editor cambia en algunos aspectos: 1. se utiliza aquel Theme definido en el registry de la máquina: HKEY_LOCAL_MACHINE\Software\Artech\GxTheme Editor\1.XML. haciendo doble click en el GXThemeEditor.Se puede llamar al editor desde fuera de GeneXus. Creación de un objeto Theme por defecto cuando se efectúa la creación de una kb en GeneXus Cuando se crea una nueva base de conocimiento en GeneXus. El título de la ventana indica que es un “Template” 2.0\ThemeTemplates\DefaultTheme. se crea un objeto Theme por defecto.exe o desde línea de comandos pasándole como parámetro opcionalmente un archivo con extensión . Al ejecutar el setup de distribución de GeneXus queda grabado el registry con un Theme default. . De forma de distinguir cuando se edita un Template de cuando se edita un Theme. En particular.

De ahí es que surge la necesidad de una buena interacción entre el diseñador y quien programa la aplicación. aparece la siguiente ventana: Los únicos requerimientos para instalar el Editor de Temas en un pc son: •. por lo general es necesario contratar el servicio de un diseñador gráfico.NET Framework 1. del desarrollo de la funcionalidad de la aplicación. se logra independizar el diseño de las páginas. se instalará el Editor de Temas a través de un setup de nombre GXThemeEditor.1 Redistributable Package . como a través del Editor de Temas. e incluso el hecho de paralelizar ambas tareas.exe Al ejecutar el setup. El diseñador gráfico (sin tener GeneXus instalado en su máquina).Interacción diseñador – desarrollador de la aplicación Web Debido a las exigencias de un buen diseño estético del sitio. Veremos en un ejemplo práctico.

ir al menú “File -> Save As”. INTRODUCCION AL CAPITULO 8 Una pregunta muy importante a la hora de desarrollar una aplicación para Internet. Una vez abierto el Editor de Temas como aplicación independiente a GeneXus. “diseñaremos” un Template y lo salvaremos en algún directorio (es un archivo con extensión XML).0 SP 1 o superior Vamos a crear un “Template” ejecutando el editor en forma independiente a GeneXus. Una opción es ejecutarlo desde la instalación de GeneXus. Lo primero. y estando chequeada la opción GeneXus del diálogo. al modelo del curso. ir al menú del Editor de Temas “File -> Open Template” y seleccionar el Template del directorio donde lo hemos guardado (con extensión XML). Una vez que es un Theme de la KB. es ejecutar el GXThemeEditor. Para salvarlo como un Theme de la KB. salvarlo con el nombre “Movie2”.exe. Una vez salvado el Template en algún directorio.• Internet Explorer 6. y luego integraremos ese Template a la KB del curso. para crear un Tema y asociarlo al modelo de la aplicación que estamos desarrollando. la otra posibilidad es instalarlo en un directorio aparte corriendo el setup del Editor de Temas. vamos a ejecutar esta vez el Editor de Temas desde dentro de la aplicación GeneXus (mediante la opción “Tools->GX Theme Editor”) Para editar el Template anteriormente creado. lo podemos asociar a la propiedad “Theme” del modelo. Haga clic aquí para ver como integramos el template anteriormente creado. es la siguiente: . Haga clic aquí para ver como creamos el template por fuera de GeneXus.

este punto puede ser crucial. se tienen 3 niveles distintos de seguridad:    SEGURIDAD A NIVEL DEL SERVIDOR WEB. o ejecutar comandos que afecten el comportamiento del servidor y les permita ingresar al sistema. SEGURIDAD A NIVEL DE LA BASE DE DATOS. existe una única tecnología que provee los principios para resolver estos problemas: CRIPTOGRAFIA. dependiendo del tipo de aplicación que se está desarrollando. Es por esta razón que se debe agregar tecnología adicional para resolver problemas de seguridad.. SEGURIDAD A NIVEL DEL SERVIDOR WEB Cuando se habla de la seguridad a nivel del servidor web. Se puede decir que al publicar una aplicación en Internet. Sin embargo. A lo largo de este capítulo se va a desarrollar cada uno de los puntos mencionados anteriormente. Desde siempre. SEGURIDAD A NIVEL DE LA APLICACIÓN. la información enviada desde el navegador al servidor web o viceversa puede ser interceptada por alguien. En consecuencia. Errores o problemas de configuración del servidor web. que permitan a usuarios no autorizados: o acceder a información confidencial que se encuentra en el servidor.¿Es segura nuestra aplicación en Internet? Como la seguridad es un concepto muy amplio. la respuesta a esta pregunta no es sencilla..  Intercepción de información El protocolo TCP/IP no fue diseñado para ofrecer servicios de comunicación seguros. . se están enfrentando básicamente los siguientes riesgos:  Intercepción de información enviada a través de la red desde el navegador al servidor o viceversa.

Existen servidores web. Finalmente. Desde el momento que se instala un servidor web en un sitio. La mayor parte de los usuarios únicamente visitan el sitio. pero sin seguridad a nivel del sistema el servidor web sigue siendo vulnerable a ataques. Para habilitar la encriptación de datos se necesita obtener un certificado de una autoridad certificadora (por Ej. al cual se le habilitó la posibilidad de encriptar los datos que se envían al navegador. Es entonces importante que el administrador del sistema defina políticas de seguridad. Netscape). este certificado es instalado en el servidor web. Este standard fue propuesto por Netscape Communications Corporation y es el que soportan la mayoría de los navegadores (Internet Explorer. La seguridad ofrecida por el servidor web. así como tome las medidas necesarias para evitar el acceso de usuarios no deseados. y el objetivo es identificar el protocolo default a usar cuando se construyen los links (HTTP. se abre para la comunidad Internet una “ventana” a la red de área local. Un servidor seguro es un servidor web. quedando habilitada la encriptación de datos. HTTPS. para activar la encriptación de los datos a transferir. todo lo que el usuario debe hacer es realizar la solicitud del recurso a través del protocolo HTTPS: en lugar de HTTP. así como desencriptar la información recibida del mismo. desde el simple descubrimiento que la página principal del sitio web fue cambiada. La property “Protocol Specification” aplica a la generación automática de links entre webpanels. El Correo (en Uruguay)). hasta el robo de la base de datos que contiene la información de sus clientes. Estas . Los resultados pueden ser variados. El standard más conocido de autenticación y encriptación de datos para el Web es el SSL.: Verisign. Hay que destacar que los servidores seguros protegen “únicamente” la información confidencial de ser interceptada por terceros. Cuanto más largo sea el mismo más segura es la comunicación de los datos.) Acceso de usuarios no autorizados La mayor parte de los riesgos que se presentan al tener un servidor web público son asumidos por el administrador del sitio. sin embargo intentarán entrar por la “ventana” abierta. otros. depende en parte también del largo del certificado soportado. que pueden trabajar como servidores seguros.

Existe abundante documentación sobre el tema. para saber que pasos debería seguir al publicar documentos. deshabilitar servicios no utilizados. instalación de firewall).mspx#XSLTfullModule122121120120 Apache Web Server: Securing Apache: Step-by-Step http://www.htm Microsoft: Internet Information Services (IIS) 6. o aplicaciones en su sitio web.verisign.microsoft.asp?url=/resources/documentation/WindowsServ/2003/ent erprise/proddocs/en-us/iis_security.securityfocus.microsoft.asp Hardening Systems and Servers: Checklists and Guides http://www.medidas pueden ser a nivel del sistema operativo (restringir las operaciones que se pueden realizar.com/technet/security/topics/hardsys/default .).com.com/infocus/1694 .com/resources/documentation/WindowsServ/200 3/enterprise/proddocs/enus/Default. Bibliografía: Verisign: http://www.uy/CorreoCert/sitio_seguro. como a nivel del servidor (aislamiento de la red.correo. etc. limitar los permisos sobre documentos y directorios. que es recomendable leer.com/products/site/faq/40-bit.0 security overview http://www.html#6 El correo: http://www.

es importante en aplicaciones en las cuales los usuarios acceden a información confidencial.’NOMBRE’.artech. Es de fundamental importancia evitar que usuarios no autorizados puedan acceder a los datos corporativos. La implementación de controles de seguridad. la seguridad depende del tipo de aplicación que se esté desarrollando. La razón por la cual son necesarios dichos controles. Desde el punto de vista de la configuración del modelo de GENEXUS. SEGURIDAD A NIVEL DE LA APLICACION A nivel de la aplicación.exe?1. es que los parámetros que se pasan entre objetos web (y entre páginas dinámicas en general) viajan visibles al usuario. donde se valida el usuario y su contraseña para ingresar al sistema. como por ejemplo: http://www. el usuario eventualmente podría saltearse la misma.SEGURIDAD A NIVEL DE LA BASE DE DATOS La seguridad a nivel de la base de datos es también un punto sensible a la hora de publicar una aplicación en Internet.com.uy/cgibin/hmyapp. no se deben realizar configuraciones específicas para mejorar la seguridad de la base de datos. así como que un usuario autorizado realice operaciones que le deberían estar negadas. como por ejemplo sus datos personales. ingresando en el navegador la URL de la siguiente página con un código de usuario válido. . por más que se disponga de una página de login. Por lo tanto.

Este procedimiento verifica que el número de sesión del cliente recibido se corresponda con el que se encuentra almacenado. se muestra una pantalla indicando el error y se vuelve al usuario a la página donde se pide login y password nuevamente. A continuación se presenta un ejemplo del funcionamiento de las sesiones. se van a discutir diferentes posibilidades que se encuentran disponibles. La primera vez que un usuario ingresa al sitio debe registrarse al mismo. Mediante este número de sesión se controla que un usuario no pueda acceder a los datos de otro usuario. y se crea un registro en la tabla SECURITY con el identificador del cliente. así como su validez. es que se debe agregar algún tipo de control adicional de seguridad. un número randómico de sesión y la fecha y hora del comienzo de la misma. se llama al procedimiento “Checksesion”. Si el usuario está logueado por más de dicha cantidad de tiempo. Si estos no se corresponden con los datos almacenados en la tabla SECURITY. se chequea el número de usuario y el número de sesión. De esa forma se da de alta el cliente. ingresar productos al carrito de compras e ingresar a la transacción de orden de compra “PurchaseOrder” para modificar detalles de la compra y confirmar la misma. Este número de sesión es válido por un tiempo determinado que se configura en el procedimiento. creando un nuevo usuario (navegando a través del link “Click here to complete a brief registration form”. A continuación. en este caso. se muestra la misma pantalla de error. En el evento Start de la transacción “PurchaseOrder”. el número randómico de sesión. donde se controla la validez del usuario y su contraseña. el cual lo lleva a la transacción “Customer”).Para evitar que se burle el control de acceso y permitir que se acceda a información confidencial. MANEJO DE SESIONES Una de las posibles alternativas para solucionar el problema de seguridad mencionado anteriormente. La página principal de la aplicación es Login. Luego se llama a la página donde se muestra la información a la cual únicamente los clientes registrados pueden acceder. la fecha y hora de la registración. Cada vez que el usuario ingresa a una página del sistema. Si alguna de las condiciones anteriores no . El uso de sesiones se compone de una transacción (SECURITY) que almacena el usuario logueado. es el uso de sesiones.

Igualmente que en el caso anterior. en la transacción “PurchaseOrder” se invoca al procedimiento “CheckSession” para validar la sesión. es cuando el cliente ya está registrado. donde se explica al cliente la causa del mismo. En este caso en el evento que valida el usuario se realiza una llamada al procedimiento “GenSesNum” que actualiza en la tabla SECURITY el número de sesión asignado al usuario. Login Purchase Order . se llama a una página de error.se cumple. así como la fecha y hora de generación del mismo. Hay que darse cuenta que en ese caso nunca llegaría a visualizarse la página “PurchaseOrder”. Login Customer Purchase Order “InsertSec” “CheckSession” El otro caso que queda por analizar.

. generalmente se usa una cookie para identificar el usuario (en algunos casos. aunque se podrían poner todos los valores de las preferencias en cookies. Como se menciona anteriormente. el sitio graba una cookie en la máquina del cliente con la identificación del cliente. tarjetas de crédito. 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. mantener estado de una aplicación. Incluso se pueden usar como método de almacenar el “carrito de compras” de modo que la información del mismo quede en la máquina cliente y se mantiene entre conexiones. También existen otros usos de las cookies. dirección) simplemente permanece en el servidor.“GenSesNum” “CheckSession” FUNCIONES DE COOKIES Introducción El objetivo es proveer funciones que permitan leer y grabar cookies desde objetos web generados por GeneXus. El máximo 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 aplicación graba más de 20 cookies las últimas van a borrar los valores de las primeras. ¿Que son las cookies? Las Cookies son archivos pequeños que se graban desde un web site en las máquinas de los clientes. (Ej. una para la sesión. nombre. Hay que tener en cuenta que existe un límite en cuanto a la cantidad de cookies que el cliente puede aceptar. puede leer o grabar las cookies en el cliente. De este modo la información del usuario no viaja hacia el cliente. Los programas CGI o cualquier aplicación que corre en un servidor. en otros para el usuario). Lo ideal es tener una clave que viaje y con esta clave leer la información del usuario. ni está en la URL. etc. De este modo la próxima vez que el cliente visite este sitio. El uso más común de las cookies es la identificación de usuarios. como rotación de contenido (especialmente avisos). Cuando un usuario se registra en un web site (Portal o E-Store).

Además existe un límite de tamaño de 4K por cookie, si una cookie supera ese límite es truncada.

El usuario puede preferir no grabar la cookie permanentemente (por ej. si está accediendo desde una máquina pública como podría 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 método 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 más 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 razón 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 más relevante es la fecha de expiración). 3. El browser recibe la respuesta y, si el valor de la fecha de expiración 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 expiración, las cookies se borran.

Para obtener más información técnica sobre cookies y su uso : http://www.cookiecentral.com

Descripción
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 vacío.

La sintaxis es:

&var_char = GetCookie(NombreCookie)

NombreCookie – carácter &var_char – carácter

SetCookie

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

otro

La sintaxis es:

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

Los parámetros entre paréntesis rectos son opcionales. Si alguno de los parámetros va nulo se asume el default.

&var_num – variable numérica.

NombreCookie -Carácter Nombre de la cookie

Valor - Carácter Valor a almacenar

path - Carácter Camino que indica para qué web panels la cookie es válida. Si no se especifica, la cookie es válida para los web panels que están en el mismo directorio que el que la grabó, o en directorios subordinados. Si se indica “/” la cookie será válida para todo el dominio.

Exp-date - Date/Datetime Indica la fecha de expiración de la cookie. Si no se especifica, la misma expirará cuando se cierre la sesión en el browser.

Domain-name - Carácter Dominio donde es válida la cookie. Por default es el dominio desde donde se creó.

Secure - Numérico Si está en 1 la cookie se trasmite solamente si la conexión 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 línea 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 configuración del navegador.

Ejemplos
Algunos ejemplos sencillos sobre cómo grabar una cookie son:

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

Aquí se está grabando una cookie -válida 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 -válida para los web panels de la misma aplicación -de nombre SESSION_ID_GX- con el valor correspondiente a la variable &Strsession. La cookie expirará al cerrar la sesión del browser.

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

“UY”,

“/”,

ADDYR(&Today,

1),

Aquí se está grabando una cookie -válida para todo el dominio ‘otrodom’- de nombre USER_PAIS con el valor UY y que expirará exactamente dentro de un año.

TIPO DE DATOS WEBSESSION
Introducción
WebSession es un nuevo tipo de datos de GeneXus que permite almacenar datos en una sesión de usuario del servidor Web. De esta manera se pueden tener variables globales, accesibles mientras la sesión esté activa.

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

Descripción
Los servidores Web permiten manejar el concepto de sesión. Una sesión se identifica por una clave única, que se mantiene mientras el usuario continúe en el sitio Web. El objeto WebSession permite almacenar información que será visible desde cualquier objeto Web dentro de la sesión 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 métodos y propiedades adecuados.

Propiedades:
Id

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

Metodos:
Set(key, value)

Permite hacer una entrada en la sesión 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 sesión. Por ejemplo: &Session.remove(“user”) Destroy() Detruye el contenido de la sesión. 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 sesión 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 sesión. Esto quiere decir que si se abre una instancia nueva del browser, se pierde la sesión, pero si abro en una ventana nueva se mantiene. Los datos y el ID de una sesión 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 sesión Si no se ejecuta el 'destroy()', el servidor Web destruye la sesión 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 información de sesión también depende de la plataforma, y condiciona la capacidad de tener la aplicación en mas de un servidor Web. Básicamente, si la sesión 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 sesión.

Luego en el Web Panel Welcome definir en el evento Start: &UsrNombre = &session. pero si inmediatamente se pide ID de la sesión devuelve el mismo ID.Set(“Name”.Get(“Name”) If Trim(&UsrNombre)=”” Return ///Sesión no valida Else TX. permiten visualizar los parámetros que se pasan entre los objetos en la barra de dirección del navegador. .Consideraciones específicas para el Generador Visual Basic  En VB el destroy() limpia los valores almacenados en la sesión. 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 sesión y vamos a un Web Panel de bienvenida (HWelcome) . Entonces podemos definir en el Web Panel de Inicio una variable tipo WebSession (&Session) y las variables de entrada &User y &Password. Java devuelven un nuevo ID. Ejemplos Supongamos un sistema Web donde el usuario debe autentificarse por medio de un usuario y una password que están previamente grabadas en la base de datos. ENCRIPTACION DE PARAMETROS Introducción Los objetos Web generados con GeneXus. obtenemos el nombre del usuario desde la sesión y escribimos un mensaje de bienvenida en pantalla.Caption = “Bienvenido “+ &UsrNombre + “a nuestro sitio!” Endif De esta manera. En el evento Enter del Web Panel definir For each Where UsrNom = &User Where UsrPsw = &Password &Session.

en el grupo “Web Information” y también a nivel de objeto. Es por eso que se hace necesario pasar los parámetros sin que el usuario de la aplicación los conozca o sea encriptar los parámetros. se programan de la misma forma que hasta el momento. Java.Net Interface: Web Descripción Para poder realizar la encriptación de parámetros en objetos Web se implementaron funciones estándar que contienen las funciones básicas de encriptación y algunas funciones adicionales (las que requieren manejo de parámetros y cookies).5 de GeneXus se implementa la encriptación de los parámetros de los objetos Web que van en la URL en forma automática y transparente para el usuario.Esto hace que. las aplicaciones no sean muy confiables en cuanto a la seguridad. en este caso no hay problemas de seguridad. No sucede lo mismo si se utilizan cookies. Con respecto al diseño de los objetos la encriptación de parámetros no implica ningún cambio. siendo éste el valor por defecto. Visual Basic. si se pasa información reservada como parámetro entre objetos Web (Número de cliente. porque un usuario podría simplemente cambiar el valor de dicho parámetro en la URL y disponer de información sobre la que no debería tener acceso. Alcance Objetos: Web Panels. . Para la preferencia a nivel de modelo los valores posibles son: No Indica que No se van a encriptar los parámetros que van en la URL de los objetos Web. . Transacciones Lenguajes: C/SQL. por ejemplo). En la versión 7. Las ventajas del uso de la encriptación de parámetros son:   Que los usuarios finales no sepan el o los datos que van en los parámetros Que los usuarios finales no puedan modificar el o los datos que van en los parámetros Se agrega la preferencia Encrypt URL Parameters a nivel de modelo.

además de los valores mencionados tiene el valor “Use model’s preference value”. ya que en este caso la URL no va a funcionar porque se necesita la cookie correspondiente para la desencriptación. pero no permite compartir URLs. Esto da un nivel de seguridad menor pero facilita el traspaso de links. En cambio. Con esto. pero la clave de encriptación va a ser la misma para todo el sitio. si se ejecutan objetos Web. las dos ventanas no pertencen a la misma instancia. La propiedad a nivel de objeto. Este valor ofrece un nivel de seguridad mayor. y se configuró la preferencia del modelo (o la propiedad a nivel de objeto) con el valor “Session Key”. Site Key Se encriptan los parámetros que van en la URL de los objetos Web. utilizando una clave diferente para cada sesión. La encriptación se realiza a través del uso de cookies locales. En este caso no se utilizan cookies.Session Key Indica que se van a encriptar los parámetros que van en la URL. Consideraciones Generales Sesiones del Navegador Una sesión del navegador queda determinada por una instancia del mismo. y luego se ejecuta nuevamente el exe del navegador para abrir una nueva ventana. Por ejemplo. Este es el valor por defecto. si se abre una sesión del navegador. Este valor indica que se va a tomar el valor de la preferencia del modelo para realizar la encriptación de ese objeto. si en un máquina se ejecuta el navegador de Internet y a partir de ese navegador se abre otra sesión (a partir de la opción de menú File/New/Window o a partir de un link). la cookie que se defina para guardar este valor va a funcionar en las sesiones del navegador que compartan la misma instancia. . ambas sesiones pertenecen a la misma instancia del navegador. Esto significa que no es posible para un usuario X enviar una URL que tenga parámetros a otro usuario Y.

  Cuando se utiliza la propiedad a nivel de objeto para encriptar parámetros. la URL correspondiente al Web Panel será del estilo: http://localhost/HINGRESO_WebObj/hdospar. y se quieren visualizar estos parámetros encriptados. Propiedad a nivel de objeto  Los valores “Session Key” y “Site Key” a nivel de la preferencia del modelo. y se realizan varios llamados entre objetos Web. ésta última tiene prioridad sobre la primera. Si se tienen valores configurados para la preferencia a nivel de modelo y la propiedad a nivel de objeto para encriptar parámetros.Preferencia a nivel de modelo vs. Para tener unicamente las llamadas entre algunos objetos con parámetros 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.3 . determinan que todos los llamados entre objetos Web se harán con parámetros encriptados. Esto es porque el llamado a los prompts se realiza desde el cliente y para realizar la encriptación se debe ir al servidor.asp?2. en ambos Web Panels se debe configurar el mismo valor para la propiedad “Encrypt URL Parameters”. todos (los llamados y los llamadores) deben tener configurada la propiedad Encrypt URL Parameters y todos deben tener el mismo valor en la propiedad. Ejemplos Si se tiene un Web Panel que recibe parámetros y no se utiliza la encriptación de parámetros. Propiedad “Encrypt URL Parameters” en Prompts Los parámetros de los prompts asociados a las Transacciones Web no es posible encriptarlos. se debe tener en cuenta que los valores utilizados por todos lo objetos involucrados debe ser el mismo. Lo mismo sucede si el arbol de llamadas involucra a más objetos Web. Por ejemplo: Si se tiene un Web Panel que llama a otro pasándole parámetros.

Si. y luego vuelve a ingresar la URL en el navegador. Se tiene dependencia de la configuración del navegador. en cambio se utiliza encriptación de parámetros (preferencia Encrypt URL Parameters = Session Key ó Site Key). cantidad de cookies que se pueden grabar.asp?lQ/tK1lefxCZMVoXrnmrTQ== COMPARACION DE ALTERNATIVAS DE SEGURIDAD EN LA APLICACIÓN A continuación se realiza una comparación entre las soluciones disponibles para agregar seguridad a una aplicación web. . Tipo de datos Web Session Ventajas  Presenta las mismas ventajas que el uso de cookies. se puede saber si el usuario ya accedió anteriormente a la aplicación. Desventajas  Mayor complejidad de programación  Pérdida de información: si el usuario pasa a una página estática. la misma URL se generará de la siguiente forma: http://localhost/HINGRESO_WebObj/hdospar. ya que los valores se graban en la cookie. Manejo de sesiones Ventajas  Es independiente de la configuración del navegador del PC del cliente. Desventajas:  Tienen limitaciones en cuanto al tamaño máximo. Cookies Ventajas:  No es necesario el pasaje de parámetros entre Web Panels.  Si las cookies no son temporales. debe volver a loguearse.

Requieren del uso de cookies en el caso de “Session Key”. Desventajas  El tamaño de la URL aumenta al ser encriptada. Es decir.  No es posible compartir la información de sesión entre diferentes servidores. pero en caso contrario se le dará al usuario un mensaje diciéndole que "Debe identificarse antes de realizar alguna compra". que a partir del evento asociado al botón de “Add to cart” del web panel “Movie Details” se requiere que la aplicación sea segura. Utilizaremos cookies “temporales” para evitar que todo usuario que se registre al sitio desde el mismo computador utilice la misma información de conexión. simplemente se modifica el valor de una preferencia. En caso de ser un usuario registrado y haberse identificado.Desventajas  Depende de la configuración del navegador. ya que es local al webserver. Encriptación de la URL Ventajas  No se requiere programación alguna.  La destrucción de los datos depende del browser utilizado. . recién cuando el usuario desea realizar alguna compra (en el botón 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 válido. Todo esto es lo que tenemos que implementar en el evento asociado al botón "Add to cart" del web panel “Movie Details”. se genera la orden de compra correspondiente (invocando a los procedimientos "AddHead" y "AddLine" según corresponda). Por el momento no es soportado por C/SQL. por lo tanto si el pasaje de parámetros es importante. Lo que nos quedaría por implementar en el web panel de “Movie Details” es el evento asociado al botón “Add to Cart”… Como hemos visto hasta el momento. se puede llegar al máximo aceptado por el browser. si bien el web panel “Sale of Movies” permite loguearnos al sistema. No permite compartir datos si los objetos son generados en diferentes lenguajes.

cuando el usuario tiene una sesión vencida (valor V) y cuando el usuario tiene una sesión. así como la fecha y hora de la última sesión activa.xpz) que brinda los objetos necesarios para definir la “seguridad” en las aplicaciones Internet utilizando cookies. SECURITY Es la transacción que define la tabla de SECURITY. INSERTSEC Este procedimiento da de alta en la tabla SECURITY la primera vez que el usuario inicia una sesión en el web. se describen los objetos que lo integran y utilizaremos. CHECKSESSION Este procedimiento valida el número de sesión recibido con el usuario que está logueado. Descripción de Objetos del archivo security. pero no coincide el número randómico de sesión .xpz A los efectos de una buena comprensión del xpz. así como un número generado en forma aleatoria de la sesión de este cliente (atributo SecRnd). Se distinguen tres casos: cuando el Usuario tiene iniciada una sesión vigente (valor S). Implementación aplicación 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 número generado en forma aleatoria para su sesión. A la sesión se le da una validez de 1 día.Disponemos de un Business Object (security. La SecId* SecRnd SecDate SecHour estructura de la tabla sería de entonces la siguiente: randómico) Sesión) Sesión) (Número (Fecha (Hora de de sesión Inicio Inicio de de  Una cookie denominada SECURITY que concatena (separados por una coma) el número identificador del cliente (atributo CustId). y devuelve el código de validación resultante.

'.CustId) Concat(trim(Str(CustId)).xpz.Caption = 'Welcome to movies. 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 función GetCookie). junto con la fecha y hora en que se logueó por última vez. simplemente debemos editar el evento 'Login' del web panel definido como web component y realizar la siguiente modificación: Event for where CustUsr if upper(CustPsw) = upper(&CustPsw) &SecRnd &CookieVal &result = = = 'Login' each &CustUsr = Udp(PGenSesNum. ¿Dónde dentro de la aplicación tenemos que grabar las cookies? o lo que es lo mismo ¿Dónde dentro de la aplicación tenemos que invocar a la función SetCookie? La cookie se debe grabar cuando el cliente se registra en el sitio por primera vez (en la transacción TCustomer)) y cada vez que se identifique (evento LOGIN de todos los web panels del sitio). GENSESNUM Este procedimiento actualiza el número randómico de sesión del usuario. try again please' .trim(Str(&SecRnd)). el ERROR Este web panel se invoca siempre que sea necesario cancelar la ejecución de la aplicación (por ejemplo: cuando la sesión ya no está vigente se invoca automáticamente a este web panel. 1) Cuando el cliente se identifica. desplegándole al usuario el mensaje correspondiente). Lo primero a hacer entonces es consolidar en la KB del curso el archivo security. RETSTR Este procedimiento devuelve los dos valores almacenados en la cookie: número de usuario y el número de sesión. luego de chequear que el usuario y password ingresados son válidos.') SetCookie('SECURITY'.com' else message. tenemos que grabar una cookie (con la función SetCookie).Caption endif = 'Invalid password.&CookieVal) message. Como definimos anteriormente un web component para encapsular el procedimiento de login.(valor I).

Es decir.’.&CustId. Para esto vamos a crear un procedimiento Login con el siguiente código: &SecRnd = Udp(PInsertSec. deben realizar el control de la seguridad leyendo la cookie y comparando los valores obtenidos con los valores almacenados en la tabla de SECURITY. tenemos que grabar una cookie en el PC Cliente con el CustId del cliente nuevo y el número de sesión randómico.&cookieVal) Este procedimiento deberia recibir como parámetro la variable &CustId.CustId) if after(Trn). todos los web panels del sitio de “acceso limitado a usuarios registrados”. en el evento asociado al botón de “Add to cart” y en el evento Start de la transacción ‘Orden de Compra’ (“Purchase Order”).&CustId) &cookieVal = Concat(trim(Str(&CustId)).&SecStr) &CustId = Val(&CustStr) &SecRnd = Val(&SecStr) &result = Udp(PCheckSession. En la transacción TCustomer.&SecRnd) If &result <>'S'  si la sesión de dicho usuario no está vigente . Hagamos entonces estas modificaciones necesarias… ¿Dónde tenemos que leer las Cookies? Es decir.&CookieVal. deberíamos agregar en las reglas: Call(Plogin. luego de dar de alta el cliente. trim(Str(&SecRnd)). dónde tenemos que invocar a la función GetCookie? Como ya dijimos antes. 1) VAMOS A TENER QUE INCLUIR LAS SIGUIENTES LÍNEAS DE CÓDIGO EN EL EVENTO START DE LA TRANSACCION PURCHASE ORDER: &CookieVal = GetCookie('SECURITY') Call(PRetStr.&CustStr.Caption endfor EndEvent // 'Login' Haga clic aquí para ver la demostración = 'User name not none found' 2) El otro lugar donde tenemos que grabar una cookie es cuando se da de alta un usuario nuevo.when message. que en la transacción ‘Customer’ (TCustomer).’) &result = SetCookie(‘SECURITY’. En nuestro caso.

Call(HError) Endif Haga clic aquí para ver la demostración 2) HAGAMOS EL CONTROL (EN EL WEB PANEL “MOVIE DETAILS”) DE QUE EL USUARIO TIENE QUE SER UN USUARIO “REGISTRADO” PARA PODER REALIZAR COMPRAS ..&CustStr.Pending &PurOrdId = PurOrdId Endfor For each line in prices if not null(&Qty) If null(&PurOrdId) &PurOrdId = udp(PAddHead. &MovieTypeId.&SecRnd) If &result = ‘S’ // si la sesión de dicho usuario está vigente For each Where CustId = &CustId and PurOrdSts = OrderStatus.&PurOrdId .&CookieVal.&SecStr) &CustId = Val(&CustStr) &SecRnd = Val(&SecStr) &result = Udp(PCheckSession.&Qty) endif Endfor .&CustId. &CustId) endif call(PAddLine.MovieId.. El evento asociado al botón de "Add to cart" quedaría entonces: Event ‘Add to cart’ &CookieVal = GetCookie('SECURITY') Call(PRetStr.

por lo cual no fue dado de alta en la tabla de seguridad. dé de alta un nuevo usuario a través de la transacción “Customer”. para probar el ejercicio hecho en este capítulo. Es posible ahora unir estas dos tecnologías accediendo de forma fácil y rápida a la información que brinda Internet desde los teléfonos celulares (ó móviles). que presentamos en este capítulo…  WAP     WebWrapper Manejo HTTP Funciones de acceso al header de un objeto Web Tipos de datos estructurados INTERNET MOVIL (WAP) Introducción En los últimos años tanto Internet como la telefonía celular han tenido un gran crecimiento y se han hecho accesibles a millones de personas.&PurOrdId) Else // si la sesión de dicho usuario no está vigente Call(HError) Endif EndEvent Haga clic aquí para ver la demostración Nota: 1. Entonces. el webcomponent Login debe estar en todos los webpanels del sitio. . es el que tiene la lógica de seguridad para que el usuario compre películas. El webcomponent “Login”.call(TPurchaseOrder. y es importante que el usuario en cualquier parte del sitio se pueda logear. y cualquier intento de realizar una compra con él va a dar error. 2. Observe que para el usuario de prueba que se estaba usando en los ejercicios anteriores. al momento de creado no se tenía en cuenta la seguridad del sistema. Entonces. y luego pruebe agregar alguna película al carrito de compras. INTRODUCCION AL CAPITULO 9 Existen otras características interesantes para el desarrollo de aplicaciones en el web. y navegar por toda la aplicación hasta que opte por realizar una compra.

los tipos de letra. Es interpretado por los celulares WAP compatibles. Este protocolo consiste en un modelo de capas que incluyen un IP inalámbrico. además. capas de seguridad (WSL) y lenguajes de descripción de contenidos entre ellos WML. Alcance Objetos: WebPanels Lenguajes: Visual Basic. generando objetos con contenido WML. es imposible traducir o ver de forma satisfactoria una página de web normal (HTML) en un celular. . El tamaño. pero tiene menos potencia y soporta algunas cosas que el HTML no y es bastante más estricto en la sintaxis. ni teclado por lo que el ingreso de datos debe ser limitado y la navegación. MicroBrowser Es un software instalado en el teléfono o dispositivo inalámbrico que interpreta el WML (y el WMLScript.) y despliega la información en la pantalla. las imágenes y la cantidad de información que se soporta en el WEB no se puede soportar en un microbrowser y no es práctico hacerlo. los dispositivos de tipo palm y cualquier dispositivo de información portátil. La navegación. el usuario no tiene ratón. WML Lenguaje de “tags” basado en XML. WTAI. WML vs HTML Por el tamaño de la pantalla. Internet móvil es el término comercial para acceder a información de Internet a través de dispositivos móviles.A partir de esta versión GeneXus permite generar salidas para Internet móvil. etc. Java. Los dispositivos móviles más comunes son los teléfonos celulares con “microbrowser” pero también entran en esta categoría. mucho más simple. Es parecido al HTML.NET Interfaces: Web Algunas definiciones WAP (Wireless Aplication Protocol) Es el protocolo más común de Internet Móvil. C/SQL y . que pueda disponer de una conexión inalámbrica. es diferente.

etc. Nokia. Los valores de la propiedad son:   HTML WML El valor por defecto es HTML para cualquier objeto Internet. se implementó una nueva propiedad (a nivel de objeto) denominada ‘Tag Language’. Arquitectura La arquitectura es similar a Internet.0) que es posible bajarlo de: http://www.com.openwave. Requerimientos Para testear esta característica directamente en la máquina de desarrollo es necesario tener instalado el emulador de microbrowser.com/products/developer_products/sdk/ El producto es sin cargo. Descripción Para generar Web Panels con contenido WML. En el diseño del objeto se deben tener en cuenta las siguientes limitaciones del lenguaje generado (WML): . estos podrán ser vistos desde un browser WAP. Con el valor WML es posible generar objetos con contenido WML. Diseño Se deben definir los Web Panel como hasta el momento y configurar la propiedad ‘Tag Language = WML’. Algunos de los más conocidos son UP Browser (Unwired Planet) de Phone. El archivo ocupa aproximadamente 7 MB. para acceder al mismo se debe realizar la registración en dicha página. RS380 Ericsson.Es posible acceder a emuladores de celulares y sus microbrowser.SDK version 4. El cliente es el teléfono celular con MicroBrowser y en el servidor se encuentra la lógica en objetos (ejecutables o ASP) con contenido WML o sea que al ser interpretados por los browsers generan WML. Recomendamos el UP Browser (UP.

por lo que no se recomienda que las pantallas superen estos tamaños. los pasos a seguir son los siguientes: . esto se realiza escribiendo la dirección donde se encuentra el Web Panel en la barra de direcciones del mismo.   Los objetos WML están limitados en el tipo y cantidad de controles que se soportan así como en el tamaño de las páginas debido a la cantidad de memoria de los móviles y el tamaño de la pantalla. . Ejemplo Se desea desplegar un texto de prueba en un teléfono celular. El softbutton del teléfono (botón que se encuentra en la parte superior izquierda). se asocia al Evento Enter. dependiendo del móvil. No es conveniente que se tenga scroll en una pantalla de teléfono celular.    Ejecución Luego de generado el objeto se debe ejecutar desde el emulador 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 anidación de tablas y/o subfile freestyle o Subfiles comunes o Campos LongVarchar o La letra ñ o Tag <BR> o Botones o Cookies o Encriptación de parámetros Las propiedades de runtime soportados son o Link o Ispassword o Visible y o Enabled.Insertar el texto en un textblock en el form de un Web Panel. Las pantallas permiten entre 4 a 8 líneas de texto.

exe) en ‘Go’. http://localhost/cgibin/hPrueba. y presionar Enter o el Softbutton. .Es aconsejable verificar el código generado.En el teléfono celular se visualizará el texto ingresado en el Web Panel. teniendo en cuenta las consideraciones . en el Tab ‘Source’. .Ejecutar el UP. .Simulator.Especificar. generar y compilar el Web Panel desde GeneXus.Escribir la dirección donde se encuentra el objeto (por ej. .

. Hay un ejemplo disponible en : http://www.36.408 Errores comunes Error “Error : Invalid element ‘PCDATA’ in contents Síntoma Se debe a la ausencia de <P> en textblock o .5.aspx?2.gxtechnical.Si se producen errores en la pantalla del teléfono 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 detrás del emulador).com/main/Hdcenter.

Existen algunos tags HTML (no válidos en WML) generados por el editor. Es posible generar este código con algunas combinaciones de teclas. Hay algún dato con la letra ñ y el microbrowser no lo puede interpretar. 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 código no válido. No es posible hacer Cut & paste de controles y/o del Source.of card.” variable.” “Error : Uncompiled data from http <head>. o o o o o . Por ejemplo el tag <BR> es generado por la combinación de teclas Shift+Enter en el editor. Textblock y variables deben generarse entre <P> y </P>. es preciso en estos casos modificar el source en el editor de diseño de GeneXus. Subfiles o tablas no deben limitarse por tags <P>. esto no es válido en WML “Error : Invalid element ‘textarea’” “Error : Missing entity “ntilde” “Error : Invalid element ‘P’ in content of ‘p’. se debe configurar la preference ‘Tag Language=WML’ Se esta usando un longvarchar o un char de varias líneas. Igualmente no es recomendable modificar el código WML (bajo el tab “HTML Source” ) pues pueden dar errores en ejecución . La generación de estos tags se da con un enter al final del edit o modificando Código en el Tab ‘Source’.” “Error : Invalid element ‘br’ in contents of card. Se debe a un tag <BR> en el Source del objeto La página no es WML es HTML. Se introdujo algun tag <P> anidado.

Objetos: Transacciones.Net . y enviar este vía mail. Object . Alcance . para luego aplicar los métodos y propiedades necesarios. Work Panel.Visual Basic – C/SQL – . 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. La dirección base es agregada al código HTML que devuelve el método GetResponse. en caso contrario verá el código del Web Panel. TIPO DE DATOS WEBWRAPPER Introducción WebWrapper es un nuevo tipo de datos de GeneXus que permite encapsular la ejecución de los objetos Web (el código HTML generado). Procedimientos . No se reciben correctamente variables por parámetro en los llamados realizados mediante “call”. Propiedades: BaseURL Es la dirección Base del Web Panel La dirección base determina el servidor y directorio virtual al que apuntarán los links y a donde se irá a buscar el Web Panel en caso de que se presione algún botón. La idea es capturar el contenido de un Web Panel en su código HTML.Lenguajes: Java . En particular permite enviar el contenido de un Web Panel por mail.Interfaces: Web. Win Descripción Para poder enviar el contenido de un Web Panel vía mail desde un objeto GeneXus es necesario definir una variable de tipo WebWrapper. Web Panel.

Por lo tanto cualquier evento que se produzca en el Web Panel que realice un post al servidor ( por ejemplo hacer click en un botón. por este motivo al enviarlos vía mail.  Poner en el Web Panel las imágenes relativas y mandarlas como atachment en en el mail. en la dirección especificada en la propiedad BaseURL. en realidad se está enviando una imagen estática.jpg). Pero dicho GET se hace solamente si no había una redirección en el evento que ejecutó el POST. Si se utiliza un objeto WebWrapper para mandar un Web Panel mediante mail. etc) producirá que se abra el web panel en el browser.e. en el evento). y dicho Web Panel tiene un botón o evento click. Consideraciones Generales Los objetos Web Panel de GeneXus. no son estáticos.Objeto Web a encapsular en la variable de tipo WebWrapper A la propiedad Object debe asignársele siempre el resultado de la función Create( Objeto. En Outlook XP el comportamiento es el siguiente: el POST lo hace el propio Outlook (no se abre un browser para hacer el POST). Si se desea hacer un WebWrapper de un Web Panel que incluya imágenes. y en el browser se muestra la respuesta (incluso puede haber una redireccion. /imágenes/logo. se puede hacer de dos maneras:  Poner en el Web Panel las imágenes en forma absoluta. (De todas formas. Luego se abre un browser haciendo un GET de la página para mostrarla. el comportamiento al apretar dicho botón (o control con evento click) en Outlook XP difiere del de Outlook 2000 y Outlook Express. disparar un procedimiento. call o link. el inconveniente de esto es que el usuario debe estar conectado en el momento de leer el mail. se hace el POST al servidor Web. el evento se ejecuta siempre).jpg) si no hacer referencia directamente a la misma (i. En Outlook 2000 y Outlook Express el comportamiento es el esperado: se abre un browser.e. logo. . En este caso la ruta de la imagen no debe incluir directorios (i. Parámetros) Metodos: GetResponse Retorna el código HTML que devolvería el objeto Web especificado en la propiedad Source con los parámetros allí indicados.

al apretar dicho botón en el mensaje se ejecutará el evento. el Web Panel que se manda por email está compuesto solamente por un webcomponent. 2) Usar un Web Component.. Otro ejemplo: el evento asociado al botón modifica la base de datos y hace un call a otro webpanel. En Outlook 2000 y Outlook XP. y se abrirá un browser donde se verá en el form la variable con el valor que se le asignó en el evento. Luego se abrirá un browser donde se desplegará el form SIN MODIFICAR LA VARIABLE. Siempre se pueden usar links. pars. En Outlook XP se ejecutará el evento.. por lo que se hará el cambio a la base de datos.object = create( HMailForm. Hay dos formas en las cuales podemos cambiar nuestra programación para asegurarnos de que el comportamiento sea el mismo en los 3 clientes de mail: 1) No usar eventos. En Outlook 2000 y Outlook Express. Es decir. Dicho WebPanel tendría en el evento Refresh algo así: Event Refresh if base de datos fue modificada webcomponent. HGracias es el Web Panel al cual se quería hacer la redirección al procesar el evento. al apretar el botón se hace la modificación a la base de datos y se abre un browser donde se muestra el Web Panel llamado.Por ejemplo.object = create( HGracias.) endif End Event En el evento de usuario de HMailForm se haría la modificación a la base de datos por la cual se chequea en la condición. En Outlook XP se hace la modificación a la base de datos pero no se muestra nada. pero el form de respuesta nunca se mostrará. pars. haciendo el cambio en la base de datos.. ni siquiera se abre el browser. . si se tiene un evento asociado a un botón que graba algo en la base de datos y asigna cierto valor a una variable que está en el form.) else webcomponent..

Consideraciones específicas del generador Visual Basic En caso de tener en el Web Panel que se envía como Web Wrapper Link o Embedded Pages a objetos GeneXus del mismo modelo. CliMail) &MailMsg. Para ello se crearon los tipos de datos HttpClient.New(CliNom. se debe indicar la preferencia del objeto “Generation Mode” en Smart Static Panel. con el nombre del cliente. si puede ser un WebComponent. Dicha tabla tiene clave primaria CliCod. . con la dirección de correo el electrónico del cliente. el Web Panel Hnotify para cada registro de la tabla CLIENTE.Object = Create(Hnotify. y CliMail. La propiedad BaseUrl debe estar después de la función Create.GetResponse() &Oulook.Send(&MailMsg) EndFor TIPO DE DATOS HTTPCLIENT.Consideraciones específicas del generador C/SQL Al utilizar el tipo de dato WebWrapper con el generador C/SQL. También tiene entre sus atributos secundarios a CliNom. Variables Definidas: &Wrap del tipo WebWrapper &MailMsg del tipo MailMessage &Outlook del tipo OutlookSession &Wrap. HTTPRESPONSE Y HTTPREQUEST Introducción Esta funcionalidad provee a los usuarios GeneXus una forma de poder utilizar el protocolo HTTP en sus programas. el cual se pasará como parámetros al Hnotify.HTMLText = &Wrap. CliCod) &MailMsg. hay que tener en cuenta los siguientes factores:   El objeto Web que se crea para enviar por mail por medio de la función Create no puede ser main.To. Ejemplo El siguiente ejemplo es un procedimiento que ilustra como enviar por mail. mediante Outlook. HttpResponse y HttpRequest.BaseURL = “http://myserver/mysystem/” For each CliCod &Wrap.

Tipo. HttpResponse y HttpRequest Permiten leer los datos del request y grabar el response.Alcance Objetos: HttpClient (Transacciones. HttpResponse y HttpRequest (Procedimientos y Reportes con el valor http en la propiedad call protocol. Tipo. Win Form. Web Panels y WebTransactions ).String Secure Indica si el protocolo es http o https. HttpClient Este objeto refleja una conexión http. Lenguajes: Java – Visual Basic – Visual Fox– C/SQL – C#. Procedimientos). Interfaces: Web Form.String Port Define el puerto del host.Integer . Reportes.Boolean Timeout Determina el Timeout de la conexión. Tipo. Son objetos disponibles solo en WebProcs. enviarlo a una URL y leer los resultados. Puede usarse desde cualquier objeto GeneXus. Tipo. Descripción Los tres tipos de datos que se definen para interactuar con http son: HttpClient Permite armar un request. Web Transactions. Work Panels. Web Panels. PROPIEDADES: Host Define el nombre del host.

String AddString(<Value>) Agrega el contenido del string al buffer de datos a enviar. <Value>) Agrega un header con el valor dado.<Value>) Ejemplo: AddVariable(“CliCod”. AddVariable(<Name>.String <Value>.BaseURL Indica la URL base de los request que se hagan al host. ProxyHost y ProxyPort Permiten especificar un proxy http.String ErrCode Retorna si ocurrió algún error en algún comando.String StatusCode Retorna el código de error HTTP.String . Tipo. Tipo. Basic=0 : Para autentificar se envía el usuario y password sin encriptar. &CliCod) <Name>. Ejemplo: AddHeader(“User-Agent”. en cuyo caso retorna un valor distinto de cero. <Value>. Digest=1: Para autentificar se envía el usuario y password encriptados. Tipo. <Value>.String Agrega una variable al ‘form’.String Basic y Digest Son constantes que determinan un tipo de autenticación. Tipo.Integer MÉTODOS AddHeader(<Name>.String ProxyPort.Integer ErrDescription Retorna el mensaje del error si ocurrió alguno en algún comando. En ambiente windows se utiliza automáticamente el que esta configurado en la máquina. Se utilizan en el método AddAuthentication.String AddFile(<Value>) Agrega el contenido del archivo al buffer de datos a enviar. ProxyHost.String <Value>. Tipo. “GeneXus”) <Name>.Integer ReasonLine Retorna el texto del error HTTP.

Puede instanciarse solo en el contexto de un WebProc.String GetHeader(<Name>. si es 0.<Value>) Retorna en <Value> el valor del header convertido al tipo de la variable.String HttpRequest Este objeto permite leer el request http. Tipo. <User>.String <URL>. <FileName>.String ToString() Retorna un String con todo el ‘cuerpo’ del response. <Name>.String <User>. Tipo. "/servlet/awebproc") <Method>. PROPIEDADES Method Retorna el método HTTP.Execute(<Method>.String <Value>.Integer ScriptPath Retorna la porción de URL correspondiente el nombre del directorio virtual. Se pondría solo la parte final de la URL Ejemplo: execute("POST".String Retorna el nombre del servidor Tipo.Integer (Pueden utilizarse las propiedades Basic y Digest) <Realm>.Anytype AddAuthentication(<Method>.String ServerPort Retorna el puerto en el servidor Tipo. <Password>) Se autentifica con <User> y <Password> al dominio <Realm> utilizando el tipo de autenticación <Method> <Method>. <Realm>. ToFile(<FileName>) Graba en un archivo el contenido del stream. ServerHost .Integer Secure Indica si se esta utilizando HTTPS. se esta utilizando http.<URL>) Ejecuta un método en la URL definida.String <Password>. se esta utilizando HTTPS. Si el valor retornado es 1.

. Puede instanciarse solo en el contexto de un WebProc.String ErrCode Retorna si ocurrió algún error en algún comando. Tipo. en cuyo caso retorna un valor distinto de cero. Tipo.String ToString() Retorna un String con todo el ‘cuerpo’ del request. o sea los parámetros.Integer ErrDescrption Retorna el menaje del error si ocurrió alguno en algún comando.String HttpResponse Este objeto permite escribir el response http.String MÉTODOS GetVariable(<Variable>) Retorna en un String el valor con el que viene cargada la <Variable> en el post. ToFile(<FileName>) Graba en un archivo el contenido del stream. tal como aparece en la URL Tipo.String Referrer Retorna la URL del llamador Tipo-String QueryString Retorna la porción de la URL que está después del signo “?”. <Header>. Tipo. <FileName>.String ScriptName Retorna el nombre del objeto con la extensión correspondiente que se esta ejecutando.String RemoteAddress Devuelve la dirección del cliente.String GetHeader(<Header>) Retorna un String con el valor del header <Header>.Tipo. Tipo. <Variable>.

XMLReader. <Value>. en cuyo caso retorna un valor distinto de cero.String Interacción con XML Estos objetos permiten la interacción con los objetos XMLReader y XMLWriter.String AddFile(<Value>) Agrega el contenido del archivo al buffer de datos a enviar. Tipo. <Value>.<Value>) Agrega un header con el valor dado. . Ejemplo: AddHeader(“User-Agent”.openResponse(HttpClient) Se utiliza en cualquier objeto para leer como XML lo que devolvió un request.String AddString(<Value>) Agrega el contenido del string al buffer de datos a enviar.String METODOS AddHeader(<Name>.PROPIEDADES ErrCode Retorna si ocurrió algún error en algún comando. Tipo.openRequest(HttpClient) Se utiliza para enviar un XML en el body de un http request.openRequest(HttpRequest) Se utiliza en un WebProc para leer un xml que viene en el body del http request.String <Value>. XMLWriter. Para ello existen los siguientes métodos: XMLReader. “GeneXus”) <Name>.Integer ErrDescrption Retorna el menaje del error si ocurrió alguno en algún comando.

con los valores de ‘A’ y ‘B’ modificados.host = "localhost" &client.port = 88 // Agrego el XML al request . El XML a enviar tiene la forma <parameters> <a>valor</a> <b>valor</b> </parameters> El XML que se devuelve es igual.openResponse(HttpResponse) Se utiliza en un WebProc para escribir un xml que se retornara en el body del http response. pasándole parámetros en un XML y recibiendo los mismos también en un XML. El programa ‘cliente’ sería: &Client de tipo HttpClient &Writer de tipo XMLWriter &Reader de tipo XMLReader // Determino el host y el puerto a donde hacer el request &client.XMLWriter. Ejemplo Este ejemplo muestra como un objeto GeneXus llama a otro vía http.

"/servlet/awebproc") // Leo el XML que devuelve y lo cargo en las variables internas &reader.&writer. &B) &writer.close() El programa ‘servidor’ seria el siguiente WebProc: &Request de tipo HttpRequest .openRequest(&client) &writer.WriteElement("a".value) &reader.WriteEndElement() &writer.WriteStartElement("parameters") &writer.value) &reader.WriteElement("b".execute("POST".read() &b = val(&reader.read() &a = val(&reader.read() &reader.close() // Hago el POST al webproc &client.openResponse(&client) &reader. &A) &writer.

value) &reader.read() &a = val(&reader.WriteElement("b". &A) &writer.close() // Le sumo uno a cada valor &a = &a + 1 &b = &b + 1 // Grabo los parámetros en el response &writer.close() .openRequest(&Request) &reader.WriteStartElement("parameters") &writer.&Response de tipo HttpResponse &Writer de tipo XMLWriter &Reader de tipo XMLReader // Leo los parámetros del XML &reader.openResponse(&Response) &writer.WriteElement("a". &B) &writer.read() &reader.value) &reader.read() &b = val(&reader.WriteEndElement() &writer.

Con formato: Numeración y viñetas  Con formato: Numeración y viñetas ACCESO AL HEADER DE UN OBJETO WEB Alcance Objetos: Web Panels. Visual Basic. En caso de que se ejecute en otra plataforma.proxyHost=your. Transacciones Lenguajes: C/SQL. No esta implementado para otros tipos de contenido (por ej.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.com -Dhttp. la aplicación obtendrá automáticamente la configuración del proxy http y la lista de hosts para los que no se debe utilizar el proxy. y C/Sql el tipo de datos HTTPClient permite manipular solamente URLs cuyo Response tenga contenido de tipo texto. .Consideraciones para el generador Java En el caso de que se ejecute el motor de servlet en Windows. En los generadores Visual Basic. Visual FoxPro.proxy.Net Interfaz: Web Introducción . imágenes). por ej: java -Dhttp. es necesario especificar el proxy como una ‘System Property’ desde la línea de comandos del intérprete. Java.

se implementaron una serie de propiedades y métodos del Form: Form. Dicha información se debe agregar en forma de Tag. Se puede agregar información en el Header. Esto posibilita agregar información descriptiva. como es el caso de JavaScript. para ser referenciado por buscadores. Los Tags HTML que GeneXus permite agregar son: <meta name=X content=Y/> <meta http-equiv=X content=Y/> <script language="JavaScript" src="Y”> Además permite introducir código libre directamente en el <head> </head> Para poder trabajar con estos Tag.Se introducen controles. agregar referencias a JavaScript para dar dinamismo a la aplicación o todo aquello que se pueda definir entre los TAgs <Head></Head> para aprovechar al máximo las características del HTML. entre otras cosas. Los métodos correspondientes son: AddItem . con métodos y propiedades para manejar TAG en el header de un objeto Web. que puede servir. que puede utilizarse para ser referenciado por buscadores. o simplemente para agregar funcionalidades a la página.Meta Esta propiedad permite trabajar con los TAG de la forma <meta name=X content=Y/>. Descripción Se denomina Header de un objeto WEB a código HTML definido entre los TAGS <HEAD> </HEAD>.

<content>) Donde <name>. a partir del valor X. RemoveItem Permite eliminar un TAG <meta name=X content=Y/>. Sintaxis: Form.AddItem(<name>. a partir de los valores X e Y pasados por parámetros Sintaxis: Form.Permite agregar un TAG <meta name=X content=Y/>.Meta.Text(<indice>) .NET”> Para indicar con que generador fue creado el objeto.Meta. <content> : Character Por ejemplo GeneXus agrega por defecto al form el Tag: <meta name="Generator" content="GeneXus . Sintaxis: Form.Meta.Remove(<name>) Donde <name> : Character Text Retorna el valor correspondiente al name del TAG referenciado.

Meta.Count Valor de Retorno: Numérico Clear Elimina todos los TAG de la forma correspondiente Sintaxis: Form.Clear() .Meta.Donde: <Indice> : Numérico que representa el número de Tag Meta en el Form Valor de retorno: Character Value Retorna el valor correspondiente al content del TAG referenciado. Sintaxis: Form.Meta. que representa el número de Tag Meta en el Form Valor de retorno: Character Count Retorna la cantidad de TAG de la forma correspondiente Sintaxis: Form.Value(<indice>) Donde: <Indice> : Numérico.

MetaEquiv. <content> : Character RemoveItem Permite eliminar un TAG <meta http-equiv=X content=Y/>. Los métodos correspondientes son: AddItem Permite agregar un TAG <meta http-equiv=X content=Y/>.MetaEquiv.MetaEquiv Esta propiedad permite trabajar con los TAG de la forma <meta http-equiv=X content=Y/>. Sintaxis: Form.AddItem(<name>. a partir del valor X.Form. a partir de los valores X e Y pasados por parámetros Sintaxis: Form.<content>) Donde <name>.Remove(<name>) Donde <name> : Character .

que representa el número de Tag MetaEquiv en el Form Valor de retorno: Character Value Retorna el valor correspondiente al content del TAG referenciado.Text(<indice>) Donde: <Indice> : Numérico.MetaEquiv. Sintaxis: Form. Sintaxis: Form. que representa el número de Tag MetaEquiv en el Form Valor de retorno: Character Count Retorna la cantidad de TAG de la forma correspondiente Sintaxis: Form.Value(<indice>) Donde: <Indice> : Numérico.Text Retorna el valor correspondiente al name del TAG referenciado.MetaEquiv.Count .MetaEquiv.

Clear() Form.Valor de Retorno: Numérico Clear Elimina todos los TAG de la forma correspondiente Sintaxis: Form.Meta. Sintaxis: Form.JScriptSrc.js”) Clear Elimina todas las instancias del TAG .Add(<src>) Donde: <src> :Carácter. de la forma <script language="JavaScript" src="Y”> Los métodos correspondientes son: Add Agrega un TAG de la forma antes descrita.JScriptSrc Permite referenciar fuentes con código JavaScript que se deseen incluir en el Header de la página generada. nombre del arcjivo js con el JavaScript definido (ej: “ValidarFecha.

Clear() Item Retorna el elemento correspondiente al src del tag referenciado Sintaxis: Form.Sintaxis: Form. que representa el número de Tag JScriptSrc en el Form Valor de Retorno: Character Count Retorna la cantidad de TAG de la forma correspondiente Sintaxis: Form.Count Valor de Retorno: Númerico Form.JScriptSrc.JScriptSrc.HeaderRawHTML Esta propiedad del form permite agregar texto libre en el Header (los Tag <head> </head>) .Item(<Indice>) Donde: <Indice>:Numérico.JScriptSrc.

Estas representan. 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.NET. de una forma simple. Visual Basic Interfaces: Web.HeaderRawHTML = <Texto> Donde: <Texto>: Character Consideraciones  GeneXus agrega por defecto en los objetos web los tags Generator. Work Panels. . Descripción Los SDT tienen múltiples usos posibles: . Win Introducción El objeto GeneXus Structured Data Type (SDT). Web Panels. Procedures.Sintaxis: Form. datos cuya estructura está compuesta por varios elementos. Esto facilita y potencia la programación. Reports Lenguajes: Java. permite definir estructuras de datos. Version y Description de tipo Meta Name.

por lo tanto no pueden existir dos elementos con el mismo nombre.Documentación : documentación del objeto. ELEMENTOS SIMPLES En el diseño de un SDT. cada nivel puede tener uno o más elementos (o ítems). Podemos clasificarlos en elementos simples o elementos compuestos (por otros elemento).) Dominios otro SDT ya definido. etc. La propiedad Collection indica si el elemento tiene o no múltiples instancias (puede repetirse). al definir un elemento. Como todos los objetos GeneXus. y son aquellos que definen un nuevo agrupamiento de elementos (una nueva colección o un agrupamiento de elementos simples). . en cualquier objeto. Tiene dos valores posibles. en el editor. semejante a la de las transacciones. basados en un objeto estructurado (SDT) o una estructura definida en el.facilitan el pasaje de parámetros (en particular permite proveer/consumir información estructurada en el uso de webservices) . . . True o False ELEMENTOS COMPUESTOS Se identifican con un bullet de color. En Edición el objeto tiene dos secciones . se debe especificar la propiedad Name que identifica al elemento. date. Detallamos algunos de los posibles casos de uso. Estructura La estructura puede ser multinivel.permite el manejo de listas de largo variables de elementos.permite mejorar la legibilidad del código. La propiedad Data type permite seleccionar entre los siguientes tipos de datos : Tipos básicos de GeneXus (numérico.Estructura : aquí mediante un editor es posible definir la estructura del objeto. . - Se podrán definir variables. también tiene asociado un conjunto de propiedades y métodos.simplifican la lectura y escritura automática de XML (con funciones de alto nivel).

esto significa que se crearan dos tipos de datos uno con el “Name” (nombre del SDT) y otro con Name.ItemName. Hay una excepción en el caso de un SDT que sea colección de tipo simple. por lo tanto no es posible definir un SDT con el nombre de otro objeto. La sintáxis 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). caracteres siguientes al primero válidos. etc. para el caso de Webservices.Add( New Client()) . o sea una nueva referencia al tipo de datos que se especifica. Documentación Permite escribir un texto descriptivo del objeto. pero no se habilita la propiedad data type.Tiene las mismas propiedades que los elementos simples. Propiedades del objeto El objeto SDT tiene un Name que lo identifica. La propiedad External Namespace es un string que representa el name space que aplica al External name (WSDL). Operadores NEW Este operador retorna una nueva instancia inicializada. será seleccionable como tipo de datos para la definición de variables. Por ejemplo A = New Client() o ClientList. El formato es el mismo de los objetos GeneXus en cuanto a caracteres válidos para inicio. Este nombre. calificado por el nombre del SDT. cantidad de caracteres. ver caso de uso 2. Este último es el nombre con el que se publica el tipo de datos en el WSDL. El valor por defecto es el nombre del modelo sustituyendo los caracteres no válidos.3 Se habilita la propiedad Item Name solo cuando el elemento compuesto define una Collection (propiedad Collection en True). Tiene un Description y un External Name. El valor por defecto es el de la propiedad Name.Esta propiedad indica el nombre de cada uno de sus elementos.

+ Space) es posible incluir un estructurado. Sintaxis: &a = &b. TOXML Retorna un string con el formato XML de los datos de la variable SDT. No tendrá valores sino los nodos correspondientes a su composición.ToXml() devuelve la representación XML del contenido de &b en la variable &a El XML resultante tiene la siguiente estructura:     La raíz del XML tiene el nombre de la estructura. En el caso de colecciones simples define un elemento item por cada campo Por ejemplo con un estructurado de país: el contenido del string resultado seria: <Pais xmlns = “name_Kb”> <Nombre>Uruguay</Nombre> <Idioma>Español</Idioma> <Coordenadas> <Latitud>30</Latitud > <Longitud>35</Longitud> </Coordenadas> . Un nodo para cada elemento simple.Desde la opción Insert/SDT (o con ctrl. Métodos Cualquier SDT tiene los métodos que se describen a continuación. Un nodo para cada elemento compuesto. El nombre del nodo será el valor de la propiedad Name de dicho elemento. El nombre del nodo será el valor de la propiedad Name de dicho elemento.

recibe como parámetro un string que tiene una estructura XML desde la cual se carga el SDT.a = y.clone() Siempre debe estra asignado a una variable.a z.clone()  Z = New SDT() z.add(var2. es necesario hacer un new o clone explicito .clone()) Método clone vs Operador New El método Clone equivale a new de una variable y la asignación de cada item de la misma o sea: Z = Y. Sintaxis: &b.<Ciudades> <item> Montevideo </item> <item> Paysandú </item> </Ciudades> FROMXML Es el opuesto del ToXML.b = y. En el caso de subestructuras dentro del SDT (colecciones o no) no se crea una nueva instancia de ésta con el método clone (la copia es shallow). la única excepción es dentro del comando Add &var1.FromXml( &a) carga la estructura &b a partir del contenido de la variable &a. frente al new.b Siendo a y b los elementos del estructurado SDT Notar que la asignación Z = Y simplemente redirecciona ambas variables al misma área de memoria y al modificar una estoy modificando la otra. La ventaja del método clone. es que realiza la copia automática de cada item del estructurado sin necesidad de hacer la asignación. CLONE Crea una nueva área de memoria y copia los datos de la variable en esta. Sintaxis: &var1 = &var2.

Position]) Agrega Item en la posición relativa Position de la collection. que no sean colecciones no esta habilitado el método clone. el programa cancela. No es válido asignar un valor con esta propiedad.Nombre = 'América' &Paises. La propiedad Count retorna la cantidad de elementos de la colección. Position comienza en 1. Los siguientes métodos solo aplican a SDT que sean colecciones :  Add( Item[. para cambiar un valor se debe remover (método remove) y agregar (método add) .por cada subestructura. Para que cada registro tenga distinto continente se debe programar con el operador new.Nombre = 'Africa' &Paises. En caso de especificar posición (de un item de colección ) mayor a la ultima.Continente.clone()) En ambos países el continente es Africa.Nombre = 'Uruguay' &Pais.item(&i) = Att. Por ejemplo. Si se omite Position o se especifica “0”.Add(&Pais. por lo tanto no es correcto el código &sdt. con el SDT Pais Nombre Char Continente Nombre Char &Pais.Nombre = 'Senegal' &Pais.Add(&Pais. En el caso de subestructuras “definidas” dentro del SDT.  Item( Position) Retorna una referencia al elemento con posición relativa Position en la collection.clone()) &Pais. Es read only. se agrega el Item al final de la collection. Collections Existen un conjunto de métodos y propiedades que solo aplican a colecciones de SDT.Continente.

por ejemplo: Parm(&sdt. PASAJE DE PARÁMETROS No es posible referenciar variables de tipo SDT en:   parámetro de Objetos Web parámetro de Objeto Main con Call protocol Command line Si bien no se controla.item) DISPARO DE RULES Se deben instanciar los elementos de una variable SDT. Remove( Position) Elimina el elemento en la posición relativa Position de la collection y corre un lugar todas las posiciones. se define un tipo de datos Ciudades y otro Ciudades. no es posible definir en la rule parm un item de una SDT.  IndexOf( Item) Retorna la posición relativa de Item en la collection. 0 (cero) si Item no esta en la collection.  Clear() Elimina todos los elementos de la collection. Puede resultar útil únicamente al momento de cargar la lista. Consideraciones DEFINICIÓN 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 colección de Ciudades. para poder disparar rules que dependen de dicha variable.Ciudad Las variables cuyo tipo sea una SDT no pueden ser vectores o matrices. IndexOf devolverá 0 (vacío) pues esa referencia no esta dentro de la lista. Esto implica que si por parámetro se recibe una variable con una lista de SDT y se carga una variable temporal con el contenido de un item. Tener en cuenta que este método trabaja con las referencias de los elementos y no con su contenido. 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: .

PaisNom La variable PaisNom tiene el valor ‘Brasil’. 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 colección de elementos.Nombre Load Endfor . es posible hacerlo con el comando for in array For &pais in &paises &paisCod = &pais.PaisNom = ‘Uruguay’ … &PaisAux = &Pais … &PaisAux. pues la dirección de la variable Pais y PaisAux es la misma luego de la asignación FORM No es posible incluir un SDT en el form o printblock de un objeto.PaisNom = ‘Brasil’ &PaisNom = &Pais. Por ejemplo en el código: &Pais. ASIGNACIÓN La asignación de una variable de tipo Structure a otra del mismo tipo implica un incremento en la cantidad de referencias a la estructura. una modificación a cualquier elemento de la estructura se verá reflejado en todas las variables que "apunten" a la estructura.- new en Evento Start o parámetro de Trn o parámetro en Call en el evento Start.Codigo &PaisNom = &pais. Hecha la asignación.

). ESPECIFICACIÓN Y GENERACIÓN No es posible especificarse/generarse directamente un SDT. etc. Data:%2. . esto permite sobrescribir o no las definiciones de los SDT de la knowledge Base consolidada.Count &Pais =&Paises. Esto evitará errores de generación si las variables no son utilizadas (esta parte corre por cuenta del desarrollador).. al exportar un objeto que usa un SDT. KNOWLEDGE MANAGER Si es posible exportar/consolidar un objeto SDT. Variable %1 definition is incorrect or not available. Internal error. Cobol. se exportan automáticamente los SDT llamados.Item(&I) . al especificar.O con el comando do while: Do while &I<= &Paises. La especificación/generación es implícita cuando se especifica un objeto que lo utiliza si el SDT cambió desde la última vez que fue especificado o se realiza una generación forzada. Si es posible modificar la estructura de un SDT y por ejemplo eliminar un elemento del mismo. Las variables definidas como estructuras son ignorada si la especificación es para lenguajes que no las soportan (RPG. En el diálogo de consolidación se agrega un nuevo valor “SDTs” a la opción “Do NOT overwrite”. &I=&I+1 Enddo INTEGRIDAD No es posible eliminar un SDT que esta siendo utilizado por otro objeto. aunque este siendo referenciado por otro objeto.. el mensaje: spc0056. Si se exporta un objeto que contiene variables que son estructuras a un modelo que no contiene la definición de dichas estructuras aparecerá.

. retornan un "Cliente" que es una estructura que tiene "Codigo" y "Nombre" que a su vez es otra estructura que tiene "PrimerNombre". Es por esta razón. en el caso de recibir datos complejos.LISTADOS Si es posible listar los objetos SDT desde List/Object. Ahora es posible acceder a estos datos con variables de tipo "Cliente" y modificar/acceder a sus "miembros" Al consumir un servicio. que GENEXUS incluye la posibilidad de desarrollar y consumir Web Services. Por ejemplo. este incluirá por lo tanto nuevas definiciones de SDT RECURSIVIDAD No son soportadas las definiciones recursivas. "SegundoNombre". etc. con el WSDL Inspector. El Data type de una elemento de una estructura no puede ser el mismo que se esta definiendo. o ver el arbol de llamadas desde List/Browser WEBSERVICES Los Web Services normalmente retornan valores en estructuras de datos. Comenzaremos con una introducción al concepto de Web Services para luego realizar ejercicios prácticos que permitan profundizar los conocimientos adquiridos. 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.

Al igual que los componentes. La arquitectura básica del modelo de web services describe a un consumidor.NET que está basada en el modelo de web services. por lo cual los consumidores de los web services pueden ser implementados en cualquier plataforma y en cualquier lenguaje de programación. Relacionados con estos agentes están las operaciones de publicar. incluso afirmándose que el mismo cambiaría la forma de programar las aplicaciones orientadas a Internet hacia una arquitectura orientada a servicios. Combinan los mejores aspectos del desarrollo basado en componentes y la Web. no son accedidos por medio de protocolos específicos del modelo de objetos como ser RMI. publicada. los web services son funcionalidades que se encuentran dentro de una caja negra. A diferencia de la actual tecnología de componentes. 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.WEB SERVICES Abstract En los últimos tiempos ha surgido con mucha fuerza el concepto de ‘web services’. ¿Qué es un web service? Un web service es una aplicación que puede ser descripta. La idea básica consiste en que un proveedor publica su servicios en un corredor. que pueden ser reutilizados sin preocuparse de cómo fueron implementados. sino que son accedidos utilizando protocolos web como ser HTTP y XML. un proveedor y ocasionalmente un corredor (broker). encontrar y enlazar. adicionalmente se provee una introducción de los estándares en los cuales se basa este modelo como ser SOAP. generalmente Internet. DCOM o IIOP. WSDL y UDDI. El modelo de web services. localizada e invocada a través de una red. . Este documento describe que son los web services y como es la arquitectura general del modelo. solo tiene que poder crear y consumir los mensajes definidos por la interface de los web services. Todo esto se ha visto potenciado luego del anuncio de Microsoft de su nueva estrategia . La interface de los web services esta definida en términos de los mensajes que el mismo acepta y retorna.

XML es la opción obvia para este requerimiento. 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 estándar de representar los datos. Más adelante en este documento lo veremos con más detalle. Como los web services pueden ser implementados en cualquier lenguaje. SOAP es un protocolo liviano para el intercambio de información. Se verá con más detalle mas adelante en este documento. los desarrolladores no necesitan cambiar sus ambientes de desarrollo para producir o consumir web services. Lo veremos con más detalle mas adelante en este documento. Un formato común y extensible de mensajes.  Un lenguaje común y extensible para describir los servicios. el mismo especifica un mecanismo para publicar y localizar los servicios por parte de los proveedores y consumidores respectivamente. La opción en este caso es WSDL.  Ubicuidad: .  Una forma de descubrir los servicios en Internet. SOAP es el elegido en este caso. Estos son algunos puntos para fundamentar esta afirmación:  Interoperabilidad: Cualquier web service puede interactuar con otro web service. UDDI se utiliza en este caso. Los web services apuntan a ser la piedra fundamental de la nueva generación de sistemas distribuidos. Es un lenguaje basado en XML desarrollado en forma conjunta por IBM y Microsoft. Ventajas y retos.Cada entidad puede jugar alguno o todos los roles.

¿Cómo autentifica a los usuarios un web service? ¿Lo hace a nivel del método que lo implementa o utiliza otro web service para realizar la autenticación?  Responsabilidad En caso de que el web service no sea de acceso libre. A la vez hay ciertos retos técnicos que los web services tienen que sortear para poder tener éxito.NET esta basada en web services.  Confiabilidad: Algunos web services son más confiables que otros. Muy pronto estarán presentes en teléfonos. Lo importante es la interface que el servicio provee y no como esta implementado. ¿Cómo puedo definir cuantas veces un consumidor puede acceder al web service una vez contratado? ¿Cómo se cobra su uso? ¿Cómo se indica que un servicio ya no esta más en línea? .Los web services se comunican utilizando HTTP y XML. Por ejemplo la nueva plataforma de Microsoft . Por lo tanto cualquier dispositivo que soporte estas tecnologías pueden implementar o acceder web services. 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 estándares que manejan este punto.  Fácil de utilizar: El concepto detrás de los web services es fácil de entender.  Soporte de la Industria: Todos las empresas de software importantes soportan SOAP. incluso existen toolkits de vendedores como IBM o Microsoft que permiten a los desarrolladores crear web services en forma rápida y fácil. las que avisarán a la central cuando el stock sea menor al indicado. haciendo muy simple el desarrollo de los mismos que luego podrían ser consumidos por un web service desarrollado utilizando VisualAge de IBM y viceversa. ¿Cómo 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 restricción. e incluso están impulsando el desarrollo de web services. Muchos de estos retos están relacionados con el ambiente abierto en el que tienen que sobrevivir.  Encapsular reduce la comlejidad Todos los componentes en un modelo de web services son web service. por lo cual la complejidad se reduce. autos e incluso máquinas expendedoras. pero muchos otros van a necesitar autenticación para que los utilicen solo los usuarios autorizados.

.

mientras que el cuerpo SOAP contiene el método llamado y los parámetros con los que se llama al mismo. Por lo tanto se utiliza HTTP para transportar la información. Es el protocolo más utilizado para realizar el intercambio de información en el modelo de web services. Request Cliente Response Servidor Todo esto es un modelo de mensajes request/response con una forma de describir un conjunto de métodos y pasarle a los mismos parámetros.org/TR/soap EL MODELO DE COMUNICACIÓN DE SOAP El modelo de comunicación de SOAP es muy similar al de HTTP. El potencial es entregar esto sobre Internet utilizando HTTP para realizar comunicaciones entre organizaciones permitiendo realizar . Esta basado en XML y potencialmente puede ser utilizado en combinación con una variedad de protocolos de comunicación. un cabezal SOAP opcional y un cuerpo SOAP obligatorio como un documento XML. SOAP (Simple Object Access Protocol) SOAP es un protocolo para el intercambio de información en un ambiente descentralizado y distribuido. El protocolo completo se puede encontrar en http://www. El mensaje SOAP consiste en un elemento envelope SOAP obligatorio.w3.Tecnologías asociadas El modelo de web services está basado en ciertas tecnologías emergente que es el resultado del trabajo de varias compañías y organizaciones entre las cuales se destacan IBM y Microsoft. Estas tecnologías son SOAP. WSDL y UUDI. y XML para representar la misma. el servidor que esta escuchando los requerimientos lo atiene y responde (response) brindando la información solicitada o enviando un mensaje de error en caso de que el requerimiento no haya sido válido. siendo el más utilizado HTTP. Esto parece la base del protocolo RPC y de hecho es el uso más común de SOAP. Un cliente hace un requerimiento (request). El cabezal SOAP es utilizado para definir información acerca del requerimiento.

A continuación se muestra un mensaje SOAP embebido en un request HTTP: POST /StockQuote HTTP/1. Este es la respuesta al requerimiento anterior.org/soap/envelope/" SOAP-ENV:encodingStyle="http://schemas. charset="utf-8" Content-Length: nnnn SOAPAction: "Some-URI" <SOAP-ENV:Envelope xmlns:SOAP-ENV="http://schemas.org/soap/envelope/" SOAP-ENV:encodingStyle="http://schemas.1 200 OK Content-Type: text/xml.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 método GetLastTradePrice con el símbolo DIS por parámetro.xmlsoap.org/soap/encoding/"/> <SOAP-ENV:Body> <m:GetLastTradePriceResponse xmlns:m="Some-URI"> <Price>34.xmlsoap.stockquoteserver. sistema operativo y lenguaje de programación.comunicaciones entre aplicaciones con diferente plataforma.xmlsoap. el cual retorna el precio de la acción solicitada: HTTP/1.5</Price> </m:GetLastTradePriceResponse> </SOAP-ENV:Body> .xmlsoap. charset="utf-8" Content-Length: nnnn <SOAP-ENV:Envelope xmlns:SOAP-ENV="http://schemas.com Content-Type: text/xml.1 Host: www.

de los mensajes SOAP que espera y responde el servicio. Es el documento principal a lo hora de documentar un Web Services. en el cual el proveedor se compromete a brindar ciertos servicios solo si el cliente envía un requerimiento con determinado formato. Message: Define los datos que contienen los mensajes pasados de un punto a otro. muestra cómo accederlos y que formatos deben de tener los mensajes que se envían y se reciben. .Si usted quedo asustado por la aparente complejidad del protocolo SOAP pensando lo engorroso que sería armar los mensajes de requerimiento y parsear los mensajes de respuesta despreocúpese. pero puede no ser el único. por ejemplo. En forma resumida podríamos decir que un archivo WSDL describe lo siguiente:    Mensajes que el servicio espera y mensajes que el servicio responde. FORMATO DE UN ARCHIVO WSDL: A continuación se muestra como es el formato básico de un archivo WSDL. Protocolos que el servicio soporta. la mayoría de los lenguajes de programación proveen o proveerán soporte para realizar esto.org/TR/wsdl. WSDL: Web Services Description Language WSDL es un lenguaje basado en XML que se utiliza para describir un Web Services.w3. La especificación completa de este lenguaje se puede encontrar en http://www. En la mayoría de los casos es conveniente que este acompañado por un documento escrito en lenguaje natural que brinde información de que es lo que hace cada uno de los métodos brindados por el Web Services así como también ejemplos. A donde mandar los mensajes.html Un archivo con formato WSDL básicamente contiene los siguientes elementos: Type: Describe los tipos no estándar usados por los mensajes (Message). lo manda y parsea el resultado adjudicándoselo a alguna variable en forma trasparente para el usuario como si hubiera hecho un call común. La idea fundamental consiste en utilizar algún objeto al cual se le brinda un WSDL y se le indica que método se quiere llamar y con que parámetros. Esto arma en tiempo de ejecución el mensaje SOAP. Ha sido suministrado por la W3C por estandarización. Es como un contrato entre el proveedor del servicio y el cliente. Un archivo con formato WSDL provee información de los distintos métodos (operaciones) que el Web Services brinda.

El siguiente es un ejemplo de archivo WSDL: El mismo define dos mensajes (Simple. luego define un método llamado “foo” el cual recibe el mensaje Simple. Port: Define una dirección (URL) para un determinado Binding Service: Define una colección de Ports. actualmente los protocolos soportados son SOAP. . HTTP POST y MIME. Binding: Describe los protocolos que se utilizan para llevar a cabo la comunicación en un determinado PortType.foo y Simple.fooResponse. A continuación se define un binding para el método foo asociándolo con el protocolo SOAP.foo y retorna el mensaje Simple. Cada operación tiene un mensaje de entrada y uno de salida que se corresponde con algún Message antes definido.PortType: Define una colección de operaciones brindadas por el servicio. Por último se da una URL física que implementa lo antes descrito.fooResponse). HTTP GET. siendo SOAP el más utilizado.

org/xsd xmlns:xsd=http://www. Esta división lógica divide los elementos de la siguiente forma: Interface del servicio: Type.org/wsdl/soap/ xmlns:stk=http://schemas.org/wsdl/"> <message name="Simple. . y la implementación del mismo.org/wsdl/ xmlns:wsdlns=http://tempuri.org/2001/XMLSchema xmlns:soap=http://schemas.org/wsdl/ xmlns:typens=http://tempuri. Message.w3.fooResponse"> <part name="result" type="xsd:int"/> </message> <portType name="SimplePortType"> INTERFASE E IMPLEMENTACIÓN La estructura básica de archivo con formato WSDL podría ser dividido en dos partes lógicas: la interfase del servicio.com/soaptoolkit/wsdl-extension xmlns="http://schemas.<?xml version="1. Binding.xmlsoap.foo"> <part name="arg" type="xsd:int"/> </message> <message name="Simple.0" encoding="UTF-8" ?> <definitions name="FooSample" targetNamespace=http://tempuri. PortType.xmlsoap.microsoft.

EL ESQUEMA UDDI El modelo de información base utilizado por los registros UDDI es definido en un esquema XML. y físicamente distribuido a través de múltiples nodos los cuales replican su información en forma regular. A partir de esta división lógica se puede definir por medio de una Interfase del servicio una estándar para realizar. un servicio lógicamente centralizado. ordenes de compras que puede ser reutilizada e implementada por todas las empresas. UDDI (www. Contiene una implementación de una determinada Interface del servicio. UDDI (Universal Description. Si al igual que con SOAP se siente preocupado por la complejidad de los archivos WSDL de nuevo despreocúpese. Este esquema define cuatro tipos básicos de información. Una vez que una empresa se registra en un determinado nodo del registro de empresas UDDI la información es replicada a los otros nodos y queda disponible para ser descubierta por otras empresas. Discovery and Integration). sin tener que redefinir cada una de ellas la interfase. Microsoft e IBM. Service. La información es ingresada al registro de empresas UDDI. La idea es que las distintas empresas registran su información acerca de los web services que proveen para que puedan ser descubiertas y utilizadas por potenciales usuarios.uddi. por ejemplo.org) es un proyecto inicialmente propuesto por Ariba. . es un estándar para registrar y descubrir web services. Los cuatro tipos de información son:  Información del negocio.Contiene una definición abstracta y reusable del servicio que puede ser instanciada y referenciada por distintos proveedores del mismo. Implementación del servicio: Port. cada uno de los cuales proveen la clase de información que un usuario necesita saber para utilizar un web service de otra empresa. la mayoría de los lenguajes de programación proveen o proveerán herramientas para generar en forma automática el archivo WSDL a partir de un determinado método o función.

Este tipo de información esta definido en el elemento businessEntity. como ser su nombre.  Información sobre las especificaciones del servicio.org/pubs/ProgrammersAPI_v2. Cada uno de ellos brinda una dirección fisica para hacer contacto con los servicios descriptos anteriormente.uddi. ya sea para realizar búsquedas o para ingresar o modificar un registro. como tienen que ser los mensajes que el servicio espera y responde. se puede realizar a través de una página web que . etc. Dentro de cada elemento businessServices se encuentran los elementos bindingTemplate. etc.pdf API UDDI El acceso al registro UDDI. por ejemplo. el tipo de empresa. Contiene información de la empresa. estos elementos contienen información sobre web services generalmente agrupados por procesos de negocio o categorías de servicios.  Información del enlace (binding). el cual brinda informacíon sobre las especificaciones del servicio. Utilizando entonces los tModels se pueden encontrar todas las empresas que brindan tal servicio. los contactos. Cada bindingTemplate tiene asociado un tModel. Un tModel puede ser asociado con elementos bindingTemplate de distintas empresas que brindan la misma especificaión del servicio. Dentro del elemento businnessEntity se encuentran los elementos businessServices.  Información del servicio. businessEntity tModel businnessEntity bindingTemplate Por más información sobre el esquema UDDI: http://www.

org/pubs/ProgrammersAPI_v2. la API de consultas y la API de publicación. Estas interfaces están descriptas en una API.implemente el acceso o utilizando ciertas interfaces (web services) que provee la especificación de UDDI. Por más información sobre la API UDDI: http://www.uddi.pdf . que puede ser dividida en dos partes lógicas.

southwest. XML Introducción Hoy en día. sino que los mismos pueden ser descubiertos y utilizados por cualquier empresa que los necesite.Un ejemplo Las formas en que se puede realizar negocios utilizando web services es muy variada. a ambos le sirve este intercambio ya que la compañía de aviones le brinda un valor agregado a sus clientes. estas empresas no publicaron sus servicios para que fueran exclusivamente utilizados por la compañía aérea. etc). Este es un ejemplo de uso de web services en el cual ni el consumidor ni los proveedores pagan. para poder brindar estos servicios a los usuarios. o incluso existen casos en los cuales ni el consumidor ni el proveedor pagan por consumir o proveer los servicios en forma respectiva. esta compañía aérea permite hacer reservas de boletos. y la ventaja que tendrán las empresas que los sepan utilizar en forma adecuada con respecto a las otras. han provocado la definición de un formato de datos universal: XML. La necesidad de generar grandes cantidades de datos dinámicos y complejos por un lado y la necesidad de procesarlos y publicarlos por otro. o el proveedor podría pagar para que aparezcan los servicios que él ofrece en un determinado consumidor. ¿por cual haría la reserva? Por otro lado imagine que usted es dueño de una rentadora de autos y sabe que su competencia esta brindando sus servicios en un portal de una compañía aérea y usted no. pero además como valor agregado a los clientes permite hacer reservas de hoteles y reservas de alquileres de autos. y otra que no. ingresarla en una aplicación. Los datos para poder realizar estas reservas están tomados de web services que brindan los distintos hoteles y rentadoras de autos. Es más. los diseñadores y los programadores web deben combinar los datos y la presentación en un documento HTML. Claramente se muestra en este ejemplo el gran poder de los web services. se pueden encontrar muchísimos sitios web que brindan servicios on-line como por ejemplo reservas de asientos para espectáculos. El ejemplo es tomado de la vida real y es sobre la compañía aérea Southwest. El consumidor podría pagar por utilizar los servicios brindados por un proveedor. Muchas veces el proveedor de determinada información no es quien la va a “procesar” (sea esto publicarla en un sitio. reportes meteorológicos. Este es el caso que se presenta a continuación. etc. aviones. Imagínese en este caso si usted fuera a reservar boletos de avión y pudiera elegir por una compañía que además de reservar los boletos le permitiera hacer la reserva de hotel. .. En su portal http://www.com/ . y los hoteles y rentadoras de autos están expuestos a ser contratos por potenciales clientes. ¿qué haría?.

A continuación se visualiza un ejemplo de un documento XML: <weather-report> <date>March 25. Los atributos son usados para adjuntar información secundaria a los elementos. El lenguaje XML está compuesto por etiquetas que describen el contenido del documento. Este lenguaje debe poder ser interpretado tanto por computadoras como por seres humanos. Si una aplicación en el servidor del servicio meteorológico graba un documento XML con el reporte del tiempo y luego otro sitio web puede leer dicho documento. Un elemento XML queda definido por una etiqueta de comienzo y otra de fin con el valor del elemento entre ambas etiquetas. 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> .Descripción La idea principal detrás de XML es el desarrollo de un lenguaje estándar de etiquetas (similar a HTML) para describir datos en forma estructurada. se puede publicar el estado del tiempo en forma automática. Los elementos pueden estar anidados y además pueden contener en forma opcional. sin necesidad de ingresarlo dentro de la aplicación del sitio web cada día o convertir la información recibida. uno o más atributos.

Así. XMLReader. En GeneXus. hay una diferencia muy importante: en un documento XML no hay información acerca de cómo deben ser presentados los datos. 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. . se cuenta con funciones para el manejo de XML : XMLWriter. de forma que la información correspondiente al área estuviese representada por atributos. Resumiendo. pero el mismo podría redefinirse. como HTML provee etiquetas específicas para formatear un documento. XML provee un marco para crear etiquetas. como se representa a continuación: <weather-report city=Montevideo country=Uruguay> <date>March 25. XML es un lenguaje estándar definido por el Consorcio World Wide Web para permitir grabar y leer datos en forma estructurada con formato estándar independiente de aplicaciones y vendedores.</weather-report> El ejemplo anterior está compuesto únicamente por elementos XML.

realizar el procesamiento que el mensaje requiera. siendo HTTP el más utilizado.Visual Basic – .Visual Basic – Visual FoxPro – . para invocar procedimientos en forma remota (Remote Procedure Call). Cualquier aplicación que cumpla la especificación puede invocar y proveer servicios sin importar en que lenguaje o plataforma esté implementado.PROTOCOLO SOAP Introducción SOAP es un protocolo “liviano” basado en XML. y devolver otro mensaje SOAP con la respuesta.Java . En las aplicaciones generadas por GeneXus se utiliza SOAP para invocar a objetos en forma remota.Net Interfaces: Web . lo único necesario es que la aplicación sea capaz de interpretar el mensaje SOAP que recibe. Alcance Objetos llamadores (Clientes) Objetos: Todos los objetos Lenguajes: C/SQL . Utiliza cualquier protocolo que permita transportar mensajes de texto. Su especificación describe el contenido que debe tener un mensaje XML para ser usado en una invocación remota.Net Interfaces: Win/Web Los objetos llamadores son los que invocan servicios mediante SOAP Objetos llamados (Servidores) Objetos: Procedimientos y Reportes Lenguajes: C/SQL . usando HTTP como protocolo de transporte.Java .

hacer la invocación http. Todo esto se realiza en forma automática y transparente para el usuario. Cliente Los objetos que van a invocar al servicio web. Locations Para indicar cual va a ser la ubicación de los servicios invocados se utiliza un esquema conocido como Locations. Manejo de errores . La invocación se hace con el comando call() de GeneXus. funcionalidad que no estaba permitida en versiones anteriores. y generan otro mensaje SOAP de respuesta (eventualmente con los parámetros modificados). obteniendo los parametros modificados en forma automática.Los objetos llamados son los brindan un servicio invocado mediante SOAP Descripción Algunas de las ventajas de utilizar este protocolo en aplicaciones GeneXus son la posibilidad de desarrollar servicios web. a los que llamaremos ‘Clientes’. pueden ser cualquier objeto GeneXus. o desde C/Sql a Visual Basic). Nos referiremos en adelante a dichos objetos como ‘Servidores’ o ‘Servicios web’. Solo pueden ser reportes o procedimientos. realizan la acción requerida. sin ningún tipo de interfaz con el usuario. 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”. Se requiere un servidor Web que haga el hosting de los servicios a ser invocados. procesan el mensaje SOAP que envía el Cliente con sus parámetros. asi como el poder hacer invocaciones entre objetos de diferentes generadores (por ej. y desensamblar la respuesta. excepto llamadas RPC desde los generadores visuales a los generadores CSql/Cobol/RPG. Los programas Servidores reciben la invocación http. Los programas Clientes realizan las tareas necesarias para ensamblar el mensaje SOAP. llamar desde Visual Basic a Java.

De tener valor ‘No’. Códigos de error en el cliente . es posible indicar que se detenga la ejecución 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’.Comportamiento frente a un error Si al hacer un llamado SOAP desde un objeto GeneXus se produce un error. Si el objeto llamado es un procedimiento o reporte GeneXus. la ejecución no se cancelará y se podrá obtener el código numérico de error con la función GetSOAPErr(). El valor por defecto es ‘Yes’. y el mensaje de error mediante la función GetSOAPErrMsg(). normalmente la ejecución del llamador se cancelará mostrando el error que ocurrió.

El código de error indica la posición del parámetro que ocasionó el conflicto.   Códigos de error en el servidor Un procedimiento o reporte GeneXus que es llamado mediante SOAP puede retornar alguno de los siguientes códigos de error: . getSOAPErrMsg() retornará una descripción del error. De todas formas.Los posibles códigos de error que pueden ser retornados mediante la función GetSOAPErr() son los siguientes:   0: Operación completada con éxito.   -20004: El servidor retornó que hay un error en el pedido SOAP realizado por el cliente. Mayor que 0 y menor que 10000: Algún parámetro retornado por el servidor no tiene el nombre esperado. En este caso getSOAPErrMsg() retornará un mensaje conteniendo el código y el mensaje de error retornados por el servidor. Menor que 0 y mayor que -10000: Sucedió un error al interpretar el XML de respuesta.   Menor que -10000: Sucedió un error en la comunicación HTTP. Sucederá por lo general si la respuesta no es XML o no es XML bien formado. Si se toma el valor absoluto del código de error y se le resta 10000 el resultado corresponderá a un código de error del objeto HTTPClient. retornará alguno de los códigos de error descriptos más abajo. Si el servidor es un procedimiento o reporte GeneXus. -20001: La respuesta recibida es un XML válido pero no es un mensaje SOAP válido. getSOAPErrMsg() retornará una descripción del error. Sucede cuando se llama a la función GetLocation(Nombre) con un nombre de location que no está definido para ningún objeto en la KB. -20006: Sucedió un error no identificado. -20007: Nombre de location no válido. En este caso getSOAPErrMsg() retornará un mensaje conteniendo el código y el mensaje de error retornados por el servidor. De todas formas. Si se toma el valor absoluto del código de error el resultado corresponderá a un código de error del objeto XMLReader.

la invocación se resuelve haciendo un call() al Web Service. Por la naturaleza del protocolo SOAP los programas generados con GeneXus pueden ser invocados por cualquier cliente SOAP. Los objetos Cliente y Servidor pueden estar generados con diferentes generadores. -20001: El mensaje recibido es un XML válido pero no es un mensaje SOAP válido (igual que en el cliente). La ubicación del Web Service se configura utilizando el esquema de locations. Dicho archivo se obtiene pasándole el parámetro wsdl a la URL del servicio. (El método SOAP de los objetos GeneXus siempre se llama “Execute”). La información acerca de cómo invocarlo se encuentra en el archivo WSDL (Web Services Description Language) que es generado automáticamente. 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. Casos de Web Services en GeneXus Proveedores El Servidor o proveedor es un procedimiento o reporte main con la propiedad ‘Call Protocol’ = ‘SOAP’.  -20000: No se recibió un mensaje SOAP. sea o no generado por GeneXus. El archivo WSDL se genera automáticamente. teniendo en cuenta la sección ‘Alcance’: Cliente Servidor C/SQL C/SQL Java Visual Basic Visual FoxPro  (*)   (*)  (*)  (*) Java Visual Basic Visual Fox   X   X   X   X .  -20002: El método llamado no es el esperado.

y cancelará el programa llamador en el caso de que se produzca un error en el programa llamado). y haciendo un call() a dicho objeto desde el objeto Cliente. En la versión 7. Por ejemplo es posible llamar desde un objeto main C/Sql a otro objeto main C/Sql. se generan tantos elementos line como sean necesarios. característica no disponible hasta la versión 7. .0 de GeneXus con el WSDL Inspector. ignorándose el resto. .5 el SOAP como protocolo por defecto para las llamadas RPC. en caso de que la línea de Help sea mas larga. se cuenta a partir de la versión 8. El elemento tiene los siguientes subelementos: <documentation> <URL>Character</URL> <line>Character</line> <line>Character</line> . parámetros que recibe.5 de GeneXus. para que sirve. Solo la parte de texto es generada.5. Se generan líneas con un máximo de 80 caracteres. En caso en que el Servidor es un objeto externo a la KB. por lo que una llamada RPC a un programa C/Sql siempre se va a hacer vía SOAP. NOTA: Se esta generando dentro del archivo WSDL de los servidores SOAP un elemento <documentation> que incluye el Help del objeto. en este caso no esta disponible la propiedad ‘Cancel Caller Execution on Error’.(*) – El generador C/Sql adoptó desde la versión 7. no importando el generador con el que se genere el objeto llamador (con el valor ‘Internal’ para la propiedad Call Protocol. Es posible a partir de esta característica hacer llamadas RPC desde programas C/Sql hacia programas generados por cualquier generador que genere servicios SOAP. Esto permite incluir en el WSDL información acerca del uso del Servicio. En los elementos line se genera el Help del objeto. </documentation> En el elemento URL se indica la URL al Help HTML del objeto que se genera. La invocación se haría usando el WSDL Inspector desde la KB consumidora. se resolvería creando en la KB del Cliente un objeto ‘dummy’ con el mismo nombre y parámetros que el objeto Servidor. etc.

con lo que el web service queda operativo para ser invocado. y asociado a un generador Web. que debe ser de tipo main. Por ej. que permite importar la definición del servicio que se desea consumir. XmlWriter y XmlReader. Proveer Para proveer web services con GeneXus se debe definir un objeto procedimiento o reporte. Se debe publicar el objeto en un web server.Consumidores a Web Services externos Usando GeneXus 8.: .5 es posible invocar a un servicio web externo utilizando los tipos de datos HttpClient. WEB SERVICES CON GENEXUS A continuación se detallarán los mecanismos para proveer y consumir web services con GeneXus.0 o posterior se utiliza el WSDL Inspector. Se debe configurar la propiedad de objeto Call protocol con el valor SOAP. El WSDL del servicio queda disponible agregando el parámetro wsdl a la URL del mismo. Igualmente en la versión 7.

y veremos como consumirlo desde una aplicación GeneXus. que permite importar la definición del servicio que se desea consumir. es necesario configurar la propiedad de objeto Location.5 de GeneXus.http://server/baseurl/aservice. Supongamos que quisiéramos publicar un servicio de nuestro sitio web. En el caso de que el web service utilice tipos de datos estructurados. Además. y el utilitario definirá los tipos de datos necesarios para poder consumirlo desde GeneXus. los mismos serán agregados a la base de conocimiento al importar la definición con el WSDL Inspector. .aspx?wsdl Estas funcionalidades están disponibles a partir de la versión 7. port. en los objetos GeneXus que vayan a invocar al web service. CREACION DE WEB SERVICE GENEXUS En esta sección crearemos un Web Service GeneXus. por ejemplo un ranking con las 10 películas más vendidas. Se debe indicar el WSDL del mismo. Vamos a definir entonces un Web Service al que llamaremos “Ranking”.0 o posterior: Se utiliza el WSDL Inspector. etc). Consumir Usando GeneXus 8. la ubicación del mismo (host. Esto servirá luego para configurar.

qué cantidad ha sido vendida. que indica para una película en particular. Las variables a definir entonces son las siguientes: Name Type Qty Movie MovieItem N(2) S(Moviesdt) S(Moviesdt. obtendremos las 10 más vendidas. más una variable que permita almacenar toda la colección de películas más vendidas (Movie) junto con una variable que cargue cada uno de los items de esa colección de películas (MovieItem). que nos permita almacenar la información de las películas que nos interesa publicar: Nombre: Moviesdt Structure Type MovieId MovieTitle Identifier Character(60) Moviesdt será una Collection. Haga clic aquí para ver la demostración Para programar el procedimiento “Ranking” se recorre la tabla “Movies” en forma descendente por MovieQtity.MoviesdtItem) . De esa forma. Definiremos una variable que nos permita contar la cantidad de películas: &Qty.Lo primero es definir un SDT con las siguientes características.

digitando la siguiente URL en el browser: http://localhost/services/aranking. Haga clic aquí para ver la demostración.Add(&MovieItem) &MovieItem = new Moviesdt. Observe que es necesario que el procedimiento sea main. Luego de generar y compilar el procedimiento “Ranking”. verifique el Web Service generado automáticamente por GeneXus.MovieId = MovieId &MovieItem. .MovieTitle = MovieTitle &Movie.&Qty = 1 for each (MovieQtity) &MovieItem. y configurar la propiedad “Call protocol” con el valor “SOAP”.MoviesdtItem() &Qty +=1 if &Qty > 10 exit endif endfor Rules: parm(out:&Movie).aspx?wsdl Creación del Consumidor del Web Service A continuación crearemos un web panel que será el consumidor del Web Service “Ranking” recientemente creado.

Ranking) . Vamos a crear el web panel “ViewRanking”. 1. Pasar a prototipo forzando el impacto. Creación de una nueva base de conocimiento.aspx?wsdl y clickear en el botón “Inspect”· Observe que el método del Web Service es “Execute” y el tipo de datos que devuelve es “Moviesdt”. Desde diseño. En “web service URL” colocar la siguiente URL http://localhost/services/aranking. de nombre “Consumer” Haga clic aquí para ver la demostración. ejecutar el WSDL Inspector. Cuando Clickeamos en el botón “Add Reference” se definen los tipos de datos además de toda la información necesaria para poder consumir el Web Service. por lo cual vamos a crear una nueva base de conocimiento para crear ese web panel al que llamaremos “ViewRanking”. 3. 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_. 2. Haga clic aquí para ver la demostración. (“Tools->WSDL Inspector”).En general un Web Service será externo a la KB.

El form del web panel “ViewRanking” contendrá un grid con las variables &MovieId y &MovieTitle. .Ranking (Web Service) se crearon automáticamente al inspeccionar el servicio con el WSDL Inspector. como se muestra a continuación: Event Refresh &Movie = &Rank. Ejecute el web panel “ViewRanking” y observe como se obtiene la información requerida.Load Haga clic aquí para ver la demostración.Observe que los tipos de datos Moviesdt (colección de películas).MovieId &MovieTitle = &MovieItem.Load for &MovieItem in &Movie //se recorre la colección y se carga el grid &MovieId = &MovieItem.Execute() //aquí se invoca la ejecución del Web Service y se carga la colección en la //variable &Movie EndEvent // Refresh Event Grid1. Programaremos los eventos “Refresh” y “Load” del web panel. Moviesdt_MoviesdtItem (cada item de la colección) y org_tempuriaction_.MovieTitle load endfor EndEvent // Grid1.

com) se puede ingresar una lista de palabras por las cuales buscar y retorna todos los sitios web en las cuales encontró esas palabras. muestra cómo accederlos y que formatos deben de tener los mensajes que se envían y se reciben. es que podemos agregar valor a nuestro sitio web. .com/GoogleSearch. Google es una compañía especializada en la búsqueda de información en la web. Presionar el botón “Inspect”. sin tener que preocuparse de los protocolos involucrados en el proceso y la definición del mismo. doSpellingSuggestion y doGoogleSearch (este último es el que luego vamos a consumir).wsdl. Lo que queremos ver en esta sección es como incluir un web service externo no GeneXus en nuestra aplicación (Ya hemos visto en este capítulo un ejemplo de como crear y consumir un web service hecho con GeneXus).com/GoogleSearch. En su página web (http://www.google. El WSDL de dicho web service es: http://api.google. Notar que el WSDL Inspector determinó que el web service tiene los siguientes métodos: doGetCachedPage. sin necesidad que el usuario deba ir a otro sitio. el procedimiento a seguir para incluir el web service de Google en el sitio de películas es el siguiente:     Ejecutar el WSDL Inspector (Tools/WSDL Inspector en el modelo de diseño). Un archivo con formato WSDL provee información de los distintos métodos (operaciones) que el web service brinda y sus parámetros. Entonces.EJEMPLO DE CÓMO CONSUMIR UN WEB SERVICE EXTERNO Una de las características interesantes de los web services. Es importante evitar “perder” el usuario al llevarlo a otras paginas web.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. ¿Que es wsdl? WSDL es un lenguaje basado en XML que se utiliza para describir un web service. Lo que haremos es importar un web service que provée Google. Esta misma funcionalidad Google la provee por medio de un web service. En “Web Service URL” ingresar: http://api.google.

que contiene el web panel “GoogleSearch” donde vamos a consumir el web service de Google. Haga clic aquí para ver la demostración A continuación es necesario consolidar el “GoogleSearch.&MaxResult.GoogleSearchService GoogleSearchResult ResultElementArray ResultElement Ya están definidas en el xpz el resto de las variables necesarias para hacer el ejercicio. &Restrict. Luego. Presionar el botón “Add Reference” para que GeneXus cree en la base de conocimientos todo lo necesario para consumir el web service.click &Key = "3yHXpPZQFHKdexiyPjqTPYNqVvnYj8cZ" &MaxResult = 10 &Filter = 1 &SafeSearch = 1 &Return= &Ws.&Oe) .    Notar en el costado inferior izquierdo los tipos de datos complejos que va a crear GeneXus para consumir el web service en forma adecuada.&Filter.&Start.trim(&Query). En ese web panel.&Safesearch. crear las siguientes variables: NOMBRE Ws Return ResultElements ResultElement Tipo GoogleSearch.doGoogleSearch(&Key.&Ie. Cerrar el WSDL Inspector. debemos programar el evento search.xpz”.&Lr. Impactar el modelo de diseño.click de la siguiente forma: Event search.

Load For &ResultElement in &ResultElements Title.cachedSize grid1. Programar el evento Load de la grilla de la siguiente forma: Event Grid1.Caption = &ResultElement.&ResultElements = &Return.title &url = &resultElement. .URL Title.snippet &cachedsize = &resultelement. compilar y ejecutar el web panel GoogleSearch.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.Link = link(&ResultElement. Haga clic aquí para ver la demostración. generar.resultElements &searchTime = &return.URL) &Summary = &ResultElement.searchTime EndEvent En este evento se realiza la invocación al método doGoogleSearch del web service. Especificar. Los resultados son devueltos en una Collection de un tipo de datos estructurado. el que es definido automáticamente en GeneXus por el WSDL Inspector.LinkTarget = "_BLANK" Title.

se puede leer de: http://www. la necesidad de desarrollar nuevas aplicaciones para Internet. o una aplicación web. Para analizar las diferencias entre los dos tipos de aplicaciones se compararán las ventajas y desventajas de las aplicaciones web frente a las aplicaciones GUI. Existen varias diferencias entre los ambientes GUI (aplicaciones con Interfaz de Usuario Grafica) y WEB. El objetivo de este artículo es brindar una herramienta de referencia.com/apis/reference. en muchos casos. Nota: La especificación del web service del ejemplo. el uso masivo de Internet propicia el desarrollo de aplicaciones de mayor versatilidad y complejidad para ambiente Web. COMPARACIÓN GUI – WEB Objetivo. En este capítulo veremos los principales aspectos a ser tenidos en cuenta para los usuarios GeneXus. Es por esto que está surgiendo la necesidad de aplicar una reingeniería a las aplicaciones existentes y también. . las que deberán evaluarse al momento de determinar la conveniencia del tipo de aplicación a desarrollar.google.Haga clic aquí para ver la ejecución.html INTRODUCCIÓN AL CAPÍTULO 11 Cada vez mas. para asistir en la decisión de migrar o desarrollar una aplicación con interfaz de usuario grafica (GUI).

Si bien el lenguaje es estándar. agrega e ignora otras. por lo que aquí no se mencionarán esos detalles. 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. . Una aplicación Web tiene diversas ventajas frente a las aplicaciones GUI.Existe otro articulo (Conversión de Aplicaciones GUI a WEB) sobre esta misma temática en donde se dan los detalles técnicos de cómo realizar esta tarea. Las aplicaciones Web presentan varias ventajas tanto en la instalación y actualización como en los requerimientos necesarios para utilizarlas. procedimientos y reportes. Aplicaciones Web. Aplicaciones con interfaz de usuario gráfica. INSTALACIÓN. Como consecuencia de esto una aplicación Web puede quedar levemente distinta según el browser que se utilice. Ventajas de las aplicaciones Web. El lenguaje HTML es un lenguaje de marcas (tags) para la estructuración de un documento. Las aplicaciones con Interfaz de Usuario Grafica (GUI) están compuestas por uno o varios programas GeneXus que utilizan objetos de tipo. transacción. Características de las aplicaciones Web. work panel. en la práctica. Introducción. En GeneXus estas aplicaciones se implementan con objetos web como web panels o Transacciones Web. cada browser toma algunas partes de la especificación.

Para utilizar la aplicación Web solo se necesita un browser. Capa Cliente Capa Servidor Web Aplicación Web Capa Browser BD Arquitectura en tres capas. de Datos Esta arquitectura presenta varias ventajas en cuanto a la escalabilidad. donde está únicamente el browser. la capa del Servidor Web donde esta la aplicación y la capa de datos donde se encuentra la Base de Datos. Un ejemplo muy común es el plug-in de Acrobat. La aplicación solo se instala en el servidor. . que son programas que agregan funcionalidades adicionales al browser. Adicionalmente se pueden instalar plugs-in. Flexibilidad en software y hardware en el cliente. alguna instalación en las computadoras cliente. En las aplicaciones Web. 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. Generalmente vienen incluidos al instalar el sistema operativo. el cliente puede tener instalado cualquier sistema operativo en cualquier versión. para poder accederla o acceder a otras aplicaciones web.Cliente ‘fino’. esta instalación es automática. pero también existe ya que es necesario bajar la aplicación. Generalmente la instalación y actualización de aplicaciones GUI en arquitecturas cliente / servidor implica. utilizado para visualizar archivos en formato PDF o plugs-in para video o sonido. Las aplicaciones Web utilizan una arquitectura de tres capas compuesta por la capa cliente. Los browsers son distribuidos por Internet y no tienen costo. En el caso de una aplicación web no se requiere ninguna instalación adicional a la del browser. En el caso de aplicaciones Java GUI. ESCALABILIDAD.

al usuario final le resultará sencillo e intuitivo aprender a utilizar nuevas funcionalidades. INTERFAZ GRÁFICA. La aplicación puede ser accedida desde cualquier lugar que cuente con acceso a Internet. sin necesidad de que los usuarios cambien el modo en que acceden a la aplicación. el acceso a la aplicación es independiente de donde este instalada. Para los usuarios. La aplicación 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. Si bien este modo de interacción es limitado con respecto a las aplicaciones GUI. al ser tan simple y uniforme en toda la aplicación. Hosting Services Provider (HSP). El limite estará determinado por el desempeño de la aplicación. Una ventaja de la arquitectura en tres capas es que no es necesario pagar nuevas licencias por cada nuevo usuario que accede a la aplicación (por ejemplo los drivers de acceso a la base de datos se pagan por cantidad de usuarios concurrentes). estas son las más comunes y se mantendrán por toda la aplicación. Escalabilidad de servidores.Escalabilidad de usuarios. que depende principalmente de la potencia de los servidores y las características de la red. . el hogar o incluso desde otros países. Se puede migrar la aplicación a servidores más potentes. no se tiene en cuenta la cantidad de usuarios que van a utilizarla. Esto puede tener un fuerte impacto en el modo de trabajo ya que se pueden acceder a las aplicaciones desde la oficina. El desempeño de la aplicación depende directamente de la potencia de los servidores en la que este instalada. Es decir que la misma aplicación puede ser utilizada por algunos pocos usuarios o varios cientos. Acceso. INDEPENDENCIA. En la concepción de la aplicación. Uniformidad. La forma de navegar por la aplicación web será siguiendo links o presionando botones y si bien hay mas opciones.

Si se utilizan demasiadas imágenes. con el Editor de Temas.El diseño gráfico es realizado por expertos. herramienta que puede ser usada tanto desde GeneXus como en forma independiente. permite tratar cada componente en forma independiente. el tamaño final de la página. puede complicar el desarrollo y evolución del sitio. por lo cual flexibiliza notablemente la interacción con el diseñador gráfico. se reflejan los cambios en todas las páginas que lo incluyen. El diseño debe ser simple y sencillo. El diseño debe ser robusto de modo de poder soportar evoluciones. El trabajo con los diseñadores gráficos sigue pautas similares a la metodología de prototipación utilizada en el desarrollo de aplicaciones GeneXus. se implementa utilizando Web Components. puede ser excesivamente grande. son buenos ejemplos de interfaces livianas. los colores.     Mantenimiento. Los sitios web de Amazon y Yahoo. La recomendación es cuidar de que las imágenes sean de pocos Kbytes. debe seguir una pauta bien definida. solo el componente adecuado. haciendo del mantenimiento de la aplicación sencillo. . Por ejemplo la tipografía. por lo que se demorará mucho el acceso. Este aspecto sumamente delicado se deja a cargo de diseñadores gráficos especializados. Componentización. Por detalles sobre Temas ver el documento “Themes” Al evaluar un diseño hay que tener en cuenta ciertos aspectos:  Impacto del diseño de las páginas Web finales. Es muy importante que la estructura de las páginas pueda ser separado en componentes. O sea que no es necesario reprogramar todas las páginas. El exceso de detalles gráficos. El diseño debe ser consistente. de modo de poder reutilizar los mismos objetos para simplificarle al usuario el conocimiento del sitio. sino que además al cambiar un componente.0 de GeneXus. puede ser conveniente utilizarlos. con pocas imágenes y muchos links de texto. Esto no solo hace las interfaces más robustas frente a cambios y extensiones. Cuando los diseñadores tienen listo un prototipo. además de todas las ventajas adicionales que trae el uso de Temas en el diseño de la aplicación WEB. En GeneXus esto. y nuevos requerimientos. Para esto se cuenta a partir de la versión 8. que hacen que las aplicaciones tengan aspectos atractivos y funcionales. con muchos botones. La posibilidad de desarrollar una página dividida en Web Components. etc. que los desarrolladores deben respetar al máximo. la ubicación de botones. es conveniente que los desarrolladores lo evalúen para validarlo desde el punto de vista del desarrollo. Los links de texto son muy livianos. Un aspecto sumamente importante en la interfaz grafica de una aplicación Web es el diseño grafico. en el caso de una aplicación muy accedida.

para potenciar la aplicación web. EXTENSIONES CON JAVA Y JAVASCRIPT. Interfaz multimedia. banners. video. De este modo se logran aplicaciones mas integradas y donde es más sencillo incorporar nuevas aplicaciones. Es muy sencillo incluir en las aplicaciones web características multimedia como audio. Esto quiere decir que las aplicaciones desarrolladas en Java pueden ejecutarse en cualquier sistema operativo y cualquier plataforma de hardware. Java es un lenguaje de programación muy potente. Ejemplos muy comunes de ASP en portales de Internet son los proveedores de noticias. son empresas que brindan servicios y soluciones. a través de Internet. clima. etc. Tener aplicaciones web habilita a la empresa a funcionar como ASP. La interfaz con el usuario se puede personalizar dinámicamente. Por lo tanto se pueden incorporar aplicaciones GUI desarrolladas en Java. basadas en software. brindando como servicio el uso de las aplicaciones web desarrolladas. Los Application Service Providers (ASP). imágenes. entre sus propiedades. Para controlar distintos aspectos de la interacción con páginas web se utiliza el lenguaje JavaScript. Además las aplicaciones web ya existentes. para uso interno.Integración de nuevas aplicaciones. Esta propiedad lo hace especialmente atractivo para aplicaciones que ejecutan a través de Internet. utilizadas en la Intranet pueden ser integradas a las nuevas aplicaciones web desarrolladas. . según las aplicaciones a las que puede acceder el usuario. También habilita a contratar a otros ASP para potenciar las aplicaciones propias. de acuerdo a las características del usuario. etc. INTEGRACIÓN DE APLICACIONES INTERNET E INTRANET. se destaca la de ser multiplataforma. El código escrito en este lenguaje es incorporado en el HTML e interpretado por el browser. En las aplicaciones Web se pueden incorporar extensiones en lenguajes como Java y JavaScript. APPLICATION SERVICE PROVIDERS Y SERVICIOS WEB. Las aplicaciones web desarrolladas pueden ser utilizadas en Internet o en una Intranet. Por ejemplo con menúes donde las opciones se cargan dinámicamente.

MÚLTIPLES FORMAS DE ACCESO. Múltiples tecnologías como computadores de bolsillo y teléfonos celulares están teniendo un fuerte desarrollo, principalmente como formas alternativas de acceso a Internet. Las características 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 tamaño reducido de la pantalla. Si bien es necesario crear una versión particular para el dispositivo, se puede reutilizar mucho conocimiento de una aplicación web ya desarrollada.

Inconvenientes de las aplicaciones web.
En la siguiente sección se discuten las desventajas que presentan las aplicaciones web frente a las aplicaciones GUI.

Es necesaria una reingeniería de la aplicación. El lenguaje HTML presenta ciertas limitaciones que implica que migrar aplicaciones GUI a aplicaciones Web no sea una A S tarea automática. Entre los puntos que deben tenerse en cuenta al realizar la reingeniería de la aplicación sep destacan los siguientes: e lr i v Seguridad. Es imprescindible tener un esquema de seguridad en la aplicación, 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 aplicación puede requerir que algunas Por i r aplicaciones particulares necesiten un esquema mas fuerte de seguridad y requieran páginas 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 lógicas) en los objetos web, se mantiene únicamente durante la ejecución del objeto. Cuando la ejecución termina se deben hacer commit o roll back. Por lo tanto no es posible definir una UTL a través de varias Transacciones Web. Sin embargo, es posible mantener la UTL a través de varios procedimientos que se invoquen unos a otros, siempre que se mantengan dentro de la misma ejecución. En las aplicaciones GUI es común encontrar que durante varias transacciones se van ingresando datos y luego en la última transacción se hace el commit de todos los datos ingresados, por lo que se deben contemplar estos casos en la reingeniería de la aplicación. Las alternativas posibles a esta situación son:

Unificar todas las transacciones GUI en una sola Transacción Web. Dividir el proceso de ingreso en varias etapas y utilizar múltiples Transacciones Web. Al finalizar el ingreso podría tenerse un procedimiento que valide que el ingreso en varias etapas es consistente. Ingresar toda la información en tablas temporales y luego ingresar la información a la base de datos mediante procedimientos.

Validación de datos. La validación se realiza a nivel de todo el documento. Esto implica que en un documento con cabezal y líneas no se puedan ejecutar reglas al pasar del cabezal a las líneas o luego de ingresar un valor, etc. Por lo tanto la validación de todos los datos se realiza cuando se completa toda la información y se presiona el botón de confirmación, si los datos cumplen las reglas, entonces el botón de confirmación cambia para que se ingresen efectivamente los datos. También es posible trabajar sin confirmación y en este caso si la información cumple las reglas se ingresa directamente a la base de datos.

Limitación entre la interacción de objetos GeneXus. La interacción entre objetos GeneXus, en aplicaciones web es mas limitada que la interacción 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 aplicación GUI, debe ser tratado en la reingeniería de la aplicación.

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 líneas del subfile. En las aplicaciones GUI, el tamaño de los formularios se determina en el diseño de este y queda fijo en el momento de ejecución. En las aplicaciones Web, el tamaño de la página web se puede extender (horizontal o verticalmente) si se presentan muchas líneas en los grids. La selección de líneas es diferente. En las aplicaciones GUI, las líneas se seleccionan al hacer clic en ellas, además se puede seleccionar un rango de líneas, continuo o con líneas salteadas, todo esto sin necesidad de programación extra. En las aplicaciones Web, la selección múltiple de líneas debe programarse mediante campos de chequeo. Una posibilidad es permitir la selección de múltiples líneas y utilizar el carrito de compras (se describe más adelante). Se puede usar la propiedad “AllowSelection” de los grids para que sea posible seleccionar de a una línea.

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 dueño 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 información del carrito. Si se quiere realizar alguna acción a una serie de líneas en un ‘Trabajar con’, se pueden ingresar en el carrito y luego automáticamente se van presentando una a una las paginas adecuadas para la acción determinada, hasta vaciar el carrito.

Ejecución 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. Podría decirse que el cliente prácticamente no tiene capacidad de computo, además 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 opción de deshabilitar el uso de cookies, son ampliamente utilizadas. Pasaje de parámetros. En este método se utiliza el pasaje de parámetros entre los objetos web para el pasaje de información. Todos los objetos web de la aplicación tendrán los primeros parámetros iguales, en donde se pasarán datos comunes a toda la aplicación, como número de cliente, etc. y luego tendrán parámetros específicos de cada uno. La ventaja de este método es que los usuarios que no permiten cookies no tienen problemas en utilizar la aplicación, la desventaja es que los cambios en los parámetros tienen un fuerte impacto. Como el pasaje de parámetros se realiza a través de la url de la aplicación y los browsers permiten que se vea esa url, el usuario puede ver el valor de los parámetros, e incluso modificarlos. Sin embargo, GeneXus brinda la posibilidad de encriptar los parámetros en forma transparente al desarrollador, esto es importante porque se puede pasar números de cliente, números de factura, etc. en forma segura. Crear sesiones. Este método mantiene la información en sesiones que son almacenadas en la base de datos. Por cada usuario que utiliza la aplicación debe crearse su sesión particular. Además debe ser complementada con el pasaje de parámetros o cookies para recuperar el número de sesión. La ventaja sobre el método anterior es que si se necesita almacenar mas información se afecta solo los objetos que necesitan esa información.

Infraestructura de hardware. La performance de una aplicación Web depende en gran medida de la cantidad de usuarios concurrentes accediendo a la aplicación, el ancho de banda de la

conexión 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. También es imprescindible un esquema fuerte de seguridad principalmente de la base de datos. Una aplicación web debe estar disponible los 7 días de la semana, durante las 24 horas del día. Esto implica un servicio de alta disponibilidad en el cual posiblemente se maneje redundancia de servidores y de información.

Conclusiones.

Las aplicaciones web son una nueva alternativa a las aplicaciones de interfaz grafica. Ambos tipos de aplicación tienen sus características propias por lo que en cada aplicación se debe evaluar si conviene realizarla como web o GUI. Los puntos discutidos en este articulo pueden ser considerados como una guía para tomar esta decisión. Como requisito para tomar una decisión 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 creación o migración a aplicaciones web son:

        

Requerimientos y proceso de instalación de la aplicación final Ambiente en donde se ejecute la aplicación. Requerimientos en el acceso. Interfaz gráfica en cuanto a facilidad de uso, diseño grafico atractivo y capacidades multimedia. Acceso desde múltiples plataformas como computadoras de bolsillo, etc. Requerimientos de seguridad en la aplicación. Complejidad en las transacciones GeneXus, especialmente en la validación de datos y disparo de reglas. Restricciones en la interacción de objetos GeneXus. Debe ser evaluado cuidadosamente en el caso de migrar una aplicación GUI a web. Servidores. En las aplicaciones web la ejecución se realiza completamente en el servidor.

Como punto final hay que tener en cuenta evolución de la aplicación en cuanto a la creación de nuevos módulos, cantidad de usuarios y mantenimiento.

CONVERSIÓN DE APLICACIONES GUI A WEB
Objetivo

El objetivo de este documento es describir los principales aspectos técnicos a tener en cuenta al momento de convertir una aplicación GeneXus de tipo GUI-Windows a una aplicación Web.

. Conversión de Work Panels a Web Panels Una posibilidad para realizar la conversión de los Work Panels a Web Panels es utilizar la facilidad de SAVE AS que brinda GeneXus. html) son diferentes y por lo tanto la conversión implicará algo mas que la mera conversión de los objetos. generadas con los generadores GeneXus Visual Basic. Java y . Deberá programarse con “estilo web”. Conversión de Transacciones 3. Este tipo de aplicaciones se desarrolla básicamente con los objetos Web de GeneXus: web panels y web transactions. Java. Algunos controles WIN no .Introducción Aplicación GUI Entendemos como aplicación GUI (Graphic User Interface) a toda aquella que tiene interfaz gráfica Windows. La conversión de los objetos implica: 1. procedimientos y reportes.Net. se convierte en forma automática el form gráfico al form html y se mantiene toda la lógica del objeto.Net y C/SQL Reingeniería de la aplicación La premisa fundamental para convertir una aplicación WIN a WEB es que los ambientes implicados (gráfico. Visual Fox. compuesta básicamente por los objetos transacciones. En este documento centralizamos consideraciones a tenerse en cuenta para los diferentes objetos y modalidades de programación. Se generan con cualquiera de los generadores Web: Visual Basic. Aplicación Web Una aplicación Full Web tiene una interfaz HTML (HyperText Markup Language) y se ejecuta dentro de un browser. De esta forma. work panels. Conversión de Reportes 1. Conversión de Work Panels 2.

con lo cual no siempre es automática la conversión de un form a otro. . Se recomienda leer el documento Comparación entre Web Panels y Work Panels donde se comparan generalidades de ambos tipos de objetos. Hay que tener en cuenta que la conversión no crea una tabla con los controles dentro. 3. Luego ese form se puede modificar a gusto del programador. de forma que el usuario final pueda imprimirlo con las opciones de impresión del browser. Otra posibilidad es crear un nuevo objeto (Web panel) y copiar la lógica del work panel hacia el web panel. Observe que se debe revisar la lógica ya que existen ciertas diferencias en la interfaz que obligan a cambios en la programación. Otra posibilidad como solución a la necesidad de implementar un reporte en ambiente WEB es generar un reporte con salida PDF. En algunos aspectos. crear primero una tabla donde se pueden “arrastrar” los controles y finalmente quitar los tags <pre> y </pre> 2. así como los controles propios de Transacciones Web. como ser el Error Viewer). Conversión de Transacciones a Transacciones Web Se cuenta con un form HTML default por cada transacción web (con los atributos de la transacción.son soportados en WEB (por ejemplo el tab control). el comportamiento de las Transacciones Web es diferente al de las Transacciones con interfaz gráfica por lo tanto se recomienda la lectura del documento ‘Transacciones Web’. Conversión de Reportes Una posibilidad para manejar reportes es programar un webpanel. por lo tanto al quitar los tags mencionados anteriormente la pantalla se “desarma” y quedan todos los controles juntos. NOTA – Luego de convertir el objeto. Se aconseja por lo tanto. se debe editar el código HTML del mismo y quitar los tags <pre> y </pre> que quedan al principio y al final respectivamente del mismo.

2. MANEJO DE OPCIONES En el objeto Web Panel. Cuando estos se convierten a Web Panels ‘Trabajar con’ el Refresh no es necesario. Para poder mantener el comportamiento de los Work Panels ‘Trabajar con’ se deberían utilizar cookies que almacenen los filtros ingresados. Configurar la propiedad “AllowSelection” del grid. 4. REFRESH En Work Panels ‘Trabajar con’. etc. luego de llamar a una transacción. Debe considerarse que se puede utilizar únicamente para invocar a objetos sin interfaz. al seleccionar un registro y llamar a otro objeto (por ej.Diferencias entre los ambientes y como manejarlas Work Panel “Trabajar con” Es muy común 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 líneas del mismo. Para implementar la selección múltiple. FILTROS Si un Web Panel ‘Trabajar con’ tiene variables que se aplican como filtro a los registros desplegados en el grid. existen algunas alternativas para implementarlo: 1. es común tener un comando Refresh o Refresh keep dentro de un evento. Definir una imagen o un text block en el grid por cada una de las opciones y programar la acción en el evento clic. Si se invoca a otro web panel. se debe usar el comando For each line para procesar cada una de las líneas y filtrar por las que estén seleccionadas (&valor = X). Por lo tanto. solamente se ejecuta para el último registro del grid. puede utilizarse en lugar de una imagen con el evento CLIC. no existe la forma de seleccionar con el mouse varias líneas del grid ya que no existe posicionamiento en ninguna parte del form. Luego. un botón para cada una de las opciones. Procesamiento de varias filas en grid . Si se utiliza un grid free-style. se vuelve al Web Panel ‘Trabajar con’ pero se pierden los valores ingresados a los filtros. los comandos Refresh y Refresh keep deben ser eliminados de los eventos mencionados anteriormente. 3. Agregar en el grid una variable de tipo Combobox y programar las diferentes acciones en el evento Clic de la misma. ya que al ejecutar el comando Return hay un refresh implícito del Web Panel. Por ejemplo: 2 – Modificar. se debe definir una variable en el grid y asignarle un valor a cada una de las líneas que se quieren procesar. . 3 – Visualizar. Transacción Web) que tiene un return.For each line selected En web panels.

Para la selección de una linea se cuenta con la propiedad “AllowSelection”. por lo que el manejo de transacciones anidadas. En las aplicaciones HTML esto no puede usarse. deberá modificarse la programación a algo del estilo: Web panel -> call procedure -> Call web panel Integridad transaccional: manejo de UTL’s Las transacciones Web siempre hacen commit. Por lo tanto. 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 no se tiene este control por lo que será necesario rediseñar el form. Otra alternativa es usar código HTML externo que permite simular estos tabs Styles para Web Panels. .únicamente para inicializarlos pero no tienen dinamismo por lo que las modificaciones realizadas al style después de haberlo aplicado no se reflejarán en los objetos. se pueden definir tab dialogs para organizar los datos del form en varias secciones. 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 diseños. En muchos casos la alternativa es utilizar la lógica del modelo del ‘Carrito de Compras’ Uso de Tab Dialogs En las aplicaciones GUI. Una alternativa puede ser definir un objeto por cada Tab Dialog. con la propiedad ‘commit on exit en NO’ no se puede lograr. En web panels los styles sirven – a diferencia del resto de los objetos GeneXus. Las llamadas a un web panel solamente pueden realizarse desde otro web panel (mediante el call o el link).

se cuenta con mayor potencialidad para el desarrollo de aplicaciones web. INTRODUCCIÓN CAPÍTULO 12 Una solución para la generación de reportes en WEB es trabajar con reportes PDF. lo que deberia hacerse es definir un style con el diseño del form y los web components que incluirá y aplicarlo a los nuevos objetos Web Panel creados. simplificando así el mantenimiento. Con este tipo de reporte.La forma de obtener el dinamismo en este caso es utilizando el concepto de Web Components que permite incluir un mismo objeto en varios. de manera de poder imprimir el catálogo completo de películas. El reporte generado como PDF puede visualizarse directamente desde el browser. Lo primero es crear un objeto reporte con el siguiente layout: . Las modificaciones de cada web component se reflejarán automáticamente en todos los web panels. De esta forma. En este capítulo profundizaremos en la generación de reportes PDF. El nombre del objeto será “ViewCatalog”. y referenciado con un link desde el Web Panel “MovieCatalog”. Aplicación práctica de reportes PDF Lo siguiente que haremos es crear un reporte en formato PDF que pueda ser visualizado desde el browser.

Es necesario configurar las siguientes propiedades al objeto reporte recién creado:    Main Call Protocol = HTTP Report OutPut = “Only to File” Y la siguiente rule: output_file('movies.pdf'.'PDF'). de forma similar a como se hizo en el webpanel “MovieCatalog”. . Haga clic aquí para ver la demostración.(Puede diseñar el layout del reporte como usted lo crea más conveniente) Haga clic aquí para ver el diseño del reporte. Lo que haremos es un corte de control sobre la tabla “Gen_Movie”..

pongamos en el webpanel “MovieCatalog” un link a este reporte.Link = link(RViewCatalog ) . Para eso. agregar un textblock en el form del webpanel. Seguidamente. Nota: Se necesita el Acrobat Reader en el cliente. digitando en nuestro caso la siguiente URL: http://localhost/services/oViewCatalog.Caption = 'Print Catalog' PrintCatalog.. Nota: Para comprobar que el reporte ejecuta correctamente.aspx Haga clic aquí para ver la ejecución del reporte.. basta con ejecutarlo directamente desde el browser. y en el evento start del webpanel “MovieCatalog” agregar: PrintCatalog. de nombre “PrintCatalog”. para visualizar el reporte PDF.Haga clic aquí para ver la demostración.

Algunas veces este tiempo de ejecución no es necesario. ya que los datos no han cambiado. que GENEXUS incluye una característica denominada Smart Static Panels (SSP) que permite estatizar paginas de la aplicación. tanto pudiendo llamarlos como pudiendo ser llamados.INTRODUCCION AL CAPITULO 13 Como mencionamos al comienzo del curso. Esto será muy útil en sitios de información (portales) donde gran parte de la información. Dentro de este tiempo esta la conexión a la base de datos. Es por esta razón. Como SSP entendemos la ejecución de un web panel dinámico para una instancia de datos que recibe como parámetro. es decir archivos de texto conteniendo HTML con la información obtenida a partir de la base de datos. después de generada será estática. etc. la ejecución de las sentencias. por la simple razón que tienen que ejecutar antes de poder enviar la información al browser del usuario. En este capítulo vamos a ver que posibilidades nos brinda esta característica… SMART STATIC PANELS Introducción El objetivo es posibilitar la generación inteligente de páginas estáticas desde GeneXus. Estas SSP pueden convivir con los web panels dinámicos. los sitios están compuestos normalmente de una combinación de paginas estáticas y dinámicas. . Las páginas dinámicas tardan mas en bajar que las estáticas.

Alcance
Lenguaje: C/SQL, Java, Visual Basic Interfaces: Web

Descripción
La finalidad es permitir desde GeneXus la generación de páginas estáticas de una forma inteligente, es decir consultando dinámicamente a la base de datos.

Porque usar SSP? 1. Se comportan con mejor performance que los objetos dinámicos 2. Recargan menos al servidor en tiempo de ejecución. En que casos es viable la utilización de SSP? 1. Si existen páginas cuyo contenido varía en la base de datos con una periodicidad conocida. 2. Si la aplicación puede soportar mostrar alguna información no on-line sino que se actualice hacia el web con cierta periodicidad.

Generación de SSP
La preferencia a nivel del modelo denominada ‘Generation Mode’ de la sección Web Information permite la generación de las páginas estáticas. Las opciones son:

1. Dynamic Panels Este es el valor por defecto . Significa que el web panel se generará con acceso dinámico a la base de datos.

2. Smart Static Panels’
Este valor significa que el web panel se generara en forma estática (SSP). Esta generación de las páginas debe resolverse con anteriordad. 3. Create Static panels on request Este valor significa que al ejecutar el web panel con acceso dinámico, automaticamente se generará la página estática correspondiente a la instancia de datos. Este valor, permite tener un sitio compuesto por paginas dinámicas y páginas estáticas sin que sea necesario ejecutar un proceso que genere todo el sitio en forma estática con anterioridad, sino que estas páginas estáticas se generarán para las instancias de datos que se requiera cuando se ejecute la página dinámica correspondiente en el sitio.

Además de la preferencia Generation Mode, existe también 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 model’s preference value’ (que es el valor por defecto).

Esta ejecución puede hacerse desde la línea de comandos o desde otro objeto GeneXus no web. Analizaremos ambos casos.

¿Cómo funcionan las SSP?
La generación de SSP se logra a partir de la ejecución del web panel dinámico. Cuando este web panel recibe parámetros existirá una SSP por cada instancia de datos posible.

El nombre de las SSP resulta de la concatenación del nombre del objeto web panel con la lista de parámetros que recibe separados por el carácter ‘_’ y la extensión HTML.

Por ejemplo, se tiene el web panel Clientes que recibe como parámetros la Empresa (atributo EmpID –num(3))y la categoría (CatId –char(1)), algunos nombres de las SSP son:

hcliente_203_A.html hcliente_999_S.html

Si el web panel dinámico tiene eventos que ocurren en el servidor asociados a controles del form (por ejemplo botones, o eventos Click asociados a imágenes, etc) las SSP invocarán al web panel dinámico al ejecutar dicho evento.

Independientemente de la property Generation Mode por cada link a un web panel, si este web panel esta marcado como estático, hace un call al web panel (de modo que este también 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

Estatización de SSP
Denominamos Estatización al proceso de generación de las SSP correspondientes a un web panel.

Existen varias formas de estatizar un sitio web:

  

Generación a Pedido Generación desde objetos GeneXus. Generación desde la línea de comandos

La primera opción aplica cuando el web panel tiene el valor Create Static panels on request. La generación de SSP a partir de objetos GeneXus y a partir de la línea de comandos aplican cuando el web panel tiene el valor Static Panel y son útiles para generar estas páginas en forma masiva para las posibles instancias de datos que existan en la base de datos.

GENERACIÓN A PEDIDO La generación a pedido de las páginas 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 dinámico, esto significa que los links siempre son al objeto web panel dinámico. Al ejecutarse el web panel dinámico, lo primero que se controla es que exista la página estática (.html ) correspondiente a si mismo incluyendo tambien los parámetros que se le pasaron. Si este archivo existe, se redirecciona la llamada a dicho html. Si no existe automáticamente 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 generarán 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 físicamente al mismo directorio que se configuró en la preferencia anterior.

GENERACIÓN 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 página SSP correspondiente al mismo para la instancia de datos recibida como parámetro. Esto permite, por ejemplo, poner el mecanismo de generación de los SSP dentro de un workflow.

PARÁMETROS ADICIONALES
Existen ciertos parámetros adicionales configurables al momento de invocar al web panel que cambian el funcionamiento del programa.

Los parámetros soportados son:

SSP Directory

Indica el directorio en donde se generarán las SSP. generan en el directorio corriente. SSP Dynamic URL

Si no se especifica se

Indica la URL base para los web panels dinámicos. Si una SSP tiene un link a un web panel dinámico, se agrega esta URL antes del nombre del mismo. Además, si la SSP tiene un evento que ocurre en el servidor (por ej. Un botón) , al dispararlo se hace un ‘POST’ al web panel dinámico cuyo nombre es el valor de este parámetro 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 dinámico.

Si no se especifica esta propiedad, no se agrega ningún prefijo a los web panels dinámicos 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 parámetro es útil en muchos casos en que una nueva generación de SSP no significa que toda la información anterior deje de ser válida.

Un ejemplo de esto es una lista con información clasificada según la fechas (calendario de cursos, calendario de partidos jugados, etc) donde en la página se tiene la información –que después de generada no cambiará – y un link a la fecha anterior y a la fecha siguiente. Si la generación de las SSP se hace en forma diaria, el parámetro deberá tener el valor overwrite en false para que no regenere todas las páginas sino solamente la última (la del día). Además 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 página 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 generación. 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 ningún lugar

FUNCIÓN SETENVPROPERTY
La función SetEnvProperty permite configurar los parámetros adicionales. La sintaxis es:

&aux = Setenvproperty('genexus.property', &value)

Por ejemplo: &aux = Setenvproperty('genexus.staticwebdir', ‘d:\ssp’)

FUNCIÓN COPYSTATICFILES. Esta función permite realizar la copia de las SSP generadas a otro directorio, por ejemplo:

&aux = copystaticfiles()

GENERACIÓN DE SSP A PARTIR DE LA LÍNEA DE COMANDOS
Las SSP se generan como resultado de la ejecución de un web panel -que tiene la preferencia Generation Mode con el valor ‘Static Panel’ - desde la línea de comandos. Los parámetros adicionales tambien pueden configurarse desde la línea de comandos pero la sintaxis es diferente según el generador. Por mas detalles referirse a los documentos:

  

Consideraciones en C/SQL Consideraciones en Java Consideraciones en Visual Basic

Estatización 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 página.

Consideraciones
En la generación de los smart static panels, los parámetros 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 dinámicos y smart static panels es necesario que se pasen y se reciban los parámetros con el mismo tipo de datos.

Por ejemplo, tener un programa A que llame a uno B pasando un parámetro en un Numérico 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).

Ejecución desde el browser
Cuando el SSP se invoca desde el browser, se comporta como un web panel normal, resolviendo automáticamente para cada link si el web panel llamado es estático o dinámico.

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 Páginas Estáticas ? ¿No confunde eso? R: Estatico es el HTML resultado de la ejecución de un SSP. Es decir, hay web panels dinámicos (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 ejecución de un SSP.

Normalmente un sitio se formará con dinámicos y/o HTMLS pero en el "background" se tienen dinámicos y SSPs que generaron esos HTMLs. es decir. algunas dinámicas y otras SSPs ? R: si. puede haber cualquier combinación de llamadas. Se indican todos los objetos como SSP.Consideraciones del generador C/SQL Generación de SSP a partir de la línea de comandos Los parámetros adicionales necesarios para la generación de páginas SSP a configurar en C/SQL son los siguientes: . Pero un ejemplo totalmente SSP puede ser para armar un CD tipo Demo de mi sitio y distribuirlo. Como solución para bajar la carga del servidor Web. es decir. P: ¿Se pueden tener combinadas. SSP . puedo tener algunos dinámicos y otras generadas mediante SSP. Normalmente serán sitios con web panels dinámicos y tambien SSP. se pueden definir algunos SSPs y otros Dinámicos. P: En que casos aplica una solucion 100% SSP? R: La solución de los SSPs puede aplicar a muchos problemas diferentes y dependiendo del mismo es lo que se hace. y ejecutando CALL(HMAIN) generarán todos los HTMLS del mismo. Dinámico-SSP. SSP-SSP. SSP-Dinámico. P: ¿Puede un web panel dinámico llamar a un SSP? R: si claro.

staticweb.overwrite=<true|false> genexus.staticweb.staticweb.staticweb.links=<true|false> genexus.staticweb. .dir=<dir> genexus.Consideraciones del Generador JAVA Generación de SSP a partir de la línea de comandos Los parámetros adicionales necesarios para la generación de páginas 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.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> Parámetro no soportado Estos parámetros adicionales se pasan en la línea de comandos después de los parámetros que el nombre del programa C pudiera tener.copydir=<dir> Estos parámetros adicionales se pasan en la línea de comandos antes del nombre del programa Java. Ejemplo: Hmainwp “/sd=c:\\” /su=http://server/mydirectory /so:false /sl=true Limitaciones El generador C/SQL no soporta la propiedad genexus.copydir y la función copystaticfiles. La sintaxis es diferente dependiendo de la máquina virtual que se utilice.static. SSP .dynurl=<url> Genexus.

los drivers JDBC.staticweb. Por ejemplo: java -Xmx100m hmywebpanel Esto le da 100 MB de memoria máxima a la máquina virtual Java.links=true –dgenexus. agregando las clases de GeneXus.copydir=d:\ hmainwp Antes de ejecutar el comando. y la cantidad de web panels estáticos a generar es grande.exe'.overwrite=false -dgenexus.staticweb. es necesario configurar correctamente el classpath de la aplicación.staticweb.dynurl=http://server:8080/servlets -dgenexus. se recomienda aumentar la memoria máxima disponible para la aplicación. las clases standard de Java y el directorio corriente. Esto se hace agregando un parámetro -Xmx<memoria en MB>m al 'java.staticweb.jar’. Por ejemplo: .staticweb.Máquina Virtual Sun/IBM Microsoft java –Dparámetro = valor <objeto a ejecutar> jview /d:parámetro ejecutar> = valor <objeto a Si se ejecuta con la maquina virtual de Sun o IBM. EJEMPLO: java -dgenexus.dir=c:\ -dgenexus. el archivo ‘servlet.

jar.staticweb.staticweb.zip.jar.j:\tomcat\lib\servlet.dynurl=<url> genexus. SSP .j:\jdk11\lib\classes. con Visual Basic no es posible ejecutar los SSP desde la línea de comandos. .EXE. Ejecutar el objeto que va a establecer los parámetros y llamar al SSP.Consideraciones Visual Basic A diferencia de otros generadores. Esta ventana se corresponde con un utilitario llamado GXLOG. 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 página ASP y la DLL).dir=<dir> genexus.set classpath=GeneXusclassr.zip .j:\drivers\jt400. o alternativamente ejecutarlo en forma interpretada (si se quiere se puede cerrar el browser y dejar solamente la ejecución del VBP). se debe configurar la preference ‘Functions = Allow non-standard functions’ tanto en diseño como en prototipo.staticweb.overwrite=<”true”|”false”> genexus. solo pueden ser ejecutados al ser llamados por otro objeto.staticweb. Los parámetros a configurar son: Parámetro SSP Directory SSP Dynamic URL SSP Overwrite pages SSP Expand Links SSP Copy directory genexus. Ejemplo Se tiene un Web Panel (PruebaSSP) que será ejecutado como SSP y Work Panel (Llamador) que será el encargado de ejecutarlo. Al ejecutarse los SSP se despliega una ventana que indica cuales fueron los HTMLs generados por la ejecución de los SPPs.links=<”true”|”false”> Parámetro no soportado NOTA: Para poder utilizar las funciones que permiten configurar los parámetros adicionales desde las aplicaciones GeneXus (función setenvproperty).

  Compilar el Web Panel ‘PruebaSSP’ (se genera la página ASP y la DLL) o si se quiere ejecutarlo en forma interpretada.staticweb.staticweb. 'd:\ssp') &aux1 = setenvproperty('genexus. 'http://localhost/cgi-bin/') &aux2 = setenvproperty('genexus.staticweb.dynurl'.staticweb.staticweb.A continuación 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. que quedarán en el directorio ‘d:\ssp’.overwrite para que no se sobreescriban los SSP para los que ya existe un archivo .html con ese nombre. false) call(HPruebaSSP.dir para indicar donde quedarán las páginas HTML (d:\ssp) genexus. Limitaciones temporales    El generador VB no soporta el parámetro genexus.dynurl para indicar la URL correspondiente a los Web Panels dinámicos que serán llamados desde los SSPs (http://localhost/cgi-bin/) genexus.overwrite'.copydir y la función copystaticfiles.static.dir'.) EndEvent Los parámetros adicionales que se configuraron fueron: genexus. y ejecutar el evento ‘Llamada’. ….staticweb. Ejecutar el Work Panel ‘Llamador’. No se pueden utilizar funciones de Cookies en Web Panels generados como estáticos. Al ejecutar el evento ‘Llamador’ se generan las páginas HTML correspondientes al SSP. . No se pueden encriptar los parámetros de los Web Panels generados como estáticos.

la calidad de la interfaz con la que interactúa el usuario determina el éxito de la aplicación. El diseño de la aplicación es la parte gráfica de la misma. Si se realiza la ejecución de SSPs. se debe cerrar el programa que ejecutó el SSP (y el proyecto del Web Panel en caso de ejecutarlo interpretado). A este conocimiento se le llama “Usabilidad”. el conjunto de imágenes. colores. el diseño de la misma y de su contenido. La calidad de la misma está definida por una serie de pautas y técnicas. y volverlos a ejecutar. se cierra el utilitario GXLOG. Con estructura de la aplicación nos referimos a la ubicación de los diferentes elementos para que sean encontrados de forma intuitiva por el usuario y utilizados de forma correcta. INTRODUCCION AL CAPITULO 14 En el desarrollo de una aplicación web. La interfaz de una aplicación web está determinada a grandes rasgos por la estructura de la aplicación.EXE y se vuelve a realizar una nueva ejecución (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. . formas que va a tener la aplicación. Hay que tener esta estructura bien definida antes de aplicar un diseño.

Si usa un mapa del sitio (Sitemap) brinde la información de donde está el usuario en cada momento. que resulte intuitiva para el mismo público objetivo. sino reflejar una estructura de acciones a realizar o de información a encontrar. Hay que tener esta estructura bien definida antes de aplicar un diseño. Con formato: Numeración y viñetas Navegación La navegación de una aplicación permite ir a las distintas partes. etc. No poner links a la misma página en la que me encuentro. A lo largo de este capítulo desarrollaremos cada uno de estos puntos para lograr aplicaciones web exitosas y fáciles de usar. bullets. .    Estructura de la aplicación Diseño de la aplicación Diseño del contenido ESTRUCTURA DE LA APLICACIÓN Con estructura de la aplicación nos referimos a la ubicación de los diferentes elementos para que sean encontrados de forma intuitiva por el usuario y utilizados de forma correcta. Es importante que la estructura del sitio esté reflejada en todas las páginas en forma consistente. No cambiar la ubicación de las opciones de los menús según cambien las páginas (mantener consistencia).El diseño del contenido permite que el mismo sea cómodamente leído y correctamente interpretado. Aplicar los mismos conceptos para las mismas acciones (links. A la hora de definir la estructura en sitios corporativos. botones. Permitir que el usuario siempre controle la navegación: no deshabilitar botones estándares de los navegadores ni botones del mouse. sectores. Puede incluir una pequeña descripción de qué ofrece cada opción del menú. No invente la rueda. Es recomendable: Mostrar las barras de navegación en todas las páginas.). siempre que pueda aprenda de sitios exitosos de su misma área o aplicación para realizar una estructura similar. en general es recomendable no reflejar el organigrama de la empresa.

¿A dónde puedo ir? . El resultado de la búsqueda debe ser claro. . etc. La estructura del sitio se debe reflejar en la navegación permitiendo contestar las siguientes preguntas: ¿Dónde estoy? . Se recomienda hacer esta funcionalidad lo más simple posible de manera que sea fácil de usar. necesita que el usuario las interprete y por lo tanto demore unos segundos en entender su uso. Usar títulos en cada una de las páginas. Esta imagen debe tener siempre un enlace a la página de inicio de la aplicación o la página principal del sitio. o la columna del menú izquierdo. dentro del área de contenido de forma que el usuario sepa dónde se encuentra. debe mostrar la cantidad de instancias encontradas. Para ello se recomienda:     Marcar la opción seleccionada en la barra de navegación. etiquetas. La ubicación habitual del mismo. Lo más sencillo es tener una caja de texto (textbox) y un botón que diga buscar. ésta debe de estar en todas las páginas del sitio. En GENEXUS esto se hace usando la propiedad Caption del Form (Form. es la esquina superior izquierda. - Dentro de la estructura de la aplicación web. el título de cada página que contiene el texto buscado y un enlace en ese título a la página correspondiente.Mostrar todas las opciones a donde puede ir el usuario desde la página actual. El lugar más intuitivo es el cabezal superior derecho. Nombrar las páginas en el cabezal de las mismas para que se identifiquen en el grupo de páginas que tiene abiertas el usuario.Para indicar las páginas que el usuario ya visitó. Para mostrar el nombre de la aplicación y de la página se puede usar un formato como los siguientes:  Sitio: página (Ej: GeneXus: Capacitación)  Sitio – página  Sitio > página Usar nombres cortos para las páginas igual que para los sitios de modo que se puedan visualizar bien en el cabezal de la página. el texto usado para realizar la búsqueda. Herramientas de búsquedas (search) Si usa una herramienta de búsqueda.Dentro del universo de sitios/ aplicaciones web  Esto se logra mostrando el logo del sitio/ aplicación web en todas las páginas. Si las opciones son muchas. conviene dejar los colores de los enlaces con los colores por defecto del navegador.páginas de la aplicación rápidamente y en forma intuitiva. El uso de iconos. sin marearlo con demasiadas opciones. y por lo tanto el lugar donde el usuario lo irá a buscar. convieene agruparlas por áreas o sectores y dentro de los mismos mostrar submenús.Caption). en un lugar siempre visible sin tener que usar las barras de desplazamiento. ¿Dónde estaba? .

etc. Ejemplo: información de registro del usuario (a la izquierda). página de la información de la empresa. etc. contacto con soporte. ya que incomoda al usuario porque ejecuta su aplicación de manejo de emails. Contáctenos. etc. Menú de áreas Muchas veces se usa el área de cabezal para ubicar un menú de áreas o categorías dentro de la aplicación o del sitio. 3. En aplicaciones web. Página de Inicio Si bien hay un enlace en el logo de cada página. Contacto. Contáctese. Acerca de. no relativa a la aplicación en particular o a la parte de la aplicación desplegada en la página. Mapa del sitio. emails y direcciones físicas.Menús Menú superior Tanto en sitios corporativos como en intranets y extranets se usa comúnmente un menú superior que contiene generalmente las siguientes opciones: 1. etc. la ubicación de la herramienta de búsqueda y del mapa del sitio. área de ayuda. Con formato: Numeración y viñetas . que respalde la seriedad y veracidad del contenido presentado en el mismo. La Empresa. etc. etc. Esta opción del menú no debe ser un enlace a un correo electrónico. este menú generalmente contiene: Enlace a la página de inicio de la aplicación Enlaces a información importante. el producto que se vende a través del sitio. Acerca de Nosotros. Siempre es válido un enlace a información sobre la empresa que representa ese sitio. nunca está de más repetirlo ya que la página inicial es a la que se retorna con más asiduidad. Este enlace debe conducir a una página que contenga información para contactar a la empresa a través de teléfonos. idiomas de la aplicación. En la zona superior derecha se ubican las herramientas para encontrar páginas y contenido dentro del sitio. pero que sirva para la aplicación entera. Generalmente se utiliza cuando hay demasiadas opciones para ubicar en el menú izquierdo (más de 10). que sirva de respaldo. 2. Categorizar los enlaces y agruparlos en áreas simplifica la navegación haciéndola más intuitiva. 4. Mapa. Quiénes somos. Acerca de La Empresa.

Mantener siempre el color predeterminado para los diferentes links. para que al usuario sepa cómo usarlo ya que aprendió su uso en otras áreas del sitio. Links de información relacionada (Related links) Algunas recomendaciones para la definición de links: Con formato: Numeración y viñetas Cuando se definen links subrayar las palabras importantes y brindar información suficiente para que el usuario se sienta atraído a seguir el link. En muchos sitios el menú izquierdo cambia según el área en la que el usuario se encuentre. Los clásicos links que se asocian a una palabra para ver más información relacionada a la misma. Usar “link title” siempre que no sea obvio a donde va el link. el conjunto de imágenes. el nombre del sitio oSi es interno. etc. Relacionar la información con links del tipo "más sobre tal tema". . formas que va a tener la aplicación. o sobre el autor. Links Hay tres tipos de links: Links estructurales (de navegación) Links asociativos. todos los lugares del sitio a donde se puede acceder. Siempre usar los mismos nombres para acceder al mismo contenido. oInformación adicional que se aplique oEl tooltip debe tener menos de 60 caracteres.Menú izquierdo Este menú contiene las opciones de navegación del sitio. independientemente de las opciones. para que aparezcan los tooltips: oSi el link es externo. Con formato: Numeración y viñetas DISEÑO DE LAS PÁGINAS DE LA APLICACIÓN El diseño de la aplicación es la parte gráfica de la misma. Se debe mantener el mismo diseño del menú. el nombre del subsitio. colores.

3.htm No usar imágenes animadas.Se debe diseñar pensando en 1. los tamaños de las letras y tamaños de las pantallas. 4. con la información suficiente. ya que este formato pesa mucho más que los anteriores. Es mejor hacer páginas más cortas. Velocidad de carga Público objetivo Uso de la aplicación Máximo aprovechamiento de los temas Velocidad de carga El tiempo que demora en cargarse la totalidad de una página determina la percepción que va a tener el usuario de ese sitio o aplicación. Público objetivo Debe tener en cuenta quién será el público objetivo –a quién se dirige. Usar herramientas para disminuir el peso de las imágenes. Ej: http://www.bmp. quiénes serán los usuarios. pero no se recomienda usar este tamaño para un público masivo. sino también por la cantidad de contenido que se le presenta.netmechanic. ya que no sólo demora más la carga de la página. No usar flash. Si la demora es excesiva. el usuario puede llegar a pensar que la empresa no es fiable. o armar más páginas a partir de una. No hacer páginas que requieran el uso excesivo de las barras de desplazamiento horizontal.gif o . nunca . Uso de la aplicación Cuando está diseñando también debe considerar cuál es la finalidad de la aplicación para no entorpecer el uso del servicio que se desea brindar. Esto no sólo ahuyenta al usuario por el tiempo que le consume. Con formato: Numeración y viñetas Por ejemplo. que no le solucionará sus problemas de forma correcta. si el público objetivo está integrado por desarrolladores.a la hora de diseñar y elegir los colores. sino que muchas veces requiere que el usuario instale la tecnología. se puede hacer un sitio o una aplicación con letras de tamaño 8 puntos. . 2. Para mejorar los tiempos de carga se recomienda: Usar texto en vez de imágenes siempre que se pueda (ej: para los menús) El formato de las imágenes siempre debe de ser .jpg. el usuario pensará que no es buena. Si la aplicación demora en cargarse.com/GIFBot/optimize-graphic.

De esta forma. etc. Máximo aprovechamiento de los temas (Themes) Maximizar el uso de los temas permite ajustar el diseño en tiempo de ejecución. se facilita al usuario la concentración para la lectura del texto principal. principalmente porque es más difícil leer en la pantalla y el público es más exigente con el tiempo que le consume obtener una información. Se pueden usar imágenes animadas si su movimiento se detiene una vez presentada la animación. donde se espera encontrar muchos focos de atención (textos cortos.Si se trata de un sitio Web donde se ofrece bastante texto para leer no es recomendable que las páginas tengan sectores que llamen más la atención que el contenido principal de la página. las etiquetas de los formularios. muchos links) es más adecuado usar imágenes animadas. Si el sitio web es un portal. desde la que contiene las opciones del menú hasta la que contiene el contenido. Por ejemplo. Es realmente molesto tener imágenes moviéndose en distintas partes de la página cuando se tiene que leer. las grillas. Debido a esto hay que escribir para Internet teniendo en cuenta las siguientes pautas: Escribir lo más corto y conciso posible. Se dice que en Internet hay que escribir entre un 50% y un 25% menos de lo que se escribiría en papel Poner las conclusiones al principio y una opción para ver el detalle de esa conclusión . de forma por ejemplo. se logra captar la atención del usuario que ingresa a la página para transmitir el mensaje que se desea con esas imágenes. Es recomendable que cada ítem que se use esté definido en el tema. que todos los títulos tengan la misma apariencia y si más tarde se quiere agregar espacio entre el título y el contenido se pueda modificar automáticamente en todos los títulos de la aplicación. las imágenes animadas son centros de atención. y luego. DISEÑO DEL CONTENIDO La forma de escribir en Internet difiere a la usada en publicaciones físicas. Esto es válido para cada tabla usada en la aplicación.

Es recomendable que los textos principales tengan un margen de 5 a 10 píxeles. separando el texto principal de lo que lo rodea. Márgenes Los márgenes definen el área de lectura de una página. La lectura va a ser más cómoda cuanto mayor sea el contraste de los colores. Cellpadding: especifica la distancia en píxeles entre el contenido y los bordes de la celda.del contraste visual entre una fuente y otra. y usados de igual manera en todas las páginas proveen uniformidad a través del sitio creando una estructura consistente y una identidad visual.El tipo de fuente debe estar instalada en las máquinas destino 2. Legibilidad Definición de Legibilidad. y el espacio en blanco alrededor. Alineación de los textos .El tamaño debe ser adecuado para el público objetivo y para la resolución más usada 3. El mayor contraste se logra con fondo blanco y letras negras. Verdana y Times New Roman. f. por su claridad.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 máquinas son Arial. Los márgenes y el espacio en blanco se usan para delinear el texto principal de otros elementos de una página. Capacidad o posibilidad de ser leído. los títulos. La buena tipografía depende -entre muchas otras variables. en la clase "Form" y jugar con las mismas sin tener que cambiar ni una línea de código. Lo que más atrae al ojo es el contraste fuerte con patrones distintivos. y entre los bloques de texto. Se pueden establecer las combinaciones de colores en el editor de temas. intuir la ubicación de más información y se aumenta la legibilidad de la misma. Esto se logra en GeneXus poniendo el texto dentro de una tabla con borderwidht =0 y cellpadding=10. Seguir patrones que conserven la forma de organizar el texto y las imágenes en las distintas páginas de un sitio o una aplicación permite entender la organización de la información. Cellspacing: especifica el ancho en píxeles de los bordes de la celda.Tipo de letras Se deben tener las siguientes consideraciones a la hora de elegir el tipo de letra a utilizar en una aplicación Web: 1.

w3.usabilitynet.org/ http://usableweb.cl/~rbaeza/inf/usabilidad.html Herramientas Herramientas para reducir el peso de las imágenes http://www.netmechanic.dcc.37signals.com/ http://www.masterdisseny.org/TR/WCAG20/ http://www.hildesheim.com/ .org/ En inglés http://www.uk/usability/index.useit. Los usuarios en Internet en general no leen los textos palabra a palabra. LINKS DE INTERÉS Usabilidad Sitios con artículos sobre usabilidad y temas relacionados con mejora en los sitios Web En español http://www.htm http://www.html http://www.com http://www.htm http://www.creatingonline.com/GIFBot/optimize-graphic. La alineación izquierda facilita este tipo de lectura.alzado.com/crunchers.gifworks.uchile.La alineación izquierda de títulos y contenidos es la más recomendable para el público occidental.com/ http://www.co.com/ http://sunsite. sino que escanean las páginas tomando algunas palabras de cada párrafo para entender la idea general de la página.

como el generador GENEXUS C/SQL permite acceder a los datos utilizando la tecnología de acceso SQL Embedded u ODBC. Llamaremos instalación local a aquella que es independiente de una conexión a una red e instalación remota a la restante.html Herramientas de chequeo de links activos http://validator.html REQUERIMIENTOS DEL GENERADOR C/SQL El generador GENEXUS C/SQL permite que el ciclo de desarrollo se realice con independencia de una conexión a una red (local o Internet) o.html Herramienta para medir la velocidad de carga del sitio http://www.html Herramientas que muestran el sitio en distintos navegadores http://www.org/breakdown.org. .org/checklink http://www. llamaremos instalación SQL Embebida a aquella que accede a los datos mediante sentencias SQL embebidas en el código fuente e instalación ODBC a la que se conecta vía ODBC.w3. Además.nils.Toolbar con varias herramientas de análisis y optimización de sitios http://www. La instalación local es soportada únicamente en Windows. utilizando un servidor (máquina diferente a la de desarrollo).anybrowser.com/siteviewer.webperf.au/ais/web/resources/toolbar/install.anybrowser.com/linkchecker.

Siempre es requerido en ambiente de desarrollo:   Compilador C Rutinas de soporte del generador Compilador Normalmente en ambientes UNIX. Por más información sobre el proceso de instalación de las rutinas de soporte. las rutinas necesarias para cada DBMS. En este caso. Estas rutinas se distribuyen en formato fuente y deben ser instaladas (compiladas. Durante el proceso de instalación el utilitario GENEXUS C/SQL Setup Wizard instala. en cada ejecución. Puede utilizarse el compilador GCC. Instalación SQL embebida Se requiere:   Precompilador del DBMS correspondiente Instalar las rutinas de soporte para el DBMS . ODBC remota.) antes de intentar compilar o ejecutar una aplicación generada. se requiere un compilador C++. referirse a “GeneXus C/SQL Setup Wizard”. que puede obtenerse en http://gcc. SQL embebida remota.gnu. lo mas común es utilizar Microsoft Visual C++. include files. etc. el cual no viene incluido. Detallaremos a continuación los requerimientos específicos de cada caso. Si se quiere instalar para más de un DBMS.org En ambientes Windows. el compilador no viene incluido con el sistema operativo.Es posible tener cualquiera de las combinaciones. el compilador C viene incluido con el sistema operativo. etc. ODBC local. Rutinas de soporte del generador C/SQL Las rutinas de soporte son un conjunto de archivos (bibliotecas.) que son utilizadas (referenciados) por los programas generados por el generador C/SQL. será necesario ejecutar el GENEXUS C/SQL Setup Wizard tantas veces como DBMSs se tenga. Si se utiliza ODBC como tecnología de acceso a los datos. Estas rutinas debe ser instaladas una única vez por servidor (salvo nuevas versiones). en el caso en que la tecnología de acceso sea Sql embebido. instalación SQL embebida local.

1 por lo que. Instalación remota Los siguientes son requerimientos específicos para el caso de realizar una instalación remota:    Conexión TCP/IP Esquema de transferencia: Copy/FTP Activación del servicio REXEC Conexión TCP/IP desde la estación de trabajo Cada estación de trabajo deberá disponer de una conexión vía TCP/IP con el servidor donde se realizará la compilación. Esta conexión se utiliza para transferir los fuentes generados al servidor y para la ejecución de comandos remotos (REXEC) requeridos para efectuar la compilación de programas.Precompilador Cada proveedor de DBMSs tiene su propio precompilador. prácticamente. . cualquier producto que provea soporte TCP/IP puede ser utilizado. El esquema de transferencia vía FTP y ejecución remota se basa en la especificación Winsock 1. Ver “Configuración de ODBC en ambiente Uníx”. que normalmente se vende como un producto adicional. Solo es necesario si la tecnología de acceso a utilizar en las aplicaciones desarrolladas es SQL embebido. DBMS DB2 Informix Oracle Precompilador Client Application Enabler ESQL C Pro*C Instalación ODBC  Instalar las rutinas de soporte para ODBC.

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. no es necesario activar el FTP. no es necesaria la transferencia. requerir a su vez otras DLLs. se necesita transferir los fuentes allí generados para poder compilarlos. Copy y Don't transfer. Unix Normalmente.DLL) requiere directamente los servicios de la WINSOCK. Si se selecciona Copy o Don't transfer como esquemas de transferencia. la estación de trabajo debe 'ver' los discos del servidor como discos de red.    Conectarse al servidor en una terminal (telnet por ejemplo) con un usuario administrador (root). dependiendo del proveedor de conexión de TCP/IP. los siguientes son los pasos a seguir para activarlo.O en adelante.El programa que realiza la transferencia y compilación (GXWC. Activación del servicio de FTP Para activarlo. la operativa varía en función del sistema operativo del servidor. Se requiere autorización especial (root) para realizar esta tarea. En esta situación. en consecuencia. Transferencia de fuentes La transferencia de fuentes de los programas generados permite tres esquemas básicos: FTP. El tercer esquema (Don' transfer) asume que el directorio mencionado arriba coincide con el directorio de los programas (es decir. En el caso de Personal Web Server el servicio de FTP no se instala por defecto. Esta DLL puede. es necesario que el servidor tenga disponible y 'escuchando' el servicio de FTP (ver más adelante cómo activarlo y consultar con el administrador del servidor por particularidades de su instalación). En otras palabras. Si no lo estuviera. el servidor debe funcionar también como servidor de archivos para la estación. este servicio se encuentra instalado y activo. .0 o Personal Web Server 4. Modificar el archivo /etc/inetd.DLL. donde se desea generar los ejecutables) y. por consiguiente. Si se selecciona FTP como esquema de transferencia.conf agregando/modificando la línea: 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.

pueda recibir solicitudes de REXEC o que la dirección IP del PC varíe pues se está utilizando DHCP. ejecute los siguientes pasos:   Acceda a una terminal del servidor o utilice un programa de emulación de terminal (telnet) y realice el login. se requiere el servicio de ejecución remota (REXEC) activo en el servidor.htm. el resultado debe ser que la fecha y hora de servidor se muestran en la pantalla. 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). la causa probable del problema es que la dirección IP del PC no es una dirección válida desde la cual. el servidor Unix.conf agregando/modificando la línea: 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 ejecución remota REXEC. Para hacerlo la operativa varía en función del sistema operativo del servidor. puede que no sea posible acceder al servicio desde su PC (máquina de desarrollo donde está instalado GENEXUS y el generador C/SQL). los siguientes son los pasos a seguir para activarlo. Nota: Aún cuando esté activado (el test anterior fue satisfactorio). Para verificar que el servicio está activo. . Ejecute el siguiente comando.    Conectarse al servidor en una terminal (telnet por ejemplo) con un usuario administrador (root). este servicio se encuentra instalado y activo. Normalmente. En este caso.com/atrls_info. Inc.Activación del servicio de REXEC Con el fin de realizar la compilación de los fuentes generados. Nuestra empresa ha evaluado el que vende la firma Ataman Software. El servicio necesario puede ser provisto por programas de diferentes casas de software y debe ser comprado aparte. Colorado USA) que funciona correctamente y tiene un bajo precio. Ver la dirección internet http://www.ataman. Unix Normalmente. (Fort Collins. Modificar el archivo /etc/inetd. Ver comentarios del mensaje ‘Invalid login’ en la sección Problemas Comunes. rexec host_name time host_name es el nombre simbólico del servidor o su dirección IP. Se requiere autorización especial (root) para realizar esta tarea. El servicio REXEC siempre debe estar activo para compilar los fuentes generados. Si el servicio no está activado. esto se manifiesta al intentar instalar las rutinas de soporte o compilar un programa generado.

lo cual se especifica en este mismo documento) .Instalación local En el caso de realizar la instalación local solo se requiere del Compilador C. y la instalación de las rutinas de soporte (luego los requerimientos van a depender de si la Tecnología de acceso es ODBC o Embebido.

modificando dicha copia según el siguiente detalle. $(PRECOMPPUBLIC) Si encuentra la línea. then \ $(GX_CFLAGS) -o $(EXE) $(OBJS) $(CC) $(GX_LIBS) $(PROLDLIBS). \ else \ $(CC) -o $(EXE) $(OBJS) -L$(LIBHOME) $(PROLLS). Modificar el archivo proc. utiliza archivos del Pro*C que el usuario debe copiar al directorio de las rutinas de soporte. \ fi Realizar los siguientes cambios: # Rule to compile any program (specify EXE= and OBJS= … if [ "$(ORA_CLIENT_LIB)" = "shared" ]. $(PRECOMPPUBLIC) $(GX_INC) Si no la encuentra. El siguiente es otro ejemplo que pertenece a AIX 4.Nota: Usuarios de Oracle en ambientes Unix Para compilar en este ambiente.mk' que.mk es dependiente de la plataforma y la versión de Oracle utilizados. el generador C/SQL. -O $(GX_INC) Buscar el siguiente bloque de código (o similar): # Rule to compile any program (specify EXE= and OBJS= … if [ "$(ORA_CLIENT_LIB)" = "shared" ]. then \ $(CC) -o $(EXE) $(OBJS) -L$(LIBHOME) $(PROLDLIBS). buscar la línea que tiene el siguiente código (o similar): CFLAGS=-I. realizar los siguientes cambios: INCLUDE=$(I_SYM). \ -L$(LIBHOME) -L$(LIBHOME) El proc. normalmente. \ else \ $(GX_CFLAGS) -o $(EXE) $(OBJS) $(CC) $(GX_LIBS) $(PROLLS). -O Realizar los siguientes cambios: CFLAGS=-I.3 y Oracle 8i: . está en el directorio $ORACLE_HOME/precomp/demo/proc en el directorio donde se instalaron las rutinas de soporte. Hacer una copia del archivo 'proc.mk (del directorio de rutinas de soporte) de la siguiente manera: Buscar una línea que tiene el siguiente código (o similar): INCLUDE=$(I_SYM).

los requerimientos para el ambiente de desarrollo y los requerimientos en producción.$(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=$@. .Net se van a dividir en dos partes. $(GX_INC) $(I_SYM)$(PRECOMPHOME)public $(I_SYM)$(RDBMSHOME)public $(I_SYM)$(RDBMSHOME)demo $(I_SYM)$(PLSQLHOME)public $(I_SYM)$(NETWORKHOME)public Requerimientos .o EXE=$@ build LIBHOME="$(LIBHOME)" PRODLIBHOME="$(PRODLIBHOME)" CFLAGS="$(CFLAGS)" LFLAGS="$(LFLAGS)" INCLUDE=$(I_SYM).Net Los requerimientos de software de Web objects en .

IMPORTANTE: El mismo debe ser instalado antes del .Net Redistributable Package 1.0 (espacio en disco.1 y el runtime de Jsharp (en caso de generar reportes PDF). cantidad de memoria. etc.NET Framework SDK.1 (para reportes PDF) • Microsoft .0 Generador .1.0 o superior) • Microsoft J# . GENEXUS o o OTROS Cliente y servidor de Base de datos de prototipo.  Servidor Web: Internet Information Server (5.NET Para utilizar esta versión es necesario tener instalada la versión release del Framework Redistributable 1. Importante: Para usuarios Oracle se requiere en el cliente el driver 8. cada equipo deberá disponer de: PLATAFORMA . Internet Information Server para prototipación.Net Framework 1.).Requerimientos para desarrollo Además de los requerimientos básicos de GeneXus 8.75 o superior Development environment GeneXus 8.1 . REQUERIMIENTOS SERVIDOR Los requerimientos en producción son similares al ambiente de desarrollo.Net 8.0 Requerimientos en producción REQUERIMIENTOS ESTACIÓN DE TRABAJO En la estación de trabajo de los usuarios de una aplicación desarrollada con Web objects lo único que se necesita es disponer de un browser y una conexión al servidor donde están los Web Panels.

REQUERIMIENTOS GENERADOR VISUAL BASIC Requerimientos para desarrollo En Visual Basic 6. Estos objetos son programados en Visual Basic y al compilarlos se crea una DLL. Requerimientos estación de trabajo Para poder compilar y/o ejecutar en forma interpretada los objetos Web generados como WebClasses se necesita:  Windows 98.config.0 SP3 o superior Instalar Visual Interdev Permisos de creación de objetos COM Hay que ejecutar la aplicación Dcomcnfg.ASP (Active Server Page) que sirve como punto de entrada para cada clase en la DLL.0 o superior.• Driver ODBC y dlls de acceso ODBC (solo si la conexión es ODBC y no ADO) Instalación en el Cliente Alcanza solamente con un browser. Instalación en el servidor Alcanza solamente con una copia de los objetos y el archivo de configuración web.    Instalar Visual Basic 6.0 existen nuevas facilidades para generar aplicaciones para Internet.0 (o superior) se necesita el Internet Service Manager. que se encuentra en el directorio system32 del servidor. y un archivo . En principio puede ser también Windows 95 o cualquier sistema operativo que soporte un Personal Web Server de Microsoft. la más notoria son las llamadas WebClasses Designers. Windows 2000. Para ejecutar y/o compilar Objetos Web Cliente/Servidor. para dar permisos de creación de objetos al usuario que ejecuta los objetos Web. En el caso de Windows NT 4. se necesita además:    Software cliente del DBMS Drivers ODBC Datasource del modelo definido . Windows XP con un Personal Web Server instalado o con Internet Information Server 4. que será ejecutada por el Web Server (Microsoft Internet Information Server).

por lo tanto. genera lo que se llama un Servlet. la utilización de un pool de conexiones a la base de datos y la multiplataforma. el generador Java provee una funcionalidad adicional que consiste en que los Objetos objetos Web web pueden enviar la página HTML comprimida. se va a producir un error en el momento de ejecutar los objetos Web. por cada objeto web de GENEXUS. Configurar la preference “Show Connection Dialog = No”. como por ejemplo. La información sobre como poner en producción los objetos Web VB generados como WebClasses se encuentra en: Puesta en produccion de objetos Web VB generados como WebClasses Por más información se recomienda el documento: Objetos Web Visual Basic generados como WebClasses APLICACIONES WEBGENERADOR JAVA Introducción Existe una API especificada por Sun Microsystems que se llama 'Java Servlet API'. Esta opción puede deshabilitarse con la preferencia 'Auto compress web pages'. para que sea descomprimida en tiempo real por el navegador. A su vez. En las pruebas que hemos realizado. y no las puedan desplegar correctamente. Los Servlets proveen una gran cantidad de ventajas que el generador Java aprovecha. y setear el usuario y la password de conexión a la base de datos para que no se despliegue el diálogo de conexión a la base de datos. web transactions. Puesta en producción Una vez que los objetos Web fueron probados en forma interpretada se deben compilar y llevar al servidor de producción. para contemplar el hecho de que algunos navegadores no reporten correctamente su capacidad para descomprimir las páginas. web components). el generador Java. Esta API define la forma de ejecutar lo equivalente a los objetos web de GENEXUS (web panels. . Si no se configura esta preference con el valor No. La compresión se realiza solo si el navegador indica que es capaz de descomprimirlo. esta funcionalidad se ha comportado de forma correcta con todos los navegadores.

son dos servicios que se requieren (en un mismo servidor físico.1 o posterior. Explicaremos en forma conceptual y genérica cada punto. RS/6000. Algunos de los motores que se han utilizado exitosamente son:      IBM WebSphere en Windows. 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. 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. A continuación explicaremos los pasos en orden. o no) para poder ejecutar Servlets. En teoría. y permite que el desarrollador pueda compilar los Servlets (objetos web de GENEXUS). que se deben seguir para configurar y utilizar estos requerimientos. las aplicaciones GENEXUS pueden ejecutarse con cualquier Motor de Servlets que sea compatible con la especificación de Servlets 2. se instala automáticamente con la instalación del Motor de Servlets. el JavaServer Web Development Kit. en forma local. . se incluyen URL’s a papers técnicos que describen la configuración de otros motores de servlets. con el fin de mostrar un ejemplo práctico concreto. y tomaremos a modo de ejemplo.Requerimientos Para poder ejecutar Servlets. Al final de este capítulo. la opción de utilizar el Motor de Servlets RESIN para Windows. Unix OS/390.

son similares. pueden ser los servlets (archivos . El nombre webapp resulta de la abreviación de "web application" y consiste en un directorio base. Los tipos de archivos involucrados en la ejecución de una aplicación web. 5) Tests a. para ello se deben realizar algunos pasos. en la cual se deben distribuir los archivos que sean necesarios para la ejecución de una aplicación web. pasemos a detallar entonces los pasos a seguir para configurar un motor de servlets: 1) Instalar el motor de servlets. Qué es una webapp? Cada motor de servlets crea y maneja una webapp.JAR). 2) Definir una webapp o bien identificar cuál es la webapp por defecto para utilizarla. relacionado a los motores de servlets. se debe configurar un motor de servlets. 3) Copiar drivers JDBC y clases standard de GENEXUS (gxclassr.zip) al directorio “lib” de la webapp. básicamente los pasos a seguir. así como comprobar que el motor haya levantado bien. Ejecutar el servlet de ejemplo del motor de servlets. .Configuración de un Motor de Servlets Para ejecutar una aplicación web Java. vamos a introducir el concepto de webapp. que contiene a su vez una estructura de subdirectorios determinada. 4) Levantar el motor de servlets. que si bien varían un poco según el motor de servlets que se vaya a utilizar.class). Una vez visto este concepto. para comprobar que la instalación haya sido correcta. Primeramente. contenido estático y librerías adicionales (archivos .

A modo de ejemplo.gxver PROPIEDADES DE EJECUCION C/SQL A continuación se detalla el significado de cada una de las opciones que figuran en el diálogo de configuración del F5.ZIP en algún directorio del equipo servidor (por ejemplo en c:\resin). Host Name: Corresponde al nombre del servidor o su dirección IP. Mediante la ejecución de este servlet se puede comprobar primeramente que se están encontrando las clases standard de GENEXUS y luego. Ejecutar el servlet: com. Script Name: Indica el nombre del script utilizado para compilar los objetos C/SQL. si se utiliza RESIN en Windows. se debe ejecutar: http://localhost:8080/servlet/com.genexus.webpanels. que devuelve la versión de las clases standard de GENEXUS. se debe ejecutar el servlet que viene de ejemplo accediendo de la siguiente forma: http://localhost:8080/examples/basic/servlet/HelloServlet b. Transfer FTP Service: se selecciona para transferir vía FTP.zip) y las clases del driver JDBC al directorio C:\resin\doc\WEB-INF\lib 4) Para levantar el motor de servlets.gxver. en forma local. 2) La webapp por defecto en este caso.webpanels. se debe ejecutar c:\resin\bin\httpd. Para verificar que el RESIN haya levantado bien. es: C:\resin\doc\ 3) Copiar las clases standard de GENEXUS (gxclassr. se deben seguir los siguientes pasos: 1) Instalar el motor de servlets: para ello.exe. simplemente se debe descomprimir un archivo de instalación . Para verificar que se estén tomando las standard de GENEXUS y cuál versión. . que se trata de la misma versión con las que se generaron los servlets.genexus.b. Se asume que este archivo se encuentra en el directorio especificado en Support Files. 5) Tests a. Program Directory: Esta opción es sólo informativa e indica el valor especificado en la opción "Programs directory".

REMEMBER PASSWORD: se selecciona para guardar la contraseña. de forma que al transferir se comparan las fechas y si está actualizado la transferencia no se realiza. Si se marca. Force transfer: bajo el directorio de la aplicación se crea un directorio "Update" que contiene un archivo vacío con el mismo nombre del archivo que se transfiere. USER NAME/PASSWORD: es el usuario y la password utilizas para la transferencia. Es el nombre del directorio donde van los programas visto desde el cliente. siempre se transfieren todos los archivos. Timeout (sec. Este servicio es utilizado para ejecutar comandos remotos. Submit Mode REXEC: se selecciona si se desea ejecutar la compilación en forma remota (otro servidor).): Esta opción le indica a GeneXus cuánto tiempo debe dar al servidor para responder. Si el directorio no existe el mismo es creado al realizar la transferencia. es requerido para compilar los programas. se va a abrir el browser por defecto definido en la estación de trabajo. . Al seleccionar un objeto web del diálogo del F5 (Run) y presionar el botón Execute. PROGRAMS DIRECTORY AS SEEN FROM FTP: Es análogo al anterior. Normalmente es el 512. Local Exec: se selecciona si se compila sobre la misma máquina donde está el modelo. START URL: Es el directorio base para los objetos web. Don’t Transfer: se selecciona si se está trabajando sobre la misma máquina donde se va a realizar la compilación. Port: Es el número de puerto activo del servicio REXEC.Copy Files: se selecciona para copiar los fuentes. pero cuando se elige FTP service como método de transferencia. 0 le indica que espere en forma indefinida. PROGRAMS DIRECTORY AS SEEN FROM CLIENT: Este campo es válido sólo si se seleccionó Copy files como método de transferencia de archivos.

Opciones Propiedades de ejecución para aplicaciones webJava Para la ejecución de aplicaciones web con Java. El archivo puede llamarse servlet.0 Path: Indica el path del ejecutable VB6.EXE.jar o jsdk22.jar (dependiendo del Motor de Servlets que se utilice) y por lo general se . También se utiliza esta opción antes de poner en producción los Web Panels Visual Basic.Net A continuación se detalla el significado de cada una de las opciones que figuran en el diálogo de configuración del F5. ya que para poder ejecutar estos objetos.Propiedades de ejecución .1. este se encuentra bajo el directorio de instalación del framework en C:\WINNT\Microsoft. El momento de la creación es luego de la compilación y reorganización. Propiedades de ejecución Visual Basic Visual Basic 6.jar o jsdk.NET\Framework\v1. esta contiene el directorio virtual a ser creado (si no existe) por GeneXus en el Internet Information Service (IIS) local.exe). ya que es necesario compilarlos para poder ejecutarlos en el servidor. COMPILER PATH: Determina el path del compilador (csc. es necesario compilarlos antes. se debe: 1) Referenciar en el classpath las clases necesarias para compilar los servlets (clases correspondientes al JavaServer Web Development Kit).4322 VIRTUAL DIRECTORY: Determina la URL base de ejecución. Execution Mode Compile & Execute Esta es la opción por defecto cuando se está trabajando con Web Panels Visual Basic.

Las relacionadas con objetos web son: . además.<driverjdbc>. existen properties que aplican exclusivamente a los objetos web. Estas clases se deben referenciar en el classpath. Siguiendo el ejemplo que venimos viendo en el cual se utiliza el Motor de Servlets RESIN para Windows. Properties generales Estas properties se definen a nivel del modelo de Diseño.encuentra en el subdirectorio LIB del Motor de Servlets... del resto de los archivos de clase que se requieran referenciar en dicha variable de entorno.zip. Algunas a nivel del modelo de diseño 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 producción que lo utilice).c:\resin\lib\jsdk23. Se setean mediante la opción File/Edit Model/Properties teniendo abierto el modelo de diseño. 2) Indicar en el Web Server Root la URL que el navegador utilizará como base para la ejecución de los servlets. a continuación indicamos lo que corresponde completar en las opciones de ejecución para dicho caso: 1) classpath=gxclassr.jar 2) Web Server Root= http://servername:8080/servlet PROPERTIES A CONSIDERAR EN EL DESARROLLO DE OBJETOS WEB En los modelos GeneXus. instalado en forma local.

chequea si existe un . con los parámetros que se le pasaron. Si existe. se crea el . PROTOCOL SPECIFICATION Esta property permite especificar el protocolo a utilizar en la url generada para invocar a los objetos web. existen algunas properties (en la sección Web Information) que aplican exclusivamente a los web panels. cuando se ejecuta un webpanel. Para utilizar este protocolo es necesario disponer de un servidor seguro. Los valores posibles son: First input att/var on the page Browser dependent Existe también la propiedad a nivel de objeto con los mismos valores que la propiedad del modelo y también el valor Use model's property value. También existe la posibildad de generar smart static panels a pedido mediante el valor “Create Static panels on request” de esta preferencia. 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 Do not specify indica que no se especificará un protocolo particular. Si no existe. Tiene tres valores posibles: Unsecure (HTTP). El valor por defecto es Unsecure (HTTP). se redirecciona la llamada a dicho html.html y luego se redirecciona. . Secure (HTTPS) y Do not specify. Si se elige este valor. intentan posicionar el foco en el primer control de entrada (no read-only) o dejan librado al Browser la posición del foco. GENERATION MODE Esta property permite especificar si los objetos web del modelo se generarán como objetos dinámicos (acceden a la base de datos) o como páginas html inteligentes (smart static panels). Por mas información referirse a la documentación de Smart Static Panels Existe también la propiedad a nivel de objeto con los mismos valores que la propiedad del modelo y también el valor Use model's property value. FOCUS CONTROL Esta property permite determinar si los objetos web. al mostrar su página. Base Image Path Propertiess a nivel del Generador A nivel de cada modelo.html que corresponda a si mismo. El valor Secure HTTPS: fuerza generar HTTPS como protocolo e indica que el protocolo a utilizar es el Secure Hypertext Transfer Protocol.

Sirve para los usuarios avanzados que quieren hacer algun tipo de deployment en el GAC. Namespace Determina el namespace de la aplicación.sino que se utiliza el mismo protocolo empleado para acceder al web panel actual.Programs.Net y se setean mediante la opción File/Edit Model/Properties teniendo abierto dicho modelo.Net para generar el HTML necesario. El default es GeneXus. Por más información referirse a la documentación 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 dinámica. ENCRYPT URL PARAMETERS Esta property permite especificar si se desea encriptar los parámetros que se envían entre objetos y que son visibles en la URL del browser. Por más información referirse a la documentación de Smart Static Panels.Program. Valor por defecto : GeneXus.Net control Determina la forma de hacer el rendering de los controles HTML ( para EditBox. Los programas generados por GeneXus y compilados con . indica que el rendering se hace utilizando controles . Cuando el valor es Yes.Net Estas properties se definen a nivel del modelo . Por default esta en "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. en web panels y web transactions. CheckBox. ON REQUEST SSP SERVER DIRECTORY La property ‘On request SSP server directory’ es requerida cuando se generan SSP (Smart Static Pages) en forma dinámica.Net se encuentran disponibles bajo el namespace indicado por esta property. Por más información referirse a la documentación: Encriptación de parámetros. RadioButtons. ListBox y Buttons). Properties de . En el caso de tener aplicaciones con un esquema mixto: algunas páginas seguras y otras no. Use . Estando en "No" indica que use el rendering standard generado por .

contenido estático.css que contiene información sobre formato. este es muy costoso ya que debe generar todos los response file (*. Entonces. 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ú. Es útil por ejemplo para generar información de debug (incluyendo el string “/debug”) o para incluir una dll dentro del namespace (/r:xxx. con el nombre del directorio donde se encuentre el contenido estático (indicado en la preference Static content base URL). utilizados en el diseño del objeto web. en el servidor donde correrá la aplicación web. . Para indicar este directorio se utiliza la preference Static content base URL. Para el manejo del contenido estático. se centralizan todos estos archivos en un directorio determinado. Valor por defecto : Yes Compiler options La información de esta property se incluirá en el . fuentes. javascripts y en particular un archivo denominado Styles. Manejo de contenido estático Las aplicaciones web manejan además del código (servlets) y archivos de configuración (client.GeneXus en todas sus plataformas. el servlet generado buscará el contenido estático en el path resultante de concatenar la URL de la webapp en donde está corriendo el servlet.dll ). colores.rsp) cada vez que se compila un objeto. El mismo consiste en imágenes. etc.rsp que se usa para compilar el main. Esto podrá visualizarse con “View source” del html generado por el servlet y al ejecutar el servlet (en el navegador). este último garantiza compatibilidad en el look and feel entre las distintas plataformas Web generadas por GeneXus.cfg).

por lo tanto. es necesario volver a generar y compilar algún objeto web. En tiempo de compilación de cada objeto web. con formato X:\imagenes.js) y el archivo styles. Ejemplos de valores  H:\servlets . La misma varía en cada caso. el generador los copia al mismo. si se inserta en un objeto web una imagen con el nombre "Imagen. es necesario reiniciar el servidor de servlets. Además. 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".  Se copiarán además de los archivos . los cuales contienen la información de las preferencias ingresadas. el generador los copiará al directorio especificado. Preference Servlet Directory Para ejecutar los Servlets. dependiendo del Motor de Servlets que se utilice. Para ello hay que especificarle en la preference Static content directory seen from client el path al mismo.jpg". Por lo tanto.class.  El path debe ser relativo al cliente. 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. sino que en tiempo de compilación. Este tipo de imágenes no van a concatenar ni la URL de la webapp. para que se tome en cuenta este cambio al ejecutar. Nota: Esto es válido para las imágenes que no estén involucradas con los objetos HTML.jpg.css que también debe estar físicamente en el mismo directorio que las imágenes. no es necesario copiarlos manualmente como el caso de las imágenes. si se modifica algún valor de las preferencias del modelo. ni la preference Static content base URL. es decir un path visto desde el PC en el que se está trabajando con GENEXUS.Por ejemplo. una vez compilados. ya que se utiliza para la generación del archivo de make. es el siguiente: Propósito Permite especificar el directorio donde se transferirán los servlets generados. Notas:  Es necesario especificar este valor antes de generar. El resto del contenido estático como ser los javascripts (*. donde X:\ es el mapping a la URL de la webapp. deben estar en un directorio específico de la estructura obtenida al instalar el Motor de Servlets. los archivos . Por ejemplo las imágenes que se ponen en los background de las tablas o celdas no están comprendidas en el caso anterior. El propósito de la preference.Si el motor de servlets está instalado en una máquina mapeada con el “drive” H y servlets es el nombre del directorio .cfg. el camino a la imagen va a quedar de la siguiente forma: /Ejemplo/imagenes/Imagen.

Preference Static Content base URL Propósito Indica el directorio donde los servlets buscarán el contenido estático (imágenes. Si está en producción. Notas: Cambiar el valor de esta preference no implica regenerar la aplicación. solo basta con modificar el archivo client. . y en diseño solo se especifica el nombre de la imagen.css) utilizado en los objetos web correspondientes. sino solo un objeto web.cfg. Ejemplo de valores Si se crea un directorio llamado “images” bajo el directorio raíz del webapp donde se instalaron los servlets. entonces en esta preference habría que poner /images. y a él se copian todas las imágenes necesarias. C:\resin\doc\web_inf\classes – Si el motor de servlets es el RESIN y esta instalado localmente en el directorio C:\resin. por lo que este directorio debe especificarse relativo al directorio correspondiente a la “base URL” de la webapp. donde deben residir los servlets. javascritps y styles. Los servlets siempre ejecutan en el servidor.

Preference Static Content directory seen from client .

. Ejemplos de valores   X:\images .js) que se generan para los menubars de objetos web y web panels generados como estáticos. Notas:  En este mismo directorio también habrán archivos de imágenes que se utilicen en los objetos web.Propósito Permite especificar el directorio donde se transferirán los javascripts (archivos *.Si el servidor web está instalado en una máquina. En tiempo de compilación. es decir un path visto desde el PC en el que se está trabajando con GENEXUS. mapeada con el “drive” X y es el directorio “images” el utilizado para dejar el contenido estático. 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 imágenes. Los mismos se deben copiar manualmente a este directorio. y en los programas generados se referenciarán utilizando el valor de la preference “Static Content Base URL” concatenada con el nombre de cada imágen.  El path especificado debe ser relativo al cliente. el generador los copiará al directorio especificado.

Valores Yes: envían la página comprimida. Alto: 29. Sin Encabezado de primera página diferente . Distancia del pie de página desde el borde: 1. No: no envían la página comprimida. en Java. La compresión se realiza solo si el navegador indica que es capaz de descomprimirlo.Preference Auto compress web pages Propósito Los objetos web. y no puedan desplegarlas correctamente. Default Value = Yes Con formato: Ancho: 21 cm. Es posible que algunos navegadores no reporten correctamente su capacidad para descomprimir las páginas. Distancia del encabezado desde el borde: 1.7 cm.25 cm.25 cm. de modo que sea descomprimida en tiempo real por el navegador. pueden enviar la página HTML comprimida.