Vorrei iniziare questo articolo prendendo in presto una citazione attribuita a Frank Lloyd Wright, una tra le figure più influenti della storia dell’architettura contemporanea.

Non è la grandezza di un edificio che lo rende grande, ma i piccoli dettagli che lo rendono unico.

Frank Lloyd Wright

Avrà pensato questo quando ha progettato Fallingwater, la famosissima Casa sulla Cascata?

Certamente la sua opera è ancora oggi qualcosa di unico e meraviglioso.

Questo è dovuto in gran parte alla sua posizione (la casa è stata letteralmente costruita sopra ad una cascata!) ma anche grazie alla cura dei dettagli che la rendono così particolare ed unica nel suo genere.

Prima che pensi di essere nel sito sbagliato, vorrei tranquillizzarti.

Ho raccontato questa storia per ricordarti quanto sia importante nello sviluppo web curare l’estetica di una applicazione, che ti piaccia o no.

L’aspetto di una applicazione, i suoi colori, il logo e tutto il resto non sono un semplice capriccio, bensì servono per conferire identità e personalità e, perché no, a far sentire ogni utente a proprio agio.

Non è un caso che si parli di Look & Feel (in italiano, Aspetto e Sensazione).

Per nostra fortuna Oracle APEX ci aiuta moltissimo in tal senso ed in questo articolo vorrei darti alcune indicazioni di base su come personalizzare l’aspetto di una applicazione.

Ti mostrerò come aggiungere o modificare l’icona, come cambiare il tema e come modificare il layout delle pagine.

Buona lettura!

Come cambiare le Icone dell’Applicazione

Mi riferisco in particolare a quella icona che Oracle APEX ti chiede di specificare tutte le volte che crei una nuova applicazione da zero.

Puoi scegliere una tra le icone disponibili oppure puoi caricare una immagine personalizzata (ad esempio il logo della tua azienda).

Puoi cambiare l’icona in qualsiasi momento in qualsiasi momento, anche dopo aver creato la tua applicazione. Vediamo come fare.

• Accedi all’APP Builder in vai in Shared Components
• Clicca su User Interface Attributes

• Vai alla sezione Icon e clicca su Change Icon.

• Clicca Upload Your Own Icon per caricare una immagine e seleziona il file dal tuo PC. Per questo esercizio ho usato un file con estensione png con altezza e larghezza di 512 pixels
• Premi Save Icon per completare l’operazione

Oracle APEX genererà automaticamente tre differenti tipi di icone:

• Favicon
• Small Icon
• Large Icon

Il Favicon è quell’icona di piccole dimensioni che viene visualizzata accanto al titolo di una pagina web nella scheda del browser.

Questa tipo di icona viene utilizzato per identificare in modo univoco un sito e per renderlo facilmente riconoscibile tra le diverse schede aperte o nella lista dei segnalibri.

La Small Icon viene usata per identificare l’applicazione nell’APP Builder e nei dispositivi dove l’APP viene installata come Progressive Web APP (PWA).

Usando il bottone Change Icon ti viene chiesto di caricare un solo file e APEX si preoccuperà di generare i tre files per le tre icone.

Se invece vuoi gestire icore differenti (con immagini diverse) puoi personalizzare il file della singola icona caricando il file specifico attraverso il relativo bottone Edit.

Come modificare il Logo dell’Applicazione

Quando esegui una applicazione a sinistra della barra di navigazione principale dovresti vedere il nome dell’APP (l’ho evidenziata in arancione)

Una cosa che puoi fare è aggiungere o modificare il logo:

• Accedi all’APP Builder in vai in Shared Components
• Clicca su User Interface Attributes
• Clicca sul tab Logo per configurare il logo della tua applicazione. L’opzione di default è Text ed il testo visualizzato è quello contenuto nella variabile globale &APPLICATION_TITLE. che viene definita in Shared Components > Application Definition > Name

Puoi configurare diversi tipi di Logo.

• None: è l’opzione minimalista. Se selezionata non verrà mostrato alcun logo

• Image: puoi mostrare una immagine, quella che preferisci. Per comodità ti mostrerò come usare la stessa icona che abbiamo usato prima:
  • Seleziona Image
  • Inserisci la Reference dell’immagine che vuoi inserire nel Logo e clicca Apply Changes

Ecco il risultato

