graphical user interfaces in java · un’interfaccia grafica (graphical user interface gui ). •...

Informatica Grafica - Luca Grilli 1

GraphicalGraphical UserUser InterfacesInterfaces in Javain Java

Luca GrilliLuca Grilli


Java2D e GUIJava2D e GUI

• L’utilizzo delle Java2D APIJava2D API non può prescinderedalla conoscenza del supportosupporto di Java alla programmazione di applicazioni graficheapplicazioni grafiche generiche.

• In effetti, la visualizzazionevisualizzazione di una qualsiasi informazione avviene all’internointerno di un pannellopannello di una GUIGUI.

• Pertanto, per comprenderecomprendere ed utilizzareutilizzare le funzionalità della grafica 2D in Javagrafica 2D in Java è necessaria una preliminare analisi e conoscenzaanalisi e conoscenza degli aspetti essenziali inerenti il funzionamento di una generica interfaccia grafica GUI.


IntroduzioneIntroduzione

• Per applicazione graficaapplicazione grafica intendiamo un programmaprogramma

in cui l’interazioneinterazione con l’utente avviene mediante

un’interfaccia graficainterfaccia grafica (GraphicalGraphical UserUser InterfaceInterface

GUIGUI).

• Definire un’interfaccia grafica utenteinterfaccia grafica utente (GUIGUI) significa

pertanto definire l’ambiente graficoambiente grafico con cui l’utente

interagirà: finestrefinestre, pannellipannelli, bottonibottoni, aree di testoaree di testo,

etc..


GUI: GUI: NetBeansNetBeans


Applicazioni grafiche in JavaApplicazioni grafiche in Java

• Il linguaggio Java offre un notevole supporto allo sviluppo

di applicazioni grafiche. Le classi che Java mette a

disposizione per la costruzione di GUIcostruzione di GUI sono riunite in due due

packagepackage:

–– javajava.awt.awt (AbstractAbstract Window Window ToolkitToolkit AWTAWT)

–– javaxjavax.swing.swing (Java Java FoundationFoundation ClassesClasses, JFCJFC SwingSwing)

• Per utilizzarle, sarà necessario importareimportare tali package

quando si scrive il codice sorgente di una GUI.

import java.awt.*;import javax.swing.*;

public class MyGUI {/* Corpo della classe */

}


Package AWT e SwingPackage AWT e Swing

• Il pacchetto AWTAWT (javajava.awt.awt) è stato il primo ad essere

rilasciato e stabilisce il nucleonucleo del sistema graficosistema grafico e

l’ossaturaossatura delle classi a partire dalle quali procedere alla

realizzazione delle interfacce.

• Il pacchetto SwingSwing (javax.swingjavax.swing), rilasciato in un secondo

momento, costituisce un’estensione migliorativaestensione migliorativa di AWT.

• Tutte le classi SwingSwing hanno un nome che inizia con la

lettera “JJ” es.: JFrameJFrame, JPanelJPanel, JButtonJButton, etc..

• Si è adottata tale convenzione per distinguerledistinguerle in modo

rapido dalle corrispondenti classi AWT, di cui ne migliorano

le funzionalità, es.: FrameFrame, PanelPanel, ButtonButton (classi di AWT)(classi di AWT).


Componenti AWT e SwingComponenti AWT e Swing

• Una GUI in Java è la composizionecomposizione di un certo

insieme di oggetti elementarioggetti elementari:

–– Componenti SwingComponenti Swing: oggetti del package javaxjavax.swing.swing

–– Componenti AWTComponenti AWT: oggetti del package javajava.awt.awt

• Date le migliori prestazioni, utilizzeremo nel seguito

gli oggetti del pacchetto javax.swingjavax.swing, cioè le

componenti Swingcomponenti Swing.

• Tipicamente le componenti vengono accorpateaccorpate

secondo una struttura gerarchicastruttura gerarchica, cioè è possibile

annidare componenti in altre componentiannidare componenti in altre componenti.


