domingo, 15 de marzo de 2009

Modificando el HAccordion del FlexLib


El los ultimos dias he tenido la nacesidad de utilizar el accordion horizontal que trae la librería flexlib que mencione en el artículo anterior, una vez hecho esto me di cuenta de que por problemas de diseño del framework de flex la cabecera (heather) del acordion no pued ser muy personalizada, nada mas alla de colocarle un texto y un icono deseado, a pesar de que tiene una propiedad llamada headerRenderer para colocarle tu propio renderer. Esto se debe, a que la este renderer debe ser un Button.

Para solucionar esto la gente de Flexlib (Especificamente, Doug McCune) tubo una brillante idea y desarrollaro un Canvas que se comporta como botton para poder colocar cualquier cosa que queramos dentro de la cabecera del Vertical u Horizontal accordion, el CanvasButtonAccordionHeader, pero todavia hay un problema, el headerRenderer es único para todo el HAccordion. ¿Qué pasa si yo desearía que cada cabecera, de cada sección del accordion, fuera diferente? Diferentes colores, fondo, controles, etc. No unicamente un texto o un icono diferente.

Para solucionar eso he decidido colocar un ViewStack con todas las posbles cabeceras del HAccordion y dependiendo de cual quiero visualizar en cada una de las secciones le paso en la propiedad "label" del boton (recordemos que supuestamente la cabecera es un botón) el numero de View que deseo visualizar en ese caso (la propiedad selectedIndex del ViewStack). El codigo del CanvasButtonAccordionHeather quedaria de la siguiente manera:





















Si se fijan, he colocado tres HBox dentro del ViewSatck, esto se debe a que mi acordion va a tener 3 secciones diferentes (V0, V1 y V2). Aunque esta no es la solucion mas ideal por lo menos me resulve de mis apuros, lo ideal sería tener un ViewStackButtonAccordionHeather, es decir, un ViewStack que se comporte como boton para que yo pueda presonalizarlo desde la aplicacion principal y no tener que crear un componente con todo el codigo cableado. Pero bueno, es un comienzo.

El ejemplo definitivo de la pagina que estaba realizando lo pueden ver en este link, de todas maneras aqui les dejo el ejemplo para que se lo descarguen.

Continuar leyendo...