
guide
Tutti i linguaggi per diventare uno sviluppatore di app per Android.
Sviluppare un’interfaccia che adatti automaticamente i contenuti in base alla larghezza della finestra
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.
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.
Se vuoi aggiornamenti su Sviluppare interfacce fluide con Flash Builder inserisci la tua email nel box qui sotto:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
La tua iscrizione è andata a buon fine. Se vuoi ricevere informazioni personalizzate compila anche i seguenti campi opzionali:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
Le opportunità offerte dal Intel Developer Zone
Tutti i linguaggi per diventare uno sviluppatore di app per Android.
Come creare applicazioni per il Web con PHP e MySQL per il DBMS.
Tutte le principali tecnologie per diventare uno sviluppatore mobile per iOS.
I fondamentali per lo sviluppo di applicazioni multi piattaforma con Java.
Diventare degli esperti in tema di sicurezza delle applicazioni Java.
Usare Raspberry Pi e Arduino per avvicinarsi al mondo dei Maker e dell’IoT.
Le principali guide di HTML.it per diventare un esperto dei database NoSQL.
Ecco come i professionisti creano applicazioni per il Cloud con PHP.
Lo sviluppo professionale di applicazioni in PHP alla portata di tutti.
Come sviluppare applicazioni Web dinamiche con PHP e JavaScript.
Fare gli e-commerce developer con Magento, Prestashop e WooCommerce.
Realizzare applicazioni per il Web utilizzando i framework PHP.
Creare applicazioni PHP e gestire l’ambiente di sviluppo come un pro.
Percorso base per avvicinarsi al web design con un occhio al mobile.
Realizzare siti Web e Web application con WordPress a livello professionale.
Sviluppare una web application realizzando il front-end con tecnologia Flex e il back-end con PHP
Sviluppare una Web application con front-end in tecnologia Flex e back-end Java
Come sviluppare un effetto grafico per visualizzare le foto come il Time Machine di Leopard, e scorrere le foto utilizzando le frecce della tastiera
Apprendere, in poche lezioni, le nozioni fondamentali per gestire filmati flash, caricare clip esterne, creare bottoni e link con Flash e ActionScript 3