Interfaz Gráfica en Java

Curso propuesto por el grupo de trabajo Semana de Ingenio y Diseño (SID) de la Universidad Distrital Francisco Jose de Caldas.

Monitor

Cristian Felipe Patiño Cáceres - Estudiante de Ingeniería de Sistemas de la Universidad Distrital Francisco Jose de Caldas

Clase 12

Objetivos

• Reconocer la forma para realizar animaciónes de movimiento dentro de nuestro proyecto para adicionar interactividad a las interfaces de usuario o mostrar información adicional que el usuario requiera.
• Identificar algunos factores importantes que intervienen cuando se realizan animaciónes como los objetos y eventos que intervienen.
• Explicar algunas particularidades clave a la hora de usar animaciones que son importantes para el buen funcionamiento.
• Explorar varios enfoques para realizar una misma animación pero en distintas formas.

Antes de Comenzar

Para continuar con el ejercicio deberá actualizar la carpeta resources/img ya que se han agregado nuevas imágenes. Estas las puede descargar en este mismo repositorio entrando a la carpeta Clase12 seguido de resources/img.

Recordando un poco nuestro recorrido en la clase anterior revisamos el uso de tablas para gestionar información, entre otras cosas se mostró Las principales partes para la creación de una tabla, Los métodos de gestión de información dentro de tablas, Personalización de tablas.

Uso de animaciones

Esta sesión tratará el tema de animaciones de movimiento sobre nuestras interfaces y para la explicación e implementación de estas se verán 4 items:

• Animaciones para Interactividad.
  • Particularidades con las animaciones.
• Animaciones para muestra de información.
  • Enfoques de animación.

Animaciones para Interactividad

En muchos casos nos interesa crear animaciones para darle un toque extra de interactividad a nuestras interfaces de usuario, las animaciones pueden capturar la atención de nuestros usuario y hacen de la visibilidad una experiencia bastante agradable. Para crear animaciones dentro de nuestro proyecto vamos a enfocarnos una vez mas en nuestro Login y vamos a darle uso a los tres botones que tiene nuestro login en su parte izquierda:

Lo que queremos es que una vez se oprima alguno de estos botones se muestre una nueva imagen en el Login:

Pero para no hacer que esta desaparezca de golpe una vez se muestre la siguiente imágen podemos utilizar Animaciones, de esta forma podemos hacer que se mueva a la izquierda la imagén actual y asi la nueva imagen pueda verse en pantalla. Para realizar esto antes debemos hacer algunos preparativos.

Preparativos para realizar la animación.

Como vamos a añadir otras dos imágenes (para la segunda y tercera opción) vamos a crear los objetos ImageIcon de estas dentro de nuestra clase LoginTemplate. También vamos a añadir una nueva imagen para los botones de las opciones la cual representará cual de las 3 opciones esta siendo seleccionada.

• Declaración:

private ImageIcon iPunto2, iSvg2, iSvg3;

• Ejemplificación:

// Dentro del método crearObjetosDecoradores
iSvg2 = new ImageIcon("Clase12/resources/img/imagen2.png");
iSvg3 = new ImageIcon("Clase12/resources/img/imagen3.png");
iPunto2 = new ImageIcon("Clase12/resources/img/punto2.png");

Para que las nuevas imágenes puedan ser vistas vamos a declarar por ahora los Labels correspondientes que contendrán estas imágenes:

• Declaración:

private JLabel lSvg2, lSvg3;

Como queremos que haya un movimiento de las tres imágenes una vez se oprima alguno de los tres botones, debemos hallar una forma optimizada de mover las 3 imágenes al tiempo, ya que tendría mas esfuerzo y código codificar el movimiento de cada una de las imágenes cada vez que se oprima alguno de los 3 botónes. Para esto vamos a crear un panel que contendrá estas imágenes y asi realizaremos el movimiento hacia el panel haciendo el efecto de que se moverán las 3 imágenes al tiempo.

Declaración:

private JPanel pSvg;

Construcción y adición:

// Dentro del método crearJPanels
pSvg = sObjGraficos.construirJPanel(
    100, 100, 1700, 345, new Color(0, 0, 0, 0), null
);
pIzquierda.add(pSvg);

Note algo importante, el color de fondo que le hemos configurado es un color rgba o transparente ya que tiene 4 argumentos, todos en 0, esto quiere decir que el color sera "negro" pero totalmente transparente, ya que el ultimo argumento Alfa esta en 0 (transparencia total), caso contrario es un color solido el cual debería tener 255 en ese argumento. También podemos notar que el panel no se esta agregando directamente a la ventana sino al panel pIzquierda. Además hay que recalcar su tamaño, ya que su ancho es bastante grande, esto para contener las 3 imágenes, sin embargo solo será visible una parte de este en pantalla.

Allí vamos a dejar nuestros Labels que contienen las imágenes Svg así que eso realizaremos:

// Dentro del método crearJLabels

//LABEL SVG-----------------------------------------------------------------------------
iDimAux = new ImageIcon(
    iSvg.getImage().getScaledInstance(500, 345, Image.SCALE_AREA_AVERAGING)
);
lSvg= sObjGraficos.construirJLabel(null, 0, 0, 500, 345, iDimAux, null, null, null, "c");
pSvg.add(lSvg);

//LABEL SVG 2-----------------------------------------------------------------------------
iDimAux = new ImageIcon(
    iSvg2.getImage().getScaledInstance(500, 345, Image.SCALE_AREA_AVERAGING)
);
lSvg2= sObjGraficos.construirJLabel(null, 600, 0, 500, 345, iDimAux, null, null, null, "c");
pSvg.add(lSvg2);

