CREANDO EL PROYECTO

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.

Creamos un PROYECTO nuevo el cual en este caso, lo llamaremos ColoresFormulario

pero sin ninguna clase (sin main) así:

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í:

SIN clase principal

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:

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)

Para evitar errores,

copiar y pegar el

nombre planteado

aquí

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 . Repetir los mismos pasos para pegar los paleta> Controles Swing > Deslizador

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.

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.

PROPIEDADES

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í:

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, , o sobre ella. (el código a copiar y pegar es // TODO add your handling code hereel 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.

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!