 |
AWT |
| Inicio | Cursos infosintesis.net liberados | Java SE | Selector de colores | |
| Selector de colores | |
| Paso 4: Operativa |
Implementar el Gestor de Organización GridBagLayout
Además de los Gestores de Organización BorderLayout y FlowLayout también hay otro Gestor de Organización que se utiliza muy a menudo que se llama GridBagLayout.
ventana Inspector
![NetBeans 6 - Design | Inspector | pnlCentro [Panel] | Set Layout | GridBagLayout](images/netbeansGridBagLayout -a.png)
Ahora ya podemos ir insertando los diferentes componentes en el panel del centro tal y como insertamos los botones en el Paso 1.
Primero insertamos tres componente Label y les damos los siguientes nombres a su variable de referencia:
Después cambiamos el texto que mostrarán, modificando la propiedad text en la ventana Properties
Ahora hacemos clic con el botón derecho del ratón y elegimos Customize Layout...
con el ratón desplazamos los dos label verde y azul debajo del label rojo
Para salir de este cuadro de diálogo hacemos clic sobre el botón 
Ahora insertamos un componente Scrollbar que se va a llamar scbRojo y modificamos las siguientes propiedades de este nuevo componente:
de la misma forma que hemos insertado el componente Scrollbar rojo vamos a insertar los Scrollbar verde y azul con las variables de referencia scbVerde y scbAzul. También modificamos las mismas propiedades con los mismos valores.
Así es como han quedado situados los componentes Scrollbar después de haber realizado estos últimos cambios
de la misma forma que anteriormente con el ratón hemos desplazado los dos label verde y azul debajo del label rojo ahora vamos a desplazar los dos Scrollbar verde y azul debajo del Scrollbar rojo.
Ahora añadimos un componente TextField con el nombre de variable de referencia txfRojo y seguidamente cambiamos el texto que mostrará cuando arranquemos la aplicación modificando la propiedad text en la ventana Properties dándole valor 255.
de la misma forma que hemos insertado el campo de texto rojo vamos a insertar los campos de texto verde y azul con las variables de referencia txfVerde y txfAzul. También modificamos la propiedad text con el mismo valor.
Ahora desplazamos los dos campos de texto verde y azul debajo del campo de texto rojo.
Si ejecutamos la aplicación podemos ver el siguiente resultado
como podemos observar al agrandar el marco (Frame) de la aplicación el panel centro ha crecido pero los componentes del panel centro siguen teniendo los mismos tamaños y están muy pegados los unos de los otros.
Para conseguir que las barras de desplazamiento crezcan horizontalmente cuando el marco se agranda tenemos que seleccionar las tres barras de desplazamiento y modificar las siguientes propiedades:
De esta forma estamos indicando que cuando el marco se agranda, las barras de desplazamiento se agrandan al 100%. A partir de aquí se podrían hacer todas las combinaciones que quisiéramos. Es decir si nos interesara que las etiquetas se agrandaran un 25%, las barras de desplazamiento un 50% y los campos de texto otro 25% entonces las propiedades Weight valdrían 0.25, 0.50 y 0.25 repsectivamente.
Si ejecutamos la aplicación podemos ver el siguiente resultado
Ahora vamos a conseguir que los componentes no estén tan pegados entre ellos y tan pegados a su vez a las paredes del marco. Vamos a seleccionar los tres campos de texto y vamos a hacer clic sobre el botón con puntos suspensivos de la propiedad Insets. en el cuadro de diálogo que nos aparece escribimos el valor 10 a la propiedad Left y el valor 10 a la propiedad Right.
para que las barras de desplazamiento también tengan un espacio de 10 pixels con relación a las etiquetas volvemos a hacer clic sobre el botón con puntos suspensivos de la propiedad Insets. en el cuadro de diálogo que nos aparece escribimos el valor 10 a la propiedad Left.
Y finalmente para que las etiquetas tengan una separación de 10 pixels respecto a la pared izquierda del marco volvemos a hacer clic sobre el botón con puntos suspensivos de la propiedad Insets. en el cuadro de diálogo que nos aparece escribimos el valor 10 a la propiedad Left.
![NetBeans 6 - Design | GridBagLayout Customizer | Insets [0, 10, 0, 0]](images/netbeansGridBagLayout -j.png)
Si ejecutamos la aplicación podemos ver el siguiente resultado
Como al arrancar la aplicación el fondo es de color blanco y la combinación de los tres valores de los campos de texto (255, 255, 255) indican que el color de fondo del panel centro tiene que ser blanco, también se lo vamos a indicar a las tres barras de desplazamiento. Para ello seleccionamos las tres barras de desplazamiento y en la ventana Properties indicamos que la propiedad value tiene valor 255.
