MANUAL. GENEXUS Web Panels. versión 7.0

1

MANUAL

G

ENE

X

US

Web Panels

versión 7.0

Editor html de web panels _____________________________________7

Introducción _______________________________________________ 7

Descripción________________________________________________ 7

Diseño ____________________________________________________ 8

Font default para Web Panels __________________________________________ 8 Formateo de texto __________________________________________________ 9 Insertar controles y sus propiedades _____________________________________ 9 Design VS. Source_________________________________________________ 10

Form ____________________________________________________ 11

Propiedades del form en diseño _______________________________________ 11 Propiedades del form en tiempo de ejecución _____________________________ 12

Atributos y Variables _______________________________________ 13

Picture de dates y datetimes __________________________________________ 13 Propiedades del control edit en diseño __________________________________ 13 Appearance ______________________________________________________ 14 Propiedades control edit en tiempo de ejecución _________________________ 15 Propiedades de variables de tipo bitmap en diseño _________________________ 15 Propiedades variables bitmap en tiempo de ejecución _______________________ 16 PROPIEDADES SEGÚN EL TIPO DE CONTROL _______________________ 16 METODOS DE LOS CONTROLES EDIT ______________________________ 17

Imágenes_________________________________________________ 18

Base path for relative images _________________________________________ 18 Como asignar un evento a una imagen __________________________________ 18

Propiedades de las imágenes __________________________________ 19

Propiedades De Las Imágenes En Tiempo De Ejecución ____________________ 19

CONTROLES TEXT BLOCK ________________________________ 21

Propiedades Text Block en diseño _____________________________________ 21 Propiedades Text Block en ejecución __________________________________ 21

Botones __________________________________________________ 22

Propiedades de botones _____________________________________________ 22 Cómo asignar un evento a un botón ____________________________________ 23

Función LINK_____________________________________________ 24

Comando LINK ___________________________________________ 24

CALL’s VS LINK’s ________________________________________ 24

Tablas ___________________________________________________ 26

Propiedades de las tablas ____________________________________________ 26 Propiedades de las filas de una tabla____________________________________ 27 Propiedades de las celdas de una tabla __________________________________ 28

SUBFILES _______________________________________________ 29

Cómo desplegar datos en un subfile ____________________________________ 29 Cómo aceptar datos en un subfile ______________________________________ 29

3 Table ___________________________________________________________ 31

Propiedades modificables en ejecución _________________________________ 31 Propiedades de las columnas del subfile _________________________________ 31 Propiedades de columnas en tiempo de ejecución __________________________ 32

Subfile Freestyle ___________________________________________ 34

Propiedades del subfile Freestyle ______________________________ 35

Propiedades modificable s en ejecución __________________________ 35

Múltiples subfiles en web panels _______________________________ 36

Introducción _____________________________________________________ 36 Descripción ______________________________________________________ 36

SUBFILES ANIDADOS _____________________________________ 39

Determinación de tablas bases ________________________________________ 39 Disparo de Eventos ________________________________________________ 39

Comparación entre Web Panels y Work Panels ___________________ 41

Tabla Base_______________________________________________________ 41 Esquema de trabajo en Internet _______________________________________ 41 Eventos _________________________________________________________ 41 Variables ________________________________________________________ 42 Gatillado de fórmulas stand alone _____________________________________ 42 Reglas más importantes _____________________________________________ 42 Propiedades ______________________________________________________ 43

Comandos soportados por los Web Panels _______________________ 44

Link____________________________________________________________ 44 Load ___________________________________________________________ 44 Refresh _________________________________________________________ 44 Return __________________________________________________________ 44

FUNCIONES browserid. browser version _______________________46

BrowserID________________________________________________ 46

BrowserVersion ___________________________________________ 46

Preferences a considerar en el desarrollo de Web panels ____________ 47

Preferences generales_______________________________________________ 47 Preferences a nivel del Generador _____________________________________ 48

Preferences de Java_________________________________________ 50

Servlet Directory __________________________________________________ 50 SSP base URL ____________________________________________________ 50 Static content b ase URL_____________________________________________ 50 Static Content Directory seen by Client _________________________________ 51 Auto compress web pages ___________________________________________ 51

FUNCIONES de cookies_____________________________________52

Introducción ______________________________________________ 52

¿Que son las cookies? ______________________________________________ 52

Descripción_______________________________________________ 53

Ejemplos _________________________________________________ 54

smart static Panels__________________________________________56

Descripción_______________________________________________ 56

Generación de SSP _________________________________________ 56

Generación de SSP a partir de la línea de comandos________________________ 57 Generación de SSP a partir de otro objeto GeneXus ________________________ 59 Consideraciones___________________________________________________ 60

Ejecución desde el browser___________________________________ 60

FAQ – Preguntas frecuentes __________________________________ 60

Limitaciones ______________________________________________ 61

Cómo agregar código HTML a un Web Panel ____________________ 62

Editar código HTML generado _______________________________________ 62 Asignar HTML a una variable o text block ______________________________ 63 Código HTML y JavaScripts _________________________________________ 64

Plataformas y alternativas ____________________________________ 65

Requerimientos VB (CGI)____________________________________ 66

Requerimientos para desarrollo _______________________________________ 66 Requerimientos en producción________________________________________ 66

Requerimientos VB (ASP)____________________________________ 68

Requerimientos para desarrollo _______________________________________ 68 Requerimientos en producción________________________________________ 68

Requerimientos C/SQL______________________________________ 71

Requerimientos para desarrollo _______________________________________ 71 Requerimientos en producción________________________________________ 74

Requerimientos JAVA ______________________________________ 77

Requerimientos para el desarrollo _____________________________________ 77 Requerimientos en el servidor ________________________________________ 78 Requerimientos en producción________________________________________ 79

Propiedades de ejecución VB _________________________________ 80

Visual Basic 5.0 o Visual Basic 6.0 Path:________________________________ 80 Execution Mode __________________________________________________ 80 Compile & Execute ________________________________________________ 80 Execute from interpreter. ____________________________________________ 80 Web Panels Settings (Solo para Web Panels g enerados como CGI) ____________ 80 CGI-BIN Path ____________________________________________________ 80 Start URL _______________________________________________________ 81

Propiedades de ejecución C/SQL ______________________________ 82

Transfer_________________________________________________________ 82 Submit Mode _____________________________________________________ 83

Propiedades de e jecución de JAVA _____________________________ 84

Java Options _____________________________________________________ 84

Glosario de propiedades de controles ___________________________ 88

Active Link Color:_________________________________________________ 88 Align ___________________________________________________________ 88 Alternate text _____________________________________________________ 88 Attribute ________________________________________________________ 89

