Issuu on Google+

Web Panels

42 42


Web Panels Generalidades Definición Ojetos GeneXus que permiten al usuario realizar consultas interactivas a la base de datos a través de una pantalla en tiempo de ejecución. ¾ Son flexibles, por lo que se prestan para múltiples usos.

Elementos que los componen:

Los elementos de los Web Panels son: Web Form: Cada Web Panel contiene un form Web, el cual debe ser diseñado por el analista agregándole 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é parámetros recibe, definir qué variables no queremos que sean aceptadas en el form sino utilizadas para desplegar información, 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 programación orientada a eventos. Este tipo de programación permite definir código ocioso, que se activa en respuesta a ciertas acciones provocadas por el usuario o por el sistema. En esta sección de un Web Panel es donde se define el código ocioso asociado a los eventos que pueden ocurrir durante la ejecución del Web Panel. Propiedades: Son características a ser configuradas para definir ciertos detalles referentes al comportamiento general del Web Panel. Ayuda: Permite la inclusión de texto de ayuda, que los usuarios podrán consultar en tiempo de ejecución del Web Panel. Documentación: Permite la inclusión de texto técnico como documentación para los desarrolladores.

43


Filtros en Web Panels • Declarar en regla parm del objeto a el parámetro por el cual se  necesita filtrar por igualdad, como atributo. • Ejemplo:  Web Panel con facturas de un cliente, y se requiere que reciba  por parámetro el código de cliente, definir la regla parm, recibiendo el  código de cliente en el mismo atributo: parm(CliCod) • Genexus entenderá que CliCod actuará como filtro por igualdad (filtro  global)

• Otra alternativa: recibir en regla parm una variable, y luego  definir una condición de filtro: CliCod=&CliCod • GeneXus no hace nada automáticamente • Se deberán definir las condiciones de filtro explícitamente

Opciones para definir filtros en Web Panels Cuando un Web Panel es invocado desde otro objeto, y se requiere que reciba uno o más parámetros para filtrar por igualdad por los mismos, la forma más directa y sencilla de resolverlo es declarando en la regla parm del objeto, a dicho(s) parámetro(s) por los cuales se necesita filtrar por igualdad, como atributo(s). Es decir, si por ejemplo un Web Panel exhibe las facturas de un cliente, y se requiere que reciba por parámetro el código del cliente del cual se deben mostrar sus facturas, la opción más directa y sencilla para definir el filtro es en la regla parm, recibiendo al código de cliente en el atributo mismo: parm(CliCod); De esta forma, GeneXus entenderá automáticamente que el atributo CliCod actuará como filtro por igualdad en todo el objeto (es decir, que será un filtro global). Otra alternativa posible, es recibir en la regla parm a una variable y luego definir una condición de filtro: CliCod=&CliCod; Recordemos que cuando se reciben variables en la regla parm, GeneXus no hace nada automáticamente con ellas, por lo tanto el analista deberá definir condiciones de filtro explícitamente utilizando a las variables como desee. Cuando en cambio, se trata de Web Panels que no reciben parámetros, y que las condiciones de filtro deben definirse explícitamente (por ejemplo involucrando a variables cuyos valores son ingresados por el usuario en tiempo de ejecución en la parte fija del Web Panel) habrá que decidir si definir condiciones globales o condiciones a nivel de un grid en particular.

44


Web Panels Eventos • En los Web Panels se utiliza la programación dirigida por eventos. • Eventos disponibles en Web Panels: • • • • •

Evento Start Evento Refresh Evento Load Evento Enter Eventos definidos por el Usuario

Eventos en Web Panels En los Web Panels se utiliza la programación dirigida por eventos, que es un estilo de programación en el cuál se define código que permanece ocioso, hasta que suceden eventos provocados por el usuario o por el sistema, que provocan que el código definido se ejecute. Los eventos son acciones reconocidas por un objeto que pueden suceder o no. A cada evento se le puede asociar código, que se ejecutará solamente si el evento se produce. El código que se le puede asociar a un evento, se escribe con estilo procedural; y cuando el evento se produce, el código asociado al mismo se ejecutará secuencialmente. Eventos existentes en Web Panels Los eventos existentes en los Web Panels, son: Evento Start Evento Refresh Evento Load Evento Enter Eventos definidos por el Usuario En primera instancia explicaremos cada uno de estos eventos conceptualmente y en qué momento exacto se ejecutan, y a lo largo del curso veremos varios ejemplos de utilización de los mismos. http://wiki.gxtechnical.com/commwiki/servlet/hwikibypageid?8178

