Aggiungi contenitori all'applicazione Web Oracle JET

Introduzione

Un layout di pagina reattivo può essere scalato in modo flessibile per adattarsi a una vasta gamma di dimensioni dello schermo, dai telefoni piccoli ai monitor desktop. Un layout flessibile di Oracle JavaScript Extension Toolkit (JET) include elementi figlio che è possibile organizzare in qualsiasi direzione. Quando la dimensione dello schermo cambia, questi elementi si adattano e si sviluppano per riempire lo spazio inutilizzato o restringono per evitare l'eccedenza degli elementi padre o figlio nel layout. È possibile utilizzare le classi di layout Oracle JET oj-flex e oj-flex-item per creare contenitori reattivi per progettare un layout di pagina reattivo. Le classi di stile Oracle JET oj-panel e oj-panel-bg aggiungono bordi e colori ai contenitori. È possibile utilizzare queste classi di stile per facilitare la visualizzazione del layout e rimuoverle nell'applicazione finale.

L'applicazione Web che si creerà in questa esercitazione dispone di una struttura di layout di pagina con un contenitore padre principale che circonda un secondo contenitore padre e un contenitore figlio, il contenitore Attività. Il secondo contenitore padre contiene due contenitori figlio: Articoli attività e Dettagli articolo.

Piano di layout per la pagina di layout reattiva

Descrizione dell'illustrazione layout-plan.png

Un contenitore padre è un contenitore figlio. Tuttavia, un contenitore figlio può anche essere un contenitore padre se contiene un contenitore figlio, ad esempio Container padre 2.

Nell'illustrazione seguente del layout di pagina che verrà creato, un elemento principale div contiene il contenitore padre 1. Il container padre 1 racchiude il container figlio 1 e il container padre 2. Il contenitore padre 2 contiene due container figlio, Container figlio 2 e Container figlio 3.

Layout reattivo con contenitori padre e figlio

Descrizione dell'illustrazione responsive-layout-containers.png

Obiettivi

In questa esercitazione verranno aggiunti contenitori e pannelli per convertire un layout di pagina in un layout di pagina reattivo in un'applicazione Web Oracle JET mediante il layout e le classi di stile di Oracle JET.

Prerequisiti

Un ambiente di sviluppo impostato per creare applicazioni Oracle JET con runtime JavaScript, Node.js e l'interfaccia della riga di comando Oracle JET più recente installata
Browser Web Google Chrome installato e impostato come browser Web predefinito
Accesso a Oracle JET Developer Cookbook
(Opzione 1) Completamento del percorso di apprendimento precedente in questa serie: Sviluppare un'applicazione Web in Oracle JavaScript Extension Toolkit
(Opzione 2) Se il percorso di apprendimento precedente di questa serie non è stato completato: jet_web_application_temp.zip scaricato

Task 1: Scaricare l'applicazione Starter

Ignorare questo task se si continua a lavorare in un'applicazione creata nel percorso di apprendimento precedente.

Rinominare jet_web_application_temp.zip come JET_Web_Application.zip. Estrarre il contenuto nella cartella JET_Web_Application.
Nella finestra del terminale verificare di aver installato la versione più recente di Oracle JET. In caso contrario, aggiornare la versione di Oracle JET.
```
$ npm list -g @oracle/ojet-cli
```
```
$ npm install -g @oracle/ojet-cli
```
Passare alla cartella JET_Web_Application e ripristinare l'applicazione Oracle JET.
```
$ ojet restore
```
L'applicazione è pronta per l'uso.

Task 2: Aggiungi container attività

Modificare il layout dell'applicazione Web Oracle JET per aggiungere un layout di casella flessibile. Per creare il layout flexfield, aggiungere una classe Oracle JET oj-flex all'elemento div padre e una classe oj-flex-item all'elemento div figlio. Il contenitore padre 1 è il contenitore padre che racchiude tutti gli altri contenitori al suo interno. Il contenitore figlio 1 è il primo contenitore figlio e contiene l'elenco Attività.

Il contenitore padre 1 e il contenitore figlio 1 formano i container attività

Descrizione dell'illustrazione Activity-containers.png

Aprire Oracle JET Cookbook, fare clic su Layout e navigazione nella barra dei menu e selezionare il componente Layout flessibile. Nella barra degli strumenti fare clic su Documento API, quindi selezionare flex.
Nella documentazione dell'interfaccia API Layout flessibile, scorrere fino alla tabella che descrive le classi di layout di Oracle JET e leggere la classe oj-flex.
Passare alla directory JET_Web_Application/src/ts/views e aprire il file dashboard.html in un editor.

Trovare l'intestazione Informazioni prodotto h1 e sotto aggiungere un elemento div esterno con il valore attributo id parentContainer1 insieme alla classe contenitore Oracle JET. Questo elemento div racchiude tutti gli altri contenitori al suo interno. Aggiungere una tag di chiusura </div> sopra l'ultima chiusura </div> alla fine del file.

