Issuu on Google+

Introducción – Temas básicos Web

1


Conceptos Básicos de Web

A lo largo de este curso se verán distintas funcionalidades de GeneXus X para web, asi como se guiará en la construcción de una aplicación que servirá como guía para todo lo aprendido durante el desarrollo del curso. Crearemos una base de conocimiento para implementar una aplicación para una agencia de viajes que iremos desarrollando gradualmente a lo largo del curso. Comenzaremos por ver la arquitectura en general de las aplicaciones web y las alternativas disponibles en GeneXus. En la imagen que mostramos arriba se puede observar un esquema simplificado de la topología 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 páginas Web. Este servidor puede ser también el servidor de base de datos, o se puede tener un servidor específico para realizar esta tarea. 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. Por otro lado, los usuarios de la empresa (Intranet) podrán acceder a las páginas públicas y a las páginas privadas de la empresa.

2


Web Objects - Arquitectura • Ajax: Asynchronous JavaScript + XML • Un nombre para un conjunto de tecnologías existentes operando juntas

Más adelante veremos la influencia de Ajax en las aplicaciones generadas con GeneXus

Internet es una tecnología madura que nos permite acceder y compartir información y aplicaciones empresariales con un nivel de libertad nunca antes imaginado. Ajax es el nombre que se ha dado a un conjunto de tecnologías ya existentes que operando juntas permiten acortar la brecha existente entre las aplicaciones Win y las Web. Ajax transforma la experiencia del usuario Web desde una experiencia discontinua, donde el usuario debe esperar luego de cada envío de una página al servidor, en una experiencia continua, sin esperas, donde el usuario interactúa con una interfase viva, sin importar los viajes al servidor que ahora son transparentes para el usuario. Ajax representa un punto de inflexión en las aplicaciones Web, brindando una ventaja competitiva a quienes adopten esta arquitectura tempranamente. En el modelo tradicional de interacción de una aplicación web, el usuario solicita una página del servidor, la que es construida y enviada al browser. Esta página incluye un elemento form HTML para capturar los datos del usuario. Una vez que el usuario envía sus datos de entrada de vuelta al servidor (post), la siguiente página puede ser construida en base a esa entrada y devuelta al browser para ser mostrada, y así sucesivamente. Esta forma de interacción viene determinada por la naturaleza de HTTP y difiere de los modelos tradicionales de aplicaciones del desktop, que tienen una interfaz que está inherentemente conectada a la capa de la aplicación. Sin embargo, tecnologías relativamente recientes posibilitan la irrupción de Ajax, una revolución en el mundo de las aplicaciones Web, que torna la interacción entre el usuario y la aplicación Web más rápida y sin tiempos inútiles de espera. Ajax incorpora: • XHTML y CSS, que proveen presentaciones basadas en estándares • Desplegado de la información e interacción dinámica, utilizando Document Object Model (DOM) • Intercambio y manipulación de datos usando XML y XSLT • Retorno asincrónico de datos utilizando el objeto XMLHttpRequest, y • JavaScript, que es el lenguaje que une todo lo anterior, haciendo a Ajax posible.

3


Publicar Objetos Web • En el Servidor • TCP/IP • Servidor Web

• En el Cliente (cliente “fino”) • TCP/IP • Browser

Se debe disponer de una red TCP/IP, es decir, que tanto el servidor como el cliente deben tener instalado el protocolo de red TCP/IP. El servidor debe tener un software que lo habilite como servidor Web, normalmente es a este software al que se denomina Servidor Web o Web Server. El cliente únicamente necesita un browser para poder visualizar las páginas Web.

4


Generadores Alternativas

• Generador .NET: ejecuta sobre plataforma Windows. • Generador Java: ejecuta sobre cualquier plataforma donde se  pueda instalar una Java Virtual Machine. • Generador RUBY: ejecuta sobre plataformas Windows, Unix  hasta el momento. • DBMS: Todos los soportados por GeneXus. 

Java, .NET y Ruby son los generadores disponibles en GeneXus para desarrollar aplicaciones Web. Las aplicaciones podrán ejecutar con servidores Web por ej.: Windows, UNIX o ISeries y podrán usar cualquier manejador de base de datos, dentro de las plataformas soportadas por cada uno de los generadores GeneXus. Dependiendo del sistema operativo 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 decisión del generador a utilizar se tomará principalmente por los requerimientos adicionales o interacciones con otras aplicaciones, ya que el ‘look and feel’ de la aplicación será el mismo independientemente del generador que se utilice.

