Objeto Web Panel 246

OBJETO WEB PANEL
246
Caractersticas
Permiten definir consultas interactivas a la base de

datos.
Son flexibles por lo que se prestan para mltiples
usos.
Los web panels son objetos GeneXus que permiten al usuario en tiempo de ejecucin, realizar
interactivamente consultas a la base de datos a travs de una pantalla.
El trmino interactivamente se refiere a que el usuario podr ingresar en la pantalla de un web panel una
y otra vez distintos valores de filtros, y consultar a continuacin los datos que concuerden con los mismos.
Adems, sobre los datos consultados, el usuario podr realizar distintas acciones, como veremos.
Los web panels no permiten la actualizacin de la base de datos, sino slo su consulta1.
El objetivo primordial de este objeto GeneXus es la definicin de consultas interactivas a la base de datos,
sin embargo se trata de un objeto muy flexible por lo que se presta para diversos usos.
En este captulo estudiaremos algunos detalles de este tipo de objeto.
-------------------------------------------------------------------------------------------------------------------A menos que se utilicen en combinacin con los business components (estudiados ms adelante)
247
Elementos
Algunos de ellos son:

Web Form
Reglas
Condiciones
Subrutinas
Eventos
Propiedades
Ayuda
Documentacin
Los elementos de los web panels son:

Web Form: Cada web panel contiene un form Web, el cual debe ser diseado por el analista agregndole
variables, atributos, as como otros controles, para que el usuario pueda interactuar con el mismo.
Reglas: Las reglas de un web panel permiten definir ciertos comportamientos puntuales de dicho objeto.
Por ejemplo, declarar qu parmetros recibe, definir qu variables no queremos que sean aceptadas en el
form sino utilizadas para desplegar informacin, etc.
Condiciones: Es para definir las condiciones que deben cumplir los datos a ser recuperados (filtros).
Subrutinas: Son rutinas locales al web panel.
Eventos: Los web panels emplean la programacin orientada a eventos. Este tipo de programacin permite
definir cdigo ocioso, que se activa en respuesta a ciertas acciones provocadas por el usuario o por el
sistema. En esta seccin de un web panel es donde se define el cdigo ocioso asociado a los eventos que
pueden ocurrir durante la ejecucin del web panel.
Propiedades: Son caractersticas a
comportamiento general del web panel.
ser
configuradas para definir
ciertos
detalles referentes al
Ayuda: Permite la inclusin de texto de ayuda, que los usuarios podrn consultar en tiempo de ejecucin
del web panel.
Documentacin: Permite la inclusin de texto tcnico como documentacin para los desarrolladores.
248
Clasificacin de web panels

Web panels de Entrada
Web panels de Salida
Web panels Mixtos
Todo web panel tiene un form asociado, y en el mismo, contrariamente al comportamiento del form de una
transaccin, los atributos que se incluyan sern de salida, y las variables que se incluyan sern de
entrada.
Es fcil de comprender que el objetivo del form de un web panel es exactamente el contrario al objetivo del
form de una transaccin, ya que:
a travs del form de una transaccin se ingresan los valores de los atributos en la base de datos.
a travs del form de un web panel, se consultan / recuperan los valores de los atributos de la base de
datos.
Es por esto que los atributos son de entrada en las transacciones y de salida en los web panels.
Y en lo que respecta a las variables, las mismas son de salida en las transacciones y de entrada en los web
panels.
La siguiente clasificacin describe los distintos usos posibles de los web panels:
Web panel de entrada: le damos este nombre a un web panel que tiene la nica funcin de aceptar
valores digitados por el usuario (esto significa que su form contendr nicamente variables).
Web panel de salida: le damos este nombre a un web panel que tiene la nica funcin de mostrar
informacin (esto significa que su form contendr nicamente atributos, pudiendo tambin contener
variables a las cuales se les haya cambiado el comportamiento por defecto de ser de entrada, definindolas
de salida y cargndoles valores explcitamente).
Web panel mixto: le damos este nombre a un web panel que permite tanto ingresar valores como
mostrar informacin (en este caso su form contendr tanto variables como atributos, o bien slo variables,
algunas con el comportamiento por defecto de ser de entrada y otras definidas explcitamente de salida y
cargndoles valores).
Vale aclarar que esta clasificacin es independiente de la herramienta; es decir, GeneXus internamente no
clasifica a los web panels.
249
Web panel de Entrada
Event Enter
Las variables adquieren el valor digitado luego de

presionar algn botn.
Event Enter
RList.call( &NombreClienteInicial, &NombreClienteFinal )
endevent
Denominamos web panels de entrada a aquellos web panels cuya nica funcin es que el usuario realice
ingresos de valores por medio de los mismos. Por lo tanto, sus forms contendrn solamente variables.
Por ejemplo, un web panel de entrada puede contener dos variables &NombreClienteInicial y
&NombreClienteFinal como se muestra arriba. En tiempo de ejecucin, el usuario podr ingresar valores en
las variables &NombreClienteInicial y &NombreClienteFinal dado que en los web panels las variables son
por defecto de entrada.
En el evento Enter del web panel (asociado al botn Confirm), se invocar a un reporte, al cual se le
pasarn por parmetro las variables &NombreClienteInicial y &NombreClienteFinal para que el reporte liste
todos los clientes cuyos nombres se encuentren en el rango solicitado:
Event Enter
RListClienteRange.call( &NombreClienteInicial, &NombreClienteFinal )
EndEvent // Enter
De modo que la definicin de este web panel de entrada es para que el usuario ingrese el rango de
clientes a listar, y al seleccionar el botn Confirm, se ejecute el reporte correspondiente.
250
Web panel de Salida
tabla base:
CLIENTE
Regla:
parm(in:ClienteId);
Denominamos web panels de salida a aquellos web panels cuya nica funcin es exhibir datos.
Para que un web panel nicamente muestre datos, su form debe contener solamente atributos, ya que los
atributos en los forms de web panels son indefectiblemente de salida1. Otra posibilidad es incluir en el
form variables, pero habr que cambiarles su comportamiento por defecto de ser de entrada, a ser de
salida, y cargarles valores explcitamente2.
El web panel mostrado arriba ha sido creado para exhibir los datos de un cliente. Se necesita invocarlo
desde otro objeto, pasndole por parmetro el cdigo del cliente del cual se quiere mostrar la informacin.
Para resolver esto, una vez creado el web panel Ver Datos del Cliente:
se han agregado los atributos que se desean visualizar en su form
se ha definido la regla: Parm(in: ClienteId); en la seccin de reglas del objeto
Tan slo definiendo esto obtendremos el comportamiento deseado.
Qu concluir GeneXus acerca de este web panel, cuando lo especifiquemos?
Primeramente GeneXus observar que los atributos incluidos en el form pertenecen a las tablas CLIENTE y
PAIS respectivamente. El siguiente diagrama de Bachman explicita la relacin entre ambas tablas:
-------------------------------------------------------------------------------------------------------------------CLIENTE
PAIS
Al contrario de lo que sucede con los atributos en las transacciones (salvo los inferidos o los que tienen
regla noaccept o propiedad Enabled deshabilitada).
2 El comportamiento por defecto de las variables tambin es opuesto entre Web Panels y Transacciones.
1
251
Teniendo en cuenta la relacin entre las tablas involucradas, GeneXus descubrir que deber recorrer la
tabla CLIENTE y acceder a la tabla PAIS por el concepto de tabla extendida. La tabla PAIS no podr ser
elegida para ser recorrida porque su tabla extendida no incluye a la tabla CLIENTE.
As es que GeneXus determinar un for each asociado al web panel, en este caso con tabla base CLIENTE;
nosotros no escribimos el for each, pero GeneXus lo infiere automticamente.
A su vez, como en la regla parm definida en el web panel se recibe un atributo, el mismo actuar como
filtro por condicin de igualdad. Es decir, que al ejecutarse la recorrida de la tabla CLIENTE (accediendo a la
tabla PAIS para traer el nombre de pas), se filtrar por el cdigo de cliente recibido por parmetro.
Concluyendo, se recorrer la tabla CLIENTE, con condicin de filtro por el cliente recibido en la regla parm y
se mostrarn los datos en la pantalla. El nombre del pas del cliente (PaisNombre) se inferir por el
concepto de tabla extendida y se mostrar tambin en la pantalla.
Decimos que este web panel tiene tabla base, y la misma es CLIENTE. Esto significa que el web panel
tiene un for each implcito / automtico asociado, cuya tabla base es CLIENTE.
252
Web panel de Salida
grid: Se cargan los

