La presentazione è in caricamento. Aspetta per favore

La presentazione è in caricamento. Aspetta per favore

Di Tiziana Catania Modulo Java - Unità didattica 5 GUI Graphical Users Interfaces Prof.Cantone SISSIS IV Ciclo - Classe 42A.

Presentazioni simili


Presentazione sul tema: "Di Tiziana Catania Modulo Java - Unità didattica 5 GUI Graphical Users Interfaces Prof.Cantone SISSIS IV Ciclo - Classe 42A."— Transcript della presentazione:

1 di Tiziana Catania Modulo Java - Unità didattica 5 GUI Graphical Users Interfaces Prof.Cantone SISSIS IV Ciclo - Classe 42A

2 Prerequisiti Conoscenza delle interfacce grafiche dal punto di vista dellutente Conoscenza dei fondamenti di Java e della programmazione ad oggetti

3 Obiettivi (1) Essere in grado di creare interfacce grafiche in Java

4 Obiettivi (2) Conoscere i principi generali per progettare uninterfaccia Conoscere i vari componenti GUI e i package che li contengono Sapere come funziona la gestione degli eventi e quali sono gli eventi che possono essere generati Conoscere e saper utilizzare i layout manager

5 Contenuti Principi generali di progettazione I componenti GUI Il modello di gestione degli eventi I layout manager Esempi pratici in laboratorio

6 Metodologia Lezione frontale Lezione dialogata Brainstorming

7 Strumenti Libro di testo Dispense e appunti integrativi Lavagna luminosa e proiettore Computer

8 Verifiche Prove di laboratorio Progetto finale

9 Valutazione Di tipo sommativo Costanza Impegno Partecipazione Prove di lab. Progetto finale Di tipo formativo

10 Tempi Lezione: Laboratorio: Verifica: Recupero e/o potenziamento: 10 ore 8 ore 3 ore 5 ore

11 Cosè una GUI? Inglese: Graphical Users Interfaces Italiano: Interfacce utente grafiche Rappresenta ciò che lutente vede di una applicazione e con cui interagisce effettivamente Es. menu, pulsanti, etc.

12 Principi generali di progettazione deve fornire tutte le funzionalità necessarie per interagire con lapplicazione deve essere progettata secondo criteri di usabilità, cioè deve: - essere intuitiva - permettere allutente di imparare velocemente ad usare le applicazioni - non essere invadente (es.con i colori) Una GUI :

13 I componenti GUI (1) Uninterfaccia grafica è costituita da componenti GUI ossia oggetti con cui lutente può interagire (ad es. col mouse o con la tastiera): - pulsanti - menu - campi di testo - etc…

14 I componenti GUI (2) Per creare componenti GUI in Java, si possono utilizzare due diversi packages: java.awt javax.swing

15 I componenti del package java.awt (Abstract Windowing Toolkit) sono definiti anche componenti pesanti in quanto sono strettamente legati alle capacità GUI della piattaforma locale Il package java.awt Il loro aspetto può variare da una piattaforma allaltra

16 I componenti del package javax.swing fanno parte della piattaforma Java 2 e sono detti anche componenti leggeri in quanto sono stati scritti in Java per cui offrono portabilità e flessibilità Il package javax.swing Il loro aspetto può essere uniforme per tutte le piattaforme o diverso per ogni piattaforma e può variare persino a tempo di esecuzione

17 Per capire come usare i componenti GUI è bene conoscere le seguenti gerarchie di ereditarietà: Gerarchie di classi java.lang.Object java.awt.Component javax.swing.JComponent java.awt.Container

18 Una classe che eredita da Component è un componente La classe Component definisce i metodi che possono essere applicati a un oggetto qualsiasi di qualsiasi sottoclasse di Component (es. paint e repaint) La classe Component

19 Un Container è un Component E costituito da un insieme di componenti collegati luno con laltro Viene usato come riquadro dei contenuti al quale vengono aggiunti i vari componenti col metodo add Col metodo setLayout invece, è possibile specificare un layout manager La classe Container

20 Un Jcomponent è un Container La classe JComponent è la superclasse di molti componenti Swing e definisce diversi metodi che possono essere applicati a un oggetto di qualsiasi sottoclasse di JComponent. La classe JComponent

21 Lutente interagisce con linterfaccia. Possibili interazioni sono: - clic e movimenti del mouse - inserimento di testo - etc. Quando avviene uninterazione, viene inviato un evento al programma Tale evento deve essere ascoltato da un particolare oggetto detto listener ed inviato ad un metodo di gestione appropriato che lo elabora Gestione degli eventi

22 Le classi di eventi sono contenute nei package: - java.awt.event che continuano ad essere utilizzati con i componenti Swing - javax.swing.event che sono stati aggiunti dopo, per definire eventi specifici per i vari tipi di componenti Swing Classi di eventi

