Laboratorio 04:

INTERFACCIA GRAFICA PER I RETTANGOLI

Vedere la lezione 9 per spiegazioni sull'interfaccia grafica da costruire.

Realizziamo quanto illustrato nella lezione 9, procedendo per tappe (ogni tappa corrisponde - salvo aggiustamenti - a un turno di laboratorio):

• Prima tappa: realizzare la parte "estetica" dell'interfaccia grafica (la finestra, i componenti e i pannelli intermedi necessari) senza ancora i comportamenti (gli action listener)
• Seconda tappa: implementare una classe per i rettangoli e iniziare ad aggiungere alcuni comportamenti
• Terza tappa: finire di aggiungere tutti i comportamenti.

Prima tappa

La nostra finestra principale sara' una sottoclasse di Frame che nel costruttore aggiunge a se stessa tutti i dispositivi e i pannelli intermedi che abbiamo individuato a lezione.

Nota:
Per tutti i componenti che devono essere poi manipolati nelle callback (o perche' ad essi sono associate callback o perche' su di essi hanno effetto le callback di altri - es. le etichette non hanno callback ma le loro scritte sono modificate), le variabili che li contengono devono essere attributi, cioe' dichiarate tra le {} della classe, fuori da qualsiasi metodo.
I componenti ausiliari che servono per strutturare la finestra (es. contenitori intermedi) possono anche essere variabili locali al metodo costruttore, cioe' dichiarate tra le {} del costruttore.
Per capirci:

class MiaFinestraPrincipale extends Frame
{
  ...dichiarazioni di attributi qui...

  public MiaFinestraPrincipale // costruttore
  {
    ...dichiarazioni di variabili locali qui...
  }
}

Consigli:
A lezione abbiamo individuato una serie di pannelli che compongono grosse parti della finestra (pannello bottoni, pannello direzioni...). Per adesso lasciamo da parte il pannello del colore, in attesa di decidere quale delle due varianti vogliamo realizzare.
Iniziate a costruire uno ad uno questi pannelli e, dopo averlo costruito, provate a metterlo da solo nel Frame: per esempio con add(pannello,BorderLayout.CENTER) dopo aver assegnato alla finestra il layout manager BorderLayout. Se il risultato e' corretto passate al prossimo pannello (per provare il prossimo pannello basta aggiungere questo invece che il precedente gia' controllato).
Alla fine, dopo aver controllato che funzionano tutti, collocateli tutti insieme nella finestra secondo lo schema visto a lezione. Attenzione: la parte EAST del border layout e' vuota mentre la parte WEST ha bisogno di essere strutturata con un ulteriore pannello intermedio perche' deve ospitare sia il pannello per la scelta del modo operativo che il pannello informazioni sul rettangolo selezionato.

Seconda tappa

Ora dovreste avere l'interfaccia che si disegna (tranne il pannello per l'impostazione del colore corrente) ma non reagisce all'interazione dell'utente.

Scrivete una classe per i rettangoli che implementi l'interfaccia MyRectangle: questo dovrebbe essere abbastanza facile.

Provate ad aggiungere i comportamenti all'interfaccia uno alla volta, secondo le indicazioni riportate nell'ultima parte della lezione 9.

In questa tappa fate solo i punti da 1 a 5, il punto 8 e possibilmente il punto 11 (che avete gia' fatto altre volte):

1. Passaggio in modo disegno
2. Passaggio in modo selezione
3. Aggiunta di nuovo rettangolo (in modo disegno)
4. Stampa automatica delle informazioni quando viene selezionato un rettangolo (in modo selezione)
5. Cancellazione del rettangolo selezionato
6. Per ora no: Assegnazione del colore al rettangolo selezionato
7. Per ora no: Cambio del colore corrente
8. Portare il rettangolo selezionato sopra o sotto
9. Per ora no: Spostamento del rettangolo selezionato
10. Per ora no: Copia del rettangolo selezionato
11. Far terminare il programma quando l'utente chiude la finestra principale

Terza tappa

Ora avete l'interfaccia grafica che si disegna e reagisce ai principali comandi. Restano da fare due cose (in ordine qualsiasi):

• Aggiungere il pannello colori, realizzando una a scelta delle due varianti (specifica del colore selezionando da colori predefiniti o dando le tre componenti rossa / verde / blu) e aggiungere i comportamenti 6 e 7. Ricordo che il comportamento 7 e' necessario solo se si specifica il colore con le tre componenti.
• Aggiungere i comportamenti 9 e 10

Supponiamo che rp sia il nostro rectangle painter all'interno dell'interfaccia grafica.
Dopo aver cambiato il colore di un rettangolo oppure spostato un rettangolo, bisogna chiamare rp.redraw() per forzare il rectangle painter a ridisegnarsi e mostrare la mutata situazione (altrimenti ha cambiato le cose ma non ce ne accorgiamo perche' non viene ridisegnato).