Formattare i contenitori dei componenti per diverse dimensioni dello schermo

Introduzione

In questa esercitazione verrà descritto come personalizzare un'applicazione DOM virtuale Oracle JavaScript Extension Toolkit (Oracle JET) per supportare diverse dimensioni dello schermo utilizzando le classi di supporto Oracle JET.

È possibile utilizzare le classi di applicazione di supporto di Oracle JET per impostare le condizioni per varie dimensioni dello schermo. In un layout flessibile, un elemento di un contenitore cresce o si restringe per riempire lo spazio del contenitore. Oracle JET offre classi di stile per schermi di dimensioni ridotte, medie, grandi ed extra-grandi. È possibile impostare la larghezza minima dello schermo allocata per il contenuto specificando il numero di colonne logiche da 1 a 12 che il contenuto deve utilizzare per la dimensione dello schermo selezionata. Se si sceglie una dimensione dello schermo ma si omette una dimensione dello schermo più grande, la condizione si applica alla dimensione dello schermo selezionata e a tutte le dimensioni dello schermo più grandi. Se si sceglie una dimensione dello schermo mentre si specifica la parola chiave only nella condizione, la condizione si applica solo alla dimensione dello schermo specificata. Utilizzando le classi di supporto nella tua applicazione DOM virtuale, puoi controllare la visualizzazione e l'allineamento di testo ed elementi, personalizzare il riempimento attorno ai pannelli e impostare colonne per diverse dimensioni dello schermo.

Le dimensioni dello schermo sono suddivise logicamente in 12 colonne

Obiettivi

In questa esercitazione verranno aggiunte classi di applicazione di supporto all'applicazione DOM virtuale per specificare l'allineamento del testo, aggiungere il riempimento ai pannelli e impostare colonne per dimensioni dello schermo diverse.

Prerequisiti

Ambiente di sviluppo impostato per creare applicazioni DOM virtuali Oracle JET che include un'installazione di Node.js
Browser web di Google Chrome installato e impostato come browser web predefinito
Accesso al Oracle JET Developer Cookbook
Completamento della precedente esercitazione su questo percorso formativo, Aggiungere container all'applicazione Oracle JET Virtual DOM

Task 1: Aggiunta di una classe di supporto per l'allineamento del contenuto

Modificare il posizionamento del contenuto nel componente Contenitore attività specificando una classe dell'applicazione di supporto Oracle JET nell'elemento div per adeguare l'allineamento del contenuto quando si utilizza una dimensione ridotta dello schermo.

Aprire il ricettario di Oracle JET e fare clic su Framework nella barra dei menu. Quindi fare clic su Utility CSS, fare clic su Layout e selezionare la demo Fine testo nella barra laterale.
Nella demo di Oracle JET Cookbook per Fine testo, scopri come implementare la classe di stile oj-sm-only-text-align-end per allineare il contenuto di testo alla fine di una schermata di piccole dimensioni. Per mostrare una schermata di piccole dimensioni, fare clic sull'icona Ritratto telefono e visualizzare il comportamento reattivo per Fine allineamento.
Passare alla directory JET-Virtual-DOM-app/src/components/Activity e aprire il file ActivityContainer.tsx in un editor.
Nella definizione della funzione ActivityContainer, individuare div in cui id="activitiesContainer" e aggiungere la classe di stile dell'applicazione di supporto reattiva oj-sm-only-text-align-end.
```
<div id="activitiesContainer"
     class="oj-flex-item oj-bg-info-30 oj-sm-only-text-align-end">
```
Salvare e chiudere il file.

Task 2: Aggiungi classi di aiuto per riempimento

Aggiungere l'imbottitura al componente Container padre 2 e ai relativi componenti figlio, Container articolo attività e Container dettagli articolo, utilizzando le classi di stile di spaziatura reattiva di Oracle JET. Quando si specifica la classe di spaziatura reattiva su un elemento div padre, lo stile di riempimento viene applicato a tutti gli elementi div figlio di tale elemento padre.

Aprire il ricettario di Oracle JET e fare clic su Framework nella barra dei menu. Quindi fare clic su Utility CSS, fare clic su Margini e spaziatura e selezionare la demo Interlinea reattiva nella barra laterale.
Nella demo di Oracle JET Cookbook per Responsive Spacing, scopri come implementare le classi di spaziatura reattiva per aggiungere spaziatura ai container in varie dimensioni dello schermo.
Passare alla directory JET-Virtual-DOM-app/src/components e aprire il file ParentContainer2.tsx in un editor.
Nella definizione della funzione ParentContainer2, individuare div dove id="parentContainer2" e aggiungere la classe di spaziatura reattiva oj-lg-padding-6x-horizontal.
```
<div id="parentContainer2"
     class="oj-flex oj-flex-item oj-panel oj-bg-danger-30 oj-lg-padding-6x-horizontal">
```
Passare alla directory JET-Virtual-DOM-app/src/components/Activity e aprire il file ActivityContainer.tsx in un editor.
Nella definizione della funzione ActivityContainer, individuare div dove id="activitiesContainer" e aggiungere la classe di spaziatura reattiva oj-sm-padding-4x-start.
```
<div id="activitiesContainer"
     class="oj-flex-item oj-bg-info-30 oj-sm-only-text-align-end oj-sm-padding-4x-start">
```
Passare alla directory JET-Virtual-DOM-app/src/components/ActivityItem e aprire il file ActivityItemContainer.tsx in un editor.
Nella definizione della funzione ActivityItemContainer, individuare div dove id="activityItemsContainer" e aggiungere la classe di stile spaziatura reattiva oj-sm-padding-4x-start.
```
<div  id="activityItemsContainer"
      class="oj-flex-item oj-bg-success-20 oj-sm-padding-4x-start">
```
Passare alla directory JET-Virtual-DOM-app/src/components/ItemDetail e aprire il file ItemDetailContainer.tsx in un editor.
Nella definizione della funzione ItemDetailContainer, individuare div dove id="itemDetailsContainer" e aggiungere la classe di stile spaziatura reattiva oj-sm-padding-4x-start.
```
<div id="itemDetailsContainer"
     class="oj-flex-item oj-bg-neutral-30 oj-sm-padding-4x-start">
```
Salvare e chiudere i file aperti.

