Lezione 08:

INTERFACCE GRAFICHE IN JAVA - II

Componenti Java

Una interfaccia e' fatta da:

• Finestre o contenitori top-level (sempre almeno una)
• Contenitori intermedi che servono per collocare i dispositivi dentro le finestre (idea delle scatole cinesi)
• Dispositivi di base incaricati di mostrare informazioni e/o catturare input

In Java tutti questi sono detti componenti e sono classi che ereditano dalla classe base Component (oppure MenuComponent).

                                 Component
                                     |
          +--------+--------+--------+----------+----------
          |        |        |        |          |           
      Container  Button  Checkbox  Label  TextComponent ...
          |                                     |
  +-------+-----------+                    +----+----+  
  |       |           |                    |         |
Panel  ScrollPane  Window             TextField   TextArea
                      |
                  +---+---+
                  |       |
                Frame   Dialog

                  MenuComponent
                        |
                +-------+--------+
                |                |
             MenuItem          MenuBar
                |
         +------+------+
         |             |
 CheckboxMenuItem    Menu 
                       |
                    PopupMenu

Panoramica sui componenti Java

Citiamo solo i piu' interessanti. Per gli altri e anche per descrizione dettagliata delle classi e dei loro metodi ved. il manuale in linea http://java.sun.com/j2se/1.4.2/docs/api/index.html.

Contenitori Top-level o finestre:

• Frame: finestra primaria di un'applicazione, esiste per tutto il tempo in cui l'applicazione e' in esecuzione
• Dialog: finestra secondaria di dialogo, serve come finestra temporanea per mostrare o chiedere informazioni (non la vediamo)

Contenitori intermedi:

• Panel: pannello semplice
• ScrollPane: pannello con barre di scorrimento
• Menubar: barra di menu' associata ad un frame

Dispositivi inerti (solo grafica, cioe' solo output verso l'utente):

• Label: etichetta testuale

Dispositivi attivi o di controllo (grafica e comportamento, cioe' anche input dall'utente):

• Button: bottone semplice
• Checkbox: bottone a due stati on / off
• TextField: campo di input testuale a linea singola
• TextArea: area di testo su piu' linee
• Choice: insieme di alternative da cui posso selezionarne una (non lo vediamo)
• List: lista di alternative da cui posso selezionarne una o un gruppo consecutivo (non lo vediamo)

Ciascun tipo di dispositivo di controllo e' adatto a ricevere un certo tipo di input.

Gerarchia di contenimento

Un contenitore puo' contenere dispositivi o altri contenitori. Un contenitore intermedio e' contenuto in un altro contenitore, che puo' essere top-level o intermedio.

Si ha una gerarchia di contenimento separata per ogni finestra dell'interfaccia (es: due se ho una finestra principale e una finestra di dialogo).

La gerarchia di contenimento e' descritta da un albero dove la relazione padre-figlio rispecchia la relazione di contenimento.

• finestre: radici della foresta
• contenitori intermedi: nodi interni della foresta
• dispositivi: foglie della foresta