5 Background ______________________________________________________ 89 Background Properties______________________________________________ 90 Backstyle ________________________________________________________ 90 Bitmap__________________________________________________________ 90 BorderColor______________________________________________________ 90 Borderwidth______________________________________________________ 90 Bottom Margin ___________________________________________________ 90 Caption _________________________________________________________ 90 CellPadding______________________________________________________ 91 CellSpacing ______________________________________________________ 91 Col span ________________________________________________________ 91 Cols ____________________________________________________________ 91 Control Name ____________________________________________________ 91 Control Type _____________________________________________________ 91 Enabled _________________________________________________________ 91 Fill ____________________________________________________________ 92 Font____________________________________________________________ 92 FontBold ________________________________________________________ 92 FontItalic ________________________________________________________ 92 FontName _______________________________________________________ 92 FontSize ________________________________________________________ 92 FontStrikeThru ___________________________________________________ 92

FontUnderline _____________________________________________ 93

ForeColor _______________________________________________________ 93 Format__________________________________________________________ 93 Height __________________________________________________________ 93 Horizontal Space __________________________________________________ 93 IsPassword ______________________________________________________ 93 Left Margin ______________________________________________________ 93 LineColor _______________________________________________________ 94 LineFont ________________________________________________________ 94 Link____________________________________________________________ 94 LinkTarget_______________________________________________________ 94 Low resource _____________________________________________________ 94 Not Visited Link Color _____________________________________________ 94 On Click Event ___________________________________________________ 95 Position _________________________________________________________ 95 Read Only _______________________________________________________ 95 Right Margin _____________________________________________________ 95 Row span________________________________________________________ 95 Rows ___________________________________________________________ 95 Rules ___________________________________________________________ 96 Source __________________________________________________________ 96 Text Color _______________________________________________________ 96 Title ____________________________________________________________ 96 TitleBackStyle ____________________________________________________ 96 TitleFont ________________________________________________________ 96 TitleFontBold ____________________________________________________ 96 TitleFontItalic ____________________________________________________ 96 TitleFontName ___________________________________________________ 97 TitleFontSize _____________________________________________________ 97 TitleFontStrikeThru ________________________________________________ 97 TitleFontUnderline ________________________________________________ 97 TitleForeColor____________________________________________________ 97 TitleFormat ______________________________________________________ 97

ToolTipText _____________________________________________________ 97 Top Margin ______________________________________________________ 97 UseMap_________________________________________________________ 97 Vertical Align ____________________________________________________ 98 Vertical space ____________________________________________________ 98 Visible __________________________________________________________ 98 Visited Link Color_________________________________________________ 98 Width __________________________________________________________ 98 Word Wrap ______________________________________________________ 99

Dudas Frecuentes _________________________________________ 100

¿En que objetos se puede usar? ______________________________________ 100 ¿Cuál es la diferencia entre el editor anterior y este?_______________________ 100 ¿Hay compatibilidad? _____________________________________________ 100 ¿Qué es una tabla, por qué conviene usarlas? ____________________________ 100 ¿Puedo hacer un subfile con líneas de distintos colo res alternadas? ___________ 100 ¿Para qué sirven los subfiles Freestyle? ________________________________ 101 ¿Lo que se ve en diseño es lo mismo que se ve en ejecución?. _______________ 102

¿Por qué en ejecución los controles se mueven cuando se cambia el tamaño de la ventana? 102

Las Pictures de los controles, ¿sirven para entrada o sólo para salida?_ 102

¿Cómo se puede agregar o modificar el código HTML de un Web Panel? ______ 103 ¿Cómo cambiar el interlineado en el nuevo editor HTML? __________________ 103 ¿Cómo oculto los bordes de las tablas?_________________________________ 103

Conversión de Web Panels __________________________________ 104

Introducción ____________________________________________________ 104 Descripción _____________________________________________________ 104 Requisitos ______________________________________________________ 104 ¿Cómo se realiza la conversión? _____________________________________ 104 Limitaciones ____________________________________________________ 105

Ejemplos ________________________________________________ 106

7

EDITOR HTML DE WEB PANELS

Introducción

La finalidad de este editor es potenciar y simplificar la edición del form de los web panels permitiendo crear fácilmente web sites vistosos y potentes. Este editor es del tipo "WYSIWYG" (What you see is what you get) lo que permite al desarrollador visualizar en diseño la página web que se va a publicar. Para esto se licenció un editor similar al Front Page de Microsoft, que fue diseñado siguiendo el estándar de las herramientas Microsoft Office, lo que permite que los usuarios puedan utilizarlo rápidamente y en forma intuitiva.

La diferencia fundamental existente con respecto al editor que se disponía en versiones anteriores a la 7.0, es que este editor está 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.

Descripción

El uso de este editor es muy sencillo, de forma que todo el diseño realizado se puede visualizar en ejecución sin necesidad de incluir código HTML en el Form “o utilizar las Web Properties (*)”. A modo de ejemplo, si se desea modificar el tamaño de font utilizada en el Web Panel, simplemente se selecciona el texto, se selecciona el tamaño deseado.

El editor facilita el formateo de textos (tamaño de letra, tipo de letra, color, etc.), permite la inserción de controles GeneXus (Controles edit, subfile, botones, etc.). Una de las mejoras importantes en el diseño que provee el editor es el manejo de tablas (sin necesidad de usar Web properties (*)), 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 tener el control de la alineación de los controles dentro del Web Panel.

(*) Las Web Properties son una facilidad existente en el editor de las versiones anteriores a GeneXus 7.0 para poder incluir tags HTML en los objetos.

Diseño

A continuación se documentan las características más importantes para el diseño de Web Panels. En los Web Panels se dispone de dos barras de herramientas, una habilita las funcionalidades del nuevo editor, mientras que la otra permite la inserción de los controles. A continuación se documentan las operaciones que se pueden realizar con cada una de ellas, así como las características de los controles disponibles en Web Panels.

Font default para Web Panels

Se puede configurar el tipo de letra que se utilizará al insertar atributos / variables y columnas de subfile dentro del form. Para hacerlo deben realizar los siguientes pasos:

1. Seleccionar la opción File/KB Preferences.

2. A continuación se visualizará el siguiente diálogo:

3. Al presionar el botón ‘Change’ se desplegará el siguiente diálogo, permitiéndole definir el tipo de letra que se utilizará por defecto para atributos / variables y columnas de subfiles.

9 NOTA:

1. El tipo de letra por defecto de los Texto y los Text Block es el que se tenga seteado en el PC como el tipo de letra por defecto del browser (usualmente Times New Roman). La modificación del tipo de letra por defecto del browser se puede realizar desde el Panel de control ingresando a la configuración de las ‘Opciones de Internet’.

