Sviluppare interfacce fluide con Flash Builder

16 settembre 2011

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

Interfacce Fluide in Flex

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

Interfacce Fluide 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

Interfacce Fluide 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.

Se vuoi aggiornamenti su Sviluppare interfacce fluide con Flash Builder inserisci la tua e-mail nel box qui sotto:
 
X
Se vuoi aggiornamenti su Sviluppare interfacce fluide con Flash Builder

inserisci la tua e-mail nel box qui sotto:

Ho letto e acconsento l'informativa sulla privacy

Acconsento al trattamento di cui al punto 3 dell'informativa sulla privacy