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

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

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

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

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

Pginas estticas Pginas dinmicas

Pginas estticasLas pginas estticas son las ms sencillas, se crean usando un editor de pginas Web o bien escribiendo directamente el cdigo HTML. Mientras que se ajustan muy bien a los requerimientos iniciales de hacer promocin y obtener alguna venta ocasional, o bien la venta masiva de muy pocos productos, no se adecuan a la mayor parte de las necesidades de la venta. La desventaja que presentan es que el mantenimiento de las mismas implica un alto costo si se realizan cambios con frecuencia, ya que una persona debe realizar las modificaciones correspondientes. Algunos ejemplos de estas pginas son: Informacin general, Marketing, Informacin similar a la que se distribuye en folletos y documentos. Tienen la ventaja de brindar un acceso rpido y cmodo a informacin y brindar direcciones de correo electrnico para informacin y soporte.

Pginas dinmicas

Las pginas dinmicas son creadas en el momento en que son referenciadas por el usuario. Si bien tienen un estilo base, la informacin desplegada en las mismas es dinmica.

Son interactivas, ya que permiten que la pgina a visualizar pueda ser creada en base a la informacin ingresada por el usuario. Por ejemplo, una consulta de los pedidos pendientes de una orden de compra.

Las pginas dinmicas permiten interactuar con una base de datos, por lo que son una poderosa herramienta para impulsar los negocios de la empresa.

Al utilizar este tipo de paginas, la actualizacin se realiza en forma automtica, ya que al acceder a la pgina se accede a la base de datos con la informacin actualizada.

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

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

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

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

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

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

URLBsicamente una URL es una direccin WEB. Cuando visualizamos una pgina Web con Netscape, Internet Explorer o cualquier otro browser, los links (visualizados subrayados y generalmente en color azul), contienen informacin oculta que apunta a la ubicacin del recurso al que se hace referencia. Se puede pensar una URL como un puntero estndar a un recurso Internet. El recurso podra ser un grfico, un sonido o simplemente un archivo de texto. Las URLs tambin pueden usarse para iniciar sesiones telnet, ftp y otros servicios. En muchos casos es conveniente conceptuar una URL como el equivalente de estndar DOS para nombre y path de un archivo. De hecho una URL puede apuntar a un archivo en la mquina local y tambin puede apuntar a un archivo especfico de un directorio especfico en una mquina remota. Sintxis protocol://host/path/filename[?parm1,,[parmn]] protocol: Especifica el protocolo de acceso. Ejemplos: file, ftp, http, telnet host: Nombre del host al cual deseamos conectarnos. Ejemplo: www.genexus.com

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

Protocolo HTTPComo vimos antes, un documento WWW HyperMedia es servido por el protocolo HTTP. Esto significa que los browsers WWW y los servidores WWW se comunican entre s para procesar las solicitudes del usuario utilizando un conjunto de mensajes y respuestas que son nicos para el cliente (web browser) y el servidor (programa HTTP server). Aunque existen algunas diferencias entre browsers y servidores WWW, todos se comunican a travs del protocolo HTTP.

Se establecen 4 pasos bsicos en el protocolo HTTP: 1) Conexin: Durante la conexin, el Web browser intenta conectarse al servidor. Si el browser no logra la conexin en una determinada cantidad pre-configurada de tiempo, se desplegar un mensaje de error y la consulta del usuario cancelar. 2) Solicitud: Una vez que la conexin al servidor HTTP ha sido establecida, el browser enva una solicitud para el recurso deseado en el servidor. 3) Respuesta: Si el servidor encuentra el recurso, ste es enviado al browser y se pasa al ltimo paso. De lo contrario, un mensaje de error es enviado y se pasa al ltimo paso. 4) Se cierra la conexin. Si el servidor retorn el recurso solicitado, el browser realizar la carga del mismo y ser desplegado al usuario.

HTMLEs el lenguaje en el cual estn escritos los documentos del WWW. Es un subconjunto especializado del lenguaje ms general SGML (Standard Generalized Markup Language).

