Seminario Swing (I) Primeros Pasos

Swing
Dos tipos de elementos:
Contenedores
JFrame, JApplet, JDialog, JPanel, JScrollPane, JToolBar,

Componentes
Jcualquier-cosa, como JButton, JLabel, JList, JComboBox,

Los contenedores proporcionan el marco de trabajo en el que existen los componentes

Swing

Creacin de una GUI en Java

Instalacin de eclipse
Descomprimir el fichero eclipse-java-galileoSR1-win32.zip

Instalacin del plugin Jigloo

Descomprimir el fichero jigloo_452.zip
features plugins

Copiar contenido de estas carpetas en las del mismo nombre en el directorio de eclipse (no sobreescribir!!)

Creacin del Proyecto

Workspace

Creacin de la Ventana Principal

New > Other > GUI Forms > Swing > JFrame

Paleta de Componentes Estructura de la IU

rea de Diseo de la IU

Cdigo Fuente

Aadir Componentes

Propiedades

Eventos

Creacin de la Ventana Principal

Estudiar el cdigo generado.
setVisible(true); setSize(400, 300); setDefaultCloseOperation(WindowConstants. DISPOSE_ON_CLOSE);

Ejecuta el programa

Cambiar propiedades de la Ventana Principal

Pestaa GUI Properties
Title: Ficha Usuarios Size: height: 280 width: 470 Resizable: false Background: Icon Image Dejamos el layout que los JFrame tienen por defecto

Estudia el cdigo generado

this.setTitle("Fichas Usuarios"); getContentPane().setBackground(new java.awt.Color(128,255,255)); this.setSize(470, 280);

Ejecuta la aplicacin

Cambiar propiedades de la Ventana Principal

Aadiendo una barra de herramientas y una barra de estado

Barra de Herramientas
Pestaa Containers: JToolbar tbBarraHerramientas

Barra de Estado
Pestaa Components: JLabel lblBarraEstado

Aadiendo una barra de herramientas y una barra de estado

Estudia el cdigo generado

private JToolBar tbBarraHerramientas; tbBarraHerramientas = new JToolBar(); getContentPane().add(tbBarraHerramientas, BorderLayout.NORTH);

private JLabel lblBarraEstado; blBarraEstado = new JLabel(); getContentPane().add(lblBarraEstado, BorderLayout.SOUTH); lblBarraEstado.setText("Bienvenido a mi primera aplicacin...");

Ejecutando

Aadiendo botones a la barra de herramientas

Pestaa Components:
JButton
btnGuardar Quitar texto Aadir imagen

GUI Properties
toolTipText

Aadiendo botones a la barra de herramientas

Estudia el cdigo generado
private JButton btnGuardar; btnGuardar = new JButton(); tbBarraHerramientas.add(btnGuardar); btnGuardar.setIcon(new ImageIcon(getClass().getClassLoader().g etResource("imagenes/save.gif"))); btnGuardar.setToolTipText("Guardar");

Rellenando el rea CENTER de la Ventana Principal

Pestaa Containers:
JPanel
pnlPanelFicha pnlPanelFicha = new JPanel(); getContentPane().add(getPnlPanelFicha(), BorderLayout.CENTER); pnlPanelFicha.setLayout(pnlPanelFichaLayout); GUI Properties
Border: TitleBorder

Los paneles, por defecto, usan Flow Layouts

quitar Layout diseos ms flexibles pnlPanelFicha.setLayout(null);

Rellenando el rea CENTER de la Ventana Principal

Rellena el panel de JLabels, JTextFiels, JComboBox y otro JPanel hasta conseguir una GUI con la siguiente apariencia:
pnlFoto lblNombre lblApellidos lblProvincia txtNombre txtApellidos cbProvincia

Rellenando el rea CENTER de la Ventana Principal

Estudia el cdigo generado:
pnlFoto
private JPanel pnlFoto; pnlFoto = new JPanel(); pnlPanelFicha.add(pnlFoto); pnlFoto.setBounds(25, 19, 118, 141); pnlFoto.setBorder(BorderFactory.createTitledBorder("Foto"));

lblNombre
private JLabel lblNombre; lblNombre = new JLabel(); pnlPanelFicha.add(lblNombre); lblNombre.setText("Nombre:"); lblNombre.setBounds(166, 25, 72, 14);

txtNombre
private JTextField txtNombre; txtNombre = new JTextField(); pnlPanelFicha.add(txtNombre); txtNombre.setBounds(236, 22, 195, 21);

Rellenando el rea CENTER de la Ventana Principal

Estudia el cdigo generado:
cbProvincia
private JComboBox cbProvincias; ComboBoxModel cbProvinciasModel = new DefaultComboBoxModel( new String[] { "Item One", "Item Two" }); cbProvincias = new JComboBox(); pnlPanelFicha.add(cbProvincias); cbProvincias.setModel(cbProvinciasModel); cbProvincias.setBounds(291, 95, 140, 21);