2. Si ya se definieron Web Panels y se modifica el tipo de letra por defecto del modelo, el nuevo valor no aplica a los controles ya existentes dentro de los mismos.

Formateo de texto

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

Las operaciones que se pueden realizar son las estándares de edición y formateo de texto. La opción destacable relacionada con Web Panels es , 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.

Insertar controles y sus propiedades

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

• 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

• Subfile

• Texto

• Text Block

• Tabla

• Subfile Free Style

Para insertar controles en el form del web panel se puede utilizar la opción Insert del menú de GeneXus o la siguiente barra de herramientas.

Más adelante se detallan los controles disponibles, así como las opciones disponibles en dicha barra de herramientas.

Design VS. Source

En el borde inferior de la pantalla cuando se visualiza el form de un Web Panel, se pueden observar dos secciones: ‘Design’ y ‘Source’.

Por defecto, se trabaja en la sección ‘Design’ que es donde se insertan los controles y se visualiza el aspecto que va a tener en ejecución el Web Panel.

Si se selecciona ‘Source’, se puede visualizar el código HTML correspondiente al diseño realizado. Esto permite que el usuario modifique el código HTML generado como se verá más adelante.

11

Form

Al form de los web panels se le pueden asignar propiedades en tiempo de diseño y algunas de ellas pueden modificarse en tiempo de ejecución (mediante eventos).

Propiedades del form en diseño

Las propiedades para el form son las siguientes:

La última columna del diálogo indica si el valor asignado a la propiedad es el valor por defecto o no. El asterisco de color negro significa que es el valor por defecto, el gris es que fue modificado.

1. BackColor 2. TextColor 3. Background 4. Background Properties 5. TooltipText 6. Word Wrap 7. Active Link Color 8. Visited Link Color 9. Not Visited Link Color 10. Top Margin

11. Bottom Margin 12. Left Margin 13. Right Margin

Propiedades del form en tiempo de ejecución

En ejecución se pueden modificar las siguientes propiedades del Form: 1. BackColor

2. Background

3. Caption: El caption del form se transforma en el título de la ventana. Por defecto, tiene el nombre del web panel. Esta propiedad solamente puede modificarse en tiempo de ejecución.

13

Atributos y Variables

Si en el diálogo de seleccionar atributos o en el diálogo de seleccionar variables se seleccionan varios a la vez, éstos se insertan en el formulario dentro de una tabla, simplificando la tarea de alineación de los mismos.

Al seleccionar un control y presionar el botón derecho del mouse aparecen las propiedades del control para ser editadas. Estas propiedades se detallan a continuación.

También existe la opción View Source que permite ver el fuente HTML generado. Para modificar las propiedades de estos controles en ejecución (es decir en algún evento del objeto), es necesario programarlo (ejemplo: &pwd.IsPassword = 1)

Picture de dates y datetimes

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

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 válida: esto lo siguen haciendo los programas.

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

Propiedades del control edit en diseño

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

1. Attribute

2. Control Type: Las propiedades que aplican sobre los controles Edit, dependen del tipo de control que se seleccione. (Ver propiedades según el tipo de control).

Appearance

Dentro del grupo Appearance se encuentran todas las propiedades que aplican al aspecto del control. Las mismas se detallan a continuación:

1. Read Only

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

3. Width: para controles edit debe ingresarse en pixels. 4. Fill 5. BackColor 6. ForeColor 7. Font 8. Format

15

Propiedades control edit en tiempo de ejecución

Además de las propiedades vistas anteriormente, existen otras que permiten modificar en tiempo de ejecución los controles de tipo edit. Las propiedades son:

1. Enabled 2. BackStyle 3. FontBold 4. FontItalic 5. FontName 6. FontSize 7. FontStrikethru 8. FontUnderline 9. ForeColor 10. IsPassword 11. Link 12. LinkTarget 13. Visible

Propiedades de variables de tipo bitmap en diseño

Las propiedades que se detallan a continuación aplican únicamente a variables de tipo bitmap.

1. Borderwidth 2. Alternate Text 3. Tooltiptext 4. Align 5. HorizontalSpace 6. VerticalSpace

Propiedades variables bitmap en tiempo de ejecución

A las variables de tipo bitmap se le pueden modificar las siguientes propiedades en tiempo de ejecución: 1. Alternate Text 2. Borderwidth 3. Link 4. LinkTarget 5. Enabled 6. TooltipText 7. Visible

NOTA: La propiedad Enabled de Runtime permite habilitar (Enabled=1)/deshabilitar (Enabled=0) la ejecución del evento asociado a la variable bitmap.

PROPIEDADES SEGÚN EL TIPO DE CONTROL

COMBO BOX

Las propiedades a nivel de diseño que aplican son: 1. Attribute 2. Backcolor 3. Forecolor 4. Fill 5. Font 6. Read Only

17 4. FontBold 5. FontItalic 6. FontName 7. FontSize 8. FontStrikethru 9. FontUnderline 10. ForeColor 11. Visible

NOTA : Alineación de un combo/dyncombo en subfiles. Siempre se alinea a la izquierda independientemente del tipo de datos. Esto se hace así porque aun cuando el combo sea sobre un atributo numérico los valores que se muestran en el combo son de tipo carácter.

RADIO BUTTON, CHECK BOX

Las propiedades a nivel de diseño que aplican son: 1. Attribute

2. Backcolor 3. Forecolor 4. Fill 5. Font.

Los radio button tienen también la propiedad Radio Direction que permite indicar si las opciones del radio se desplegarán en forma vertical u horizontal.

Las propiedades a nivel de ejecución son: 1. Backcolor 2. Backstyle 3. Enabled 4. FontBold 5. FontItalic 6. FontName 7. FontSize 8. FontStrikethru 9. FontUnderline 10. ForeColor 11. Visible

Para los radio buttons no aplican las propiedades Enabled ni ReadOnly.

METODOS DE LOS CONTROLES EDIT

Los métodos que aplican a los controles edit de tipo combo box, dynamic combo box, listbox y radio button son:

• AddItem

• RemoveItem

Imágenes

Cuando se trabaja con Web Panels se pueden distinguir dos ambientes muy diferentes: el de diseño y el de ejecución. Por ambiente de diseño, nos referimos al ambiente en que se desarrollan los web panels y por ambiente de ejecución a la ejecución propiamente dicha de los web panels.

En particular esto es muy importante al trabajar con imágenes, ya que en diseño las mismas se buscan en el camino ingresado (Ej. : c:\modelo\imagenes\img.gif), pero en ejecución es necesario referenciar el camino virtual donde se encuentran las mismas – normalmente en 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 administración del mismo.