El lenguaje HTML est compuesto por una serie de cdigos o tags ubicados dentro de un documento ASCII, que son traducidos por un web browser como Netscape, Internet Explorer, etc, en instrucciones especficas para formatear el documento que se va a desplegar en la pantalla. Entre dichos tags estn incluidos los tags de hyperlinks, que permiten especificar enlaces hacia otros recursos en el Web. Un documento HTML consiste de texto que compone el contenido del documento y tags, los cuales definen la estructura y apariencia del documento. La estructura de un documento HTML es simple. Cada documento tiene un cabezal (head) y un cuerpo (body), delimitados por los tags y . El cabezal es donde se indica un ttulo al documento y donde se indican otros parmetros que el browser podra utilizar en el momento de desplegar el documento. El cuerpo es donde se coloca el contenido propiamente dicho del documento HTML. Esto incluye el texto a desplegar y otros controles que indican al browser cmo desplegar el texto. Los tags tambin referencian archivos de efectos especiales como imgenes y sonido e indican los hot spots que enlazan el documento a otros documentos.

Un ejemplo de cdigo HTML podra ser el siguiente:

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

Para poder comprender mejor la tecnologa escondida detrs de las aplicaciones desarrolladas para el web, es necesario aclarar algunos conceptos adicionales, los cuales definimos en orden de aparicin histrica: CGI: Common Gateway Interface WEB CLASSES SERVLETS ASP.NETCGI CGI es un estndar que define la interfaz entre aplicaciones externas y servidores de informacin (Web Servers y HTTP). Con CGI el servidor Web puede realizar llamadas a programas externos, pasando datos especficos del usuario al programa. El programa luego procesa esos datos y el servidor devuelve la respuesta del programa al Web browser. Un programa CGI puede ser escrito en diferentes lenguajes como: C/C++, Visual Basic, PERL, etc.WEB

CLASSES

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

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

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

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

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

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

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

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

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

Bsicamente, la configuracin consiste en determinar un alias que ser utilizado por los usuarios de Internet para el directorio raz, y su correspondiente directorio fsico en el Servidor. En particular en el caso del generador .Net (que hemos elegido para ejemplificar los ejercicios prcticos del curso), el directorio virtual y su alias son creados automticamente y no es necesario que el usuario lo haga por su cuenta en etapa de desarrollo.

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

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

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

PLATAFORMAS Y ALTERNATIVAS PARA EL DESARROLLO DE APLICACIONES WEBLos generadores disponibles para generar objetos web son:

C/SQL .Net Java Visual Basic

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

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

Grficamente, las alternativas seran las siguientes:

Dependiendo del servidor de Base de Datos y del servidor Web a utilizar, es el generador GeneXus que puede seleccionarse. En varias plataformas, se plantean varias alternativas. La decisin del generador a utilizar se tomar principalmente por los requerimientos adicionales o interacciones con otras aplicaciones, ya que el look and feel de la aplicacin ser el mismo independientemente del generador que se utilice.

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

A continuacin, se enumeran las principales diferencias de dichos objetos con respecto al resto de los objetos GENEXUS:

Se utiliza un editor WYSIWYG (What You See Is What You Get) orientado a pginas para la edicin de objetos web (Web Objects). Los objetos ejecutan en el servidor. El trabajo se realiza a pantalla completa (dilogo full screen en lugar de campo a campo)

A lo largo del curso profundizaremos sobre estos aspectos.

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

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

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

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

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

VISUAL BASICLos objetos web generados con Visual Basic, utilizan la tecnologa denominada WebClasses Designer. Estos objetos son programados en Visual Basic y al compilarlos se crea un ActiveX DLL que ser ejecutado por el Web Server y un archivo ASP que sirve como punto de entrada para cada clase en la DLL.JAVA

Si se generan objetos web con JAVA, se utilizan servlets para acceder a la informacin. Una de las grandes ventajas que presenta esta tecnologa es que permiten mantener conexiones abiertas, como tambin compartir conexiones a la base de datos. Mas adelante veremos en mas detalle cada uno de los generadores.

EDITOR HTML DE OBJETOS WEBIntroduccinLa finalidad de este editor es potenciar y simplificar la edicin del form HTML de los objetos web, permitiendo crear fcilmente sitios web vistosos y potentes. Este editor es del tipo "WYSIWYG" (What you see is what you get) lo que permite al desarrollador visualizar en diseo la pgina web que se va a publicar. Para esto se licenci un editor similar al Front Page de Microsoft, que fue diseado siguiendo el estndar de las herramientas Microsoft Office, lo que permite que los usuarios puedan utilizarlo rpidamente y en forma intuitiva. Es un editor orientado a pginas, lo que significa que la posicin de los controles que se encuentran dentro del form en diseo es relativa al tamao de la ventana que contenga la pgina.

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