Componenti SwingComponenti Swing• Molte componenti Swing fungono pertanto da contenitoricontenitori

(ContainerContainer) per altre componenti, mentre altre rappresentano delle componenti atomichecomponenti atomiche preposte soltanto ad una specifica funzione e non permettono annidamenti ulteriori.

• Una possibile classificazione delle principali componentiprincipali componentiSwing è la seguente.

–– TopTop--LevelLevel ContainersContainers

–– GeneralGeneral--PurposePurpose ContainersContainers

–– SpecialSpecial--PurposePurpose ContainersContainers

–– Basic Basic ControlsControls

–– UneditableUneditable InformationInformation DisplaysDisplays

–– InteractiveInteractive Display of Display of HighlyHighly FormattedFormatted InformationInformation


TopTop--LevelLevel ContainersContainers• Componenti in cimacima alla gerarchiagerarchia di contenimentocontenimento.

• Almeno una di queste componenti deve essere in ogni applicazione Swing.

–– Finestra classicaFinestra classica javax.swing.JFrameJFrame

–– Finestra di dialogo Finestra di dialogo javax.swing.JDialogJDialog

JFrameJFrame

JDialogJDialog


GeneralGeneral--PurposePurpose ContainersContainers• Contenitori intermediintermedi che possono essere utilizzati in

molteplici circostanzemolteplici circostanze.

–– PannelliPannelli javax.swing.JPanelJPanel

–– Pannello di scorrimento Pannello di scorrimento javax.swing.JScrollPaneJScrollPane

–– Pannello di separazionePannello di separazione javax.swing.JSplitPaneJSplitPane

–– Schede Schede javax.swing.JTabbedPaneJTabbedPane

–– Barra degli Strumenti Barra degli Strumenti javax.swing.JToolBarJToolBar

JPanelJPanel

JScrollPaneJScrollPane

JSplitPaneJSplitPane

JTabbedPaneJTabbedPane JToolBarJToolBar


SpecialSpecial--PurposePurpose ContainersContainers

• Contenitori intermediintermedi che svolgono un ruolo

specificospecifico per lo sviluppo di una GUI.

–– Finestre interneFinestre interne javax.swing.JInternalFrameJInternalFrame

–– Contenitore di tipo Contenitore di tipo layeredlayered javax.swing.JLayeredPaneJLayeredPane

–– Contenitore base Contenitore base (rootroot) javax.swing.JRootPaneJRootPane

JInternalFrameJInternalFrame JLayeredPaneJLayeredPane

JRootPaneJRootPane


Basic Basic ControlsControls• Componenti atomicheatomiche che permettono di ricevere lricevere l’’inputinput

dall’utente. Le più note sono le seguenti.

–– BottoniBottoni javax.swing.JButtonJButton

–– Caselle spuntabili Caselle spuntabili javax.swing.JCheckBoxJCheckBox

–– Caselle di scelta multiplaCaselle di scelta multipla javax.swing.JComboBoxJComboBox

–– ListeListe javax.swing.JListJList

–– MenMenùù javax.swing.JMenuJMenu

–– Bottoni radioBottoni radio javax.swing.JRadioButtonJRadioButton

–– Manopola scorrevole per input numerico Manopola scorrevole per input numerico javax.swing.JSliderJSlider

–– SpinnersSpinners per scelta multipla per scelta multipla javax.swing.JSpinnersJSpinners

–– Campi inserimento testoCampi inserimento testo javax.swing.JTextFieldJTextField

–– Campi inserimento password Campi inserimento password javax.swing.JPasswordFieldJPasswordField


Basic Basic ControlsControls

JButtonJButton

JComboBoxJComboBox JListJList

JMenuJMenuJSpinnerJSpinner

JCheckBoxJCheckBox

JRadioButtonJRadioButton

JSliderJSlider

JTextFieldJTextFieldJPasswordFieldJPasswordField


UneditableUneditable InformationInformation DisplaysDisplays

• Componenti utilizzati al solo scopo di fornire informazioni

all’utente.