<div class="oj-hybrid-padding">
  <h1>Product Information</h1>
  <!-- Parent Container 1 contains all the panels in the app -->
  <div id="parentContainer1" class="oj-flex oj-flex-init">
    <div id="activitiesContainer">
      <h3 id="activitiesHeader">Activities</h3>
      . . .
      </oj-chart>
    </div>
  </div>
</div>

Trovare l'elemento div in cui id="activitiesContainer", prima dell'intestazione Attività, e aggiungere una classe di articoli contenitore Oracle JET.

<!-- The Activities container displays the Activities list -->
<div id="activitiesContainer" class="oj-flex-item">
  <h3 id="activitiesHeader">Activities</h3>

Salvare il file dashboard.html.

Il codice dovrebbe essere simile a parent-containers-dashboard-html.txt.

Task 3: Aggiungi container dettagli articolo

Modificare il layout reattivo dell'applicazione Web Oracle JET per aggiungere i contenitori Dettagli articolo. Il contenitore padre 2 contiene i due contenitori figlio. Il contenitore figlio 2 è lasciato vuoto, ma nelle esercitazioni successive conterrà la lista Elementi attività. Il container figlio 3 contiene il grafico Dettagli articolo.

Il container padre 2, il container figlio 2 e il container figlio 3 formano insieme i container dettagli articolo

Descrizione della figura item-details-containers.png

Trovare l'elemento div in cui id="itemDetailsContainer". Al di sopra, aggiungere un elemento div esterno con un attributo id con il valore parentContainer2, nonché una classe contenitore e una classe articolo contenitore Oracle JET. Aggiungere una tag di chiusura </div> sopra la </div> di chiusura da secondo a ultimo nel file.

<!-- Parent Container 2 surrounds the Item Details container -->
    <div id="parentContainer2" class="oj-flex oj-flex-item">
      <div id="itemDetailsContainer">
        <h3>Item Details</h3>
        . . .
        </oj-chart>
      </div>
    </div>
  </div>
</div>

Sotto l'elemento div in cui id="parentContainer2", aggiungere un elemento div vuoto con un attributo id con il valore activityItemsContainer e una classe di elementi contenitore Oracle JET.

<!-- Parent Container 2 surrounds the Activity Items and Item Details child containers -->
    <div id="parentContainer2" class="oj-flex oj-flex-item">
      <div id="activityItemsContainer" class="oj-flex-item">
      </div>
      <div id="itemDetailsContainer">
        <h3>Item Details</h3>
        . . .

Aggiungere infine una classe di articoli contenitore Oracle JET all'elemento div dove id="itemDetailsContainer".

<!-- Item Details container displays a chart upon selection -->
<div id="itemDetailsContainer" class="oj-flex-item">
  <h3>Item Details</h3>

Salvare il file dashboard.html.

Il codice dovrebbe essere simile al containers-dashboard-html.txt.

Task 4: Aggiunta di pannelli e colore pannello

Applicare le classi di stile di Oracle JET per aggiungere pannelli e colori del pannello ai contenitori e agli elementi contenitore nell'applicazione Web per visualizzare il layout.

Trovare l'elemento div in cui id="parentContainer1", quindi aggiungere due classi di stile per specificare un pannello con un bordo e un colore di sfondo.
```

<div id="parentContainer1" class="oj-flex oj-flex-init oj-panel oj-bg-warning-20">
```

Trovare l'elemento div in cui id="activitiesContainer", quindi aggiungere due classi di stile per specificare un pannello con un bordo e un colore di sfondo.

<!-- The border and color for the Activities container -->
<div id="activitiesContainer" class="oj-flex-item oj-bg-info-30">
  <h3 id="activitiesHeader">Activities</h3>

Trovare l'elemento div in cui id="parentContainer2", quindi aggiungere due classi di stile per specificare un pannello con un bordo e un colore di sfondo.
```

<div id="parentContainer2" class="oj-flex oj-flex-item oj-panel oj-bg-danger-30">
```
Trovare l'elemento div in cui id="itemDetailsContainer", quindi aggiungere due classi di stile per specificare il colore del pannello e del pannello.
```

<div id="itemDetailsContainer" class="oj-flex-item oj-panel oj-bg-neutral-30">
```
Salvare il file dashboard.html.

Il codice dovrebbe essere simile al final-containers-dashboard-html.txt.

Task 5: Esecuzione dell'applicazione Web

Nella finestra del terminale, passare alla directory JET_Web_Application ed eseguire l'applicazione.
```
$ ojet serve
```
Gli strumenti Oracle JET eseguono l'applicazione Web in un browser Web locale in cui è possibile visualizzare il contenuto del dashboard.

Descrizione dell'illustrazione container-panel.png
Chiudere la finestra o la scheda del browser in cui viene visualizzata l'applicazione Web in esecuzione.
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.

Titolo e informazioni sul copyright

Add containers to the Oracle JET web app

F53124-01

February 2022