Introduccin Temas bsicos Web

Conceptos Bsicos de Web

A lo largo de este curso se vern distintas funcionalidades de GeneXus X para web, asi como se guiar en la construccin de una aplicacin que servir como gua para todo lo aprendido durante el desarrollo del curso. Crearemos una base de conocimiento para implementar una aplicacin 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 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.

Web Objects - Arquitectura

Ajax: Asynchronous JavaScript + XML Un nombre para un conjunto de tecnologas existentes operando juntas

Ms adelante veremos la influencia de Ajax en las aplicaciones generadas con GeneXus

Internet es una tecnologa madura que nos permite acceder y compartir informacin y aplicaciones empresariales con un nivel de libertad nunca antes imaginado. Ajax es el nombre que se ha dado a un conjunto de tecnologas 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 envo de una pgina al servidor, en una experiencia continua, sin esperas, donde el usuario interacta con una interfase viva, sin importar los viajes al servidor que ahora son transparentes para el usuario. Ajax representa un punto de inflexin en las aplicaciones Web, brindando una ventaja competitiva a quienes adopten esta arquitectura tempranamente. En el modelo tradicional de interaccin de una aplicacin web, el usuario solicita una pgina del servidor, la que es construida y enviada al browser. Esta pgina incluye un elemento form HTML para capturar los datos del usuario. Una vez que el usuario enva sus datos de entrada de vuelta al servidor (post), la siguiente pgina puede ser construida en base a esa entrada y devuelta al browser para ser mostrada, y as sucesivamente. Esta forma de interaccin 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 aplicacin. Sin embargo, tecnologas relativamente recientes posibilitan la irrupcin de Ajax, una revolucin en el mundo de las aplicaciones Web, que torna la interaccin entre el usuario y la aplicacin Web ms rpida y sin tiempos intiles de espera. Ajax incorpora: XHTML y CSS, que proveen presentaciones basadas en estndares Desplegado de la informacin e interaccin dinmica, utilizando Document Object Model (DOM) Intercambio y manipulacin de datos usando XML y XSLT Retorno asincrnico de datos utilizando el objeto XMLHttpRequest, y JavaScript, que es el lenguaje que une todo lo anterior, haciendo a Ajax posible.

Publicar Objetos Web

EnelServidor
TCP/IP ServidorWeb

