Nelle applicazioni web realizzate con Instant Developer Foundation e Studio è presente una barra di applicazione che contiene:
- il bottone per collassare o aprire il menu
- la caption dell’applicazione
- il campo dei comandi
- il bottone del debug
- il bottone di logout
Come possiamo aggiungere altri bottoni in quest’area?
Lo facciamo utilizzando un CommandSet di applicazione che ha la proprietà Toolbar a true e la proprietà Menu a false.
A questo CommandSet aggiungiamo i Command che ci occorrono nella nostra applicazione.
I Command possono essere di solo testo oppure utilizzare solamente un’icona che occupa meno spazio e in questo modo possiamo metterne diversi senza ingombrare troppo.
Compilando anche la proprietà Descrizione del Command avremo un tooltip che ci indica cosa fa il nostro comando e per esempio potremmo metterci questi:
- Informazioni sull’applicazione (versione installata e data di rilascio)
- Informazioni utente di login
- Cambio password
Il nostro CommandSet che con molta fantasia chiamiamo Toolbar può essere posizionato insieme ai comandi già presenti oppure sotto di essi; questo dipende dal parametro di compilazione Posizione toolbar applicazione, presente nella sezione Layout, che può valere:
- Dentro - la toolbar sarà mostrata dentro all’intestazione dell’applicazione
- Sotto - la toolbar sarà mostrata sotto l’intestazione dell’applicazione
A seconda del motore grafico utilizzato avremo un possibile posizionamento diverso della toolbar di applicazione:
- RD3 - solamente sotto
- RD3 Bootstrap - solamente dentro
- Fluid - dentro e sotto
Nel caso che la toolbar aggiuntiva sia sotto i bottoni sono allineati a sinistra e non a destra come di vede qui sotto.
Il tipo di icone che possiamo utilizzare varia a seconda del motore grafico utilizzato:
- RD3 - file immagine
- RD3 Bootstrap - file immagine e icone vettoriali
- Fluid file immagine e icone vettoriali
Vi ricordo che per utilizzare le icone vettoriali presenti nel tema grafico occorre impostare il nome dell’icona nel titolo del Command utilizzando la sintassi:
{{icon-nome-icona}}
Per Fluid è possibile spostare la posizione dei bottoni aggiuntivi dopo il campo dei comandi utilizzando la seguente regola css:
div.main-global-toolbar:not(.bottom) {
order: 3 !important;
}