registros de la base de
datos correspondientes
en archivo temporal
Regla:
parm(in:ClienteId);
tabla base:
FACTURA
Este web panel ha sido creado para mostrar las facturas de determinado cliente. Se necesita desde otro
objeto, invocar a ste, pasndole por parmetro el cdigo del cliente del cual se quieren mostrar sus
facturas.
Para resolver esto, una vez creado el web panel Ver Facturas Cliente:
se han agregado los atributos que deseamos visualizar en su form (utilizando el control grid para mostrar
las N facturas del cliente en cuestin)
se ha definido la regla: Parm(in: ClienteId); en la seccin de reglas del objeto
Este web panel, a diferencia del anterior no es plano, pero contina siendo un web panel de salida, ya que
lo nico que hace es mostrar datos de la base de datos, sin permitir que el usuario ingrese nada.
Cuando se incluye un grid en un form, se est indicando que se va a mostrar una cantidad indefinida de
datos (en este caso, facturas).
Dado que en este web panel hay involucrados atributos de las tablas CLIENTE y FACTURA y que la relacin
entre ambas tablas es:
FACTURA
CLIENTE
GeneXus determinar que recorrer la tabla FACTURA y acceder a la tabla CLIENTE por el concepto de
tabla extendida. La tabla CLIENTE no podr ser elegida para ser recorrida porque en su tabla extendida no
se encuentra la tabla FACTURA.
De modo que GeneXus determinar un for each implcito asociado al web panel, con tabla base FACTURA,
accediendo a la tabla CLIENTE por el concepto de tabla extendida.
Como en la regla parm definida en el web panel, se recibe un atributo, el mismo actuar como filtro por
igualdad. Es decir, que al ejecutarse la recorrida a la tabla FACTURA accediendo a la tabla CLIENTE, se
filtrar por el cdigo de cliente recibido por parmetro.
Decimos que este web panel tiene tabla base, y la misma es FACTURA. Esto significa que el web panel
tiene un for each implcito/automtico asociado, cuya tabla base es FACTURA.
253
Web panel Mixto: Work With
Event Enter
Evento Usuario
Tabla Base:
CLIENTE
Las
variables
adquieren
el valor
digitado
luego de
presionar
algn
botn
generales
versus
particulares
Los web panels no tienen por qu ser slo de entrada o slo de salida. El web panel que se muestra arriba es
de entrada/salida (mixto), su form contiene tanto variables como atributos.
La funcionalidad de este web panel es cargar en el grid los datos de todos los clientes cuyos nombres
cumplan con la condicin de filtro especificada. La idea es digitar sobre la variable &ClienteNombre el valor
de filtro deseado, y a continuacin presionar el botn Buscar para que se ejecute la consulta en el
servidor y el resultado de la misma sea cargado en la pgina.
El evento asociado al botn Buscar puede ser el Evento Enter (evento del sistema) cualquier evento
definido por el usuario (volveremos sobre esto ms adelante).
Las condiciones de filtro pueden definirse de dos maneras posibles:
A nivel de un grid en particular (botn derecho sobre el grid/Conditions): de hacerlo as, se tratar de
condiciones particulares para ese grid (las que se muestran arriba).
A nivel de todo el web panel (en la seccin Conditions del objeto): de hacerlo as, se tratar de
condiciones globales, es decir que aplicarn a todos los grids del web panel en los que tenga sentido
aplicarlas (ms adelante veremos web panels con mltiples grids).
En el web panel del ejemplo tenemos un slo grid, por lo cual ambas opciones seran equivalentes desde el
punto de vista lgico. Sin embargo es recomendable escribir las condiciones a nivel del grid ya que en un
futuro podrn agregarse ms grids al web panel. Adems teniendo las condiciones a nivel del grid se
optimiza al momento de la especificacin (ya que en caso contrario, GeneXus deber estudiar para cada grid
si aplicar las condiciones generales a ese grid particular o no).
Qu lgica inferir GeneXus al momento de la especificacin del Web Panel?
Como los atributos involucrados en el web panel pertenecen algunos a la tabla CLIENTE y otros a la tabla
PAIS, y en la tabla extendida de CLIENTE est la tabla PAIS, GeneXus determinar que la tabla a recorrer es
CLIENTE y que acceder por su extendida a la tabla PAIS para cargar el valor del atributo PaisNombre. Es
decir, GeneXus determinar un for each implcito asociado al web panel, con tabla base CLIENTE.
Las condiciones definidas antes (a nivel de grid) se incluirn en el for each implcito (como clusulas
where), de modo tal que al ejecutarse la consulta, se recorrer la tabla CLIENTE, filtrando por dichas
condiciones.
Es importante considerar que tanto en las condiciones globales del web panel, como en las condiciones
locales a un grid de un web panel, es posible utilizar la clusula when al igual que cuando se definen filtros
en los objetos reportes y procedimientos.
254
Web panel con tabla base?

Decimos que un web panel es con tabla base cuando GeneXus
puede determinar un for each implcito asociado a l.
Es decir, si bien el analista no escribe un for each explcitamente
en el web panel para efectuar la consulta, GeneXus lo determina
automticamente (por eso lo llamamos: for each implcito).
Tabla base del for each implcito = Tabla base del web panel.
Un Web Panel es sin tabla base cuando GeneXus no puede
determinar una tabla de la base de datos a recorrer para mostrar
la informacin que se presenta en el form.
En este caso en el form solamente aparecen variables (y no
atributos).
Un web panel es con tabla base cuando de los atributos que aparecen, GeneXus puede determinar una
tabla de la base de datos a recorrer para, recuperando sus registros, mostrar la informacin que aparece
en los atributos del web panel.
De este modo, es como si hubiramos escrito un for each para navegar esa tabla base y trabajar con
algunos atributos de la misma, y de la extendida.
Si en el Web Panel no aparecieran atributos, sino solo variables, evidentemente GeneXus no podr
determinar una tabla a ser navegada. En este caso el web panel ser sin tabla base.
255
Orden de los datos a recuperar

Botn derecho sobre el grid:
Para definir que una consulta se efecte ordenando por ciertos atributos, y por ende que los datos extrados
de la consulta se muestren ordenados con dicho criterio, se debe hacer clic con el botn derecho del mouse
sobre el grid, y seleccionar el tem Order del men pop up que se muestra arriba.
A continuacin, se presentar el dilogo para que se ingresen los atributos por los que se desea ordenar.
Definir esto es equivalente a definir la clusula order en el comando for each, y se aplica todo lo visto en
dicho tema: desde que para ordenar en forma descendente por un atributo se debe encerrar el atributo entre
parntesis (), la creacin de ndices temporales cuando no exista un ndice fsico correspondiente a los
atributos de ordenamiento, as como la posibilidad de utilizar la clusula when para condicionar la aplicacin
de ese order.
En nuestro web panel Trabajar Con Clientes ordenamos los clientes que se listan en el grid por
ClienteNombre.
El poder definir order para un grid permite entre otras cosas optimizar la consulta, cuando se establecen
condiciones de filtro. As, si en las conditions generales y/o las del grid particular, siendo la tabla base
CLIENTE establecemos los filtros, teniendo dos variables ingresadas por el usuario:
ClienteNombre >= &clienteNombreInicio;
ClienteNombre <= &clienteNombreFin;
Entonces, de no especificar un orden por ClienteNombre, se deber recorrer toda la tabla, de principio a fin,
para cargar los registros que cumplan con las condiciones. Especificando un order optimizamos la consulta.
Nota: Solamente si el form del web panel no tiene ningn grid (atributos sueltos), y se necesita definir un
orden especfico para la consulta, se contar con la posibilidad de definir en la seccin de reglas del web
panel, la regla de sintaxis: order(att1, att2, attN); siendo att1, att2, attN: la lista de atributos que define el
orden de la consulta.
256
Eventos en web panels

En los web panels se utiliza la programacin dirigida por
eventos.
Eventos disponibles en web panels:
Evento Start
Evento Refresh
Evento Load
Evento Enter
Eventos de Usuario
Evento Click asociado a control
Dado que la programacin de los Web Panels est dirigida por eventos, para poder programar
adecuadamente un objeto de este tipo es necesario conocer los eventos existentes y el momento y orden
en que stos se disparan.
257
Evento Start
Es un evento del sistema, que ocurre automticamente siempre
que se hace Get o Post y es el primer evento que se ejecuta.
No se conocen valores de atributos, salvo los recibidos por
parmetro. Esto se debe a que an no se ha efectuado la
consulta.
Ejemplo: se puede utilizar para que un control del form no
aparezca visible, para cargar un bitmap, para asociarle un Link a
otro control, etc.:
Event Start
&var.Visible = 0
&Update = LoadBitmap("images/edit.gif")
newControl.Link = Link(TCliente)
endevent
En el ejemplo, tendremos 3 controles en el form: la variable de nombre var, la de nombre Update de tipo
Bitmap y un control de nombre newControl que puede ser, por ejemplo, un control imagen.
En el evento Start se le asigna a la propiedad Visible del control variable &var el valor 0, indicando que no
deber verse en el form.
A su vez, a la variable de tipo bitmap, &Update, se le carga la imagen que contendr, y al control que
suponemos imagen, newControl, se le define la propiedad Link, de manera tal que cuando el usuario haga
clic sobre el control, se invocar a la transaccin Cliente.
258
Evento Refresh
El evento Refresh es un evento del sistema
Se ejecuta cada vez que se realiza un Get o Post.
Provoca que se ejecute la consulta a la base de
datos.
Es decir, al ocurrir el evento Refresh, se ejecuta lo
codificado en dicho evento, y a continuacin se ejecuta
la consulta a la base de datos. Viene seguido siempre
del evento Load.
259
Evento Load
Cada vez que se ejecute el evento Refresh en un web panel,
seguidamente se ejecutar el evento Load.
La cantidad de veces que el evento Load ser ejecutado,
depender de si el web panel tiene tabla base o no la tiene:
Tiene tabla base:
Cuando aparecen atributos que le permiten automticamente
determinar que se desea navegar una tabla determinada de la
base de datos
El evento Load se ejecutar N veces
No tiene tabla base:

