Java Swing - Pannelli e layout predefiniti

Elementi dell’interfaccia utente Swing: Pannelli Premessa Supponiamo di voler creare la seguente interfaccia utente.

casella di testo (textfield) pulsanti radio (radio button)

pulsante (button)

Figura 1 – 1 – Una  Una semplice UI

L’interfaccia utente contiene i seguenti componenti:  una casella di testo, nella quale l’utente può scrivere;  due pulsanti radio, “Nero” e “Rosso”, che consentono all’utente di scegliere il colore del testo;  un pulsante “Colora” che permette di applicare al testo il colore scelto. Nonostante l’interfaccia sia molto semplice, è impossibile crearla avendo a disposizione solo il frame e il pannello del contenuto. Nella figura seguente viene mostrato come apparirebbe l’interfaccia se si utilizzasse come contenitore dei componenti c omponenti descritti il solo pannello del contenuto.

Figura 2 – 2 – UI  UI con componenti aggiunti al pannello del contenuto

Bocchi Cinzia

15/01/2015

1

Osservando la figura 2 si può notare che i componenti sono disposti in modo diverso dalla UI di figura 1: il pulsante occupa tutta l’area inferiore l’area inferiore del frame e i pulsanti radio si trovano alle estremità della finestra. La causa della diversa disposizione è da attribuire al layout  predefinito del  predefinito del pannello del contenuto. E’ evidente, allora, che non è sufficiente aggiungere componenti alla finestra ma occorre, prima, scegliere il layout più adatto.

Indice 

Layout del pannello del contenuto: layout di bordo



La classe BorderLayout



Modificare il layout predefinito di un contenitore



Pannelli generici e classe JPanel: layout di f lusso



La classe FlowLayout



Creare un pannello come istanza della classe JPanel



Creare un pannello come istanza di una classe derivata da JPanel



Pannelli con Window Builder

Videolezioni (link esterni) 

Java Swing – Swing – Creare  Creare pannelli personalizzati – personalizzati – Parte  Parte 1



Java Swing – Swing – Creare  Creare pannelli personalizzati – personalizzati – Parte  Parte 2



Java Swing – Swing – Creare  Creare pannelli personalizzati – personalizzati – Parte  Parte 3

Bocchi Cinzia

15/01/2015

2

Layout del pannello del contenuto: layout di bordo Il pannello del contenuto è un pannello predefinito che viene creato insieme ad ogni istanza della classe JFrame e sul quale si possono disporre i componenti dell’interfaccia utente. La disposizione non è casuale ma determinata da un ben preciso gestore di layout , cioè una classe che stabilisce in quale modo i componenti devono essere disposti, quando vengono aggiunti ad un contenitore. Il gestore di layout del pannello del contenuto è la classe java.awt.BorderLay classe java.awt.BorderLayout out.. L’area del pannello del contenuto è suddivisa in cinque aree, denominate NORTH, SOUTH, EAST, WEST, CENTER, come mostrato in figura 3.

NORTH

WEST

CENTER

EAST

SOUTH

Figura 3 – 3 – Aree  Aree del pannello del contenuto

Quando si aggiunge un componente al pannello del contenuto occorre specificare in quale delle cinque aree caricarlo. In assenza di indicazioni, il componente verrà inserito nella zona centrale. In ciascuna area si può inserire un solo componente: se ne inseriamo più di uno, verrà visualizzato solo quello aggiunto per ultimo. La dimensione delle aree del pannello del contenuto non è fissa ma si adatta alla dimensione del componente inserito. Tuttavia, il componente occupa tutta l’area a disposizione. disposizione. Per capire meglio, si osservi la figura 2: - il pulsante “Colora” si estende da sinistra a destra, occupando tutta l’area SOUTH; - il pulsante radio “Nero” occupa tutta l’area WEST; l’ area EAST; - il pulsante radio “Rosso” occupa tutta l’area tutta l’area NORTH. - la casella di testo occupa tutta Bocchi Cinzia

15/01/2015

3

La classe BorderLayout

Figura 4 – 4 – La  La classe BorderLayout

La classe BorderLayout definisce 5 stringhe costanti per individuare le aree ove collocare i componenti: - public static final String CENTER; - public static final String EAST; - public static final String NORTH; - public static final String SOUTH; - public static final String WEST; e fornisce i seguenti due costruttori public BorderLayout BorderLayout() () Crea un gestore di layout di bordo senza spazio tra i componenti.

