Diseño de interfaces gráficas en Java, Parte 4: Creación del Modelo de la aplicación

Primero la capa de datos

¡Saludos nuevamente!

En esta ocasión dejaremos un poco la parte de la presentación y nos enfocaremos en la creación de una pequeña lógica de negocio junto con el acceso a un sistema manejador de base de datos. Aunque podría parecer que me salgo del tema original relacionado con interfaces gráficas, considero que es importante tocar el punto en el que uniríamos el Modelo de la aplicación con la Vista y el Controlador, ya que es el punto al que finalmente se tiene que llegar en todo desarrollo de aplicaciones.

Para lograr este objetivo primero tenemos que considerar la comunicación horizontal de las capas de la aplicación, es decir la forma en que la información llegará desde la capa de acceso a datos hasta la capa de presentación. En el nivel más bajo tendremos un sistema manejador de bases de datos en que estará almacenada nuestra información, en este caso opte por el PostgreSQL, ya que es un gestor en el que apenas me estoy adentrando y nos servirá a todos los novatos para comenzar a dominar un nuevo administrador de base de datos.

Además es un SMBD open source rubusto y por si fuera poco, su mascota es un elefante, y todos sabemos que los elefantes son geniales.

Pueden descargar este sistema desde la sección downloads de la página oficial de PostgreSQL, eligiendo el sistema operativo de su preferencia.

Si descargan la versión para Windows notarán que además hay una aplicación visual de escritorio para administrar las base de datos en PostgreSQL, llamado pgAdmin. Esta aplicación viene incluida dentro del instalador de postgreSQL para este sistema operativo.

Dentro de las características de postgreSQL encontramos que:
- Es un manejador de base de datos dual al ser relacional y orientado a objetos, esto último es una características muy interesante ya que permite manejar conceptos como la herencia entre las tablas.
- Es un sistema multiusuario y multiplataforma.
- Soporta replicación.
- Nos permite utilizar un conjunto de datos complejos, como vectores, xml, figuras geométricas o arreglos, entre otros.
- Permite utilizar varios conceptos avanzados como llaves foráneas, constraints, vistas, transacciones y la propia herencia.
- Implementa un gran conjunto de instrucciones del lenguaje SQL.
- También permite implementar triggers en diferentes lenguajes de programación ajenos al lenguaje nativo procedimental.

La documentación completa de este sistema la encontraremos en la sección Documentation de la página oficial de la plataforma.

Para este ejemplo utilizaremos las funcionalidades estándar, como son crear una base de datos, crear una tabla, añadir registros y consultar.

Iniciando el servidor

Primero asegúrense de que el servidor de PostgreSQL está corriendo, en el caso de un escritorio de Windows pueden echarlo a andar desde Inicio > Todos los programas > PostgreSQL 8.4 > Start Server. Para un S.O. GNU/Linux en la consola de comandos pueden utilizar la instrucción:

#su -
 Ingresa tu contraseña de root
#service postgresql initdb
 Iniciamos por primera vez el cluster de postgreSQL
#service postgresql start
 Iniciamos el servicio de postgreSQL

Si hemos instalado el pgAmin en nuestro escritorio podemos realizar cada uno de los siguientes pasos a través de su interfaz gráfica. En caso contrario también podemos utilizar el Shell de PostgreSQL con los comando. Dentro de Windows pueden encontrar este Shell en Inicio > Todos los programas > PostgreSQL 8.4 > Shell, para Linux basta que desde la consola de comando tenemos que estar logeados como root (tal y como quedamos en el paso anterior) e ingresar los siguientes comandos:

#su - postgres
 Nos cambiamos a la cuenta del administrador de postgreSQL
#psql
 Entramos al Shell de postgreSQL

Creación de la base de datos

Crearemos una nueva base de datos llamada pruebas. Desde el Shell sería:

postgres=#CREATE DATABASE pruebas WITH OWNER = postgres;

Nota: El siguiente paso es solo necesario para los que esten utilizando el Shell:

Salimos del Shell

postgres=#\q

y volvemos a ingresar, con los pasos que vimos antes, solo que ahora debemos seleccionar la base de datos pruebas que recién creamos. Desde el Shell de Windows bastará con en los parámetros que nos pide capturar en un inicio:

Server [localhost]:
Database [postgres]: pruebas
Port [5432]:
Username[postgres]:

Dejando el resto de los campos sin cambio para que conserven los valores por defecto que se indican. Mientras que en Linux bastará con el comando :

#psql -d pruebas

desde la consola de comandos. Recuerden que tenemos que estar logeados como el usuario postgres.

Creación de la tabla

Ahora, creamos una nueva tabla para esta base de datos llamada usuario, con las características que se muestran en el script:

CREATE TABLE usuario
(
"correoElectronico" character varying(50) NOT NULL,
nombre character varying(60),
domicilio character varying(60),
edad integer,
telefono character varying(20),
CONSTRAINT correo PRIMARY KEY ("correoElectronico")
)
WITH (
OIDS=FALSE
);
ALTER TABLE usuario OWNER TO postgres;

Desde el pgAdmin la creación de tablas se hace accediendo a la base de datos y dentro de Schemas > public seleccionamos la opción New Object > New Table...

Inserción de los registros

Ahora, solo queda insertar algunos registros en la tabla para hacer las pruebas desde nuestra aplicación en Java:

INSERT INTO usuario(
          "correoElectronico", nombre, domicilio, edad, telefono)
  VALUES
  ('maria@gmail.com', 'María Rodríguez', 'Av. Libertadores #5464', 19, '(611)6766676'),
  ('antonio@gmail.com', 'Antonio Márquez', 'Misiones #786', 22, '(611)9898981'),
  ('estela@gmail.com', 'Estela Saldivar', 'Av. Ruta de la Seda #9004', 25, '1184564');

Controlador de PostgreSQL para Java

