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