< Indietro | Avanti >

Lezione 1.2: Aggiunta e disposizione della tabella dipendenti

In questa lezione verrà utilizzato l'editor visivo Java per aggiungere un JScrollPane ed una JTable all'applicazione. Negli esercizi successivi, verrà programmata la JTable per ottenere i dati da un servizio Web che restituisce un elenco di tutti i dipendenti nella struttura dell'azienda.

Dopo aver aggiunto la JTable, verrà utilizzata la vista di progettazione dell'editor visivo Java per personalizzare il layout della JTable nel modo seguente:

  • Espandere la JTable su tre celle in orizzontale e due celle in verticale
  • Aggiungere un rientro a sinistra di 15 pixel
  • Ridenominare JTable in employeesTable.

Apertura del file DirectoryApp.java nell'editor visivo Java

Per aprire il file DirectoryApp.java nell'editor visivo Java, procedere come segue:
  1. Nella vista Esplora pacchetti della prospettiva Java, espandere il progetto MyDirectory ed il pacchetto directory.client.
  2. Selezionare il file DirectoryApp.java con il tasto destro del mouse e scegliere Apri con > Editor visivo. L'editor visivo Java carica la classe Java e visualizza la progettazione sull'area di disegno grafica.
Suggerimento:
  • Per modificare l'aspetto utilizzato dall'editor visivo Java, scegliere Finestra > Preferenze > Java > Editor visivo e specificare l'aspetto Swing. Il nuovo aspetto verrà applicato all'apertura successiva della classe. Questa esercitazione utilizza l'aspetto Windows.
  • Affinché l'Editor visivo venga utilizzato come editor predefinito per tutti i file Java, scegliere Finestra > Preferenze, passare alla pagina Workbench > Associazioni file e definire le preferenze.

Aggiunta di una JTable in un JScrollPane

La finestra principale di DirectoryApp.java utilizza un JFrame con JPanel per il riquadro del contenuto principale. JPanel nell'applicazione è denominato jContentPane. jContentPane è stato impostato per utilizzare un tipo di gestore di layout denominato GridBagLayout. GridBagLayout è uno schema di layout basato su una griglia di celle che può essere occupata dai componenti visivi. L'editor visivo Java semplifica l'utilizzo di GridBagLayout consentendo di visualizzare i bordi della griglia. Inoltra mostra gli indicatori di posizione quando nella griglia vengono trascinati nuovi componenti, e mostra gli handler sui componenti che si stanno ridimensionando o spostando sul GridBagLayout.

Per aggiungere la tabella dei dipendenti (javax.swing.JTable) all'interfaccia utente DirectoryApp.java, procedere come segue:
  1. Selezionare jContentPane con il tasto destro del mouse nella vista Progettazione o nella vista Bean Java e scegliere Mostra griglia. Una linea rossa punteggiata mostra il bordo della griglia e cerchi blu, numerati, indicano i numeri delle righe e delle colonne. Ad esempio, il pulsante Nuovo occupa la cella alla riga 1 (griglia y) e la colonna 3 (griglia x).

    Griglia su area di disegno grafica

  2. Nella tavolozza dell'editor visivo Java, selezionare il componente JTable su JScrollPane Icona JTable su JScrollPane Swing, appartenente alla categoria nel cassetto Componenti Swing della tavolozza.
    Suggerimento: Per impostazione predefinita, la tavolozza è ridotta a icona sul lato destro dell'area di progettazione. È possibile ridimensionare e spostare la tavolozza.
  3. Spostare il puntatore del mouse sulla cella nella griglia alla colonna 0, riga 1:

    Inserimento nella griglia

    • Quando si sposta il puntatore del mouse nella griglia, vengono visualizzati due quadrati numerati che indicano le coordinate x e y nella griglia in base alla posizione del puntatore.
    • Se si sposta il puntatore direttamente sul bordo della griglia, sarà possibile creare nuove righe e colonne e, come conseguenza, le righe e le colonne esistenti verranno rinumerate. In questo caso, i quadrati gialli sul puntatore del mouse, le barre gialle tra le griglie e le etichette gialle delle colonne e delle righe indicano questo comportamento ed evidenziano l'impatto del posizionamento.
  4. Fare clic con il tasto sinistro del mouse per trascinare il JScrollPane e la JTable nella cella nella colonna 0 e riga 1:

    Tabella copiata sulla griglia

Unione di JScrollPane e JTable in più colonne e righe della griglia

