jueves, 11 de octubre de 2012

Carga dinámica de clases para las filas de una grilla

Veamos un ejemplo de carga dinámica de clases en una grilla, de modo de tener una estética diferente en cada línea de la misma.

El ejemplo es la aplicación para Smart Devices del XXII Encuentro GeneXus (disponible para iOS y Android).

Las distintas charlas tienen asociados uno o varios  tracks, los cuales además se identifican con un color.
Se quiere que en cada línea, aparezca una barra del color asociado al track a la izquierda y que el texto del track y de los oradores también aparezca de dicho color. 


Además, queremos que cuando seleccionamos una línea, la misma se pinte completamente del color del track.


  • Layout


Primero veamos como contruiremos el Layout para cada charla, cómo el que está arriba de estas líneas. Primero, para que quede la barra a la izquierda vamos a utilizar 2 tablas. Una tabla de fondo “TablaTrack” que ocupará toda la fila y tendrá asociada una clase con backcolor y highlighted backcolor igual al color del track. La idea es que ese color de fondo no cambie al seleccionar la fila en la grilla.

TablaTrack

Delante de esa tabla vamos a colocar otra tabla “TablaCharla” a la cual le configuramos backcolor blanco y highlighted backcolor igual al color del track. La misma además estará ubicada unos pixeles a la derecha de la tabla anterior, para poder dar forma a la barra identificadora con el color del track.

TablaCharla

  • Datos

Como dijimos asociado a los tracks, tenemos un color. En la base de datos vamos a tener en la tabla de Tracks un atributo que identificará ese color con un texto asociado al track. Por ejemplo la estructura de la transacción de charlas será asi :


y en la base de datos tendremos valores como estos:

CharlaID
CharlaTitulo
TrackId
TrackDescription
TrackClassId
1
Construya sus dashboards …
1
General Interest
general
2
Listo tengo el diseño …
2
SD Development
sddev
3
Seguridad, atributo critico …
3
Security
security
4
Tilo overview
4
R&D
research

  • Definición de las clases

Ahora lo que vamos a hacer es definir las distintas clases para cada uno de los tracks, es decir, para cada uno de los colores. Para las tablas definimos una estructura de clases como muestra la siguiente imagen, donde en cada una se utiliza el color asociado al track correspondiente:


Utilizamos las clases hijas de Track para la tabla de fondo “TablaTrack” de cada celda, éstas tienen backcolor y highlighted backcolor igual al color del track. Cada una además tiene una clase hija “session” para asignársela a la tabla del frente “TablaCharla” con backcolor blanco y highlighted backcolor igual al color del track.

Finalmente también definimos las clases necesarias para los textos que cambian de color.


Cada uno tendrá como Forecolor el color asociado al track y highlighted color blanco.

  • Carga dinámica de las clases

Es importante que los nombres que le dimos a las clases definidas se correspondan con los valores identificatorios de cada track en la base de datos. Teniendo eso en cuenta, sólo nos falta cargar las clases en el evento Load de la grilla (que tiene como tabla base la tabla de charlas)

Así, de forma sencilla y aplicando conceptos de programación en GeneXus que ya conocemos (diseño con tablas, definición de clases en el Theme, evento Load) obtenemos funcionalidades importantes para las aplicaciones Smart Devices.

  • Extra: Variantes

Para que el ejemplo no quedara entreverado se simplificó un poco la explicación de su funcionamiento, pero en la aplicación del evento, hay algunas variantes. Una charla puede tener más de un track, lo que se resuelve no usando directamente el atributo TrackClassId en el evento Load sino llamando a un procedimiento que devuelve, si la charla tiene un solo track, el texto identificatorio del mismo y en caso contrario un texto genérico “varios”. En el tema se definen clases para este texto “varios” de la misma manera que para los tracks (en el caso de la aplicación del evento usando un color gris).

Algo similar se hace para las charlas “especiales” que no tienen acción, como los coffee breaks o breaks de almuerzo. El mismo procedimiento devuelve algún texto identificador (por ejemplo “break”) y se definen clases para el mismo pero con los mismos colores en estado “normal” y “highlighted” (fondos blancos y textos negros, para que no se note un efecto de selección).

Este ejemplo fue mencionado junto a otros puntos que hicieron al diseño de la aplicación del XXII Encuentro GeneXus en la charla "Listo! Tengo el diseño ... ¿cómo sigo?", además, como introducción a la misma y al diseño en general en aplicaciones Smart Devices se recomienda también la charla "Diseño y desarrollo, en busca de la integración."


6 comentarios:

  1. Muy bueno! Felicitaciones!
    Piensan disponibilizar esta kb para poder aprender un poco mas?
    Saludos,
    Fabricio

    ResponderEliminar
  2. Hola Fabricio, la KB con que se hizo la aplicación es bastante grande y está enganchada a varias otras cosas comunes con el sitio. Vamos a ver si podemos achicarla a un ejemplo mas simple, igualmente vemos de publicar más ejemplos aqui, y cualquier cosa que quieras preguntar o saber avisanos.
    Saludos.

    ResponderEliminar
  3. implemente lo que tu dices en la aplicacion para un dispositivo android, pero no se ve asi como y tu lo pones en el ejemplo.

    tiene algun impedimento este generador?

    el inconveniente es por ejecutarlo en el emulador?


    muchas gracias por tus comentarios.

    ResponderEliminar
  4. genexus x 3 não pode colocar classes nos temas com nomes iguais.

    Alguma sugestão?

    ResponderEliminar
  5. Hola soy nuevo en esto y tengo una duda. el tema de las tablas superpuestas en modo de diseño. Hay algún tutorial o algo que me indique como hacerlo?
    Y otra consulta, el filtro o agrupamiento de los días lo resolvieron con imágenes. Pero si yo necesito que eso sea dinámico? es decir tengo los dias del evento en una transacción y quiero que aparezcan en la grilla en forma horizontal pero que sean interactivos.? Probe con una grid y no me deja desplegarlos en forma horizontal, en una free style si pero no me deja interactuar.. alguna sugerencia de como solucionarlo?
    Muchas gracias,

    ResponderEliminar