Cómo configurar los estilos en un tlistbox con rad studio

En este post os voy a explicar cómo se configuran los estilos en un listbox utilizando como ejemplo lo que he desarrollado para preparar la pantalla de la
app “señales de tráfico de España”.

En esta pantalla se muestran al usuario los diferentes grupos de señales.

DISEÑO DEL FORM:

Como siempre es muy recomendable abrir el módulo Structure View de Rad Studio para ver cómo se organizan en el form los diferentes elementos que lo componen.

Seguidamente empezaremos a configurar la barra superior del form:



Para ello vamos al menú Tool Palette  y seleccionamos:



- un ttoolbar con la propiedad
Align=Top

- tRectangle con las siguientes propiedades:

  Align=Client, 

  Fill-Gradient-Edit=#FFE0E0E0

  Fill-Kind=Gradient. 

- dos speedbutton (Uno con Align=Right y otro con Alig=Left)

Después tenemos que crear un objeto que indique qué grupos de señales se muestran en cada momento:





- tLayout (Align = Top) 

-tRectangle (Fill.Color=Blue, Fill.Kind=Solid, XRadius=6, YRadius=6, para
poner los bordes redondeados)

- tlabel con el texto “GRUPOS DE SEÑALES DE
TRÁFICO”



No olvidar que desde Structure View debemos dejar definido qué componentes dependen unos de otros, por ejemplo en el caso anterior hay que hacer que del tLayout (Contenedor principal) cuelgue un tRectangle, y que a su vez un tLabel cuelgue del tRectangle.

Después situaremos debajo del componente anterior un tListbox (Align=client)

Y por último seleccionaremos un tStylebook (StylebookCateg) para poder diseñar el estilo que queremos aplicar a cada uno de los componentes del ListBox.

Al final tiene que quedar de esta forma:

DISEÑO DEL TLISTBOX:

Para diseñar cada uno de los ítems del Listbox, vamos a
crear un estilo.

Hacemos doble clic sobre el componente StyleBookCateg, para
abrir el Style Designer:

En la vista de Estructura tendremos que ir añadiendo
componentes, de la misma forma que cuando añadimos componentes al form, para
que nos quede del siguiente modo:

En la parte de diseño nos debería quedar así:

Ahora ya se puede ver más claro cómo se corresponde el
estilo que hemos creado con cada uno de los ítems del listbox.

Tenemos:

- a la derecha un tspeedbutton:Speedbutton1Style con el
símbolo de flecha (Align=Right)

- abajo un tText:Text4Style (Align=Bottom), 

- a la
izquierda un tImage:ICON (Align=Left)

- en la parte central un tText:Text
(Align=Client). 

Como veis al final siempre es lo mismo, hay que ir
seleccionando componentes y jugando con el tipo de alineación para conseguir el
efecto deseado.

Por último pulsamos sobre Style Designer con el botón
derecho para cerrar la página y guardar cambios

PROGRAMACIÓN

Para diseñar cada uno de los ítems del tListbox:LBSENALES,
procederemos a crear un elemento tListBoxItem. 

Para manejar los objetos que componen cada ítem, Delphi nos proporciona el evento OnApplyStyleLookup, en nuestro caso previamente he
creado un array con las descripciones de las categorías de las señales
(InfoCateg) para poderlas asociar al estilo “Text4Style”.

Var
Item: TListBoxItem;
Descripción:string;

begin
LBSenales.BeginUpdate;
Item := TListBoxItem.Create(NIL);
Item.Parent := LBSenales;
Item.StyleLookup := 'CustomItemCateg';
Item.Tag := NumSenal;
Item.StylesData['SpeedButton1Style.OnClick'] :=TValue.From(DoInfoClick2);
Item.text := descripcion;
Item.OnApplyStyleLookup := DoItemApplyStyle;
LBSenales.EndUpdate;
End;

PROCEDURE TForm.DoItemApplyStyle(Sender: TObject);
VAR
Item: TListBoxItem;
ItemKey: integer;
StyleObject: TFmxObject;
MiTexto: tText;
BEGIN

Assert(Sender IS TListBoxItem,
'Este handler solo controla ListboxItem');

IF NOT(Sender IS TListBoxItem) THEN
Exit;
Item := Sender AS TListBoxItem;
ItemKey := Item.Tag;

StyleObject := Item.FindStyleResource('Text4Style');
IF Assigned(StyleObject) AND (StyleObject IS tText) THEN
BEGIN
MiTexto := StyleObject AS tText;
BEGIN
MiTexto.text := InfoCateg[ItemKey];
END;
END;

END;

El procedimiento  DoInfoClick2 se disparará cuando el usuario pulse el botón “>”.

PROCEDURE TForm.DoInfoClick2(Sender: TObject);
VAR
Item: TListBoxItem;
BEGIN
Item := TListBoxItem(FindItemParent(Sender AS TFmxObject, TListBoxItem));
IF Assigned(Item) THEN
BEGIN
// Aquí escribiremos lo que queramos que suceda cuando el usuario pulse el botón “>”
// en mi caso cierro el form y abro uno nuevo donde se ven las señales de la categoría
// seleccionada.
END;

END;