A questo punto, impostare JScrollPane (e le rispettive JTable secondarie) in modo che occupi tre colonne e due righe per ottenere un miglior comportamento di spaziatura e ridimensionamento. Affinché la tabella occupi le colonne e le righe, procedere come segue:
  1. Selezionare il JScrollPane nell'area di progettazione o nella vista Bean Java (dovrebbe ancora essere selezionato perché è stato appena aggiunto). Osservare i piccoli quadrati verdi in basso e a destra del JScrollPane. Per trascinare JScrollPane affinché occupi più righe e colonne, verranno utilizzati questi handle di ridimensionamento.
  2. Fare clic e tenere premuto il tasto sinistro del mouse sull'handle verde a destra del JScrollPane.
  3. Trascinare il puntatore del mouse verso destra fino a quando la posizione indica la colonna 2, riga 1. Un'ombreggiatura grigia indica le celle che verranno occupate dal componente quando verrà rilasciato il tasto del mouse.

    Tabella trascinata per occupare tre colonne

  4. Rilasciare il tasto del mouse. Il JScrollPane occuperà tre colonne.
  5. Ripetere lo stesso procedimento per spostare l'handle inferiore del JScrollPane affinché arrivi a occupare la riga 2:

    Tabella trascinata per occupare due righe

Personalizzazione della spaziatura del JScrollPane nella GridBag

Un'altra funzione del gestore di GridBagLayout è la possibilità di specificare diversi vincoli per personalizzare ulteriormente il layout. Ad esempio, è possibile specificare i seguenti vincoli:
  • ancoraggio: è possibile assegnare ad un componente un orientamento ancorato nella cella, che influenzerà gli spostamenti del componente quando l'applicazione viene ridimensionata da un utente. Ad esempio un componente potrebbe essere ancorato in alto a sinistra, al centro a sinistra, al centro, o in basso a destra.
  • riempimento: è possibile specificare che un componente occupi tutto lo spazio disponibile nella propria cella o nelle celle orizzontali, verticali o entrambe.
  • rientri: è possibile assegnare ad un componente un particolare rientro sul margine in alto, in basso, a sinistra e a destra per indicare una spaziatura tra il componente e il margine sinistro della griglia.

Per personalizzare l'ancoraggio, il riempimento e i rientri per il JScrollPane, procedere come segue:

  1. Selezionare JScrollPane con il tasto destro del mouse nella vista Progettazione o nella vista Bean Java e scegliere Mostra griglia.

    Menu a comparsa su jScrollPane

    Suggerimento: La finestra Personalizzazione layout può rimanere aperta durante la selezione e la modifica del layout dei diversi componenti. È possibile aprire la finestra Personalizzazione layout in qualsiasi momento scegliendo il pulsante Personalizza layout nella barra dei menu:


    Icona menu Personalizzazione layout

  2. Nella scheda Componente della finestra Personalizzazione layout, assicurarsi che il pulsante Centro di ancoraggio sia premuto.
  3. Assicurarsi che i pulsanti Riempimento orizzontale e Riempimento verticale siano premuti.
  4. Aggiungere un rientro a sinistra di 15 (pixel) per far sì che la spaziatura a sinistra di JScrollPane risulti simile a quella di altri componenti visivi nell'applicazione.

    Finestra Personalizzazione layout

    Ad esempio, la tabella adesso è allineata all'etichetta Filtro.

    Finestra Personalizzazione layout

Ridenominazione della nuova JTable con un valore significativo ed impostazione della tabella affinché selezioni una riga singola

Poiché successivamente sarà necessario utilizzare la tabella, ridenominare l'istanza JTable ed il metodo getter. Per ridenominare la tabella, procedere come segue:
  1. Nella vista Bean Java, selezionare il componente jTable con il tasto destro del mouse e scegliere Rinomina campo dal menu a comparsa.

    Menu a comparsa su jTable

  2. Immettere employeesTable e scegliere OK. JTable adesso si chiama employeesTable, ed il metodo per l'istanza è getEmployeesTable.
  3. Impostare la tabella per consentire di selezionare una singola riga:
    1. Selezionare employeesTable nella vista Progettazione.
    2. Nella vista Proprietà, selezionare la proprietà selectionMode ed impostarla su SINGLE_SELECTION.

      Vista Proprietà che mostra SINGLE_SELECTION su JTable

    3. Salvare il file DirectoryApp.java.

Riepilogo della lezione

In questa lezione è stato illustrato come utilizzare l'editor visivo per aggiungere una tabella ad un'interfaccia utente esistente e come personalizzarne il layout, il posizionamento e la spaziatura.

< Indietro | Avanti >