Formattare i contenitori per diverse dimensioni dello schermo

Introduzione

In questa esercitazione viene descritto come personalizzare un'applicazione Web Oracle JET per supportare diverse dimensioni dello schermo utilizzando le classi dell'applicazione di supporto Oracle JET.

È possibile utilizzare le classi dell'applicazione di supporto Oracle JET per impostare condizioni per diverse dimensioni dello schermo. In un layout flessibile, un elemento in un contenitore cresce o si riduce per riempire lo spazio. Oracle JET fornisce classi di stile per dimensioni di schermo piccole, medie, grandi ed extragrandi. È possibile impostare la larghezza minima della schermata allocata per il contenuto specificando il numero di colonne logiche da 1 a 12 che il contenuto deve utilizzare per la dimensione della schermata selezionata. Se si sceglie una dimensione dello schermo durante la specifica della parola chiave only nella condizione, la condizione si applica solo alle dimensioni della schermata. Se si sceglie una dimensione dello schermo ma si omette una condizione di dimensioni maggiori, la condizione si applica alle dimensioni selezionate dello schermo e a tutte le dimensioni maggiori successive. Utilizzando le classi di supporto nell'applicazione, è possibile controllare la visualizzazione e l'allineamento di testo ed elementi, personalizzare l'imbottitura attorno ai pannelli e impostare colonne per dimensioni di schermo diverse.

Le dimensioni dello schermo sono suddivise logicamente in 12 colonne

Descrizione dell'illustrazione screen-sizes.png

Obiettivi

In questa esercitazione verranno aggiunte classi di supporto all'applicazione Web Oracle JET per specificare l'allineamento del testo, aggiungere la spaziatura ai pannelli e impostare colonne per dimensioni di schermo diverse.

Prerequisiti

Task 1: Aggiungi classi di supporto per allineamento contenuto

Modificare l'allineamento del contenuto nel layout dell'applicazione Web Oracle JET specificando le classi dell'applicazione di supporto per diverse dimensioni dello schermo nell'elemento div.

  1. Aprire Oracle JET Cookbook e fare clic su Framework nella barra dei menu. Fare quindi clic su Utility CSS, fare clic su Layout e selezionare la demo Testo fine nella barra laterale.

  2. Nella demo Oracle JET Cookbook per Fine testo, scopri come implementare la classe di stile oj-sm-only-text-align-end per allineare il contenuto del testo alla fine di un piccolo schermo. Per mostrare un piccolo schermo, fare clic sull'icona Ritratto telefono e visualizzare il funzionamento reattivo di Fine allineamento.

  3. Passare alla directory JET_Web_Application/src/ts/views e aprire il file dashboard.html in un editor.

  4. Trovare l'elemento div in cui id="activitiesContainer", prima dell'intestazione Attività, quindi aggiungere la classe di stile dell'applicazione di supporto reattivo oj-sm-only-text-align-end Oracle JET.

    <!-- The responsive helper style class aligns the Activities container text to the
 end of the screen when the screen size is small -->
<div id="activitiesContainer" class="oj-flex-item oj-bg-info-30 oj-sm-only-text-align-end">
  <h3 id="activitiesHeader">Activities</h3>

    La classe di stile oj-sm-only-text-align-end allinea il contenuto del contenitore alla fine della larghezza dello schermo solo se la dimensione dello schermo è ridotta.

  5. Salvare il file dashboard.html.

    Il codice dovrebbe essere simile a content-alignment-dashboard-html.txt.

Task 2: Aggiungi classi di supporto per riempimento

Aggiungere riempimento al contenuto utilizzando le classi di spaziatura reattiva di Oracle JET. Quando si specifica la classe di spaziatura reattiva nell'elemento padre div, la spaziatura viene applicata a tutti gli elementi figlio div di tale elemento padre.

  1. Trovare l'elemento div in cui id="parentContainer2" e aggiungere la classe di stile spaziatura reattiva Oracle JET oj-lg-padding-pad-6x.

    <!-- The style class is specified in the parent div element -->
<div id="parentContainer2" class="oj-flex oj-flex-item oj-panel oj-bg-danger-30 oj-lg-padding-6x">

  2. Salvare il file dashboard.html. Il codice dovrebbe essere simile a padding-dashboard-html.txt.

Task 3: Imposta colonne per dimensioni diverse dello schermo

Nell'applicazione Web Oracle JET specificare le classi di stile di dimensionamento nell'elemento div. Queste classi di stile Oracle JET consentono di impostare la larghezza minima di colonna allocata per la dimensione dello schermo specificata.

  1. Trovare l'elemento div in cui id="activitiesContainer", prima dell'intestazione Attività, e aggiungere le classi di stile che specificano il numero minimo di colonne per dimensioni di schermo diverse.

    <!-- The oj-md-4 and oj-sm-12 style classes specify the column width for small and medium screen sizes -->
<div id="activitiesContainer" class="oj-flex-item oj-bg-info-30 oj-sm-only-text-align-end oj-md-4 oj-sm-12">
  <h3 id="activitiesHeader">Activities</h3>

    La classe di stile oj-sm-12 amplia le colonne del contenitore div 12 in un piccolo schermo e oj-md-4 ingrandisce quattro colonne del contenitore div quando le dimensioni medio o superiore dello schermo sono medie.

  2. Trovare gli elementi div che racchiudono l'intestazione Dettagli elemento, che dispongono di attributi id con i valori parentContainer2, activityItemsContainer e itemDetailsContainer. Aggiungere quindi le seguenti classi di stile per specificarne la larghezza minima di colonna per diverse dimensioni di schermo.

    <!-- The style class in the div elements specifies the column width for different screen sizes -->
<div id="parentContainer2" class="oj-flex oj-flex-item oj-panel oj-bg-danger-30 oj-lg-padding-6x oj-md-8 oj-sm-12">
  <div id="activityItemsContainer" class="oj-flex-item oj-md-6 oj-sm-12">
  </div>
  <div id="itemDetailsContainer" class="oj-flex-item oj-panel oj-bg-neutral-30 oj-md-6 oj-sm-12">

  3. Salvare il file dashboard.html. Il codice dovrebbe essere simile a final-columns-dashboard-html.txt.

Task 4: Esecuzione dell'applicazione Web

  1. Nella finestra del terminale, passare alla directory JET_Web_Application ed eseguire l'applicazione.

    $ ojet serve

    Gli strumenti Oracle JET eseguono l'applicazione Web nel browser Web locale, dove è possibile visualizzare i contenuti del dashboard. Fare clic con il pulsante destro del mouse sulla pagina e selezionare Ispeziona per visualizzare la vista pagina negli strumenti sviluppatore. Selezionare quindi un dispositivo con dimensioni di schermo ridotte, ad esempio Pixel 5, nel menu a discesa Dimensioni per verificare le modifiche all'allineamento del contenuto delle voci dell'elenco Attività.

    Il layout reattivo su uno schermo di piccole dimensioni

    Descrizione dell'illustrazione content-alignment.png

  2. Chiudere la finestra o la scheda del browser in cui viene visualizzata l'applicazione Web in esecuzione.

  3. Nella finestra del terminale premere Ctrl+C e, se richiesto, immettere y per uscire dal processo batch di strumenti Oracle JET.

Altre risorse di apprendimento

Esplora altri laboratori su docs.oracle.com/learn o accedi a più contenuti di apprendimento gratuito sul canale Oracle Learning YouTube. Inoltre, visitare education.oracle.com/learning-explorer per diventare Oracle Learning Explorer.

Per la documentazione del prodotto, visitare il sito Oracle Help Center.