Sviluppare interfacce fluide con Flash Builder

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:

Figura 1. Maschera di Login

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”.

Figura 2. Size and Position in Flex

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:

Figura 3. Size and Position in Flex

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.

Figura 4. La Dashboard completa

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).

Figura 5. Posizionare gli oggetti Panel

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.