Nota bene: La "gerarchia" di contenimento rappresenta la relazione di contenimento fra i componenti (componente figlio occupa un'area di schermo "ritagliata" dentro quella del componente padre).
Non ha niente a che vedere con la "gerarchia" delle classi nel paradigma object-oriented (che rappresenta invece la relazione super-classe / sotto-classe).

Ogni contenitore ha un layout manager che stabilisce in che modo gli oggetti devono essere dislocati al suo interno.

Layout Management

Processo di stabilire automaticamente dimensioni e posizione delle componenti all'interno di un contenitore. Ogni contenitore (sia top-level che intermedio) ha un layout manager.

I layout manager sono oggetti di classi che implementano l'interfaccia Java AWT "LayoutManager".

Potrei lavorare senza layout manager, ma allora dovrei fornire posizione assoluta di ogni componente all'interno del contenitore, ed avrei problemi quando il contenitore top-level viene redimensionato dall'utente.

La super-classe Container ha i seguenti metodi, che percio' sono ereditati da tutte le classi di contenitori:

• void setLayout(LayoutManager layout) -- stabilisce il layout manager
• Component add(Component c) -- aggiunge un componente nel contenitore
• Component add(Component c, int posizione) -- aggiunge un componente nel contenitore nella posizione specificata rispetto al layout manager

Classi di layout manager

• FlowLayout: tutti in fila con andata a capo
• BorderLayout: centro + 4 punti cardinali
• GridLayout: griglia con righe e colonne, tutte le celle di uguale misura
• GridBagLayout: griglia con righe e colonne dove un componente puo' occupare piu' righe e/o piu' colonne (non lo vediamo)
• CardLayout: permette a due componenti di coesistere su un'area essendo visualizzati in alternativa uno all'altro (non lo vediamo)

Esempio

Il programma ExLayout.java accetta Flow, Border, o Grid come opzioni da command line e mostra questi tre layout in azione. Crea 5 etichette con sfondo di colori diversi e le dispone secondo il layout specificato.

Inizialmente impacchetta la finestra nel minimo spazio sufficiente. Quando l'utente cambia le dimensioni alla finestra, il layout manager ne riadatta il contenuto.

FlowLayout (tutti i fila)

I componenti sono messi uno dopo l'altro orizzontalmente finche' ci stanno, poi si va a capo e si forma un'altra linea, ecc.

Costruttori della classe FlowLayout:

• FlowLayout()
• FlowLayout(int allineamento) -- specificando il criterio per l'allineamento dei componenti all'interno del contenitore, il parametro allineamento puo' essere uno tra FlowLayout.LEFT, FlowLayout.RIGHT, FlowLayout.CENTER (componenti allineate a sinistra, a destra o centrate)
• FlowLayout(int allineamento, int spazX, int spazY) -- idem ma specificando anche la spaziatura, in pixel, tra i componenti

Per aggiungere componenti si usa il metodo "add" nella forma senza posizione. I componenti sono messi in fila nello stesso ordine in cui sono aggiunti.

BorderLayout (centro + 4 punti cardinali)

Il contenitore e' diviso in 5 zone:

+--------------------------+
|          NORTH           |
+------+------------+------+
| EAST |   CENTER   | WEST |
+------+------------+------+
|          SOUTH           |      
+--------------------------+

La zona CENTER tende ad occupare tutto lo spazio eccedente quando la finestra viene allargata.

Cosruttori della classe BorderLayout:

• BorderLayout()
• BorderLayout(int spazX,int spazY) con spaziatura specificata, in pixel, fra i componenti contenuti

Per aggiungere componenti si usa la forma di "add" con la posizione, che e' una fra BorderLayout.NORTH, BorderLayout.SOUTH, BorderLayout.EAST, BorderLayout.WEST, BorderLayout.CENTER.
Il componente viene aggiunto a quella specificata tra le 5 zone.
Va messo un solo componente per zona! E' permesso lasciare vuote alcune zone, che assumeranno dimensione nulla.

GridLayout (griglia)

Il contenitore e' organizzato a tabella con un certo numero di righe e colonne.

Cosruttori della classe GridLayout:

• GridLayout(int numrighe, int numcolonne)
• GridLayout(int numrighe, int numcolonne, int spazX, int spazY) con spaziatura specificata, in pixel, fra i componenti contenuti

Per aggiungere componenti si usa la forma di "add" senza posizione.
I componenti vengono aggiunti nell'ordine a riempire la griglia riga dopo riga:

+---+---+---+---+
| 1 | 2 | 3 | 4 |
+---+---+---+---+
| 5 | 6 | 7 | 8 |
+---+---+---+---+

Generalita' sui componenti Java

Abilitazione e disabilitazione

Un componente puo' essere disabilitato cioe' gli puo' essere impedito di ricevere eventi. Per default e' abilitato.

Di solito si disabilitano i dispositivi di controllo che corrispondono ad opzioni non sensate nello stato corrente dell'applicazione. I dispositivi non attivi sono distinguibili graficamente (es: colore meno intenso).

Metodi della classe Component per abilitazione e disabilitazione:

• boolean isEnabled() -- controlla se in questo momento il componente e' abilitato
• void setEnabled(boolean b) -- abilita o disabilita, secondo il valore dell'argomento booleano

Dimensioni e allineamenti

Le dimensioni di un componente non sono in genere fissate:

• per le finestre: il programma fissa una dimensione iniziale, ma poi l'utente puo' redimensionare la finestra
• per i contenitori intermedi e i dispositivi: la loro dimensione effettiva dipende dalla gerarchia di contenimento e dai layout manager che vengono applicati

Posso assegnare a un componente delle dimensioni specificate, ma di solito queste non verranno rispettate da Java:

• per dispositivi e contenitori intermedi puo' essere prevaricata dalla gerarchia di contenitori e layout manager
• per finestre viene inizialmente assegnata ma puo' essere modificata dall'utente

Per assegnare dimensioni e posizione a un componente, Java tiene conto di informazioni fornite dal componente:

• tre dimensioni (minima, massima e preferita), specialmente quella preferita
• due allineamenti (orizzontale e verticale) rispetto ai componenti vicini

Metodi della classe Component:

• int getHeight() -- restituisce l'altezza in pixel
• int getWidth() -- restituisce la larghezza in pixel
• Dimension getSize() -- restituisce la dimensione cioe' la coppia larghezza, altezza
• void setSize(int width, int height) oppure void setSize(Dimension d) -- assegna dimensioni specifiche (con le limitazioni spiegate sopra)
• Dimension getMinimumSize(), getMaximumSize(), getPreferredSize() -- restituiscono le dimensioni minime, massime e preferite, queste saranno usate dai layout manager per dimensionare il componente
• float getAlignmentX() e getAlignmentY() -- restituiscono un numero tra 0 e 1 che specifica come questa componente e' allineata a quella vicina: 0 = allineamento all'origine, 1 = allineamento all'estremita' opposta all'origine, 0.5 = allineamento centrato, ecc.

Java AWT fornisce metodi solo per leggere le dimensioni preferite e gli allineamenti (nome che inizia per "get").
Hanno valori di default (es. per un bottone la dimensione preferita e' quella grande a sufficienza per mostrare tutta l'etichetta e non piu' grande del necessario).
Per cambiare il default l'unico modo e' definire una sotto-classe che re-implementi la funzione "get" corrispondente.

Impacchettamento

I contenitori top-level (finestre) hanno metodo

• void pack() -- assegna alla finestra le dimensioni minime sufficienti a mostrare tutto il suo contenuto

Da chiamare dopo aver aggiunto tutte le componenti e sottocomponenti alla finestra e prima di renderla visibile.

Usa i layout manager di tutti i contenitori presenti nella gerarchia di contenimento che ha per radice la finestra.

Per la visualizzazione

Le finestre appena costruite sono per default non visibili, le devo rendere visibili da programma con apposita istruzione (setVisible).

Gli altri componenti sono per default visibili all'interno del contenitore che li contiene, purche' questo sia visibile.
Un componente sara' visibile sullo schermo se e' visibile e lo sono anche tutti i contenitori risalendo la gerarchia di contenimento fino alla finestra radice.

Metodi comuni a tutti i componenti (appartengono alla super-classe Component):

• boolean isVisible() -- restituisce se il componente e' visibile all'interno del suo contenitore (se non finestra) o sullo schermo (se finestra)
• void setVisible(boolean b) -- lo rende visibile / non visibile all'interno del suo contenitore (se non finestra) o sullo schermo (se finestra).
• void setBackground(Color c) -- assegna il colore di sfondo
• void setForeground(Color c) -- assegna il colore di evidenza

Dispositivi in Java

Etichetta

Serve per mostrare informazioni. Esempi: un titolo, un messaggio di istruzioni o di errore.

Classe Java AWT "Label".

Costruttori della classe Label:

• Label() -- etichetta vuota (serve come riempitivo in alcuni layout manager, es. per lasciare caselle vuote in una griglia)
• Label(String text) -- etichetta col testo specificato, allineato a sinistra
• Label(String text, int alignment) -- idem ma con allineamento specificato, che puo' essere uno fra Label.LEFT, Label.RIGHT, Label.CENTER

Metodi interessanti della classe Label:

• void setText(String text) -- assegna il testo dell'etichetta
• String getText() -- restituisce il testo dell'etichetta

Bottone di comando (command button)

Classe Java AWT "Button".

Serve per invocare un'operazione. Esempio: bottone per chiudere una finestra.

Ha l'aspetto di un rettangolo con un'etichetta testuale che indica l'operazione corrispondente.

Sensibile al click del mouse (evento di azionamento del bottone). Durante il click il bottone cambia aspetto per dare feedback che e' stato azionato.

• classe di evento Java: ActionEvent
• listener corrispondente: ActionListener
• metodo di ActionListener da implementare per realizzare la callback: void actionPerformed(ActionEvent e)

Costruttori della classe Button:

• Button() -- senza etichetta
• Button(String label) -- con etichetta la stringa specificata

Metodi interessanti della classe Button:

• void addActionListener(ActionListener l) -- associa action listener che implementa la callback di risposta all'evento di attivazione
• String getLabel() -- restituisce l'etichetta del bottone
• void setLabel(String label) -- assegna l'etichetta

Bottone a due stati (check button o check box)

Classe Java AWT "Checkbox".

Serve per impostare selezione o non selezione di una scelta.

Ha l'aspetto di una casellina (in Java quadrata) con un'etichetta testuale accanto. Il quadrato puo' contenere una crocetta (o altro segno), la cui presenza o assenza denota lo stato della scelta.
Nel suo stato interno ha un valore booleano (selezionato o non selezionato).

Sensibile al click del mouse (evento cambiamento di stato). Al click lo stato del bottone si inverte (da selezionato a non selezionato o viceversa), dandone feedback grafico.

• classe di evento Java: ItemEvent
• listener corrispondente: ItemListener
• metodo di ItemListener da implementare per realizzare la callback: void itemStateChanged(ItemEvent e)

Costruttori della classe Checkbox:

• Checkbox(String label) -- con etichetta specificata e stato non selezionato
• Checkbox(String label, boolean state) -- con etichetta e stato specificato
• Checkbox(String label, boolean state, CheckboxGroup group) -- idem, inserendolo nel gruppo specificato, serve a creare gruppi di bottoni radio (ved. dopo)

Metodi interessanti della classe Checkbox:

• void addItemListener(ItemListener l) -- associa item listener che implementa la callback di in risposta all'evento di selezione
• String getLabel() -- restituisce l'etichetta testuale
• void setLabel(String label) -- assegna l'etichetta testuale
• boolean getState() -- restituisce se e' selezionato
• void setState(boolean state) -- assegna lo stato di selezionato o non selezionato (importante: non fa scattare il listener!)

Metodi interessanti della classe ItemEvent, parametro della funzione (callback) itemStateChanged di ItemListener:

• int getStateChange() -- restituisce il nuovo stato, che puo' essere uno fra ItemEvent.SELECTED e ItemEvent.DESELECTED

• Object getSource() -- restituisce l'oggetto (che e' un componente) sul quale si e' verificato l'evento, puo' essere convertito forzatamente alla classe specifica

Gruppi di bottoni a due stati, bottoni radio

Spesso si hanno gruppi di bottoni a due stati, con due possibili politiche:

• Scelte indipendenti:
  Ciascun bottone puo' essere selezionato indipendentemente

• Scelte mutuamente esclusive (radio button):
  In ogni momento solo un bottone puo' essere selezionato (selezionarne uno automaticamente disseleziona quello precedente).
  Si dice gruppo di bottoni radio.

Un bottone radio e' un check box creato nel contesto di un certo gruppo (il gruppo e' un oggetto di classe CheckboxGroup).
Classe Checkbox ha un costruttore che prende come argomento un gruppo, il bottone viene creato all'interno di quel gruppo. I check box creati nello stesso gruppo lavorano in modo mutuamente esclusivo.

