Programación Visual

Lo estabais deseando ...

No, mejor.

VENTANAS!!!

Tipos de elementos

  • Podemos dividir las ventanas en dos tipos distintos de elementos:
    • Componente: cualquier elemento gráfico que puede aparecer en un GUI (Graphica User Interface).
    • Contenedor: elemento gráfico que puede contener otros componentes dentro.
  • Tened en cuenta que un contenedor también es un componente.

Componentes

Algunos ejemplos

Contenedores

  • Algunos ejemplos de componentes:
    • Frame: Ventana tradicional.
    • Dialog: Ventana (normalmente en forma modal) que sirve para lanzar preguntas o advertencias al usuario. Depende de un Frame principal y no admite elementos como menús, barras de herramientas, ...

Contenedores

  • Algunos ejemplos de componentes:
    • Panel: Sirve para contener a otros componentes.

¿Y cómo se organiza todo esto?

Layouts

  • Son maneras predefinidas de colocar los controles y los componentes visuales.
  • En Java, los tipos que hay son los siguientes:
    • BorderLayout: distribuye los componentes en un máximo de cinco áreas: arriba, abajo, izquierda, derecha y centro. Mas información sobre cómo usarlo aquí.

Layouts

Tipos de layouts

  • BoxLayout: coloca los componentes en una sola fila o columna. Respeta tamaños máximos solicitados los componentes y también permite alinear los componentes. Mas información sobre cómo usarlo aquí.

Layouts

Tipos de layouts

  • CardLayout: permite implementar un área que contiene diferentes componentes en diferentes momentos. El CardLayout menudo se controla mediante un cuadro combinado determinando en qué panel (grupo de componentes) se muestra. Una alternativa al uso CardLayout es utilizar un panel con separadores (tabbed pane), que proporciona una funcionalidad similar pero con una interfaz gráfica de usuario predefinido. Mas información sobre cómo usarlo aquí.

Layouts

Tipos de layouts

  • FlowLayout: es el controlador por defecto para cada JPanel. Simplemente establece los componentes en una sola fila, comenzando una nueva fila si su contenedor no es lo suficientemente amplia. Mas información sobre cómo usarlo aquí.

Layouts

Tipos de layouts

  • GridBagLayout: es un sofisticado y flexible controlador de distribución. Alinea componentes colocándolos dentro de una cuadrícula de las células, lo que permite a los componentes abarcan más de una celda. Las filas de la cuadrícula pueden tener diferentes alturas, y columnas de la cuadrícula pueden tener diferentes anchuras. Mas información sobre cómo usarlo aquí.

Layouts

Tipos de layouts

  • GridLayout: simplemente hace un montón de componentes iguales en tamaño y los muestra en el número solicitado de filas y columnas. Mas información sobre cómo usarlo aquí.

Layouts

Tipos de layouts

  • GroupLayout: fue desarrollado para el uso de herramientas de la GUI Builder, pero también se puede utilizar de forma manual. GroupLayout trabaja con los diseños de horizontal y vertical por separado. La disposición se define independientemente para cada dimensión. Sin embargo, necesita ser definido dos veces en el diseño de cada componente. Mas información sobre cómo usarlo aquí.

Layouts

Tipos de layouts

  • SpringLayout: es un gestor de diseño flexible, diseñado para su uso por los constructores GUI. Esto le permite especificar las relaciones precisas entre los bordes de los componentes bajo su control. Por ejemplo, es posible definir que el borde izquierdo de un componente es una cierta distancia (que se puede calcular de forma dinámica) desde el borde derecho de un segundo componente. SpringLayout establece los hijos de su contenedor correspondiente de acuerdo a un conjunto de restricciones. Mas información sobre cómo usarlo aquí.

Layouts

Algunos consejos para la creación de layouts

  • Escenario: necesitas mostrar un componente ocupando todo el espacio que se puede conseguir.
    • Si sólo tienes contenedor, utilizar GridLayout o BorderLayout. De lo contrario, BorderLayout o GridBagLayout puede ser una buena opción.
    • Si usas BorderLayout, tendrás que poner el componente que más espacio consuma en el centro.
    • Con GridBagLayout, tendrás que establecer las restricciones para el componente usando fill=GridBagConstraints.BOTH.
    • Otra posibilidad es utilizar BoxLayout, especificando tamaños preferidos muy grandes o máximos para el componente que más espacio requiera.

Layouts

Algunos consejos para la creación de layouts

  • Escenario: necesitamos mostrar unos pocos componentes en una fila compacta en su tamaño natural.
    • Considere el uso de un JPanel para agrupar los componentes y el uso de uno de FlowLayout o BoxLayout por defecto del JPanel .
    • SpringLayout también es bueno para esto.

