• Passa al contenuto principale
  • Passa alla barra laterale primaria
  • INIZIA QUI
  • HOME
  • CHI SONO

APPin5Minuti

Creare APP Gestionali con Oracle APEX e Low-Code

Crea Applicazioni Gestionali con Oracle APEX e gli strumenti Low-Code.

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

Maggio 7, 2021

Il CSS è un linguaggio di scripting 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

IN QUESTO ARTICOLO

  • Come caricare un file CSS in APEX
  • Come richiamare un file CSS in una Pagina (Page Level)
  • Come richiamare un file CSS in un Modello (Page Template)
  • Come richiamare un file CSS nel Theme Style (Theme Style Level)
  • Come richiamare un file CSS nel Tema dell’Applicazione (Application Theme Level)
  • Come richiamare un file CSS nella User Interface (User Interface Level)
  • BONUS: come usare un CSS direttamente in una Pagina APEX

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

TI POTREBBE INTERESSARE:

  • Come eseguire codice PL-SQL da JavaScript in Oracle APEX
  • CPQ in Oracle APEX
  • Come migrare le applicazioni da Oracle Forms ad Oracle APEX
  • Come creare un servizio REST in Oracle APEX
  • Come gestire i files su Object Storage da Oracle APEX
  • Come sviluppare applicazioni sicure con Oracle APEX

css, oracle apex

Interazioni del lettore

Lascia un commento Annulla risposta

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Barra laterale primaria

BENVENUTO!

Il mio nome è Daniele Trasarti, autore di APPin5Minuti, il blog italiano che parla di piattaforme di Oracle APEX e applicazioni low-code.

Qui troverai tantissimi tutorial e risorse per imparare a sviluppare in pochissimo tempo bellissime applicazioni per gestire i dati ed i processi della tua azienda.

Se vuoi saperne di più inizia da qui.

Seguimi sui social!

  • LinkedIn
  • Twitter

NEWSLETTER

Iscriviti anche tu per far parte della più grande community italiana di persone che amano sviluppare low-code!

api rest appsheet appsheet data sources appsheet views appsheet workflow automation autonomous database build apps cpq crm css cyber security database dynamic layout facebook flowform flows4apex google google cloud interactive grid interactive report javascript list microsoft microsoft access mobile oracle oracle apex oracle cloud oracle rest data service ords pl-sq PL-SQL power apps product configurator sales configurator security social login software gestionale sql theme roller ux woocommerce wordpress workflows

COMMENTI RECENTI

  1. Daniele Trasarti su Oracle APEX: come creare un’applicazione web in 5 minuti

    Ciao Sabatino, grazie per l'apprezzamento. Riguardo alla tua domanda ti consiglio di usare Oracle Cloud. Puoi creare un account gratis…

  2. Sabatino Iannazzo su Oracle APEX: come creare un’applicazione web in 5 minuti

    Ciao Daniele, complimenti per la guida, mi hai aperto un mondo! volevo chiederti se con Apex e Oracle Database Express…

  3. Laura su Autenticazione a 2 Fattori basata su TOTP (Time-based One-time Password) con Oracle APEX

    Ciao, trovo molto interessante il tuo articolo. Hai qualche suggerimento per l'autenticazione con spid? pensi di fare qualche guida al…

  4. Mario Volpetti su Oracle APEX: come creare un’applicazione web in 5 minuti

    Ottima spiegazione e complimenti per la semplicità che ai usato. Sono riuscito a farlo anche io con un foglio excel…

  5. Riccardo Liviabella su Google AppSheet: come creare una APP Mobile da un foglio Excel in 5 minuti

    Ciao Daniele e grazie per le tue interessanti spiegazioni. E' da un pò di anni che lavoro su Appsheet e…

  6. Daniele Trasarti su Come costruire Workflows Approvativi in Oracle APEX

    Ciao Bhavin, I think you badly copied PL-SQL because the one you provided is not correct. Fix the script and…

  7. Daniele Trasarti su Applicazione di Prenotazione Appuntamenti in Oracle APEX

    Grazie mille Franca!

Copyright © 2023 · APPin5Minuti.it · Privacy Policy · Cookie Policy