Es por esta razón que se dispone de una preference a nivel de diseño denominada ‘Base path for relative images’ .

Base path for relative images

En esta preference del modelo de diseño, se puede ingresar el path absoluto que se va a utilizar mientras se trabaja en diseño (siguiendo con el ejemplo anterior: c:\modelo). Luego en el Web Panel, para insertar una imagen se debe seleccionar el botón de la barra de controles disponibles, y en el diálogo para ingresar el origen de la imagen se debe ingresar el path relativo (ej: /imágenes/img.gif). De esta forma la imagen seleccionada se va a visualizar tanto en diseño como en ejecución.

Como asignar un evento a una imagen

Para poder asociar un evento a una imagen se debe dar un nombre a la misma (por ej: img) y luego en los eventos, agregar Event img.click con el código deseado. De la misma forma, es posible asociar a una variable de tipo bitmap un evento .

Notas:

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

• También se puede asignar un evento a una imagen que se encuentre dentro de un subfile.

En el caso de las variables tipo bitmap actúan como botones y funciona además la propiedad Enabled ( que por defecto esta en 1 - true- ) y permite deshabilitar el botón en ejecución (runtime).

19

Propiedades de las imágenes

A continuación se detallan las propiedades disponibles para las imágenes en tiempo de diseño. 1. Control Name 2. Source 3. LowResSource 4. Height 5. Width 6. Borderwidth 7. Alternate Text 8. Tooltip Text 9. Horizontal Space 10. Vertical Space 11. Align 12. UseMap

Propiedades De Las Imágenes En Tiempo De Ejecución

Las propiedades de las imágenes que pueden modificarse en tiemp o de ejecución son:

1. Borderwidth 2. TooltipText

3. AlternateText 4. Bitmap

5. Enabled: La propiedad Enabled de Runtime permite habilitar

(Enabled=1)/deshabilitar (Enabled=0) la ejecución del evento asociado a la variable bitmap.

6. Link: Si se programa el evento Click de una imagen se ignora la propiedad Link.

7. LinkTarget 8. Visible

21

CONTROLES TEXT BLOCK

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.

Propiedades Text Block en diseño

Las propiedades de este tipo de control son: 1. Control Name

2. Format: El valor por defecto para Text Blocks es HTML.

Propiedades Text Block en ejecución

Además de las propiedades detalladas anteriormente, se pueden modificar las siguientes propiedades de los Text Blocks en tiempo de ejecución:

1. Visible 2. Caption 3. Link 4. Linktarget

Botones

Para insertar un botón en el formulario se puede seleccionar de la barra de controles disponibles.

En los web panels pueden usarse varios botones y asociarles eventos (predefinidos de GeneXus o definidos por el usuario). Al presionar el botón derecho del mouse se visualiza el siguiente diálogo que habilita al usuario a editar las propiedades del mismo o a editar el evento que el botón tiene asociado.

Propiedades de botones

1. Control Name 2. Caption

23

Cómo asignar un evento a un botón

Para asignar un evento a un botón se puede ingresar directamente el nombre del evento (entre comillas simples) o hacer clic al botón . Al utilizar este selector de eventos se visualiza el siguiente diálogo, con los eventos disponibles, habilitando al usuario la creación un nuevo evento.

Función LINK

La función LINK permite “enlazar” un web panel con otro web panel o URL. Esta función se puede asociar a la propiedad link de un control dentro de cualquier evento del Web Panel, teniendo como resultado que al hacer click sobre dicho control se realiza la llamada al Web Panel o URL referenciado en el link.

La sintaxis de la función link es:

link(Objeto/URL, [par1], [par2],..., [parn])

siendo Objeto/URL el Web Panel o URL a llamar y [par1]...[parn] el conjunto de parámetros a pasar a los mismos.

NOTAS:

1. El Objeto debe ser seleccionado utilizando la opción Insert/Object o Ctrl+B. Ej: &var.link = link(hLogin)

2. Si se desea llamar a una URL, la URL debe ser ingresada entre ‘’ (comillas simples/dobles).

Ej.: &var.link = link(‘http://www.artech.com.uy’).

3. Si se desea hacer un link utilizando un atributo que contiene la url o el nombre del Web Panel correspondiente, se debe utilizar la siguiente sintaxis:

&var.link = link(att:AplLnk), siendo AplLnk un atributo de alguna tabla. 4. El pasaje de parámetros es opcional.

Comando LINK

Ver Comandos/LINK.

CALL’s VS LINK’s

Para relacionar web panels dentro de una aplicación se dispone de los comandos call, link y la función link.

A continuación se realiza una comparación para aclarar las diferencias entre los mismos.

Desde un web panel se puede hacer CALL a:

• Web Panels

• Procedimientos (que no tengan "salida")

La función y el comando LINK puede hacer referencia a:

• web panels

25 NOTAS:

1. La función link se dispara cuando el usuario hace click sobre el mismo. 2. El comando link, en cambio se ejecuta en forma automática cuando se

ejecuta el evento. A diferencia del call, el comando link permite redireccionar a otros sitios web o páginas dentro de otros directorios del sitio donde se está ejecutando el Web Panel.

Tablas

Como se ha mencionado anteriormente, en Web Panels se deben utilizar tablas para poder alinear los controles dentro del formulario y de esta forma mejorar el diseño de los mismos.

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

Propiedades de las tablas

Las propiedades 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. A continuación 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 posic ionarse en los bordes de la misma) y presionar el botón derecho del mouse. Seleccionar la opción Properties del menú pop-up que se despliega.

Otra forma de editarlas es presionando el botón derecho del mouse estando posicionado en cualquier celda de la tabla, y después ir a la sección de Table. En este caso, se podrán editar además de las propiedades de la tabla, las de la fila a la que pertenezca la celda y las propias de la celda.

27 1. Tooltip Text

2. Align

3. Background 4. Backcolor

5. BorderWidth: 0 indica que no tendrá borde en ejecución, pero podrá verse en diseño usando el botón de la barra de herramientas. El valor por defecto es 1. 6. BorderColor 7. Cellpadding 8. Cellspacing 9. Height 10. Width 11. Rules

Propiedades de las filas de una tabla

Como se puede observar en el diálogo de propiedades –sección ROW-, se pueden asignar valores a propiedades para una fila particular dentro de las tablas. Estos valores tendrán preferencia a los asignados para la tabla en general.

Las propiedades de las filas son algunas de las propiedades de las tablas y tienen además una nueva propiedad que es la que se documenta a continuación:

1. TooltipText 2. Align 3. Vertical Align 4. Background 5. Backcolor 6. BorderColor

