Come caricare un CSS in Oracle APEX (5+1 modi diversi)

Il CSS è un linguaggio di programmazione usato per gestire la formattazione di documenti HTML, XHTML e XML come, ad esempio, i siti web e relative pagine.

Quando sviluppi applicazione web l’uso dei CSS è necessario perché ti permette di separare i contenuti delle pagine HTML dalla loro formattazione.

In Oracle APEX puoi caricare nella tua applicazione un CSS in diversi modi, sia tramite un file (detto foglio di stile) che scrivendo direttamente il codice all’interno nella pagina (CSS Inline).

Lascia che te lo dica, da web developer il mio consiglio è quello di spostare per quanto possibile il CSS che vuoi utilizzare sempre in un file dedicato. Dopodiché, in funzione delle tue esigenze, potrai richiamarlo nella tua applicazione a diversi livelli:

• Page Level
• Page Template Level
• Theme Style Level
• Theme Level
• User Interface Level

Come caricare un file CSS in APEX

Supponiamo che tu abbia in mano un file CSS da utilizzare nella tua applicazione APEX. Per caricarlo devi eseguire i seguenti passaggi:

• Collegati all’App Builder e seleziona Shared Components

• Vai in Files > Static Application Files

• In questa area andrai a caricare tutti i file CSS di cui avrai bisogno, ma anche le immagini o i loghi che ti serviranno per la sviluppare la tua APP.
• Per caricare un nuovo file clicca su Upload File, seleziona il file e caricalo nel File Repository dell’applicazione

• Dopo aver caricato il file, nella colonna Reference troverai la stringa da usare per richiamare il CSS

Come richiamare un file CSS in una Pagina (Page Level)

Richiamando il file CSS a livello di pagina ne limiterai l’uso nella pagina specifica. Questo significa che potrai usare le classi definite nel CSS solo negli oggetti che sono presenti all’interno della pagina.

Per richiamare il file CSS a livello di pagina:

• Dall’App Builder, seleziona la pagina e clicca sul nodo principale

• Nel pannello delle proprietà, vai alla sezione CSS e indica nel campo File URLs il riferimento al file CSS caricato in precedenza

Come richiamare un file CSS in un Modello (Page Template)

Posizionando il CSS a livello di modello pagina quest’ultimo sarà disponibile un tutte le pagine della tua applicazione che utilizzano quel template specifico.

Questa soluzione è utile quando vuoi modificare l’aspetto di un tipo specifico di pagine, tutte quelle che utilizzano lo stesso template.

La parte restante della tua applicazione (le pagine che usano altri template) rimarranno invariate.

• Dall’App Builder, vai in Shared Components > User Interface > Themes

• Seleziona il template che vuoi personalizzare e creane una nuova copia

• Apri la definizione del nuovo template e nella sezione CSS e scrivi il riferimento ai file CSS.

Come richiamare un file CSS nel Theme Style (Theme Style Level)

Con questo metodo puoi rendere il file CSS disponibile in tutta l’applicazione, purché venga utilizzato lo Stile specifico (es. Vita Dark).

• Vai in Shared Components > Themes e seleziona il tema in uso (ad esempio Universal Theme – 42*)

• Vai in Styles e seleziona lo Stile che vuoi modificare

• Vai in Settings > Files URLs ed inserisci il riferimento ai file CSS da importare

Come richiamare un file CSS nel Tema dell’Applicazione (Application Theme Level)

Importare un CSS a livello di Application Theme è molto utile quando vuoi cambiare il font della tua applicazione oppure il set di icone

• Non puoi modificare direttamente il CSS di un tema standard, ma dovrai crearne una copia
• Vai in Share Components > Themes > Copy Theme
• Seleziona il tema da copiare

• Dopo aver creato il nuovo tema, selezionalo

• Vai nella sezione JavaScript and Cascading Style Sheets per inserire i riferimenti ai CSS che desideri importare

Come richiamare un file CSS nella User Interface (User Interface Level)

Con l’avvento delle ultime versioni di APEX è possibile gestire i CSS a livello di User Interface, senza quindi dover modificare necessariamente Temi, Template e Stili (come visto fino a poco fa…).

• Vai in Shared Components > User Interface Attributes

• Vai in User Interface > Cascading Style Sheets per importare i file CSS

BONUS: come usare un CSS direttamente in una Pagina APEX

Talvolta, soprattutto durante le fasi di sviluppo di una APP, può essere utile testare al volo un CSS senza dover necessariamente caricare dei file.

In APEX è possibile inserire il CSS direttamente nella definizione della pagina (Inline CSS).

Per caricare un CSS Inline:

• Dall’App Builder, seleziona la pagina di interesse

• Nel pannello delle proprietà, vai alla sezione CSS Inline e scrivi il CSS che vuoi inseire