Java distingue graficamente i checkbox indipendenti da quelli che fanno parte di un gruppo radio tramite diversa foma della casellina (rispettivamente un quadrato o un rombetto).

Esempio

Il programma ExButtons.java mostra i tre tipi di bottoni (di comando, check box, radio).

Esercizio: aggiungere la gestione degli eventi (facendo stampare qualcosa su standard output ad ogni bottone).

Campo di testo (text field o text box)

Classe Java AWT "TextField".

Permette l'introduzione di input testuale. Esempio: nome utente per login.

Ha l'aspetto di un'area rettangolare in cui l'utente inserisce il testo. Quando l'utente clicca all'interno dell'area, appare un cursore, i caratteri digitati successivamente sulla tastiera sono diretti al campo di input e vengono mostrati (echo) come feedback.

Sensibile a quando l'utente preme return all'interno dell'area di inserimento (evento di azionamento).

Costruttori della classe TextField:

• TextField() -- campo di testo vuoto
• TextField(int columns) -- vuoto con numero di colonne specificato
• TextField(String text) -- contenente la stringa specificata
• TextField(String text, int columns) -- con la stringa specificata e numero di colonne specificato

Metodi interessanti della classe TextField:

• void addActionListener(ActionListener l) -- associa action listener che implementa la callback di risposta all'evento di attivazione
• String getText() -- restituisce la stringa contenuta
• void setText(String t) -- assegna la stringa contenuta
• setEditable(boolean b) -- stabilisce se il campo e' editabile dall'utente, di default e' editabile, puo' essere utile renderlo non editabile in alcune situazioni
• boolean isEditable() -- restituisce se il campo e' editabile in questo momento