45


Web Panels Evento Start • Es un evento del sistema, que ocurre automáticamente 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 parámetro. Esto se debe a que aún 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 &wallpaper.fromurl('www.genexusx.com/wallpapers/1024x768.jpg') newControl.Link = Link(TCustomer) endevent

46


Web Panels Evento Refresh - Generalidades • El evento Refresh es un evento del sistema • Se ejecuta cada vez que se realiza un Get o Post. • Y cuando se ejecuta el comando Refresh incluido en un evento. • 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 continuación se ejecuta la consulta a la base de datos. Viene seguido siempre del evento Load.

Si el evento Refresh no está programado por el usuario lo único que hace es llamar al load.

47


Web Panels 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 automáticamente 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 operación que requiera de ese registro (y de su extendida), antes de efectivamente cargarlo en el grid. Inmediatamente luego de ejecutado el código asociado al evento Load, se cargará la línea del grid y se pasará el puntero al siguiente registro de la tabla base, para realizar lo mismo (evento Load, carga de la línea). Este proceso se repetirá hasta cargar todas las líneas del grid. Si un Web Panel es sin tabla base, GeneXus no puede determinar automáticamente una tabla de la base de datos a recorrer para mostrar la información que se presenta en el form. En este caso en el form solamente aparecen variables (y no atributos) y también ocurrirán los eventos Refresh y Load, sólo que el evento Load se ejecutará una única vez, dado que no se estará posicionado en ningún registro de ninguna tabla.

48


Web Panels Evento Enter • Cuando se inserta un nuevo botón 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 botón, 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 deberán codificarse.

49


Web Panels Eventos de usuario • Además 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, imágenes, atributos) • En tiempo de ejecución, 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 hipervínculos en ejecución); se consigue de dos maneras distintas: 1. Editando las propiedades del control, y definiendo un evento de usuario en la propiedad OnClickEvent 2. Dándole un nombre al control y en la sección 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.

50


Orden de Datos en Web Panels • De no tener grids en el Web Panel y de ser necesario definir un  orden específico para la consulta, se contará con la posibilidad  de definir en la sección de reglas del Web Panel, la regla de  sintaxis: order(att1, att2, attN);  • De tener grids: se puede configurar en  la propiedad Order.

Orden de los datos en un Web Panel Para definir en un Web Panel que una consulta se efectúe ordenando por cierto(s) atributo(s), y por ende que los datos extraídos de la consulta se muestren ordenados con dicho criterio, se debe hacer clic con el botón derecho del mouse sobre el grid, y seleccionar el ítem Order en el menú contextual. Definir esto es equivalente a definir la cláusula order en el comando for each, por ejemplo: que para ordenar en forma descendente por un atributo se debe encerrar al atributo entre paréntesis (), o que se crean índices temporales cuando no existe un índice físico por los atributos por los cuales se indica ordenar. Solamente si el form del Web Panel no tiene ningún grid, y se necesita definir un orden específico para la consulta, se contará con la posibilidad de definir en la sección 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.

http://wiki.gxtechnical.com/commwiki/servlet/hwikibypageid?8256

51


Web Panels Grid – Ordenamiento automático de las columnas Durante la ejecución de la aplicación, las columnas pueden ser ordenadas sin necesidad de programar ningún código adicional, con sólo hacer clic sobre el título de la columna: Esta funcionalidad es válida para grids en Transacciones y en Web Panels.

Se ordena la página del grid cargada, por lo que no compite con el Order programado a nivel del grid.

Por más información acerca de esta funcionalidad, consultar: http://wiki.gxtechnical.com/commwiki/servlet/hwikibypageid?6079

52


Comandos en Objetos Web • Refresh • Vuelve a cargar la página (similar a presionar tecla F5 del browser) Event spanish.Click • Ejemplo: if SetLanguage('Spanish') <> 0 msg('The language is not available') else refresh endif EndEvent Event english.Click if SetLanguage('English') <> 0 msg('The language is not available') else refresh endif EndEvent

• Return • Equivale a hacer un call al objeto que lo invocó, si no hay objeto que lo  invocó intenta cerrar el browser