Propiedades de las celdas de una tabla

Como se puede observar en el diálogo de propiedades, las celdas mantienen algunas propiedades de las tablas y tienen dos nuevas propiedades que se documentan a continuación: 1. Tooltiptext 2. Align 3. VerticalAlign 4. Background 5. Backcolor 6. Bordercolor 7. Height 8. Width 9. Colspan 10. Rowspan

29

SUBFILES

El botón que se encuentra en la barra de controles, permite insertar el control subfile. Los subfiles permiten desplegar datos repetitivos, en atributos o variables. Las columnas de los subfiles pueden ser atributos, variables (incluyendo las de tipo bitmap).

Cómo desplegar datos en un subfile

Por defecto todo atributo y variable que está dentro de un subfile se despliega en ejecución como texto, es decir que son únicamente de lectura y por consiguiente no pueden ser modificados.

Cómo aceptar datos en un subfile

Es posible aceptar datos en las variables de un subfile dependiendo de la programación de los eventos existentes en el objeto: si dentro de un evento del Web Panel se está utilizando el comando For each line o For each line in <subfile>, todas las variables que están dentro del subfile pasan a ser de ingreso. Es posible indicar en este caso cuáles 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 subfile.

Cómo asociar eventos a una línea de un subfile

Es posible asociar un evento a una variable de tipo bitmap que pertenezca al subfile. Por más información referirse a la sección Imágenes.

Propiedades del Subfile

En este nuevo editor, se cuenta con una serie de mejoras para el diseño de los subfiles.

A continuación se detallan las propiedades generales del subfile: descripción

1. Control Name 2. Auto Resize 3. Width 4. LineColor 5. LineFont 6. TitleColor 7. TitleFont 8. BackColorStyle 9. Rows NOTAS:

1. Cálculo del ancho de cada columna de un subfile.

El ancho de cada columna de un subfile se especifica como un porcentaje del ancho total del subfile (que por defecto no se especifica, el browser lo calcula en función al contenido de todas las celdas).

31 2. Las propiedades LineColor, LineFont, TitleColor y TitleFont aplican a todas las columnas del subfile, para modificar los valores correspondientes a una determinada columna, se deben modificar las propiedades de la misma (ver mas adelante).

LineColor, LineFont

Permiten indicar el color y el tipo de letra de las líneas del subfile.

Table

Los subfiles también tienen algunas propiedades configurables para las tablas Estas propiedades son: 1. ToolTiptext 2. Align 3. Background, 4. BorderWidth 5. Cellpadding 6. Cellspacing 7. Rules.

Propiedades modificables en ejecución

A continuación se detallan las propiedades que se pueden modificar a los subfiles en tiempo de ejecución:

1. Visible: si la propiedad Visible tiene el valor 0, el subfile completo desaparece del formulario.

Propiedades de las columnas del subfile

También es posible indicar propiedades particulares para las diferentes columnas que forman el subfile. Para esto, se debe seleccionar la opción Columns del menú que aparece al hacer clic en el subfile.

En ese diálogo, seleccionando Properties sobre una columna se despliega el siguiente diálogo:

Las propiedades son: 1. ReadOnly 2. Autoresize 3. Width 4. Position 5. Title 6. TitleFormat 7. TitleFont 8. TitleForeColor 9. Visible 10. Heigth 11. BorderWidth 12. AlternateText 13. Tooltiptext 14. HorizontalSpace 15. VerticalSpace

Propiedades de columnas en tiempo de ejecución

En tiempo de ejecución se pueden modificar las siguientes propiedades de las columnas de un subfile:

1. Backcolor 2. Backstyle

33 6. FontName 7. FontSize 8. FontStrikeThru 9. FontUnderline 10. ForeColor 11. Format 12. IsPassword 13. Link 14. LinkTarget 15. Title 16. TitleBackcolor 17. TitleBackstyle 18. TitleFontBold 19. TitleFontItalic 20. TitleFontName 21. TitleFontSize 22. TitleFontStrikeThru 23. TitleFontUnderline 24. TitleForeColor 25. TitleFormat 26. Visible

Subfile Freestyle

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

Para insertar el subfile Freestyle se debe utilizar el botón de la barra de controles disponibles.

El subfile Freestyle es básicamente una tabla a la que se le pueden insertar los atributos / variables, text blocks y/o imágenes que se van a mostrar posteriormente en la pantalla. Este nuevo tipo de subfile no posee títulos para las columnas y además permite tener más de un tipo de control, atributo / variable en una misma celda, proporcionando de esta forma mayor libertad de diseño. Cabe destacar que el subfile Freestyle posee las mismas propiedades mencionadas anteriormente para el subfile 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 subfile Freestyle es análogo al que presentan dentro de un subfile, por lo tanto también quedan de ingreso si existe un For each line o For each line in <subfile> dentro de algún evento. Nuevamente este comportamiento puede modificarse, agregando la regla noaccept o cambiando la propiedad Read Only.

35

Propiedades del subfile Freestyle

Para visualizar las propiedades de un subfile Freestyle, hay que seleccionar la tabla del subfile, presionar el botón derecho del mouse y seleccionar la opción ‘Properties’. A continuación se documentan las propiedades disponibles para el subfile Freestyle.

1. Control Name 2. BackColorStyle 3. Rows

4. Cols

Propiedades modificables en ejecución

En tiempo de ejecución se puede modificar la siguiente propiedad:

1. Visible: Si la propiedad Visible tiene el valor 0, el subfile free-style desaparece del formulario En el caso de tener subfiles anidados, la propiedad Visible aplicada al subfile padre, aplica también a los subfiles hijos.

Múltiples subfiles en web panels

Introducción

El objetivo es tener la posibilidad de diseñar Web Panels con más de una grilla o Subfile para potenciar el desarrollo de estos objetos, entre otras cosas para resolver en el mismo objeto accesos a diferentes tablas.

Descripción

El uso de varios subfiles en un web panel, implicaron un cambio en la forma de especificar en GeneXus las reglas, los eventos y las condiciones asociados a los mismos.

A continuación se detallan los cambios de comportamiento y las forma s de uso de las entidades pertenecientes a estos objetos GeneXus.

A

TRIBUTOS

.

Un atributo puede pertenecer a más de un subfile. La forma de referenciar ese atributo es como propiedad del subfile de la siguiente forma:

<Subfile Control Name>.<Attribute>

Si el atributo no pertenece a más de un subfile, no es necesario el prefijo <Subfile Control Name>.

V

ARIABLES

.

No se permite <Subfile Control Name>.<Variable>.