De esta forma la base de datos esta preparada para ser utilizada. Ahora solo tenemos que incluir en nuestro proyecto de Java el controlador para conectarse con bases de datos de PostgreSQL. Este lo pueden descargar desde la página oficial del proyecto PostgreSQL > JDBC Driver, el cual consiste en un archivo .jar que contiene una biblioteca de clases para implementar el acceso a las bases de datos de este servidor. Una vez descargado el archivo, para incluirlas en nuestro proyecto de Eclipse, bastará con que configuremos el Build Path del JRE System Library (biblioteca del sistema de JRE) del proyecto, haciendo clic derecho sobre el JRE System Library y seleccionando:

Y dentro de la ventana que aparece seleccionamos el botón "Add External JARs..." con lo cual podremos agregar el archivo .jar descargado a la lista de referencia del proyecto:

Si están utilizando el entorno de desarrollo diferente de Eclipse entonces pueden usar la herramienta que posea para agregar archivos JAR externos.

Si por el contrario, están compilando y probando todos los programas desde la consola de comandos, una solución será modificar el CLASSPATH del programa para incluir la referencia al archivo .jar. En la documentación de la biblioteca que encuentran en la misma página de PostgreSQL > JDBC Driver se especifican los pasos, pero para ahorrar un poco el trabajo sería más o menos así:

Como ejemplo, si tenemos un archivo fuente llamado myapp.jar que contiene la definición de la clase MyApp, este archivo se encuentra en /usr/local/lib/myapp.jar y la biblioteca .jar está en /usr/local/pgsql/share/java/postgresql.jar, la ejecución de la aplicación sería:

#export CLASSPATH=/usr/local/lib/myapp.jar:/usr/local/pgsql/share/java/postgresql.jar:.
#java MyApp

Todo desde la consola de comandos. Otra solución, -que me pareció más sencilla- la encontré en este blog, y consisten en copiar el archivo en el directorio de extensiones de JRE, es decir JRE\lib\ext. Por ejemplo, la ruta absoluta en mi S.O. Windows es C:\Archivos de programa\Java\jre6\lib\ext, y variará según el sistema operativo en el que estén trabajando.

Y con esta referencia ya estaremos listos para pasar a la programación de la aplicación en Java, pero debido a lo mucho que se extendió este post, esa parte quedará pendiente para el siguiente artículo.

Recuerden que para cualquier duda u observación pueden dejar un comentario en este y todos los otros artículos.

Hasta la próxima.

Diseño de interfaces gráficas en Java, Parte 3: Manejo de eventos

El manejo de eventos siempre estará bajo nuestro control

¡Saludos nuevamente blogueros!

La gestión o manejo de eventos en Java, es un mecanismo que podemos incluir en nuestros programas para reconocer las acciones realizadas por los usuarios en las interfaces gráficas, y programar una respuesta en consecuencia.

Algunos de los eventos comunes que nos encontramos en la interfaces son el hacer clic con el ratón sobre un botón o un elemento del menú, utilizar el menú contextual del ratón, o utilizar una combinación de teclas para acciones rápidas, para los cuales podemos preparar una respuesta de nuestro sistema, de modo que gestionaremos estos eventos de la interfaz gráfica. Además, es posible incluir manejo de eventos más especializados, como validar el texto que el usuario está capturando a través del teclado, obtener la ubicación del ratón dentro de la pantalla, u obtener los valores capturados en algunos controles especiales como los componentes JSlider, JTree o JSpinner, entre otros.

Como ya había mencionado en el primer post de esta serie, la implementación de la gestión de eventos recae en el componente de la aplicación conocido como Controlador. Dentro del ejemplo que exploraremos a continuación, este aparece representado por una única clase que se encarga de atender diferentes eventos ocurridos en la ventana principal de nuestra aplicación, a través de la implementación de 2 interfaces nativas del lenguaje Java: ActionListener y MouseMotionListener. Las acciones que recibirán nuestra atención son que el usuario haga un un clic con el ratón sobre el botón de búsqueda titulado "Buscar", y el movimiento del ratón sobre la pantalla, de modo que al seleccionar este botón se deberá desplegar una ventana emergente que contendrá una serie de datos, y al mover el ratón deberán mostrarse en una de las etiquetas de la pantalla principal las coordenadas de la ubicación del ratón.

Notas: Además de las interfaces, Java cuenta con un grupo de clases nativas que también podemos usar para incluir la gestión de eventos en nuestro programas, llamadas clases adaptadoras. Sin embargo, para efectos prácticos, nos enfocaremos en las interfaces, ya que Java nos permiten implementar múltiples interfaces en una misma clase, con lo que podemos tener una sola clase controladora de todos los eventos.

Retomaremos el proyecto del post anterior, agregando nuevas clases y modificando parte del código de la clase Ventana para echar a andar la gestión de eventos.

El Controlador

Para incluir este componente dentro de nuestro programa crearemos el archivo de la clase que lo implementará, y después agregaremos una instancia a ésta en el código de la ventana principal. El código para el Controlador es el que aparece a continuación:

Controlador.java

import javax.swing.JFrame;
import java.awt.event.*;
/**
 * @Desc Clase que maneja los eventos realizados en la Vista implementando una serie de interfaces nativas del lenguaje
 * @author Beto González
 *
 */
public class Controlador implements ActionListener, MouseMotionListener {
    public Ventana ventana;
    Controlador(Ventana ventana) {
        this.ventana = ventana;  
    }
    /**
    * @Desc método perteneciente a la interface ActionListener que es implementado para controlar las acciones sobre los botones
    * ya que se ejecutará si se hace clic sobre el botón que este atendiendo  
    */
    public void actionPerformed(ActionEvent ie)
    {  
        if(ie.getActionCommand() == "Buscar usuario") { //Validación para asegurarse que la acción fue realizada sobre el botón Buscar     
            ventana.panelPrincipal.lblMensaje.setText("Has hecho clic en el bóton de búsqueda");
            //Desplegamos una ventana emergente que contendrá la información de un panel de la clas PanelDeDatos
            PanelDeDatos panel = new PanelDeDatos();
            panel.estableceContenido();
            VentanaEmergente emergente = new VentanaEmergente("Información del usuario", panel);
            emergente.setBounds(180, 180, 300, 250);
            emergente.setVisible(true);
            emergente.setDefaultCloseOperation(JFrame.DISPOSE_ON_CLOSE);
            emergente.addWindowListener(new WindowAdapter()
            {
                public void WindowCloser(WindowEvent e)
                {        
                    System.exit(0);
                }
            });
        }
    }
    /**
    * @Desc Método ejecutado cuando el usuario arrastra el ratón presionando el botón de acción
    */
    public void mouseDragged(MouseEvent e) {
        ventana.panelPrincipal.lblMensaje.setText("Ratón arrastrado");
    }
    /**
    * @Desc Método ejecutado cuando el usuario solo arrastra el ratón
    */
    public void mouseMoved(MouseEvent e) {
        ventana.panelPrincipal.lblMensaje.setText("Posición del puntero X:" + Integer.toString(e.getX()) + " Y:" + Integer.toString(e.getY()));
    }
}