Cuando no ocurre lo anterior (en el form solo hay variables)
El evento Load se ejecutar solamente una vez.
Cuando el web panel es con tabla base, al producirse el evento Refresh se accede a la base de datos, a
esa tabla base (la asociada al web panel), y se la recorre cargando los registros que cumplan las
condiciones (conditions del grid y generales). Ocurrir en ese proceso un evento Load por cada
registro en el que se est posicionado, inmediatamente antes de cargarlo. Esto nos permite realizar
alguna operacin que requiera de ese registro (y de su extendida), antes de efectivamente cargarlo en el
grid. Inmediatamente luego de ejecutado el cdigo asociado al evento Load, se cargar la lnea del grid y
se pasar el puntero al siguiente registro de la tabla base, para realizar lo mismo (evento Load, carga de
la lnea). Este proceso se repetir hasta cargar todas las lneas del grid.
Si un web panel es sin tabla base, GeneXus no puede determinar automticamente una tabla de la base
de datos a recorrer para mostrar la informacin que se presenta en el form. En este caso en el form
solamente aparecen variables (y no atributos) y tambin ocurrirn los eventos Refresh y Load, slo que el
evento Load se ejecutar una nica vez, dado que no se estar posicionado en ningn registro de
ninguna tabla.
260
Evento Load
en web panel con tabla base
Luego del
evento Refresh
se ejecuta el
evento Load N
veces:
una vez por cada
registro de la
tabla base ledo
para ser cargado
en la lnea del
grid
Por cada registro ledo en la consulta efectuada a la base de datos, se disparar el evento Load
(ejecutndose el cdigo incluido en el mismo, y cargndose a continuacin una lnea en el grid con los
datos asociados al registro).
261
Evento Load
en web panel con tabla base: ejemplo
Si en el grid que muestra los clientes que cumplen con las condiciones de filtro, quisiramos agregar una
columna al final, que marque que el cliente es moroso (deudor) si su saldo es mayor a $10.000, es decir,
que en ejecucin sobresalga su condicin de moroso apareciendo un literal DEUDOR en ese caso, alcanza
con agregar una variable &tipo al grid, de tipo Character(10) y cargarla en el evento Load del web panel
como se muestra arriba.
Para cada registro de la tabla base CLIENTE que se vaya a cargar como lnea en el grid, se ejecutar el
cdigo del evento Load, cargndose en la columna &tipo el valor DEUDOR nicamente si el saldo de ese
cliente que va a listarse supera los $10.000.
Luego, si para cada cliente del grid adems de mostrar su nombre, pas, sexo, saldo y tipo, queremos
mostrar la cantidad de facturas que se le han emitido, alcanza con agregar una variable &cantidad al grid,
e incluir en el cdigo del evento Load, el for each para contar esas facturas.
Observar que el for each definido en el evento Load estar anidado al for each implcito (el de la tabla
base), por lo que se efectuar un join, recorrindose solamente las facturas de ese cliente, el que se est
cargando.
262
Evento Load
en web panel sin tabla base
En un web panel sin tabla base, el evento Load se ejecutar solamente una vez.
Evento Refresh
Evento Load
Que el web panel no tenga tabla base, significa que no tiene un for each implcito asociado; por lo tanto,
cuando se ejecute el evento Refresh, no comenzar a ejecutarse ninguna consulta; se ejecutar el cdigo
asociado al evento Refresh, y a continuacin se ejecutar el cdigo asociado al evento Load, una nica vez.
Aqu es donde tendremos que cargar el grid, consultando la base de datos con un for each explcito. A
continuacin vemos el cdigo de este evento.
263
Evento Load
en web panel sin tabla base: ejemplo
Comando (que solo puede ir dentro de

evento Load) para efectivamente
cargar una lnea con el valor que
tengan las variables en ese momento.
El objetivo del comando LOAD dentro del evento Load es cargar efectivamente una lnea en el grid.
Una vez que se hayan asignado valores a todas las variables que sean necesarias, y se desee agregar la
lnea al grid, deber ejecutarse el comando LOAD.
Solamente se puede especificar el comando LOAD dentro del evento Load del grid de un web panel y en
ningn otro lado.
Event Load
for each
&ClienteId = ClienteId
&ClienteNombre = ClienteNombre
&ClienteSexo = ClienteSexo
&ClienteSaldo = ClienteSaldo
if ClienteSaldo > 10000
&tipo = DEUDOR
else
&tipo =
endif
&cantidad = 0
for each
defined by FacturaFecha
&cantidad += 1
endfor
Load /* LUEGO DE HABER CARGADO TODAS LAS VARIABLES CON LOS VALORES
CORRESPONDIENTES A LA LNEA A SER CARGADA EN EL GRID, DEBEMOS INCLUIR
EL
LOAD, EL CUAL AGREGAR EFECTIVAMENTE LA LNEA AL
GRID. */
endfor
Endevent
COMANDO
Si en la codificacin del evento Load definimos comandos For each y asignamos valores a las variables en
las iteraciones pero no incluimos el comando LOAD, en tiempo de ejecucin estaremos asignando una y otra
vez valores a las variables, pero no se estarn agregado lneas en el grid (solamente quedar una lnea en el
grid con los ltimos valores cargados en las variables). Por esta razn es muy importante no olvidar escribir
este comando en el lugar apropiado.
264
Evento Enter
Cuando se inserta un nuevo
botn en el form de un Web
Panel, por defecto aparece con
el Caption Confirm y aparece
asociado al evento del sistema
Enter.
El
evento
Enter
puede
asociarse a cualquier botn,
atributo, imagen, text block, en
la propiedad de los controles:
OnClickEvent.
De modo que si se necesita
ejecutar acciones cuando el
usuario final haga clic en el
control
asociado,
en
este
evento debern codificarse.
265
Eventos de usuario
Adems
de
los
eventos
ofrecidos por GeneXus, el
analista puede definir eventos
creados
por
l,
llamados
eventos de usuario.
Cada evento de usuario debe
asociarse a un control insertado
en el form del web panel de los
que soportan el OnClickEvent
(botones,
text
blocks,
imgenes, atributos)
En tiempo de ejecucin, el
evento de usuario ocurrir
luego de que el usuario haga
clic sobre el control asociado al
mismo.
Casi todos los controles que aparecen en el form brindan la posibilidad de disparar un evento cuando el
usuario hace clic con el mouse sobre ellos (aparecen como hipervnculos en ejecucin); se consigue de
dos maneras distintas:
1. Editando las propiedades del control, y definiendo un evento de usuario en la propiedad
OnClickEvent
2. Dndole un nombre al control y en la seccin de Eventos programando:
Event nombreControl.click
Endevent
Con esta ltima alternativa no tendremos que definir un evento de usuario, sino que
estaremos programando el evento click del control.
266
Web panel "Trabajar Con Cliente
Acciones sobre
el cliente
seleccionado
Para que el web panel con el que venimos trabajando sea un verdadero trabajar con se le deben agregar
acciones a ser efectuadas sobre los clientes: la posibilidad de insertar un nuevo registro (nuevo cliente), el
modificar uno existente, o el eliminarlo (as como tambin poder simplemente visualizarlo).
Una forma de implementar esto es agregar los cuatro botones que aparecen arriba, en el form:
.
.
.
.
un
un
un
un
botn
botn
botn
botn
que
que
que
que
ofrezca
ofrezca
ofrezca
ofrezca
insertar un cliente (Insert)

modificar un cliente (Update)
eliminar un cliente (Delete)
visualizar los datos de un cliente (View)
Adems debemos permitir la seleccin de una lnea de la grilla para aplicarle alguna de las acciones
definidas en los botones del form. Para ello, accedemos a las propiedades de la grilla con botn derecho
sobre el control grid y configuramos la propiedad AllowSelection con el valor True como muestra la
figura. Al hacerlo se nos habilitan tres propiedades ms, que permiten especificar SelectionColor: el color
que tendr la lnea cuando el usuario la seleccione (haciendo clic con el mouse sobre la misma);
AllowHovering: la posibilidad de que cambie el color de las lneas cuando el usuario se desplaza con el
mouse sobre ellas, y HoveringColor: el color que tendr una lnea cuando el mouse pasa sobre ella. Estas
funcionalidades se implementan con cdigo javaScript que se enva al Browser al ejecutar el Web Panel.
En la seccin de eventos del web panel, definiremos el cdigo asociado a estos botones. Lo veremos en la
pgina siguiente.
267
Eventos de usuario en el web panel

Trabajar Con Cliente
Event Insert
TCliente.call(INS, 0)
Endevent
Event Update
TCliente.call(UPD, ClienteId)
Endevent
Event Delete
TCliente.call(DLT, ClienteId)
Endevent
En las reglas de la
transaccin Cliente:
Parm(&Mode, &ClienteId );
Variable del
sistema
Variable de
usuario
ClienteId = &ClienteId if not

&ClienteId.IsEmpty();
Event View
TCliente.call(DSP, ClienteId)
Endevent
La variable &Mode es del sistema y su tipo es Character(3). Tiene la particularidad de entender 4 valores:
INS: este valor indica ejecutar la transaccin en modo Insert

UPD: este valor indica ejecutar la transaccin en modo Update
DLT: este valor indica ejecutar la transaccin en modo Delete
DSP: este valor indica ejecutar la transaccin en modo Display
Cul es el resultado de recibir por parmetros en una transaccin el modo de ejecucin y la clave
primaria? El permitir insertar, modificar o eliminar puntualmente una instancia y luego retornar al objeto
llamador.
Es por ello que en todos los eventos definidos en el Web Panel Trabajar Con Cliente estamos invocando a
la transaccin Cliente, pasndole dos valores por parmetro: un literal de 3 letras, que es el modo y el
cdigo de cliente correspondiente a la lnea del grid que fue seleccionada (por ello necesitamos habilitar la
seleccin de lneas del grid, mediante la propiedad AllowSelection que vimos antes).
En definitiva la regla parm a definirse en la transaccin "Cliente", es:
parm(&Mode, &ClienteId);
Como se puede observar, no recibimos el cdigo de cliente directamente en el atributo ClienteId, sino en
una variable. Por qu?
Si declarramos el atributo ClienteId en vez de una variable, el valor que se recibiera en l actuara
automticamente como filtro por igualdad. Sin embargo cuando invocamos a la transaccin "Cliente" con los
parmetros INS y 0, el modo INS indica que queremos que la transaccin se ejecute en modo insert; y
como en dicho caso no tenemos que enviar el cdigo de cliente para instanciarlo, completamos el segundo
parmetro con valor 0 (porque la cantidad y el tipo de datos- de los parmetros enviados, debe coincidir
con la cantidad y el tipo de datos- de los parmetros recibidos). De modo que el valor 0 es para completar
el parmetro simplemente, no para que se filtre por l tratando de instanciar un cliente de cdigo 0.
En los otros 3 casos en que se invoca a la transaccin "Cliente" (con los parmetros UPD y ClienteId ; DLT
y ClienteId DSP y ClienteId respectivamente) s se quiere filtrar por el valor del cdigo de cliente recibido;
pero basta que haya un caso en el cual se invoque a la transaccin y que no sirva filtrar por el valor
recibido, para que no sirva recibir el parmetro en el atributo y esa es la razn por la cul se est recibiendo
en una variable. Si la clave primaria, ClienteId es autonumerada, entonces en ese caso s podr recibirse en
atributo.
Recuerde que a partir de la inclusin de la regla parm en un objeto, ste desaparece del Developer Men,
debido a que desde el mismo no es posible el envo de parmetros.
268
Web panels - Funcionamiento

Esquema de trabajo en Internet: el servidor no sabe
lo que se est haciendo en el Browser, hasta que se
someta la pgina. Es decir, hasta que se dispare un
evento (enter, de usuario, click).
Orden de disparo de eventos: es diferente si se
trata de la primera carga del web panel (Get) o si
ya estaba cargado cuando se dispara un evento de
usuario, enter, click (Post)
Es importante entender que en Internet, cuando el usuario accede a una pgina del servidor Web para
visualizarla, el Browser baja la pgina al cliente. Por lo tanto, no existe forma de detectar lo que realiza el
usuario: el servidor Web volver a tener el control cuando se dispare el evento ENTER o algn evento de
usuario o click. En ese momento se enva (se somete, se hace un post) el resultado al servidor para continuar
con su procesamiento. Es decir, una vez que el objeto web finaliza la ejecucin en el servidor, no queda en
memoria. Como consecuencia, la forma en que programamos este tipo de aplicaciones presenta algunas
diferencias con respecto a lo acostumbrado en ambientes no web.
Es por esta razn que es importante destacar el orden en que se disparan los eventos y el momento en que
las variables adquieren el valor ingresado por el usuario.
El orden de ejecucin de los eventos en web panels es diferente si se trata de la primera llamada al mismo
(GET) o si se dispar algn evento de usuario, enter o click (POST).
269
GET: Orden de disparo de eventos
Al ejecutar un web panel por primera vez se

