Diferència entre revisions de la pàgina «DAM-M3-UF5. Interfícies Gràfiques d'Usuari (GUI)»

Revisió del 23:25, 7 set 2012

torna M3 - Programació

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

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
    }

    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));
        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

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