DICIEMBRE 01, 2012

Introduccin a las interfaces grficas

A medida que vamos adquiriendo mas conocimientos en el mundo de Java,

nos damos cuenta que es indispensable hacer nuestros programas
"bonitos" y para eso necesitamos implementar grficos, imgenes, audio,
etc. Por ahora solo vern una pequeisima y austera parte de como se
puede hacer una interfaz sencilla. Este programa es una ayuda para un
compaero que recurri a Buenas Intenciones para despejar ciertas dudas.
Sin mas prembulos esta es la interfaz que realice:

(El sistema operativo en el que trabaje fue Linux Mint 13 maya)

El cdigo es el siguiente:

view plainprint?

1.

/**

2.

* @author Bello Cerecero

3.

* @since 1-dic-2012

4.

*/

5.

import java.awt.FlowLayout;

6.

import java.awt.event.ActionEvent;

7.

import java.awt.event.ActionListener;

8.

import javax.swing.JButton;

9.

import javax.swing.JFrame;

10.

import javax.swing.JLabel;

11.

import javax.swing.JPanel;

12.

import javax.swing.JTextField;

13.
14.

public class Principal extends JFrame implements ActionListener

15.

16.

private JPanel contenedor;

17.

private JLabel etiquetaToken;

18.

private JLabel etiquetaResultado;

19.

private JTextField cajaToken;

20.

private JTextField cajaResultado;

21.

private JButton botonAceptar;

22.

private JButton botonCancelar;

23.
24.
25.

public Principal()

26.

27.

super("Interfaz");

28.

getContentPane().setLayout(null);

29.

setLocation(100,100);

30.

setSize(380,330);

31.

setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

32.

setResizable(false);

33.

contenedor();

34.

setVisible(true);

35.

36.
37.

public void contenedor()

38.

39.

contenedor = new JPanel();

40.

contenedor.setLayout(null);

41.
42.

etiquetaToken = new JLabel("Tokens");

43.

etiquetaToken.setBounds(30,30,116,16);

44.

contenedor.add(etiquetaToken);

45.
46.

cajaToken = new JTextField();

47.

cajaToken.setBounds(100,25,200,30);

48.

contenedor.add(cajaToken);

49.
50.

botonAceptar = new JButton("Aceptar");

51.

botonAceptar.setBounds(30,100,100,30);

52.

botonAceptar.addActionListener(this);

53.

contenedor.add(botonAceptar);

54.
55.

botonCancelar = new JButton("Cancelar");

56.

botonCancelar.setBounds(220,100,100,30);

57.

botonCancelar.addActionListener(this);

58.

contenedor.add(botonCancelar);

59.
60.

etiquetaResultado = new JLabel("Resultado");

61.

etiquetaResultado.setBounds(30,180,116,16);

62.

contenedor.add(etiquetaResultado);

63.
64.

cajaResultado = new JTextField();

65.

cajaResultado.setBounds(120,175,200,30);

66.

contenedor.add(cajaResultado);

67.
68.
69.

setContentPane(contenedor);
}

70.
71.

public void actionPerformed(ActionEvent evento)

72.

73.

if(evento.getSource() == botonAceptar)

74.

75.

//codigo a ejecutarse al dar clic en aceptar

76.

77.

else if(evento.getSource() == botonCancelar)

78.

79.
80.
81.

//codigo a ejecutarse al dar clic en cancelar

}
}

82.
83.

public static void main(String args [])

84.

85.
86.
87.

Principal ejemplo = new Principal();

}
}

Anlisis: Comenzamos en la linea 5, aqu importamos todas las libreras

que ocuparemos para la realizacin de nuestra interfaz (que son la swing y
la awt), en la linea 14 comenzara nuestra clase la cual se llama "Principal"
que hereda de la clase "JFrame" e implementa "ActionListener".
Aqu haremos un pequeos parntesis para explicar esto un poco mejor, al
decir que nuestra clase "Principal" hereda de la clase "JFrame" estamos
diciendo que nuestra clase hereda todos los mtodos de la clase "JFrame",
as no habr necesidad de declarar un objeto. Al implementar
"ActionListener" estamos diciendo que usaremos su mtodo (que ya se
encuentra declarado en esta interface) el cual se llama "actionPerformed",
est mtodo nos servir para poder manejar los eventos al dar clic en los
botones (ya sea en el botn "aceptar" o en el botn "cancelar").
Continuando con el anlisis, en la linea 16 comenzaremos con la
declaracin de nuestras variables, como vemos ocuparemos un "JPanel"
(linea 16) que tomara el papel de un "contenedor" donde estarn los
botones, las etiquetas y los cuadros de texto (En la siguiente imagen se
describe lo que vendra siendo el JPanel (color rojo)).

Se ocuparan dos etiquetas "JLabel" una que es la que dice "Token" y la otra
es la que dice "Resultado" (La siguiente imagen muestra cuales son las
etiquetas (color azul)).

Tambin usaremos dos cajas de texto (linea 19 y 20) y dos botones (linea
21 y 22).
En la linea 25 declaramos nuestro constructor, en la linea 27 con "super"
pondremos el titulo que tendr nuestra ventana en este caso "Interfaz", en
la linea 28 lo que se esta haciendo es decirle que la ventana no tendr
diseo, en la linea 29 se usa para dar la localizacin que tendr la ventana
en nuestra pantalla, en la linea 30 definimos el tamao de la ventana, en la
linea 31 estamos configurando en botn "cerrar" (la "x" que tienen las
ventanas en la barra de titulo) para que al dar clic en ella el programa se
detenga, en la linea 32 estamos configurando la ventana para que no
pueda cambiar su tamao, en la linea 33 estamos llamando al mtodo
contenedor y en la linea 34 hacemos que la ventana se visible.
En el mtodo "contenedor" (linea 37) configuramos todos los componentes
(posicin y tamao), primero creamos un objeto de tipo JPanel (linea 39),
este panel no tendr diseo (linea 40).
Comenzaremos a configurar la etiqueta token:
Primero declaramos un objeto de la clase "JLabel" al cual le pasaremos de
parmetro como queremos que se visualice en la ventana, en este caso
sera "Tokens" (linea 42), despus definimos la posicin y las dimensiones
que tendr la etiqueta (linea 43) y por ultimo lo agregamos al contenedor
(linea 44).
Ahora va la caja de texto de la etiqueta Tokens:
Primero creamos el objeto del tipo JTextFiel el cual no recibe parmetros
(linea 46), despus le damos la posicin y las dimensiones (linea 47) y por
ultimo lo agregamos al contenedor (linea 48).
Ahora configuramos el botn Aceptar:

Primero creamos el objeto de tipo JButton pasando-le de parmetro el

nombre que llevara el botn en este caso "Aceptar" (linea 50), despus
definimos la posicin y dimensiones que tendr (linea 51), ahora le
aadiremos la accin para poder "reconocer" cuando hagan clic en este
botn (linea 52) y por ultimo lo aadimos al contenedor.
Para los objetos restantes se hace lo mismo. al terminar de configurar todo,
ahora agregamos el contenedor a la ventana (linea 68).
Como ya les haba mencionado al inicio, al implementar ActionListener
tendremos que usar el mtodo "actionPerformed" (linea 71) que recibe de
parmetro el evento, que este caso seria cuando le demos clic a cualquier
botn, y para poder distinguir cual fue el botn que recibi el clic usamos
un if (linea 73). Y ya para poder probar el programa hacemos un main (linea
83).