Como vemos, es el código de una clase que implementa las interfaces ActionListener y MouseMotionListener, gracias a las cuales hereda una serie de métodos que le permitirán controlar los eventos sobre algunos de los componentes de la pantalla, en este caso particular presionar el botón "Buscar" y el movimiento del ratón sobre la pantalla. El método actionPerformed() que viene de la interface ActionListener se ejecuta cada vez que se hace clic sobre un botón que haya sido habilitado para recibir eventos y este reciendolos a través de la clase Controlador. De una manera similar, los métodos mouseDragged() y mouseMoved() son heredados de la interface MouseMotionListener, y se ejecutarán con las acciones del ratón correspondientes, siempre y cuando la ventana donde deseamos que actue este configurada para recibir los eventos del movimiento del ratón con esta misma clase.

El método mouseMoved obtiene las coordenadas del ratón a través del parámetro de la clase MouseEvent que recibe, para después desplegarlos incluyendolos en el valor de una de las etiquetas de la pantalla principal. Tanto la ejecución de este método como la creación del objeto que recibe son responsabilidad de Java, por lo que no tenemos que preocuparnos por estos detalles. Algo similar ocurre con el método actionPerformed, ya que las especificaciones del evento ocurrido pueden ser obtenidas a traves de parámetro de la clase ActionEvent recibido, este objeto puede ser utilizada para obtener una referencia al componente desde el que se originó el evento, y de esa forma podemos validar que acción deberemos realizar en consecuencia. En este caso se valida que la propiedad actionCommand del objeto origen sea igual a "Buscar usuario". Después de que se realiza la validación aparece el código que permitirá desplegar una ventana emergente con datos incluidos, para esto se utilizarán 2 clases más definidas por nosotros mismos, cuyo código aparece a continuación.

VentanaEmergente.java

import java.awt.Container;
import javax.swing.JFrame;
import javax.swing.JPanel;
/**
 * @Desc Clase utilizada para desplegar ventanas emergentes dentro del sistema que contendrán la información establecida 
 * en un objeto JPanel pasado por el constructor 
 * @author Beto González
 */
public class VentanaEmergente extends JFrame {
    //Constructor de la clase
    VentanaEmergente(String titulo, JPanel panelDeDatos) {
        super(titulo);
        Container contentPane = getContentPane();
        contentPane.add(panelDeDatos);
    } 
}

PanelDeDatos.java

import javax.swing.*;
import java.awt.*;
/**
 * @Desc Clase utilizada para desplegar ventanas emergentes dentro del sistema que contendrán la información establecida 
 * en un objeto JPanel pasado por el constructor 
 * @author Beto González
 *
 */
public class PanelDeDatos extends JPanel {
    private JLabel lblNombre;
    private JLabel lblCorreoElectronico;
    private JLabel lblDomicilio;
    private JLabel lblEdad;
    private JLabel lblTelefono;
    //Constructor de la clase
    PanelDeDatos () {
        this.lblNombre = new JLabel("Nombre del usuario: ");
        this.lblCorreoElectronico = new JLabel("Correo electronico: ");
        this.lblDomicilio = new JLabel("Domicilio: ");
        this.lblEdad = new JLabel("Edad: ");
        this.lblTelefono = new JLabel("Telefono: ");
        this.setLayout(new GridBagLayout());
    }
    /**
    * @Desc Método que agrega al panel principal cada una de las etiquetas declaradas
    */
    public void estableceContenido() {  
        GridBagConstraints delimitador = new GridBagConstraints(); //Creamos un delimitador que usaremos para especificar la ubicación de los componentes dentro del panel  
        delimitador.gridx = 0;
        delimitador.gridy = 0;
        delimitador.anchor = GridBagConstraints.EAST;
        this.add(lblNombre, delimitador);
        delimitador.gridy = 1;
        this.add(lblCorreoElectronico, delimitador);
        delimitador.gridy = 2;
        this.add(lblDomicilio, delimitador);
        delimitador.gridy = 3;
        this.add(lblEdad, delimitador);
        delimitador.gridy = 4;
        this.add(lblTelefono, delimitador);
    }
}

La clase VentanaEmergente -que extiende a JFrame- se utilizará para poder crear y lanzar ventanas personalizadas en tiempo de ejecución, mientras que la clase PanelDeDatos -que exiende a JPanel- se utilizará para incluir información en forma de etiquetas dentro estas ventanas.

Por ahora la información que contendrán los objetos de PanelDeDatos será constante, ya que no poseemos una fuente de datos externa con la cual alimentarla. Ese será precisamente el trabajo que realizaremos en el siguiente post, el acceder a una base de datos para extraer la información que se esté consultando, al buscar algunos de los datos caputados por el usuario en la pantalla principal. La razón por la que ese detalle queda fuera de ese post es porque la responsabilidad del acceso a datos recae sobre el Modelo de la aplicación, no sobre el Controlador.

Interacción entre el Controlador y la Vista

Una vez creados los archivos Cotrolador.java, VentanaEmergente.java y PanelDeDatos.java, solo queda modificar el código de la clase Ventana.java para poner a trabajar el manejo de eventos, agregando una referencia a un objeto de la clase Controlador en los objetos correspondientes de la Vista:

Ventana.java

import java.awt.Container;
import java.awt.event.WindowAdapter;
import java.awt.event.WindowEvent;
import javax.swing.JFrame;
import javax.swing.*;
/**
 * @Desc Clase que utilizamos para crear una ventana que contendrá el panel principal de la aplicación
 * @author Beto González
 */
