Estimados usuarios de Xailer,

Hoy os presento la que sin duda es, una de las grandes mejoras de Xailer 5 y es el nuevo control TCardBox (tarjetas) de diseño y creación propio y del cual estoy especialmente orgulloso 😉 Este nuevo control está especialmente indicado para sustituir a gran cantidad de ‘Browses’, pero sobre todo, para ser un control fundamental en el desarrollo de aplicaciones para tabletas.
Pudiera parecer que el control TCardBox realmente se trata de muchos paneles alineados con alTOP, en el que en cada uno de ello a su vez contiene otros controles con distintas alineaciones. Nada más alejado de la realidad: TCardBox es un control único, con un único ‘Handle’ de ventana que está preparado para procesar millones de registros con la misma rapidez que trataría una decena de ellos. En términos de velocidad y consumo de recursos es equivalente a un control TBrowse. Por lo tanto, no tengáis ningún reparo en usarlo como si de un objeto TBrowse se tratase.

Teniendo en mente esa gran rapidez y bajo consumo de recursos que se requería, se ha desarrollado un control absolutamente novedoso que no existe en otros entornos de desarrollo y cuyo diseño es totalmente visual y muy sencillo. No obstante, requiere de una pequeña explicación introductoria que muestre claramente su funcionamiento. Este es el diseño de la tarjeta que se muestra al principio de este artículo:

Como puede observar, en tiempo de diseño sólo se muestra una tarjeta y ésta está dividida en varias secciones, en las que se mostrarán cada uno de los elementos que queramos visualizar. Cada una de estas secciones dentro de la tarjeta es un control TCardItem, que es un simple objeto heredado de la clase base TComponent el cual tiene una serie de propiedades para establecer parámetros de alineación, color y texto o imagen a mostrar. El número que muestra cada uno de los TCardItem se corresponde con su orden de creación, que al igual que ocurre con las alineación de controles, es muy importante. Cuando se crea un objeto TCardBox esto es lo que se muestra en el IDE:Se muestra únicamente un rectángulo de lo que ocupa una tarjeta. Eso es todo. Para poder mostrar algo en control es necesario añadir un control tipo TCardItem, que sería el equivalente a una columna en un objeto TBrowse. Cuando se añade un control a través de su menú contextual verá lo siguiente:Observe como hay un nuevo rectángulo con el número ‘1‘ dentro de la tarjeta. Dicho rectángulo, es un control TCardItem y sería el equivalente a un objeto columna de un TBrowse. Si pulsa con el ratón en dicho rectángulo podrá empezar a editar todas sus propiedades al igual que lo haría con un objeto columna.

Existen cuatro propiedades que indican la ocupación del item en su contenedor, que son:

• Su propiedad nSize que indica el tamaño del mismo.
• Su propiedad nAlign que indica su alineación dentro de la tarjeta.
• Su propiedad nAlignWeight que indica el peso de su alineación con otros items que tengan la misma alineación que él y sean de creación consecutiva.
• Su propiedad nSiblingWeight (peso entre hermanos) que establece el peso de alineación de un item con respecto a un item base (hermano mayor).

La propiedad nSize indica el tamaño del item. Observe que si la orientación es vertical, su valor indica el ancho del control, mientra que si es horizontal indicará su altura.

La propiedad nAlign indica la alineación de la misma forma que lo haría un control TPanel en un formulario. De hecho, puede tener los mismos valores: alTOP, alBOTTOM, alLEFT, alRIGHT y alCLIENT (excepto alNONE). En la imagen se ha establecido la alineación alLEFT.

