LABORATORIO - INTERFACCE GRAFICHE IN JAVA

Obiettivo

L'obiettivo e' realizzare in Java un'interfaccia che visualizza un grafo piano.

Un grafo piano e' descritto da:

• Un'area rettangolare del piano nel quale il grafo e' interamente contenuto. Tale area, chiamata dominio e' specificata dalle sue coordinate (x0,y0) minime (angolo in basso a sinistra), dall'ampiezza sulle x e dall'ampiezza sulle y.
• Il numero nv di vertici e il numero na di archi.
• Le coordinate (x,y) di ciascun vertice.
• I vertici estremi (a,b) di ciascun arco.

Nota: il sistema di coordinate nel quale e' espresso il grafo e' un sistema a coordinate reali che non ha nessuna relazione coi pixel dello schermo.

L'interfaccia grafica deve fornire le seguenti funzionalita':

• Caricare / scaricare un grafo.
• Visualizzare il grafo, disegnando i vertici come pallini e gli archi come segmenti di linea retta.
• Eseguire traslazione in orizzontale e in verticale. La traslazione e' controllata dal movimento del mouse a bottone premuto (vedere dettagli dopo).
• Eseguire zoom in e zoom out (cioe' scalatura), tenendo fermo il centro del dominio del grafo. Lo zoom e' controllato per mezzo di bottoni o di slider (vedere dettagli dopo).

Piano di lavoro

Procederemo per gradi:

1. prima facciamo la progettazione generale dell'interfaccia
2. quindi la lettura del grafo
3. e il disegno
4. poi mettiamo le traslazioni
5. infine lo zoom

Non occorre consegnare nulla, questo e' solo un esercizio che vi sara' utile 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

1) Progettazione generale

L'interfaccia dovra' contenere

• dispositivo per aprire un file grafo (caricando il grafo dal file)
• dispositivo per chiudere un file grafo (scaricandolo da memoria)
• ovviamente, il pannello in cui si disegna il grafo
• dispositivi per controllare lo zoom

Come dispositivi per aprire e chiudere un grafo si possono usare, a scelta:

• un menu' con due voci "open" e "close"
• due bottoni

A scelta, per controllare lo zoom si possono usare:

• tre bottoni:
  • uno che ingrandisce di un tot
  • uno che rimpicciolisce dello stesso tot
  • uno che riporta alle condizioni iniziali (situazione in cui nessun comando di zoom era stato mai azionato)
• uno slider per eseguire zoom da un fattore minimo a uno massimo, inizialmente lo slider ha il cursore in una posizione intermedia corrispondente a nessuno zoom applicato

Effettuare la scelta, disegnare lo schema dell'interfaccia (che mostra dove sono collocati i vari dispositivi).
Determinare quale gerarchia di contenimento e quali layout manager sono necessari per ottenere la configurazione voluta.

Scrivere il codice Java che ottiene l'interfaccia, per adesso nessun dispositivo reagira' ancora all'interazione con l'utente.

Il pannello in cui si disegna il grafo per adesso sara' una sotto-classe di Panel o di JPanel, dove e' ridefinita getPreferredSize per ottenere dimensioni di default non nulle (come nell'esempio ExDraw1 delle dispense). Non viene disegnato ancora nulla al suo interno.

2) Leggere un grafo

Chiedere all'utente il nome del file usando il dispositivo predefinito Java per chiedere un file (FileDialog o JFileChooser, vedere dispense e manuale in linea di Java).

E' fornita la classe MyReader per leggere da file, tale classe ha le seguenti funzioni:

• Costruttore MyReader(String) apre in lettura un file di nome dato, puo' sollevare eccezione, per es. se il file non esiste.
• Costruttore MyReader(InputStream) si collega a un file gia' aperto, per es. lo standard input System.in
• String readString() legge una stringa (sequenza massimale di caratteri diversi da spazi, tabulazioni, ritorni a capo...) e la ritorna.
• boolean findKeyword(String) controlla se nel file il prossimo elemento e' la stringa keyword assegnata
• int readInteger() legge un intero e lo ritorna
• double readDouble() legge un double e lo ritorna

Il formato del file che contiene il grafo e' il seguente:

elemento	tipo	significato
x0 y0	due double	coordinate min del dominio
deltaX deltaY	due double	ampiezze del dominio
nv na	due interi	numero di vertici e archi
x0 y0 x1 y1 ...	tante coppie di double quanti i vertici	coordinate dei vertici
a0 b0 a1 b1 ...	tante coppie di interi quanti gli archi, un valore k identifica il k-esimo vertice nella lista di vertici precedente, dove il primo vertice e' identificato dal numero 0	primo e secondo estremo di ogni arco