5


Editor de Objetos Web • Editor WYSIWYG orientado a páginas • Toolbox (controls / user controls) • Insertar controles

• Barras de herramientas • Formatting • HTML Specials

• Document Outliner • Design VS. Source

WYSIWYG Para editar los objetos Web se cuenta con un editor “WYSIWYG” (What you see is what you get) que permite que los usuarios puedan utilizarlo rápidamente y en forma intuitiva. Es un editor orientado a páginas, 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. Este editor provee el manejo de tablas, característica fundamental a la hora de diseñar páginas Web. Esta facilidad habilita al usuario a diseñar mejores páginas, así como le permite manipular la alineación de los controles dentro de los objetos Web. Complementando este editor, existe el Editor de Temas (que veremos más adelante), que permite configurar de una forma sencilla las propiedades de estos controles (definiendo clases para los mismos), simplificando así el desarrollo y mantenimiento de las aplicaciones Web. Toolbox: Permite insertar tanto controles como controles del usuario. Barra de Herramientas: Para trabajar con objetos Web se dispone de la barra de herramientas: habilita las funcionalidades del editor. A continuación se documentan las operaciones que se pueden realizar. Barra de herramientas Pallete: Para insertar controles en el form del objeto Web se puede utilizar la opción Insert del menú de GeneXus o la barra de herramientas denominada Pallete.

6


Barra de herramientas Formating Esta barra de herramientas permite realizar las operaciones estándares de edición y formateo de texto. HTML Specials Una de las opciones destacables relacionada con objetos Web es Show Borders, que permite visualizar los bordes de las tablas cuya propiedad Border esté con valor 0. De esta forma, se pueden ver en diseño los bordes de las tablas aún cuando éstos no se vean en ejecución. Otra opción interesante es Show Details que facilita el trabajo con controles de tipo Text Block. Document Outliner También se cuenta con la ventana ‘Document Outliner’ para trabajar con los controles del form. Se puede editar y observar el árbol de jerarquía de los controles. Design vs Source En el borde inferior de la pantalla cuando se visualiza el form de un objeto Web, se pueden observar varias secciones, entre ellas ‘Web Form’. Al hacer clic sobre ‘Web Form’ se puede diseñar la pantalla del objeto Web, es decir se insertan los controles y se visualiza el aspecto que va a tener en ejecución el mismo. Si se presiona el botón derecho del mouse dentro del formulario del objeto Web, se visualiza la opción: ‘View Source’. 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. Al cerrarla, se vuelve al formulario del objeto Web. Si se selecciona la opción ‘HTML’, se puede modificar el código HTML o agregar código, de forma tal que el cambio se mantiene en el objeto y se genera posteriormente. En este caso, el código se visualiza dentro de la ventana del objeto Web y para volver al formulario, es necesario volver a presionar la sección ‘Design’.

7


Controles • De objetos standard de GeneXus: • • • • • • • •

Edit Combo/Combo dinámico/List Box Checkbox Radio Button Botones Imágenes    Grid Form

• Controles personalizados por el  usuario (User Controls)

• De Web objects de GeneXus: • • • • • • • • • • •

Texto  Text Block HyperLink Section Horizontal Rule Group Error Viewer Tabla Grid Free Style Embedded Page Web Component

• Estos controles los veremos más adelante.

Iremos viendo los diferentes controles de los objetos Web y las propiedades de cada uno de ellos. Es importante resaltar que la asignación de las propiedades puede hacerse directamente en el control o en una clase de un Tema.

8


Controles

Propiedades • La asignación de las propiedades puede hacerse directamente en el control  (diseño), dinámicamente (en ejecución) o en una clase de un Tema. 3. En una clase de un Tema 1. Directamente en el control (Diseño)

2. Dinámicamente (en ejecución)