23 Un listener degli eventi per un evento GUI è un oggetto di una classe che implementa una o più interfacce listener degli eventi dei package java.awt.event e javax.swing.event Il listener sta in ascolto di specifici eventi che possono essere generati. Quando viene generato un evento esso viene inviato solo ai listener di tipo appropriato: viene chiamato il metodo di gestione dellevento. Listener e gestori (1)

24 Le interfacce listener specificano uno o più metodi di gestione che devono essere definiti (tutti) nella classe che le implementa, altrimenti: la classe risulterà abstract e non potremo utilizzarla per creare oggetti Listener e gestori (2)

25 Per elaborare un evento si deve - registrare un listener degli eventi - implementare un gestore degli eventi Quando si verifica un evento, il componente GUI interessato notifica i suoi (eventuali) listener registrati e viene chiamato automaticamente il gestore per quel tipo di evento. Listener e gestori (3)

26 I componenti GUI JLabel JTextField JButton JCheckBox JRadioButton JComboBox Vedremo il codice più in dettaglio Mostreremo alcuni fondamentali componenti GUI, senza pretendere di esaurire largomento:

27 La classe javax.swing.JLabel è una sottoclasse di JComponent Una label è unetichetta: una singola riga di testo che di solito non viene modificata Non ci sono eventi per loggetto JLabel Vediamo un esempio: la creazione di label con tre diversi costruttori, con diversi argomenti JLabel

