Laboratorio 04 b:

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: 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' ad essi devono accedere callback di altri - es. i bottoni radio dei colori non hanno callback ma devo poterli guardare per vedere quale e' selezionato), le variabili che li contengono devono essere attributi della nostra classe, cioe' devono essere 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, pannello modo operativo, pannello colore).

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, assieme anche al rectangle painter, secondo lo schema visto a lezione. Attenzione:

• la parte EAST del border layout e' vuota
• 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 del colore
• analogamente la parte NORTH che ospitare sia il pannello dei bottoni che quello delle direzioni

Seconda tappa

Ora dovreste avere l'interfaccia che si disegna ma non reagisce ancora all'interazione dell'utente.

Nello lezione 9.

In questa tappa fate solo i punti da 1 a 4 e il punto 8 (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. Cancellazione del rettangolo selezionato
5. Per ora no: Assegnazione del colore al rettangolo selezionato
6. Per ora no: Portare il rettangolo selezionato sopra o sotto
7. Per ora no: Spostamento del rettangolo selezionato
8. 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 aggiungere i comportamenti da 5 a 8.

Importante

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, o averlo portato sopra o sotto, 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).