Esto implica que no se recomienda tener la misma variable en mas de un subfile ya que cuando la misma variable está presente en más de un subfile, los cambios de las propiedades afectan a todos los subfiles en los que se encuentra.

P

ROPIEDADES

.

Las propiedades de los subfiles conservan la implementación y comportamiento actual ya que siempre estuvieron asociadas al objeto.

E

VENTOS

.

Los eventos del subfile conservan su comportamiento actual.

Los eventos Load y Refresh deben referenciar al subfile usando la siguiente nomenclatura:

Event <Subfile Control Name>.<Refresh | Load> ....

37

C

OMANDOS

.

Los comandos que actúan específicamente sobre el subfile cambian de forma de que, en caso de haber más de un subfile, se pueda determinar a cual subfile se aplica, estos comandos son:

Ø For each line: Este comando debe incluir una referencia al subfile de la siguiente forma: For each line IN <Subfile Control Name>

Ø Load: Dispara la carga del subfile. La sintaxis continua siendo Load, pero debe incluirse dentro del evento load asociado a dicho subfile. Si el objeto solo tiene un subfile, no es necesario usar la nomenclatura nueva.

Ejemplo Event Subfile1.Load … Load Endevent

R

EGLAS

.

Ø Order: Quedan asociadas al subfile. (Se puede editar dando clic con botón derecho sobre el subfile)

Ø Hidden: Los atributos / variables nombrados en esta regla son colocados como “hidden” en cada uno de los subfiles. No se recomienda su uso, en contrapartida se recomienda agregar el atributo / variable al subfile y luego ocultarlo usando la propiedad visible.

La razón para promover el uso de los atributos / variables con la propiedad Visible en False en lugar de la regla hidden es que los atributos referenciados en las reglas hidden están en TODOS los subfiles mientras que los otros sólo están para el subfile en que fueron definidos. Esto redunda en menos código HTML a enviar al Browser y, en consecuencia, mejor performance

P

RECEDENCIAS

Ø Order: Si el conjunto de atributos de la regla se corresponde con los de algún subfile y este tiene un orden asignado explícitamente este último es el que se toma en cuenta.

Ø Search: La regla search sobre algún atributo se toma en cuenta para el o los subfiles a los que pertenece el atributo.

C

ONDITIONS

.

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

D

ETERMINACIÓN DE LA TABLA BASE

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

Los atributos que participan en la determinación de la tabla base de cada subfile son los que:

• Están en el subfile

• Están referenciados en las reglas Hidden y Order aplicadas al subfile

Los atributos de la parte fija no participan en la determinación de la tabla base de ninguno de los subfiles, pero deberán pertenecer a la tabla extendida de alguno de ellos. Si hay alguno que no cumpla la condición da el warning: ”Attribute not instantiated”. Notar que es posible que algunos atributos de la parte fija estén en una tabla extendida y otros en otras.

Tampoco participan los atributos que están en los Eventos (fuera de los grupos For each) como ocurre en los work panels. Estos, deberán pertenecer a la tabla extendida de alguno de los subfiles.

C

ARGA

.

La carga se realiza para cada subfile de forma independiente, es decir, aún si los datos que se muestran en ambos subfiles están relacionados, el especificador no relaciona las cargas.

La carga incluye el evento refresh, o sea que la secuencia de carga de un objeto con 2 subfiles es:

Evento refresh del subfile 1 Evento Load subfile 1 Evento refresh del subfile 2 Evento Load subfile 2

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

39

SUBFILES ANIDADOS

Es posible definir subfiles 'anidados' en un web panel.

Los subfiles anidados consisten en un subfile Freestyle al que se puede insertar dentro de una celda otro subfile estándar u otro Freestyle.

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

Electrodomésticos Heladera TV Muebles de escritorio Silla ejecutiva Mesa de directorio ...

Para ello se define un subfile free-style con la categoría y dentro de este se inserta otro subfile con los productos.

Puede haber subfiles anidados de varios niveles y puede haber también paralelos. Puede decirse que se está definiendo un árbol en donde cada nodo es un subfile. Cada subfile puede ser un free-style o un subfile común, aunque si es común no puede tener ninguno anidado.

Los subfiles comunes solo pueden ser hojas del árbol de anidación.

Determinación de tablas bases

Cada subfile tiene una tabla base independiente a la del resto de los subfiles del árbol de anidación.

Para relacionarlas, se deben incluir en los subfiles los atributos relación necesarios. Generalizando el concepto, se deben incluir atributos que determinen específicamente la tabla base deseada.

Como existen las propiedades Visible y Hidden, no tendrán porque visualizarse en el subfile, pero sí deben participar en la definición.

Siguiendo con el ejemplo anterior, el subfile de Productos deberá tener el código de la categoría para que los relacione.

Los subfiles deberán tener: Sf1: CatDsc

Sf2: CatDsc PrdDsc

Disparo de Eventos

El manejo de eventos es análogo al del resto de los subfiles: se tienen los eventos refresh, load.

al evento Refresh y load de cada hijo. Cada subfile puede o no tener tabla base (es decir un for each implícito). Si no lo tiene, se deben cargar los datos con el comando Load() como en el resto de los subfiles sin tabla base.

En el diagrama de navegación se indica que un subfile esta anidado poniendo 'Subordinate to xxxx' antes de imprimir el Evento Load asociado.

41

Comparación entre Web Panels y Work Panels

Se puede decir que los objetos web panel y work panel son similares ya que ambos permiten definir consultas interactivas a la base de datos. Son objetos muy flexibles que se prestan para múltiples usos, cuya programación está dirigida por eventos. De todos modos, hay algunas diferencias causadas principalmente por el esquema de trabajo en Internet.

Tabla Base

La determinación de la tabla base de los work panels es diferente a la de los web panels, ya que en estos últimos es posible definir varios subfiles.

La tabla base de un work panel se determina considerando los atributos que:

• Están en el panel

• Están referenciados en las reglas Hidden y Order

• Están en los Eventos (fuera de los grupos For each).

Para ver como se determina la tabla base para web panels referirse a la sección de Múltiples Subfiles

Esquema de trabajo en Internet

Es importante entender la diferencia del ambiente en el que se está trabajando: en Internet, cuando el usuario accede a una página del servidor Web para visualizarla, el Browser baja la página 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 presione el evento ENTER o algún evento de usuario. En ese momento se envía (o se somete) el resultado al servidor para continuar con su procesamiento.

Relacionado con esto es importante destacar el momento en que las variables adquieren los valores ingresados por el usuario: solamente lo harán después de presionar un botón (que es cuando el servidor Web tiene el control del procesamiento).

Esto implica algunos cambios importantes en la forma de programar los objetos.

Eventos