disparan los siguientes eventos:
Start
Refresh
Load
La primera vez que se ejecuta el web panel (se conoce tambin como el momento en que se hace el
GET de la pgina) los eventos que se disparan son los siguientes y en el siguiente orden:
1. Start
2. Refresh
3. Load
Luego de esto, cuando el usuario haga clic sobre un control que tenga asociado el evento Enter o uno de
usuario o click se ejecutar nuevamente el web panel y el orden de disparo de los eventos ser diferente,
como se indica en la siguiente pgina.
270
POST: Orden de disparo de eventos

Resto de las ejecuciones del web panel:
Start
Lectura de variables
en pantalla
Evento Enter o de
usuario (submit)
Refresh
Load
En el resto de las ejecuciones del web panel, que ocurren cuando se presiona un botn, o se fuerza la
ejecucin del evento asociado a una imagen, text block, etc. (haciendo clic sobre el control que tiene asociado
el evento de usuario o Enter o click) momento que se conoce tambin como el POST de la pgina, los
eventos se dispararn en el siguiente orden:
1. Start (nuevamente se dispara el evento Start)
2. Lectura de las variables de la pantalla. Esto se realiza porque el usuario puede haberlas modificado (por
ejemplo las variables de la parte fija del web panel que estn involucradas en las conditions, como en el
ejemplo que se presenta arriba, donde se quieren cargar en el grid los clientes cuyo nombre contenga el
string cargado por el usuario en la variable &ClienteNombre)
3. Evento Enter o click o evento de usuario (cdigo correspondiente al evento asociado al control que se
presion y produjo el POST).
4. Refresh
5. Load
En el ejemplo no necesitamos codificar nada en el evento asociado al botn Buscar. Solo lo pusimos para
poder enviar al servidor la variable con el valor que ingres el usuario y que la pgina se refresque cargando
en el grid los clientes que cumplan con el filtro que el usuario estableci mediante esa variable.
271
Web panels - Variables

Variables: adquieren valor ingresado por el usuario luego de
sometido evento (POST)
Si en un evento se usa una variable que se carga en otro evento
la variable debe estar en el form, y adems debe estar despus del
control en el que se carga su valor.
Ejemplo:
Event Load
&cont+=1
endevent
Event Enter
Event Refresh
&cont= 0
endevent
if &cont<5
endevent
Relacionado con el orden de disparo de los eventos, es importante destacar el momento en que las
variables adquieren los valores ingresados por el usuario: solamente lo harn despus de presionar un
botn1 (que es cuando el servidor Web tiene el control del procesamiento).
Por ejemplo, cualquier Link especificado en el evento Start a otro web panel con una variable que se ingresa
en el form no va a tener ningn valor cuando se haga clic sobre el Link.
(Ej: control.Link = HWebPanelX.Link(&var). No se debe escribir esto en el start si la &var esta en el form,
porque al momento de armarse el link no se tiene el valor de la variable)
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 disparen los eventos que la consultan
(esto es por el orden en que ocurren los eventos).
Adems, deber estar en el form despus del control en el que se carga. Por ejemplo, si la variable se carga
en el LOAD de un grid entonces la variable tiene que estar en pantalla despus del grid.
Ejemplo: web panel con grid que lista las facturas existentes, y queremos contar la cantidad de facturas que
se listan en el grid. Para ello definimos una variable &cont que debemos incrementar cada vez que se carga
una nueva lnea, es decir, en el evento Load del grid.
Para que la variable se cargue correctamente, deber incluirse luego del grid, puesto que de lo contrario ya se
habr dibujado en la pgina, antes de que pueda ser cargada por el evento Load.
Gracias a tenerla en el form, cuando el usuario presione el botn Confirm que consulta por el valor de la
variable, la misma podr tener el valor cargado antes por el Load.
Recordemos que al presionar el botn Confirm se realizar un POST al servidor, y en l se dispararn Start,
lectura de variables de pantalla (aqu se leer el valor de &cont que haba sido cargado antes por el evento
Load), luego se disparar el evento Enter asociado al Confirm y dentro del mismo se consulta por el valor de
la variable, que gracias a que fue enviada al servidor por estar en el form, tiene el valor que se haba cargado
antes. Luego se dispararn Refresh y Load.
Observemos que aqu, cuando se dispare el Load, se incrementar la variable, por lo que deberemos
resetearla antes de que se empiecen a cargar las lneas, porque de lo contrario mostrar el doble de las lneas
que tena antes. Dnde resetearla?
Event Refresh
&cont = 0
endevent
----------------------------------------------------------------------------------------------------------------------1 O hacer clic sobre algn control del form que tenga un evento de usuario o click o Enter asociado (ya sea con
la propiedad Link, o la propiedad OnClickEvent, o el evento click).
272
Ejemplo: Supongamos que tenemos un web panel donde en un sector del form se puede ingresar usuario
y contrasea para loguearse al sistema.
En el evento donde validamos el usuario y la contrasea (asociado a algn botn o text block),
guardamos en una variable el cdigo de usuario para poder utilizarlo en otro evento. Esto nos permitira,
por ejemplo, llamar a un objeto que permita visualizar los datos del usuario (por ejemplo un web panel de
nombre DatosCliente, que recibir por parmetro el identificador de cliente).
En consecuencia, primero que nada, deberamos programar lo siguiente en el evento donde validamos el
usuario:
Event Login
For each
Where ClienteUser = &ClienteUser
If ClientePassword = &ClientePassword
&ClienteId = ClienteId
Mensaje.Caption = Bienvenido/a +trim(ClienteNombre)
Else
Mensaje.Caption = La contrasea ingresada no es correcta
Endif
When none
Mensaje.Caption = El usuario ingresado no existe
Endfor
Endevent
donde Mensaje es el nombre de un text block que dinmicamente (con la propiedad Caption) cambia de
texto.
Obsrvese que tenemos una tabla CLIENTE que contiene la info de usuario y password.
Para realizar la llamada al web panel Datos del Cliente (DatosCliente), existen varias alternativas, una de
las cules sera agregar un botn o una imagen con un evento click asociado (o definir un evento de
usuario y asocirselo al control mediante la propiedad OnClickEvent), entonces el cdigo seria el
siguiente:
Event Ver.clic // ver es el nombre de la imagen o botn.
HDatosCliente.Call(&ClienteId)
Endevent
Repasemos entonces lo que ocurre:
1. En la primera ejecucin se disparan los eventos: Start, Refresh y Load y podemos ingresar el usuario y
password en las variables respectivas.
2. Cuando presionamos el botn o text block para validar el login, se dispara el evento Start, se leen las
variables anteriores que estn en pantalla, se ejecuta el cdigo del evento Login, donde se asigna a la
variable &ClienteId el cdigo de cliente del usuario correspondiente. Luego ocurren Refresh y Load y la
pgina se despliega en el Browser.
3. Ahora, ya estando logueados, cuando presionamos la imagen o botn con el evento click asociado, se
dispara el evento Start, se leen las variables que estn en pantalla, se ejecuta el evento click y ah cuando
redireccionamos al Web Panel DatosCliente, la variable &ClienteId no tiene valor alguno, ya que la misma
se perdi luego de haber finalizado la ejecucin del Web Panel en el punto 2.
Es por esta razn que si queremos disponer del valor de la misma, deberamos agregar la variable
&ClienteId en el form y la ocultaramos usando la propiedad Visible (por ejemplo en el evento Start).
Event Start
&ClienteId.Visible = 0
Endevent
Entonces en este caso, cuando el Web Panel ejecute por segunda vez, se dispararn los eventos:
1. Start
2. Se leen las variables del form (en este momento se obtiene el valor de &ClienteId)
3. Se ejecuta el evento click, y por consiguiente se llama al Web Panel con el cdigo de cliente correcto.
Esto es porque no existe un concepto de memoria local para los web objects, por lo cual, si en un
evento se usa una variable que se carga en otro evento, entonces esa variable debe estar presente en el
form, de manera que, aprovechando el orden de disparo de los eventos en el POST, se obtenga el valor
de la variable.
273
Definicin de columnas ocultas

en el grid de un web panel
Al hacer botn derecho sobre el grid y seleccionar Columns:
Editar las propiedades de la columna

que se quiere ocultar:
Hay veces que por motivos de presentacin, no se desea incluir ciertos atributos o variables como columnas
visibles de un grid, pero se necesita tener sus valores cargados en columnas ocultas.
Por qu motivo se puede necesitar definir una columna oculta en el grid de un web panel?
Un grid siempre tiene un archivo temporal asociado.
Cuando en un Web Panel se ejecuta el evento Refresh, se comienza a ejecutar la consulta a la base de datos;
a continuacin por cada registro ledo que cumpla con las condiciones de filtro definidas, se ejecuta el evento
Load y se cargan los datos de dicho registro, en el archivo temporal asociado al grid.
Qu datos de los registros se cargan en el archivo temporal? Es decir, qu columnas contendr el archivo
temporal? Una columna por cada atributo o variable mostrado en el grid, ms una columna por cada atributo
o variable declarado en el grid como columna oculta.
A modo de ejemplo, si en un grid hay 2 columnas visibles con los atributos ClienteNombre y ClienteSaldo y
ninguna columna oculta, el archivo temporal asociado al grid contendr 2 columnas correspondientes a los
atributos ClienteNombre y ClienteSaldo, respectivamente. Si adems de esas 2 columnas visibles, se declara
el atributo ClienteId como columna no visible en el grid, el archivo temporal asociado contendr 3 columnas
correspondientes a los atributos ClienteNombre, ClienteSaldo y ClienteId, respectivamente.
Si en el grid slo incluimos 2 columnas visibles con los atributos ClienteNombre y ClienteSaldo, en el caso en
que necesitemos en un evento de usuario conocer el valor del atributo ClienteId correspondiente al cliente de
cierta lnea seleccionada (para escribir alguna sentencia utilizndolo), no lo tendremos. Para conocer en un
evento de usuario el valor del atributo ClienteId correspondiente a cierta lnea seleccionada, tendremos que
incluirlo en el grid ya sea visible o no visible, pero debe estar presente.
Como ejemplo, pensemos en nuestro Web Panel Trabajar Con Clientes: necesitbamos una vez que el
usuario seleccionaba una lnea, y presionaba el botn Update llamar a la transaccin Cliente envindole
como parmetro el ClienteId seleccionado. En este caso necesitamos tener el ClienteId en el archivo
temporal, ya sea que est visible en el grid o no lo est.
Cmo ocultar una columna en un grid?
Para ocultar una columna en un grid, debemos configurar la propiedad Visible del atributo o variable que se
desea ocultar con valor False. Para ello, debemos hacer clic con el botn derecho del mouse sobre el grid y
seleccionar las columnas (Columns) de la grilla; se abrir el dilogo mostrado. Luego, habr que posicionarse
en el atributo o variable que se desee definir como columna oculta, y editar sus propiedades (Properties). Por
ltimo, se debe configurar la propiedad Visible de la columna con valor False.
274
De modo que el motivo por el cual podemos necesitar incluir un atributo o variable como
columna oculta de un grid, es porque necesitemos conocer el valor de ese atributo o variable en
un evento de usuario, pero no deseemos mostrarlo.
As como los eventos de usuario trabajan con los datos cargados en el archivo temporal asociado
al grid, las condiciones de filtro en cambio, trabajan sobre la tabla fsica consultada y su tabla
extendida; por lo tanto, al definir condiciones de filtro, se podrn referenciar atributos que
pertenezcan a la tabla fsica que se consulta y su tabla extendida, sin la necesidad de que dichos
atributos deban estar incluidos en el grid (ni visibles ni ocultos) ni en ninguna otra seccin del
web panel.
Por ejemplo, pinsese en el ejemplo que ya presentamos antes:
Event Load
if ClienteSaldo > 10000
&tipo = 'DEUDOR'
else
&tipo = ''
endif
endevent
Aqu surge la pregunta: como en este evento utilizamos el atributo ClienteSaldo para poder
cargar adecuadamente la variable, es necesario colocarlo oculto en el grid? La respuesta es no.
En el evento Load estamos posicionados en un registro de la tabla base. Tenemos a disposicin
todos los atributos de esta tabla base y de la extendida, sin necesidad de cargarlos luego en el
grid.
275
Comando FOR EACH LINE