La propiedad nAlignWeight indica el peso del item con respecto a otros items con la misma alineación que sean consecutivos en su creación. Cuando esta propiedad es distinta de cero, la propiedad nSize del item pasa a ser inútil ya que su tamaño se calculará en base al peso indicado en este propiedad. Supongamos tres items que deseamos partan la tarjeta en tres secciones verticales de igual tamaño. Algo así:Para ello, no tendríamos más que indicar que todos los items tienen orientación alLEFT y que los tres su propiedad nAlingWeight tienen un valor 1, es decir, todos los items tienen el mismo peso. Observe que es lo mismo poner a todos los items el valor 1 en esta propiedad que cualquier otro valor, porque en cualquier caso los tres tendrán el mismo peso y por lo tanto, su tamaño se distribuirá de forma uniforme. Como ya habrá adivinado, para hacer que un item ocupe el doble que los otros dos no tendrá más que cambiar el valor de la propiedad nAlignWeight a 2 para ese item en concreto. En cuanto cambie la alineación de cualquier item y la haga distinta del anterior el sistema de pesos se inicializa para la nueva alineación.

Este sistema de alineación aún puede ser más potente gracias a la propiedad nSiblingWeight que permite establecer varios items como hermanos que comparten el tamaño o peso de su hermano mayor. El hermano mayor sería el primero que tenga un valor en esta propiedad distinto de cero. A partir de entonces todos los items que tengan la misma alineación (taLEFT), su propiedad nAlignWeight sea cero y tenga un valor distinto de cero en su propiedad nSiblingWeight se comportarán como hermanos y compartirán todos ellos el espacio que ocuparía su hermano mayor si estuviese él sólo.

Se ve mejor con un ejemplo: Supongamos que queremos partir el item 3, en dos partes haciendo que el primer trozo sea el triple que el segundo. Algo así:Simplemente hemos creado un item adicional (4), le hemos dado la misma alineación (taLEFT) que el resto, hemos establecido su propiedad nSiblingWeight a 1 y al Item 3 (el hermano mayor) le hemos establecido su propiedad nSiblingWeight a 3. Eso es todo.

Como ejercicio final vamos a ver en la tarjeta del ejemplo los valores que tienen estas propiedades:Al igual que pasa con las columnas de un control TBrowse, en un control TCardBox, cada item es el responsable de mostrar la información. En un objeto TBrowse el número de filas del mismo está marcado por el tamaño de una matriz, por el número de registros de un archivo DBF o por el número de filas de un dataset. En un objeto TCardBox es igual, pero en vez de filas, tendremos tarjetas. Eso es todo.

El control TCardBox utiliza como origen de datos una matriz multi-columna que se establece en su propiedad aData. Cada TCardItem del control deberá indicar el número de columna que utilizará y para ello se utiliza su propiedad nColumn. Se ha utilizado dicho nombre precisamente para que vea las similitudes entre un objeto TCardBox y un objeto TBrowse.

Cuando utilice un control del tipo TDbCardBox el origen de datos ya no es una matriz, sino un dataset y cada control TCardItem tendrá una propiedad de nombre oDataField que permite establecer la información a mostrar.

Al igual que un TBrowse siempre existe una tarjeta activa que se corresponde con la propiedad nIndex, que igualmente se puede modificar para cambiar la tarjeta activa por código.

TCardBox soporta igualmente un modo de multi-selección de tarjetas con las propiedades lMultipleSel y aSelected, cuyo funcionamiento es idéntico al que tiene el TBrowse.

Un objeto TCardItem puede mostrar la información de distintas formas a través de nType, que pueden ser:

• ctLABEL: Simple texto.
• ctLABELEX: Texto que soporta las mismas propiedades que un control TLabelEX, como puede ser comandos HTML por ejemplo. Además, cuando utilice este tipo, si el texto no cupiera en la tarjeta, realizando un click en el objeto se le mostrará una barra de desplazamiento que le permitirá recorrer todo el texto.
• ctPICTURE: Una imagen, que bien puede ser un objeto TPicture o ‘stream’ de la imagen.
• ctIMAGEINDEX: Ordinal en la propiedad oImageList de su TCardBox.

A continuación os dejo un vídeo de su uso:

Espero que os haya gustado el nuevo control TCardBox y no os haya parecido muy complicado su uso. Os animo a usarlo en cuanto esté disponible. Os aseguro que no os arrepentiréis.

¡Hasta pronto!

Ignacio Ortiz de Zúñiga
Equipo de Xailer