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
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."
Muy bueno! Felicitaciones!
ResponderEliminarPiensan disponibilizar esta kb para poder aprender un poco mas?
Saludos,
Fabricio
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.
ResponderEliminarSaludos.
Muchas gracias Fabian
ResponderEliminarimplemente lo que tu dices en la aplicacion para un dispositivo android, pero no se ve asi como y tu lo pones en el ejemplo.
ResponderEliminartiene algun impedimento este generador?
el inconveniente es por ejecutarlo en el emulador?
muchas gracias por tus comentarios.
genexus x 3 não pode colocar classes nos temas com nomes iguais.
ResponderEliminarAlguma sugestão?
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?
ResponderEliminarY 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,