LABORATORIO - INTERFACCE GRAFICHE IN JAVA - I

Vedere dispense su grafica in java.

Non occorre consegnare nulla, questi sono solo esercizi che vi saranno utili per il progetto finale del corso.

SUGGERIMENTO:
E' molto utile programmare tenendo aperta a fianco una finestra sul sito con il manuale on-line delle classi Java: http://java.sun.com/j2se/1.4.2/docs/api/index.html

ESERCIZIO 1

Materiale di partenza

Vedere la descrizione generale del gioco della dama usato per il Le classi Java del progetto.

Per adesso scaricare (da questa pagina) le due classi: Casella, Scacchiera, le altre classi non servono ancora.

Obiettivo

L'obiettivo e' disegnare la scacchiera.
In questo primo esercizio disegneremo la schacchiera nella sua situazione iniziale, cioe' cosi' come viene creata dal costruttore della classe Scacchiera.

Occorre visualizzare 8x8 caselle, dove una casella puo' essere:

• bianca vuota
• nera vuota
• nera occupata da pedina bianca
• nera occupata da pedina nera
• nera occupata da dama bianca
• nera occupata da dama nera

Ci sono varie possibilita'

Il disegno della singola casella puo' essere ottenuto con:

• immagine caricata da file
• disegno con grafica java

Il disegno dell'intera scacchiera puo' essere ottenuto con:

• Una sola area di disegno nella quale si traccia grafica java.
  In questo caso siamo obbligati a usare grafica java (definendo una nostra sotto-classe per es. di pannello che reimplementa la funzione di disegno), anche se abbiamo scelto di realizzare la singola casella con immagine caricata, perche' vanno disegnate piu' immagini sullo stesso componente (il pannello).

• 64 aree di disegno contenute in un pannello organizzato con layout a griglia 8x8.
  In questo caso, se abbiamo scelto di realizzare la singola casella con immagine caricata, possiamo sfruttare il fatto che un componente Java Swing (es. una JLabel) puo' disegnare un'immagine caricata, quindi possiamo usare una classe esistente senza definirne una nuova.
  Se invece abbiamo deciso di realizzare la singola casella con grafica Java, dovremo definire una nostra sotto-classe del tipo di componente appropriato, che reimplementi la funzione di disegno. Tale funzione di disegno disegnera' una tra 6 cose diverse, secondo il contenuto della corrispondente casella della scacchiera.

Avvertenza

Si consiglia di meditare bene la scelta del modo in cui disegnare la scacchiera, anche in vista del progetto. Infatti quanto fatto in questo laboratorio potra' costituire una sotto-parte del progetto gia' svolta.

Per chi ha finito

Mediante la funzione metti della classe Scacchiera, cambiare il contenuto di alcune caselle della scacchiera, in particolare provare a mettere qualche dama e vedere come viene resa graficamente.

Ovviamente non e' necessario che i cambiamenti rappresentino mosse valide, ma ricordare che solo le caselle nere possono ospitare pezzi. Le caselle bianche devono restare vuote!

Notare anche che lo svuotamento di una casella si ottiene mettendo il valore corrispondente a "casella vuota".

NOTA SULLE COORDINATE DI DISEGNO

Le coordinate in cui pensate il disegno della scacchiera (user space o coordinate logiche) sono in generale diverse dalle coordinate della finestra (device space o coordinate fisiche).
Occorre quindi una traduzione.
La traduzione puo' essere fatta in due modi:

• a mano, scrivendo due funzioni int traduciX(double) e int traduciY(double) che al suo interno legge la dimensione corrente della finestra (con getSize) ed esegue i calcoli necessari.
• automaticamente, impostando trasformazioni

Nota: puo' essere gradito mantenere in device space le stesse proporzioni fra x e y che erano in user space. A questo scopo eseguire la stessa scalatura su x e y, usando il fattore piu' piccolo.

ESERCIZIO 2

Materiale di partenza

Scaricare (sempre da questa pagina) altre due classi: Mossa, Gioco, l'ultima classe non serve ancora.