public class Ventana extends JFrame {
    PanelSwing panelPrincipal;
    /**
    * @param args
    */
    public static void main(String[] args) {  
        Ventana ventana = new Ventana();
        ventana.setBounds(120, 120, 800, 600);
        ventana.setVisible(true);
        ventana.setDefaultCloseOperation(DISPOSE_ON_CLOSE);
        ventana.addWindowListener(new WindowAdapter()
        {
            public void WindowCloser(WindowEvent e)
            {        
                System.exit(0);
            }
        });
    }
    //Constructor de la clase
    Ventana(){
        super("Primer paso en la interfaces gráficas de Java"); //Llamada al constructor de la clase padre
        Container contentPane = getContentPane();
        panelPrincipal = new PanelSwing();
        panelPrincipal.estableceContenedores();
        contentPane.add(panelPrincipal);  
        try{
            UIManager.setLookAndFeel("com.sun.java.swing.plaf.windows.WindowsLookAndFeel");   
        }catch(Exception ex){}
        SwingUtilities.updateComponentTreeUI(getContentPane());
        panelPrincipal.btnAccion1.setActionCommand("Buscar usuario"); //Establecemos un Action Command para el boton btnAccion1, con el objetivo de poder identificar sus eventos en el Controlador
        Controlador controlador = new Controlador(this); //Instanciamos a la clase Controlador
        panelPrincipal.btnAccion1.addActionListener(controlador); //Indicamos que el objeto controlador manejará los eventos sobre btnAccion1 
        this.addMouseMotionListener(controlador); //Indicamos que el objeto controlador manejará los eventos de movimiento del ratón sobre la ventana
    }
}

Vemos que dentro del código establecemos el valor de la propiedad actionCommand del objeto btnAccion1 como "Buscar usuario", ya que es el valor que se valida del lado del Controlador para comprobar que la acción se realizó sobre este botón. Justo después de esa línea se instancia la clase Controlador y aparece finalmente la referencia del componente con el Controlador de eventos, al escribir la sentencia:

panelPrincipal.btnAccion1.addActionListener(controlador);

Así, establecemos que los todos los eventos recibidos por el botón btnAccion1 serán gestionados por el objeto controlador. En este punto quizás podrían pensar que la validación de la propiedad actionCommand en el método actionPerformed está de más, ya que solo contamos con un botón en la aplicación, pero recuerden que de esta forma, en caso de contar con multiples botones de acción en la aplicación, sería mucho más sencillo manejar los eventos de todos, al recibirlos con un solo objeto en un mismo método.

Para que los eventos del movimiento del ratón sean atendidos por el Controlador, haremos una referencia desde objeto ventana:

this.addMouseMotionListener(controlador);

De modo que todos estos eventos que ocurran en la venta principal serán manejados por este mismo objeto.

Y esto es todo lo que tenemos que hacer para que el manejo de evento funcione, al echar a andar el programa debemos obtener un resultado como el que se observa a continuación:

Y como podemos apreciar, en la etiqueta lblMensaje se despliega el valor de la posición del ratón en la pantalla, y también nos informa cuando lo estamos arrastrando.

Si probamos hacer clic sobre el botón "Buscar" debe aparecer la ventana emergente que mencionamos, tal y como pueden ver en la imagen:

Con la implementación de este ejemplo es que concluímos el post de hoy, el objetivo principal es que aprecieran que agregar un manejo de eventos a nuestros programas en Java es relativamente sencillo, tan solo debemos conocer que clase o interface nativa le corresponde al tipo de componente que deseamos controlar, agregar las definiciones de los métodos necesarios dentro de una clase que que herede o implemente las clases o interfaces, y realizar la vinculación entre el componente y el manejador de eventos. El otro objetivo -que me falto mencionar al principio- era diseñar un esqueleto funcional al que agregaremos el acceso a un manejador de base de datos y una pequeña lógica de negocios, los cuales integrarán el Modelo de nuestra aplicación, completando de esta forma el MVC de que habiamos hablado en un inicio, pero que quedará pendiente para el siguiente artículo.

Hasta la próxima.

Diseño de interfaces gráficas en Java, parte 2: Swing y los contenedores (Layout)

¿Tocamos Swing?

¡Saludos nuevamente blogueros!

En este post veremos algunas de las características de la biblioteca de clases Swing que posee Java, la cual utilizaremos para el diseño de una interfaz de usuario básica. También revisaremos la gestión de posicionamiento de los componentes gráficos en la pantalla, a través de las diferentes clases de contenedores (Layout) de componentes que posee el lenguaje, en particular le dedicaremos mucha atención a la clase GridBagLayout, que nos permite crear una presentación más elaborada.

También hay que señalar que en esta ocasión nos encargaremos únicamente de la aparición de los elementos gráficos en la pantalla, por lo que trabajaremos con el nivel de Vista, dejando la implementación del Controlador y el Modelo para los siguientes artículos.

La Vista

Bueno, dicho esto entremos en acción. El primer paso consistirá en la creación de una clase que funcionará como un panel que contendrá a los diferentes elementos de la interface que iremos incorporando. Para este propósito es que incluí el siguiente código fuente:

PanelSwing.java

import javax.swing.*;
import java.awt.*;
/**
 * @Desc Clase que crea un panel con una serie de componentes visuales que podemos incluir en una ventana de la clase JFrame 
 * @author Beto González
 */
public class PanelSwing extends JPanel {
    //Atributos de la clase que consisten en una serie de componentes visuales
    public JPanel panelCentral, panelSuperior, panelInferior; 
    public JLabel lblTitulo, lblPie, lblMensaje, lblInfo,lblCampo1, lblCampo2;
    public JTextField txtCampo1, txtCampo2;
    public JButton btnAccion1;
 
