DAM-M3-UF5. Interfícies Gràfiques d'Usuari (GUI)

Contingut

1 Interfícies gràfiques. GUI

Interfícies gràfiques. GUI

Introducció

Un dels aspectes importants actualment alhora de crear aplicacions és la part gràfica, a continuació es descriuen els mecanismes bàsics de Java per al desenvolupament de GUI (Graphic User Interface).

Una GUI és una Interfase que permet a l’usuari comunicar-se amb el sistema.

Les aplicacions d’entorn gràfic de Java es componen de tres conceptes que es relacionen

Contenidors + Components + Esdeveniments

JFC (Java Foundation Classes) inclou les característiques necessàries per crear GUI. Els paquets que s’utilitzen habitualment per a desenvolupar aplicacions gràfiques són

java.awt.* : Abstract Window Toolkit. Components gràfics del SDK per crear GUI.

java.awt.event.* : Tractament dels esdeveniments associats

javax.swing.* : Ampliació dels components gràfics per crear GUI

Java és un llenguatge multiplataforma i per tant les seves eines gràfiques són també multiplataforma.

Enllaç bàsic i indispensable!!! http://java.sun.com/docs/books/tutorial/uiswing/index.html

Contenidors

Un contenidor és un element base, dins del qual es poden afegir altres elements, els contenidors també actuen com components i es poden afegir dins altres contenidors.

Els Contenidors hereten de la classe abstracta java.awt.Container. Exemples són:

Frames (classe javax.swing.JFrame). Finestra principal

Panels (classe javax.swing.JPanel). Panells on col·locar els components dins la finestra

Applets (classe javax.swing.JApplet). Applets per afegir a pàgines web.

	 	 	 	public class FrameSimple extends JFrame {

    public FrameSimple() {
        super();
        initialize();
    }

    private void initialize() {
        this.setTitle("Finestra Simple");
        this.setSize(350,200); //Mida
        this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        this.setTitle("Finestra simple"); //Títol
        this.setVisible(true); // Propietat de visibilitat
        this.pack(); // Ajusta Frame a la mida dels controls   
}

    public static void main (String args[]) {
        FrameSimple mainFrame = new FrameSimple();
    }
}

Nivells de contenidors

Java utilitza una estructura per nivells per col·locar els diferents elements gràfics, abans de començar a col·locar els components cal estructurar el contenidor.

Normalment el primer contenidor serà un JFrame o JApplet, anomenats Top-Level Containers, i a partir d’aquest es crea una estructura jeràrquica amb diferents contenidors.

Per exemple una estructura típica inclou un JFrame dins del qual tenim per una banda el contenidor (ContentPane) on s’afegeixen els diferents components i un menú.

El ContentPane es pot crear a partir d’un JPanel per exemple setContentPane(contentPane) o obtenir el que hi ha per defecte toplevelContainer.getContentPane(): Container.

        JPanel contentPane = new JPanel(new BorderLayout());
        //... crear components
        JLabel l = new JLabel("Hola");
        contentPane.add(l, BorderLayout.CENTER);
       
        this.setContentPane(contentPane);

Components

Un component és tot allò que es pot pintar a una pantalla i és susceptible de rebre esdeveniments.

Hi ha molts tipus de components o controls, tants com et puguis imaginar.

Etiquetes de text. Classe javax.swing.JLabel

Botons. Classe javax.swing.JButon

Àrees de text. Classe javax.swing.JTextField

Selecció. Classe javax.swing.JChoice

Checkboxes. Classe javax.swing.JCheckbox. Agrupats o no en un Checkboxgroup (classe java.awt.CheckboxGroup)

Llistes. Classe java.swing.JList

Menús. Classe javax.swing.JMenu

Selector de color. Classe javax.swing.JColorChooser

Selector de fitxers. Classe javax.swing.JFileChooser

public class Contenidor extends JPanel {
    public Contenidor() {
        super();
        JLabel etiqueta = new JLabel( "Etiqueta qualsevol", SwingConstants.CENTER );
        etiqueta.setBackground(Color.CYAN);
        etiqueta.setForeground(new Color(255,0,0));
        etiqueta.setOpaque(true);
        etiqueta.setFont(new Font("SansSerif", Font.BOLD, 24));
        this.add(etiqueta);
        JTextArea text = new JTextArea("Camp de Text", 10, 10);
        this.add(text);
        JButton boto = new JButton( "Acció1" );
        this.add(boto);
    }
}