Los eventos de los work panels son los mismos que en los web 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. Se distingue la primera ejecución de las siguientes del mismo web panel.

P

RIMERA EJECUCIÓN DE LOS WEB PANELS

La primera vez que se ejecuta el web panel los eventos se disparan en el siguiente orden:

1. Start 2. Refresh 3. Load

Luego, de esto, cuando el usuario presione un botón (ya sea asociado al evento ENTER o a un evento de usuario) que no llame a ningún otro web panel, se ejecutará nuevamente éste y el orden de disparo de los eventos será diferente.

R

ESTO DE LAS EJECUCIONES DE LOS WEB PANELS

Los eventos se dispararán 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 están involucradas en las conditions)

3. Código correspondiente al evento asociado al botón seleccionado. 4. Refresh

5. Load

Variables

Como se dijo anteriormente, las variables adquieren los valores ingresados por el usuario después de presionar algún botón en el web panel.

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 ningún 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).

Además, deberá estar en el form después del control en el que se carga la variable. Por ejemplo, si la variable se carga en el LOAD de un subfile entonces la variable tiene que estar en pantalla después del subfile.

Gatillado de fórmulas stand alone

En un Web Panel existen fórmulas que pueden ser gatilladas antes del evento Start y otras que deben gatillarse luego del mismo evento.

Las fórmulas que se gatillan ANTES del evento Start son aquéllas que sólo dependen de los parámetros que llegan al programa (regla parm())

Las fórmulas que se gatillan DESPUÉS del evento Start son aquéllas que dependen de atributos o variables instanciados (vía asignación, Call, etc.) en el evento Start.

Reglas más importantes

En el objeto work-panel, las reglas más importantes son las siguientes: ORDER, NOACCEPT, SEARCH, HIDDEN y WORKFILE_LINES.

43

ORDER, NOACCEPT, HIDDEN

Estas tres reglas se utilizan de la misma forma en los work panels que en los web panels. La salvedad es que en web panels, al poder utilizarse múltiples subfiles las mismas se aplican a TODOS los subfiles del form, por lo tanto se recomienda usarlas a nivel del subfile y no del web panel.

Cuando se quiere usar la regla hidden para atributos de un subfile, 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 línea de cada subfile que exista en la pantalla. Los atributos con Visible en False, no se ven en el subfile final pero también se "guardan" aunque solamente para cada línea del subfile 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 subfiles mientras que los otros sólo para el subfile en que fueron definidos. Esto redunda en menos código HTML a enviar al Browser y, en consecuencia, mejor performance.

WORKFILE_LINES

Esta regla no aplica a los web panels La forma de hacer esto es usando la propiedad ROWS del subfile.

Propiedades

Las propiedades que gobiernan la carga del subfile en los work panels (Load Records y Load at start up) no aplican a los web panels. Esto implica que no existe paginación a pedido generada por GeneXus.

La razón de esto es que una vez que se ejecuta el Web Panel, primero se procesa la consulta sobre la base de datos y luego se arma la página Web para ser visualizada por el usuario. Esta es una limitación del código HTML que no posee controles como los que se utilizan en lenguajes visuales para el subfile.

Comandos soportados por los Web Panels

A continuación se detallan los comandos soportados por los Web Panels.

Link

El comando link es equivalente al comando call para llamar a páginas estáticas o redireccionar a una URL estática. Este comando puede ser utilizado dentro de cualquier evento en un Web Panel con excepción del evento Load. El resultado de la utilización de este comando es el redireccionamiento en forma automática a la URL especificada dentro del mismo.

La sintaxis de este comando es la siguiente: link(<URL> , <parm1>, ...,<parmn>)

donde

<URL> es el nombre de la URL a la que se va a redireccionar