Obiettivo

L'obiettivo e' permettere all'utente di compiere una mossa.

L'utente dovra' specificare in qualche modo la casella di partenza, la casella di arrivo e tutte le caselle intermedie toccate dal pezzo che si muove.
Il sistema controllera' se la mossa e' lecita e in caso affermativo la eseguira'.

Come procedere

Nell'esercizio precedente avrete memorizzato in una variabile un oggetto di classe Scacchiera; ora diventa diventa di classe Gioco (sotto-classe di Scacchiera).

1) Come prima cosa e' utile aggiungere all'interfaccia grafica (che nell'esercizio precedente era una finestra contente solo l'area di disegno):

• Un dispositivo (es. una label) che mostra all'utente a quale colore tocca muovere (il sistema considera non valide le mosse dove il pezzo che si muove e' del colore a cui NON tocca).
• Un dispositivo che mostri all'utente l'esito del tentativo di mossa (se non e' valida). Tale dispositivo potrebbe essere lo stesso del precedente, o un altro, oppure essere reso con una finestra di dialogo.

2) Poi decidere con quale tipo di interazione l'utente specifica le caselle toccate dalla mossa: cliccando sulle caselle col mouse, trascinando il pezzo da muovere, o altro.

3) Data la sequenza di caselle, creare una mossa con la prima casella e usare iterativamente la funzione puoAndare della classe Gioco (nella forma con secondo argomento una casella) per prolungare la mossa alla casella successiva (se possibile), fino all'ultima casella della sequenza.
La classe Gioco trova e memorizza automaticamente nella mossa le caselle corrispondenti ad eventuali pedine mangiate.
Nel caso la mossa non sia valida, la funzione puoAndare memorizza nell'attributo msg dell'oggetto Gioco una stringa corrispondente al tipo di errore.
Nel caso la mossa sia valida, la funzione esegui di Gioco permette di eseguirla. Dopo averla eseguita occorre ritracciare il disegno invocando repaint.

4) Rendere anche, oltre al risultato finale, anche la mossa tentativa mentre questa viene formata (ovvero man mano che la controllo con puoAndare), per es. evidenziando le singole caselle via via che l'utente le clicca, come anche le pedine avversarie mangiate, o mostrando tramite animazione il pezzo che si muove, o altro.

NOTA SUL TRASCINAMENTO

Se scegliete di trascinare il pezzo da muovere con il mouse, allora...

Se disegnate la scacchiera in un unico componente Java, dovete usare su questo un mouse motion listener che implementi la funzione di reazione a movimento del mouse con bottone premuto (mouseDragged).
L'idea e' che io aggangio il pezzo e lo trascino nella direzione del mouse.

Se invece la scacchiera e' resa con una griglia di 8x8=64 componenti Java, bisogna controllare quando il trascinamento esce da un componente ed entra in un altro. Per questo usare mouse listener ed in particolare le funzioni:

• mousePressed per inizio trascinamento (sulla casella di partenza)
• mouseExited e mouseEnetered per cambio casella (il pezzo cessa di essere disegnato sulla casella da cui il mouse esce e inizia ad essere disegnato su quella in cui il mouse entra
• mouseReleased per fine trascinamento (sulla casella di arrivo)

Attenzione: in caso di trascinamento, l'utente tocca anche le caselle contenenti eventuali pedine avversarie da mangiare. Queste NON devono essere controllate mediante la funzione puoAndare (risponderebbe falso perche' il pezzo non si puo' posare su queste caselle): omettere la chiamata a puoAndare sulle caselle occupate dal colore avversario e chiamarla quando il trascinamento ha raggiunto la casella seguente. Se la casella finale della mossa e' occupata ovviamente la mossa non si puo' fare.

E' preferibile lasciare nella posizione originale una copia in colore attenuato (o altro effetto) del pezzo che si sta spostando, per ricordare all'utente da dove e' partito.
Tale effetto deve scomparire a mossa effettuata.