Home/Struttura dell’interfaccia utente basata su browser

Le applicazioni web RIA create con In.de sono molto più di un insieme di widget da integrare a carico dei programmatori. Ecco perché all’interno di un progetto In.de può essere descritta l’intera struttura dell’interfaccia utente:

Header Applicazione: è lo spazio dedicato all’intestazione dell’applicazione, in cui solitamente appaiono titolo e logo. E’ possibile aggiungere ulteriori informazioni, come ad esempio il nome dell’utente. Sul lato sinistro compare il bottone per nascondere o mostrare la barra laterale del menù, in modo da massimizzare lo spazio disponibile per le videate; sul lato destro compare una casella di testo in cui è possibile inviare comandi testuali all’applicazione senza dover per forza utilizzare il menù e altri bottoni di controllo, come quello di chiusura . L’intero header può essere nascosto o riconfigurato secondo le proprie necessità.

Menù multilivello:contiene l’elenco delle voci del menù principale. E’ predisposto per mostrare graficamente fino a tre livelli gerarchici di voci di menù, ma può essere esteso anche oltre. Sia gli aspetti grafici che le animazioni possono essere configurate tramite css e/o javascript.

Lista delle videate aperte: contiene l’elenco delle videate aperte di tipo MDI. L’applicazione infatti può mostrare contemporaneamente diverse videate, mantenendone automaticamente lo stato. Tutte le videate di tipo MDI vengono mostrate nello spazio centrale del browser e tramite questa lista è possibile accedere velocemente quella desiderata.

Toolbar & Status Bar: impostando un flag, è possibile visualizzare insiemi di comandi come parte del menù oppure come toolbar. Sono presenti anche oggetti di tipo Indicatore che comunicano all’utente lo stato delle operazioni.

Videate MDI: le varie videate che compongono l’applicazione appaiono all’interno dell’area principale della finestra del browser. E’ possibile aprire tante videate insieme e passare velocemente dall’una all’altra, anche in maniera controllata. E’ il framework che si occupa di mantenere lo stato delle stesse.

Videate Docked: tramite l’impostazione delle proprietà delle videate, è possibile aprire una videata in modo che essa rimanga “agganciata” ai bordi dello spazio MDI. Nell’immagine sopra, ad esempio, è visibile una videata agganciata sul lato sinistro. Le videate agganciate sono utili per mostrare informazioni che devono sempre rimanere visibili. Pensiamo ad esempio una videata agganciata che contiene un albero gerarchico: quando si clicca su un nodo dell’albero viene aperta una videata per l’editing in base al tipo di nodo attivato.

Videate Popup Modali: In.de permette anche di aprire videate popup modali come quella mostrata nell’immagine sopra. La videata appare nella stessa finestra browser per evitare problemi di blocco dei popup e può aprire a sua volta altre schermate popup. Queste sono spesso utilizzate per funzioni di ricerca, oppure per implementare un wizard.

Personalizzazione della struttura dell’interfaccia: tutti i componenti di interfaccia mostrati possono essere nascosti, modificati o personalizzati a piacimento in modo da corrispondere agli standard grafici desiderati. Esiste anche una modalità speciale  chiamata “Widget Mode” che consente di mostrare solo la videata MDI attiva, nascondendo automaticamente tutte le altre componenti dell’interfaccia utente. Questa modalità è particolarmente indicata se l’applicazione deve essere integrata all’interno di un portale aziendale che già realizza altre componenti, come ad esempio il menù principale.