GeneXus nos provee el comando For each line para recorrer las
lneas de un grid en un web panel:
for each line [in NombreGrid]

Sentencia 1
Sentencia N
endfor
in NombreGrid: solamente es necesario explicitarlo cuando hay ms

de un grid en el form del web panel.
Sentencia 1, , Sentencia N: sentencias a ejecutarse para cada
lnea recorrida del grid.
276
Comando FOR EACH LINE

Ejemplo
Event Borrar
for each line
if &dlt = S
PBorrClientes.call(ClienteId)
endif
endfor
Endevent
A continuacin, implementaremos un caso de seleccin mltiple, una operativa diferente a la presentada en

el caso del web panel Trabajar Con Clientes, que permita seleccionar una nica lnea por vez (seleccin
simple).
La operativa que pretendemos ofrecer en el web panel BorrClientes presentado arriba es la siguiente: luego
de que el usuario haya ingresado un substring para filtrar los clientes y se haya cargado el grid con los
clientes que cumplan dicho filtro, el usuario podr marcar (con un clic del mouse) qu lneas (clientes) desea
eliminar.
En el ejemplo, hemos incluido en el grid del web panel BorrClientes", una variable de nombre &dlt (definida
como check box), adems de los atributos ClienteId, ClienteNombre, PaisId, PaisNombre y ClienteDireccion.
De esta forma, el usuario seleccionar el check box en los clientes que desea eliminar. A su vez, tendramos
que tener un botn Borrar" y en el cdigo del evento asociado a dicho botn deberamos recorrer el grid y
para cada lnea seleccionada invocar a un procedimiento que haga la eliminacin fsica de dicho cliente.
A continuacin incluimos el cdigo del procedimiento BorrClientes que recibe en la regla parm el cdigo del
cliente a eliminar (ClienteId).
Reglas:
Parm(ClienteId);
Source:
for each
defined by ClienteNombre
Delete
//se elimina el cliente recibido como parmetro
Endfor
277
Variables en un grid
Por defecto todas las variables de un grid son
Read-Only
For each line [in grid], evento click, OnClickEvent:
modifica valor por defecto y todas las variables
del grid pasan a ser de entrada.
Propiedad: Read Only para que alguna sea de
salida.
Cmo desplegar datos en un grid

Por defecto todo atributo y variable que est dentro de un grid se despliega en ejecucin como texto, es decir
que es nicamente de lectura y por consiguiente no puede ser modificado.
Cmo aceptar datos en un grid
Es posible aceptar datos en las variables de un grid dependiendo de la programacin de los eventos existentes
en el objeto:
1. Si dentro de un evento del web panel se est utilizando el comando For each line, todas las variables que
estn dentro del grid pasan a ser de entrada. Es posible indicar en este caso cules son las variables que
no van a poder ser modificadas (Ver ms abajo).
2. Si dentro de la fila hay algn control con un evento click asociado ( evento de usuario especificado en la
propiedad OnClickEvent).
Cmo indicar que una variable no puede ser modificada
1. Para indicar que el valor de una variable en un grid no puede ser modificado, debemos configurar la
propiedad Read Only de la variable con valor True. Para ello, debemos hacer clic con el botn derecho
del mouse sobre el grid y seleccionar las columnas (Columns) de la grilla. Luego, habr que posicionarse
en la variable que se desee definir como de slo lectura, y editar sus propiedades (Properties). Por ltimo,
se debe configurar la propiedad Read Only de la columna con valor True.
2. Utilizando la regla Noaccept()
278
Diferentes tipos de grilla/grid

Grid estndar: datos repetitivos en formato fijo (lnea, columna)
Grid Freestyle: datos repetitivos en formato libre
Se dispone de dos tipos de grilla:

Grilla estndar: la que vimos hasta ahora, en Transacciones y Web Panels
Grilla Freestyle
Estas grillas, agregan potencia al diseo de aplicaciones web, permitiendo al desarrollador mayor libertad a la
hora del diseo.
279
Grid estndar
Propiedades:
Establece si el grid se
cargar o no por
pginas (paginado).
Indica cantidad de
filas por pgina.
0 todas (no habr
paginado)
Permite
seleccin de
lnea del grid
Los grids permiten trabajar con datos repetitivos en web panels y transacciones con form HTML. Las columnas
de los grids pueden ser atributos, variables (incluyendo las de tipo bitmap), y siempre tendrn una primera fila
que corresponder a los ttulos de las columnas.
En ejecucin, el grid ser una tabla HTML.
Para interiorizarse de cada una de las propiedades configurables de un grid, sugerimos acceder al Help de
GeneXus. Aqu solo mencionaremos algunas como ejemplo:
ControlName: Permite indicar el nombre del control. Siempre se le asigna un nombre por defecto.
Class: Clase (del tema asociado al objeto) asociada al control. La propiedad Class solo se encuentra disponible
si el control est en el form de un objeto que tiene un Tema asociado.
BackColorStyle: Permite asignar un estilo al grid. Los estilos disponibles son:
1. None: el grid no tendr un estilo particular, sino que tendr el diseo del form o del control que lo contenga.
2. Header: permite especificar un color para el fondo de los ttulos del grid y otro para las lneas del mismo.
Las propiedades son LinesBackColor y TitleBackColor.
3. Report: permite especificar un color para el fondo de los ttulos y alternar colores para las lneas pares e
impares del grid. Las propiedades son LinesBackColor, LinesBackColorEven y TitleBackColor.
4. Uniform : permite especificar un nico color para el fondo del grid(tanto el ttulo como las lneas).
Dependiendo del valor de la propiedad BackColorStyle, estarn disponibles otras propiedades adicionales
relacionadas con la configuracin de las lneas del grid.
Rows: Esta propiedad permite al usuario indicar la cantidad de registros que va a cargar en el grid. Aplica
nicamente a los grids que tienen tabla base. Si el valor de esta propiedad es 0, se despliegan tantas lneas
como registros resulten de la consulta asociada. El valor por defecto de esta propiedad es 0.
Collapsing:
AllowCollapsing :True: Permite colapsar el grid en ejecucin
Collapsed :True: Arranca el grid colapsado.
Selection:
AllowSelection: True: Especifica que es posible seleccionar una lnea en la grilla.
SelectionColor: Seleccionar el color deseado al marcar la fila
AllowHovering: True: Marca la fila cuando el mouse se posiciona sobre la misma.
HoveringColor: Seleccionar el color deseado
280
Grid Freestyle
Permite formato libre de los
registros
Tabla con registros repetitivos
No posee ttulos para las
columnas
Permite tener ms de un tipo de
control en una misma celda
grid
Propiedades de diseo de tablas

Propiedades del Grid
El grid Freestyle permite al usuario definir el formato de los datos a desplegar de una forma menos
estructurada que el grid estndar.
El grid Freestyle es bsicamente una tabla a la que se le pueden insertar los atributos/variables, text blocks,
imgenes, botones, web components, embedded pages, grids freestyle y/o grids que se van a mostrar
posteriormente en la pantalla. Este tipo de grid no posee ttulos para las columnas y adems permite tener
ms de un tipo de control, atributo/variable en una misma celda, proporcionando de esta forma mayor
libertad de diseo. Cabe destacar que el grid Freestyle posee las mismas propiedades mencionadas
anteriormente para el grid estndar.
En este caso para poder visualizar las propiedades hay que seleccionar la tabla donde se encuentran los
atributos/variables.
En el ejemplo presentado arriba queremos mostrar alguna informacin de los clientes. El atributo ClientePhoto
se ha incluido en la transaccin Cliente para almacenar la foto de cada cliente (es un atributo de tipo Blob).
Pero no queremos mostrar la informacin como lo haramos en un grid estndar, con cada elemento de
informacin en una columna distinta del grid. Aqu queremos mostrar la foto y debajo el nombre del cliente.
El comportamiento de las variables dentro de un grid Freestyle es anlogo al que presentan dentro de un grid
estndar, por lo tanto tambin quedan de ingreso si existe un For each line o For each line in <grid> dentro
de algn evento, o si se asocia un evento a cualquier control de la fila. Nuevamente este comportamiento
puede modificarse, agregando la regla noaccept o cambiando la propiedad Read Only.
281
Grid Freestyle
Propiedades
Para visualizar las propiedades de un grid Freestyle, hay que seleccionar la tabla del grid, presionar el botn
derecho del mouse y seleccionar la opcin Properties.
Nuevamente, para interiorizarse de cada una de las propiedades configurables de un grid freestyle, sugerimos
acceder al Help de GeneXus. Aqu solo mencionaremos algunas como ejemplo:
Class: Permite modificar la clase de un control, ya sea en tiempo de diseo como en ejecucin.
La clase debe pertenecer al tema asociado al objeto que contiene el control. La propiedad Class solo se
encuentra disponible si el control est en el form de un objeto que tiene un Tema asociado.
BackColorStyle: Permite asignar un estilo al grid. Los estilos disponibles son los mismos que para un grid
estndar (ver grid estndar)
Rows: Esta propiedad permite al usuario indicar la cantidad de registros que va a cargar en el grid. dem a
grid estndar.
Columns: Esta propiedad permite al usuario indicar cuntas columnas va a tener el Freestyle grid en
ejecucin. Si se ingresa un valor distinto de 1, el Freestyle grid va a mostrar los registros en tantas columnas
como se haya especificado en la propiedad. Si el valor de esta propiedad es 0, se despliegan tantas columnas
como registros resulten de la consulta asociada. El valor por defecto de esta propiedad es 1. Esta es propia de
este tipo de grids.
Propiedades modificables en ejecucin: En tiempo de ejecucin se pueden modificar algunas
propiedades, como: visible, backcolor, backColorEven, BackColorOdd, Columns, Rows y
RecordCount: La propiedad RecordCount aplica nicamente a grids que tienen tabla base y retorna un
nmero mayor o igual a cero representando la cantidad de registros de la tabla base del grid que cumplen las
condiciones de seleccin. Puede retornar -1 si no existe navegacin para la tabla base del grid.
PageCount: La propiedad PageCount devuelve la cantidad de pginas del grid en base a las propiedades
Rows y Columns del mismo. Al igual que la propiedad RecordCount, devuelve 1 si el grid no tiene tabla base.
Para el caso de un grid estndar, tambin existe esta propiedad dinmica, pero toma en cuenta solo la
propiedad Rows.
282
Paginado de grids en Web panels

