TComboBox/es: what changed

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

Old	New		Line
1	1		\>\> [[LCL Components]] \>\> TComboBox\
2	2
3	3		## Visión General
4	4
5	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	6
7	7		## Descripción
8	8
9	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	10
11		-	~~<figure>~~
12		-	~~<img src="ComboBox_04.png" title="ComboBox_04.png" />~~
13		-	~~<figcaption>ComboBox_04.png</figcaption>~~
14		-	~~</figure>~~
	11	+	![](/wiki-images/1/15/ComboBox_04.png)
15	12
16	13		## Modo de uso
17	14
18	15		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	16		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	17
21	18		Aquí hay unos cuantos ejemplo de uso para combobox ComboBox1 en un formulario Form1:
22	19
23	20		### Llenar el ComboBox
24	21
25	22		#### Mediante el Inspector de Objetos
26	23
27	24		- Selecciona el ComboBox en tu formulario mediante un click.
28	25		- Ve al Inspector de Objetos en la solapa Propiedades de la propiedad Items.
29	26		- Haz Click en el pulsador que tiene los tres puntos ... que habrirá el editor de cadenas.
30	27		- Escribe las entradas de texto que necesites y confirma el contenido con OK.
31	28
32	29		#### Mediante código cuando creas el formulario
33	30
34	31		- 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	32
36	33		- En el editor de código fuente ahora insertamos la sección de texto deseada, para nuestro ejemplo, escribiéndola como sigue:
37	34
38	35		``` pascal
39	36		procedure TForm1.FormCreate(Sender: TObject);
40	37		begin
41	38		ComboBox1.Text := 'Esto es un ComboBox';
42	39		ComboBox1.Items.Clear; // Elimina todo el contenido previo.
43	40		ComboBox1.Items.Add('Rojo'); // Añade la entrada del elemento 'Rojo'.
44	41		ComboBox1.Items.Add('Verde'); // Añade la entrada del elemento 'Verde'.
45	42		ComboBox1.Items.Add('Azul'); // Añade la entrada del elemento 'Azul'.
46	43		ComboBox1.Items.Add('Color Aleatorio'); // Añade la entrada del elemento 'Color Aleatorio'.
47	44		end;
48	45		```
49	46
50		-	~~<figure>~~
51		-	~~<img src="ComboBox_01.PNG" title="ComboBox_01.PNG" />~~
52		-	~~<figcaption>ComboBox_01.PNG</figcaption>~~
53		-	~~</figure>~~
	47	+	![](/wiki-images/5/55/ComboBox_01.PNG)
54	48
55	49		### Hacer que suceda algo después de la selección
56	50
57	51		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	52
59	53		- 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	54
61	55		- 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	56
63	57		``` pascal
64	58		procedure TForm1.ComboBox1Change(Sender: TObject);
65	59		begin
66	60		case ComboBox1.ItemIndex of // Caso de escoger el elemento de indice ?
67	61		0: ComboBox1.Color:=clRed; // 0 asigna clRed a Color (Rojo)
68	62		1: ComboBox1.Color:=clGreen; // 1 asigna clGreen a Color (Verde)
69	63		2: ComboBox1.Color:=clBlue; // 2 asigna clBlue a Color (Azul)
70	64		3: ComboBox1.Color:=Random($1000000); // 3 asigna un color aleatorio a Color
71	65		end;
72	66		end;
73	67		```
74	68
75	69		- 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	70
77		-	~~<figure>~~
78		-	~~<img src="ComboBox_02.PNG" title="ComboBox_02.PNG" />~~
79		-	~~<figcaption>ComboBox_02.PNG</figcaption>~~
80		-	~~</figure>~~
	71	+	![](/wiki-images/1/10/ComboBox_02.PNG)
