Curso JavaFX: Hola Mundo

Después de la instalación de las herramientas necesarias para empezar a desarrollar aplicaciones con JavaFX iniciaremos con el clásico Hola mundo.

Una aplicacion basica en JavaFX se declara de la siguiente manera:

import javafx.application.Application;
import javafx.stage.Stage;

public class HolaMundoJavaFX extends Application {
    
    public static void main(String args[]) {
        launch(args);
    }
    @Override
    public void start(Stage escenaPrincipal) {
        escenaPrincipal.show();
    }    
}

La clase HolaMundoJavaFX hereda de Application y contiene dos métodos. El método main y el método start. Dentro de main se llama al método launch, como buena practica se recomienda que dentro de main solo exista el método launch. El método start recibe un parámetro escenaPrincipal del tipo Stage.
Si ejecutamos la clase obtenemos el siguiente resultado:

Ahora que tenemos nuestra ventana empecemos a agregar componentes y especificar ciertas características.

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;

public class HolaMundoJavaFX extends Application {
    
    public static void main(String args[]) {
        launch(args);
    }
    @Override
    public void start(Stage escenaPrincipal) {
        //Obtenemos un panel o raiz para agregar componentes
        StackPane panelPila = new StackPane();
        //Creamos el componente de tipo etiqueta(label)
        Label label = new Label("Hola Mundo desde JavaFX");
        //Lo agregamos al panel
        panelPila.getChildren().add(label);
        //Configuramos la ventana o escena
         Scene escena = new Scene(panelPila, 230, 40);
        //Establecemos las caracteristicas
        escenaPrincipal.setScene(escena);
        escenaPrincipal.setTitle("Hola mundo FX");
        //Mostramos la ventana
        escenaPrincipal.show();
    }    
}

El resultado es el siguiente:

Iniciando con JavaFX

Esta entrada es una de varias que tengo planteadas compartir con ustedes. El tema es y sera el Framework JavaFX.

Introducción

JavaFX es un marco de trabajo para agilizar la creación y el desarrollo de aplicaciones enriquecidas para Internet, las famosas RIAs ( Rich Internet Applications). Pero también puede ser usado para desarrollo de aplicaciones de escritorio. Por ahora creo que esta definición basta. Si quieren mas información acerca de JavaFX pueden visitar el enlace oficial.

Herramientas necesarias:

• Instalar el JDK 1.7. Ahora el JDK ya cuenta con JavaFX. Asegúrense de instalarlo también.
• IDE NetBeans 7.1.1 que es la versión que estoy usando. Escogemos la versión que cuenta con el plugin de FX, la mas conveniente es la de 73 MB.

Después de instalar las herramientas (si tienen dudas revisen la documentación respectiva). Ahora estamos listos para empezar a desarrollar nuestras aplicaciones.

Creando nuestro proyecto
Dentro de NetBeans creamos un nuevo proyecto, tal y como lo muestra la imagen.

Presionamos Next > escogemos un nombre para nuestro proyecto.

En esta parte podemos modificar en los dos CheckBox de abajo si queremos que nos establezca una clase por defecto con un ejemplo de JavaFX y un método main. Pueden escogerlas si quieren dar el primer vistazo a una aplicación JFX. 

Si los quitan tendrán un proyecto vacío, que es lo ideal.

Presionen Finish para crear el proyecto.

Ahora si podemos empezar a escribir código.

Patron de diseño: MVC en Java

El tema principal es, aprender a usar uno de los tantos patrones de diseño que existen para el desarrollo de software pero, en Java. Primero veamos un poco de teoría para ir entendiendo de que va esto.

MVC 

MVC viene de las siglas Modelo Vista Controlador. Es un patrón de diseño de software. Aquí se nos presenta el termino "patrón".

Demos una definición simple:  

Un patrón es la abstracción de una forma concreta que puede repetirse en contextos específicos.

Simple, ¿Verdad? Expliquemos lo en cristiano...

 En el desarrollo de software un patron es una forma, un metodo, una manera, un procedimiento. ¿De que? Pues de realizar las cosas, de llevar a cabo el objetivo, de finalizarlo pero, todo esto segun las caracteristicas de los objetivos de la aplicacion, de alli lo de contexto. Y todo el proceso puede repetirse, por eso el termino "patron".

¿Para que?