Asignarle valor a propiedad
Rows para indicar cantidad
de registros a cargar por
pgina.
Mtodos:
Firstpage
Nextpage
Previouspage
Lastpage (tabla base)
Gotopage (tabla base)
Propiedades:
RecordCount (tabla base)
PageCount (tabla base)
Descripcin
El paginado del grid aplica a grids comunes y freestyle cuya propiedad Rows tenga un valor diferente de
cero. Existen algunas diferencias relacionadas con la paginacin cuando un grid tiene tabla base o no.
Podemos agregar al web panel Trabajar Con Cliente botones de navegacin para el grid (se muestran
arriba) y eventos para realizar el paginado.
Mtodos
A continuacin se describen los mtodos disponibles:
FirstPage:
El mtodo FirstPage lleva al usuario al primer conjunto de registros devueltos.
Los valores devueltos por este mtodo son los siguientes:
0: Operacin exitosa
1: No est habilitado el paginado en el grid
NextPage
El mtodo NextPage lleva al usuario al siguiente conjunto de registros.
0: Operacin exitosa
2: Ya se encuentra en la ltima pgina
PreviousPage
El mtodo PreviousPage lleva al usuario al conjunto anterior de registros.
0: Operacin exitosa
2: Ya se encuentra en la primera pgina
Lastpage
El mtodo LastPage lleva al usuario al ltimo conjunto de registros. Puede ser utilizado nicamente si el grid
tiene tabla base.
0: Operacin exitosa
3: El grid no tiene tabla base
283
GoToPage
El mtodo GotoPage(PageNumber) permite acceder en forma directa a un determinado conjunto de
registros. Puede ser utilizado nicamente si el grid tiene tabla base.
0: Operacin exitosa
Propiedades
Cada grid dispone de las siguientes propiedades que son utilizadas en la paginacin:
RecordCount
La propiedad RecordCount aplica nicamente a grids que tienen tabla base y retorna un nmero mayor o
igual a cero representando la cantidad de registros de la tabla base del grid que cumplen las condiciones de
seleccin. Puede retornar -1 si no existe navegacin para la tabla base del grid.
PageCount
La propiedad PageCount devuelve la cantidad de pginas del grid en base a las propiedades Rows y
Columns del mismo. Al igual que la propiedad RecordCount, devuelve 1 si el grid no tiene tabla base.
Recomendamos estudiar las consideraciones de eficiencia relacionadas con el uso de estos mtodos. Se
aconseja realizar un buen filtrado de datos del grid.
284
Reglas ms utilizadas en Web Panels

A diferencia del objeto transaccin, en el cual se programa su comportamiento mediante la definicin de
reglas, en el objeto web panel la programacin es dirigida por eventos.
Son pocas las reglas para web panels, y las mismas permiten definir comportamientos puntuales (hay algunas
reglas ms adems de las mencionadas, que se pueden consultar en el Help de GeneXus).
Noaccept(&variable);
En los web panels las variables que estn en el form fuera de un control grid, que estn dentro de un grid
pero hay algn evento donde se utiliza el comando For each line, o se le ha asociado evento de usuario o click
a algn atributo o variable del grid, son de entrada por defecto; es decir, el comportamiento por omisin es
que en las mismas pueden ingresarse valores.
Para definir que una variable se presente deshabilitada en un web panel, es decir, no permitiendo ingresos en
la misma, una opcin es definir la regla:
noaccept(&variable);
siendo &variable una variable definida en el objeto.
La otra opcin que tenemos en GeneXus para que una variable se presente deshabilitada en un web panel es
configurando la propiedad Read Only de la variable con valor True.
Ver seccin Propiedades de la grilla.
Default(&variable, valor);
Asigna un valor por defecto a una variable.
&variable: es una variable definida en el objeto.
valor: puede ser un literal entre comillas, un nmero o una de las funciones Today(), Date() o SysDate(),
debiendo coincidir el tipo de datos del valor con el tipo de datos de la variable.
El valor por defecto se asignar a la variable al principio de la ejecucin del programa.
285
Conceptos fundamentales
Web panel con a lo sumo un grid:
Con tabla base
Sin tabla base
Web panel con N grids:

Grids paralelos
Grids anidados
286
Web Panel con tabla base

Web panel es con tabla base cuando a lo sumo tiene un grid y
GeneXus puede determinar un for each implcito asociado a l.
Para determinar si un web panel tiene tabla base y en caso
afirmativo cul ser, al momento de especificarlo GeneXus analiza
los atributos incluidos en:
1. form: en la parte fija
2. form: en el grid (visibles o no visibles)
3. el order del grid
4. las condiciones del grid (no en las condiciones globales)
5. los eventos fuera de comandos for each
GeneXus busca la mnima tabla extendida que contenga a todos estos atributos, y la tabla base de dicha
mnima tabla extendida, ser la tabla base del for each implcito (es decir, la tabla que navegar el for each),
se llamar tabla base del web panel.
Observar que GeneXus no toma en cuenta para determinar la tabla base de un web panel:
1) los atributos recibidos por parmetro
2) los atributos mencionados en las condiciones globales del web panel
stos actan como filtros una vez determinada la tabla base.
287
Web panel sin tabla base
Un web panel sin tabla base es aquel que no

tiene atributos en ninguno de los 5 lugares
puntuados antes.
Por lo tanto GeneXus no determina un for each

implcito asociado a l.
Los web panels de entrada generalmente son web panels sin tabla base por el hecho de que suelen
contener solamente variables; entonces, por no contener atributos en ninguno de los 5 lugares tenidos en
cuenta por GeneXus para determinar la tabla base, son web panels sin tabla base.
Adems del caso de los web panels de entrada, existen otros casos que ameritan la definicin de web panels
sin tabla base.
En la prxima pgina vemos la resolucin de una consulta con un web panel sin tabla base.
288
Web panel sin tabla base

Ejemplo
Mostrar para cada cliente el total facturado, pero slo de los

clientes que tienen facturas.
Event Load
For Each ClienteId

defined by FacturaFecha
&Cliente = ClienteNombre
&Total =0
for Each
&Total +=FacturaTotal
endfor
Load
endfor
EndEvent
Dado que no mencionamos atributos en ninguno de los 5 lugares tenidos en cuenta por GeneXus para
determinar la tabla base, se trata de un web panel sin tabla base.
Por tratarse de un web panel sin tabla base, el evento Load se ejecuta una sla vez; y en el mismo
codificamos explcitamente los accesos con comando for each: cargamos valores en variables y para cargar
lneas en el grid utilizamos el comando LOAD.
Nota: Observar en este caso que todas las columnas definidas en el grid (variables: &Cliente y &Total) son
exclusivamente de salida, manteniendo el comportamiento por defecto definido para las variables en un grid.
Esto se debe a que no se est utilizando el comando For each line en ninguno de los eventos del web panel, ni
tampoco hay definido un evento click asociado a un control del grid (ni OnClickEvent).
289
Comando LOAD
El objetivo del comando LOAD es incluir efectivamente una lnea
en un grid.
Una vez que se haya asignado valores a todas las variables que
sean necesarias, y se desee agregar la lnea al grid, deber
ejecutarse el comando LOAD.
Solamente se puede especificar el comando LOAD dentro del
evento Load del grid de un web panel.
Si en la codificacin del evento Load definimos comandos For each y asignamos valores a las variables en las
iteraciones pero no incluimos el comando LOAD, en tiempo de ejecucin estaremos asignando una y otra vez
valores a las variables, pero no se estarn agregado lneas en el grid (solamente quedar una lnea en el grid
con los ltimos valores cargados en las variables).
290
Web panel con tabla base

Ejemplo
Mostrar para cada cliente el total facturado, pero slo de los

clientes que tengan facturas.
Event Load
&Total =0
For Each
&Total +=FacturaTotal
endfor
EndEvent
Atributo Oculto: FacturaFecha

Atributo Order: ClienteId
Corte de control!
Atributo en el form del web panel: ClienteNombre

Atributo oculto (no visible) en el grid: FacturaFecha
tabla base del web panel: FACTURA
Atributo order en el grid: ClienteId