Area di testo

Classe Java AWT "TextArea".

Area di testo a piu' linee, eventualmente munita di scroll bar (barre di scorrimento).

La gestione degli eventi e' complessa. Posso gestire anche selezione di parti di testo...

Costruttori della classe TextArea:

• TextArea() -- area di testo vuota con barre di scorimento
• TextArea(int rows, int columns) -- area di testo vuota con numero specificato di righe e colonne
• TextArea(String text) -- area di testo contenente la stringa specificata, con barre
• TextArea(String text, int rows, int columns) -- idem e grande il numero specificato di righe e colonne
• TextArea(String text, int rows, int columns, int scrollbars) idem ma con specifico criterio usato per decidere se mostrare le barre di scorrimento, il parametro "scrollbars" puo' essere uno tra:
• SCROLLBARS_BOTH, SCROLLBARS_VERTICAL_ONLY, SCROLLBARS_HORIZONTAL_ONLY, SCROLLBARS_NONE.

Metodi interessanti della classe TextArea:

• getText(), setText, setEditable, isEditable -- gia' visti per TextField
• altri metodi per editare la stringa contenuta (inserire, cancellare, sostituire, concatenare testo...)

Esempio

Il programma ExText.java mostra un campo e un'area di testo. L'area di testo riporta ogni volta cio' che l'utente digita nel campo di testo.

  menubar = new MenuBar();
  f.setMenubar(menubar);