// Afegir el contenidor al Top-Level
//this.setContentPane(new Contenidor());

Organitzadors de components

Els Layout managers (Organitzadors de components), s’encarreguen de gestionar l’esquema general dels components dins els contenidors (a la pantalla), dimensions, alineació, etc...

Els principals són:

	java.awt.BorderLayout. Administrador per defecte dels contenidors Frames. Depenent de la zona respecta o no les dimensions dels components
	java.awt.FlowLayout. Administrador per defecte dels contenidors Panels. Els components es disposen un darrera l’altre, per ordre i quan no caben una nova línia, respecta dimensions dels components
	java.awt.GridLayout. Disposa els elements en una matriu de files i columnes. No respecta dimensions dels components
	java.awt.SpringLayout. És molt flexible, es basa en disposar els elements respecte altres elements o respecte el propi contenidor. Més complex de configurar que els anteriors, però necessari per dissenyar interfícies complexes.
Sense contenidor	Null, També és possible crear un contenidor sense organitzador. És poc recomanable

Exemples,

//Exemple BorderLayout

        this.setLayout(new BorderLayout());
               
        JButton boto1 = new JButton( "boto1" );
        JButton boto2 = new JButton( "boto2");
        JButton boto3 = new JButton( "boto3" );
               
        this.add(boto1, BorderLayout.NORTH);
        this.add(boto2, BorderLayout.SOUTH );
        this.add(boto3, BorderLayout.CENTER);

//Exemple FlowLayout

        this.setLayout(new FlowLayout());
           
        JButton boto1 = new JButton( "boto1" );
        JButton boto2 = new JButton( "boto2" );
        JButton boto3 = new JButton( "boto3" );
           
        this.add(boto1);
        this.add(boto2);
        this.add(boto3);

//Exemple GridLayout

        this.setLayout(new GridLayout(0, 2)); // files (0-Tantes com necessàries) i columnes
               
        JButton boto1 = new JButton( "boto1" );
        JButton boto2 = new JButton( "boto2");
        JButton boto3 = new JButton( "boto3" );
           
        this.add(boto1);
        this.add(boto2);
        this.add(boto3);

//Exemple SpringLayout

        SpringLayout layout = new SpringLayout();
        this.setLayout(layout);
               
        JButton boto1 = new JButton( "boto1" );
        JButton boto2 = new JButton( "boto2");
               
        layout.putConstraint(SpringLayout.WEST, boto1, 5, SpringLayout.WEST, this);
        // Est del botó 1 a 5 de l'est del contenidor
        layout.putConstraint(SpringLayout.NORTH, boto1, 10, SpringLayout.NORTH, this);
        // Nord del botó 1 a 10 del nord del contenidor
        layout.putConstraint(SpringLayout.WEST, boto2, 0, SpringLayout.WEST, boto1);
        // Est del botó 2 igual que est botó 1
        layout.putConstraint(SpringLayout.NORTH, boto2, 10, SpringLayout.SOUTH, boto1);
        // Nord del botó 1 a 10 del nord del contenidor

        this.add(boto1);
        this.add(boto2);

Aparença (Look and Feel)

L’arquitectura de Swing permet modificar l’aparença de l’aplicació i adaptar-la a diferents entorns, així es disposa de les següents configuracions:

CrossPlatformLookAndFeel: L’aparença de Java per defecte (“Metal”) és igual per a totes les plataformes.

SystemLookAndFeel: L’aparença de la plataforma on s’executa l’aplicació.

Synth: Permet crear una aparença personalitzada a partir d’un fitxer XML.

Multiplexing: Per mantenir múltiples aparences alhora.