Al especificarse este web panel, GeneXus determinar que la tabla base del mismo es FACTURA, significando
esto que el web panel tiene un for each implcito asociado, con tabla base FACTURA.
Recordemos que en los web panels con tabla base, el evento Load se ejecuta N veces y es muy importante
el siguiente concepto:
Si en un web panel con tabla base, se incluye un comando for each en el evento Load, dicho for
each se anidar al for each implcito asociado al web panel. Es decir, el for each definido en el
evento Load no ser un for each independiente.
En el web panel del ejemplo, codificamos lo siguiente en su evento Load:
- Inicializacin de la variable &Total con valor cero
- For each cuya tabla base ser FACTURA (porque el nico atributo que contiene es FacturaTotal) y dentro del
mismo incrementamos la variable &Total con el total de cada factura (FacturaTotal) recorrida.
De modo que como el web panel tiene tabla base FACTURA, en su evento Load definimos un for each con
tabla base FACTURA tambin, y definimos un order indicando un criterio de agrupacin, hemos
implementado en el web panel con tabla base, un corte de control.
En cambio, si no hubisemos puesto el atributo FacturaFecha en el grid, el web panel seguira teniendo tabla
base, pero esta vez sera CLIENTE. En el evento Load se defini un for each con tabla base FACTURA (ya que
dentro del comando for each solamente se encuentra el atributo FacturaTotal). El for each del evento Load
no ser un for each independiente, sino que se anidar al for each implcito asociado al web panel
y estaremos implementando un join.
GeneXus analizar: existe algn atributo relacin entre las tablas CLIENTE y FACTURA? S, ClienteId. Por lo
tanto, GeneXus definir el siguiente filtro automtico en el for each con tabla base FACTURA:
FACTURA.ClienteId = CLIENTE.ClienteId.
291
En resumen, cuando se ejecute el evento Refresh del web panel, comenzar a ejecutarse el for each
implcito asociado al web panel. Y por cada cliente recorrido, justo antes de cargarse una lnea en el grid
con el mismo, se ejecutar el evento Load. Entonces, para ese cliente que se vena recorriendo, se
ejecutar el cdigo definido en el evento Load (es decir, se recorrern sus facturas, sumando el total
facturado del cliente). Al finalizar la ejecucin del evento Load, se cargar la lnea en el grid. Obsrvese que
aqu no es necesario especificar comando Load para realizar la carga: se hace automticamente por el
hecho de tener una tabla asociada a este grid.
En los eventos de usuario sucede algo parecido: cuando se incluye un for each en un evento de usuario, el
mismo no es un for each independiente tampoco, sino que tambin se anidar al for each implcito asociado
al web panel. GeneXus considerar qu lnea del grid est seleccionada al momento de ejecutar el evento
de usuario (recordar Allowselection = True), y para los datos de la misma ejecutar el evento. De modo
que si estando seleccionada determinada lnea con un cliente, se ejecuta un evento de usuario, y el mismo
tiene un for each con tabla base FACTURA, se recorrern las facturas del cliente de la lnea
seleccionada.
Teniendo los conceptos relacionados al objeto web panel bien claros, el analista GeneXus podr optar si
definir un web panel con tabla base o sin tabla base.
292
Web panels con N grids

Grids paralelos
Cuando un web panel contiene ms de un grid en su form,

GeneXus no determina una nica tabla base
asociada al web panel, sino una tabla base asociada
a cada grid.
Atributos que participan en la determinacin
de la tabla base de cada grid:
Los incluidos en el grid (se tienen en cuenta tanto los
atributos visibles como los no visibles)
Los referenciados en Order y Conditions locales al grid
A diferencia de lo que suceda para un web panel con un solo grid, en el caso de mltiples grids los atributos
de la parte fija del web panel no participan en la determinacin de la tabla base de ninguno de ellos, pero
debern pertenecer a la tabla extendida de alguno (para que sea posible inferir sus valores).
De no respetarse esto, al especificar al web panel, se mostrar en el listado de navegacin resultante, un
warning advirtiendo de esta situacin.
Los atributos utilizados en los eventos del web panel tampoco participan en la determinacin de la tabla
base de ninguno de los grids. Los atributos que se incluyan en los eventos fuera de comandos for each,
debern pertenecer a la tabla extendida de alguno de los grids (al igual que los de la parte fija).
293

Grids paralelos - Ejemplos
Una tabla base por grid
No busca ni establece relaciones entre ellas
Ejemplo:
Dado que el web panel Ver Proveedores y Clientes tiene ms de un grid en su form, GeneXus no
determinar una tabla base asociada al web panel, sino que determinar una tabla base para cada grid.
En este ejemplo, no hay definidos ni Order ni Conditions para ninguno de los grids, por lo tanto GeneXus slo
tendr en cuenta los atributos incluidos en cada grid para determinar sus tablas bases. La tabla base del grid
que se encuentra arriba en el form ser: PROVEEDOR y la tabla base del grid que se encuentra abajo en el
form ser: CLIENTE.
Es importante resaltar que GeneXus determina la tabla base de cada grid pero no busca ni
establece relaciones entre las mismas.
Al igual que en el web panel Ver Proveedores y Clientes, en el web panel Ver Clientes y Facturas, GeneXus
determinar la tabla base del primer grid (que ser CLIENTE) y la tabla base del segundo grid (que ser
FACTURA), pero no analizar si hay atributos en comn entre ellas, y por ende no definir filtros automticos.
Es decir que los grids tendrn asociadas navegaciones independientes o paralelas.
Si bien GeneXus no establece relaciones entre las tablas bases de los grids, el analista podr definirlas
explcitamente. Primero estudiaremos los eventos en web panels con ms de un grid, y a continuacin
veremos cmo definir cargas relacionadas.
294
Grids paralelos Eventos y carga
Un Refresh global
No se relacionan las cargas
Refresh independiente de grids.
Evento Load de cada grid
Secuencia de Carga:
Refresh
<Grid Control Name1>.Refresh
<Grid Control Name1>.Load
N veces si GridControlName1 tiene

tabla base. Sino 1.
<Grid Control Name2>.Refresh

N veces si GridControlName2 tiene

tabla base. Sino 1.
En web panels con ms de un grid, existe un evento Refresh global y un evento Refresh particular para
cada grid. El evento Load, no existe global sino slo a nivel de cada grid.
Los eventos Refresh y Load a nivel de grids, deben referenciar al grid usando la siguiente nomenclatura:
Event <Grid Control Name>.<Refresh | Load>
....
EndEvent
Por ejemplo, si en el web panel Ver Proveedores y Clientes, los nombres de los grids son SuppliersGrd y
ClientesGrd respectivamente, para codificar los eventos Refresh y Load a nivel de los grids, la sintaxis deber
ser:
Event SuppliersGrd.Refresh
....
EndEvent
Event SuppliersGrd.Load
....
EndEvent
Event ClientesGrd.Refresh
....
EndEvent
Event ClientesGrd.Load
....
EndEvent
Adems de estos eventos a nivel de los grids, estar el evento Refresh global:
Event Refresh
....
EndEvent
La carga de los grids en un web panel se realiza para cada grid de forma independiente. Es decir, an si los
datos que se muestran en ambos grids estn relacionados, el especificador no relaciona las cargas.
La carga asociada a los grids de un web panel incluye el evento Refresh, o sea que la secuencia de carga de
un objeto con 2 grids es como se muestra arriba. La ejecucin del mtodo Refresh de cualquier grid solo se
dispara par refrescar dicho grid.
El orden en que se cargan los grids es como aparecen en el form: de arriba hacia abajo y de izquierda a
derecha. De esa manera, cada uno de los grids se cargar con los datos correspondientes.
295

Grids paralelos - Comandos
Load: La sintaxis sigue siendo Load, pero debe estar incluido

dentro del evento load asociado al grid que se est queriendo
cargar. Su uso es anlogo al caso de un grid (sin tabla base).
Event Grid1.Load
....
Load
Endevent
For each line: Debe incluir una referencia al grid de la siguiente

forma:
For each line IN <Grid Control Name>
El comando LOAD mantiene la misma sintaxis en Web Panels con ms de un grid. Se debe incluir al mismo
para hacer cargas de grids sin tabla base, dentro del evento Load de un grid.
296
Grids paralelos - Cargas Relacionadas
Se requiere la implementacin de un Web

Panel que muestre en un grid todos los pases
(GrdPaises), y cada vez que el usuario
seleccione un pas, que se carguen sus clientes
en un segundo grid (GrdClientes).
SOLUCIN
297
Mltiples grids - Cargas Relacionadas
AllowSelection = True
Event Enter
&PaisId = PaisId
EndEvent // Enter
AMBOS GRIDS CON TABLA BASE
En la solucin que se presenta, ambos grids han sido definidos con tabla base, as que cada uno de ellos
tiene un for each mplicito asociado:
GrdPaises tiene un for each implcito asociado que navega la tabla PAIS.
GrdClientes tiene un for each implcito asociado que navega la tabla CLIENTE.
Debemos habilitar la seleccin de lnea por parte del usuario para el grid de pases (propiedad AllowSelection
del grid GrdPaises). Cuando el usuario la seleccione, presionar el botn Ver Clientes para que se
desplieguen en el grid inferior todos los clientes del pas seleccionado.
Para ello necesitamos guardar en una variable el pas seleccionado, para que luego, cuando se haga la carga
del grid de los clientes, puedan stos filtrarse mostrando solo los que correspondan al valor almacenado en
esa variable.
Es decir, en el evento asociado al botn, asignaremos a la variable &PaisId el valor del pas actual, es decir,
del de la lnea seleccionada por el usuario.
Recordemos que cuando se presione este botn, se disparar el evento Start, luego se leern las variables del
form (en este caso no hay), luego se disparar el evento asociado al botn (all se le dar valor a la variable) y
luego se dispararn el evento refresh general y a continuacin los eventos refresh y load para cargar
nuevamente el grid de pases, e inmediatamente el refresh y load para cargar los clientes (y aqu se aplicar el
filtro asociado).
Observar que no necesitamos colocar la variable &ClienteId en el form, puesto que es cargada y utilizada en la
misma ejecucin en el servidor, por lo que no pierde su valor.
Existen otras soluciones posibles para implementar la carga relacionada en web panels con mltiples grids que
veremos a continuacin.
298
Solucin Nro. 2: Grid Grdcountries con tabla base y GrdClientes sin tabla base
En esta segunda solucin, el grid GrdPaises ha sido definido con tabla base, as que tiene un for each
mplicito asociado al mismo, que navega la tabla PAIS.
Debemos habilitar la seleccin de lnea por parte del usuario sobre este grid, a travs de la propiedad
AllowSelection.
Una vez que el usuario se posiciona en una lnea y presiona el botn Ver Clientes se debe refrescar el
grid GrdClientes con los clientes que pertenezcan a ese pas.
Al igual que antes, en el evento asociado al botn (en nuestro caso es el enter), debemos darle valor a la
variable para que luego pueda ser utilizada para filtrar.
Event Enter
&PaisId = PaisId
endevent
El grid GrdClientes fue definido sin tabla base asociada, por lo cual debemos programar a mano la carga
del grid en el Evento Load.
Event GrdClientes.Load
For each
where PaisId=&PaisId
&ClienteId=ClienteId
Load
endfor
Endevent
Como el grid de clientes (GrdClientes) es sin tabla base; cada vez que se ejecute Refresh para el grid
GrdClientes, a continuacin se ejecutar su evento Load una sola vez. Por lo tanto, programamos en el
evento GrdClientes.Load un for each con tabla base CLIENTE, filtrando los clientes del pas que
habamos cargado en una variable, y agregamos explcitamente los clientes en el grid (asignando a las
variables &ClienteId y &ClienteNombre los valores de los atributos ClienteId y &ClienteNombre
respectivamente y ejecutando el comando Load a continuacin para efectuar la carga de cada lnea).
Recordemos que cuando el usuario habiendo seleccionado un pas en el grid correspondiente, presione el
botn Ver Clientes se realizar un post al servidor, donde se ejecutar el evento Start, luego se leern
las variables de pantalla, se ejecutar el cdigo asociado al botn (evento Enter), donde la variable para
filtrar es cargada, y a continuacin se dispara el evento Refresh general, y luego el Refresh seguido de N
ocurrencias del evento Load del grid de pases (1 por cada pas a ser cargado) y finalmente el evento
Refresh del grid de clientes, seguido de un evento Load para ese grid (dentro del cul se cargan las lneas
con el comando Load).
299
Solucin Nro. 3: Ambos grids sin tabla base
En esta tercera solucin ambos grids han sido definidos sin tabla base, por lo cual el evento Load de
cada grid se ejecutar una sla vez.
Event GrdPaises.Load
For each
&PaisId=PaisId
&PaisNombre=PaisNombre
Load
Endfor
Endevent
Event GrdClientes.Load
For each
where PaisId=&PaisIdActual
&ClienteId=ClienteId
Load
endfor
Endevent
En el evento Load correspondiente al grid GrdPaises, programamos explcitamente con comando for each
y comando Load, que se carguen todos los pases de la tabla PAIS.
Luego codificamos el evento Enter asociado al botn Ver Clientes:
Event Enter
&PaisIdActual = &PaisId
Endevent
En tiempo de ejecucin, estas 3 soluciones vistas se comportarn igual. Como se ha mencionado
anteriormente, si se incorporan bien los conceptos tericos vistos, el analista GeneXus podr optar al
definir un web panel, si trabajar con tabla base, sin tabla base o combinando ambas cosas.
300
Grids paralelos - Consideraciones
Acerca de condiciones de filtro