public BorderLayout BorderLayout(int (int hgap, int vgap) Crea un gestore di layout di bordo con lo spazio specificato tra i componenti. Lo spazio orizzontale è denotato con hgap; quello verticale con vgap.

L’inserimento di un componente all’interno di un’area avviene utilizzando il metodo add della classe java.awt.Container  classe java.awt.Container , nel seguente modo: contenitore.add(componente, area);

dove componente  è il componente da aggiungere e area  è una delle 5 costanti della classe BorderLayout viste in precedenza. Per esempio, se si vuole aggiungere il pulsante colora all’area SOUTH del pannello del contenuto, si dovrà scrivere: getContentPane().add(colora getContentPane().add( colora, , BorderLayout.SOUTH ); );

Bocchi Cinzia

15/01/2015

4

Il metodo add  della classe Container è definito in varie forme; nella tabella seguente ne sono indicate due: public Component add add(Component (Component comp)  Aggiunge il componente componente specificato specificato alla fine del contenitore. contenitore.

public Component add add(Component (Component comp, Object constraints)  Aggiunge il componente specificato alla fine del contenitore e notifica al gestore di layout di applicare i vincoli specificati.

Dalle considerazioni fatte, risulta evidente che il layout predefinito del pannello del contenuto non è adatto a realizzare la UI di figura 1. Le strade che possiamo perseguire, per risolvere il problema, sono 3: 1. cambiare il layout del del pannello pannello del contenuto; 2. annullare qualsiasi layout layout e disporre i componenti specificando, specificando, per ciascuno ciascuno di essi, la posizione e la dimensione assolute; 3. utilizzare contenitori contenitori con un diverso diverso layout, layout, i pannelli generici, che che sono istanze della classe JPanel.

Modificare il layout predefinito di un contenitore E' possibile modificare il gestore di layout predefinito mediante il metodo setLayout della classe Container: public void setLayout setLayout(LayoutManager (LayoutManager mgr) Imposta il gestore di layout a mgr.

I gestori di layout di Swing sono numerosi e l’elenco seguente ne riporta solo alcuni tra i più noti1:   BorderLayout   FlowLayout   BoxLayout   GridLayout   GridBagLayout   CardLayout   GroupLayout   SpringLayout I gestori di layout disponibili dovrebbero essere sufficienti a creare la maggior parte delle UI, tuttavia è sempre possibile creare un layout personalizzato, anche se il compito non è banale2. 1

 Maggiori dettagli sui layout: http://download.oracle.com/javase/tutorial/uiswing/layout/visual.html#card layout:  http://download.oracle.com/javase/tutorial/uiswing/layout/visual.html#card  Un esempio di layout personalizzato dal nome FormLayout: http://www.scribd.com/doc/29332215/Esercizio7-Gui-Prenotazioni-Soluzione

2

Bocchi Cinzia

15/01/2015

5

Per cambiare il gestore di layout del pannello del contenuto da BorderLayout a, per esempio, FlowLayout, è sufficiente scrivere: new FlowLayout()); getContentPane().setLayout(new getContentPane().setLayout(  FlowLayout());

Posizionamento assoluto dei componenti Talvolta può essere utile o necessario non servirsi di un gestore di layout, per poter collocare un componente in una posizione "assoluta " assoluta". ". In casi come questo occorre: 1. annullare ogni gestore di di layout, passando come parametro al metodo setLayout il valore null; 2. specificare la posizione e la dimensione del componente, utilizzando il metodo setBounds. Il posizionamento assoluto non rappresenta, comunque, la scelta migliore poiché i componenti, in tal caso, rimangono in posizione fissa anche quando il frame viene ridimensionato dall’utente.

Pannelli generici e classe JPanel: layout di flusso Un pannello generico è usato principalmente per raggruppare i componenti (incluso altri pannelli) da inserire in un contenitore. Per tale motivo, un pannello è al tempo stesso sia un contenitore che un componente. Il layout predefinito dei pannelli generici è il layout di flusso e la classe responsabile della sua gestione è java.awt.FlowLay è  java.awt.FlowLayout out.. Il layout di flusso aggiunge i componenti ad un contenitore da sinistra verso destra come avviene per le linee di testo, ma è possibile modificare l’orientamento l’orientamento da destra verso sinistra. Quando una linea è piena, va a capo automaticamente. I componenti che si trovano su una linea vengono centrati e occupano solo lo spazio necessario per la loro visualizzazione. Un pannello può essere creato come istanza della classe  javax.swing.JPanel   javax.swing.JPanel  o come istanza di una classe derivata da JPanel. Alcuni costruttori della classe JPanel public JPanel JPanel() () Crea un pannello con layout di flusso. f lusso.

public JPanel JPanel(LayoutManager (LayoutManager layout) Crea un pannello con il layout specificato.

Bocchi Cinzia

15/01/2015

6

Figura 5 – 5 – JPanel  JPanel e gerarchia di classi

Bocchi Cinzia

15/01/2015

7

La figura 5 mostra la gerarchia di classi coinvolte nella creazione e gestione di pannelli generici insieme a un elenco parziale di metodi che consentono di impostarne le proprietà.

La classe FlowLayout

Figura 6 – 6 – La  La classe FlowLayout

La classe FlowLayout definisce 5 costanti intere per specificare l’allineamento dei componenti: - public static final int CENTER; - public static final int LEFT; - public static final int RIGHT; - public static final int LEADING; - public static final int TRAILING; Le prime 3 costanti consentono di allineare i componenti di una riga rispettivamente al centro (default), a sinistra e a destra. Le costanti LEADING e TRAILING  hanno un significato che dipende dall’orientamento definito nel contenitore:  se l’orientamento è LEFT_TO_RIGHT (default), determinano lo stesso effetto delle costanti LEFT e RIGHT; se l’orientamento è RIGHT_TO_LEFT, determinano un allineamento “invertito”, cioè  rispettivamente uguale a RIGHT e LEFT.

Bocchi Cinzia

15/01/2015

8

La figura seguente mostra la UI di figura 1, nella quale l’allineamento è centrato per impostazione predefinita, con allineamento LEFT e RIGHT.

 Allineamento LEFT  LEFT 

Allineamento RIGHT

Figura 7 – 7 – Allineamento  Allineamento dei componenti di contenitore con layout di flusso

La classe FlowLayout fornisce i seguenti tre costruttori: public FlowLayout FlowLayout() () Crea un gestore di layout layout di flusso con allineamento allineamento centrato e uno spazio spazio orizzontale e verticale verticale tra i componenti pari a 5 unità.

public FlowLayout FlowLayout(int (int align) Crea un gestore di layout di flusso con verticale tra i componenti pari a 5 unità.

l’allineamento l’allineamento specificato e uno spazio orizzontale e

public FlowLayout FlowLayout(int (int align, int hgap, int vgap) Crea un gestore di layout di flusso con componenti specificati.

allineamento, spazio spazio orizzontale orizzontale e verticale verticale tra i

Tra i metodi della classe FlowLayout si evidenziano i seguenti: public int getAlignment getAlignment() () Restituisce l’allineamento del layout. Il valore restituito è una delle costanti definite nella classe.

public boolean getAlignOnBaseline getAlignOnBaseline() () Restituisce true  se i componenti devono essere allineati verticalmente alla loro linea base. Il valore di default è false.

public int getHgap getHgap() () Restituisce lo spazio orizzontale tra i componenti e tra i componenti e i bordi del contenitore.

public int getVgap getVgap() () Restituisce lo spazio verticale tra i componenti e tra i componenti e i bordi del contenitore. Bocchi Cinzia

15/01/2015

9

public void setAlignment setAlignment(int (int align) Imposta l’allineamento del layout al valore specificato. Il parametro è una delle costanti definite nella classe.

public void setAlignOnBaseline setAlignOnBaseline(Boolean (Boolean b) Specifica se i componenti devono essere allineati verticalmente alla loro linea base. Il valore di default è false. I componenti che non possiedono una linea base vengono centrati.

public void setHgap setHgap(int (int hgap) Imposta lo spazio orizzontale tra i componenti e tra i componenti e i bordi del contenitore al valore specificato.

public void setVgap setVgap(int (int vgap) Imposta lo spazio verticale tra i componenti e tra i componenti e i bordi del contenitore al valore specificato.

Creare un pannello come istanza della classe JPanel Prima di creare pannello occorre solo stabilire quale layout utilizzare per disporre i componenti al suo interno. Esistono molte altre proprietà definibili per i pannelli, ma nessuna è determinante in questa fase e, pertanto, l e andremo a considerare in seguito. Il layout di un pannello può essere definito quando si crea una sua istanza, utilizzando il costruttore con parametro LayoutManager, oppure si può modificare con il metodo setLayout. Il codice seguente crea due pannelli con layout di flusso e con sfondo di diverso colore e li aggiunge a un frame nelle aree CENTER e SOUTH. 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20

import java.awt.BorderLayout; import java.awt.BorderLayout; import java.awt.Color; import  java.awt.Color; import java.awt.EventQueue; import  java.awt.EventQueue; import javax.swing.JFrame; import  javax.swing.JFrame; import javax.swing.JPanel; import  javax.swing.JPanel; @SuppressWarnings("serial" @SuppressWarnings( "serial") ) public class class MyFrameAndPanel  MyFrameAndPanel extends extends JFrame  JFrame {

Bocchi Cinzia

public public public public

static static static static

final final final final

int int int int

 = 450; WIDTH  =  = 300;  HEIGHT  =  X  =  = 100;  = 100; Y  =

public MyFrameAndPanel() public  MyFrameAndPanel() { initialize(); } 15/01/2015

10

21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50

private void void initialize()  initialize() { //Inizializzazione del frame setTitle("MyFrame" setTitle("MyFrame"); ); setSize(WIDTH ,  HEIGHT ); ); setLocation( X , Y ); ); setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); //Inizializzazione del pannello CENTER JPanel centerPane centerPane =  = new new JPanel();  JPanel(); centerPane.setBackground(Color. centerPane .setBackground(Color.GRAY ); ); //Inizializzazione del pannello SOUTH JPanel southPane southPane =  = new new JPanel();  JPanel(); southPane.setBackground(Color. southPane .setBackground(Color.BLACK ); ); //Aggiunta dei pannelli al frame getContentPane().add(centerPane getContentPane().add( centerPane, , BorderLayout.CENTER); getContentPane().add(southPane getContentPane().add( southPane, , BorderLayout.SOUTH ); ); } public static void void main(String[]  main(String[] args args) ) { EventQueue.invokeLater(new new Runnable()  Runnable() { public void void run()  run() { MyFrameAndPanel frame frame =  = new new MyFrameAndPanel();  MyFrameAndPanel(); frame.setVisible( frame .setVisible(true true); ); } }); } } MyFrameAndPanel

righi 27-29 Viene creato il pannello centerPane come istanza di JPanel e viene impostato il colore di sfondo a Color.GRAY. righi 30-32 Viene creato il pannello southPane come istanza di JPanel e viene impostato il colore di sfondo a Color.BLACK. righi 34-36 I due pannelli vengono aggiunti al pannello del contenuto del frame nelle aree ar ee desiderate. Il frame generato ha l’aspetto mostrato in figura 8.

Bocchi Cinzia

15/01/2015

11

Figura 8 – 8 – Il  Il frame generato dal codice MyFrameAndPanel

Creare un pannello come istanza di una classe derivata da JPanel Un pannello può essere creato come istanza di una classe derivata da JPanel. Tale scelta può essere motivata dalla necessità di definire un contenitore da riutilizzare più volte in diversi frame. Come esempio viene mostrata una classe che definisce un pannello con le seguenti proprietà:  layout di flusso con allineamento dei componenti a sinistra;  sfondo grigio chiaro;  colore del testo grigio scuro;  cursore a forma di mano;  font Verdana 12 punti. I metodi coinvolti nell’impostazione nell’impostazione di tali proprietà sono riassunti nella seguente tabella, ad eccezione di quelli già illustrati in precedenza. Classe java.awt.Component

Metodo public Color getBackground getBackground() () Restituisce il colore di sfondo del componente.

java.awt.Component

public Cursor getCursor getCursor() () Restituisce il cursore impostato per il componente. La classe Cursor incapsula numerose tipologie di cursori, definendo apposite costanti intere. Per il momento, consideriamo solo le seguenti:  il mirino, CROSSHAIR_CURSOR – CROSSHAIR_CURSOR  – il   il cursore predefinito del sistema,  DEFAULT_CURSOR – DEFAULT_CURSOR  – il  la manina,  HAND_CURSOR – HAND_CURSOR  – la  il cursore per il testo,  TEXT_CURSOR – TEXT_CURSOR  – il l’attesa .  WAIT_CURSOR – WAIT_CURSOR  – il cursore per l’attesa. Se il componente non ha un cursore impostato, viene restituito quello del genitore. Nel caso non sia impostato alcun cursore

Bocchi Cinzia

15/01/2015

12

nell’intera nell’intera gerarchia, g erarchia, viene restituito il DEFAULT_CURSOR.

java.awt.Component

public Font getFont getFont() () Restituisce il font impostato per il componente. Se nessun font è stato impostato, viene restituito il font dei componenti genitori.

java.awt.Component

public Color getForeground getForeground() () Restituisce il colore di primo piano del componente.

java.awt.Container

public LayoutManager getLayout getLayout() () Restituisce il gestore di layout del componente.

javax.swing.JComponent public void setBackground setBackground(Color (Color bgColor) Imposta il colore di sfondo del componente a quello specificato. Il colore viene applicato solo se il componente è opaco.

java.awt.Component

public void setCursor setCursor(Cursor (Cursor cursor) Imposta il cursore del componente a quello specificato. Per creare un cursore da passare come parametro a tale metodo occorre scrivere: component.setCursor(Cursor. getPredefinedCursor( Cursor.TYPE)); dove component è il componente al quale applicare la proprietà e Cursor. TYPE è uno dei tipi di cursore definiti nella classe Cursor.

javax.swing.JComponent public void setForeground setForeground(Color (Color fgColor) Imposta il colore di primo piano del componente.

javax.swing.JComponent public void setFont setFont(Font (Font font) Imposta il font del componente componente a quello specificato. Occorre scrivere: component.setFont(new Font( fontFamily, style, size));

Il codice che definisce il pannello personalizzato è il seguente: 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15

import java.awt.Color; import java.awt.Color; import java.awt.Cursor; import  java.awt.Cursor; import java.awt.FlowLayout; import  java.awt.FlowLayout; import java.awt.Font; import  java.awt.Font; import javax.swing.JPanel; import  javax.swing.JPanel; @SuppressWarnings("serial" @SuppressWarnings( "serial") ) public class class MyPanel  MyPanel extends extends JPanel  JPanel { public MyPanel() { public MyPanel() //Crea il pannello con layout di flusso e allineamento a sinistra super( super (new new FlowLayout(FlowLayout.  FlowLayout(FlowLayout.LEFT )); )); //Imposta il colore di sfondo a grigio chiaro setBackground(Color.LIGHT_GRAY ); );

Bocchi Cinzia

15/01/2015

13

16 17 18 19 20 21 22 23 24

//Imposta il colore del testo a grigio scuro setForeground(Color. DARK_GRAY ); ); //Imposta il cursore a forma di mano setCursor(Cursor.getPredefinedCursor(Cursor. HAND_CURSOR)); //Imposta il font a Verdana 12 punti setFont(new setFont(new Font(  Font("Verdana" "Verdana", , Font.PLAIN , 12)); } } MyPanel versione 1

Una versione leggermente diversa del codice prevede l’utilizzo di un metodo privato initialize  per inizializzare il pannello. In tale caso non sarà più possibile utilizzare la chiamata esplicita al costruttore di JPanel, effettuata con super, e si dovrà ottenere il riferimento al gestore di layout per modificare l’allineamento. Vediamo le modifiche apportate al codice. 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

import java.awt.Color; import java.awt.Color; import java.awt.Cursor; import  java.awt.Cursor; import java.awt.FlowLayout; import  java.awt.FlowLayout; import java.awt.Font; import  java.awt.Font; import javax.swing.JPanel; import  javax.swing.JPanel; @SuppressWarnings("serial" @SuppressWarnings( "serial") ) public class class MyPanel  MyPanel extends extends JPanel  JPanel { public MyPanel() public  MyPanel() { initialize(); } private void void initialize()  initialize() { //Imposta l'allineamento a sinistra ((FlowLayout) getLayout()).setAlignment(FlowLayout.LEFT ); ); //Imposta il colore di sfondo a grigio chiaro setBackground(Color.LIGHT_GRAY ); ); //Imposta il colore del testo a grigio scuro setForeground(Color. DARK_GRAY ); ); //Imposta il cursore a forma di mano setCursor(Cursor.getPredefinedCursor(Cursor. HAND_CURSOR)); //Imposta il font a Verdana 12 punti setFont(new setFont(new Font(  Font("Verdana" "Verdana", , Font.PLAIN , 12)); } } MyPanel versione 2

Bocchi Cinzia

15/01/2015

14

rigo 19 Il metodo getLayout  restituisce il riferimento al gestore di layout del pannello. Il riferimento, però, è di tipo LayoutManager e, di conseguenza, occorre convertirlo nel tipo FlowLayout effettuando l’opportuno cast. Sul cast. Sul riferimento così ottenuto viene poi invocato il metodo setAlignment per impostare l’allineamento a sinistra. Consideriamo ora il codice della classe MyFrame versione 5 3. 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32

import java.awt.EventQueue; import java.awt.EventQueue; import javax.swing.JFrame; import  javax.swing.JFrame; @SuppressWarnings("serial" @SuppressWarnings( "serial") ) public class class MyFrame  MyFrame extends extends JFrame  JFrame { public public public public

static static static static

final final final final

int int int int

 = 450; WIDTH  =  = 300;  HEIGHT  =  X  =  = 100;  = 100; Y  =

public MyFrame() { public MyFrame() initialize(); } private void void initialize()  initialize() { setTitle("MyFrame" setTitle("MyFrame"); ); setSize(WIDTH ,  HEIGHT ); ); setLocation( X , Y ); ); setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); } public static void void main(String[]  main(String[] args args) ) { EventQueue.invokeLater(new new Runnable()  Runnable() { public void void run()  run() { MyFrame frame frame =  = new new MyFrame();  MyFrame(); frame.setVisible( frame .setVisible(true true); ); } }); } } MyFrame versione 5

Indipendentemente dalla versione di MyPanel scelta, per aggiungere il pannello al frame conviene definire una variabile di istanza di tipo MyPanel nella classe MyFrame, piuttosto che definire l’istanza di MyPanel come variabile locale al metodo initialize. Definendo una variabile di istanza si avrà a disposizione il riferimento al pannello e si potrà accedere ai suoi componenti ogni volta che ce ne sarà bisogno. 3

 Si veda la dispensa https://www.scribd.com/doc/252750274/01-Java-Swing-Creare-Finestre-Top-Level dispensa https://www.scribd.com/doc/252750274/01-Java-Swing-Creare-Finestre-Top-Level

Bocchi Cinzia

15/01/2015

15

Il codice seguente mostra come aggiungere il pannello MyPanel al frame MyFrame versione 5. 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43

import java.awt.BorderLayout; import java.awt.BorderLayout; import java.awt.EventQueue; import  java.awt.EventQueue; import javax.swing.JFrame; import  javax.swing.JFrame; import panel2.MyPanel; import  panel2.MyPanel; @SuppressWarnings("serial" @SuppressWarnings( "serial") ) public class class MyFrame extends JFrame  MyFrame extends  JFrame { public public public public

static static static static

final final final final

int int int int

WIDTH  =  = 450;  HEIGHT  =  = 300;  = 100;  X  = Y  =  = 100;

private MyPanel private  MyPanel centerPane centerPane; ; public MyFrame() { public MyFrame() initialize(); } private void void initialize()  initialize() { //Inizializzazione del frame setTitle("MyFrame" setTitle("MyFrame"); ); setSize(WIDTH ,  HEIGHT ); ); setLocation( X , Y ); ); setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); //Creazione del pannello centerPane = centerPane  = new new MyPanel();  MyPanel(); //Aggiunta del pannello al frame getContentPane().add(centerPane getContentPane().add( centerPane, , BorderLayout.CENTER); } public static void void main(String[]  main(String[] args args) ) { EventQueue.invokeLater(new new Runnable()  Runnable() { public void void run()  run() { MyFrame frame frame =  = new new MyFrame();  MyFrame(); frame.setVisible( frame .setVisible(true true); ); } }); } } MyFrame versione 6

Il codice produce la UI di figura 9.

Bocchi Cinzia

15/01/2015

16

Figura 9 – 9 – La  La UI generata dal codice MyFrame versione 6

Pannelli con Window Builder La creazione di un pannello con le proprietà specificate in precedenza diventa un’operazione semplice e veloce se si usa Window Builder. Sia MyFrame la classe creata con Window Builder. Vediamo quali sono le azioni da svolgere per ottenere il frame di figura 9. 1) Aggiunta del pannello al frame Si seleziona JPanel  JPanel   dalla P Palette  alette  e si aggiunge il componente all’area centrale del pannello del contenuto.

Figura 10 – 10 – Aggiunta di un pannello all’area CENTER del pannello del contenuto

Bocchi Cinzia

15/01/2015

17

2) Impostazione del Layout di flusso con allineamento a sinistra Dopo aver selezionato il pannello, nella finestra delle proprietà si espande Layout  Layout  e si imposta alignment a alignment a LEFT.

LEFT

Figura 11 – 11 – Modifica dell’allineamento del gestore di layout

3) Impostazione dei colori di sfondo sf ondo e primo piano Nella finestra delle proprietà si imposta background  background   a LIGHT_GRAY e foreground a DARK_GRAY.

LIGHT_GRAY DARK_GRAY

Figura 12 – 12 – Modifica  Modifica dei colori di sfondo e di primo piano

Bocchi Cinzia

15/01/2015

18

4) Impostazione del cursore e del font Nella finestra delle proprietà si preme il pulsante che mostra le impostazioni avanzate e, successivamente, successivamente, si modifica cursor  a  a HAND_CURSOR e font a font a Verdana, PLAIN, 12. Pulsante per visualizzare le impostazioni avanzate HAND_CURSOR

Verdana, PLAIN, 12

Figura 13 – 13 – Impostazione  Impostazione del cursore e del font

Il codice generato automaticamente da Window Builder è i l seguente: 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

import java.awt.EventQueue; import java.awt.EventQueue; import javax.swing.JFrame; import  javax.swing.JFrame; import javax.swing.JPanel; import  javax.swing.JPanel; import java.awt.BorderLayout; import  java.awt.BorderLayout; import java.awt.FlowLayout; import  java.awt.FlowLayout; import java.awt.Color; import  java.awt.Color; import java.awt.Cursor; import  java.awt.Cursor; import java.awt.Font; import  java.awt.Font; public class class MyFrame  MyFrame {

Bocchi Cinzia

private JFrame private  JFrame frame frame; ; /** * Launch the application. */ public static void void main(String[]  main(String[] args args) ) { EventQueue.invokeLater(new new Runnable()  Runnable() { public void void run()  run() { try { try  { MyFrame window window =  = new new MyFrame();  MyFrame(); true); window. window .frame frame.setVisible( .setVisible(true ); } catch catch (Exception  (Exception e) { e.printStackTrace(); } } }); } 15/01/2015

19

29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56

/** * Create the application. */ public MyFrame() public  MyFrame() { initialize(); } /** * Initialize the contents of the frame. */ private void void initialize()  initialize() { frame = frame  = new new JFrame();  JFrame(); frame.setBounds(100, frame .setBounds(100, 100, 450, 300); frame.setDefaultCloseOperation(JFrame. frame .setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); JPanel panel panel =  = new new JPanel();  JPanel(); panel.setFont( panel .setFont(new new Font(  Font("Verdana" "Verdana", , Font.PLAIN , 12)); panel.setCursor(Cursor. panel .setCursor(Cursor.getPredefinedCursor(Cursor. HAND_CUR SOR)); panel.setForeground(Color. panel .setForeground(Color. DARK_GRAY ); ); panel.setBackground(Color. panel .setBackground(Color.LIGHT_GRAY ); ); FlowLayout flowLayout flowLayout =  = (FlowLayout) panel panel.getLayout(); .getLayout(); flowLayout.setAlignment(FlowLayout. flowLayout .setAlignment(FlowLayout.LEFT ); ); frame.getContentPane().add( frame .getContentPane().add(panel panel, , BorderLayout.CENTER); } } MyFrame con pannello centrale versione Window Builder

Quest'opera è distribuita con Licenza Creative Commons Attribuzione - Condividi allo stesso modo 4.0 Internazionale

Bocchi Cinzia

15/01/2015

20