• Text: questa è l’opzione di default che troverai dopo aver creato una applicazione da zero
  • Seleziona Text.
  • Inserisci il testo che desideri vedere (può essere un testo fisso o, come abbiamo già visto, un placeholder) e clicca Apply Changes

Ecco il risultato

• Image and Text: è la combinazione delle due impostazioni precedenti
  • Seleziona l’opzione Image and Text
  • Image URL: specifica l’URL dell’immagine usando la Reference
  • Text: scrivi il testo da visualizzare di fianco all’icona

Il risultato finale è semplice ed elegante

• Custom: usa questa opzione quando vuoi costruire un logo usando direttamente il Codice HTML.
  • Seleziona l’opzione Custom
  • Inserisci il codice HTML da visualizzare

Ad esempio, qui sotto puoi trovare un esempio di codice HTML che serve per visualizzare l’icona dell’applicazione ed il suo nome.

<img src="#APP_FILES#icons/app-icon-192.png" alt="Customers" class="apex-logo-img"><span class="apex-logo-text">&APPLICATION_TITLE.</span>

Come modificare il Theme Style usando il Theme Roller

Il Theme Roller di Oracle APEX è uno strumento grazie al quale puoi modificare l’aspetto delle applicazioni APEX in modo semplice e veloce.

Lo puoi usare per modificare la palette dei colori, l’aspetto dei pulsanti e le dimensioni dei menu di navigazione.

Vediamo come usarlo.

• Dall’APP Builder avvia l’applicazione
• In basso nelle finestra del browser dovresti vedere una barra degli strumenti. Clicca su Customize > Theme Roller per aprire la finestra del Theme Roller.

La prima opzione da guardare è quella che trovi al di sotto della voce Theme e che ti permette di selezionare uno tra i Theme Style messi a disposizione da Oracle APEX.

In questo caso è stato selezionato un tema che si chiama Vita, ma devi sapere che non è l’unico disponibile.

Ad esempio Vita – Dark è un tema scuro.

Qualora uno tra i temi disponibili non fosse di tuo gradimento, puoi sempre crearne di nuovi, partendo dalla scelta dei colori.

• Apri il Theme Roller e clicca Global Colors
• Clicca sul quadratino colorato che identifica il colore primario (Primary Accent) e scegli il colore che preferisci.

• In maniera automatica Oracle APEX imposterà i colori per Body Accent, Link Color e Focus Outline facendo una scelta automatica che ottimizza l’esperienza visiva utente.
• Premi Save per salvare le impostazioni. Se stai modificando un tema standard ti verrà richiesto di salvarlo con un nuovo nome.

Questo è il risultato ottenuto fino a questo punto.

Tuttavia, nulla ti vieta di sperimentare personalizzazioni più temerarie. Devi sapere, infatti, che nel Theme Roller ci sono davvero tante opzioni che puoi utilizzare (e che ti invito a sperimentare).

Per il momento concentriamoci su quelle principali.

• Navigation: permette di modificare i colori del menu di navigazione

• Layout: permette di modificare le dimensioni di alcune aree dell’applicazione come l’altezza della barra di navigazione principale (Header Height) e la larghezza del menù di navigazione (Navigation Tree)

• Palette: si tratta della Palette Cromatica usata da Oracle APEX

La Palette Cromatica è usata per colorare automaticamente tutti quei componenti dell’interfaccia grafica che hanno attivato l’opzione Apply Theme Colors

Ad esempio, ritroviamo gli stessi colori nei componenti di tipo List

Un altro Theme Style che apprezzo molto è Redwood Light, disponibile dalla versione 20.2 di Oracle APEX.

Per questo tema specifico le opzioni di configurazione sono diverse dalle precedenti e consistono nella scelta di una tra le palette disponibili, chiamate Pillars, e di un Layout (Floating, Edge to Edge, Contained).

Ecco un esempio del risultato che puoi ottenere.

Come esportare ed importare un Theme Style

Di norma le modifiche che vengono effettuate usando il Theme Roller hanno effetti solo sull’aspetto grafico, quindi non dovrebbero creare problemi o effetti regressivi particolari.

Tuttavia è auspicabile che le modifiche non vengano fatte direttamente sull’applicazione utilizzata dagli utenti ma, piuttosto, su una versione di test.

