Crea la vista principale in un'applicazione Web Oracle JET

Introduzione

Questa esercitazione descrive come leggere i dati gerarchici Master-Detail da un documento JSON (JavaScript Object Notation) locale e visualizzare i dati in una vista master in un'applicazione Web Oracle JavaScript Extension Toolkit (Oracle JET).

Nel file viewModel per l'applicazione Web Oracle JET è possibile utilizzare l'API Oracle JET per creare un oggetto provider di dati. L'oggetto rappresenta un array di dati popolato dagli oggetti padre di un data store di documenti JSON. Nella vista per l'applicazione Web Oracle JET, l'attributo data degli elementi HTML personalizzati Oracle JET viene associato ai dati tramite un'istanza di un oggetto MutableArrayDataProvider dichiarato e popolato nel codice di origine viewModel dell'applicazione.

Obiettivi

In questa esercitazione, verranno associati più elementi degli oggetti dati padre in un documento JSON locale e verranno inserite le righe di un componente Oracle JET List View con tali dati.

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 con layout reattivo 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
Il file product_images.zip scaricato nella directory JET_Web_Application/src/css/images/

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 che Oracle JET sia installato e aggiornato alla versione più recente.
```
$ 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: Scarica le immagini del prodotto

Se l'applicazione di avvio è stata scaricata in jet_web_application_temp.zip, ignorare questo task.

Se il processo batch del server degli strumenti Oracle JET è in esecuzione nella finestra del terminale, premere Ctrl+C e, se richiesto, immettere y per uscire dal processo batch del server.

Il processo batch del server riconosce solo le revisioni apportate ai file di applicazione esistenti. Dopo aver creato nuovi file, è necessario eseguire di nuovo l'applicazione Web.
Scaricare il file product_images.zip nella directory JET_Web_Application/src/css/images/.
Estrarre il contenuto del file ZIP in una nuova cartella product_images nella cartella images.

Il percorso della nuova cartella è JET_Web_Application/src/css/images/product_images e la cartella contiene le immagini utilizzate dall'applicazione.

Task 3: Migliorare l'elenco delle attività nella vista

Modificare il componente Oracle JET List View per visualizzare più elementi dati dell'origine dati dell'array Attività per ogni riga elenco. Per creare un'istanza del contenuto degli elementi dati della riga elenco in runtime, il componente Vista elenco attività utilizza un elemento HTML template con un attributo slot come segnaposto.

Trovare l'elemento div con id="activityItemsContainer" ed eliminare la classe dell'applicazione di supporto oj-sm-only-text-align-end per impedire il riallineamento dei contenuti dell'elenco Attività.
```
<div id="activitiesContainer" class="oj-flex-item oj-bg-info-30 oj-md-4 oj-sm-12">
```
Trovare l'elemento HTML personalizzato oj-list-view in cui id="activitiesList" e aggiungere un attributo class con il valore item-display.
```
<oj-list-view id="activitiesList" class="item-display" aria-labelledby="activitiesHeader"
  data="[[activityDataProvider]]" gridlines.item="visible">
```
Per fornire l'origine dati della vista elenco, l'attributo data associa l'attributo activityDataProvider osservabile come associazione dati unidirezionale.
Passare alla directory JET_Web_Application/src/css e aprire il file app.css. Qui è possibile aggiungere stili CSS specifici dell'applicazione. Creare una definizione di stile .item-display con le proprietà width, height e overflow-x per supportare la visualizzazione di più elementi dati nelle righe dell'elenco.
```
.item-display {
      width: 100%;
      height: 500px;
      overflow-x: hidden;
      }
```
Nell'elemento oj-list-view in cui id="activitiesList", individuare l'elemento modello in cui slot="itemTemplate" ed eliminare l'elemento div e l'elemento oj-bind-text contenuto.
```
<template slot="itemTemplate">