Per exemple,

    public static void main (String args[]) {
         try {
    // Set cross-platform Java L&F (also called "Metal")
            UIManager.setLookAndFeel(UIManager.getSystemLookAndFeelClassName());
            UIManager.setLookAndFeel("com.sun.java.swing.plaf.motif.MotifLookAndFee");
        }  catch (UnsupportedLookAndFeelException e) {
                   // handle exception
          }  catch (ClassNotFoundException e) {
                   // handle exception
          }  catch (InstantiationException e) {
                   // handle exception
        }  catch (IllegalAccessException e) {
                   // handle exception
        }
        FrameSimple mainFrame = new FrameSimple();
    }

Esdeveniments

Un esdeveniment és qualsevol acció que pot ser tractada pel programa, els esdeveniments són activats per alguna acció de l’usuari (Polsar un botó, prémer una tecla, maximitzar una finestra) i són detectats i comunicats a l’aplicació pel sistema Operatiu.

Sistema de delegació d’esdeveniments

Java tracta els esdeveniments de manera delegada, on intervenen

Font de l’esdeveniment, control sobre el qual es produeix l’esdeveniment

Esdeveniment (Event), generat per una acció de l’usuari sobre un control

Controlador d’esdeveniments o oient (Listener), objecte associat al control, que gestiona els esdeveniments.

La font de l’esdeveniment crea un objecte Event que envia al controlador, i aquest respon a l’esdeveniment, en aquest sentit es diu que el control delega la gestió de l’esdeveniment.

Els paquets utilitzats per a la gestió d’esdeveniments són:

java.awt.event

javax.swing.event (Classes i interfases afegides a l’anterior)

Dins els paquets hi ha:

Les classes per gestionar els objectes esdeveniments (Sufix Event).

Les interfases controladores d’esdeveniments, cal implementar-ne tots els mètodes (Sufix Listener)

Classe abstractes que implementen els mètodes dels controladors buits, per evitar haver d’implementar tots els mètodes de les interfases que en tenen més d’un (Sufix Adapter)

En una aplicació un controlador pot gestionar varis esdeveniments si implementa vàries interfaces, però només un si hereta l'adaptador corresponent.

Per exemple en el cas d’un botó, l’esdeveniment habitual és ActionEvent, i el controlador que gestiona aquests tipus d'esdeveniments és el ActionListener, que només té un mètode:

void actionPerformed(ActionEvent e)

Primer cal implementar el controlador

class CtrlEvent implements ActionListener

Després cal afegir una instància d’aquest com a controlador d’un o múltiples components, cada component tindrà els seus mètodes per afegir controladors que corresponguin.

Componentqualsevol.addActionListener(new CtrlEvent());

Finalment cal escriure els mètodes del controlador que interessin.

class ECtrlEvent implements ActionListener {

      public void actionPerformed(ActionEvent e) {

             System.out.println("actionPerformed()");

      }
}

A la següent taula es mostra les Classes i Interfaces més comuns

Control	Classe	Mètode	Esdeveniment	Interface o Adapter
Finestres	JFrame	void addWindowListener(WindowListener l)	WindowEvent	WindowListener WindowAdapter
Botons	JButton	void addActionListener(ActionListener l)	ActionEvent	ActionListener
Check Box	JCheckbox	void addItemListener(ItemListener l)	ItemEvent	ItemListener
List	JList	void addListSelectionListener(ListSelectionListener listener)	ListSelectionEvent	ListSelectionListener
Text Field	JTextField	void addCaretListener(CaretListener listener)	CaretEvent	CaretListener
Text Area	JTextArea	void addCaretListener(CaretListener listener)	CaretEvent	CaretListener

Els esdeveniment del ratolí es poden programar sobre qualsevol control donat que s’hereten de la classe ComponentEvent.

Control

Mètode

Esdeveniment

Interface o Adapter

Ratolí

void addMouseListener(MouseListener l)

MouseEvent

MouseListener

MouseAdapter

Ratolí

void addMouseMotionListener(MouseMotionListener l)

MouseEvent

MouseMotionListener

MouseMotionAdapter

Per exemple, es pot implmentar el controlador en el propi contenidor

public class Contenidor extends JPanel implements ActionListener {
    private JButton boto1;
    private JButton boto2;
    private JLabel text;
   
    public Contenidor() {
        super();
        boto1 = new JButton( "Acció1" );
        boto1.addActionListener(this);
        boto2 = new JButton( "Acció2" );
        boto2.addActionListener(this);
        text = new JLabel("Text qualsevol");
       
        this.add(boto1);
        this.add(boto2);
        this.add(text);
    }