A cada control podemos asignarle valores a sus propiedades: • F4 • Menú View / Properties • Clic derecho sobre el control / Properties Es importante resaltar que la asignación de las propiedades puede hacerse directamente en el control (diseño), dinámicamente (en ejecución) o en una clase de un Tema. Podemos por ejemplo, poner una imagen con las propiedades de un control en el Tema, y cambiando la propiedad en ejecución. En ambos casos, se asigna el valor a la misma, pero lo que varía es el costo de mantenimiento posterior. En el caso de asignar las propiedades directamente en el control, estas solamente aplicarán al mismo. 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). Cualquier cambio, requerirá generar y compilar el objeto. En el caso de asignar las propiedades en la clase de un Tema, se reduce el tiempo y esfuerzo de mantenimiento.

9


¿Qué es un Tema? Theme: es un objeto GeneXus, mediante el cual se puede modificar y mantener la  presentación de todas las páginas (todos los objetos) Web de la aplicación, a través  del uso de hojas de estilo (CSS). 

• En el Tema están las mismas propiedades que en los controles, más otras, propias de  los CSS.

¿Qué es un Tema? 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 (mediante la propiedad “Theme”), los controles de ese objeto podrán ser asociados a alguna clase del Tema. Al asociar una clase a un control éste pasa a heredar la configuración de las propiedades dada en la clase. ¿Cómo asociar un tema a un objeto? Las formas de asociar un tema a los objetos GeneXus son dos: asignarla a nivel de la versión o específicamente del objeto. Este es el orden también para la precedencia: si está asignada a nivel de objeto, se considera ese valor, sino el de la versión. Para asociarlo al objeto directamente, se debe configurar la propiedad Theme perteneciente a las “Object Properties”. Para asociarlo a la versión, se debe configurar la propiedad “Default Theme”. Este mismo orden de precedencia se utiliza para determinar los valores por defecto de la propiedad “Theme”: el valor por defecto de la propiedad de un objeto es el valor de la propiedad de la versión. La propiedad Theme de la versión, está asociada por defecto al Tema “GeneXusX”, por lo cual, por defecto los objetos de la versión están asociados al mismo Tema. ¿Cómo asociar una clase a un control? La forma de asociar una Clase de un Tema a un control, es a través de la propiedad “Class”. La propiedad Class es una propiedad del control, y es posible también cambiarla en tiempo de ejecución.

10


Orden de precedencia de las propiedades • El orden de precedencia que se tiene en cuenta para que el control adopte las  propiedades configuradas, es el siguiente: 1. Ejecución  2. Diseño  3. Tema •

Recomendación: configurar las propiedades a nivel de los Temas, ya que de esta  forma se reduce el costo de mantenimiento del sitio.

El orden de precedencia que se tiene en cuenta para que el control adopte las propiedades configuradas, es el siguiente: 1.Ejecución 2.Diseño 3.Tema

Es decir que si una propiedad de un determinado control está configurada en el Tema, y también en diseño; la configuración dada en diseño tiene precedencia sobre la del Tema; y la dada en ejecución sobre la de diseño. Se recomienda en general configurar las propiedades a nivel de los Temas, ya que de esta forma se reduce el costo de mantenimiento del sitio. Cuando se trabaja con objetos Theme de la base de conocimiento, el Editor de Temas salva en el directorio Web bajo Resources\English (o el lenguaje de la KB), un archivo con extensión .CSS (Cascading Style Sheet).

11


Textblock • Puede ser visto como texto insertado en el form, con la ventaja que dinámicamente  se puede modificar. • Se les puede dar múltiples usos: ¾ ¾ ¾

Desplegar mensajes:  textblock.caption = 'Welcome ' + &username Asignar links : textblock.link = ‘http://www.gxtechnical.com’ Embeber código html en las páginas generadas: • Propiedad Format: indica si  el contenido del control debe ser  interpretado como texto o como código HTML. Por ej: (El contenido del control será interpretado como código HTML) textblock1.format = 1  textblock1.caption = '<A id="mipage">My link</A>’

Los controles ‘Text Block’ pueden ser vistos como texto insertado directamente en el form, con la ventaja que en forma dinámica (en ejecución) se puede modificar el mismo. Para insertar un Text Block, se puede presionar el botón de la barra de controles disponibles. Edición del control Text Block Los text blocks no pueden ser editados directamente desde el form y tienen que ser modificados desde las propiedades.

12


