Crearemos una aplicación de contexto gráfico: corresponde a la creación de una Paleta de Colores como la ilustrada en la figura siguiente; el panel de la izquierda toma el color que se obtenga de la combinación (Rojo, Verde, Azul), donde cada color aporta con un “VALOR” entre 0 y 255, seleccionado con deslizadores.
CREANDO EL PROYECTO
Creamos un PROYECTO nuevo el cual en este caso, lo llamaremos ColoresFormulario pero sin ninguna clase (sin main) así:
SIN clase principal
Ya está listo nuestro proyecto, la creación tendrá que ser visualizada de esta manera:
Ahora, vamos a empezar con nuestra aplicación, dando click derecho sobre el nombre del proyecto seleccionaremos el menú nuevo y luego Formulario JFrame, así:
Le damos el respectivo nombre a la clase, en este caso la llamaremos paletaColores y click en Terminar, así:
Luego de realizar ese paso, la pantalla tendrá este aspecto:
La ventana donde se despliega el código fuente está en modo Diseño o Design. Si se selecciona Fuente o Source la ventana toma el siguiente aspecto:
CONSTRUIR LA INTERFAZ GRÁFICA DE LA APLICACIÓN 1. Regresar en el IDE al modo Diseño. De aquí en adelante es donde realmente se logra dimensionar la potencialidad del IDE.
2. En el panel de navegación seleccionar Inspector (parte inferior izquierda). Ese panel adopta el siguiente aspecto:
3. A continuación se procederá a pegarle controles y paneles al JFrame. Para esto es necesario primero asignarle un administrador de diseño., entonces Ubicamos el cursor en la etiqueta [JFrame], hacemos click en el botón derecho del ratón y seleccionamos el menú Activar gestor de distribución. Se desplegará un popmenú, allí escogeremos como administrador de diseño el ítem Diseño de Rejilla (GridLayout), así:
Este administrador de diseño (GridLayout) pegará los elementos en este JFrame en compartimientos de un arreglo matricial. En este ejemplo se pegará dos JPanel en un arreglo de una fila y dos columnas. Un JPanel se ubicará en el compartimiento (0, 0) y el otro en el (0, 1). Para ello es necesario cambiarle las propiedades a GridLayout. Ubique el cursor en la etiqueta GridLayout, haga clic en el botón derecho del ratón y se desplegará un popmenú. Escoger el item Propiedades. Se desplegará la siguiente ventana: En columnas pondremos 2 y en filas 1, así:
Cerramos la anterior ventana y Ya se procederá a pegar los dos JPanel. Ubicar el cursor en la etiqueta [JFrame] y hacer clic en el botón derecho del ratón. Se despliega un popmenú. Escoger Añadir de paleta> Contenedores Swing > Panel. Ya quedó pegado el primer JPanel. Repetir los mismos pasos para pegar el segundo JPanel.
En este momento el panel Inspector debe tener la siguiente forma:
Para darle más legibilidad al código fuente es aconsejable cambiar los nombres de las variables por nombres fáciles de interpretar. Por ejemplo, la variable jPanel1 se cambiará por el nombre jpanel_pantalla_despliegue_colores, y la variable jPanel2 se cambiará por el nombre jpanel_controles. Para lograr esto se debe ubicar el cursor primero en la etiqueta jPanel1 y hacer click en el botón derecho del ratón. Se despliega un popmenú. Escoger Cambiar Nombre De Variable …. Se despliega la siguiente ventana: Para evitar errores, copiar y pegar el nombre planteado
aquí
Allí escribiremos los correspondientes nombres acordados en el paso anterior para cada jpanel. Ahora el panel inspector quedará así:
En el siguiente paso se agregarán tres JPanel al panel jpanel_controles. Escoger como administrador de diseño un GridLayout de 3 filas y 1 columna. Recordar ubicar el cursor en la etiqueta jpanel_controles y hacemos click en el botón derecho del ratón y seleccionamos el menú Activar gestor de distribución. Se desplegará un popmenú, allí escogeremos como administrador de diseño el ítem Diseño de Rejilla (GridLayout) y modificando las propiedades del mismo, dejaremos 3 filas y 1 columna como lo hicimos en uno de nuestros pasos anteriores. Así: (pag siguiente)
El aspecto que debe tener el panel Inspector es el siguiente:
Para agregarle el primer JPanel a jpanel_controles, ubicar el cursor sobre él (sobre su etiqueta), hacer clic en el botón derecho del ratón y en el popmenú que se despliega escoger, Añadir de paleta> Contenedores Swing > Panel. Ya quedó pegado este primer panel. Repetir estos mismos pasos para adicionar los otros dos JPanel. El apecto del panel Inspector es:
Cambiar los nombres de las variables jPanel1, jPanel2, jPanel3 por jpanel_control_rojo, jpanel_control_verde, jpanel_control_azul. Para esto es necesario repetir los pasos que se siguieron para cambiar las variables jpanel_pantalla_despliegue_colores y jpanel_controles. En este momento el aspecto del panel Inspector es el siguiente:
A continuación se agregará a cada uno de los JPanel; jpanel_control_rojo, jpanel_control_verde y jpanel_control_azul, un JSlider (deslizador). Para esto a cada uno de ellos se le asigna un GridLayout (diseño de rejilla) de 1 fila y 1 columna (no olvide fijar las filas y las columnas en Propiedades de GridLayout) como administrador de diseño. El panel Inspector debe tener ahora el siguiente aspecto:
Proceder a pegar los deslizadores: ubicar el cursor en la etiqueta jpanel_control_rojo; hacer clic en el botón derecho del ratón. En el popmenú desplegado escoger Añadir de paleta> Controles Swing > Deslizador. Repetir los mismos pasos para pegar los JSlider de los paneles jpanel_control_verde y jpanel_control_azul. El aspecto del panel Inspector ya es el siguiente:
Proceda a cambiar los nombres de las variables jSlider1, jSlider2 y jSlider3 por jslider_control_rojo, jslider_control_verde y jslider_control_azul respectivamente. El aspecto de Inspector es ahora así:
El aspecto del panel Diseño es así:
PULIENDO EL DISEÑO: En el panel diseño hacer clic sobre el panel izquierdo (jpanel_pantalla_despliegue_colores). Como se observa en la siguiente figura se despliegan las propiedades de este panel (observar lo que se indica con la flecha). Aquí se podrá cambiar las propiedades, en este caso del panel seleccionado.
PROPIEDADES
Hacer clic en border, Se despliega la siguiente pantalla: allí escoger Borde con título y abajo, en la barra titulo; poner Despliegue de colores, cambiar el color y la fuente si se desea.
El diseño de la interfaz gráfica debe tener ya el siguiente aspecto:
Repetir los mismos pasos para los paneles jpanel_control_rojo, jpanel_control_verde y jpanel_control_azul, escribiendo “Rojo”, “Verde”y “Azul” respectivamente. El aspecto de la interfaz gráfica es ahora el siguiente:
Cambiar ahora las propiedades de los JSlider: ubicar el cursor en el primer JSlider y propiedades, Cambiar las siguientes propiedades: Major tick Spacing: 50 Maximum: 255 Minor tick Spcing: 10 paint labels: seleccionarla paint ticks: seleccionarla las otras se dejan por defecto así:
Repetir el mismo procedimiento sobre los otros dos JSlider. La apariencia de la interfaz gráfica ya es la siguiente:
Si se deslizan los controles, NADA PASA. Faltan los EVENTOS. Adicionar los Eventos de los JSlider
Ubicar el cursor sobre el primer JSlider (ver figura) y hacer clic sobre el botón derecho del ratón. Se despliega un popmenú Allí seleccionar Eventos > Change > stateChanged así:
NOTA: Verificar que el nombre de los objetos de nuestra aplicación sean exactamente iguales que los del código a pegar, si existe diferencia, arreglar!
Inmediatamente el cursor queda sumergido en el código fuente, así:
En ese sitio es donde se debe agregar el código que se debe ejecutar cuando sucede el deslizamiento del jslider_control_rojo. Agregar el siguiente código después de la línea de comentario, // TODO add your handling code here, o sobre ella. (el código a copiar y pegar es el siguiente “en amarillo”:
jpanel_pantalla_despliegue_colores.setBackground(new Color(jslider_control_rojo.getValue(),jslider_control_verde.getValue(),jslider_control_azul.getValue())); Al compilar el programa se despliega un error. Esto se debe a que se debe importar el paquete java.awt.* que trae las librerías del Color. Procer a agregar al principio del código de la clase paletaColores la siguiente instrucción: java.awt.*; Compilar le programa y ejecutarlo. Observar que al desliza el jSlider del rojo, el panel izquierdo cambia de tonalidades de rojo. Repetir el procedimiento para los otros dos jslider agregando el mismo código jpanel_pantalla_despliegue_colores.setBackground(new Color(jslider_control_rojo.getValue(),jslider_control_verde.getValue(),jslider_control_azul.getValue()));
Compile y ejecute. Acaba de elaborar una aplicación que reproduce los diferentes colores. Mejoramiento del programa Cuando el programa se ejecuta se observa que el panel que despliega el color no está inicializado en debida forma: no aparece con el color que debería tener para el estado inicial de los JSlider. Para corregir esto agregar el código que actualiza el color del panel dentro del método constructor de la aplicación y después de la línea de código, initComponents(), es decir: public PaletaColores() { initComponents(); jpanel_pantalla_despliegue_colores.setBackground(new Color(jslider_control_rojo.getValue(),jslider_control_verde.getValue(),jslider_control_azul.getValue())); }
Listo!!! Compilar y ejecutar.