Concetto di videata - form

La progettazione di una applicazione web richiede che, una parte del tempo, venga dedicato allo studio e realizzazione dell’interfaccia grafica; migliore sarà l’interfaccia grafica e migliore sarà l’approccio degli utenti. In questa frase si nascondono 2 concetti che spesso, per motivi di tempo, il programmatore tende a non considerare: User Experience e User Experience Design cioè l’insieme di processi atti ad accrescere la soddisfazione dell’utente migliorando l’usabilità dell’applicazione.

Le applicazioni create con Instant Developer Foundation sono di tipo Single Page Application, cioè tutto rimane all’interno di una singola tab browser, non avvengono redirect url e la User Experience studiata si avvicina molto alla grafica del sistema operativo Windows cioè con l’utilizzo di Videate: Videate sovrapponibili, Videate in primo piano, Videate Modali.

L’elemento che dobbiamo introdurre per primo è quindi l’oggetto Videata chiamato anche Form; questo oggetto non è nient’altro che un contenitore di elementi ed, in fase di esecuzione, verrà renderizzato come un DIV con all’interno altri elementi.

Potremo dunque avere una videata con all’interno un altro oggetto che mostrerà dei dati in lista, oppure che mostrerà nella parte sinistra un albero di elementi e a destra un grafico etc… il tutto sarà componibile come meglio si crede in quanto la videata rimane un elemento contenitore.

Possiamo iniziare creando un oggetto videata vuoto; vedrete che ci saranno scorciatoie che ci consentiranno di creare un oggetto videata già con elementi ma come prima prova posizioniamoci nell’albero di progetto sul nome dell’applicazione, quindi tasto destro Aggiungi Videata.

La scheda nell’area di progettazione contiene la visualizzazione grafica dell’oggetto Videata, come notate non è nient’altro che una cornice con una barra superiore che rappresenta il titolo: non abbiamo nessun altro elemento grafico all’interno per ora.

Troviamo nell’albero di progetto, l’oggetto Nuova Videata che abbiamo creato: se notate dentro all’applicazione ci sono una serie di cartelle di colore giallo; sono solo contenitori per organizzare meglio il progetto, tra queste c'è’ anche una cartella chiamata Videate, il consiglio è quello di spostare la videata all’interno della cartella semplicemente con il trascinamento con il mouse.

Bene ora essendo la videata un oggetto, avrà delle proprietà: per visualizzarle dobbiamo prima avere la videata visibile nell’area di progettazione (come noi ora) , quindi fare un ulteriore doppio clic sull’oggetto nell’albero di progetto. Tra le proprietà troviamo il NOME dell’oggetto, una descrizione e un titolo; poi altre caratteristiche quali ad esempio il flag Parte del desktop: vi ho accennato prima che la videata può’ essere normale, in primo piano, modale, ecco il flag Parte del desktop indica la videata di tipo normale, togliendo il flag diventa una videata Popup.

Scendo sino alla zona Proprietà Visuali: qui è possibile impostare se mostrare o no la Caption (la barra del titolo), se è ridimensionabile, spostabile, se possibile massimizzare e minimizzare la videata proprio come quelle di Windows.

Non apporto modifiche a questa scheda delle proprietà, chiudo e torno sulla scheda della visualizzazione grafica della videata; nella parte centrale, nel content c’è scritto Riquadro Vuoto, nel prossimo tutorial capiremo meglio questa scritta.