–– EtichetteEtichette javax.swing.JLabelJLabel

–– Barre a riempimento progressivo Barre a riempimento progressivo javax.swing.JProgressBarJProgressBar

–– Separatori di sezioniSeparatori di sezioni javax.swing.JSeparatorJSeparator

–– ToolTipToolTip esplicativi esplicativi javax.swing.JToolTipJToolTip

JLabelJLabel

JProgressBarJProgressBar JSeparatorJSeparator

JToolTipJToolTip


Interactive Display of Interactive Display of Highly Formatted InformationHighly Formatted Information

• Queste componenti permettono di visualizzarevisualizzareinformazioni “altamente formattatealtamente formattate” che possono essere modificatemodificate dall’utente.

–– Selettore di coloriSelettore di colori javax.swing.JColorChooserJColorChooser

–– Editor per testo con stile e formattazione modificabile Editor per testo con stile e formattazione modificabile javax.swing.JEditorPaneJEditorPane e javax.swing.JTextPaneJTextPane

–– Selettore di file mediante navigazione del file system Selettore di file mediante navigazione del file system javax.swing.JFileChooserJFileChooser

–– Tabella Tabella javax.swing.JTabelJTabel

–– Area inserimento testo puro Area inserimento testo puro javax.swing.JTextAreaJTextArea

–– Visualizzatore di alberi/gerarchie Visualizzatore di alberi/gerarchie javax.swing.JTreeJTree


JColorChooserJColorChooser

JFileChooserJFileChooser



JTabelJTabel

JEditorPaneJEditorPane

JTextPaneJTextPane

JTreeJTree JTextAreaJTextArea



Progetto di una semplice GUIProgetto di una semplice GUI


La classe La classe RectGUIRectGUI

• Supponiamo di dover progettare una GUIGUI, denominata

RectGUIRectGUI, che deve svolgere le seguenti funzioni.

–– Visualizzare rettangoliVisualizzare rettangoli colorati, bordo nerobordo nero ed interno interno

rossorosso.

– Permettere all’utente di effettuare uno zoom vettorialezoom vettoriale

(zoom inzoom in e zoom outzoom out) premendo gli appositi bottonibottoni e

visualizzando il fattore di scala correntefattore di scala corrente.

– Permettere all’utente di modificare le dimensionimodificare le dimensioni del

rettangolo, svolgendo le seguenti operazioni.

• Inserimento di nuovi valori nei campi di testocampi di testo corrispondenti.

• Pressione del bottonebottone per l’aggiornamento del disegnoaggiornamento del disegno.


RectGUIRectGUI: esempio: esempio


RectGUIRectGUI: gerarchia di contenimento: gerarchia di contenimento

JFrameJFrame



JPanelJPanel

JToolBarJToolBar

JScrollBarJScrollBar

JPanelJPanel



JPanelJPanel

JToolBarJToolBar

JScrollPaneJScrollPane

JPanelJPanel



JPanelJPanel

JToolBarJToolBar

JButtonJButton

JButtonJButton

JLabelJLabel

JLabelJLabel

JTextFieldJTextField

JButtonJButton


La classe La classe RectGUIRectGUI• L’elemento essenzialeessenziale di un’interfaccia grafica è la finestra finestra

principaleprincipale che ospita tutte le altre componenti della GUI.

• La componente Swing che rappresenta una finestra è il JFrameJFrame.

• Per creare un’interfaccia grafica sarà necessario estendereestendereun tradizionale tradizionale JFrameJFrame in modo da personalizzarlo, dotandolo di quelle funzionalità richieste nel particolare contesto di utilizzazione della GUI stessa.:– Inserimento di bottoni per svolgere particolari funzioni.

– Inserimento di pannelli per visualizzare delle informazioni.

– Inserimento di menù e barre degli strumenti etc..

• La classe RectGUIRectGUI dovrà pertanto estendereestendere un JFrameJFrame.


La classe La classe RectGUIRectGUI• L’estensioneestensione di RectGUIRectGUI servirà sia a rendere possibile la