Refresh El comando Refresh vuelve a cargar la página, teniendo el mismo efecto que presionar la tecla de función F5 del browser. La página se cargará manteniendo los últimos valores sometidos para las variables ingresadas por el usuario. Veamos un ejemplo de uso del comando Refresh: Por ejemplo si se selecciona un lenguaje, es necesario realizar un refresh del objeto, para que vuelva a cargar la página con el idioma anteriormente seleccionado. Otro ejemplo es cuando desde un Web Panel se invoca otro objeto con el tipo de datos Window en el cual se modifica información y luego al retornar se ejecuta el comando Refresh para que se vean refrescados dichos cambios. Este ejemplo lo veremos en el práctico del curso. Return Incluir el comando return en un objeto Web, es equivalente a hacer un CALL al objeto que lo invocó. En consecuencia no equivale a presionar el botón ‘Back’ del browser, ya que si se ingresaron valores en variables del objeto Web llamador, los mismos no son mantenidos al ejecutar el comando Return. Este comando Return puede ser ejecutado en cualquier evento o subrutina del objeto, salvo el evento Load y los métodos Load de las grillas. Tampoco puede ser ejecutado en subrutinas llamadas directa o indirectamente por el evento Load o métodos Load de las grillas. En caso que se ejecute en las mencionadas situaciones los resultados son impredecibles. En el caso del primer objeto Web, el return intentará cerrar el navegador.

53


