43 | 
44 |
46 |
47 | ## **Ejemplificación**
48 |
49 | La ejemplificación del objeto Gráfico hace parte de la etapa de construcción y consiste en darle un valor inicial al objeto y para esto es necesario llamar al constructor de la clase, **este paso es importante y sin él no es posible realizar la configuración**. Para esta sesión las etapas de ejemplificación, configuración y adición se realizarán dentro del **constructor** de la clase.
50 |
51 |
44 | Declaración de dos objetos gráficos tipo JPanel con sus 3 partes
45 |
52 | 
53 |
55 |
56 | ## **Configuración**
57 |
58 | La configuración también hace parte de la etapa de construcción y es la etapa donde se llaman a los métodos proporcionados por la clase del objeto gráfico para darle propiedades gráficas y estas puedan verse en la pantalla. Por ahora solo se mostrara un ejemplo, sin embargo, mas adelante en esta sesión se explicará la función de cada uno de los métodos de configuración usados.
59 |
60 |
53 | Ejemplificación de dos objetos gráficos tipo JPanel
54 |
61 | 
62 |
64 |
65 | ## **Adición**
66 |
67 | Para este tramo el objeto gráfico esta listo para ser mostrado, sin embargo, aun no se ha creado la solicitud para que este sea agregado en la ventana, para esto es necesario adicionarlo a su objeto padre o también llamado objeto contenedor, un objeto contenedor puede ser una ventana, un panel, canvas etc. En este ejemplo el objeto padre es la ventana. Con el método **add()** se puede añadir el objeto gráfico.
68 |
69 |
62 | Configuración de dos objetos gráficos justo después de haberse ejemplificado
63 |
70 | 
71 |
73 |
74 | Puede verse en la anterior imagen que la forma de añadir elementos gráficos en la ventana consiste en llamar **this.add()** ya que la clase extiende de un JFrame. La palabra clave **this** hace referencia a que se esta llamando a la misma clase donde se esta codificando. Sin embargo pueden existir algunos objetos gráficos que no queremos añadir directamente en la ventana, se podrían añadir en un panel por ejemplo. A continuación se muestra como se podría hacer esto.
75 |
76 |
71 | Adición de dos objetos gráficos una vez se hayan declarado, ejemplificado y configurado.
72 |
77 | 
78 |
80 |
81 | # Creación de objetos gráficos básicos.
82 |
83 | En esta sección se verá la forma de crear objetos gráficos para ser mostrados en pantalla, basado en los 4 pasos que se acabaron de explicar. Los objetos explicados a continuación serán:
84 |
85 | - **JPanel**
86 | - **JLabel**
87 | - **JTextField**
88 | - **JPasswordField**
89 | - **JComboBox**
90 | - **JButton**
91 | - **JCheckBox**
92 | - **ButtonGroup**
93 | - **JRadioButton** (Se explicara brevemente su creación ya que es similar a la de checkBox)
94 | - **JTextArea** (Se explicara brevemente su creación ya que es similar a la de un TextField)
95 |
96 | ## Antes de comenzar
97 |
98 | Recordando la sesión 1, se crea una nueva clase llamada **LoginTemplate** y se configura la ventana.
99 |
100 |
78 | Adición de objetos gráficos dentro de Paneles
79 |
101 | 
102 |
104 |
105 | Por otro lado en la clase principal se va a llamar a esta clase dentro del hilo EDT:
106 | ```javascript
107 | public static void main(String[] args) {
108 | Runnable runApplication = new Runnable() {
109 | public void run(){
110 | LoginTemplate login = new LoginTemplate();
111 | login.getClass();
112 | }
113 | };
114 | SwingUtilities.invokeLater(runApplication);
115 | }
116 | ```
117 |
118 | ## JPanel
119 |
120 | Los Paneles son la mejor forma de identificar partes de una ventana y modularizar diferentes secciones de esta y agrupando varios objetos gráficos que comparten un contexto.
121 |
122 | Para el ejemplo de esta sesión se van a crear 2 paneles (los mismos que se han creado para el ejemplo de las etapas de la creación de objetos gráficos). Un punto importante a resaltar y que se toma como un estándar del curso es que en la declaración de los paneles las variables (objetos) empiezan con una p minúscula seguido del nombre arbitrario de la variable, ahora se explicarán los métodos de configuración.
123 |
124 | ```javascript
125 | pIzquierda.setSize(600, 500);
126 | pIzquierda.setLocation(0, 0);
127 | pIzquierda.setBackground(Color.BLUE);
128 | ```
129 |
130 | - **setSize:** Recibe por parámetros un par de enteros y definen el tamaño del panel, siendo el ancho el primer parámetro y el alto el segundo.
131 | - **setLocation:** Recibe por parámetros un par de enteros y definen la posición del panel, la posición en el eje x es el primer parámetro y la posición en el eje y el segundo.
132 | - **setBackground:** Recibe por parámetro un *objeto decorador* de tipo Color y define el color de fondo del panel.
133 |
134 | Los métodos **setSize** y **setLocation** pueden ser reemplazados por el método:
135 |
136 | - **setBounds:** Recibe por parámetros 4 números enteros de los cuales los dos primeros representan la posición y los dos últimos el tamaño **(x, y, ancho, alto)**
137 |
138 | Hasta el momento la ventana se ve así:
139 |
140 |
102 | Clase de login de usuario
103 |
141 | 
142 |
144 |
145 | Por ahora todo luce bien, sin embargo hay una propiedad crucial que no se explico a propósito, más adelante se va a recalcar. Los colores se configuraron para verificar la existencia de los paneles en la ventana, por ahora cambiará el color de fondo del panel **pDerecha** por un color blanco.
146 |
147 | ```javascript
148 | pDerecha.setBackground(Color.WHITE);
149 | ```
150 |
151 | El código se ve asi:
152 |
153 |
142 | Interfaz login de usuario con 2 paneles
143 |
154 | 
155 |
157 |
158 | Cabe resaltar que la configuración de la ventana se suele colocar de ultimas, si se deja en otros lados probablemente el programa tendrá problemas en mostrar la interfaz. Sobretodo la ultima linea de código **setVisible** debe ser la ultima en llamarse, ya que primero se deben agregan todos los elementos en la ventana para luego ser mostrada.
159 |
160 | ## JLabel
161 |
162 | Los label en las interfaces gráficas representan textos o imágenes que se quieren mostrar en pantalla y que el usuario no podrá cambiar, normalmente son usados para dar indicaciones, títulos, subtítulos, iconos, logos etc.
163 |
164 | Se puede empezar colocando un título en la interfaz, para esto se crea un JLabel (Realizando los 4 pasos anteriores)Ñ
165 |
166 | * **Declaración**
167 | ```javascript
168 | // Al inicio de la clase
169 | private JLabel lTituloApp;
170 | ```
171 |
172 | La variable (objeto) que se coloca para los label empezarán con l minúscula seguido del nombre de la variable.
173 |
174 | * **Ejemplificación**
175 | ```javascript
176 | // Dentro del constructor
177 | lTituloApp = new JLabel("Login de Usuario");
178 | ```
179 |
180 | Se puede notar que cuando se ejemplifica el objeto de tipo JLabel este puede recibir por parámetro en el constructor un String que representa el texto que se mostrará en pantalla, esto no es obligatorio, se puede crear con parámetros vacíos y mas adelante llamar al método **setText()** que también recibe un String y cumple la misma función, pero esta es una buena forma de ahorrar código.
181 |
182 | * **Configuración**
183 | ```javascript
184 | // Dentro del constructor
185 | lTituloApp.setBounds(100, 20, 220, 30);
186 | lTituloApp.setForeground(Color.WHITE);
187 | ```
188 |
189 | Puede notarse que en esta ocasión se utiliza el método **setBounds** en lugar de **setSize y setLocation** por separado, en realidad las dos formas son correctas y habrán casos donde se necesita hacer de una forma u otra. A parte tenemos otro método:
190 |
191 | - **setForeground:** Recibe por parámetro un *objeto decorador* de tipo Color y representa el color de la fuente del JLabel.
192 |
193 | * **Adición**
194 | ```javascript
195 | // Dentro del constructor
196 | pIzquierda.add(lTituloApp);
197 | ```
198 |
199 | Puede observarse que este objeto se añadirá al panel de la izquierda y no en la ventana directamente. Ahora bien si se ejecuta la aplicación para ver el label es posible notar que este no se posiciono exactamente donde se configuro, ¿no se ve muy claro? ahora se hará un pequeño cambio. Posicionando el objeto 100 pixeles más hacia abajo.
200 |
201 | ```javascript
202 | lTituloApp.setBounds(100, 120, 200, 30);
203 | ```
204 |
205 | Una vez la aplicación se ejecuta de nuevo el Label esta en la misma posición que antes.
206 |
207 | **¿Por que esta pasando esto?**
208 |
209 | Esto se debe al manager de posicionamiento de Java que por defecto maneja un Layout predeterminado, el cual tratará de dejar los objetos en la parte superior central de la ventana, cuando esta tiene dos o mas objetos tratará de dividir el panel de forma equitativa para posicionar los objetos de forma centrada. En muchas ocasiones esto no es lo que se busca. Para esto se debe configurar la ventana y los paneles para que deje nula esa propiedad y **sea el desarrollador quien posicione los objetos mediante el enfoque de posicionamiento en pixeles.**
210 |
211 | ```javascript
212 | // Se coloca en su respectiva configuración
213 | pDerecha.setLayout(null);
214 | pIzquierda.setLayout(null);
215 | setLayout(null); // configuración de la ventana
216 | ```
217 |
218 | Una vez corre la aplicación se observa como el Label esta en los pixeles indicados. Los 100 pixeles de mas en el eje Y se colocaron como prueba, se dejará la posición como se dejo originalmente.
219 |
220 | ```javascript
221 | lTituloApp.setBounds(100, 20, 200, 30);
222 | ```
223 |
224 | También se va a añadir 3 label mas:
225 |
226 | * **Declaración:**
227 | ```javascript
228 | // Al inicio de la clase
229 | private JLabel lTituloApp, lEslogan, lTituloLogin, lNotificaciones;
230 | ```
231 |
232 | * **Ejemplificación, configuración y adición**
233 | ```javascript
234 | // Dentro del constructor
235 | lEslogan = new JLabel("Te ayudamos en todo");
236 | lEslogan.setSize(130, 20);
237 | lEslogan.setLocation((pDerecha.getWidth() - lEslogan.getWidth()) / 2, 40);
238 | lEslogan.setForeground(Color.DARK_GRAY);
239 | lEslogan.setHorizontalAlignment(SwingConstants.CENTER);
240 | pDerecha.add(lEslogan);
241 |
242 | lTituloLogin = new JLabel("Registra tus Datos");
243 | lTituloLogin.setSize(150, 30);
244 | lTituloLogin.setLocation((pDerecha.getWidth() - lTituloLogin.getWidth()) / 2, 60);
245 | lTituloLogin.setForeground(Color.DARK_GRAY);
246 | lTituloLogin.setHorizontalAlignment(SwingConstants.CENTER);
247 | pDerecha.add(lTituloLogin);
248 |
249 | lNotificaciones = new JLabel("¿Recibir Notificaciones?");
250 | lNotificaciones.setSize(140, 20);
251 | lNotificaciones.setLocation((pDerecha.getWidth() - lNotificaciones.getWidth()) / 2, 370);
252 | lNotificaciones.setForeground(Color.DARK_GRAY);
253 | lNotificaciones.setHorizontalAlignment(SwingConstants.CENTER);
254 | pDerecha.add(lNotificaciones);
255 | ```
256 |
257 | En el anterior código se resalta la importancia de cuando usar el enfoque de tamaño y posicionamiento por separado. Por ejemplo cuando un elemento se quiere colocar en el centro con respecto ya sea a su panel padre o a la ventana. Para esto se debe hacer un calculo que es:
258 |
259 | - **(Ancho de panel - Ancho Objeto)/ 2**
260 |
261 | El ancho de un objeto gráfico puede conocerse grácias al método **getWidth**. Sin embargo, para conocer el ancho del objeto es necesario proporcionarle la propiedad de tamaño previamente usando **setSize**. Si se usa **setBounds** al pedir los 4 datos al tiempo este no tendrá aun un ancho definido aun y no podrá calcularse la anterior operación.
262 |
263 | Por otro lado los Label por defecto centran el texto en el eje vertical, pero en el eje horizontal el texto esta colocado por defecto en la parte izquierda o inicial del label, en este caso se quiere que el texto de forma interna este centrado con respecto al tamaño del label, para esto se usa el método:
264 |
265 | - **setHorizontalAlignment:** Recibe por parámetro un objeto tipo **SwingConstants** y le da la dirección de la posición horizontal del texto. Si no se llama por defecto el texto estará posicionado en la parte izquierda, sus otras opciones principales son **CENTER** y **RIGHT**. Aunque existen más opciones, estas configuran la posición con respecto al eje Y, y no son necesarias en este método.
266 |
267 | La ventana se esta viendo así:
268 |
269 |
155 | Clase de login de usuario
156 |
270 | 
271 |
273 |
274 | ## JTextField
275 |
276 | Los TextField son cajas de texto donde el usuario va poder ingresar información importante que la aplicación necesita de él. Muchas veces estará dentro de formularios donde se pide información, otras veces servirán como medio para realizar una consulta especifica, para modificar información etc.
277 |
278 | Para este caso se usará un JTextField para que el cliente pueda escribir el nombre de su usuario.
279 |
280 | * **Declaración**
281 | ```javascript
282 | // Al inicio de la clase
283 | private JTextField tNombreUsuario;
284 | ```
285 |
286 | La variable (objeto) que se coloca para los textField empezará con t minúscula seguido del nombre de la variable.
287 |
288 | * **Ejemplificación**
289 | ```javascript
290 | // Dentro del constructor
291 | tNombreUsuario = new JTextField("Nombre Usuario");
292 | ```
293 |
294 | Al igual que con los Label estos pueden recibir un String por parámetro desde el constructor, este funciona como **placeholder** pero necesita de una configuración adicional que en esta clase no se verá. De nuevo no es obligatorio colocar el String inicial.
295 |
296 | * **Configuración**
297 | ```javascript
298 | // Dentro del constructor
299 | tNombreUsuario.setSize(260, 40);
300 | tNombreUsuario.setLocation((pDerecha.getWidth() - tNombreUsuario.getWidth()) / 2, 120);
301 | tNombreUsuario.setForeground(Color.DARK_GRAY);
302 | tNombreUsuario.setBackground(Color.WHITE);
303 | tNombreUsuario.setCaretColor(Color.BLUE);
304 | tNombreUsuario.setHorizontalAlignment(SwingConstants.CENTER);
305 | ```
306 |
307 | Como los anteriores objetos gráficos, este tiene algunas configuraciones ya vistas, mas una nueva propiedad:
308 |
309 | - **setCaretColor:** recibe por parámetro un **objeto decorador** de tipo Color y representa el color del Caret (la linea que parpadea indicando la posición de texto para escribir).
310 | - **setHorizontalAlignment:** Por defecto los TextField van a ubicar el texto en la parte izquierda pero en caso de que se quiera colocar el texto a en el centro o a la derecha se puede utilizar este método.
311 |
312 | * **Adición**
313 | ```javascript
314 | // Dentro del constructor
315 | pDerecha.add(tNombreUsuario);
316 | ```
317 |
318 | ## JPasswordField
319 |
320 | Los JPasswordField son campos de texto donde el usuario va a escribir información confidencial, esto implica que por cuestiones de seguridad, la información proporcionada por el cliente no debe ser mostrada en pantalla. Como su nombre lo indica este objeto gráfico muchas veces se utiliza para el ingreso de contraseñas.
321 |
322 | * **Declaración**
323 | ```javascript
324 | // Al inicio de la clase
325 | private JPasswordField tClaveUsuario;
326 | ```
327 |
328 | La variable (objeto) que se coloca para los JPasswordField empezará con t minúscula seguido del nombre de la variable.
329 |
330 | * **Ejemplificación**
331 | ```javascript
332 | // Dentro del constructor
333 | tClaveUsuario = new JPasswordField("Clave Usuario");
334 | ```
335 |
336 | * **Configuración**
337 | ```javascript
338 | // Dentro del constructor
339 | tClaveUsuario.setSize(260, 40);
340 | tClaveUsuario.setLocation((pDerecha.getWidth() - tClaveUsuario.getWidth()) / 2, 240);
341 | tClaveUsuario.setForeground(Color.DARK_GRAY);
342 | tClaveUsuario.setCaretColor(Color.BLUE);
343 | tClaveUsuario.setHorizontalAlignment(SwingConstants.CENTER);
344 | ```
345 |
346 | * **Adición**
347 | ```javascript
348 | // Dentro del constructor
349 | pDerecha.add(tClaveUsuario);
350 | ```
351 |
352 | Se puede notar que una vez se ejecuta la aplicación en el campo de la clave del usuario este saldrá en forma de puntos escondiendo la información que el usuario coloque allí.
353 |
354 | ## JComboBox
355 |
356 | Muchas veces el usuario tendrá que escoger entre varias opciones fijas que la aplicación le da a seleccionar, normalmente vista en forma de listas. Para eso es posible usar un JComboBox donde el usuario puede elegir opciones predeterminadas.
357 |
358 | En este caso se usará un ComboBox para escoger el tipo de usuario:
359 |
360 | * **Declaración**
361 | ```javascript
362 | // Al inicio de la clase
363 | private JComboBox cbTipoUsuario;
364 | ```
365 |
366 | La variable (objeto) que se coloca para los JComboBox empezará con cb minúscula seguido del nombre de la variable.
367 |
368 | * **Ejemplificación**
369 | ```javascript
370 | // Dentro del constructor
371 | cbTipoUsuario = new JComboBox();
372 | ```
373 |
374 | * **Configuración**
375 | ```javascript
376 | // Dentro del constructor
377 | cbTipoUsuario.addItem("Cliente");
378 | cbTipoUsuario.addItem("Cajero");
379 | cbTipoUsuario.addItem("Administrador");
380 | cbTipoUsuario.setSize(220, 30);
381 | cbTipoUsuario.setLocation((pDerecha.getWidth() - cbTipoUsuario.getWidth()) / 2, 185);
382 | cbTipoUsuario.setForeground(Color.DARK_GRAY);
383 | cbTipoUsuario.setBackground(Color.WHITE);
384 | ((JLabel) cbTipoUsuario.getRenderer()).setHorizontalAlignment(SwingConstants.CENTER);
385 | ```
386 |
387 | A parte de las configuraciones que ya se vieron antes, en este caso existen dos particularidades:
388 |
389 | - **addItem:** recibe por parámetro un String y lo admite como opción a seleccionar por el usuario.
390 | - **getRenderer, setHorizontalAlignment:** Si se quieren centrar los elementos dentro de un ComboBox, esto no se podrá de forma directa. Cada una de las opciones dentro del ComboBox son tratados como Labels y para obtener su valor es necesario pedirle al ComboBox los elementos con el método **getRenderer**. Una vez obtenemos los elementos (JLabels) es necesario hacer un **Cast** de objeto para asi obtener las configuraciones propias de un JLabel **((JLabel) cbTipoUsuario.getRenderer())** de lo contrario al poner . (punto) para escribir los métodos de configuración no se vera la opción **setHorizontalAlignment**.
391 |
392 | * **Adición**
393 | ```javascript
394 | // Dentro del constructor
395 | pDerecha.add(cbTipoUsuario);
396 | ```
397 |
398 | ## JButton
399 |
400 | Los botones son la forma mas común en la que un usuario podrá interactuar con las interfaces gráficas. Estos botones generan acciones que el usuario puede activar al dar Click sobre estos, entre algunas opciones, puede estar: el envío de información, traer información, abrir otras secciones, cerrar la aplicación etc.
401 |
402 | * **Declaración**
403 | ```javascript
404 | // Al inicio de la clase
405 | private JButton bEntrar;
406 | ```
407 |
408 | La variable (objeto) que se coloca para los JButton empezará con b minúscula seguido del nombre de la variable.
409 |
410 | * **Ejemplificación**
411 | ```javascript
412 | // Dentro del constructor
413 | bEntrar = new JButton("Entrar");
414 | ```
415 |
416 | Un Botón puede recibir por parámetro en el constructor un String que representa el texto, de nuevo se puede realizar también mediante el método **setText**.
417 |
418 | * **Configuración**
419 | ```javascript
420 | // Dentro del constructor
421 | bEntrar.setSize(250, 45);
422 | bEntrar.setLocation((pDerecha.getWidth() - bEntrar.getWidth()) / 2, 300);
423 | bEntrar.setBackground(Color.BLUE);
424 | bEntrar.setForeground(Color.WHITE);
425 | bEntrar.setFocusable(false);
426 | ```
427 |
428 | A parte de las configuraciones que ya se vieron antes, en este caso existen dos particularidades:
429 |
430 | - **setHorizontalAlignment:** Por defecto los botones van a ubicar el texto centrado pero en caso de que se quiera colocar el texto a la izquierda o a la derecha se puede utilizar este método.
431 | - **setFocusable:** Recibe por parámetro un booleano que por defecto esta en true, si se cambia la configuración a false, se va a quitar el cuadro por defecto que rodea al texto del botón una vez se oprima click.
432 |
433 |
271 | Interfaz login de usuario con paneles y labels
272 |
434 | 
435 |
437 |
438 |
435 | Botón con SetFocusable(True)
436 |
439 | 
440 |
442 |
443 | * **Adición**
444 | ```javascript
445 | // Dentro del constructor
446 | pDerecha.add(bEntrar);
447 | ```
448 |
449 | Hasta el momento la interfaz se ve asi:
450 |
451 |
440 | Botón con SetFocusable(False)
441 |
452 | 
453 |
455 |
456 | Se van añadir 5 botones más, utilizando lo aprendido hasta el momento:
457 |
458 | * **Declaración**
459 | ```javascript
460 | // Al inicio de la clase
461 | private JButton bEntrar, bCerrar, bRegistrarse, bOpcion1, bOpcion2, bOpcion3;
462 | ```
463 |
464 | * **Ejemplificación, configuración y adición**
465 | ```javascript
466 | // Dentro del constructor
467 | bCerrar = new JButton("X");
468 | bCerrar.setBounds(330, 10, 45, 30);
469 | bCerrar.setFocusable(false);
470 | bCerrar.setBackground(Color.BLUE);
471 | bCerrar.setForeground(Color.WHITE);
472 | pDerecha.add(bCerrar);
473 |
474 | bRegistrarse = new JButton("Registrarse");
475 | bRegistrarse.setBounds(230, 420, 145, 35);
476 | bRegistrarse.setFocusable(false);
477 | bRegistrarse.setBackground(Color.BLUE);
478 | bRegistrarse.setForeground(Color.WHITE);
479 | pDerecha.add(bRegistrarse);
480 |
481 | bOpcion1 = new JButton();
482 | bOpcion1.setBounds(10, 220, 30, 20);
483 | pIzquierda.add(bOpcion1);
484 |
485 | bOpcion2 = new JButton();
486 | bOpcion2.setBounds(10, 250, 30, 20);
487 | pIzquierda.add(bOpcion2);
488 |
489 | bOpcion3 = new JButton();
490 | bOpcion3.setBounds(10, 280, 30, 20);
491 | pIzquierda.add(bOpcion3);
492 | ```
493 |
494 | y la interfaz se ve ahora así:
495 |
496 |
453 | Interfaz login de usuario con los nuevos objetos añadidos
454 |
497 | 
498 |
500 |
501 | ## JCheckButton
502 |
503 | Los CheckButton normalmente son usados para cubrir estados de varias opciones, puede utilizar varios enfoques:
504 |
505 | - Elección multiple de opciones
506 | - Elección de una sola opción.
507 |
508 | * **Declaración**
509 | ```javascript
510 | // Al inicio de la clase
511 | private JCheckBox checkSi, checkNo;
512 | ```
513 |
514 | La variable (objeto) que se coloca para los JCheckButton empezará con check en minúscula seguido del nombre de la variable.
515 |
516 | * **Ejemplificación**
517 | ```javascript
518 | // Dentro del constructor
519 | checkSi = new JCheckBox("Si");
520 | checkNo = new JCheckBox("No");
521 | ```
522 |
523 | * **Configuración**
524 | ```javascript
525 | // Dentro del constructor
526 | checkSi.setSize(45, 25);
527 | checkSi.setFocusable(false);
528 | checkSi.setBackground(Color.WHITE);
529 | checkSi.setLocation((pDerecha.getWidth() - checkSi.getWidth()) / 2 - 15, 345);
530 |
531 | checkNo.setSize(45, 25);
532 | checkNo.setFocusable(false);
533 | checkNo.setBackground(Color.WHITE);
534 | checkNo.setLocation((pDerecha.getWidth() + checkNo.getWidth()) / 2 - 15, 345);
535 | ```
536 |
537 | * **Adición**
538 | ```javascript
539 | // Dentro del constructor
540 | pDerecha.add(checkSi);
541 | pDerecha.add(checkNo);
542 | ```
543 |
544 | En la aplicación se quiere tomar el enfoque de única opción, sin embargo al correr el app, es posible notar que se pueden seleccionan las dos opciones al tiempo.
545 |
546 |
498 | Interfaz login de usuario, con adición de mas botones
499 |
547 | 
548 |
550 |
551 | Para obtener el enfoque de única opción se debe utilizar el siguiente objeto.
552 |
553 | ## ButtonGroup
554 |
555 | Este es un objeto gráfico auxiliar que nos ayuda a agrupar objetos en un contexto y realizar acciones con esta agrupación. Es usado en la mayoría de casos para realizar un enfoque de única respuestas con los objetos de CheckButton o RadioButton. Este al ser un objeto Auxiliar (no tiene representación gráfica) no será necesario adicionarlo en ningún componente.
556 |
557 | * **Declaración**
558 | ```javascript
559 | // Al inicio de la clase
560 | private ButtonGroup grupo;
561 | ```
562 |
563 | La variable (objeto) que se coloca para los ButtonGroup empezará con grupo en minúscula seguido del nombre de la variable. En este caso al haber solo un ButtonGroup solo pondremos la palabra clave.
564 |
565 | * **Ejemplificación**
566 | ```javascript
567 | // Dentro del constructor
568 | grupo = new ButtonGroup();
569 | ```
570 |
571 | * **Configuración**
572 |
573 | ```javascript
574 | // Dentro del constructor
575 | grupo.add(checkSi);
576 | grupo.add(checkNo);
577 | ```
578 |
579 | En la configuración es donde se van añadir los botones que pertenecen a un mismo contexto para que se pueda seleccionar una única opción. Al correr la aplicación se puede comprobar lo anterior dicho.
580 |
581 | ## JRadioButton
582 |
583 | Los RadioButton cumplen la misma función que los checkButton, es cuestión del desarrollador cual de los dos quiera usar. De nuevo, tienen los enfoques de múltiples opciones o única opción utilizando un buttonGroup.
584 |
585 | En este caso la interfaz no tendrá RadioButtons pero a continuación se muestra un ejemplo para su creación.
586 |
587 | * **Declaración**
588 | ```javascript
589 | // Al inicio de la clase
590 | private JRadioButton rbOpcion1, rbOpcion2;
591 | ```
592 |
593 | La variable (objeto) que se coloca para los JRadioButton empezará con rb en minúscula seguido del nombre de la variable.
594 |
595 | * **Ejemplificación**
596 | ```javascript
597 | // Dentro del constructor
598 | rbOpcion1 = new JRadioButton("opcion1");
599 | rbOpcion2 = new JRadioButton("opcion2");
600 | ```
601 |
602 | * **Configuración**
603 | ```javascript
604 | // Dentro del constructor
605 | rbOpcion1.setBounds(50, 400, 120, 30);
606 | rbOpcion2.setBounds(200, 400, 120, 30);
607 | ```
608 |
609 | * **Adición**
610 | ```javascript
611 | // Dentro del constructor
612 | pIzquierda.add(rbOpcion1);
613 | pIzquierda.add(rbOpcion2);
614 | ```
615 |
616 | ## JTextArea
617 |
618 | Un objeto gráfico textArea expande un poco el concepto de los textField ya que soporta una mayor cantidad de texto y esta diseñado para recibir grandes cantidades de texto. A continuación se muestra una breve explicación de su creación ya que esta tampoco hará parte de esta interfaz:
619 |
620 | * **Declaración**
621 | ```javascript
622 | // Al inicio de la clase
623 | private JTextArea taSugerencias;
624 | ```
625 |
626 | La variable (objeto) que se coloca para los JTextArea empezará con ta en minúscula seguido del nombre de la variable.
627 |
628 | * **Ejemplificación**
629 | ```javascript
630 | // Dentro del constructor
631 | taSugerencias = new JTextArea("Escribe algo...");
632 | ```
633 |
634 | * **Configuración**
635 | ```javascript
636 | // Dentro del constructor
637 | taSugerencias.setBounds(185, 180, 230, 140);
638 | ```
639 |
640 | * **Adición**
641 | ```javascript
642 | // Dentro del constructor
643 | pIzquierda.add(taSugerencias);
644 | ```
645 |
646 | Si se añaden estos componentes la interfaz se vería algo así:
647 |
648 |
548 | CheckBox con múltiple opción
549 |
649 | 
650 |
652 |
653 | Sin embargo como se dijo anteriormente estos dos objetos gráficos no harán parte de esta interfaz asi que por ahora se comentarán estas partes en el código.
654 |
655 | # Resultado
656 |
657 |
650 | Interfaz login de usuario con adición de JTextArea y JRadioButton
651 |
658 | 
659 |
661 |
662 | Este es el resultado del Login de usuario, hasta el momento se aprendió la configuración de objetos básicos y como mostrarlos en pantalla. En la siguiente sesión se verá la creación de objetos decoradores para hacer que la interfaz se vea mucho mas agradable a la vista del usuario.
663 |
664 | # Actividades
665 |
666 | Realizar un Login diferente al propuesto en clase, el login de usuario que se vaya a realizar sera parte del proyecto final asi que puede ser buena idea pensar como sería el login de acuerdo a la aplicación escogida como proyecto.
667 |
--------------------------------------------------------------------------------
659 | Interfaz login de usuario, resultado Final
660 |