Descripcin del Editor HTML

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

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

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

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

Insertar controles y sus propiedadesLos controles que se pueden utilizar dentro de los objetos Web podemos clasificarlos en dos grupos:

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

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

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

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

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

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

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

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

CONTROLES Y SUS PROPIEDADESEn este captulo iremos viendo los diferentes controles de los objetos web y las propiedades de cada uno de ellos.

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

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

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

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

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

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

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

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

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

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

Las Transacciones que ya se tienen definidas son las siguientes:MoviesType

MovieTypeId* MovieTypeDsc Tipo de pelcula (Video, DVD)

Actors

ActId* ActLastName ActName

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

MovieGenre MovGenId* MovGenDesc (MovieId* MovieTitle)

Movies

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

Purchase Order

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

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

Qu es un Tema?

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

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

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

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

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

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

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

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

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

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

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

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

Haremos las siguientes modificaciones:

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

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

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

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

HTML

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

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

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

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

Propiedades del form HTML en diseoLas propiedades para el form son las siguientes:

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

Propiedades del form HTML en tiempo de ejecucinEn ejecucin se pueden modificar las siguientes propiedades del Form:

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

Propiedades del Form en los Temas

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

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

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

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

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

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

Propiedades del control Edit en diseoLas variables y atributos son controles de tipo Edit, que tienen las siguientes propiedades:

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

Propiedades del Control Edit en Tiempo de EjecucinAdems de las propiedades vistas anteriormente, existen otras que permiten modificar en tiempo de ejecucin los controles de tipo edit. Las propiedades son:

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

PROPIEDADES SEGN EL TIPO DE CONTROLHay otras propiedades, especficas segn el tipo de control que se utilice.

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

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

RADIO BUTTON, CHECK BOXLas propiedades a nivel de diseo que aplican son: 1. 2. 3. 4. 5. Attribute BackColor ForeColor Fill Font

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

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

Propiedades de variables de tipo bitmap en diseoLas propiedades que se detallan a continuacin aplican nicamente a variables de tipo bitmap.

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

Class Autoresize Borderwidth Alternate Text Tooltiptext HSpace VSpace ReturnOnClick OnClickEvent

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

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

METODOS DE LOS CONTROLES EDITLos mtodos que aplican a los controles edit de tipo combo box, dynamic combo box, listbox y radio button son: AddItem Clear

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

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

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

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

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

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

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

ControlName Class OnClickEvent Caption Font ForeColor BackColor BorderWidth BorderColor

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

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

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

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

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

COMO EVITAR VISUALIZAR EL INGRESO DE UNA PASSWORDUna cosa que vamos a querer cuando un cliente digita su password, es que no se visualice lo que escribe, es decir, que aparezcan asteriscos mientras la ingresa.

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

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

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

En el ambiente de diseo (mientras se trabaja con GeneXus editando los objetos web) las imgenes se buscan en el camino indicado en cada imagen (Ej.: c:\modelo\imagenes\img.gif), pero en ejecucin es necesario referenciar el camino virtual donde se encuentran las mismas, que normalmente es el Servidor Web -(Ej.: /imagenes/img.gif). Hay que recordar que el servidor web tiene acceso nicamente a aquellos directorios definidos en el software de administracin del mismo.

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

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

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

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

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

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

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

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

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

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

Con formato: Numeracin y vietas

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

6. El pasaje de parmetros es opcional.

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

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

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

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

Comando LINKVer Comandos/LINK.

CALLVer Comandos/CALL.

Como navegar entre objetos webPara relacionar objetos web dentro de una aplicacin, se dispone de los comandos call, link y la funcin link. A continuacin se realiza una comparacin para aclarar las diferencias entre los mismos.

Desde un objeto web se puede hacer CALL a: Objetos web Procedimientos

La funcin y el comando LINK puede hacer referencia a: NOTAS: 1. La funcin link se dispara cuando el usuario hace click sobre el mismo. 2. El comando link, en cambio se ejecuta en forma automtica cuando se ejecuta el evento. A diferencia del call, el comando link permite redireccionar a otros sitios web o pginas dentro de otros directorios del sitio donde se est ejecutando el objeto web. 3. La nica forma de llamar a un procedimiento es con un call. Objetos web Pginas HTML estticas

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

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

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

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

