Con la versione 24.5 di Instant Developer Foundation hai ora la possibilità di personalizzare totalmente lo stile delle tue applicazioni, senza più eccezioni.
Puoi così adattare tutti i dettagli grafici esattamente a ciò che serve al tuo progetto.
E, grazie al motore grafico Fluid, puoi implementare le personalizzazioni delle applicazioni web mediante il solo utilizzo del CSS.
In questo articolo vedrai come farlo in modo semplice, anche se non hai molta dimestichezza con i CSS.
Vedrai come personalizzare l’aspetto di un’applicazione web che utilizza il tema grafico Vela di Foundation e, in base alla login, potrai decidere come adattare il suo aspetto.
Potrai quindi definire quale o quali file CSS caricare dal browser dopo la login e modificare le caratteristiche grafiche in base al colore, alle dimensioni e al comportamento.
Per permetterti di semplificare i passaggi, abbiamo creato un progetto di esempio che puoi scaricare a questo indirizzo e aprire con Instant Developer Foundation.
Passaggi preliminari
L’applicazione di esempio utilizzata è Northwind Web, che di default ha l’aspetto dell’immagine sottostante:
All’applicazione web possono essere applicati i colori che puoi vedere nell’immagine qui di seguito semplicemente caricando un CSS specifico:
Per realizzare questo primo passaggio è sufficiente creare specifici file CSS che puoi posizionare nella directory custom dell’applicazione realizzata con Instant Developer Foundation. Vedremo in seguito come caricarli dopo la login.
Nella directory custom dell’applicazione sono già disponibili i seguenti file CSS:
- azure.css – cambia i colori in tonalità azzurra.
- green.css – cambia i colori in tonalità verde.
- minimized.css – rende lo spazio occupato da caption dell’applicazione, caption videate, toolbar dei pannelli ecc…, minore rispetto a quello standard del tema Vela (per diminuire l’occupazione verticale e renderla adatta a monitor piccoli).
- float.css – rende il menu laterale flottante.
- customf.css – questo è il file di default della personalizzazione nel quale sono state già implementate delle modifiche che valgono per tutti gli utenti.
Caricare i CSS
Innanzitutto, vediamo come caricare uno o più file CSS da codice in base a ciò che viene immesso nel campo user name della login.
Il primo evento coinvolto è quello associato alla login all’applicazione dove, in questo caso di esempio, non ho implementato una vera e propria autenticazione ma verifico se nel campo UserName è presente una delle seguenti parole: azure, green, min o float. In caso affermativo memorizzo nell’array CustomCSS (definito a livello di applicazione) il nome del corrispondente file CSS da caricare successivamente sul browser.
Ecco il codice dell’evento OnLogin:
event NorthwindWeb.OnLogin (
inout boolean DataValid // Impostare a True per indicare che le credenziali sono valide
inout string UserName // User Name inserito dall'utente nella pagina di login
inout string Password // Password inserita dall'utente nella pagina di login
)
{
if (find(lower(UserName), "azure", ...) > 0)
{
NorthwindWebCustom.CustomCSS.addValue("azure.css")
}
if (find(lower(UserName), "green", ...) > 0)
{
NorthwindWebCustom.CustomCSS.addValue("green.css")
}
if (find(lower(UserName), "min", ...) > 0)
{
NorthwindWebCustom.CustomCSS.addValue("minimized.css")
}
if (find(lower(UserName), "float", ...) > 0)
{
NorthwindWebCustom.CustomCSS.addValue("float.css")
}
}Come vengono caricati dal browser lato client i CSS indicati nell’array CustomCSS?
A questo scopo usiamo l’evento di applicazione OnBrowserMessage, che viene notificato quando l’applicazione riceve un messaggio dal browser.
In questo evento è indicato quale step dell’applicazione è in esecuzione. In questo caso serve per intercettare il messaggio start che viene inviato ogni volta che l’applicazione viene ricaricata.
Ecco il codice dell’evento:
event NorthwindWebCustom.OnBrowserMessage (
string Message // This indicates the name of the message received from the browser.
XMLNode Node // This is the XML node received from the browser. It contains all the information
collected by the client that will be managed by the system
inout boolean Skip // A boolean output parameter. If set to True, it makes sure the framework does not
manage this message
)
{
// Avvio dell'applicazione
if (Message == "start")
{
// Aggiungo i css presenti nell'array CustomCSS all'intestazione della pagina html dell'applicazione
for (int i = 0; i < NorthwindWebCustom.CustomCSS.length(); i = i + 1)
{
NorthwindWebCustom.appendCSSToHead(NorthwindWebCustom.CustomCSS.getValue(i))
}
}
}Qui sotto puoi vedere il codice del metodo richiamato per ogni elemento dell’array CustomCSS nell’evento OnBrowserMessage:
public void NorthwindWebCustom.appendCSSToHead(
string fileName // Nome del css da caricare
)
{
NorthwindWebCustom.executeOnClient(formatMessage("var css = document.createElement('link');
css.setAttribute('rel', 'stylesheet');
css.setAttribute('type', 'text/css'); css.setAttribute('href', '|1'); document.head.appendChild(css);",
fileName, ...))
}In questo metodo viene eseguita la funzione executeOnClient, che invia un comando JavaScript da eseguire lato client sul browser.
Il comando in questione aggiunge al DOM della pagina html un href con il CSS da includere nella pagina dell’applicazione.
Ora vediamo come sono stati scritti i vari CSS in modo che tu possa creare le tue personalizzazioni.
Il file green.css
Puoi trovare questo file CSS, come gli altri presenti nel progetto, nella directory custom dell’applicazione. Per poter vedere la directory devi compilare l’applicazione dopo averla aperta dall’IDE di Instant Developer Foundation.
Innanzitutto, ho sovrascritto i colori base, che nel tema Vela sono definiti come variabili all’inizio del file vela.css.
Trovi il file vela.css nella directory di installazione di Instant Developer Foundation. Questo è il percorso di default:
C:\Program Files (x86)\INDE\CURRENT\Template\Fluid\objects\fluid\themesCome primo passo puoi copiare tutto il blocco che trovi alla direttiva :root tra le due parentesi graffe.
Quindi puoi cambiare i colori che ti interessano e cancellare tutte le righe di definizione di un colore che non hai modificato:
:root {
--cloudyGrey-100: #daffe5 !important;
--cloudyGrey-200: #66c281 !important;
--cloudyGrey-300: #1ea324 !important;
--cloudyGrey-400: #e2cf2e !important;
--cloudyGrey-500: #f78212 !important;
--cloudyGrey-800: #22ad4b !important;
--cloudyGrey-900: #eb8513 !important;
--skyBlue-1: #93ebad !important;
--skyBlue-4: #08ad1d !important;
--skyBlue-6: #ce8d12 !important;
--skyBlue-7: #09d928 !important;
--skyBlue-8: #00b351 !important;
--error-6: #f5222d;
/* Colore per le icone base */
--button-secondary-fg: #a6c20c !important;
/* Colore dei campi non editabili */
--Transparent-Lockedtable: rgba(7, 65, 21, 0.13) !important;
/* Colori riga qbe dei pannelli in lista */
--qbe-blue:rgba(178, 253, 56, 0.13) !important;
--qbe-blue-hover: rgba(170, 255, 105, 0.37) !important;
}È necessario considerare che i colori variati devono avere la clausola !important per poter sovrascrivere la regola definita in vela.css.
Un altro aspetto di cui tener conto è che, se vuoi utilizzare una variabile di un colore del tema Vela che comunque non hai cambiato nel tuo file CSS, devi definirla comunque perché sia presa in considerazione (qui, ad esempio, ho riportato il colore –error-6 senza modificarne il valore).
Ognuno dei colori generici definiti nello script qui sopra può essere utilizzato per più parti del layout. Nei commenti sono indicate le parti principali di utilizzo.
Vediamo dove sono utilizzate alcune delle variabili di colore di vela.css:
- –cloudyGrey-100 => sfondo della toolbar dell’applicazione, sfondo dei pannelli e dei campi, sfondo della zona menu dell’applicazione;
- –cloudyGrey-200 => sfondo della caption e dei bordi delle videate;
- –cloudyGrey-300 => bordi delle intestazioni dei campi in lista, bordi dei comandi della toolbar dell’applicazione, mouse hover sulla lista videate aperte;
- –cloudyGrey-400 => mouse hover sui bordi dei campi di pannello in dettaglio;
- –cloudyGrey-500 => colore icona filtro nelle liste;
- –cloudyGrey-800 => colore icone calendario, colore linguetta drop down, coloro testo liste drop down, colore icone aggiuntive toolbar del pannello;
- –skyBlue-1 => mouse hover voci di menu dell’applicazione;
- –skyBlue-4 => colore dei bordi della riga evidenziata in lista del pannello;
- –skyBlue-6 => sfondo della linguetta selezionata delle tabbed view;
- –color-border-secondary => colore dei bordi delle aree dell’applicazione come zona menu, videata, toolbar applicazione, campi label;
- –qbe-blue => sfondo dei campi di ricerca del pannello in lista;
- –qbe-blue-hover => sfondo mouse hover dei campi di ricerca del pannello in lista;
- –Transparent-Lockedtable => sfondo dei campi in editing del pannello.
Imposto il colore degli item del menu principale dell’applicazione utilizzando una variabile colore:
.main-menu-item.item {
color: var(--skyBlue-8);
}Imposto il colore di sfondo della caption delle videate:
.toolbar-background {
background-color: var(--skyBlue-1);
}Imposto il colore del testo del menu dell’applicazione al passaggio del mouse:
button.main-menu-item:not(.close-all-views-item):not(.menu-separator):hover,
button.main-menu-item:not(.menu-separator):hover,
button.main-menu-item.activated,
ion-list-header.main-menu-header:not(.open-views-header):hover {
color: var(--cloudyGrey-900);
}È possibile notare che il testo qui va a capo ma nel CSS rimane tutto su una riga e, dopo la virgola, c’è sempre uno spazio.
Cambio il colore dell’icona del pulsante di refresh della toolbar dei pannelli:
.refresh-btn ion-icon {
color: var(--error-6) !important;
}La variabile –error-6 ha lo stesso colore della variabile nel file vela.css e quindi non ha la clausola !important nella sua definizione ma la deve avere qui nell’impostazione del colore sovrascritto.
Il file azure.css è simile al file green.css e, per questo motivo, non è necessario descriverlo in dettaglio.
Come decidere e provare i colori
Come puoi decidere quali colori utilizzare e magari vederne subito l’effetto sulla tua applicazione a runtime?
Un possibile metodo è utilizzare gli strumenti di sviluppo del browser. Se usi Chrome puoi aprire la finestra degli strumenti di sviluppo dal menu Altri Strumenti => Strumenti per sviluppatori oppure con la combinazione di tasti SHIFT + CTRL + I.
Nell’immagine seguente puoi vedere la videata Orders dell’applicazione e, a destra, gli strumenti di sviluppo aperti:
Qui si vedono i colori della sezione :root e puoi notare che viene visualizzato anche il colore corrispondente, oltre che il suo valore.
Cliccando sul quadratino del colore puoi vedere l’effetto della modifica nella finestra del browser in tempo reale e poi salvare il valore e riportarlo nel tuo file CSS.
Nell’immagine di seguito puoi vedere, indicato dalla freccia, il colore su cui ho cliccato per cambiare la variabile –cloudyGrey-100 e renderla di un colore simile a un verde lime. Nel riquadro rosso è evidenziato il valore esadecimale da riportare nel file CSS.
In questo modo puoi sperimentare la variazione di tutti i colori del tema e vedere dove vengono applicati nell’applicazione.
Il file minimized.css
Il file minimized.css è utilizzato per rendere l’occupazione verticale dell’applicazione più compatta diminuendo le altezze della toolbar dell’applicazione, delle caption delle videate, delle toolbar dei pannelli, della riga di ricerca qbe nei pannelli in lista, ecc…
Le descrizioni delle impostazioni di questo file sono definite al suo interno come commenti del CSS.
Come esempio, ecco il codice per ridurre l’altezza della riga di ricerca di un pannello nel formato lista:
ion-grid.panel-list-grid ion-row.panel-list-qbe-row ion-col.panel-list-col {
height: 25px !important;
}Con questo codice impostiamo l’altezza della riga di ricerca a 25 pixel.
Il file float.css
Il file float.css è utilizzato per rendere flottante il menu dell’applicazione. Questo parte collassato sulla sinistra visualizzando una dimensione minima per mostrare solamente le icone e, una volta che il mouse vi si posiziona sopra, si allarga andando in overlay sulle videate aperte.
Le descrizioni delle impostazioni di questo file sono definite al suo interno come commenti del CSS.
Come esempio, ecco la definizione delle variabili di larghezza minima e massima del menu dell’applicazione:
:root {
--min-width-menu: 85px;
--max-width-menu: 250px;
}Il menu collassato occuperà 85 pixel, mentre occuperà 250 pixel quando il mouse viene posizionato sul menu stesso.
Il file customf.css
Il file customf.css, che definisce la personalizzazione del CSS caricata indipendentemente dall’utente di login, contiene delle classi per gli stili delle card della videata Home, dove sono stati utilizzati i colori –skyBlue-1 e –skyBlue-2 per indicare la card cliccata e il mouse hover.
Le variabili –skyBlue-1 e –skyBlue-2 sono definite nel CSS standard di vela.css, ed avranno il valore definito nel file del tema oppure quello di un file CSS caricato dopo la login.
In questo file ho impostato il codice per cambiare l’icona utilizzata nel pulsante di insert dei pannelli delle videate, che di default è un + senza bordi. In questo caso ho deciso invece di far apparire i bordi.
Ho utilizzato questo codice, che ho copiato dal file vela.css cercando la stringa insert-btn:
.insert-btn .ion-md-add::before, .treenode-exp-icon .ion-md-add::before,
[class$="-exp-icon"] .ion-md-add::before{
font-family: var(--icon-font-name);
content: "\ee17" !important;
font-weight: 600 !important;
}La riga di codice che identifica la nuova icona è content: “\ee17” !important.
Come ho trovato questo valore?
Per prima cosa ho identificato l’icona nella documentazione del tema Vela che trovi a questo link: Il tema grafico Vela.
Ho scelto l’icona plus-square e quindi l’ho cercata nel file vela-icons.css, che contiene le icone di Vela che trovi in questa directory dell’installazione di Instant Developer Foundation:
C:\Program Files (x86)\INDE\CURRENT\Template\Fluid\objects\fluid\themes\fontsDentro al file ho cercato plus-square e trovato questo codice:
.icon-plus-square::before {
content: "\ee17";
}A questo punto non resta che copiare la specifica content: “\ee17”; e impostarla nel file CSS.
Nel file customf.css ho anche impostato due classi da utilizzare nel codice di programmazione all’interno dell’IDE di Instant Developer Foundation per poter colorare i prodotti sotto scorta e quelli obsoleti:
.product-alert {
color: var(--error-6) !important;
}
.product-discontinued {
color: var(--cloudyGrey-400) !important;
}Queste classi sono associate al campo ProductName nell’evento OnDinamicProperties della videata Products:
if (Products.UnitsInStock < Products.ReorderLevel)
{
Products.ProductName.CSSClass = "product-alert"
}
else
{
if (Products.Discontinued == true)
{
Products.ProductName.CSSClass = "product-discontinued"
}
}L’effetto a video è questo:
Colorare le icone della toolbar
Se vuoi colorare le icone della toolbar del pannello in modo personalizzato devi agire sulla classe CSS dell’icona stessa.
Ogni pulsante dell’applicazione ha una sua classe, che puoi identificare utilizzando gli strumenti di sviluppo del browser.
Per esempio, con questa riga di codice nel file green.css viene cambiato il colore del pulsante di refresh impostandolo al colore della variabile –error-6.
.refresh-btn ion-icon {
color: var(--error-6) !important;
}Per identificare la classe CSS del pulsante, puoi aprire gli strumenti di sviluppo e selezionare l’icona che ti interessa colorare. A quel punto puoi cercare la classe dell’icona, che in questo caso è ion-md-refresh, come visualizzato nella seguente immagine:
Puoi quindi cercare nel file vela.css questo nome e troverai questo codice:
/* fluid-refresh-ccw-04 */
.refresh-btn .ion-md-refresh::before{
font-family: var(--icon-font-name);
content:"\eae5";
}Questa è la classe da utilizzare, ovvero refresh-btn. Puoi vedere questa classe anche nell’immagine degli strumenti di sviluppo nel codice subito sopra.
Ora tocca a te!
A questo punto hai in mano gli strumenti per poter lavorare e non devi far altro che aprire o creare la tua applicazione con Instant Developer Foundation e cominciare la tua personalizzazione!