Cuando desarrollamos software empezamos a escribir código tal cual como las patadas del ahogado. Osea solo nos importa que el problema (el objetivo del programa) se resuelva. Después, cuando tenemos que hacer otro programa iniciamos desde cero y lo normal es que se repita lo de las patadas de ahogado. Incluso, en nuevos programas es posible que tengamos que escribir código que en aplicaciones anteriores ya habíamos realizado.

Aqui es donde intervienen los patrones de diseño. Un patron de diseño nos ayuda a realizar nuestras aplicaciones de manera que se nos faciliten cosas como: 

• Facilitan  la comunicacion interna
• Ahorran tiempo y experimentos inutiles
• Mejoran la calidad del diseño y la implementacion

Ademas de que actuan como "normas" o "buenas practicas de programacion".
Existen varios tipos de patrones, en este caso hablaremos sobre el patron de diseño MVC.

Como habia mencionado antes MVC es Modelo, Vista y Controlador.
Este patron de diseño nos dice que debemos separar nuestro programa en tres partes. Las cuales son las anteriores y nos indican lo siguiente.

Modelo: Es la parte logica del programa, el que resuelve el problema, el que da el resultado. Aqui van los algoritmos y la parte logica, la crucial.
Controlador: Es la seccion que se comunica con el modelo y la vista, obtiene los datos ingresados por el usuario a traves de la vista y lo manda al modelo para que este realice las operaciones correspondientes.
Vista: Esta parte es la que interactua con el usuario y envia los datos al controlador para que se realice la comunicacion con el modelo.

Podriamos decir que el modelo es la parte donde mas vamos a tardar pues es donde debemos resolver el problema. El controlador va muy ligado a la vista y estas dos partes son lo mas facil de realizar, relativamente.

Ahora que ya sabemos que debe hacer cada parte pongamos un ejemplo de algun programa que nos hayan pedido. Digamos que nos encargan realizar un programa que convierta una cantidad a pesos(MXN) y a Dolares(USD).

Realizamos un analisis del problema y ya sabemos como obtener el resultado.
Sabemos que un dolar vale 13,943 pesos y que un peso vale 0.072 dolares.
Entonces las operaciones para realizar la conversion serian: 

moneda * cantidad

Entonces ya tenemos como resolver el problema principal, ahora podemos empezar a escribir codigo.
Lo primero es el modelo. Crearemos un paquete que se llame mvc. En el que iran tres clases.
Modelo.java, Vista.java y Controlador.java.

Coloquemos el codigo de el Modelo:

package mvc;

public class Modelo {
 
 private Double moneda;
 private Double cantidad;
 private Double resultado;
 
 public void setMoneda(Double moneda) {
  this.moneda = moneda;
 }
 public void setCantidad(Double cantidad) {
  this.cantidad = cantidad; 
 }
 public Double getResultado() {
  return resultado;
 }
 public void convetirDolarAPeso() {
  resultado = cantidad * moneda;
 }
 public void convertirPesoADolar() {
  resultado = cantidad * moneda;
 }
}

Explicacion: 
La clase Modelo establece tres variables de clase o globales(atributos) y cinco metodos. Las variables son accedidas y modificadas por los metodos. Usamos los metodos set y get para modificar el valor de las variables cantidad y moneda. Y usamos los metodos que se encargan de realizar la conversion para obtener el resultado.

Ahora veamos el codigo de la Vista:

package mvc;

import java.awt.BorderLayout;
import java.awt.FlowLayout;

import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;
import javax.swing.JTextField;

public class Vista extends JFrame{
 public JButton pesos, dolares;
 private JPanel panelB, panelR;
 public JLabel lResultado;
 public JTextField campoTexto;
 
 public Vista() {
  getContentPane().setLayout(new BorderLayout());
  
  panelB = new JPanel();
  panelB.setLayout(new FlowLayout());
  
  panelR = new JPanel();
  panelR.setLayout(new FlowLayout());
  
  pesos = new JButton("Convertir a Pesos");
  dolares = new JButton("Convertir a Dolares");
  
  lResultado = new JLabel("Resultado:");  
  campoTexto = new JTextField(20);
  
  panelB.add(pesos);
  panelB.add(dolares);
  
  panelR.add(lResultado);
  
  add(campoTexto, BorderLayout.NORTH);
  add(panelB, BorderLayout.SOUTH);
  add(panelR, BorderLayout.CENTER);
 }
}