Textblock • Propiedades en Diseño y Ejecución Ejemplo: Propiedad Format: indica si  el contenido del control debe ser interpretado como texto o como código HTML. Control.Format = HTML|Text|RawHtml|Text with meaningful spaces Values 0: Text: El contenido del control será interpretado como texto. 1. HTML: El contenido del control será interpretado como código HTML. 2. RawHtml: Idem HTML, pero el contenido no aparecerá entre tags. 3. Text with meaningful spaces: Idem “Text”,  excepto por los espacios, que son mostrados tal cual están. En el caso del valor “Text”,  dos o  más espacios son interpretados como uno solo.

• Propiedades en los Temas: •

Las mismas propiedades del control, se encuentran en la clase Textblock (o alguna clase derivada de ella) de un Tema, se pueden  configurar otras propiedades para los Text blocks.

13


HyperLink • Son links en el Web form. Permiten hacer links a otras páginas Web. Son usados generalmente cuando el link es estático. • Propiedades:

14


Section • Área donde otros controles son agregados como Imágenes, texto, etc..

• Propiedades: • • • •

Class ControlName Height Width

15


Horizontal Rule • Este control tiene solamente implicancia cosmética en el form Web. Generalmente es usado para separar controles. • Ejemplo: en el siguiente Web Panel se tiene dos  Horizontal Rules:

• En ejecución:

16


Group Control • Permite crear un marco de trabajo visual que puede contener otros controles.

El grupo principal contiene: • Una tabla con una imagen y un grid • Otro grupo compuesto por tres botones.

Es importante mencionar que si un grupo se mueve de un lugar a otro, entonces todo su contenido será movido. Lo mismo sucede si se elimina un grupo: se eliminará todo su contenido.

17


Tablas • ¿Por qué es necesario usar Tablas? • Alineación de controles en el Web form

• ¿De qué elementos se compone? • Filas • Columnas • Celdas

Cuando se trabaja con objetos Web, es necesario utilizar tablas para poder alinear los controles dentro del formulario para mejorar el diseño de los mismos. Agregar tabla Para insertar una tabla se debe arrastrar el botón de la Toolbox en el Web Form. Una tabla está compuesta por filas, columnas y celdas, dentro de las que se encuentran los controles.

18


Tablas - Propiedades •

Propiedades de las Tablas: • • • • • • • • • • • • •

Align Backcolor Background BorderColor BorderWidth CellPadding CellSpacing Class ControlName Height Rules Tooltiptext Width

Propiedades de tablas en los Temas: En la clase Table (o derivadas de ella) de un Tema, se pueden  Configurar otras propiedades que permiten definir otras  características a las tablas. 

• Propiedades de las filas: • • • • • •

Identifier TooltipText Align Vertical Align Backcolor BorderColor

• Propiedades de las celdas de una  tabla: • • • • • • • • • • •

Identifier Tooltiptext Align VerticalAlign Background  Backcolor Bordercolor Height Width Colspan Rowspan

Propiedades de las tablas Las propiedades varían dependiendo de la selección realizada, es decir que las propiedades disponibles para una celda tienen alguna variación con respecto a las disponibles para la tabla o la fila.

19


Edición de Tablas • Propiedad Borderwidth = 0 (para no ver la tabla y contener controles)  • Para visualizar los bordes de la Tabla en diseño: • Para editar las Tablas se cuenta con el Menú Contextual para: • • •

Insertar / eliminar filas /columnas Merge / split de celdas Ejemplo de Merge

20


Form - Propiedades •

Propiedades en Tiempo de Diseño: • • • • • • • • • • • • • • •

ActiveLinkColor Backcolor Background BackgroundProperties BottomMargin Caption Class LeftMargin NotVisitedLinkColor RightMargin TextColor Tooltiptext TopMargin VisitedLinkColor WordWrap

Propiedades del form HTML en tiempo de ejecución: • • • • • • • •

Backcolor Background Caption Class HeaderRawHTML JScriptSrc Meta MetaEquiv

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 están en GeneXus. 

21


Atributos y Variables Propiedades • ¿Cómo insertar un Atributo/variable? •

Propiedades de tipo Edit: • • • • • • • • • • • • • • • • • • • •

Attribute AutoResize Class ControlName ControlType Display flat Empty as null EnableHistory Fill ForeColor Format Height InputType IsPassword Notify Context Change ReadOnly ReturnOnClick Suggest Tooltiptext Width

22


Botones • Estos controles permiten el disparo de código luego de ser presionado. • ¿Cómo asociarle un evento? • Propiedad OnclickEvent

