jueves, 24 de febrero de 2011

Extra: Tutorial - JDeveloper para Interfaz Gráfica

Hola que tal, a petición de un compañero escribiré aquí un tutorial de como crear una ventana en JDeveloper, con algunos elementos como: botones, etiquetas, cuadros de texto y pop-ups.

Bueno primero que nada para este tutorial es necesario tener JDeveloper, si no lo tienen, recomiendo la versión genérica (pesa 75MB), pueden descargarlo gratuitamente del siguiente link:

(Nota: Es necesario registrarse anteriormente para poder descargarlo. Nota 2: Es solo para Windows) 

Ya descargado el programa, pueden proceder a instalarlo normalmente, y al abrir el programa por primera vez, pedirá la ruta donde se encuentra el java.exe, si ya tienen el kit JDK de java, la dirección por default es:
C:\Program Files\Java\jdk1.6.0_23\bin

Ya adentro vamos a File -> New,creamos un nuevo proyecto(Generic Proyect) con el nombre que deseamos, en mi caso puse hotel, si deseamos cambiamos el directorio donde se desea guardar, seleccionamos Swing/AWT y damos next y luego finish.


Ahora de nuevo vamos a File -> New, y seleccionamos en la izquierda abajo, Swing/AWT, y a la derecha Frame. Nombramos la clase, en mi caso le puse Interfaz para el ejemplo, por automático se debe poner que pertenece al paquete con el nombre del proyecto, y extiende a javax.swing.Frame, podemos poner el título que queremos que tenga la ventana.

Ahora podemos empezar a modificar nuestra ventana, para comenzar a agregar elementos, solo hace falta darle click a el elemento que queremos añadir(se encuentran en la parte derecha de la ventana) y luego colocarlo en la ventana, en la siguiente imágen estoy agregando un JLabel, que es una etiqueta con un texto inamovible, y que no hará nada masque estar ahí:


Ahora, JDeveloper coloca nombres automáticos a los objetos, como por ejemplo aqui esta JLabel se llama jLabel1, si colocaramos otro sería jLabel2, si colocamos un JButton sería jButton1,etc. Para cambiar el nombre DEL OBJETO, no lo que muestra, lo seleccionamos en el Frame, damos click derecho ->Refactor
->Rename y escribimos el nombre.


Para cambiar el nombre de lo que muestra en el Frame, seleccionamos el elemento que deseamos modificar, y en la parte derecha y abajo, buscamos dentro de la pestaña Visual,  el cuadro donde dice text: debería decir jLabel1, lo cambiamos por lo que deseamos que muestre, en el ejemplo coloqué Hola Mundo!!!.
Podemos hacer lo mismo con cualquier elemento, como botones, para que quede como la siguiente ventana:


Para ejecutar nuestra ventana, solo basta con  presionar F11, o dar click arriba en donde viene el icono de play. 

Nota: La ventana no aparece normalmente, así que si ejecutan la ventana y no aparece, deben ir abajo a donde dice Source, y escribir al final del método jbInit: this.setVisible(true); para que la ventana aparezca al ejecutarla.
Nota*: También aunque al presionar la X para cerrar desaparezca la ventana, el proceso sigue ahí, es decir no se cierra del todo, para arreglar esto es necesario agregar dentro de jbInit(): this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); 


Esta ventana solo es desplegada normalmente y al presionar los botones no haría nada, pero para agregarle dinamismo como: ingresar el nombre y almacenarlo en una variable para después mostrarlo, hace falta aplicar ActionListener y ActionPerformed, esto también lo hace JDeveloper, al darle doble click al botón, inserta un código en Source, que es el siguiente en el caso del ejemplo:
enviar.addActionListener(new ActionListener() {
                public void actionPerformed(ActionEvent e) {
                               //Aqui pondriamos lo que se haría al presionar el botón
                }
            });

Ya lo que se desea que haga al enviar el botón varía dependiendo de el proyecto de la persona, pero en el caso del ejemplo, queremos que al presionar el botón, almacene lo que se ingreso en el campo de texto(JTextField) y lo despliegue en un pop up. Para esto usaremos JOptionPane:

enviar.addActionListener(new ActionListener() {//enviar es el nombre del boton
                public void actionPerformed(ActionEvent e) {
                    enviar_actionPerformed(e);
                         String ans;
                         ans = respuesta.getText();//getText() retorna el texto ingresado en un JTextArea(respuesta)
                 JOptionPane.showMessageDialog(null,"Hola "+ans); //Se muestra el texto ingresado en un pop up                               
                }
            });


El código final es el siguiente:


package hotel;

import java.awt.Dimension;
import java.awt.Rectangle;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import javax.swing.*;

public class Interfaz extends JFrame {
    private JLabel helloLabel = new JLabel();
    private JButton enviar = new JButton();
    private JTextArea respuesta = new JTextArea();
    private JLabel pregunta = new JLabel();
    private JPanel jPanel1 = new JPanel();
    private JPanel jPanel2 = new JPanel();
    private JPanel jPanel3 = new JPanel();

    public Interfaz() {
        try {
            jbInit();
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

    private void jbInit() throws Exception {
        this.getContentPane().setLayout( null );
        this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        this.setSize( new Dimension(400, 300) );
        this.setTitle( "Mi Interfaz" );
        helloLabel.setText("jLabel1");
        helloLabel.setBounds(new Rectangle(105, 20, 180, 30));
        jPanel1.add(pregunta, null);
        jPanel2.add(helloLabel, null);
        jPanel3.add(enviar, null);
        this.getContentPane().add(jPanel3, null);
        this.getContentPane().add(jPanel2, null);
        this.getContentPane().add(jPanel1, null);
        this.getContentPane().add(respuesta, null);
        helloLabel.setText("Hola Mundo!!!");
        enviar.setText("Send");
        enviar.addActionListener(new ActionListener() {
                public void actionPerformed(ActionEvent e) {
                    enviar_actionPerformed(e);
                         String ans;
                         ans = respuesta.getText();
                    JOptionPane.showMessageDialog(null,"Hola "+ans);
                               
                }
            });
        respuesta.setBounds(new Rectangle(125, 110, 180, 40));
        pregunta.setText("Como te llamas?");
        jPanel1.setBounds(new Rectangle(130, 55, 145, 45));
        jPanel2.setBounds(new Rectangle(155, 15, 105, 35));
        jPanel3.setBounds(new Rectangle(95, 170, 215, 55));
        this.setVisible(true);
    }
    public static void main(String[]args){
        Interfaz inter;
        inter = new Interfaz();
    }
}

Aquí se puede ver funcionando:


Y eso es todo cualquier duda, comentario o si me equivoqué en algo porfavor comenten.

Referencias:


-www.oracle.com


Saludos.

2 comentarios:

  1. hola, se ve interesante la explicacion, pero me dice que no tengo un target, que hago?

    ResponderEliminar
  2. Si es lo que creo, el error es en el Default Run Target, tienes que seleccionar una clase como default para que se corra el main de esa clase. Para esto seleccionas la flecha verde que parece play, luego Manage Run Configurations, Edit, y en donde dice Default Run Target, le das browse y buscas el archivo .java que tiene un main para correr.
    Saludos

    ResponderEliminar