EnelCliente(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 pginas Web.

Generadores
Alternativas
Generador.NET:ejecutasobreplataformaWindows. GeneradorJava:ejecutasobrecualquierplataformadondese puedainstalarunaJavaVirtualMachine. GeneradorRUBY: ejecutasobreplataformasWindows,Unix hastaelmomento. DBMS:TodoslossoportadosporGeneXus.

Java, .NET y Ruby son los generadores disponibles en GeneXus para desarrollar aplicaciones Web. Las aplicaciones podrn ejecutar con servidores Web por ej.: Windows, UNIX o ISeries y podrn 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 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.

Editor de Objetos Web

EditorWYSIWYGorientadoapginas Toolbox (controls /user controls)
Insertarcontroles

Barrasdeherramientas
Formatting HTMLSpecials

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 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. 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 manipular la alineacin de los controles dentro de los objetos Web. Complementando este editor, existe el Editor de Temas (que veremos ms 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 continuacin 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 opcin Insert del men de GeneXus o la barra de herramientas denominada Pallete.

Barra de herramientas Formating Esta barra de herramientas permite realizar las operaciones estndares de edicin 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 diseo los bordes de las tablas an cuando stos no se vean en ejecucin. Otra opcin interesante es Show Details que facilita el trabajo con controles de tipo Text Block. Document Outliner Tambin se cuenta con la ventana Document Outliner para trabajar con los controles del form. Se puede editar y observar el rbol de jerarqua 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 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, se visualiza la opcin: View 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 HTML, 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 la seccin Design.

Controles
Deobjetosstandard deGeneXus:
Edit Combo/Combo dinmico/List Box Checkbox RadioButton Botones Imgenes Grid Form

DeWebobjects deGeneXus:
Texto Text Block HyperLink Section HorizontalRule Group ErrorViewer Tabla Grid FreeStyle Embedded Page WebComponent

Controlespersonalizadosporel usuario(User Controls)

Estoscontroleslosveremosmsadelante.

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.

Propiedades Laasignacindelaspropiedadespuedehacersedirectamenteenelcontrol (diseo),dinmicamente(enejecucin)oenunaclasedeunTema.

3. En una clase de un Tema 1. Directamente en el control (Diseo)

Controles

2. Dinmicamente (en ejecucin)

A cada control podemos asignarle valores a sus propiedades: F4 Men View / Properties Clic derecho sobre el control / Properties Es importante resaltar que la asignacin de las propiedades puede hacerse directamente en el control (diseo), dinmicamente (en ejecucin) 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 ejecucin. En ambos casos, se asigna el valor a la misma, pero lo que vara es el costo de mantenimiento posterior. 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, se reduce el tiempo y esfuerzo de mantenimiento.

Qu es un Tema?
Theme: esunobjetoGeneXus,medianteelcualsepuedemodificarymantenerla presentacindetodaslaspginas(todoslosobjetos)Webdelaaplicacin,atravs delusodehojasdeestilo(CSS).

EnelTemaestnlasmismaspropiedadesqueenloscontroles,msotras,propiasde losCSS.

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 podrn ser asociados a alguna clase del Tema. Al asociar una clase a un control ste pasa a heredar la configuracin de las propiedades dada en la clase. Cmo asociar un tema a un objeto? Las formas de asociar un tema a los objetos GeneXus son dos: asignarla a nivel de la versin o especficamente del objeto. Este es el orden tambin para la precedencia: si est asignada a nivel de objeto, se considera ese valor, sino el de la versin. Para asociarlo al objeto directamente, se debe configurar la propiedad Theme perteneciente a las Object Properties. Para asociarlo a la versin, 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 versin. La propiedad Theme de la versin, est asociada por defecto al Tema GeneXusX, por lo cual, por defecto los objetos de la versin estn asociados al mismo Tema. Cmo asociar una clase a un control? 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 tiempo de ejecucin.

10

Orden de precedencia de las propiedades

Elordendeprecedenciaquesetieneencuentaparaqueelcontroladoptelas propiedadesconfiguradas,eselsiguiente: 1.Ejecucin 2.Diseo 3.Tema Recomendacin:configurarlaspropiedadesaniveldelosTemas,yaquedeesta formasereduceelcostodemantenimientodelsitio.

El orden de precedencia que se tiene en cuenta para que el control adopte las propiedades configuradas, es el siguiente: 1.Ejecucin 2.Diseo 3.Tema

Es decir que si una propiedad de un determinado control est configurada en el Tema, y tambin en diseo; la configuracin dada en diseo tiene precedencia sobre la del Tema; y la dada en ejecucin sobre la de diseo. 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 extensin .CSS (Cascading Style Sheet).

11

Textblock
Puedeservistocomotextoinsertadoenelform,conlaventajaquedinmicamente sepuedemodificar. Selespuededarmltiplesusos:
Desplegar mensajes: textblock.caption ='Welcome'+&username Asignar links: textblock.link =http://www.gxtechnical.com Embebercdigohtml enlaspginasgeneradas: PropiedadFormat:indicasi elcontenidodelcontroldebeser interpretadocomotextoocomocdigoHTML.Porej:
(Elcontenidodelcontrolser interpretadocomocdigoHTML) textblock1.format =1 textblock1.caption='<Aid="mipage">Mylink</A>

Los controles Text Block pueden ser vistos como texto insertado directamente en el form, con la ventaja que en forma dinmica (en ejecucin) se puede modificar el mismo. Para insertar un Text Block, se puede presionar el botn de la barra de controles disponibles. Edicin 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
PropiedadesenDiseoyEjecucin
Ejemplo:PropiedadFormat:indicasi elcontenido delcontroldebe serinterpretado como texto ocomo cdigo HTML. Control.Format =HTML|Text|RawHtml|Text withmeaningfulspaces Values 0:Text:Elcontenido delcontrolser interpretado como texto. 1.HTML:Elcontenido delcontrolser interpretado como cdigo HTML. 2.RawHtml:IdemHTML,pero elcontenido noaparecer entretags. 3.Textwithmeaningfulspaces:IdemText,excepto por losespacios, que sonmostrados tal cual estn.Enelcaso delvalorText,doso ms espacios soninterpretados como uno solo.

PropiedadesenlosTemas:
Lasmismaspropiedadesdelcontrol,seencuentranenlaclase Textblock (oalgunaclasederivadadeella)deunTema,sepueden configurarotraspropiedadesparalosText blocks.

13

HyperLink
SonlinksenelWebform.Permitenhacerlinks aotraspginasWeb.Sonusadosgeneralmente cuandoellinkesesttico. Propiedades:

14

Section
rea donde otros controles sonagregados como Imgenes,texto,etc..

Propiedades:
Class ControlName Height Width

15

Horizontal Rule
Estecontroltiene solamente implicancia cosmtica en elformWeb.Generalmente es usado para separar controles. Ejemplo:enelsiguienteWebPanelsetienedos HorizontalRules:

Enejecucin:

16

Group Control
Permite crear unmarco detrabajo visualque puede contener otros controles.

Elgrupo principalcontiene: Una tabla conuna imagen yungrid 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
Porqu esnecesariousarTablas?
AlineacindecontrolesenelWebform

Dequ elementossecompone?
Filas Columnas Celdas

Cuando se trabaja con objetos Web, es necesario utilizar tablas para poder alinear los controles dentro del formulario para mejorar el diseo de los mismos. Agregar tabla Para insertar una tabla se debe arrastrar el botn 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
PropiedadesdelasTablas:
Align Backcolor Background BorderColor BorderWidth CellPadding CellSpacing Class ControlName Height Rules Tooltiptext Width

Propiedadesdelasfilas:
Identifier TooltipText Align VerticalAlign Backcolor BorderColor

Propiedadesdelasceldasdeuna tabla:
Identifier Tooltiptext Align VerticalAlign Background Backcolor Bordercolor Height Width Colspan Rowspan

PropiedadesdetablasenlosTemas:
EnlaclaseTable (oderivadasdeella)deunTema,sepueden Configurarotraspropiedadesquepermitendefinirotras caractersticasalastablas.

Propiedades de las tablas Las propiedades varan dependiendo de la seleccin realizada, es decir que las propiedades disponibles para una celda tienen alguna variacin con respecto a las disponibles para la tabla o la fila.

19

Edicin de Tablas
PropiedadBorderwidth =0(paranoverlatablaycontenercontroles) ParavisualizarlosbordesdelaTablaendiseo: ParaeditarlasTablassecuentaconelMen Contextualpara:
Insertar/eliminarfilas/columnas Merge /split deceldas EjemplodeMerge

20

Form - Propiedades
PropiedadesenTiempodeDiseo:
ActiveLinkColor Backcolor Background BackgroundProperties BottomMargin Caption Class LeftMargin NotVisitedLinkColor RightMargin TextColor Tooltiptext TopMargin VisitedLinkColor WordWrap

Propiedadesdelform HTMLentiempodeejecucin:
Backcolor Background Caption Class HeaderRawHTML JScriptSrc Meta MetaEquiv

PropiedadesdelForm enlosTemas: Esposible

configurarenlaClaseForm (oderivadasdeella) enelobjetotema,variasdelaspropiedadesdelosforms disponiblesenGeneXus yotrasquenoestnenGeneXus.

21

Atributos y Variables Propiedades

CmoinsertarunAtributo/variable?
PropiedadesdetipoEdit:
Attribute AutoResize Class ControlName ControlType Displayflat Empty asnull EnableHistory Fill ForeColor Format Height InputType IsPassword Notify Context Change ReadOnly ReturnOnClick Suggest Tooltiptext Width

22

Botones
Estoscontrolespermiteneldisparodecdigoluegodeserpresionado. Cmoasociarleunevento? PropiedadOnclickEvent

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

23

Imgenes
GeneXus permiteintegrarimgenesalaKB,comologos, diagramas,dibujos,etc. Ventajas: Seimportan/exportan Seversionan Secopianautomticamente Puedenvariarsegnlenguaje,Tema.

Por ms informacin acerca del objeto Image, consultar la siguiente documentacin: http://wiki.gxtechnical.com/commwiki/servlet/hwikibypageid?4824

24

Imgenes
CmoinsertarunaimagenenelWebForm? Cmoasignaruneventoaunaimagen?
Diseo(propiedadOnClickEvent) Ejecucin(agregareventoClick alamismaconel cdigodeseado)
Event imageHome.click Home.call() Endevent
USER: ADMINISTRATOR | 10/10/08

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

Asignacin de evento en ejecucin Otra forma de asignar un evento a una imagen, es agregar el evento click de la misma con el cdigo deseado. De la misma forma, es posible asociar a una variable de tipo bitmap un evento. Si la imagen tiene asociado un link, pierde el mismo al quedar asociada a un evento. Como se mencion anteriormente, para asociar eventos de usuario a una imagen puede usarse la propiedad OnClickEvent o el evento Click. 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

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

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

PropiedadesdeimgenesenlosTemas:Ademsdeestaspropiedades,enlaclase Image (oderivadasdeella)deunTema, sepuedenconfigurarotraspropiedadesque permitendefinircaractersticasalasimgenes.

26

Imgenes
Podemos integrar imgenes 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 imgenes de la KB.

27

Imgenes
Podemoscambiarlavisualizacindelaventana,conelbotndevista,aligualqueenel exploradordeWindows.

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

28

Imgenes
Para agregar una imagen nueva a la KB, presionamos el botn New Image.

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

29

Imgenes
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

Imgenes
Si elegimos crear la imagen desde una ubicacin 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

Imgenes
Las imgenes internas o externas son funcionalmente idnticas, varan en:
Disponibilidad Las imgenes internas estn siempre accesibles (en tiempo de diseo o ejecucin), ya que se almacenan en la KB. Las imgenes externas no se almacenan, slo se almacena la referencia al sitio web y su disponibilidad depende del sitio. Tamao El espacio ocupado por las imgenes externas es despreciable

En la solapa Images, los logos varan para indicarnos si la imagen es externa o interna

32

Imgenes
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 segn el idioma.

33