¿Cómo insertar un Botón? Desde la Toolbox arrastrar el control Button hacia el form. Look & Feel: El tamaño de los botones queda determinado por el texto ingresado en la propiedad Caption del mismo. Para que tengan un tamaño fijo, se debe asociar mediante la propiedad Class a una clase de un tema que tenga un tamaño definido (propiedades Heigth y Width).

23


Imágenes GeneXus permite integrar imágenes a la KB, como logos,  diagramas, dibujos, etc. Ventajas: • • • •

Se importan/exportan Se versionan Se copian automáticamente  Pueden variar según lenguaje, Tema. 

Por más información acerca del objeto Image, consultar la siguiente documentación: http://wiki.gxtechnical.com/commwiki/servlet/hwikibypageid?4824

24


Imágenes • ¿Cómo insertar una imagen en el Web Form? • ¿Cómo asignar un evento a una imagen? • Diseño (propiedad OnClickEvent) • Ejecución (agregar evento Click a la misma con el código deseado) Event imageHome.click Home.call() Endevent

USER: ADMINISTRATOR

|

10/10/08

Asignación de evento en diseño Para asignar el evento en diseño 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 estándar 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 imágenes a los eventos estándar: Previous, Next, etc. En Web Panels, sirve para asociar el evento Enter a las imágenes.

Asignación de evento en ejecución Otra forma de asignar un evento a una imagen, es agregar el evento click de la misma con el código 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. Nota: Si una imagen tiene evento Click y, a su vez, un valor en la propiedad OnClickEvent, prevalece este último (se ignora el evento Click).

25


Imágenes • Propiedades en diseño: • • • • • • • • • • • • •

Align AlternateText BorderWidth Class ControlName Height Hspace Image OnClickEvent Tooltiptext UseMap Vspace Width

• Propiedades en ejecución: • • • • • • • • • • • • • •

AlternateText Bitmap BorderWidth Class Enabled Hspace Image InternalName Link LinkTarget Tooltiptext Visible Vspace Width

• Propiedades de imágenes en los Temas: Además de estas propiedades, en la clase  Image (o derivadas de ella) de un Tema, se pueden configurar otras propiedades que  permiten definir características a las imágenes.

26


Imรกgenes Podemos integrar imรกgenes a la KB, como logos, diagramas, dibujos, etc.

En el Folder View, bajo la carpeta Customization, hacemos doble clic sobre el nodo Images y se abrirรก una ventana Images para administrar las imรกgenes de la KB.

27


Imágenes Podemos cambiar la visualización de la ventana, con el botón de vista, al igual que en el  explorador de Windows.

Al seleccionar una imagen, tenemos una vista previa en el panel derecho.

28


Imágenes Para agregar una imagen nueva a la KB, presionamos el botón ‘New Image’.

Se ejecuta un Wizard, que nos guía para agregar una imagen a partir de una almacenada en disco (Create Image from File) o buscarla en la Web (Create External Image).

29


Imágenes Si elegimos ‘Create image(s) from File(s)’, el Wizard nos permite seleccionar imagen.

Al presionar ‘Finish’, se abrirá una solapa con los detalles de la imagen creada.

30


Imágenes Si elegimos crear la imagen desde una ubicación externa, debemos dar el nombre y el origen de la imagen (URL):

Al presionar ‘Finish’, se abrirá una nueva solapa con los detalles de la imagen.

31


Imágenes Las imágenes internas o externas son funcionalmente idénticas, varían en: Disponibilidad • Las imágenes internas están siempre accesibles (en tiempo de diseño o ejecución), ya que se almacenan en la KB. • Las imágenes externas no se almacenan, sólo se almacena la referencia al sitio web y su disponibilidad depende del sitio. Tamaño • El espacio ocupado por las imágenes externas es despreciable

En la solapa Images, los logos varían para indicarnos si la imagen es externa o interna

32


Imágenes Al hacer doble clic sobre el nombre de la imagen en la solapa ‘Images’, se abre una solapa con los datos de la imagen, donde podemos cambiar sus propiedades: Indica que la imagen depende del tema asignado a la KB

Indica que la imagen contiene texto, que se puede traducir según el idioma.

33


01-Introducci%25c3%25b3n-CursoGXXAvaWeb