In Oracle APEX la funzionalità Theme Roller consente di personalizzare il Look&Feel di una qualsiasi applicazione che utilizza l’Universal Theme.

Puoi decidere il colore principale dell’applicazione, l’aspetto dei bottoni, la larghezza del menù di navigazione e molto altro.

Insomma, se anche a te piace personalizzare l’aspetto delle applicazioni APEX, il Theme Roller è uno strumento che dovresti sicuramente imparare ad utilizzare.

In questo articolo desidero spiegarti come puoi esportare ed importare il Theme Style da una applicazione all’altra.

Come modificare il Theme Style

Prima di spiegarti come esportare il CSS di una applicazione APEX penso sia utile illustrare molto brevemente come modificare l’aspetto di una applicazione APEX usando il Theme Roller.

• Accedi all’APP Builder di Oracle APEX ed avvia l’applicazione che vuoi personalizzare in modalità Preview
• Nella parte inferiore del browser (o a lato, puoi decidere dove tu dove preferisci posizionarlo) dovresti vedere un menù, visibile solo in modalità Preview.
• Clicca su Customize > Theme Roller.

• Modifica l’aspetto dell’applicazione come preferisci.
• Quando hai fatto premi Save As per salvare il Theme Style

• Dai un nome al Theme Style e premi Salva

Come esportare il Theme Style

A questo punto è lecito chiedersi: dove vengono salvate le impostazioni che ho selezionato?

Scopriamolo insieme.

• Accedi all‘APP Builder dell’applicazione di cui hai modificato il Theme Style.
• Vai in Shared Components > User Interface > Themes

• Clicca su Universal Theme – 42

• Clicca su Styles. Da questa maschera puoi vedere tutti gli stili che sono disponibili nella tua applicazione.
• In particolare, dovresti vedere lo stile che hai precedentemente salvato.
• Clicca sul Theme Style che vuoi esportare

Tra i vari attributi del Theme Style, ti faccio notare la proprietà Output CSS File URL che trovi sotto la sezione Theme Roller Attributes.

Quando modifichi l’aspetto dell’applicazione usando il Theme Roller, APEX non fa altro che generare automaticamente un file CSS che contiene tutte le opzioni che hai selezionato.

Noi non esporteremo direttamente questo file ma useremo, invece, una stringa di configurazione JSON che APEX stesso ha creato automaticamente dopo aver salvato le impostazioni nel Theme Roller.

• Clicca su Theme Roller JSON Configuration e copia la stringa che trovi nel campo JSON Configuration che altro non rappresenta se non la configurazione del Theme Style che abbiamo salvato, ma in formato JSON.
• Come suggerisce la nota, non è consigliabile modificare a mano questa stringa di configurazione ma è opportuno usare sempre il Theme Roller.

Come importare il Theme Style

• Accedi all‘APP Builder dell’applicazione nella quale vuoi importare il Theme Style.
• Avvia il Theme Roller e crea un nuovo Theme Style: non è necessario che tu faccia qualche modifica in particolare ma limitati a creare un nuovo stile con il nome che preferisci.

• Vai alla definizione del Theme Style come ti ho spiegato nel paragrafo precedente
• Vai alla proprietà Theme Roller Attributes > JSON Configuration

• Incolla nel campo JSON Configuration la stringa di configurazione che hai precedentemente salvato e premi Apply Changes.

• Riapri il Theme Roller e seleziona dal menù a tendina il nuovo Theme Style.
• Oracle APEX caricherà le impostazioni scritte nella stringa di configurazione JSON che abbiamo inserito e andrà a modificare il file CSS del Theme Style.

Conclusioni

Hai visto quanto è semplice modificare ed esportare le opzioni CSS da una una applicazione all’altra?

Modificare l’aspetto di una applicazione di una app APEX è davvero un gioco da ragazzi e se pensi che il Theme Roller non sia sufficiente puoi sempre caricare file CSS custom.

Un abbraccio

Daniele