Una volta che le modifiche al layout e ai colori sono state verificate e testate puoi esportare la configurazione del tema dall’applicazione di test ed importarle nell’applicazione finale.

Non preoccuparti, esiste un modo veloce per fare questo tipo di operazione. Leggi questa guida su come esportare ed importare un Theme Style da una applicazione.

Come modificare l’aspetto del Menù di Navigazione

Oracle APEX da la possibilità di costruire diversi tipi di menu di navigazione, ciascuno dei quali pensato per essere utilizzato in situazioni diverse.

• Side Menu
• Top Menu
• Mega Menu

Per sapere come configurare le voci di menu di una applicazione Oracle APEX ti consiglio di leggere questo articolo, mentre per il momento concentriamoci su come modificare il loro aspetto.

• Dall’APP Builder vai in Shared Components > User Interfaces > Navigation Menu
• Le opzioni da modificare sono:
  • Position: specifica la posizione del menù ovvero se deve essere visualizzato nella barra laterale (Side) oppure nella parte alta dell’applicazione, al di sotto della barra di navigazione principale (Top).
  • List Template: indica il template che Oracle APEX deve usare per il menu di navigazione. Nel menù a tendina vedrai disponibili diversi template molti dei quali però non sono adatti per i menu di navigazione: tra poco ti spiegherò quali devi usare.
  • Template Options: sono le opzioni specifiche del template che è stato selezionato.

Vediamo 3 tipiche configurazioni di menu.

Side Menu

Questo tipo di menu viene utilizzato per fornire una navigazione chiara e intuitiva che si adatta alla maggior parte delle situazioni.

Si presenta come una barra laterale che può essere espansa o contratta e che contiene l’elenco delle pagine e delle funzionalità che l’utente può utilizzare.

La configurazione tipica di questo menu è la seguente:

• Position: Side
• List Template: Side Navigation Menu

Quando è collassato, il menu di navigazione non è navigabile a meno che non modifichi l’opzione Collapse Mode impostandola al valore Icon.

Top Menu

Questo tipo di menu si mostra come una barra di navigazione al di sotto di quella principale.

Questo tipo di visualizzazione si presta bene alle applicazioni desktop e, con qualche accortezza che vedremo tra poco, a quelle mobile.

Ecco la sua configurazione tipica

• Position: Top
• List Template: Top Navigation Menu

Nel caso tu voglia creare un menù di navigazione ottimizzato per i dispositivi mobile di consiglio di usare il template Top Navigation Tabs.

Per gli schermi più grandi, le voci di menù saranno visualizzate come in figura.

Viceversa, questa è la visualizzazione sugli schermi più piccoli.

Mega Menu

Il mega menu è un menu a cascata che viene visualizzato in sovrapposizione all’applicazione.

Questo tipo di visualizzazione è indicato per le applicazioni desktop che hanno tante opzioni e desideri farle vedere all’utente in una schermata il più possibile compatta.

Ecco la configurazione di questo tipo di menu

Caricare un CSS Personalizzato

Il CSS (acronimo di Cascading Style Sheets) è un linguaggio di scripting che viene utilizzato per modificare l’aspetto (colore, font e molto altro) dei documenti HTML.

In pratica, il CSS ti permette di separare il contenuto di un documento dal suo aspetto. Ciò significa che puoi creare il tuo sito o la tua applicazione web e poi utilizzare il CSS per stabilire come dovrebbe essere visualizzato.

Ciò rende più facile modificare l’aspetto di un sito web, perché puoi modificare il CSS in un unico posto anziché dover modificare il contenuto di ogni singola pagina.

Oracle APEX supporta egregiamente l’uso dei CSS.

Ad esempio puoi caricare nella tua applicazione un CSS sia tramite un file (detto foglio di stile) oppure direttamente il codice all’interno nella pagina (CSS Inline).

Leggi come Caricare un CSS in Oracle APEX.

Conclusioni

In questo articolo ti ho dato diverse le indicazioni che ti serviranno per personalizzare l’aspetto di una applicazione realizzata con Oracle APEX.

Chiudo questo articolo con una piccola chicca, ovvero una guida che ti spiega come personalizzare la pagina di login in una applicazione APEX.

Ti invito a leggerlo: Come personalizzare la Pagina di Login di una Applicazione APEX.

Un abbraccio

Daniele