    //Constructor de la clase
    PanelSwing() {    
        this.setLayout(new BorderLayout());
        this.panelCentral = new JPanel(new GridBagLayout());
        this.panelSuperior = new JPanel(new FlowLayout(FlowLayout.LEFT));
        this.panelInferior = new JPanel(new GridLayout(1,3)); //Este panel consistirá en una tabla de 1 x 3 (1 renglon con 3 columnas)
        this.lblTitulo = new JLabel("Encabezado o Banner de la ventana");
        this.lblPie = new JLabel("Barra de estado");
        this.lblInfo = new JLabel("Autor: Beto González");
        this.lblMensaje = new JLabel("Bienvenido a esta práctica");
        this.lblCampo1 = new JLabel("Nombre completo:");
        this.lblCampo2 = new JLabel("Correo electrónico:");
        this.txtCampo1 = new JTextField("", 30);
        this.txtCampo2 = new JTextField("",20);
        this.btnAccion1 = new JButton("Buscar");
    }
    /**
    * @Desc Método en el que se lleva a cabo la colocación de cada uno de los componentes en el panel principal
    */
    public void estableceContenedores() {
        //Establecemos el panel superior       
        panelSuperior.add(this.lblTitulo);
        this.add(panelSuperior, BorderLayout.NORTH);
        //Establecemos el panel central 
        GridBagConstraints delimitador = new GridBagConstraints(); //Creamos un delimitador que usaremos para especificar la ubicación de los componentes dentro del panel
        delimitador.ipadx = 8; //Espacio mínimo entre los componentes de un mismo renglon
        delimitador.ipady = 5; //Altura de los componentes
        delimitador.gridx = 0;
        delimitador.gridy = 0;
        delimitador.anchor = GridBagConstraints.EAST;
        panelCentral.add(lblCampo1, delimitador);
        delimitador.gridx = 1;
        delimitador.anchor = GridBagConstraints.WEST;
        panelCentral.add(txtCampo1, delimitador);
        delimitador.gridy = 1;  
        delimitador.gridx = 0;
        delimitador.anchor = GridBagConstraints.EAST;
        panelCentral.add(lblCampo2, delimitador);
        delimitador.gridx = 1;
        delimitador.anchor = GridBagConstraints.WEST;
        panelCentral.add(txtCampo2, delimitador);
        delimitador.gridx = 3;
        delimitador.gridy = 3;  
        panelCentral.add(btnAccion1, delimitador);
        this.add(panelCentral, BorderLayout.CENTER);
        //Establecemos el panel inferior
        panelInferior.add(lblPie, 0); //Primera celda
        panelInferior.add(lblMensaje,1); //Segunda celda
        panelInferior.add(lblInfo,2); //Tercera celda
        this.add(panelInferior, BorderLayout.SOUTH);
    }
}

La clase recibe el nombre de PanelSwing, ya que básicamente consistirá en un panel que extenderá a la clase JPanel, la cual se encuentra contenida en la biblioteca swing. Este panel representa todo el contenido de la ventana de nuestra aplicación, ya que dentro de él se agregarán otra serie de paneles en los que se colocarán diferentes algunos de los componentes que utilizamos regularmente en el diseño de interfaces de usuario. Estos componentes aparecen declarados como atributos de nuestra clase como podemos ver:

public JPanel panelCentral, panelSuperior, panelInferior; 
public JLabel lblTitulo, lblPie, lblMensaje, lblInfo,lblCampo1, lblCampo2;
public JTextField txtCampo1, txtCampo2;
public JButton btnAccion1;

Entre ellos se incluyen tres paneles, etiquetas, campos de texto y un botón, todos de la biblioteca Swing. Estos objetos son creados dentro del constructor de la clase como podemos ver:

this.setLayout(new BorderLayout());
this.panelCentral = new JPanel(new GridBagLayout());
this.panelSuperior = new JPanel(new FlowLayout(FlowLayout.LEFT));
this.panelInferior = new JPanel(new GridLayout(1,3));
this.lblTitulo = new JLabel("Encabezado o Banner de la ventana");
this.lblPie = new JLabel("Barra de estado");
this.lblInfo = new JLabel("Autor: Beto González");
this.lblMensaje = new JLabel("Bienvenido a esta práctica");
this.lblCampo1 = new JLabel("Nombre completo:");
this.lblCampo2 = new JLabel("Correo electrónico:");
this.txtCampo1 = new JTextField("", 30);
this.txtCampo2 = new JTextField("",20);
this.btnAccion1 = new JButton("Buscar");

Donde además se declara que el Layout de la clase PanelSwing será BorderLayout; este tipo de contenedor nos permite colocar los elementos en cinco ubicaciones distintas dentro de la pantalla, utilizando como referencia los puntos cardinales:

Ya que al momento de agregar cada uno de los elementos a este contenedor se utilizan los valores NORTH, SOUTH, EAST, WEST y CENTER, que corresponden a cada una de las ubicaciones indicadas en la imagen y que se encuentran declarados como valores estáticos dentro de la clase BorderLayout.

El objeto panelSuperior será ubicado en el NORTH de este contenedor, panelCentral en CENTER y panelInferior en el SOUTH. Pueden darse cuenta que este tipo de delimitación está pensada especialmente para diseñar nuestras ventanas para aplicaciones, ya que cada una de las ubicaciones corresponde a un componente específico de la pantalla, por ejemplo la parte Norte puede llevar una barra de menú o de iconos, o una sección de encabezados, los menús también podrían aparecer en las ubicaciones Oeste y Este. Mientras que la parte Central está pensada para colocar el contenido principal de la pantalla, como pueden ser las imagenes, videos, formularios, texto, etc. Finalmente el área Sur por lo general será usada para llevar una barra de estado. Aunque al final la decisión sobre como distribuyamos los elementos de la interface será únicamente de los diseñadores.

El panelSuperior utilizará un Layout de tipo FlowLayout, que ordena los elementos como una secuencia horizontal de izquierda a derecha, similar a como escribimos texto en un editor común. Mientas que panelInferior estará delimitado por un Layout GridLayout, que hace aparecer a los componentes como si estuvieran dentro de una cuadricula de tamaño constante, es decir que en este contenedor se especifica el número de celdas que tendrá, al declarar el número de filas y columnas dentro de su constructor, como vemos que se escribió en el código:

this.panelInferior = new JPanel(new GridLayout(1,3));