Nell'esempio ExScrollPane.java e' stata definita una classe LargeLabel che estende la classe Label (etichetta) re-implementando getPreferredSize a 400x400 pixel. Provate a vedere che succede mettendo una Label semplice invece che una LargeLabel.

Menu' e voci di menu' in Java

Menu' permette scelta di un'opzione da una lista di voci prefissata.

Un menu' consiste di:

• etichetta = titolo del menu'
• tendina a scomparsa che presenta una lista di alternative dette voci o elementi di menu' (menu items)

Ha l'aspetto di un rettangolo con un'etichetta (titolo del menu'). Quando l'utente preme il mouse sul rettangolo, appare una tendina con una lista di scelte (le voci del menu') rappresentate da etichette testuali.
L'utente si sposta col mouse all'interno della tendina e seleziona la voce desiderata.
La selezione genera un evento.

I tipi di voci di menu' ricalcano i tipi di bottoni (di commando o a due stati).
Una voce a due stati ha associato un riquadro o altro elemento grafico (visualizzato di lato) che puo' essere selezionato oppure no.

Tipi di menu'

Un menu' puo' essere:

• Pull-down (o drop-down):
  La sua etichetta e' permanentemente visibile sulla barra di menu' di una finestra; quando l'utente la aziona appare la tendina
• A cascata (o sotto-menu'):
  La sua etichetta appare come voce in un altro menu'; quando tale voce viene selezionata appare la tendina con le voci di questo menu'.
  La presenza di un menu' a cascata e' indicata graficamente (es: da una freccia) in corrispondenza dell'elemento a cui e' attaccato il sotto-menu'.
• Pop-up (o menu' contestuale):
  Normalmente invisibile, la tendina appare quando utente clicca su un certo componente al quale il menu' e' stato prima associato

Classi in Java AWT:

• MenuItem: voce di menu'
• CheckboxMenuItem: voce a due stati
• Menu: menu' semplice, puo' essere usato come voce di un altro menu' (e' infatti sotto-classe di MenuItem), realizzando in tal modo menu' a cascata, oppure puo' essere aggiunto alla barra di menu' di una finestra
• PopupMenu: menu' contestuale a scomparsa o pop-up (non lo vediamo)
• MenuBar: barra di menu' di una finestra

Costruzione di menu'

1) Costruisco un menu' vuoto, costruisco le voci e le aggiungo al menu':

  menu1 = new Menu("Primo menu'");
  menu1.add (new MenuItem("voce semplice"));
  menu1.add (new CheckboxMenuItem("voce a due stati"));

2a) Inserisco il menu' sulla barra di menu' di una finestra:

  bar = new MenuBar();
  frame.setMenuBar(bar);
  bar.add(menu1);

2b) Inserisco invece il menu' come sotto-menu' di un altro, realizzando in tal modo un menu' a cascata. Basta aggiungerlo come se fosse una voce di menu':

  menu2 = new Menu("super menu'");
  menu2.add (menu1);
  menu2.add("una voce");  
  menu2.add("altra voce");

Eventi nei menu'

Quelle che reagiscono a eventi sono le singole voci dei menu'.

• Voci di menu' semplici (MenuItem) sono sensibili a ActionEvent, come i bottoni di comando -- devo definire un ActionListener
• Voci di menu' a due stati (CheckboxMenuItem) sono sensibili a ItemEvent, come i bottoni a due stati -- devo definire un Item ActionListener

Esempio

Il programma ExMenu.java costruisce una finestra con tre menu': due posti sulla barra e uno posto come sotto-menu' del primo di questi. Ogni scelta ha come callback la stampa dell'etichetta della voce di menu' selezionata.