Quando parliamo di sviluppo di una Rich Internet Application (RIA),
l'interfaccia che viene proposta all'utente è molto importante. Le
funzionalità sono senza dubbio fondamentali, ma una presentazione disordinata,
o poco curata, può pregiudicare il successo di un progetto. In
questo articolo vedremo, con pochi accorgimenti, come creare delle interfacce
in modo tale da renderle fluide, adattabili alla finestra del browser utilizzato.
Può sembrare un argomento superato, ma il design dell'interfaccia, soprattutto oggi,
è una tematica presa in seria considerazione: pensiamo a Google, ha esperti che
lavorano costantemente al miglioramento della User Interface in modo da
garantire la migliore esperienza all'utente.
Un pò come molti aspetti della grafica, un tema come questo
non richiede un percorso ben definito di apprendimento, ma è tutto un insieme
di trucchi, piccole soluzioni ed accorgimenti che portano dei risultati.
Tutti questi, insieme, fanno la differenza.
In questo articolo esamineremo quelle che sono due tra le interfacce comuni
nel contesto di una qualsiasi applicazione. Per dare una continuità al tutto, svilupperemo
un paio di schermate dell'interfaccia di un gestionale per una biblioteca.
Inzieremo con una semplice schermata di login,
analizzando i componenti da centrare in maniera automatica e come gestire
eventuali immagini di sfondo. La semplicità del primo esempio ha un motivo ben preciso:
comprendere al meglio le dinamiche della scheda Size and Position, nel pannello
Properties di un qualsiasi componente del Flex Framework.
Il secondo esempio, successivo alla login, sarà la schermata di dashboard del gestionale.
Presenterà vari elementi e vedremo come organizzarli nella pagina e gestire il
loro posizionamento, aumento o diminuzione delle dimensioni in base alla
grandezza della finestra dove il tutto viene visualizzato. Anche qui
utilizzeremo il pannello Size and Position, ma stavolta il fulcro
sarà la creazione di un'interfaccia con più Panel insieme.
Per la stesura di questo articolo è stato usato, come
ambiente di sviluppo, Flash Builder
nella sua ultima versione, la 4.5.
Lo sviluppo
Una schermata di login è un ottimo esempio per partire:
contiene pochi elementi e tutti facilmente configurabili. Il codice non richiederà
modifiche sostanziali. Il risultato finale sarà come l'immagine:
I componenti utilizzati in questo caso sono pochi:
un BorderContainer in cui sistemare lo sfondo,
un altro BorderContainer per creare il pannello nero dove scrivere sulla
sinistra il titolo dell'applicazione e a destra sistemare una piccola icona.
Sotto un Panel sul quale inserire due Label,
username e password, due componenti TextInput ed infine un Button
per la conferma e l'invio dei dati. A questo punto non rimane che
decidere a tutti gli effetti cosa deve essere spostato e cosa deve rimanere
fisso per trovare il giusto compromesso nelle operazioni di scaling.
Per comprendere meglio, ecco un esempio pratico di
riflessione a riguardo: la label con il titolo dell'applicazione, Gestione
Biblioteca, deve rimanere a 10 pixel dal margine sinistro. L'icona a
forma di "+" verde, invece, deve rimanere sempre a 10 pixel dal margine destro.
Questo vuol dire che, ridimensionando la finestra devo fare in modo che si verifichi sempre questa
situazione. Inoltre, devo fermare l'operazione di scaling non appena
l'applicazione dovesse raggiungere la larghezza di 400pixel. In questo modo non
andrei a sovrapporre l'icona e la label del titolo.
Ovviamente, Flash Builder ci viene in aiuto , in corrispondenza
della scheda Properties di ogni componente, nella sezione
Size and Position. Con pochi click permette di decidere, infatti,
allineamento, centralità di un elemento e distanza dai margini del contenitore
padre. Di seguito, un'immagine del pannello "Size and Position".
Fissiamo il BorderContainer base in modo tale da coprire tutta l'area della
pagina. Nel pannello ci sono in tutto sei caselle di spunta, tre in verticale,
tre in orizzontale. Le due caselle centrali, ovvero la seconda
delle verticali e la seconda delle orizzontali, permettono di allineare un
determinato elemento centralmente, in modo rispettivamente verticale ed
orizzontale. Le quattro caselle esterne, le rimanenti, servono invece a
definire una distanza del componente interessato dal margine del componente
padre. Per il panel, quindi, la distanza che definiremo sarà dal margine della
pagina stessa. Detto fatto, basta impostare su 0 le varie distanze e segnare le
caselle di spunta come segue.
Rimane ancora da sistemare l'effetto di repeat dell'immagine.
Il codice è molto semplice: nella modalità
di modifica source del file, in corrispondenza del tag
BorderContainer, scrivere il seguente codice:
backgroundImageFillMode="repeat"
Rimangono ancora da sistemare il secondo BorderContainer, ovvero la
barra in alto, e il Panel con il form per l'utente.
Per sistemare il primo, in corrispondenza della scheda Size and Position
del componente, basta mettere il segno di spunta sulla prima casella verticale,
distanza dal margine in alto, e sulla prima e la terza in orizzontale,
distanza dal margine sinistro e destro della pagina, impostando i valori
a 100%. Ecco il risultato delle modifiche fatte fino a qui:
L'ultimo passo riguarda il Panel.
Dato che il modulo avrà una larghezza fissa ma dovrà essere sempre al centro
della schermata, basterà selezionare le due caselle di spunta centrali: quella
verticale per l'allineamento in verticale, e quella orizzontale per
l'allineamento in orizzontale e la nostra schermata di login è
pronta all'uso.
La seconda schermata di questa applicazione che prenderemo
in esame sarà, apparentemente, più complessa. Qui i Panel adesso sono
tre, e tutti con proprietà di ridimensionamento ben definite. Il
primo, è in alto a sinistra, dalle dimensioni fisse e immutabili. Il secondo, più
in basso, è fluido ma solo in verticale, mentre quello a destra è
ridimensionabile in base alla finestra contenitore.
Una nota prima di continuare: per fare le prove con più
facilità, è consigliabile sistemare ogni schermata all'interno di un component
ben preciso, da posizionare sull'applicazione principale tramite il semplice
drag'n'drop.
Diamo una sguardo al risultato finale prima di proseguire.
Inutile dire quanto sia facile realizzare il primo pannello,
il Fixed Panel 1. Per motivi di spazio non starò qui a spiegare la sua
creazione. Passiamo direttamente al Vertical Fluid Panel 1, che ha
certamente una larghezza fissa, ma un'altezza variabile in base al
ridimensionamento della finestra. Ottenere questo risultato è molto semplice:
sempre andando sul pannello Size And Position descritto
precedentemente in questo articolo, basta impostare una distanza costante dal
margine in basso, operando sull'ultima delle tre caselle di spunta in
verticale. La distanza impostata, stavolta, è di 20 pixel.
Rimane l'ultima finestra di questa Dashboard, quella più importante e più
grande. Il Fluid Panel 1 si adatta automaticamente sia in
verticale che in orizzontale, e tramite poche e semplici proprietà da impostare
anche i contenuti al suo interno si adattano automaticamente al contesto. Per
ragioni legate alla semplicità e alla comprensione non ho riempito il Panel di
componenti, ma ne ho inseriti solo due: una Label, un HSlider, uno slider
orizzontale.
La situazione che otterremo alla fine consentirà al testo di
seguire il suo contenitore padre, il Panel, in modo da mantenere una
presentazione del testo gradevole, mentre HSlider rimarrà ad una posizione
sempre fissa (10 pixel dal margine in basso).
Sono state selezionate sia le due caselle esterne in
verticale, ad una distanza di 70 dal margine in alto (20 oltre ai 50 occupati
dal pannello nero) ed altri 20 dal margine in basso. Per quanto riguarda invece
le due caselle esterne delle tre orizzontali, le distanze impostate sono di 289
da sinistra (calcolata in base alle dimensioni delle altre finestre) e 20 pixel
da destra. Rimangono quindi da impostare i componenti all'interno.
È tutto molto intuitivo: semplicemente 10 pixel
di distanza da ogni lato (qualcosa di molto simile ad un istruzione in css come
margin: 10px. Infine, non rimane che posizionare lo slider orizzontale.
Lavorare bene con lo strumento Size and Position è importante,
per evitare interfacce dall'aspetto poco professionale.