Hasta aquí hemos hablado un poco de los tres Layout básicos para interfaces, aún falta ver el más poderoso de todos, es decir el GridBagLayout, que es utilizado por el panelCentral para ubicar los componentes de un formulario. Este contendedor nos permite colocar los componentes dentro de una estructura similar a una tabla HTML, es decir que también cuenta con renglones y columnas, pero con la gran diferencia de que el tamaño y número de las filas y columnas son variables, al mismo tiempo que podemos controlar la ubicación y el relleno que tendrán cada uno de los componentes dentro de la fila. La apariencia que se busca lograr para este ejemplo es la siguiente:

La cual es similar a la apariencia de un formulario básico como los que hemos manejado en las páginas HTML de los temas sobre aplicaciones Web.

Para lograr este propósito es que se incluye el código que vemos dentro del método estableceContenedores():

GridBagConstraints delimitador = new GridBagConstraints();
delimitador.ipadx = 8; 
delimitador.ipady = 5; 
delimitador.gridx = 0;
delimitador.gridy = 0;
delimitador.anchor = GridBagConstraints.EAST;
panelCentral.add(lblCampo1, delimitador);
delimitador.gridx = 1;
delimitador.anchor = GridBagConstraints.WEST;
panelCentral.add(txtCampo1, delimitador);
delimitador.gridy = 1;  
delimitador.gridx = 0;
delimitador.anchor = GridBagConstraints.EAST;
panelCentral.add(lblCampo2, delimitador);
delimitador.gridx = 1;
delimitador.anchor = GridBagConstraints.WEST;
panelCentral.add(txtCampo2, delimitador);
delimitador.gridx = 3;
delimitador.gridy = 3;  
panelCentral.add(btnAccion1, delimitador);

Dentro del cual es necesario crear un objeto de la clase GridBagConstraints, que se encarga de especificar la delimitación de cada uno de los componentes que serán colocados en el panelCentral, como vemos en el código, se declara el espaciado entre los elementos de un mismo renglón y la altura de los componentes a través de las propiedades ipadx e ipady respectivamente. Las propiedades gridx y gridy sirven para ubicar al componente en una celda específica. Finalmente el anchor se utiliza para especificar hacia que parte se cargarán los componentes en caso de que esta resulten más pequeños que la celda.

De esta forma después de agregar los componentes a sus paneles correspondientes, solo se agregan estos paneles en las ubicaciones que mencionamos dentro del objeto de la clase PanelSwing.

Para probar este sencillo código, es necesario contar con una clase que extienda a la clase JFrame para crear una ventana de aplicación, y además tener una clase que contenga el método estático main() para su ejecución. En este caso haremos realizaremos ambas tareas en una sola clase con el código que aparece a continuación:

Ventana.java

import java.awt.Container;
import java.awt.event.WindowAdapter;
import java.awt.event.WindowEvent;
import javax.swing.JFrame;
import javax.swing.*;
/**
 * @Desc Clase que utilizamos para crear una ventana que contendrá el panel principal de la aplicación
 * @author Beto González
 */
public class Ventana extends JFrame {
    PanelSwing panelPrincipal;
    /**
    * @param args
    */
    public static void main(String[] args) {  
        Ventana ventana = new Ventana();
        ventana.setBounds(120, 120, 800, 600);
        ventana.setVisible(true);
        ventana.setDefaultCloseOperation(DISPOSE_ON_CLOSE);
        ventana.addWindowListener(new WindowAdapter()
        {
            public void WindowCloser(WindowEvent e)
            {        
                System.exit(0);
            }
        });
    }
    //Constructor de la clase
    Ventana(){
        super("Primer paso en la interfaces gráficas de Java"); //Llamada al constructor de la clase padre
        Container contentPane = getContentPane();
        panelPrincipal = new PanelSwing();
        panelPrincipal.estableceContenedores();
        contentPane.add(panelPrincipal);  
    } 
}

El código del método estático main lleva a cabo la instanciación de la clase Ventana, especifica sus dimensiones, la hace visible y finalmente habilita la operación de cierre para que el usuario pueda finalizar su ejecución.

Dentro del construcctor de la clase Ventana se instancia a la clase PanelSwing y después de establecer los elementos visuales que componen a este objeto, se agrega al objeto de la clase Container de la ventana para que se incluya en la presentación.

Solo tenemos que agregar este código a un nuevo archivo de clase dentro del proyecto y ejecutarlo. El resultado tiene que ser una ventana con la siguiente apariencia:

Ahora podemos apreciar el trabajo realizado del lado de la presentación de la aplicación, con el plus de que nuestra ventana es 100% redimencionable, ya que todos los componentes ocupan posiciones relativas dentro de ella.

Además de esta propiedad de posicionamiento, Swing nos ofrece la ventaja de poder modificar la apariencia de todos los elementos visuales de una ventana con un par de líneas de código. Por defecto la apariencia que poseen los componentes es Metal, que como podemos apreciar en las imagenes no se parece a las ventanas estandar de ningún sistema operativo, pero además se pueden elegir además las apariencias como Windows (apariencia de ventanas de Windows) y Motif (apariencia de ventanas de Unix); estás tres son lo que se denimona independientes de la plataforma, ya que pueden ser usadas en cualquier S.O. También hay una apariencia llamada Mac, para que nuestras ventanas luscan como las de los sistemas operativos de la Mac, pero a diferencia de las anteriores ésta es dependiente de la plataforma. Pueden encontrar más información sobre la modificación de la apariencia en este artículo de Java en castellano.

Si deseamos modificar la apariencia del ejemplo que acabamos de realizar para que lusca como una ventana de Windows, bastará con agregar unas cuantas líneas de código a la clase Ventana como aparece a continuación:

import java.awt.Container;
import java.awt.event.WindowAdapter;
import java.awt.event.WindowEvent;
import javax.swing.JFrame;
import javax.swing.*;
/**
 * @Desc Clase que utilizamos para crear una ventana que contendrá el panel principal de la aplicación
 * @author Beto González
 */