Explicacion:
La clase vista se encarga de crear los componentes Swing que haran la GUI y no explico mas de UI porque eso es tema aparte =P
Basta con saber que hereda el componente JFrame, que contiene dos paneles, dos botones, un label y un textfield.

La clase Controlador:

package mvc;

import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;

import javax.swing.JFrame;

public class Controlador implements ActionListener {
 private Modelo modelo;
 private Vista vista;
 private Double cantidad;
 
 public Controlador(Modelo modelo, Vista vista) {
  this.modelo = modelo;
  this.vista = vista;
  
  this.vista.pesos.addActionListener(this);
  this.vista.dolares.addActionListener(this);
 }
 public void iniciarVista() {
  vista.setTitle("Conversor");
  vista.pack();
  vista.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
  vista.setLocationRelativeTo(null);
  vista.setVisible(true);  
 }
 public void actionPerformed(ActionEvent evento) {
  if(vista.pesos == evento.getSource()) {
   if(!"".equals(vista.campoTexto.getText())) {
    try{
     cantidad = Double.parseDouble(vista.campoTexto.getText());
     modelo.setCantidad(cantidad);
     modelo.setMoneda(13.943);
     modelo.convetirDolarAPeso();
     vista.lResultado.setText(modelo.getResultado().toString());
    }catch(NumberFormatException e) {
     vista.lResultado.setText("Introduzca una cantidad valida...");
    }
   }
  }
  else if(vista.dolares == evento.getSource()) {
   if(!"".equals(vista.campoTexto.getText())) {
    try{
     cantidad = Double.parseDouble(vista.campoTexto.getText());
     modelo.setCantidad(cantidad);
     modelo.setMoneda(0.072);
     modelo.convertirPesoADolar();
     vista.lResultado.setText(modelo.getResultado().toString());
    }catch(NumberFormatException e) {
     vista.lResultado.setText("Introduzca una cantidad valida...");
    }
   }
  }
 }
}

Explicacion:
La clase Controlador se divide en tres partes importantes, la primera es la declaracion de los atributos de clase y el constructor de la clase. Esta parte crea atributos tipo Modelo y tipo Vista para poder controlar la aplicacion completamente. Ademas le agrega los escuchadores a los botones.

La segunda parte es el metodo iniciarVista(), el cual utilizando la variable vista accede a los componentes Swing correspondientes y realiza las configuraciones para mostrar la ventana(aplicacion).

La tercera parte tiene que ver con los componentes visuales, en este caso los botones que son los que nos dan las ordenes de accion, como la clase implementa la interface ActionListener sobreescribimos el metodo actionPerformed y comprobamos que boton fue clickeado.

Cuando se trata de el boton pesos, sabemos que la cantidad que se encuentra en el campo de texto deben de ser dolares, por lo tanto el valor de la moneda seran 13.943 pesos. Realizamos un parser y usamos el objeto modelo para llamar a los metodos get y set del mismo. Despues realizamos la conversion y establecemos en el label el resultado.

Cuando se trata de el boton dolares el procedimiento es el mismo, solo que esta ves la cantidad se supone esta en pesos, y un peso tiene un valor de 0.072 dolares.

Por ultimo creamos una clase en cualquier paquete que queramos y esta ejecutara nuestra aplicacion.
Por ejemplo:

package ejecutarConversor;

import javax.swing.UIManager;
import javax.swing.UnsupportedLookAndFeelException;

import mvc.Controlador;
import mvc.Modelo;
import mvc.Vista;

public class PruebaConversor {
 public static void main(String arf[]) {
  try {
   UIManager.setLookAndFeel(UIManager.getSystemLookAndFeelClassName());
  } 
  catch (UnsupportedLookAndFeelException e) {
  }
  catch (ClassNotFoundException e) {
  }
  catch (InstantiationException e) {
  }
  catch (IllegalAccessException e) {
  } 
  Modelo modelo = new Modelo();
  Vista vista = new Vista();
  Controlador controlador = new Controlador(modelo, vista);
  controlador.iniciarVista();
 }
}

Esta clase crea tres objetos que son, del tipo Modelo, del tipo Vista y del tipo Controlador. A este ultimo le pasamos como parametro los otros dos. Por ultimo, por medio del objeto controlador mandamos mostrar la ventana. El bloque try-catch es solo para la skin o look and feel de la aplicacion.

Por ultimo unas screens de la ejecucion.

Aqui termina la entrada de el patron de diseño MVC, espero que les sirva y que le hayan entendido.