Propiedades de las tablasLas propiedades varan dependiendo de la seleccin realizada, es decir que las propiedades disponibles para una celda tienen alguna variacin con respecto a las disponibles para la tabla o la fila. A continuacin se documentan las propiedades a nivel de tabla, fila y celda.

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

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

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

8. BorderColor

9. 10. 11. 12. 13.

Cellpadding Cellspacing Height Width Rules

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

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

Identifier TooltipText Align Vertical Align Backcolor BorderColor

Propiedades de las celdas de una tablaLas propiedades de una celda de una tabla son las que se muestran a continuacin:

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

Identifier Tooltiptext Align VerticalAlign Background Backcolor Bordercolor Height Width Colspan Rowspan

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

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

Haga clic aqu para ver demostracin

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

Haga clic aqu para ver la demostracin

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

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

Propiedades Text Block en diseoLas propiedades de este tipo de control son:

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

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

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

Visible Caption Link LinkTarget Format Class

PROPIEDADES DEL CONTROL TEXTBLOCK EN LOS TEMASAdems de estas propiedades mencionadas, en la clase Textblock (o alguna clase derivada de ella) de un Tema, se pueden configurar otras propiedades para los

Textblocks. Ver Clase Textblock.

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

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

Propiedades del Error Viewer en diseoLas propiedades del control Error Viewer en diseo son:

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

Propiedades del Error Viewer en ejecucinAdems de las propiedades detalladas anteriormente, se pueden modificar las siguientes propiedades en tiempo de ejecucin: 1. 2. 3. 4. BackColor DisplayMode ForeColor Class

PROPIEDADES DEL CONTROL ERROR VIEWER EN LOS TEMASAdems de las propiedades mencionadas, en la clase Error Viewer de un Tema (o alguna clase derivada de ella), se pueden setear otras propiedades para el control. Ver Clase ErrorViewer

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

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

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

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

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

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

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

pelculas.

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

ESQUEMA DE TRABAJO EN INTERNETEs importante entender la diferencia del ambiente en el que se est trabajando: en Internet, cuando el usuario accede a una pgina del servidor Web para visualizarla, el Browser baja la pgina al cliente. Por lo tanto, no existe forma de detectar lo que realiza el usuario: el Servidor Web volver a tener el control cuando se dispare el evento ENTER o algn evento de usuario. En ese momento se enva (o se somete) el resultado al servidor para continuar con su

procesamiento. Es por esta razn que es importante destacar el orden en que se disparan los eventos y el momento en que las variables adquieren el valor ingresado por el usuario.

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

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

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

1. Start (nuevamente se dispara el evento Start) 2. Nueva lectura de las variables de la pantalla. Esto se realiza porque el usuario puede haberlas modificado (por ejemplo las variables de la parte fija del web panel que estn involucradas en las conditions) 3. Cdigo correspondiente al evento asociado al botn seleccionado. 4. Refresh 5. Load Relacionado con esto es importante destacar el momento en que las variables adquieren los valores ingresados por el usuario: solamente lo harn despus de presionar un botn (que es cuando el servidor Web tiene el control del procesamiento). Esto implica algunos cambios importantes en la forma de programar los objetos.

Por ejemplo, cualquier link a otro web panel especificado en el evento Start con una variable que se ingresa en el web panel no va a tener ningn valor cuando se haga clic sobre el link. Si en un Evento se usa una variable que se carga en otro evento, entonces esa variable debe estar presente en el form. Si no est en el form, la variable no tendr valor cuando se disparan los otros eventos (esto es por el orden en que ocurren los eventos). Adems, deber estar en el form despus del control en el que se carga la variable. Por ejemplo, si la variable se carga en el LOAD de un grid entonces la variable tiene que estar en pantalla despus del grid.

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

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

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

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

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

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

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

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

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

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

EventosLos eventos de los Web Panels son los mismos que en los Work Panels, es decir evento Start, Refresh, Load, Enter y los definidos por el usuario. La diferencia con los work panels es el orden de disparo de estos eventos. Esto est relacionado con el esquema de trabajo en Internet.

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

Por ejemplo, cualquier link a otro web panel especificado en el evento Start con una variable que se ingresa en un web panel no va a tener ningn valor cuando se haga clic sobre el link. Si en un Evento se usa una variable que se carga en otro evento, entonces esa variable debe estar presente en el form. Si no est en el form, la variable no tendr valor cuando se disparan los otros eventos (esto es por el orden en que ocurren los eventos). Adems, deber estar en el form despus del control en el que se carga la variable. Por ejemplo, si la variable se carga en el LOAD de un grid entonces la variable tiene que estar en pantalla despus del grid.

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

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

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

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