//LABEL SVG 3-----------------------------------------------------------------------------
iDimAux = new ImageIcon(
    iSvg3.getImage().getScaledInstance(500, 345, Image.SCALE_AREA_AVERAGING)
);
lSvg3= sObjGraficos.construirJLabel(null, 1200, 0, 500, 345, iDimAux, null, null, null, "c");
pSvg.add(lSvg3);

Para el Label lSvg se agrego ahora al nuevo panel pSvg y ya no directamente al panel pDerecha, también se cambio las coordenadas de posición, los otros dos label se agregaron al mismo panel.

Vamos ahora a cambiar la imagen del primer botón por la imágen que indica que esta opción esta seleccionada ya que por defecto la primera opción ya esta seleccionada (La primera imagen ya se esta mostrando). Para los demás botones dejaremos la imagen que tenían originalmente pero le agregaremos la escucha de eventos ActionListener ya que esta solo la tenía el primer botón.

// Dentro del método crearJButtons
iDimAux = new ImageIcon(
    iPunto2.getImage().getScaledInstance(20, 20, Image.SCALE_AREA_AVERAGING)
);

//BOTÓN OPCIÓN 1-----------------------------------------------------------------------------
bOpcion1 = sObjGraficos.construirJButton(
    null, 10, 220, 30, 20, sRecursos.getCMano(), iDimAux, null,
    null, null, null, "c", false
);
bOpcion1.addActionListener(loginComponent);
pIzquierda.add(bOpcion1);

iDimAux = new ImageIcon(
    iPunto.getImage().getScaledInstance(20, 20, Image.SCALE_AREA_AVERAGING)
);

//BOTÓN OPCIÓN 2-----------------------------------------------------------------------------
bOpcion2 = sObjGraficos.construirJButton(
    null, 10, 250, 30, 20, sRecursos.getCMano(), iDimAux, null,
    null, null, null, "c", false
);
bOpcion2.addActionListener(loginComponent);
pIzquierda.add(bOpcion2);

//BOTÓN OPCIÓN 3-----------------------------------------------------------------------------
bOpcion3 = sObjGraficos.construirJButton(
    null, 10, 280, 30, 20, sRecursos.getCMano(), iDimAux, null,
    null, null, null, "c", false
);
bOpcion3.addActionListener(loginComponent);
pIzquierda.add(bOpcion3);

Nuestra aplicación se ve de la siguiente manera:

Por ahora el único cambio visible esta en el primer botón de opciones ya que resalta en naranja. Las otras imágenes ya están añadidas al panel pSvg pero como comentamos solo se esta viendo una parte de este panel.

Ahora vamos a crear algunos métodos get.

Como vamos a manipular la posición del panel pSvg vamos a necesitar obtenerlo desde la clase loginComponent:

public JPanel getPSvg(){
    return this.pSvg;
}

Como vamos a cambiar la imagen dentro de cada botón una vez se seleccione y poner la imagen original en los botones que no están seleccionados vamos a necesitar estas dos imágenes en la clase Component, para que no ocurran problemas con las dimensiones de estas las vamos a retornar rescaldas de una vez:

public ImageIcon getIPunto(){
    iDimAux = new ImageIcon(
        iPunto.getImage().getScaledInstance(20, 20, Image.SCALE_AREA_AVERAGING)
    );
    return iDimAux;
}

public ImageIcon getIPunto2(){
    iDimAux = new ImageIcon(
        iPunto2.getImage().getScaledInstance(20, 20, Image.SCALE_AREA_AVERAGING)
    );
    return iDimAux;
}

Ahora vamos a devolver los 3 botones de las opciones, ya habíamos creado el get del primero, para no realizar un método para cada uno y por motivos de la codificación posterior vamos a modificar el método que ya teníamos de tal forma que reciba como parámetro un entero que representara cual botón requiere y mediante if vamos a retornar el que necesitemos:

public JButton getBOpcion(int boton){
    if(boton == 1)
        return this.bOpcion1;
    if(boton == 2)
        return this.bOpcion2;
    if(boton == 3)
        return this.bOpcion3;
    return null;
}

Por ultimo vamos a prevenir un futuro conflicto que tiene que ver con el eje Z y es que si recordamos un poco el panel que contiene las imágenes se agrego dentro del método crearJPanels y por otro lado los botónes de opciones se agregaron dentro del método crearJButtons. La creación de los paneles se llama dentro del constructor antes de la creación de los botones, esto inicialmente no crea ningún conflicto ya que el panel pSvg esta en la posición 100px de nuestro panel pIzquierda mientras que los botones bOpcion están en la posición 10px del mismo, pero una vez se mueva el panel pSvg hacia la izquierda para crear la animación este va a situarse por encima de los botones haciendo que las imágenes los tapen mientras pasan sobre ellos y ademas no se podrán seleccionar mas ya que estarán detrás del panel. Para arreglar esta situación vamos a sacar la agregación de este ultimo panel (pSvg) del método de crearJPanels y lo vamos añadir dentro del constructor justo después de la creación de los botones pero justo antes de la creación de los labels:

Creando la animación.

Vamos a concentrarnos en la clase LoginComponent lo primero que vamos a hacer es declarar tes atributos que nos serán útiles para realizar la animación:

private int estado = 1, estadoAnterior = 0, direccion = -1;

• estado: El estado nos va a indicar cual es el botón que actualmente ha sido seleccionado y asi podremos cambiar la imagen por el aspecto naranja al botón que se selecciono y ademas que imágen debe mostrar, por defecto esta en 1 ya que el primer boton esta seleccionado y la primera imagen se esta mostrando una vez inicia la aplicación.
• estadoAnterior: El estado anterior nos va a indicar cual era el