Programando el Evento Start, Click o De usuario en un Web Panel

Teníamos un web panel que desplegaba información de los clientes y permitía filtrar la información desplegada por
nombre completo del cliente.

Ahora supongamos que queremos poder trabajar con un cliente, agregando una acción que se active al cliquear
sobre una imagen del grid (la de un avión por ejemplo), y que muestre los datos de los vuelos en los que el cliente
está registrado…

En este caso el cliente 1 está en el vuelo 1, con asiento 1 C

En el vuelo 5 con asiento 2 B

Y en el vuelo 6 con asiento 2 D.

Donde la suma de los precios de los vuelos es… 6400

Este será un web panel, diseñado análogamente…

Con un grid cuyos atributos son… FlightId…

FlightArrivalCountryName, subtipo, inferido a través de FlightArrivalCountryId de CountryName…

FlightFinalPrice…

FlightSeatId…

Y FlighSeatChar…

Por lo tanto, su tabla base será FlightSeat.

Pero, ¿dónde le estamos indicando que cargue sólo los datos de los vuelos del cliente seleccionado?

Tendremos que recibir el identificador de cliente en la regla parm… por ejemplo en una variable…

Y luego especificar como condición del grid que el atributo CustomerId asuma el valor recibido por parámetro…

Con eso, lo único que nos estará faltando será pasarle el cliente seleccionado al web panel cuando lo invoquemos
desde la acción…

Aquí tenemos el web panel que invocaremos, ya creado.

1
Page

Video filmado con GeneXus X Evolution 2

Ahora vayamos a agregar la acción a nuestro web panel

En las columnas del grid, agregamos una nueva, que es donde vamos a cargar la imagen de avión … como en un grid
estándar las columnas sólo pueden ser atributos o variables, insertemos entonces una nueva variable, en la que
cargaremos luego la imagen…

La llamaremos flightImage de tipo de datos Image.

La movemos, para que quede al final y le quitamos el título a la columna.

Tenemos que cargarla con la imagen adecuada. Para eso, debemos insertar esa imagen en la KB, para poder utilizarla
luego donde necesitemos.
2
Page

Video filmado con GeneXus X Evolution 2

Una forma de hacerlo es ir a Customization y eligiendo Images, donde se listan todas las imágenes actualmente
almacenadas en la KB, insertar una nueva…

La queremos cargar desde un archivo…

La elegimos…

Le dejamos como nombre flight…

Y grabamos…

Y ahora tenemos que asignárela a la variable… ¿Cómo?

El lugar más apropiado sería el evento Start, que es lo primero que se ejecuta…

donde a la variable &flightImage le aplico el método

3
Page

Video filmado con GeneXus X Evolution 2

FromImage que tiene como parámetro el nombre de la imagen de la KB, que en nuestro caso habíamos llamado
flight.

Hagamos F5

4
Page

Video filmado con GeneXus X Evolution 2

Vemos cómo sale cargada la imagen.

Nos está faltando únicamente asociarle la acción. Como queremos que al hacer clic sobre la imagen se invoque al
web panel…

Podemos programar el evento click, asociado al control… de nombre flightImage, el nombre de la variable.

Y allí invocar al web panel…

Pasándole como parámetro el atributo CustomerId que no está en el grid

Event &flightImage.Click
CustomerFlights( CustomerId )
Endevent
5
Page

Hagamos F5.

Video filmado con GeneXus X Evolution 2

Dos observaciones: la variable de los precios, pasó a ser de entrada, es decir, podemos cambiarle el valor. Esto fue
consecuencia de haber asociado un evento a las líneas. Tendremos que ponerla explícitamente en ReadOnly, dado
que no deseamos este comportamiento.

Por otro lado, los datos de los vuelos del cliente están saliendo vacíos.

¿Por qué?

Porque estamos enviando por parámetro CustomerId, pero si vamos al grid, este atributo no se encuentra
presente… ni visible, ni invisible. Si tenemos presente que luego de cargado el grid sólo tenemos disponibles los
atributos y variables definidos como columnas, entonces la invocación pasará como parámetro un valor vacío, ya
que no tenemos una columna para CustomerId.

Por lo tanto, necesitamos agregarla al grid, dejando al atributo CustomerId oculto, ya que no nos interesa mostrarlo.

Vemos que lo indica:

Aprovechamos y ponemos &flighPrices como ReadOnly.

Y damos nuevamente F5

Ahora sí, está funcionando como esperábamos.

Observemos que en lugar de haber programado el evento click sobre la imagen de avión, podríamos haberle
asignado al control el evento Enter , que en este caso no es el más adecuado, dado que no tendría sentido presionar
la tecla enter para ejecutarlo…porque, ¿a qué cliente correspondería?

En su lugar podríamos haberle asignado un evento de usuario

6
Page

Video filmado con GeneXus X Evolution 2

Al que le damos un nombre…

Y vamos a programarlo…

Colocándole el código que habíamos especificado en el evento click.

7
Page

Video filmado con GeneXus X Evolution 2

Elegir asociarle un evento de usuario a la variable en lugar de programar el click, tiene como ventaja poder asociar el
mismo evento a varios controles a la vez. En este caso, no lo necesitamos.

8
Page

Video filmado con GeneXus X Evolution 2