Propiedades

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

Comandos soportados por los objetos webA continuacin se detallan los comandos soportados por los objetos web.

CALLEl comando Call no presenta grandes diferencias con respecto al resto de los objetos GeneXus. Es importante tener en cuenta que los objetos web ejecutan en el servidor y por consiguiente no pueden realizar llamadas a programas que tengan salida en pantalla, ya que la ejecucin de dicha llamada cancelara por time-out. En resumen, desde un objeto web, se puede llamar a otro objeto web, a un procedimiento o reporte que no tengan salida en pantalla.

LinkEl comando link es equivalente al comando call para llamar a pginas estticas o redireccionar a una URL. Este comando puede ser utilizado dentro de cualquier evento de un objeto web con excepcin del evento Load. El resultado de la utilizacin de este comando es el redireccionamiento en forma automtica a la URL especificada dentro del mismo. La sintaxis de este comando es la siguiente:

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

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

Por ejemplo:

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

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

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

ReturnIncluir el comando return en un objeto web, es equivalente a hacer un CALL al objeto que lo invoc. En consecuencia no equivale a presionar el botn Back del browser, ya que si se ingresaron valores en variables del Web Panel llamador, los mismos no son mantenidos al ejecutar el comando Return.

Este comando Return puede ser ejecutado en cualquier evento o subrutina del Web Panel, salvo el evento Load y los mtodos Load de subfiles. Tampoco puede

ser ejecutado en subrutinas llamadas directa o indirectamente por el evento Load o mtodos Load de subfiles. En caso que se ejecute en las mencionadas situaciones los resultados son impredecibles.

En el caso del primer objeto web, el return intentar cerrar el navegador.Si se utiliza la funcin SetCookie (Ver funciones estndar Setcookie, Getcookie) y luego se ejecuta el comando Return el valor de la(s) cookie(s) se establece correctamente

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

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

DIFERENTES TIPOS DE GRILLAEn los objetos web, se dispone de ms de un tipo de grilla:

Grilla estndar Grilla Freestyle

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

GRIDS EN WEB PANELSEl botn que se encuentra en la barra de controles, permite insertar el control grid.

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

Cmo desplegar datos en un gridPor defecto todo atributo y variable que est dentro de un grid se despliega en ejecucin como texto, es decir que son nicamente de lectura y por consiguiente no pueden ser modificados.

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

1. si dentro de un evento del Web Panel se est utilizando el comando For each line o For each line in , todas las variables que estn dentro del grid pasan a ser de ingreso. Es posible indicar en este caso cules son las variables que no van a poder ser modificadas, utilizando la regla noaccept() o modificando la propiedad Read Only de la variable dentro del grid. 2. si dentro de la fila hay algn control con un evento clic asociado.

Cmo asociar eventos a una lnea de un gridEs posible asociar un evento a cualquier variable que pertenezca al grid.

Propiedades del Grid

A continuacin se detallan las propiedades generales del grid:

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

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

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

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

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

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

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

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

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

Propiedades de columnas en tiempo de ejecucinEn tiempo de ejecucin se pueden modificar las siguientes propiedades de las columnas de un grid:

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

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

PROPIEDADES DE GRIDS EN LOS TEMASEn la clase Grid o derivada de ella, en los Temas, es posible configurar propiedades adicionales para dicho control. Ver Clase Grid

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

Para insertar el grid Freestyle se debe utilizar el botn

de la barra de controles disponibles.

El grid Freestyle es bsicamente una tabla a la que se le pueden insertar los atributos / variables, text blocks, imgenes, botones, web components, embedded pages, grids freestyle y/o grids que se van a mostrar posteriormente en la pantalla. Este tipo de grid no posee ttulos para las columnas y adems permite tener ms de un tipo de control, atributo / variable en una misma celda, proporcionando de esta forma mayor libertad de diseo. Cabe destacar que el grid Freestyle posee las mismas propiedades mencionadas anteriormente para el grid tradicional. En este caso para poder visualizar las propiedades hay que seleccionar la tabla donde se encuentran los atributos / variables.

El comportamiento de las variables dentro de un grid Freestyle es anlogo al que presentan dentro de un grid, por lo tanto tambin quedan de ingreso si existe un For each