    public void actionPerformed(ActionEvent e) {
        // TODO Auto-generated method stub
        if ("Acció1".equals(e.getActionCommand()))
            text.setText("botó 1 clicat");
        if ("Acció2".equals(e.getActionCommand()))
            text.setText("botó 2 clicat");
           
    }
}

O també es pot implementar en una classe específica

public class Contenidor extends JPanel {
    private JButton boto1;
    private JButton boto2;
    private JLabel text;
   
    public Contenidor() {
        super();
        boto1 = new JButton( "Acció1" );
        boto2 = new JButton( "Acció2" );
        text = new JLabel("Text qualsevol");
        boto1.addActionListener(new Esdeveniments(text));
        boto2.addActionListener(new Esdeveniments(text));
       
        this.add(boto1);
        this.add(boto2);
        this.add(text);
    }
}

class Esdeveniments implements ActionListener {
    private JLabel text;
   
    public Esdeveniments (JLabel text) {
        this.text = text;
    }
    public void actionPerformed(ActionEvent e) {
        // TODO Auto-generated method stub
        if ("Acció1".equals(e.getActionCommand()))
            text.setText("botó 1 clicat");
        if ("Acció2".equals(e.getActionCommand()))
            text.setText("botó 2 clicat");
    }
}

O també amb una classe anònima

public class Contenidor extends JPanel {
    private JButton boto1;
    private JButton boto2;
    private JLabel text;
   
    public Contenidor() {
        super();
        boto1 = new JButton( "Acció1" );
        boto2 = new JButton( "Acció2" );
        text = new JLabel("Text qualsevol");
        boto1.addActionListener(new ActionListener() {
 
            public void actionPerformed(ActionEvent e)
            {
                //Execute when button is pressed
                System.out.println("You clicked the button");
            }
        });
      
        this.add(boto1);
        this.add(text);
    }
}

Menús

Els menús són un tipus de control més, la diferència amb la resta és la situació dins la jerarquia d’elements.

El menú es col·loca directament al Top-Level Container, obrint una nova branca de descendència a part del contingut Content.

El menú a Swing es compon de diversos elements:

JMenuBar: És la barra de menú on es col·loquen les diferents entrades.

Jmenu: Cadascuna de les entrades a la barra de menú.

JMenuItem: Els diferents ítems dins de cada entrada del menú.

Per exemple es pot crear un menú de la següent manera

public class Menu extends JMenuBar implements ActionListener {
    private JMenu fileMenu = null;
    private JMenuItem exitMenuItem = null;

    public Menu() {
        super();
        initialize();
    }

    private void initialize() {
        fileMenu = new JMenu();
        fileMenu.setText("Arxiu");
        exitMenuItem = new JMenuItem();
        exitMenuItem.setText("Exit");
        exitMenuItem.addActionListener(this);
        fileMenu.add(exitMenuItem);
        this.add(fileMenu);
    }

    public void actionPerformed(ActionEvent e) {
        System.exit(0);
    }
}


//Per afegir-lo al Top-Level Container


     toplevelcontainer.setJMenuBar(new Menu());

Altres controls

JTable

Listeners implementats