Task 3: Imposta colonne per dimensioni schermo diverse

Specificare le classi di stile del layout della griglia di Oracle JET negli elementi div del contenitore dei componenti. Queste classi di stile consentono di impostare la larghezza di colonna minima allocata per i contenitori nella dimensione dello schermo specificata.

Aprire il ricettario di Oracle JET e fare clic su Layout e navigazione nella barra dei menu. Quindi fare clic su Grid e selezionare la demo di Basic nella barra laterale.
Nella demo di Oracle JET Cookbook per le classi reattive di layout griglia, scopri il concetto di griglia a 12 colonne e come implementare queste classi di stile per aggiungere un comportamento reattivo per diverse dimensioni dello schermo alla tua applicazione DOM virtuale.
Passare alla directory JET-Virtual-DOM-app/src/components/Activity e aprire il file ActivityContainer.tsx in un editor.
Nella definizione della funzione ActivityContainer, individuare div dove id="activitiesContainer" e aggiungere le classi di stile di dimensionamento oj-md-4 e oj-sm-12 che specificano il numero minimo di colonne per dimensioni di schermata diverse.
```
<div id="activitiesContainer"
     class="oj-flex-item oj-bg-info-30 oj-sm-only-text-align-end oj-sm-padding-4x-start oj-md-4 oj-sm-12">
```
La classe oj-sm-12 rende il contenitore div 12 colonne largo in un piccolo schermo e oj-md-4 rende il contenitore div largo quattro colonne quando in dimensioni dello schermo medie o grandi.

Salvare il file. Il codice dovrebbe essere simile a activity-container-tsx.txt.
Passare alla directory JET-Virtual-DOM-app/src/components/ActivityItem e aprire ActivityItemContainer.tsx in un editor. In div, dove id="activityItemsContainer", aggiungere le classi di stile oj-md-6 e oj-sm-12.
```
<div id="activityItemsContainer"
     class="oj-flex-item oj-bg-success-20 oj-sm-padding-4x-start oj-md-6 oj-sm-12">
```
Salvare il file. Il codice dovrebbe essere simile a activity-item-container-tsx.txt.
Passare alla directory JET-Virtual-DOM-app/src/components/ItemDetail e aprire ItemDetailContainer.tsx in un editor. In div, dove id="itemDetailsContainer", aggiungere le classi di stile oj-md-6 e oj-sm-12.
```
<div id="itemDetailsContainer"
     class="oj-flex-item oj-bg-neutral-30 oj-sm-padding-4x-start oj-md-6 oj-sm-12">
```
Salvare il file. Il codice dovrebbe essere simile a item-detail-container-tsx.txt.
Dalla directory JET-Virtual-DOM-app/src/components, aprire ParentContainer2.tsx in un editor. In div, dove id="parentContainer2", aggiungere le classi di stile oj-md-8 e oj-sm-12.
```
<div id="parentContainer2"
     class="oj-flex oj-flex-item oj-panel oj-bg-danger-30 oj-lg-padding-6x-horizontal oj-md-8 oj-sm-12">
```
Salvare il file. Il codice dovrebbe essere simile a parent-container2-tsx.txt.

Task 4: Eseguire l'applicazione DOM virtuale

Nella finestra del terminale, passare alla directory JET-Virtual-DOM-app ed eseguire l'applicazione DOM virtuale.
```
npx ojet serve
```
Gli strumenti Oracle JET eseguono l'applicazione DOM virtuale nel browser Web locale.
Fai clic con il pulsante destro del mouse sulla pagina e seleziona Ispeziona per visualizzare la vista negli strumenti di sviluppo.
Nella barra degli strumenti di Chrome DevTools, fare clic su per passare alla modalità del dispositivo.
Selezionare quindi un dispositivo con dimensioni ridotte dello schermo, ad esempio Pixel 7, dal menu a discesa Dimensioni per verificare le modifiche all'allineamento del contenuto dell'elenco di attività e dell'intestazione nel componente Contenitore attività.
Chiudere la finestra o la scheda del browser che visualizza l'applicazione DOM virtuale in esecuzione.
Nella finestra del terminale, premere Ctrl+C e, se richiesto, immettere y per uscire dal job batch degli strumenti Oracle JET.

Passo successivo

Passare all'esercitazione successiva in questo modulo.

Questa esercitazione fa parte del modulo Responsive Design.

Aggiungi container all'applicazione Oracle JET Virtual DOM
Formattare i contenitori per l'applicazione Oracle JET Virtual DOM
Mostra o nascondi contenuto nell'applicazione Oracle JET Virtual DOM
Eseguire il test dell'applicazione Oracle JET Virtual DOM su diverse dimensioni dello schermo

Puoi tornare alla pagina principale del percorso di apprendimento DOM virtuale per accedere a tutti i moduli sulla creazione di app DOM virtuali.

Altre risorse di apprendimento

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

Per la documentazione del prodotto, visitare Oracle Help Center.

Titolo e informazioni sul copyright

Format the component containers for different screen sizes

F74314-02

Oracle e/o relative consociate.