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;
  Quizás te pueda interesar: 

No hay comentarios:

Publicar un comentario