28 Esempio con JLabel (1) public class ProvaLabel extends JFrame { private JLabel label1, label2, label3; public ProvaLabel() { super( "Prova di JLabel..." ); Container c = getContentPane(); //ritorna un rif.al //riquadro dei contenuti c.setLayout( new FlowLayout() ); // costruttore JLabel con argomento stringa label1 = new JLabel( "Label con testo" ); label1.setToolTipText( "Questa è la label1" ); c.add( label1 );

29 Esempio con JLabel (2) // costruttore JLabel con stringa, Icon e allineamento //orizzontale Icon libro = new ImageIcon( "libro.gif" ); label2 = new JLabel( "Label con testo e icona", libro, SwingConstants.LEFT ); label2.setToolTipText( "Questa è la label2" ); c.add( label2 ); Un Icon è un oggetto di una classe (in questo caso ImageIcon) che implementa linterfaccia Icon del package javax.swing. ImageIcon supporta immagini GIF e JPEG. SwingConstant.LEFT è una costante definita nellinterfaccia SwingConstant del package javax.swing

30 Esempio con JLabel (3) // costruttore JLabel senza argomenti label3 = new JLabel(); label3.setText( "Label con icona e testo in basso" ); label3.setIcon( libro ); label3.setHorizontalTextPosition( SwingConstants.CENTER ); label3.setVerticalTextPosition( SwingConstants.BOTTOM ); label3.setToolTipText( "Questa è la label3" ); c.add( label3 ); setSize( 260, 220 ); show(); }

31 Esempio con JLabel (4)

32 JTextField La classe JTextField estende la classe JTextComponent del package javax.swing.text. Serve a creare unarea di testo composta da una sola riga su cui scrivere o visualizzare testo. In maniera simile JPasswordField Viene generato un evento se si digita del testo nella casella e si preme Invio Vediamo un esempio:

33 Esempio di JTextField (1) public class ProvaTextField extends JFrame { private JTextField text1, text2; public ProvaTextField() { super( "Prova JTextField" ); Container c = getContentPane(); c.setLayout( new FlowLayout() ); // Costruttore JTextField con 12 colonne di testo text1 = new JTextField( 12 ); c.add( text1 );

34 Esempio di JTextField (2) // Costruttore JTextField con testo di default text2 = new JTextField( "Inserisci il testo" ); c.add( text2 ); TextFieldHandler handler = new TextFieldHandler(); text1.addActionListener( handler ); text2.addActionListener( handler ); setSize( 350, 70 ); show(); }

35 private class TextFieldHandler implements ActionListener { public void actionPerformed( ActionEvent e ) { String s = ""; if ( e.getSource() == text1 ) s = "text1: " + e.getActionCommand(); else if ( e.getSource() == text2 ) s = "text2: " + e.getActionCommand(); JOptionPane.showMessageDialog( null, s ); } Esempio di JTextField (3) Determina il componente GUI interessato Ritorna il testo del JTextField che ha generato levento

36 Esempio di JTextField (4)

37 JButton La classe JButton eredita dalla classe AbstractButton del package javax.swing. Un JButton è un pulsante su cui è possibile fare clic: levento generato è un ActionEvent. Btn1 = new JButton(Vai); crea un JButton con etichetta Vai Btn2 = new JButton(Vai,libro); crea un JButton con etichetta Vai e lIcon libro, con il testo a destra

38 JCheckBox JCheckBox: sono pulsanti di stato con valore true/false a seconda che la casella sia selezionata o meno. Ad esso viene associata unetichetta con il costruttore. Ad esempio: Se lutente seleziona una casella viene generato un ItemEvent che può essere gestito da un ItemListener (un oggetto che implementa linterfaccia ItemListener) il quale deve definire il metodo itemStateChanged chbox = new JCheckBox(Prova);

39 JRadioButton JRadioButton: sono pulsanti di stato con valore true/false a seconda che siano selezionati o meno. A differenza dei JCheckBox, se i pulsanti radio appaiono in gruppo (relazione mantenuta dalloggetto ButtonGroup) solo 1 di essi alla volta può essere selezionato. Se lutente fa clic si genera un ItemEvent. Vediamo un esempio: rbtn1 = new JRadioButton(Scelta A, true); rbtn2 = new JRadioButton(Scelta B, false); (…) radioGroup = new ButtonGroup(); radioGroup.add(rbtn1);radioGroup.add(rbtn2);

40 JComboBox JComboBox: sono i classici elenchi a discesa che mostrano una serie di elementi tra i quali lutente può scegliere. Sono dette anche caselle combinate. Generano gli ItemEvent. Vediamo un esempio: private String names[] = { "autore", "titolo","editore", "prezzo" }; (…) cbox = new JComboBox( names ); cbox.setMaximumRowCount( 3 ); Ad ogni elemento è associato un indice numerico, a partire da 0. Nellesempio, cbox.getSelectedIndex() restituirebbe lindice dellelemento selezionato.

41 I layout manager aiutano a posizionare e dimensionare i vari componenti GUI dellinterfaccia. Ne esistono diversi tipi ma noi vedremo i seguenti: - FlowLayout - BorderLayout - GridLayout I layout manager Creare interfacce grafiche in Java non è semplice

42 FlowLayout Dispone i componenti nel contenitore nellordine in cui vengono aggiunti, da sinistra a destra fino al bordo, per continuare nella riga successiva. Per default i componenti vengono centrati, ma possono essere allineati anche a sinistra o a destra. Per impostare il layout di tipo FlowLayout: layout = new FlowLayout(); c = getContentPane(); c.setLayout(layout); Per modificare lallineamento: layout.setAlignment(FlowLayout.LEFT); //ma ci sono anche CENTER e RIGHT layout.layoutContainer( c ); //il container deve essere organizzato per il nuovo //layout modificato

43 Esempio di FlowLayout

44 BorderLayout Dispone i componenti nel contenitore in cinque aree distinte: North, South, East, West, Center. Si possono riempire tutte o solo alcune. North e South si estendono orizzontalmente fino ai lati e verticalmente quanto i componenti che li contengono. East e West si estendono verticalmente tra North e South e orizzontalmente quanto i componenti che li contengono. Center si estende per lo spazio restante. Se non sono occupate tutte le aree, le altre si espandono come vedremo in un esempio. Per impostare il layout di tipo BorderLayout: Es.layout = new BorderLayout(4,5); //4 gap orizz. 5 vert. c = getContentPane();c.setLayout(layout); Per inserire i componenti: c.add(component, regione); regione può essere: BorderLayout.NORTH, BorderLayout.SOUTH, BorderLayout.EAST etc…

45 Esempio BorderLayout(1) Inseriamo nelle regioni dei componenti JButton etichettati con i nomi delle regioni, per vedere come vengono disposti e dimensionati nel caso in cui li inseriamo tutti o no.

46 Esempio BorderLayout(2)

47 GridLayout Dispone i componenti nel contenitore in righe e colonne, come in una griglia. Ogni componente aggiunto ha le stesse dimensioni degli altri. I componenti vengono aggiunti da sinistra a destra partendo dalla prima riga. Per impostare il layout di tipo GridLayout: Es. layout = new GridLayout(3,2); oppure layout = new GridLayout(3,2,4,4); c = getContentPane(); c.setLayout(layout); (..) c.add(component);

48 Esempio di GridLayout Inseriamo dei componenti JButton in un GridLayout con tre righe e tre colonne

49 Altri layout manager Esistono anche altri layout manager più sofisticati. Li citiamo per completezza ma non li spiegheremo: - BoxLayout - CardLayout - GridBagLayout

50 Considerazioni finali Abbiamo visto come progettare semplici interfacce grafiche in Java. Abbiamo mostrato alcuni esempi di come ciò può essere fatto. La teoria, soprattutto in questo caso, non sostituisce la pratica. E necessario provare e riprovare in laboratorio per vedere i risultati.

51 FINE


Scaricare ppt "Di Tiziana Catania Modulo Java - Unità didattica 5 GUI Graphical Users Interfaces Prof.Cantone SISSIS IV Ciclo - Classe 42A."

Presentazioni simili


Annunci Google