Es posible especificar condiciones de filtro tanto a nivel global como
a nivel de cada grid.
Para cada grid se tendrn en cuenta las condiciones globales y las
condiciones locales (es decir: condiciones globales and condiciones
locales).
Las globales nunca participan de la determinacin de la tabla base
No es posible nombrar a un atributo o variable de un grid
Ejemplo: GrdPaises.PaisId / GrdClientes.PaisId
S es posible referirse a PaisId, codificar sus propiedades, eventos y
mtodos
Igualmente no se recomienda tener el mismo atributo / variable en
ms de un grid, ya que las codificaciones afectaran a todos
Si por ejemplo el atributo PaisId se agregara en ms de un grid y se codificara: PaisId.Visible=0, el atributo

PaisId quedara invisible en todos los grids.
301

Grids Anidados
Varios niveles de anidacin

Anidaciones paralelas
Ej: Paises y Clientes
ejecucin
Para profundizar en este

tema dirigirse al curso de
Desarrollo de aplicaciones
para Internet con GeneXus
Es posible definir grids anidados en un web panel.

Los grids anidados consisten en un grid Freestyle al que se puede insertar dentro de una celda otro grid
estndar u otro Freestyle.
Por ejemplo, se quiere tener un web panel que muestre los clientes, pero indentados por pas, como se
muestra en la imagen en ejecucin arriba a la derecha.
Para ello se define un grid freestyle con el pas y dentro de ste se inserta otro grid, en este caso estndar,
con los clientes.
Puede haber grids anidados de varios niveles y puede haber tambin paralelos. Puede decirse que se est
definiendo un rbol en donde cada nodo es un grid.
Cada grid puede ser un freestyle o un grid estndar, aunque si es estndar no puede tener ninguno anidado.
Los grids estndar slo pueden ser hojas del rbol de anidacin.
No se ahondar en el tema en el presente curso. Podr hacerlo en el curso de Desarrollo de aplicaciones para
Internet con GeneXus.
302
Web panels
Tipos de Web panels
Component
Master Page
Web Page
Propiedad Type
Los objetos web pueden ser definidos con tres tipos diferentes, configurable en la propiedad Type del
objeto. Para un web panel podr tomar uno de los valores:
Component: (transaccin web panel, que a partir de aqu podr ser incluido en otro web object)
Master Page
Web Page (es decir, el objeto ser una transaccin web panel tal como hemos trabajado hasta el
momento)
El tipo de web panel Component se analiza en detalle en el curso Desarrollo de Aplicaciones para Internet
con GeneXus.
A continuacin introduciremos el Web Panel tipo Master Page y su utilizacin.
303
Master Pages
HEADER
CONTENT
M ENU
Tener un look&feel consistente es hoy en da un deber de toda aplicacin Web.

Crear y mantener cada pgina de una aplicacin Web asegurando la consistencia con el resto del sitio toma
gran tiempo de programacin.
En el ejemplo presentado arriba, hemos capturado una pantalla del sitio de Sony. Navegando entre las
distintas pantallas, nos hemos encontrado que todas ellas tienen un header comn, as como un men a la
izquierda de cada pgina. Ambas cosas pueden ser visualizadas en la pantalla capturada arriba. Lo que va
variando a medida que uno va navegando por las distintas pginas es lo que aparece a la derecha, y que es
el contenido especfico de cada pgina.
Cmo implementar un sitio de estas caractersticas? Con el conocimiento que tenemos hasta el momento,
tendramos que repetir la parte del Layout comn a todas las pginas del sitio, as como el comportamiento
comn, en cada web panel que implementa cada una de esas pginas. Eso introduce dos problemas
fundamentales: si hubiera que realizar alguna modificacin a esas partes comunes a todas las pginas,
habr que ir pgina por pgina a realizarlo. Y relacionado con esto, la posibilidad de olvidarnos de hacerlo en
alguna pgina, o introducir alguna variacin en la misma, degradar la consistencia del sitio.
Las Master Pages proveen una forma de centralizar el layout y el comportamiento comn en un solo
objeto y reutilizarlo en todo otro objeto sin tener que programar. Esto significa que la modificacin de alguna
parte del layout o del comportamiento comn es tan fcil como modificarla en un nico objeto y listo!.
Se crear un web panel categorizado como Master Page con todo lo que sea el Layout y comportamiento
comn a todas las pginas del sitio, y en el mismo se dejar un espacio para cargar en cada oportunidad la
pgina que corresponda (el contenido variable del sitio). Las pginas web que implementan el contenido
variable, se implementan como Web Panels o Web Transactions comunes y corrientes (es decir de tipo Web
Page, ver pgina anterior), y se asocian a la Master Page, de manera que cada vez que se ejecuten, se
carguen con ese contexto.
304
Master Pages
Propiedad Type = Master Page
Permiten definir en un nico lugar el layout y
comportamiento comn a todas las pginas del sitio
(especifican el marco o contexto de toda pgina)
Header
Men
Marco, contexto de
todas las pginas
del sitio
Lugar donde las
pginas individuales
sern cargadas.
Master Pages
Se crea entonces un objeto Web Panel y se le configura la propiedad Type con el valor Master Page. En
una misma base de conocimiento se pueden definir tantas Master Pages como se desee.
Una vez que exista al menos una Master Page en la base de conocimiento, puede ser referenciada desde
cualquier web panel o web transaction, en la propiedad MasterPage de estos objetos (que por defecto tiene
el valor (none)). El efecto de hacer esto ser que al ejecutar estos objetos, se ejecutarn con la master page
asociada, es decir, se cargar la master page, y en el hueco es donde se cargar la pgina individual.
Se profundiza en Master Pages, Web Components, Embedded Pages, en el curso Desarrollo de Aplicaciones
para Internet con GeneXus.
305

Objeto Web Panel 246

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Objeto Web Panel 246

Uploaded by

Copyright:

Available Formats

OBJETO WEB PANEL

Permiten definir consultas interactivas a la base de

Algunos de ellos son:

Los elementos de los web panels son:

configuradas para definir

Clasificacin de web panels

Web panel de Entrada

Las variables adquieren el valor digitado luego de

Web panel de Salida

Web panel de Salida

grid: Se cargan los

Web panel Mixto: Work With

Web panel con tabla base?

Orden de los datos a recuperar

Eventos en web panels

No tiene tabla base:

Comando (que solo puede ir dentro de

Web panel "Trabajar Con Cliente

insertar un cliente (Insert)

Eventos de usuario en el web panel

ClienteId = &ClienteId if not

INS: este valor indica ejecutar la transaccin en modo Insert

Web panels - Funcionamiento

GET: Orden de disparo de eventos

Al ejecutar un web panel por primera vez se

POST: Orden de disparo de eventos

Web panels - Variables

Definicin de columnas ocultas

Editar las propiedades de la columna

Comando FOR EACH LINE

for each line [in NombreGrid]

in NombreGrid: solamente es necesario explicitarlo cuando hay ms

Comando FOR EACH LINE

A continuacin, implementaremos un caso de seleccin mltiple, una operativa diferente a la presentada en

//se elimina el cliente recibido como parmetro

Cmo desplegar datos en un grid

Diferentes tipos de grilla/grid

Grid Freestyle: datos repetitivos en formato libre

Se dispone de dos tipos de grilla:

Propiedades de diseo de tablas

Paginado de grids en Web panels

Reglas ms utilizadas en Web Panels

Web panel con N grids:

Web Panel con tabla base

Web panel sin tabla base

Un web panel sin tabla base es aquel que no

Por lo tanto GeneXus no determina un for each

Web panel sin tabla base

Mostrar para cada cliente el total facturado, pero slo de los

For Each ClienteId

Web panel con tabla base

Mostrar para cada cliente el total facturado, pero slo de los

Atributo Oculto: FacturaFecha

Atributo en el form del web panel: ClienteNombre

tabla base del web panel: FACTURA

Atributo order en el grid: ClienteId

Web panels con N grids

Cuando un web panel contiene ms de un grid en su form,

Web panels con N grids

Una tabla base por grid

No busca ni establece relaciones entre ellas

Web panels con N grids

Grids paralelos Eventos y carga

N veces si GridControlName1 tiene