Soluzioni allo scritto di Interfacce Utente - 19 luglio 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 La metafora della scrivania.
Errori frequenti:
Avere inteso come "componenti di un ambiente desktop" le finestre e le icone anziche' quelli cosi' chiamati nelle dispense. Questo errore e' stato contato poco.
Esercizio 2: dispense Struttura e funzionamento di un'interfaccia e Dispositivi di controllo.
Esercizio 3: dispensa Struttura e funzionamento di un'interfaccia al titolo "Programmazione guidata da eventi".
Esercizio 4: dispensa Introduzione alla Computer Graphics.

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 a valori interi con limiti fra 3 e 100, un gruppo di due radio button etichettati "raggio" e "lati".
Nell'area grafica e' disegnato, al centro, un poligono regolare con N lati e raggio R, dove N e R sono variabili globali al programma che supponiamo inizializzate con valori sensati (per esempio, N=8, R=50).
Se e' selezionato il radio button "raggio" allora lo slider controlla il raggio R del poligono. Se e' selezionato il radio button "lati" allora lo slider controlla il numero di lati N del poligono.

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) 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...".
(b) Usare layout manager che non ottengono una disposizione come quella disagnata. In particolare il grid layout dimensiona tutti i componenti contenuti alla stessa dimensione.

Esercizio 2

Scrivere in PSEUDO CODICE il corpo della funzione di ridisegnamento (in Java paint o paintComponent) associata al pannello area grafica in modo da disegnare il poligono in colore blu.
Ricordiamo che il poligono ha centro nel centro del pannello, N lati e raggio R. Questo significa che, supponendo che (xC,yC) siano le coordinate del centro del pannello, l'i-esimo vertice del poligono (per i=0..N-1) ha coordinate Xi = xC + R*cos(i*2pigreco/N) e Yi = yC + R*sin(i*2pigreco/N)

Soluzione:

imposta il colore corrente a blu
xc = 0.5 * larghezza del pannello
yc = 0.5 * altezza del pannello
ora bisogna disegnare il poligono, si poteva scrivere in vari modi, per esempio:

1) piu' aderente alla sintassi java, dove la classe Graphics ha una funzione che disegna un poligono prendendo in argomento il numero di lati e due array contenenti le ascisse e le ordinate dei vertici:

alloca xv array di N float (destinato a contenere le ascisse dei vertici del poligono)
alloca yv array di N float (destinato a contenere le ordinate dei vertici del poligono)
per i da 0 a N-1:
- xv[i] = xc + R * cos(i * 2 * pigreco / N)
- yv[i] = yc + R * sin(i * 2 * pigreco / N)
disegna poligono di N vertici le cui ascisse e ordinate sono contenute in xv e yv

2) tracciando i lati uno per uno:

per i da 0 a N-1:
- xv1 = xc + R * cos(i * 2 * pigreco / N)
- yv1 = yc + R * sin(i * 2 * pigreco / N)
- xv2 = xc + R * cos(((i+1)mod N) * 2 * pigreco / N)
- yv2 = yc + R * sin(((i+1)mod N) * 2 * pigreco / N)
- disegna segmento di estremi (xv1,yv1) e (xv2,yv2)

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) Istruzioni che tracciano il disegno del poligono vaghe.

Esercizio 3

Prima di scrivere le callback associate allo slider e ai due radio button, spiegate come intendete risolvere i seguenti due problemi:

Nel momento in cui lo slider viene mosso, come capire se lo slider sta controllando il raggio oppure il numero di lati del poligono?
Nel momento in cui cambia il bottone radio selezionato, come aggiornare lo slider in modo che rispecchi il valore attuale del raggio o del numero di lati (secondo il caso)?

Problema 1. Ci sono vari modi, per esempio:

1a) Nella callback dello slider interrogo i due bottoni radio per sapere quale dei due e' selezionato

oppure

1b) Uso una variabile ausiliaria, per esempio controllaRaggio che vale true se lo slider controlla il raggio e false se controlla il numero di lati. Nella callback dello slider interrogo questa variabile per sapere quale dei due bottoni radio e' selezionato. Nelle callback dei due bottoni radio cambio il valore di questa variabile.

Problema 2 Nelle callback dei due bottoni radio chiamo sullo slider l'istruzione che sposta il cursore nettendolo alla posizione corrispondente al valore corrente di R o N (a seconda di quale bottone radio).

Esercizio 4

Scrivere lo PSEUDO CODICE del corpo delle callback associate allo slider e ai bottoni radio.

Supponiamo di adottare, per il problema 1, la soluzione 1a).

Callback dello slider

if (bottone radio "raggio" e' selezionato)
R = valore corrente dello slider
else
N = valore corrente dello slider
chiama funzione che ridisegna il pannello grafico

Callback del radio button "raggio" (quella di "lati" e' simmetrica

imposta R come nuovo valore dello slider

Errori frequenti:
(a) Nella callback dello slider dimenticare di ridisegnare l'area grafica (in Java funzione repaint). Invece e' superfluo farlo nelle callback dei bottoni radio.
(b) Nella callback dello slider, replicare le istruzioni per il disegno del poligono (invece bisogna chiamare repaint).
(c) Aggiornare lo slider (istruzioni adesso presenti nella callback dei bottoni radio) nella callback dello slider stesso. La callback dello slider scatta quando l'utente ha mosso il cursore, per cui il valore salvato in R e N l'ultima volta sono anch'essi da cambiare; non posso assegnarli allo slider.