COLUMNERO

Fruto de los talleres SubFlash, Elecash y Dani implementaron una clase para maquetar en formato columnas un texto dado. La verdad es que me cayó muy simpático el componente y me dio por adaptarlo al formato de componentes de flash. Después de un intercambio de mails con Elecash hemos ampliado sus funcionalidades para que también pueda renderizar html y hemos hecho una refactorización del código. El último paso ha sido cear un paquete mxp para facilitar su distribución.

El código lo podéis descargar, modificar a vuestro antojo y utilizarlo donde os haga falta (proyectos comerciales incluidos). Si no queréis el codigo y simplemente lo queréis utilizar, podéis descargar la extensión instalable. Los links para las descargas están al final del post.

El uso es muy intuitivo, si lo queréis usar desde la linea de tiempo simplemente lo tenéis que arrastrar y rellenar las propiedades.

Por otro lado si lo queréis incrustar desde código lo podéis hacer como con cualquier otro componente. La interfaz pública que ofrece es la siguiente:

Propiedadades

• nCols: Número de columnas
• mediania: Separación en píxels entre columnas
• texto: Texto a renderizar
• css: URL de las css que se aplicarán
• notDrawedText: Si el texto que se tiene que renderizar no cabe en el espacio destinado al componente, el texto que no quepa quedará almacenado en esta variable.

Métodos

• invalidate(): Fuerza el repintado del componente
• getTextAtColumn(i:Number): Devuelve el texto de la columna i-ésima.

Problemas conocidos

• Por la naturaleza del parseador para detectar los tags html, en el texto no pueden aparecer los carácteres < ni >. En su defecto se tienen que usar &gt; y &lt;
• Si se quieren incluir imágenes medinate el tag img, éste tiene que incluir los atributos height y width. De no ser así los cálculos para saber en qué posición se debe cambiar de columna serán erróneos. Esto es debido a que la carga de las imágenes no es immediata y por lo tanto en el momento de calcular la altura del campo no se contempla la presencia de la imagen (aún no cargada)
• En la última versión se han corregido dos bugs. El primero consistía en que sí se abría un tag html renderizado en la primera columna y no se cerraba hasta la tercera, el componente lo cerraba automáticamente en la segunda. El otro bug consistía en que no se habían tenido en cuenta los tags simples como los img, que se cierran y abren con un sola etiqueta. Por como estaba hecho se duplicaba la imagen. Ambos han quedado resueltos.

Por último comentar que si descargáis el código encontraréis un archivo de ejemplo de utilización. Si ejecutais el swf desde un standalone player y redimensionais la ventana veréis como se van redibujando las columnas adaptándose al nuevo tamaño de la ventana.

Si detectais cualquier otro fallo no dudéis en notificarlo en los comentarios del post del blog de elecash.

Descargar código fuente.
Descargar extensión instalable.