Cambia el modelo del ComboBox introduciendo las 5 provincias de Castilla-La Mancha.

Aadimos ms botones a la GUI

btnSalir

btnGuardar2 btnExaminar

Aadiendo Interaccin. Respuesta a Eventos

Aadiendo Interaccin. Respuesta a Eventos

Aadiendo Interaccin. Respuesta a Eventos

Seleccionamos el botn Vamos a la parte inferior derecha de Eclipse (seccin eventos). Evento a capturar: Click de ratn
Oyente: MouseListener Evento: MouseClicked

Aadiendo Interaccin. Respuesta a Eventos

btnSalir.addMouseListener(new MouseAdapter() { public void mouseClicked(MouseEvent evt) { btnSalirMouseClicked(evt); } }); private void btnSalirMouseClicked(MouseEvent evt) { System.out.println("btnSalir.mouseClicked, event="+evt); //TODO add your code for btnSalir.mouseClicked }

btnSalir.addMouseListener(new MouseAdapter() { public void mouseClicked(MouseEvent evt) { System.out.println("btnSalir.mouseClicked, event="+evt); //TODO add your code for btnSalir.mouseClicked } });

Aadiendo Interaccin. Respuesta a Eventos

Ejecuta el programa
Observa que cada vez que pulsas el botn salir aparece un mensaje en la consola Cambia el cdigo que debe ejecutarse cuando se pulsa el botn Salir por:
System.exit(0);

Aadiendo Interaccin. Respuesta a Eventos

Vamos a aadir un mtodo manejador de eventos comn para los 2 botones Guardar (btnGuardar y btnGuardar2). El mtodo manejador debe ser comn para los dos.

Aadiendo Interaccin. Respuesta a Eventos

Aadimos el manejador (handle method) al btnGuardar. btnGuardar.addMouseListener(new MouseAdapter() { public void mouseClicked(MouseEvent evt) { btnGuardarMouseClicked(evt); } }); Vamos a hacer que cuando se pulse dicho botn se modifique la barra de estado, mostrando el mensaje Ficha Guardada.. Para ello modificamos el cuerpo del mtodo manejador de evento.
private void btnGuardarMouseClicked(MouseEvent evt) { lblBarraEstado.setText("Ficha guardada."); }

Aadimos el manejador (handle method) al btnGuardar2. Hacemos que llame tambin al mtodo btnGuardarMouseClicked.

Eliminamos el mtodo que por defecto se ha creado btnGuardar2MouseClicked

btnGuardar2.addMouseListener(new MouseAdapter() { public void mouseClicked(MouseEvent evt) { btnGuardarMouseClicked(evt); } });

Otro JFrame!!
Vamos a hacer que cuando se pulse alguno de los 2 botones Guardar se muestre una ventana con los datos que ha introducido el usuario y un botn de confirmacin de la operacin Creamos otro JFrame
Le llamamos, por ejemplo, VentanaGuardar Ponemos su layout a Absolute para que sea ms fcil posicionar los componentes en ella. Se le pasar un objeto de una nueva clase que vamos a crear llamada Usuario con los datos introducidos por el usuario. Dicho frame contendr una label (lblDatosUsuario) y un botn (btnAceptar).

Clase Usuario
public class Usuario {
private String nombre; private String apellidos; private String provincia; Usuario() {} Usuario (String nom, String apel, String prov) {
nombre = nom; apellidos = apel; provincia = prov;

} String getNombre(){return nombre;} String getApellidos(){return apellidos;} String getProvincia(){return provincia;}

Modificaciones en el fichero VentanaGuardar.java

Un nuevo atributo
private Usuario datosMostrar;

Un nuevo mtodo
public void setDatosMostrar (Usuario usu) { datosMostrar = usu; }

Un nuevo manejador de eventos (cuando la ventana es llamada se deben mostrar los datos del usuario)
Listener: WindowListener Evento: WindowOpened Manejador: this.addWindowListener(new WindowAdapter() { public void windowOpened(WindowEvent evt) { lblDatosUsuario.setText("Datos de "+datosMostrar.getNombre() +" "+datosMostrar.getApellidos()+" de "+datosMostrar.getProvincia()+" guardados"); } });

Modificaciones en el fichero VentanaPrincipal.java

private void btnGuardarMouseClicked(MouseEvent evt) { VentanaGuardar vent = new VentanaGuardar(); vent.setDatosMostrar(new Usuario(txtNombre.getText(), txtApellidos.getText(), (String) cbProvincia.getSelectedItem())); vent.setVisible(true); }

Fin del Ejercicio Prctico!!!!