TComboBox/es: what changed

Revision 0 to 1. Removed lines have a minus sign; added lines have a plus sign.

Title: TComboBox/es

New		Line
1	+	\>\> [[LCL Components]] \>\> TComboBox\
2	+
3	+	## Visión General
4	+
5	+	Esta página explica como utilizar el componente [[doc:lcl/stdctrls/tcombobox.html\|TComboBox]]. Cuando mencione hacer click en algo, a menos que diga explícitamente que haga click-derecho, siempre me referiré a realizar un click izquierdo en el elemento en cuestión.
6	+
7	+	## Descripción
8	+
9	+	Es una combinación de una caja de edición (edit box) y un listado (soltar-abajo(drop-down) permitiendo una o varias opciones a ser escogidas.
10	+
11	+	<figure>
12	+	<img src="ComboBox_04.png" title="ComboBox_04.png" />
13	+	<figcaption>ComboBox_04.png</figcaption>
14	+	</figure>
15	+
16	+	## Modo de uso
17	+
18	+	Para utilizar un [[doc:lcl/stdctrls/tcombobox.html\|TComboBox]] en un [[TForm\|form]], simplemente lo seleccionas de la paleta de componentes Standardy a continuación lo ubicas en el formulario mediante un click en el mismo.\
19	+	En el componente ComboBox, las [[String\|strings]] se almacenan en la propiedad Items, que es del tipo TStrings. Por tanto puedes asignar o eliminar cadenas en el ComboBox como en un [[TStringList-TStrings Tutorial\|TStringList]] o su padre [[TStringList-TStrings Tutorial\|TStrings]].
20	+
21	+	Aquí hay unos cuantos ejemplo de uso para combobox ComboBox1 en un formulario Form1:
22	+
23	+	### Llenar el ComboBox
24	+
25	+	#### Mediante el Inspector de Objetos
26	+
27	+	- Selecciona el ComboBox en tu formulario mediante un click.
28	+	- Ve al Inspector de Objetos en la solapa Propiedades de la propiedad Items.
29	+	- Haz Click en el pulsador que tiene los tres puntos ... que habrirá el editor de cadenas.
30	+	- Escribe las entradas de texto que necesites y confirma el contenido con OK.
31	+
32	+	#### Mediante código cuando creas el formulario
33	+
34	+	- Crea el manejador del evento OnCreate para el formulario haciendo click en el formulario, luego en el Inspector de Objetos vamos a la solapa events, selecciona el evento OnCreate y haz click en \[...\] o haz doble click en el pulsador dentro del formulario.
35	+
36	+	- En el editor de código fuente ahora insertamos la sección de texto deseada, para nuestro ejemplo, escribiéndola como sigue:
37	+
38	+	``` pascal
39	+	procedure TForm1.FormCreate(Sender: TObject);
40	+	begin
41	+	ComboBox1.Text := 'Esto es un ComboBox';
42	+	ComboBox1.Items.Clear; // Elimina todo el contenido previo.
43	+	ComboBox1.Items.Add('Rojo'); // Añade la entrada del elemento 'Rojo'.
44	+	ComboBox1.Items.Add('Verde'); // Añade la entrada del elemento 'Verde'.
45	+	ComboBox1.Items.Add('Azul'); // Añade la entrada del elemento 'Azul'.
46	+	ComboBox1.Items.Add('Color Aleatorio'); // Añade la entrada del elemento 'Color Aleatorio'.
47	+	end;
48	+	```
49	+
50	+	<figure>
51	+	<img src="ComboBox_01.PNG" title="ComboBox_01.PNG" />
52	+	<figcaption>ComboBox_01.PNG</figcaption>
53	+	</figure>
54	+
55	+	### Hacer que suceda algo después de la selección
56	+
57	+	Como todos los componentes TComboBox también provee varios [[Event order\|eventos]] que son llamados cuando el usuario lo utiliza. Para responder a un cambio en la selección de los elementos podemos utilizar el evento OnChange:
58	+
59	+	- Para ello hacemos doble click sobre el componente ComboBox del formulario en el que estemos trabajando o bien escogemos el evento OnChange en el Inspector de Objetos y a continuación click en \[...\].
60	+
61	+	- Con esto se crea el manejador del evento permintiéndonos insertar el código deseado. En nuestro ejemplo queremos cambiar el color del recuadro que muestra el elemento seleccionado:
62	+
63	+	``` pascal
64	+	procedure TForm1.ComboBox1Change(Sender: TObject);
65	+	begin
66	+	case ComboBox1.ItemIndex of // Caso de escoger el elemento de indice ?
67	+	0: ComboBox1.Color:=clRed; // 0 asigna clRed a Color (Rojo)
68	+	1: ComboBox1.Color:=clGreen; // 1 asigna clGreen a Color (Verde)
69	+	2: ComboBox1.Color:=clBlue; // 2 asigna clBlue a Color (Azul)
70	+	3: ComboBox1.Color:=Random($1000000); // 3 asigna un color aleatorio a Color
71	+	end;
72	+	end;
73	+	```
74	+
75	+	- Arranca tu aplicación, cada una de las selecciones cambia el color de fondo del rectángulo del ComboBox que nos muestra el elemento seleccionado.
76	+
77	+	<figure>
78	+	<img src="ComboBox_02.PNG" title="ComboBox_02.PNG" />
79	+	<figcaption>ComboBox_02.PNG</figcaption>
80	+	</figure>
81	+
82	+	### Dibujado personalizado del ComboBox
83	+
84	+	En general, es ventajoso permitir al ComboBox mostrar el [tema](http://en.wikipedia.org/wiki/Skin_%28computing%29) que ha escogido el usuario en sus configuraciones. En algunos casos (por ejemplo, para programar un juego con una superficie repleta de color), puedes desviarte de este estandar y dibujarlo acorde a tu propia elección. Así es como funciona:
85	+
86	+	> Note: Parámetros de un ComboBoxDrawItem:\
87	+	> \
88	+	> Control:\
89	+	> If multiple controls (e.g. multiple ComboBoxes) access this event handle, sabes que control causó el evento. En nuestro ejemplo, en lugar de `ComboBox1.Canvas.FillRect(ARect)` puedes además escribir `TComboBox(Control).Canvas.FillRect(ARect)`. However, you should still check in advance, whether it is a TComboBox:
90	+	>
91	+	> ``` pascal
92	+	> if Control is TComboBox then
93	+	> TComboBox(Control).Canvas.FillRect(ARect);
94	+	> ```
95	+	>
96	+	> Index: Epecifica la localización del elemento, de forma que se tenga acceso a la cadena `<ComboBox>.Items[Index]`.\
97	+	> ARect: Describe el rectángulo, el cual es necesario para dibujar el fondo.\
98	+	> State: Estado de los elementos, nos indica cuando se encuentran en estado normal, enfocado, seleccionado, etc.
99	+
100	+	#### Dibujar un rectángulo relleno
101	+
102	+	- Puedes modificar el ejemplo [[TComboBox\|Fill ComboBox mediante cógigo cuando se crea el formulario]].
103	+	- Cambio para ComboBox1 en el Inspector de Objetos la propiedad Style al valor csOwnerDrawFixed.
104	+	- Crea en el Inspector de Objetos el manejador de evento para el evento OnDrawItem, haciendo click en el pulsador \[...\].
105	+	- Añade el siguiente código al manejador:
106	+
107	+	``` pascal
108	+	procedure TForm1.ComboBox1DrawItem(Control: TWinControl; Index: Integer;
109	+	ARect: TRect; State: TOwnerDrawState);
110	+	var
111	+	ltRect: TRect;
112	+
113	+	procedure FillColorfulRect(aCanvas: TCanvas; myRect: TRect); // Pinta un color aleatorio
114	+	// Rellena el rectángulo con un color aleatorio.
115	+	var
116	+	y: Integer;
117	+	begin
118	+	for y:=myRect.Top to myRect.Bottom - 1 do begin
119	+	aCanvas.Pen.Color:=Random($1000000);
120	+	aCanvas.Line(myRect.Left, y, myRect.Right, y);
121	+	end;
122	+	end;
123	+
124	+	begin
125	+	ComboBox1.Canvas.FillRect(ARect);
126	+	// Primero pinta el fondo normal.
127	+	ComboBox1.Canvas.TextRect(ARect, 22, ARect.Top, ComboBox1.Items[Index]);
128	+	// A continuación pinta el texto del elemento.
129	+
130	+	ltRect.Left := ARect.Left + 2; // Define el rectángulo para el color de relleno.
131	+	ltRect.Right := ARect.Left + 20;
132	+	ltRect.Top := ARect.Top + 1;
133	+	ltRect.Bottom := ARect.Bottom - 1;
134	+
135	+	ComboBox1.Canvas.Pen.Color:=clBlack;
136	+	ComboBox1.Canvas.Rectangle(ltRect); // Dibuja un borde.
137	+
138	+	if InflateRect(ltRect, -1, -1) then // Redimensiona el rectángulo en un pixel.
139	+	if Index = 3 then
140	+	FillColorfulRect(ComboBox1.Canvas, ltRect) //Pinta un color aleatorio.
141	+	else begin
142	+	case Index of
143	+	0: ComboBox1.Canvas.Brush.Color := clRed; // Color Rojo.
144	+	1: ComboBox1.Canvas.Brush.Color := clGreen; // Color Verde.
145	+	2: ComboBox1.Canvas.Brush.Color := clBlue; // Color Azul.
146	+	end;
147	+	ComboBox1.Canvas.FillRect(ltRect);
148	+	// Pinta colores rellenando el rectángulo de acuerdo a la selección escogida.
149	+	end;
150	+	end;
151	+	```
152	+
153	+	- Tu ejemplo podría parecerse a esto:
154	+
155	+	![](/wiki-images/1/1d/ComboBoxBsp1.png) -\> ![](/wiki-images/7/70/ComboBoxBsp2.png)
156	+
157	+	#### Preceder una imagen al elemento
158	+
159	+	En este ejemplo cargamos unas cuantas imágenes en un [[TImageList]] y las dibujamos en frente de los elementos del ComboBox. Es un ejemplo que generalmente solo muestra que puedes hacer en el: no entro explícitamente en detalles, tales como chequeo, si la imagen correspondiente existe, etc. en este ejemplo. Esto debería hacerse por tu parte dependiendo de las necesidades.
160	+
161	+	- Crea una aplicación análoga a la del ejemplo [[TComboBox\|Rellena el ComboBox mediante código cuando se crea el formulario]].
162	+	- Cambia de ComboBox1 en la propiedad Style del Inspector de Objetos a csOwnerDrawFixed.
163	+	- Añade un[[TImageList]] desde la paleta de componentes Common controls a tu formulario.
164	+	- La Height y Width de 16 pixels viene predefinida para ImageList1. Lo permitimos. Para contener completamente las imágenes en nuestro ComboBox establecemos la propiedad ItemHeight de ComboBox1 a 18 mediante el Inspector de Objetos.
165	+	- Añade 4 imágenes en ImageList:
166	+	- Doble click ImageList1 0 click izquierdo ImageList1 y selecciona ImageList Editor....
167	+	- Haz click en Add y selecciona una imagen (ver \<Lazarus directory\>/images/... hay varias imágenes e iconos en tamaño 16px).
168	+	- Has añadido 4 imágenes, confirma tu selección con \[ok\].
169	+	- Crea mediante el Inspector de Objetos el manejador de eventos para el evento OnDrawItem, haciendo click en el pulsador \[...\].
170	+	- Añade el siguiente código al manejador:
171	+
172	+	``` pascal
173	+	procedure TForm1.ComboBox1DrawItem(Control: TWinControl; Index: Integer;
174	+	ARect: TRect; State: TOwnerDrawState);
175	+	begin
176	+	ComboBox1.Canvas.FillRect(ARect); // Primeramente pinta un fondo normal.
177	+	ComboBox1.Canvas.TextRect(ARect, 20, ARect.Top, ComboBox1.Items[Index]); // Pinta el texto del elemento.
178	+	ImageList1.Draw(ComboBox1.Canvas, ARect.Left + 1, ARect.Top + 1, Index); // Dibuja la imagen de acuerdo al índice (index) en el canvas.
179	+	end;
180	+	```
181	+
182	+	- Tu ejemplo debería parecerse a esto:
183	+
184	+	![](/wiki-images/1/10/ComboBox_02.PNG) -\> ![](/wiki-images/8/8c/ComboBox_03.PNG)
185	+
186	+	Como puedes observar asigna las imágenes que tienen su propio índice en ImageList1 correlativo al índice que tienen los elementos en el ComboBox1.
187	+
188	+	---
189	+	From the Free Pascal wiki, page "TComboBox/es", as it stood on 2020-02-29 after a change by Trev, out of the wiki's dump of 2024-05-26. Copyright stays with the author who wrote it, according to the old wiki's [[Licensing]] page. If you have concerns about this material, [message the admin](/wiki-contact).

Back to history