public class LaMevaTaula extends PlantillaVista implements ActionListener, ListSelectionListener, MouseListener {

Components

text = new JTextField(50);

String[] COLUMN_NAMES = {"Camp 1", "Camp 2", "Camp 3"};

dataModel = new DefaultTableModel(new Object[0][0], COLUMN_NAMES) {
	public boolean isCellEditable(int row, int col) { return false; }
};

taula = new JTable(dataModel);
taula.getSelectionModel().addListSelectionListener(this);
taula.addMouseListener(this);
DefaultTableCellRenderer leftRenderer = new DefaultTableCellRenderer();
leftRenderer.setHorizontalAlignment( SwingConstants.LEFT );
taula.getColumnModel().getColumn(0).setPreferredWidth(600);
taula.getColumnModel().getColumn(0).setCellRenderer(leftRenderer);
DefaultTableCellRenderer centerRenderer = new DefaultTableCellRenderer();
centerRenderer.setHorizontalAlignment( SwingConstants.CENTER );
taula.getColumnModel().getColumn(1).setPreferredWidth(100);
taula.getColumnModel().getColumn(1).setCellRenderer(centerRenderer);
taula.getColumnModel().getColumn(2).setPreferredWidth(100);
taula.getColumnModel().getColumn(2).setCellRenderer(centerRenderer);
taula.setIntercellSpacing(new Dimension(8,8));
taula.setRowHeight(taula.getRowHeight()+10);
taula.setFillsViewportHeight(true);
taula.setSelectionMode(ListSelectionModel.MULTIPLE_INTERVAL_SELECTION);
JScrollPane staula = new JScrollPane(taula);
staula.setPreferredSize(new Dimension(800,100));
staula.setHorizontalScrollBarPolicy(ScrollPaneConstants.HORIZONTAL_SCROLLBAR_NEVER);
staula.setVerticalScrollBarPolicy(ScrollPaneConstants.VERTICAL_SCROLLBAR_ALWAYS);

Gestió esdeveniments

public void actionPerformed(ActionEvent e) {
		String textSenseEspais = text.getText().trim();

		if ("Desar".equals(e.getActionCommand())) {
			if ("".equals(textSenseEspais)) {
				JOptionPane.showMessageDialog(pare, "Cal indicar alguna cosa", "Error", JOptionPane.ERROR_MESSAGE);
			} else {
				Object[] rowData = new Object[3];
				rowData[0] = text.getText();
				rowData[1] = 0;
				rowData[2] = dataModel.getRowCount();
				dataModel.addRow(rowData);	
				text.setText("");
			}
			return;
		}

		if ("Esborrar".equals(e.getActionCommand())) {
			int[] row = taula.getSelectedRows();
			if (row.length == 0) {
				JOptionPane.showMessageDialog(pare, "No hi ha cap fila seleccionada", "Error", JOptionPane.ERROR_MESSAGE);
				return;
			}
			for (int i = row.length - 1; i >= 0; i--) {
				JOptionPane.showMessageDialog(pare, "Fila esborrada " + (String) dataModel.getValueAt(row[i], 0), "Correcte", JOptionPane.INFORMATION_MESSAGE);
				dataModel.removeRow(row[i]);
			}
			return;
		}
	}

	public void valueChanged(ListSelectionEvent e) {
		/* Canvia la selecció */
		int viewRow = taula.getSelectedRow();
		if (viewRow >= 0) {
			int modelRow = taula.convertRowIndexToModel(viewRow);
			text.setText((String) dataModel.getValueAt(modelRow, 0)); // Posar el valor de la fila seleccionada al camp de text
		}

	}

	public void mouseClicked(MouseEvent e) {
		/* Doble click */
		if (e.getClickCount() > 1) {
			int row = taula.getSelectedRow();
			int column = taula.getSelectedColumn();
			JOptionPane.showMessageDialog(pare, "Valor " + (String) dataModel.getValueAt(row, column), "Info", JOptionPane.INFORMATION_MESSAGE);
		}
	}

	public void mouseEntered(MouseEvent e) {}

	public void mouseExited(MouseEvent e) {}

	public void mousePressed(MouseEvent e) {}

	public void mouseReleased(MouseEvent e) {}

Transformació JFrame a JApplet

Pas 1. Canviar l'herència

Pas 2. Posar el codi d'inicialització al mètode init( ) de l'Applet

Pas 3. Posar el codi de finalització (Si hi ha) al mètode stop( ) de l'Applet

pas 4. Esborrar operacions específiques de Jframe (setVisible per exemple)

pas 5. Esborrar elements específics d'aplicacions d'escriptori (Botó sortir per exemple o menús)

DAM-M3-UF5. Interfícies Gràfiques d'Usuari (GUI)

Contingut

Interfícies gràfiques. GUI

Introducció

Contenidors

Nivells de contenidors

Components

Organitzadors de components

Aparença (Look and Feel)

Esdeveniments

Sistema de delegació d’esdeveniments

Menús

Altres controls

JTable

Transformació JFrame a JApplet

Menú de navegació

Eines de l'usuari

Espais de noms

Variants

Vistes

Més

Cerca

Navegació

Eines