Esempi di grafi (il disegno esplicativo inquadra il solo dominio e ha l'asse y girato verso l'alto):

• punti02 grafo con 2 vertici e un arco che li collega (figura)
• punti03 grafo con 3 vertici e un arco che collega i primi due (il terzo vertice non ha archi) (figura)
• punti10 grafo con 10 vertici figura)

Come struttura dati per il grafo si consiglia di usare:

• array per i vertici;
  in questo modo quando ho in input un arco (a,b) i numeri che leggo diventano indici nell'array di vertici
• array o altra struttura scelta fra quelle predefinite di Java (per es. Vector) per gli archi

Schema di frammento di programma che legge un grafo, gestendo anche le eccezioni (le parti tra *** dovranno essere sostituite dai nomi delle vostre variabili):

try
{
  MyReader rd = new MyReader(***nome del file***);
  ***x0*** = rd.readDouble();
  ***y0*** = rd.readDouble();
  ***delta x*** = rd.readDouble();
  ***delta y*** = rd.readDouble();
  ***numero vertici*** = rd.readInteger();
  ***numero archi*** = rd.readInteger();
  int i;
  for (i=0; i<***numero vertici***; i++)
  {
    ***x vertice i-esimo*** = rd.readDouble();
    ***y vertice i-esimo*** = rd.readDouble();
  }
  for (i=0; i<***numero archi***; i++)
  {
    ***primo estremo arco i-esimo*** = rd.readInteger(); 
    ***secondo estremo arco i-esimo*** = rd.readInteger();
  } 
}
catch (Exception excp)
{
  System.err.println("Error in reading: " + excp.getMessage());
}  

3) Disegnare il grafo

L'area di disegno sara' una sotto-classe di pannello dove la funzione paint (in AWT) o paintComponent (in Swing) disegna il grafo.
Il grafo puo' essere memorizzato come attributo di questa classe.

Esempio schematico (dove i nomi MioGrafo e MioPannello indicano la classe grafo e la classe pannello di disegno):

class MioPannello extends Panel
{
  MioGrafo grafo;
  
  public MioPannello(MioGrafo g) { grafo = g; }
  
  public Dimension getPreferredSize()
  {  return new Dimension(500,500);  }
  
  public void paint(Graphics g) { ...... }   
}

Le coordinate in cui e' dato il grafo (user space o coordinate logiche) non hanno relazione con le 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 (vedere ultima parte delle dispense su introduzione alla grafica)
• automaticamente, impostando trasformazioni (vedere dispense su grafica in java)

Nota: e' preferibile 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.

4) Traslazione col mouse

Sul pannello deve essere attivo un mouse motion listener che implementi la funzione di reazione a movimento del mouse con bottone premuto (mouseDragged) traslando il disegno del grafo nel pannello.
L'idea e' che io aggangio la scena e la trascino nella direzione del mouse.
A tale scopo bisogna:

• tenere due variabili che contengono le coordinate x,y del punto precedente
• all'interno di mouseDragged fare la differenza tra le coordinate attuali del mouse con quelle precedenti;
  a seconda del valore della differenza calcolare il vettore traslazione da applicare;
  poi salvare le coordinate attuali come nuove coordinate precedenti
• i valori di traslazione devono essere memorizzati e usati nelle funzioni di traduzione delle coordinate o nel calcolo delle trasformazioni (a seconda della scelta fatta) usate per disegnare
• per inizializzare le coordinate precedenti, occorre definire anche un mouse listener che nella funzione mousePressed (pressione del mouse all'inizio del drag) memorizzi la posizione del mouse.

5) Zoom

Se si usa uno slider, i valori ammessi per il fattore di scala possono essere per esempio da 0 a 10, per default 1.

Se si usano bottoni, i due valori devono essere uno l'inverso dell'altro, per es. 0.5 e 2 oppure 0.8 e 1.25.

Applicare lo zoom alle coordinate proprie del grafo (user space) prima di trasportarle nella finestra (device space).
Bisogna nell'ordine:

• traslare del negativo coordinate del centro del dominio (porta il centro del dominio in (0,0)
• scalare del fattore di zoom
• traslare delle coordinate del centro del dominio (per riportare alla posizione iniziale)
• applicare tutte le altre operazioni che si facevano prima