Si se utiliza el método Set en un tipo de datos WebSession y luego se ejecuta el comando Return el valor de la(s) cookie(s) se establece correctamente. No equivale a presionar `Back´ en el browser. Puede ejecutarse en cualquier evento o subrutina del objeto salvo el evento Load y los métodos Load de los grids. Tampoco en subrutinas llamadas directa o indirectamente por el evento Load o métodos Load de los grids. Por más información consultar: http://wiki.gxtechnical.com/commwiki/servlet/hwikibypageid?8621 http://wiki.gxtechnical.com/commwiki/servlet/hwikibypageid?8607

54


Comando Return o Evento Cancel • Stack de calls de los objetos Web: • es posible llamar de A a B y de B a C y cuando se cierra  (cancelando) C, se vuelve a B, y cuando se cierra B, se  vuelve a A. call

call

A

B return

C return

Es análogo al comportamiento en objetos WIN.

55


Tabla Base en Web Panels • Un Web Panel tiene tabla base cuando a lo sumo puede  determinar un for each implícito asociado a él. • Para determinar si un Web Panel tiene tabla base, GeneXus  analiza los atributos incluidos en: • • • • •

form: en la parte fija form: en el grid (visibles o no visibles) propiedad order del grid propiedad conditions del grid (no en las condiciones globales) los eventos fuera de comandos for each

Determinación de la Tabla Base en Web Panels Web Panel con tabla base (a lo sumo un grid) El Web Panel es “con tabla base” cuando GeneXus puede determinar un for each implícito asociado a él. Para determinar si un Web Panel tiene tabla base y en caso afirmativo cuál será, al momento de especificarlo GeneXus analiza los atributos incluidos en: ·

form: en la parte fija

·

form: en el grid (visibles o no visibles)

·

propiedad order del grid

·

propiedad conditions del grid (no en las condiciones globales)

·

los eventos fuera de comandos for each

56


Tabla Base en Web Panels • GeneXus no toma en cuenta para determinar la tabla base de un Web Panel: • los atributos recibidos por parámetro • los atributos mencionados en las condiciones globales del Web Panel

• Si un Web Panel tiene más de un grid en su form, GeneXus determina una  tabla base asociada a cada grid. • Atributos que participan en la determinación 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 las propiedades Order y Conditions locales al grid

GeneXus no toma en cuenta para determinar la tabla base de un Web Panel: ·

los atributos recibidos por parámetro

·

los atributos mencionados en las condiciones globales del Web Panel

Éstos actúan como filtros una vez determinada la tabla base. Web Panel con N tablas Cuando un Web Panel contiene más de un grid en su form, GeneXus no determina una única tabla base asociada, sino una tabla base asociada a cada grid. Atributos que participan en la determinación 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 Los atributos de la parte fija del Web Panel no participan en la determinación de la tabla base de ninguno de los grids, pero deberán pertenecer a la tabla extendida de alguno de ellos (para que sea posible inferir sus valores). De no respetarse esto, al especificar al Web Panel, se mostrará en el listado de navegación resultante, un warning advirtiendo de esta situación. Los atributos utilizados en los eventos del Web Panel tampoco participan en la determinación de la tabla base de ninguno de los grids. Los atributos que se incluyan en los eventos fuera de comandos for each, deberán pertenecer a la tabla extendida de alguno de los grids (al igual que los de la parte fija).

57


Web Panels Eventos – Orden de disparo • GET: Cuando el Web Panel se abre. • • •

Start Refresh Load

• POST: Resto de las ejecuciones del Web Panel. • • • • •

Start Lectura de variables en pantalla Evento enter o de usuario (click, dblclick, etc., que produjo post) Refresh Load

58


Persistencia de estado Web Panels • Variables hidden en el form • Uso de cookies o WebSessions

En los Web Panels no hay noción de estado, en el sentido en que luego de ejecutado un evento que asigna valores a variables, debe hacerse persistir el valor de esas variables para poder recuperarlas en otro evento. Una de las maneras de hacerlo es teniendo esas variables (hidden) en el form. Si por ejemplo se tiene un evento que usa una variable cargada por otro evento disparado anteriormente (en el mismo Web Panel), la variable tiene que estar en el form y ubicada después del control que la carga. El funcionamiento de esto está basado en el orden de disparo de los eventos. Otra manera de hacerlo es guardando la información en variables de sesión.

59


Web Panels Eventos – Orden de disparo • Excepción: • Algunos  eventos  de  usuario deben  ejecutarse  en  el  Server  pero  para  otros  no  existe necesidad Æ se ejecutarán solo en el Cliente (sin ejecutarse todos los otros  eventos del server: Start, Refesh y Load). • Evitando  roundtrips innecesarios  al  servidor,  y  reduciendo  la  cantidad  de  datos  que viajan de un lado a otro. • Ejemplo: un evento que cambia el estado de un control, no necesita ejecutarse en  el server. Event ‘UserEvent’ &CustomerId.Visible = 0 endevent

• GeneXus  tiene  la  inteligencia  para  determinarlos.  Es  transparente  para  el  programador.

Internamente GeneXus determina las entradas y salidas de cada evento. Si en sus entradas, se requiere de acciones ejecutadas en el Server, entonces el evento se ejecutará en el Server. Por ejemplo, si entre las entradas de un evento de usuario X, se encuentra alguna de las salidas del evento Start (del server), entonces el evento de usuario se ejecutará en el Server.

http://wiki.gxtechnical.com/commwiki/servlet/hwikibypageid?6563

60


Ajax en Web Panels

61


Descripciones en vez de Códigos Country Transaction CountryID* CountryName Flight Transaction FlightIdentifier* FlightDescription CountryID CountryName Este atributo no es CountryName, sino CountryId disfrazado de CountryName. Se muestra (y acepta) en ejecución el valor de CountryName, mientras que lo que se almacena es CountryId.

Hasta ahora hemos visto que el usuario final debe manipular los códigos con los que el sistema identifica a sus entidades. Por ejemplo, a la hora de ingresar un nuevo vuelo a un sistema, vimos que el usuario final ingresa el código del país y a continuación se le muestra en forma inferida, el nombre correspondiente a ese país. Para ello debe memorizar un código que no tiene demasiada carga semántica (ninguna cuando éstos son numéricos) o apelar a prompts para poder buscar por descripción o nombre y recuperar así el código a ser colocado en el campo. Sin embargo no es necesario condenar al usuario a que manipule códigos. Puede manipular las descripciones, que son las que contienen la semántica y el programa se encargará del resto. Es posible que el usuario trabaje en pantalla con la descripción, CountryName, y que automáticamente se resuelva la manipulación del código, CountryId. ¿Cómo? Modificando el valor de la propiedad InputType del atributo CountryId. El usuario verá en pantalla el CountryName, pero el atributo que muestra esos valores ¡no es CountryName! Por el contrario, es el atributo: CountryId “disfrazado” de CountryName. Mientras el usuario escribe “Uruguay” internamente se realiza una búsqueda en la tabla COUNTRY para recuperar el código correspondiente a ese nombre. Ese valor, en nuestro ejemplo, 1, es el que realmente queda almacenado allí. Pero para el usuario esto es absolutamente transparente. Para que esto pueda lograrse, deberá haber una relación biunívoca entre el código (o identificador) y la descripción. Es decir, para cada descripción solo existirá un código asociado. En el ejemplo, no deberá haber dos o más países con el mismo nombre y distinto identificador, porque en ese caso no es posible realizar el matcheo. Dicho en otras palabras: el atributo descriptivo deberá ser una clave candidata de la tabla, es decir, deberá existir un índice unique para ese atributo.

62


Descripciones en vez de Códigos • Propiedad InputType del atributo identificador Valores posibles: • Values atributo real: lo que muestra es su contenido • Descriptions atributo disfrazado: toma las descripciones de otro atributo, aunque su contenido sigue siendo el propio.

En la figura se muestra el diálogo de definición del atributo CountryId. Como podemos ver, en el grupo Control Info de las propiedades del atributo, aparece la propiedad InputType. Esta propiedad solo se ofrece cuando el atributo está asociando a un control de tipo Edit (no Radio Button, Combo, etc.). Esta propiedad puede tomar uno de dos valores: • Values: representa el comportamiento conocido, es decir, el control en el form en ejecución mostrará los valores que contiene (códigos). • Descriptions: aquí es donde le indicamos que queremos que “disfrace” sus valores en ejecución, mostrándole al usuario no sus valores reales, sino los asociados y definidos en la propiedad que se habilita: Item Descriptions. En la propiedad Item Descriptions se debe indicar de qué atributo se tomarán las descripciones. Evidentemente este atributo no puede ser cualquiera: debe tener una relación biunívoca con el que estamos definiendo, y además, debe ser un atributo de descripción, es decir, un atributo cuyo tipo de datos sea Character o Varchar.

63


Descripciones en vez de Códigos • Propiedad Suggest: Descripciones con Autocomplete.

En la figura se muestra el diálogo de definición de la variable AirlineName. Como podemos ver, en el grupo Control Info de las propiedades del atributo, aparece la propiedad Suggest. La propiedad Suggest posibilita brindarle una ayuda útil al usuario final, para que elija en tiempo de ejecución para un control edit, entre un conjunto de valores posibles y no tenga que recordar “exactamente” el valor. La lista de sugerencias puede ser calculada de un modo incremental (la lista será actualizada con las entradas del usuario) o haciendo pedidos explícitos (el usuario manualmente tendrá que hacer un pedido para que se calculen las sugerencias y se le muestren). La actualización de la lista es asincrónica y los tiempos de cálculo dependen de la calidad de la conexión. Esta propiedad es independiente de la propiedad InputType, aunque la utilización combinada de ambas producirá aplicaciones con interfaces mucho más amigables para el usuario. Valores de la propiedad Suggest: • Incremental: Se le irán sugiriendo al usuario los valores que correspondan con lo que haya digitado hasta el momento. Es incremental, puesto que va reduciendo el rango de lo mostrado interactivamente a medida que el usuario va agregando letras a lo que lleva digitado hasta el momento. • OnRequest: La única diferencia que tiene el valor Incremental es que en este caso no es interactivo. El usuario ingresará el substring que recuerde de la palabra y luego pedirá explícitamente las sugerencias de las palabras que empiecen por o contengan esa cadena. Por ejemplo, si el usuario final sabe que una aerolinea que está buscando es AMERICAN, pero no recuerda el nombre completo, puede escribir “AMER” y pedir las sugerencias. Si tuviera configurado el valor “Incremental” en esta propiedad, entonces al digitar “AMER” de “AMERICAN AIRLINES” ya se le traerían todos los nombres de aerolineas que empiezan con “AMER” y se iría afinando la búsqueda a medida que siga escribiendo letras.

64


Combo boxes dinámicos relacionados

Basándose en Ajax GeneXus permite que en los combo boxes dinámicos relacionados queden automáticamente relacionadas las cargas y por tanto, como podemos ver, se cargarán solamente las ciudades del país seleccionado en el control CountryIdentifier.

65


Combo boxes dinámicos

CountryIdentifier y CityIdentifier están relacionados, y el combo box asociado a CityIdentifier carga automáticamente las ciudades del país seleccionado en CountryIdentifier

Notar además que si en el combo box dinámico se desea mostrar un valor vacío (por ejemplo: “(none)”, “Sin Determinar”), se cuenta con las propiedades EmptyItem y EmptyItemText.

66


03-Webpanels-CursoGXXAvaWeb