81	72
82	73		### Dibujado personalizado del ComboBox
83	74
84	75		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	76
86	77		> Note: Parámetros de un ComboBoxDrawItem:\
87	78		> \
88	79		> Control:\
89	80		> 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	81		>
91	82		> ``` pascal
92	83		> if Control is TComboBox then
93	84		> TComboBox(Control).Canvas.FillRect(ARect);
94	85		> ```
95	86		>
96	87		> Index: Epecifica la localización del elemento, de forma que se tenga acceso a la cadena `<ComboBox>.Items[Index]`.\
97	88		> ARect: Describe el rectángulo, el cual es necesario para dibujar el fondo.\
98	89		> State: Estado de los elementos, nos indica cuando se encuentran en estado normal, enfocado, seleccionado, etc.
99	90
100	91		#### Dibujar un rectángulo relleno
101	92
102	93		- Puedes modificar el ejemplo [[TComboBox\|Fill ComboBox mediante cógigo cuando se crea el formulario]].
103	94		- Cambio para ComboBox1 en el Inspector de Objetos la propiedad Style al valor csOwnerDrawFixed.
104	95		- Crea en el Inspector de Objetos el manejador de evento para el evento OnDrawItem, haciendo click en el pulsador \[...\].
105	96		- Añade el siguiente código al manejador:
106	97
107	98		``` pascal
108	99		procedure TForm1.ComboBox1DrawItem(Control: TWinControl; Index: Integer;
109	100		ARect: TRect; State: TOwnerDrawState);
110	101		var
111	102		ltRect: TRect;
112	103
113	104		procedure FillColorfulRect(aCanvas: TCanvas; myRect: TRect); // Pinta un color aleatorio
114	105		// Rellena el rectángulo con un color aleatorio.
115	106		var
116	107		y: Integer;
117	108		begin
118	109		for y:=myRect.Top to myRect.Bottom - 1 do begin
119	110		aCanvas.Pen.Color:=Random($1000000);
120	111		aCanvas.Line(myRect.Left, y, myRect.Right, y);
121	112		end;
122	113		end;
123	114
124	115		begin
125	116		ComboBox1.Canvas.FillRect(ARect);
126	117		// Primero pinta el fondo normal.
127	118		ComboBox1.Canvas.TextRect(ARect, 22, ARect.Top, ComboBox1.Items[Index]);
128	119		// A continuación pinta el texto del elemento.
129	120
130	121		ltRect.Left := ARect.Left + 2; // Define el rectángulo para el color de relleno.
131	122		ltRect.Right := ARect.Left + 20;
132	123		ltRect.Top := ARect.Top + 1;
133	124		ltRect.Bottom := ARect.Bottom - 1;
134	125
135	126		ComboBox1.Canvas.Pen.Color:=clBlack;
136	127		ComboBox1.Canvas.Rectangle(ltRect); // Dibuja un borde.
137	128
138	129		if InflateRect(ltRect, -1, -1) then // Redimensiona el rectángulo en un pixel.
139	130		if Index = 3 then
140	131		FillColorfulRect(ComboBox1.Canvas, ltRect) //Pinta un color aleatorio.
141	132		else begin
142	133		case Index of
143	134		0: ComboBox1.Canvas.Brush.Color := clRed; // Color Rojo.
144	135		1: ComboBox1.Canvas.Brush.Color := clGreen; // Color Verde.
145	136		2: ComboBox1.Canvas.Brush.Color := clBlue; // Color Azul.
146	137		end;
147	138		ComboBox1.Canvas.FillRect(ltRect);
148	139		// Pinta colores rellenando el rectángulo de acuerdo a la selección escogida.
149	140		end;
150	141		end;
151	142		```
152	143
153	144		- Tu ejemplo podría parecerse a esto:
154	145
155	146		![](/wiki-images/1/1d/ComboBoxBsp1.png) -\> ![](/wiki-images/7/70/ComboBoxBsp2.png)
156	147
157	148		#### Preceder una imagen al elemento
158	149
159	150		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	151
161	152		- Crea una aplicación análoga a la del ejemplo [[TComboBox\|Rellena el ComboBox mediante código cuando se crea el formulario]].
162	153		- Cambia de ComboBox1 en la propiedad Style del Inspector de Objetos a csOwnerDrawFixed.
163	154		- Añade un[[TImageList]] desde la paleta de componentes Common controls a tu formulario.
164	155		- 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	156		- Añade 4 imágenes en ImageList:
166	157		- Doble click ImageList1 0 click izquierdo ImageList1 y selecciona ImageList Editor....
167	158		- Haz click en Add y selecciona una imagen (ver \<Lazarus directory\>/images/... hay varias imágenes e iconos en tamaño 16px).
168	159		- Has añadido 4 imágenes, confirma tu selección con \[ok\].
169	160		- Crea mediante el Inspector de Objetos el manejador de eventos para el evento OnDrawItem, haciendo click en el pulsador \[...\].
170	161		- Añade el siguiente código al manejador:
171	162
172	163		``` pascal
173	164		procedure TForm1.ComboBox1DrawItem(Control: TWinControl; Index: Integer;
174	165		ARect: TRect; State: TOwnerDrawState);
175	166		begin
176	167		ComboBox1.Canvas.FillRect(ARect); // Primeramente pinta un fondo normal.
177	168		ComboBox1.Canvas.TextRect(ARect, 20, ARect.Top, ComboBox1.Items[Index]); // Pinta el texto del elemento.
178	169		ImageList1.Draw(ComboBox1.Canvas, ARect.Left + 1, ARect.Top + 1, Index); // Dibuja la imagen de acuerdo al índice (index) en el canvas.
179	170		end;
180	171		```
181	172
182	173		- Tu ejemplo debería parecerse a esto:
183	174
184	175		![](/wiki-images/1/10/ComboBox_02.PNG) -\> ![](/wiki-images/8/8c/ComboBox_03.PNG)
185	176
186	177		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	178
188	179		---
189	180		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