public class Ventana extends JFrame {
    PanelSwing panelPrincipal;
    /**
    * @param args
    */
    public static void main(String[] args) {  
        Ventana ventana = new Ventana();
        ventana.setBounds(120, 120, 800, 600);
        ventana.setVisible(true);
        ventana.setDefaultCloseOperation(DISPOSE_ON_CLOSE);
        ventana.addWindowListener(new WindowAdapter()
        {
            public void WindowCloser(WindowEvent e)
            {        
                System.exit(0);
            }
        });
    }
    //Constructor de la clase
    Ventana(){
        super("Primer paso en la interfaces gráficas de Java"); //Llamada al constructor de la clase padre
        Container contentPane = getContentPane();
        panelPrincipal = new PanelSwing();
        panelPrincipal.estableceContenedores();
        contentPane.add(panelPrincipal);  
        try{
            UIManager.setLookAndFeel("com.sun.java.swing.plaf.windows.WindowsLookAndFeel");   
        }catch(Exception ex){}
        SwingUtilities.updateComponentTreeUI(getContentPane());
    }
}

Para obener un resultado como el siguiente:

De esta forma es fácil modificar la apariencia general de nuestras aplicaciones de una manera muy fácil.

Y con este último ejemplo es que terminamos este pequeño artículo, espero que se hayan dado una pequeña idea de como pueden integrar la apariencia de una interface de usuario en Java, ya que la parte que sigue es el manejo de eventos del usuario, que corresponde al Controlador de la aplicación. Además de los controles vistos iremos revisando algunos más que nos pueden ser muy útiles, y finalizaremos con un pequeño proyecto que demostrará un poco el poder que tiene la plataforma Java.

Hasta la próxima.

Diseño de interfaces gráficas en Java, Parte 1: El concepto y la herramienta

Duke, la mascota oficial de la plataforma Java

De vuelta a la carga después de mucho tiempo eh, pues una disculpa por el retraso, ya que el trabajo y las vacaciones consumieron mucho de mi tiempo. Ahora regreso con una pequeña serie de post sobre un tema que siempre fue de mi particular interés, debido a las diferentes dificultades que encontré al enfrentarlo: diseñar interfaces gráficas en Java.

¿Por qué me parece complejo? Pues porque debido a las características de esta plataforma, en el diseño de interfaces gráficas de Java se implementa el patrón MVC (Modelo Vista Controlador) que, como su definición lo indica, separa los datos de una aplicación, la interfaz de usuario y la lógica de control en tres capas distintas. Al hablar de la interfaz de usuario se refiere a la parte de los programas con la que los usuario se comunicaran con nuestra aplicaciones, mientras que la lógica de control se refiere a la forma en la que se ejecutarán las acciones que involucre un programa. En el MVC se habla de tres niveles en la aplicación, los cuales son el modelo (que contiene la gestión de los datos y la lógica de negocios), la vista (se ocupa de la aparición de los componentes de la interfaz de usuario en pantalla) y el controlador (que gestiona los eventos de entrada generados en la vista).

Además, resulta que en Java nos encontramos con varios conceptos muy interesantes, como la utilización de ubicaciones relativas en lugar de absolutas para los componentes de la interfaz gráfica, el contar con diferentes tipos de manejadores para la aparición de estos componentes y un control de eventos con varias opciones de implementación.

¿Y por qué Java? Para hacerlo corto diré que por una preferencia personal hacia este lenguaje, además de sus ya conocidas características: independiente de la plataforma, robusto, versátil, de libre utilización, cuenta con una gran comunidad de desarrolladores y una serie de aplicaciones IDE entre las que encontramos Eclipse, que es software 100% libre.

En el título hablo de Java 2, porque fue a partir de la versión 2 de este lenguaje que se dio un gran cambio en el desarrollo de interfaces gráficas, mejorando el funcionamientos de los programas por fortuna, pero aumentando un tanto la complejidad de la programación al introducir la biblioteca de clases Swing, de la que hablaremos más adelante.

La herramienta que utilizaré para los ejemplos es la más reciente versión de Eclipse, es decir el Eclipse Galileo, que pueden descargar desde la ubicación anterior (es la segunda opción de la lista, deje este enlace para que puedan seleccionar la descarga según su sistema operativo).

En la página de la comunidad en español de Eclipse podemos encontrar varios tutoriales para iniciarnos en el uso de este IDE. En particular deberían revisar el que se titula Programando Java con Elipse, ya que les dará una noción de cómo crear y gestionar proyectos en este lenguaje, así como el conjunto de herramientas para la programación con que se cuenta, para después puedan pasar a la creación de sus programas de manera más cimentada.

En esta serie de post me enfocaré en los conceptos del lenguaje y la realización de varios ejemplos, mientras que me detendré poco en la utilización de la herramienta de programación, de forma que alguien que desee utilizar un IDE distinto de Eclipse pueda hacerlo.

Hay que señalar que el entorno de desarrollo de Eclipse por defecto no cuenta con un editor visual para desarrollar interfaces gráficas en Java, por lo que en los ejemplos crearemos el código completo de la interface, no solo por esta característica del entorno, sino porque considero muy valioso conocer los detalles de la implementación de la vista y el controlador de las aplicaciones. Sin embargo, para los que ya sean más veteranos, les interesará saber que existe un complemento para Eclipse que permite incluir un editor visual para interfaces gráficas, llamado Visual Editor Proyect. Aunque se encuentra en desarrollo, ya permite incluir la mayoría de los componentes gráficos del lenguaje en nuestros programas de manera visual. En este artículo se muestra como instalar el mencionado plug-in.

También pueden revisar esta página que contiene un video-tutorial sobre el desarrollo de proyectos e interfaces gráficas en Java usando Eclipse, en el cual se incluyen las instrucciones para emplear el mencionado editor visual de interfaces gráficas.

Bueno, por ahora es todo lo que diré sobre los siguientes contenidos que veremos, solo les dejo el trabajo de revisar acerca de las características de Eclipse y en el post que seguirá, comenzaremos a introducirnos en los componentes de las interfaces gráficas en Java.

Hasta la próxima.

Notas para iniciarse en PHP, Parte 2: La herramienta

Un peluche de la mascota de PHP es muy importante pero por ahora puede esperar

¿Que necesitamos para dar nuestros primeros pasos en PHP?