</template>
```

Nell'elemento template vuoto, aggiungere tre elementi div con il codice per popolare le righe del componente Vista elenco con un'immagine di sfondo, un nome e una breve descrizione.

<template slot="itemTemplate">
 <div class="oj-flex no-wrap">
  <span class="demo-thumbnail oj-flex-item"
      :style.background-image="[[' url('+$current.data.image+')']]"></span>
<div class="demo-content oj-flex-item">
  <div>
   <strong>
     <oj-bind-text value="[[$current.data.name]]"></oj-bind-text>
   </strong>
   </div>
  <span class="demo-metadata">
   <oj-bind-text value="[[$current.data.short_desc]]"></oj-bind-text>
  </span>
  </div>
 </div>
</template>

Salvare il file dashboard.html.

L'aspetto del file deve essere simile a final-master-list-dashboard-html.txt.

Task 4: esaminare il provider di dati delle attività in ViewModel

Per popolare il componente Vista elenco attività, viewModel crea un'istanza dell'array di dati Attività utilizzando una classe MutableArrayDataProvider di Oracle JET. Il metodo JSON.parse analizza il data store JSON locale come argomento che restituisce i dati.

Aprire Oracle JET Cookbook e accedere alla home page di Cookbook. Fare clic su Framework, quindi su Provider di dati e infine su Provider di dati di array modificabili. Nella barra degli strumenti di Cookbook fare clic su Documento API.
Nella documentazione dell'interfaccia API, consulta la classe MutableArrayDataProvider. Si noti come utilizzare l'argomento facoltativo keyAttributes per creare un'istanza di una classe MutableArrayDataProvider in base all'attributo chiave dell'oggetto dati passato.
Passare alla directory JET_Web_Application/src/ts/viewModels e aprire il file dashboard.ts in un editor. Trovare la dichiarazione di this.activityDataProvider nel metodo costruttore.
```
   this.activityDataProvider = new MutableArrayDataProvider<
   Activity["id"],
   Activity
      >(JSON.parse(storeData), {
         keyAttributes: "id",
   });
}
```
In questo modo viene creato l'oggetto activityDataProvider, un'istanza della classe MutableArrayDataProvider. La proprietà keyAttributes di MutableArrayDataProvider popola l'array Attività in base all'attributo id dell'oggetto padre. L'attributo id è l'attributo chiave per gli oggetti dati padre e figlio nel documento JSON.
Chiudere il file dashboard.ts senza apportare modifiche.

L'aspetto del file deve essere simile a final-master-list-dashboard-ts.txt.

Task 5: eseguire l'applicazione Web ed eseguire il debug del foglio di stile CSS dell'applicazione

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 l'elenco master associato ai dati. Le immagini visualizzate a sinistra dei nomi di attività dell'elenco Attività vengono visualizzate solo parzialmente perché troppo grandi.

Se si ridimensiona il browser e non viene ancora visualizzata una pagina simile a questa schermata di esempio, confermare di aver estratto le immagini dell'applicazione nella cartella product_images.

Descrizione dell'immagine master_list_with_error.png
Nel browser Google Chrome fare clic con il pulsante destro del mouse sull'immagine parziale per l'attività Soccer e selezionare Ispeziona. Il browser visualizza gli strumenti per sviluppatori per l'ispezione dell'origine della pagina HTML.
Nel pannello Elementi, selezionare l'elemento span class="demo-thumbnail". Nel pannello Stili individuare lo stile element.style background-image evidenziato. Fare clic con il pulsante destro del mouse sull'URL dell'immagine jrsoccerball.jpg e selezionare Rivedi nel pannello Origini.

Descrizione dell'immagine Inspect_image_url.png
Il pannello Origini Chrome DevTools mostra che l'immagine è 300 x 300 pixel e la dimensione è troppo grande per essere visualizzata nel componente Oracle JET List View. Per eseguire il rendering di un'immagine di dimensioni miniatura da un'immagine di dimensioni complete, è possibile definire una classe di stile CSS (Cascading Style Sheets).

Descrizione dell'immagine Inspect_image_url_contents.png
Chiudere la finestra Strumenti per sviluppatori e tornare all'applicazione nel browser.

Task 6: correggere il CSS e visualizzare l'elenco principale

Passare alla directory JET_Web_Application/src/css e aprire il file app.css in un editor.
Definire le proprietà per il selettore classe .demo-thumbnail. Nell'elenco delle proprietà, impostare una proprietà background-repeat su no-repeat per visualizzare l'immagine una sola volta. Definire inoltre un selettore classe no-wrap con la proprietà flex-wrap impostata su nowrap.
```
.demo-thumbnail {
      border-radius: 5px;
      background-size: 40px 40px;
      background-repeat: no-repeat;
      min-width: 40px;
      min-height: 40px;
      max-width: 40px;
      margin-right: 10px;
      }

.no-wrap {
      flex-wrap: nowrap;
      }  
```
Nel file dashboard.html, l'elemento span fa riferimento al selettore classe per formattare l'immagine della lista Attività come miniatura impostando lo stile CSS demo-thumbnail sull'attributo class. Nell'elemento span, la proprietà CSS background-image imposta l'immagine in base all'URL nella proprietà image dell'oggetto padre Attività corrente.
```
<span class="demo-thumbnail oj-flex-item" 
   :style.background-image="[[' url('+$current.data.image+')']]"></span>
```
Salvare e chiudere il file app.css.

Il file dovrebbe avere un aspetto simile a app-css-final.txt.
Ricaricare la pagina nel browser Web.

Nel browser viene visualizzato l'elenco principale associato ai dati con le immagini delle dimensioni delle miniature.

Descrizione dell'immagine formatted_master_list.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

Create the master view in an Oracle JET web app

F53169-01

February 2022