Layouts

Algunos consejos para la creación de layouts

  • Escenario: necesitamos mostrar unos pocos componentes del mismo tamaño en filas y columnas.
    • GridLayout es perfecto para esto.

Layouts

Algunos consejos para la creación de layouts

  • Escenario: diseño complejo con muchos componentes.
    • Considerar ya sea usando un gestor de diseño muy flexible, tal como GridBagLayout o SpringLayout.
    • Otra opción es la agrupación de los componentes en uno o más JPanels para simplificar la disposición. Si se toma el último enfoque, cada JPanel podría usar un gestor de diseño diferente.

¿Y qué librerías hay en Java para crear ventanas?

Librería AWT

Abstract Window Toolkit

  • Librería que define un conjunto de clases e interfaces Java que permiten la construcción de interfaces gráficas de usuario
  • También permite la gestión de los eventos generados por esas interfaces
  • AWT es independiente de plataforma.
  • Los elementos básicos son:
    • Contenedores: Clase java.awt.Container
    • Componentes: Clase java.awt.Component

Librería AWT

Componentes

  • Todas las clases derivan de java.awt.Component
  • Algunos ejemplos:
    • Botones: java.awt.Button
    • Campos de texto: java.awt.TextField
    • Etiquetas: java.awt.Label
    • Listas: java.awt.List
    • Elementos de selección múltiple y exclusiva: java.awt.Checkbox

Librería AWT

Componentes. Algunos ejemplos

  • Label:
    • Constructores
            // Etiqueta vacía
            Label lEtiqueta = new Label();
            // Etiqueta con texto predeterminado
            Label lEtiqueta = new Label("Nombre: ");
            // Etiqueta con texto predeterminado y determinada propiedad
            Label lEtiqueta = new Label("Nombre: ", Label.CENTER);
                              

Librería AWT

Componentes. Algunos ejemplos

  • Button:
    •       // Constructor
            Button bAceptar = new Button();
            // Cambiar el label
            Button bAceptar.setLabel("Aceptar");
            // Hacer visible un botón
            bAceptar.setVisible(true);
            // Activar o desactivar un botón
            bAceptar.setEnabled(true);
                              

Librería AWT

Componentes. Algunos ejemplos

  • TextField:
    •       // Constructor
            TextField tCampo = new TextField("Salutaciones, mutante");
            // Obtener el texto de un campo
            tCampo.getText();
            // Configurar el tamño de una caja de texto.
            tCampo.setColumns(30);
                              

Librería AWT

Contenedores

  • Todas las clases derivan de java.awt.Container
  • Algunos ejemplos:
    • Venta: java.awt.Frame
    • Dialogo: java.awt.Dialog
    • Panel: java.awt.Panel

Librería AWT

Contenedores. Algunos ejemplos

  • Ventana:
    •       // Constructor
            Frame vPrincipal = new Frame();
            vPrincipal.setTitle("Titulo de la ventana");
            // Añadir botones
            vPrincipal.add(new Button("Aceptar"));
            vPrincipal.add(new TextField(20));
            // Crear un panel
            Panel pPrincipal = new Panel();
            pPrincipal.add(new Label("Soy una etiqueta."));
            // Y lo añadimos a la ventana
            vPrincipal.add(pPrincipal);
                              

Librería AWT

Contenedores.

  • Normalmente no se trabaja con ventanas por defecto.
  • Lo que se hace es crear las nuestras y configurarlas.
    • Se crea una clase y se la hace derivar de la clase Frame.
    • Con esto creamos una clase que es una ventana pero que está vacía.
    • Se le añaden todos los componentes que queramos que tenga nuestra ventana.
  • Para configurar un layout determinado a un contenedor.
                        <contenedor>.setLayout(<layout>)
                      

Librería SWING

  • Versión mejorada de AWT.
  • Soluciona algunos problemas de AWT
  • Mejora el aspecto y la portabilidad de las interfaces.

Librería SWING

Principales diferencias con AWT

  • Incorpora nuevas versiones de todos los componentes de de AWT (JFrame, JButton, JLabel, etc.).
  • Cada ventana (JFrame) posee un elemento interno que es sobre el que se añaden los componentes y no sobre la propia ventana:
    • Para acceder a este panel:
                          ventana.getContentPane();
                            
    • Para insertar componentes en una ventana:
                          ventana.getContentPane().add(new JButton());
                          ventana.getContentPane().add(new JPanel());
                            
  • Mejora el aspecto y la portabilidad de las interfaces.

Componentes

Como es la estructura de las clases

¿Preparados para hacer
VENTANAS ?

Referencias