Pues lo indispensable es contar con un servidor Web con el CGI de PHP instalado, independientemente del sistema operativo en el que vayamos a trabajar. Las opciones de servidores Web más conocidas son el IIS, el Apache y el Cherokee, siendo estos dos últimos sistemas libres y multiplataforma.

Una vez que hemos elegido el servidor y este está instalado lo que sigue es preguntarnos, ¿cómo escribiremos nuestros programas en PHP? En realidad un programa PHP se puede escribir con un simple editor de notas, pero por motivos de practicidad es conveniente conocer que existen diferentes herramientas que pueden facilitar nuestro desarrollo de aplicaciones con éste lenguaje, desde una herramienta que nos facilite el cuidado de la sintaxis de los programas mostrando en diferentes colores los componen del código, como lo hace el Notepand++. Hay otras herramientas cuyo soporte para PHP se orienta a combinar el diseño visual de páginas con la programación de scripts, como es el caso de Dreamwaver y Quanta, éste último es una herramienta libre pero solo disponible para NGU/Linux. Otra de las opciones de las cuales ya hablé un poco en este blog es el Eclipse PDT, pensado especialmente para la programación orientada a objetos. Si ya somos un poco más veteranos en PHP, podemos probar además utilizar un framework que nos ayude a crear arquitecturas complejas para nuestros sistemas, uno de los frameworks más populares para este propósito es Sympony, que nos lleva a trabajar de una manera completamente nueva, pero facilitando la creación y el mantenimiento de nuestros programas.


¿Dónde puedo conseguir estos componentes?

El servidor Web y el CGI de PHP se pueden conseguir de manera independiente, de cualquiera de las fuentes que ofrece Internet, instalando el servidor Web de nuestra preferencia y posteriormente este CGI, si queremos facilitar este trabajo, bastaría con conseguir una paquete o kit de instalación que ya cuente con ambos productos. Pondré solo un par de opciones de las muchas combinaciones que puede haber, siendo parcial hacia las opciones de software libre, porque después de todo, sobre eso trata este blog:

• AppServ. De nuevo menciono este paquete, y es que es una opción bastante fácil de instalar, que cuenta con el servidor Web Apache, PHP, el servidor MySQL y la aplicación Web para administración de bases de datos phpMyAdmin. Es una buena opción si trabajaremos sobre Windows. La guía de instalación se encuentra aquí.

• XAMPP. Este paquete también facilita enormemente la instalación de los componentes, cuenta con Apache, PHP, MySQL y el interprete de PERL, y podemos encontrar su instalación dentro de los cuatro principales sistemas operativos del mercado: GNU/Linux, Windows, Mac OS y Solaris.
  

Dentro del enlace de XAMPP podemos ver que encontramos guías para su instalación en los diferentes sistema operativos.

Las diferentes herramientas para desarrollo se pueden descargar desde los enlaces que aparecen en un principio, exceptuando el Dreamweaver que es un sistema propietario. En lo personal yo recomiendo ampliamente el Eclipse PDT, que podemos descargar desde su página oficial, ya que es un entorno multiplataforma que además nos ofrece gran ayuda en la programación, sobre todo si ésta es orientada a objetos.

Ejemplo del árbol de clases de Eclipse PDT

Encontramos una sencilla guía de instalación para este sistema dentro de la misma página. C0omo vemos, es necesario contar con la máquina virual de Java o Java Runtime al menos en su versión 5.0, una vez descargado y desempaquetado basta con que corramos archivo ejecutable de Eclipse, creemos un área de trabajo para nuestros proyectos y listo, podemos comenzar a crear proyectos de programación en PHP o en Java.


Ya elegí e instale las herramientas necesarias ¿Cuál es el siguiente paso ahora?

Ahora ya podemos comenzar a hacer nuestros primeros pasos en PHP, lo primero es indentificar el directorio donde se alamacenarán los archivos de nuestras aplicaciones Web, donde realizaremos las prácticas corresponedientes, el resto simplemente consistirá en ir conociendo los contenidos del lenguaje y crear los programas que servirán de ejemplo para los temas abordados. Y estes serán prescisamente los temas que abordaremos en los siguientes posts.

Hasta la próxima.

Eclipse Ganymede y el PDT 2.0

Y las lunas de Júpiter que faltan

Hace poco descargué e instalé la versión 3.4.1 de Eclipse, que incluye la versión 2.0 de PDT (PHP Development Tools), estos son los dos grandes componentes de este entorno de desarrollo, que como podemos leer en las características mencionadas tiene la gran ventaja de ser multiplataforma (ya que utiliza la máquina virtual de Java) y tratarse de un proyecto de software libre. Eclipse representa la parte medular de todo el paquete, sosteniendo un entorno que nos permite desarrollar aplicaciones en lenguaje Java, y a este módulo se le agregaron un conjunto de componentes (PDT) que le permitieron expandir sus capacidad, y ofrecernos apoyo en el desarrollo de aplicaciones Web en PHP y Javascript. Los que me agrada de este entorno (además de ser totalmente libre), el la asistencia que nos brinda en la programación, tanto en la captura de código como en la organización de nuestros proyectos, sobre todo en el manejo de clases y objetos permitiéndonos tener árboles de contenido de nuestras clases con sus tipos de métodos, propiedades, atributos, etc.:

Así como visualizar las características de los métodos y funciones, y tener listados de las clases y variables mientras estamos tecleando.

Ganymede es el nombre que se le dio a esta última versión de Eclipse, que también es el nombre de otra de las lunas de Júpiter, ya que la versión anterior se llamó Europa. Así como en toda nueva versión, se corrigieron errores, se agregaron funcionalidades y además esta promete ser una aplicación más rápida que sus predecesoras, cosa que hasta ahora ha cumplido.

En la página oficial, que encontramos en el segundo enlace que coloqué, podemos encontrar toda la información relacionada con el entorno, desde cómo instalarlo y actualizarlo hasta tutoriales que nos mostrarán cómo trabajar con él.

Otro sitio que puede ayudar a introducirnos en el desarrollo con Eclipse es la Comunidad en español de Eclipse IDE, para los que quieran las guías totalmente en español.

Espero que este pequeño artículo le sea de utilidad a más de uno.

Hasta la próxima.