Soluzioni allo scritto di Interfacce Utente - 9 Giugno 2005

Premessa

I testi della parte teorica NON sono divulgati. Questo perche' avete gia' un esempio in rete, e le possibili domande di teoria sono TUTTE sulle dispense. Essendo la scelta limitata (perche' il materiale delle dispense e' limitato), se mettessi in rete tutti i testi, a un certo punto non saprei piu' che domande inventare.
Sono qui dati solo i riferimenti per le soluzioni, ad uso di chi ha fatto lo scritto.

Per la parte pratica invece viene divulgato anche il testo.

Soluzione Parte teorica

Le soluzioni alla parte teorica si trovano sulle dispense. In particolare:

Esercizio 1: dispensa Introduzione alle interfacce utente al titolo "Stili di interazione".
Esercizio 2: dispensa Dispositivi di controllo
Esercizio 3: dispensa Struttura e funzionamento di un'interfaccia.
Un'errore frequente qui e' non avere fornito lo schema di un programma guidato da eventi (ved. dispensa al titolo "Struttura del programma").
Esercizio 4: dispense Introduzione alla Computer Graphics al titolo "Fasi dell'elaborazione grafica, Modellazione" e Grafica bi-dimensionale in Java al titolo "Primitive disponibili".

Soluzione Parte pratica

(Il testo e' in corsivo)

Contesto generale per tutti gli esercizi

Consideriamo un'interfaccia che consiste in una finestra top-level con: un pannello (area grafica), uno slider, un campo di testo un gruppo di due radio button etichettati "cerchio" e "quadrato".

Esercizio 1

Stabilire una configurazione da dare all'interfaccia. Fare un disegno schematico.
Spiegare quale gerarchia di contenimento e quali layout manager si possono usare per ottenere questa configurazione.

La soluzione di questo esercizio dipende dalla configurazione scelta.

Errori frequenti:
(a) Trattare i due bottoni radio come un solo componente, mentre sono due, e percio' necessitano di un contenitore intermedio.
Nota: il gruppo di radio button NON e' un componente di interfaccia, e' solo uno strumento per rendere i bottoni mutuamente esclusivi. Quindi NON posso inserire il gruppo di radio button, per esempio, a nord di in un pannello con border layout...
(b) Nella descrizione, spesso scrivete cose del tipo "metto un border layout, a nord di questo metto un grid layout...". Questo modo di esprimersi NON e' corretto. Quelli che si mettono uno dentro l'altro sono i contenitori, i layout sono associati ai contenitori per organizzarli. Il modo corretto di esprimersi e' "metto un pannello organizzato secondo un border layout, a nord di questo metto un altro pannello organizzato secondo un grid layout...".
In questo scritto l'improprieta' di linguaggio NON e' stata considerata, ma nel seguenti lo sara'.

Esercizio 2

Supponiamo che i valori dello slider siano interi compresi nell'intervallo da 0 a 100 (estremi inclusi).
Scrivere lo PSEUDO CODICE del corpo delle callback associate allo slider e al campo di testo in modo tale che istante per istante il numero mostrato nel campo di testo e il valore attuale dello slider coincidano.
Nota: assumere che l'utente digiti nel campo di testo solo stringhe che rappresentano interi fra 0 e 100).

Callback dello slider

(Scatta quando l'utente muove il cursore dello slider con il mouse)

int N = valore corrente dello slider
metti nel campo di testo la stringa corrispondente alla rappresentazione del numero N

Callback del campo di testo

(Scatta quando l'utente preme il tasto RETURN nel campo di testo)

string S = contenuto del campo di testo
int N = numero rappresentato da S
metti N come valore corrente dello slider

Nota: in realta', da come prosegue l'esercizio, si scopre che alla fine di ogni callback bisogna forzare il ridisegnamento del pannello grafico (chiamando la funzione repaint), ma non e' stato contato.
Chi lo ha fatto ha preso un + (piu') nel voto.

Errore frequente:
Nelle procedure di callback NON si creano parti di interfaccia, ma semplicemente si cambia il loro stato. In questo caso, slider e campo di testo esistono gia' e bisogna solo reimpostarne il valore.

Esercizio 3

Scrivere in PSEUDO CODICE il corpo della funzione di ridisegnamento (in Java paint o paintComponent) associata al pannello in modo tale che nel pannello appaia una figura geometrica con le seguenti caratteristiche:

si tratta di un cerchio o di un quadrato a seconda di quale dei due radio button e' selezionato
il centro della figura giace al centro del pannello
il raggio del cerchio, o la meta' del lato del quadrato, e' pari al valore attuale dello slider
la figura e' riempita di rosso

Soluzione:

imposta il colore corrente a rosso
int X = larghezza del pannello grafico / 2
int Y = altezza del pannello grafico / 2
int N = valore corrente dello slider
se e' selezionato il bottone radio "cerchio" allora disegna cerchio pieno di centro (X,Y) e raggio N
altrimenti (sara' selezionato il radio button quadrato) disegna rettangolo pieno di punto d'aggancio (X-N,Y-N), larghezza 2N e altezza 2N

Errori frequenti:
(a) Una figura geometrica NON viene prima disegnata e poi colorata, bensi' PRIMA si imposta il colore e DOPO si disegna la figura.
(b) Le figure geometriche NON sono sotto-componenti da aggiungere al pannello grafico.

Esercizio 4

E' necessario oppure no associare callback ai due radio button? Motivare la risposta.

E' necessario, nella callback bisogna forzare il ridisegnamento del pannello grafico (chiamando la funzione repaint).