visualizzazione del rettangolovisualizzazione del rettangolo nell’area di disegno sia ad inserireinserire tutte le componenti Swingcomponenti Swing viste nelle slide precedenti. In questo secondo caso si sfruttano le funzionalità di contenitorecontenitore tipiche di un JFrameJFrame.

• In particolare, sappiamo che un frameframe rappresenta un contenitorecontenitore di alto livelloalto livello; in sostanza, un frame è sempre la radiceradice (rootroot) di un albero di componentialbero di componenti.

• Non è tuttavia possibile includere direttamente componentiincludere direttamente componenti in un frame.

• Le componenti vanno invece incluse in quello che si chiama il contentcontent panepane del frame, che è un contenitorecontenitore incluso di defaultdefault in ogni frame.

• Se ff è un oggetto di tipo JFrameJFrame, il riferimento al riferimento al contentcontent panepane di ffpuò essere ottenuto nel seguente modo: f.getContentPanef.getContentPane( )( )

public Container getContentPane()


La classe La classe RectPanelRectPanel• Per una maggiore efficaciamaggiore efficacia di RectGUIRectGUI è conveniente utilizzare come

area di disegnoarea di disegno, per la visualizzazione del rettangolo, un JPanelJPanelposto all’interno di un JScrollBarJScrollBar.

• In questo caso anche se il rettangolo assume dimensioni tali da non essere contenuto nello schermo, il panningpanning permetterà di visualizzarlo utilizzando in modo appropriato le barre scrollabilibarre scrollabili.

• Pertanto, la classe RectGUIRectGUI dovrdovràà contenerecontenere un JScrollPaneJScrollPane che a sua volta dovrà contenere un pannellopannello che rappresenta l’area di area di disegnodisegno.

• L’area di disegnoarea di disegno sarà ottenuta estendendoestendendo un JPanelJPanel in modo tale da sovrascriveresovrascrivere il metodo che spiega come tale componente deve disegnarsi.

• Tipicamente anziché il metodo paintpaint( )( ) si sovrascrivesovrascrive il metodo paintComponentpaintComponent( )( ) del JPanel.

public void paintComponent(Graphics g)


La classe La classe RectPanelRectPanel

• In effetti il metodo paintpaint( )( ) chiama ordinatamente i metodi:

–– paintComponentpaintComponent( )( ): disegna il componente grafico in esame.

–– paintBorderpaintBorder( )( ): disegna i bordi del componente.

–– paintChildrenpaintChildren( )( ): disegna i figli, nella gerarchia di contenimento,

del componente (contenitore) in esame.

• Nel nostro caso utilizziamo un pannellopannello (JPanelJPanel) come area

di disegno che non contiene alcun componente grafico.

• Pertanto l’overridingoverriding può essere limitatolimitato al metodo:

public void paintComponent(Graphics g)


rectDrawer

contPane

toolBar

zoomIn

zoomOut

labelZoom

scrollPane

rectPanel

boottomPanel

textCornerX

textCornerY

textWidth

textHeight

labelCornerX

labelCornerY

labelWidth

labelHeight

changeDimension

Swing Swing componentcomponent di di RectGUIRectGUIjavax.swing.JFrame

java.awt.Container

javax.swing.JButton

java.awt.JLabel

javax.swing.JTextFieldjavax.swing.JPanel

javax.swing.JScrollPane

javax.swing.JToolBar

LEGENDALEGENDA


Architettura della GUIArchitettura della GUI

JFrame

Container contpane;

JToolBar toolBar;

JScrollPane drawingScroll;

RectPanel rectPanel;

JPanel bottomPanel;

RectGUI double x;

double y;

double width;

double height;

double sx; // fattore scala asse x

double sy; // fattore scala asse y

public void paintComponent(Graphics g) {

super.paintComponent(g);

// Codice per disegnare il rettangolo

}

RectPanel

JPanel

graphical user interfaces in java · un’interfaccia grafica (graphical user interface gui ). •...

Documents