<parm1>...<parmn>: son los parámetros que recibe la URL. El pasaje de parámetros es opcional. Ej.: Event ENTER Link(‘http://www.ARTech.com.uy’) Endevent

Load

El comando Load es análogo al resto de los objetos GeneXus.

Refresh

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

Return

El comando Return tiene el mismo efecto que el BACK del browser: vuelve a la página anterior. Incluir el comando return en un web panel es equivalente a hacer un CALL al web panel que lo invocó.

El comando Return en web panels puede ser ejecutado en cualquier evento o subrutina salvo el evento Load y los métodos Load de subfiles. Tampoco puede ser ejecutado en subrutinas llamadas directa o indirectamente por el evento Load o métodos Load de subfiles.

45

• En caso que se ejecute en las mencionadas situaciones los resultados son impredecibles.

• Si se utiliza la función SetCookie (Ver funciones estándar Setcookie, Getcookie) y luego se ejecuta el comando Return el valor de la(s) cookie(s) se establece correctamente.

FUNCIONES BROWSERID. BROWSER VERSION

Estas funciones devuelven un identificador del browser y la descripción del mismo respectivamente. Las mismas pueden ser utilizadas en cualquier objeto GeneXus, el resultado tiene sentido únicamente si dicho objeto fue llamado en forma directa o indirecta por un Web Panel o está ejecutando en un ambiente Web.

BrowserID

La función BrowserID retorna un identificador del browser: 0 – Unknown Agent

1 – Internet Explorer 2 – Netscape

3 – Opera

BrowserVersion

La función BrowserVersion retorna la descripción correspondiente a la versión del browser (o agente). Si no se reconoce el browser utilizado (la función BrowserID devolvió 0), devuelve una cadena vacía. En el resto de los casos devuelve las descripciones detalladas anteriormente.

47

Preferences a considerar en el desarrollo de Web

panels

En los modelos GeneXus, existen preferences que aplican exclusivamente a los web panels. Algunas a nivel del modelo de diseño por lo que aplican a toda la base de conocimiento y otras se encuentran a nivel de los generadores (por lo que aplican al modelo de prototipo o producción que lo utilice).

Preferences generales

Estas preferences se definen a nivel del modelo de Diseño. Se conocen como Master Model Properties y se setean mediante la opción File/Edit Model/Preferences teniendo abierto el modelo de diseño.

Las relacionadas con web panels son:

B

ASE

P

ATH FOR

R

ELATIVE

I

MAGES

Cuando se trabaja con Web Panels se pueden distinguir dos ambientes y tiempos muy diferentes: el de desarrollo y el de producción. Por ambiente de desarrollo, nos referimos al ambiente en que se desarrollan los web panels (mientras se diseña y prototipan los web panels) y por ambiente de producción a la ejecución final de los mismos.

En particular esto es muy importante al trabajar con imágenes, ya que en producción las imágenes se referenciarán respecto al camino virtual donde se encuentran las mismas – normalmente en el Servidor Web -(Ej.: /imagenes/img.gif) mientras que en tiempo de desarrollo las mismas se buscan en el camino ingresado (Ej.: c:\modelo\imagenes\img.gif), Hay que recordar que el servidor Web tiene acceso únicamente a aquellos directorios definidos en el software de administración del mismo.

En esta preference del modelo de diseño, se debe ingresar el camino absoluto que se va a utilizar para referenciar las imágenes mientras se desarrolla el web panel -tiempo de diseño-. En el caso en que se tenga acceso al servidor Web que se usará para producción final, este camino puede referenciarse como una URL o también como un path absoluto (respecto al servidor de archivos). Esto implicará que las imágenes estarán en un único directorio y pueden ser accedidas tanto en tiempo de desarrollo como en producción.

Cuando no se tiene acceso al servidor Web que se usará para producción, se deberán tener las imágenes duplicadas para poder accederlas en desarrollo y posteriormente en producción. En este caso, en la preference se deberá referenciar el path absoluto al directorio que las contenga en tiempo de diseño. Por ejemplo, si el directorio raíz del servidor Web es c:\inetpub\wwwroot y para las imágenes de la aplicación existe el subdirectorio imágenes esta preference podrá contener el valor c:\inetpub\wwwroot o la url http://myserver.com. (siempre que en tiempo de desarrollo se tenga conexión al servidor Web).

Luego en el Web Panel, para insertar una imagen se debe seleccionar el botón de la barra de controles disponibles, y en el diálogo para ingresar el origen de la imagen se debe ingresar el path relativo (Ej.: /imágenes/img.gif). De esta forma la imagen seleccionada se va a visualizar tanto en tiempo de diseño como en

ejecución.

Las imágenes se deberán referenciar luego como \imagenes\imagen1.gif. La estructura de directorios en el servidor será:

C:\intetpub\wwwroot --- images

--- application

Si se prefiere que las imágenes de la aplicación se ubiquen en forma relativa al directorio de los web panels, en las imágenes se deberá referenciar el directorio images\imagen1.gif es decir sin la barra al principio. En este caso la estructura de directorios en el servidor debe ser:

C:\intetpub\wwwroot --- images

--- application

Preferences a nivel del Generador

A nivel de cada modelo, existen algunas preferences (en la sección Web Information) que aplican exclusivamente a los web panels.

G

ENERATION

M

ODE

Esta preference permite especificar si los web panels del modelo se generarán como objetos dinámicos (acceden a la base de datos) o como páginas html inteligentes (smart static panels).

Por mas información referirse a la documentación de Smart Static Panels Esta preference no está habilitada en los modelos Visual Basic.

Existe también la propiedad a nivel de objeto con los mismos valores que la preference y también el valor Use model's preference value.

F

OCUS

C

ONTROL

Esta preference permite determinar si los Web Panels, al mostrar su página, intentan posicionar el foco en el primer control de entrada (no read-only) o dejan librado al Browser la posición del foco.

Los valores posibles son:

First input att/var on the page Browser dependent

Existe también la propiedad a nivel de objeto con los mismos valores que la preference y también el valor Use model's preference value.

P

ROTOCOL

S

PECIFICATION

Esta preference permite especificar el protocolo a utilizar en la url generada para invocar a los web panels.

49 Hypertext Transfer Protocol.

El valor Secure HTTPS: fuerza generar HTTPS como protocolo e indica que el protocolo a utilizar es el Secure Hypertext Transfer Protocol. Para utilizar este protocolo es necesario disponer de un servidor seguro.

El valor Do not specify indica que no se especificará un protocolo particular, sino que se utiliza el mismo protocolo empleado para acceder al web panel actual.

En el caso de tener aplicaciones con un esquema mixto: algunas páginas seguras y otras no, la preference del modelo deberá setearse con el valor Do not specify y para cambiar el protocolo deberá hacerse un link al objeto indicando expresamente el protocolo a utilizar.

Preferences de Java

En los modelos GeneXus JAVA, existen preferences que aplican exclusivamente a los web panels. Estas preferences se definen a nivel del modelo JAVA y se setean mediante la opción File/Edit Model/Preferences teniendo abierto dicho modelo.

Las relacionadas con web panels son:

Servlet Directory

Cada servidor de Servlets necesita que los servlets compilados se pongan en un directorio específico. Ese directorio debe indicarse en esta preference, el mismo es relativo al cliente. Es necesario especificar este valor antes de generar, dado que se utiliza para la generación del makefile. Luego de compilar cada Web Panel, se copiará el archivo compilado al directorio especificado. Además de los .class se copiarán los ficheros .cfg, que contienen la información de configuración, por lo que si se modifica algún valor de las preferences es necesario volver a generar y compilar algún Web Panel. Cuando se modifica el valor de alguna preference y se genera un nuevo .CFG, para que tenga efecto es necesario reiniciar el servidor de Servlets.

SSP base URL

Permite especificar el directorio donde los web panels dinámicos (dynamic web panels) buscan las Smart Static Panels.

Static content base URL

Para poder utilizar archivos de imágenes en los Web Panels, es necesario copiarlos a un directorio que sea visible desde el servidor de Web, y se debe especificar la dirección relativa o absoluta de dicho directorio en esta preference. Esta dirección es vista desde el servidor.

En este directorio también se copiarán los archivos generados (de extensión .js) para los menubars de web panels.

Por ejemplo, se puede crear un directorio \Imágenes bajo el directorio raíz del servidor Web y copiar todas las imágenes necesarias a dicho directorio.

Si no se indica valor a esta preference, se asume la raíz del servidor Web (directorio "/").

Este directorio contiene además javascripts (archivos *.js) que se generan para los menubars de web panels y los web panels generados como estáticos.

Comportamiento para las imágenes:

- Se concatena el directorio indicado en la preference a las imágenes fijas (insert picture) y a las imágenes variables (load bitmap) si el path de las mismas NO comienza con una barra.

51 basta con modificar el archivo client.cfg-

Static Content Directory seen by Client

En esta preference se debe indicar el mismo directorio referenciado en la preference anterior, pero no como es visto desde el servidor sino como es visto desde la estación cliente desde donde se está desarrollando la aplicación.

Se utiliza para copiar los archivos generados por los menu bars de los web panels.

Auto compress web pages

Los Web Panels en Java pueden enviar la página HTML comprimida, de modo que sea descomprimida en tiempo real por el navegador. La compresión se realiza solo si el navegador indica que es capaz de descomprimirlo.

Esta opción puede deshabilitarse con la preference 'Auto compress web pages', dado que es posible que algunos navegadores no reporten correctamente su capacidad para descomprimir las páginas, y no puedan desplegar correctamente las páginas. El valor por defecto es "Yes".