Crea la vista dei dettagli in un'applicazione Web Oracle JET

Introduzione

I componenti di Oracle JavaScript Extension Toolkit (Oracle JET) conservano la relazione gerarchica di oggetti dati principali e dettagliati, come definito dall'origine dati. 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 dati figlio di un data store JSON (JavaScript Object Notation). Il provider di dati Oracle JET recupera gli oggetti dati figlio in base all'attributo chiave id dell'oggetto dati padre corrente. Nella vista per l'applicazione Web Oracle JET, l'attributo data del componente Oracle JET List View viene associato al provider di dati mediante un osservabile Knockout. Il Knockout osservabile è dichiarato anche nel codice sorgente viewModel dell'applicazione. Questo codice popola l'osservabile come istanza del provider dati elenco dettagli.

Obiettivi

In questa esercitazione vengono letti i dati gerarchici Master-Detail di un documento JSON locale e viene visualizzata la vista dei dettagli in un'applicazione Web Oracle JET. Viene descritto come associare i dati agli elementi degli oggetti dati figlio per popolare un componente Oracle JET List View, più componenti Oracle JET Input Text e un componente Oracle JET Chart.

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
Completamento dell'esercitazione precedente in questo percorso di apprendimento, in modo da creare la cartella JET_Web_Application

Task 1: Associazione dati - Elenco dettagli elementi attività nella vista

Sostituire la lista Elementi attività associata a dati statici con un componente Vista lista Oracle JET associato a più elementi dati degli oggetti figlio Elementi attività.

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

Trovare l'elemento div in cui id="container" e quindi eliminarlo e l'elemento personalizzato oj-module che contiene.

  <div id="activityItemsContainer" class="oj-flex-item oj-md-6 oj-sm-12">
    <div id="container">
      <oj-module config="[[moduleConfig]]"></oj-module>
    </div>
  </div>

<!-- Delete the div element with id="container" so that your code is similar to the following: -->

  <div id="activityItemsContainer" class="oj-flex-item oj-md-6 oj-sm-12">

  </div>
  . . . 

All'interno dell'elemento div, dove id="activityItemsContainer", aggiungere un elemento intestazione h3 per l'elenco dei dettagli Elementi attività.
```
<div id="activityItemsContainer" class="oj-flex-item oj-md-6 oj-sm-12">
  <h3 id="itemsListHeader">Activity Items</h3>
</div>
```
Dopo la tag di chiusura dell'elemento h3 creato, aggiungere un elemento HTML personalizzato oj-list-view per visualizzare l'elenco dei dettagli degli elementi di attività e un elemento template con un attributo slot da applicare al contenuto dell'elenco dei dettagli.
```
 <h3 id="itemsListHeader">Activity Items</h3>
   <oj-list-view id="itemsList" class="item-display" data="[[itemsDataProvider]]" aria-labelledby="itemsListHeader" gridlines.item="visible">
     <template slot="itemTemplate">

     </template>
   </oj-list-view>
```
Il componente Oracle JET List View utilizzato in un elemento HTML template in linea con un attributo slot come segnaposto crea l'istanza del contenuto dell'elenco dei dettagli degli elementi attività in fase di esecuzione.
All'interno dell'elemento template creato, aggiungere tre elementi div con il codice per associare gli elementi dati immagine e nome per ogni oggetto figlio Elementi attività.
```
<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>
    </div>
  </div>
</template>
```
Il codice $current.data.image e $current.data.name associa i dati e un elemento HTML template espone un nome elemento immagine e attività per l'elenco dei dettagli degli elementi attività. Il prefisso $current rappresenta l'oggetto figlio corrente che il provider di dati per il componente Vista lista Oracle JET passa nel modello.
Salvare il file dashboard.html e lasciarlo aperto nell'editor.

L'aspetto del file dovrebbe essere simile a detail-list-task1-dashboard-html.txt.

Task 2: Creare gli oggetti figlio Elementi attività in ViewModel

Sostituire il modello in linea oj-module creato nel percorso di apprendimento precedente per visualizzare l'elenco Elementi attività con una chiamata documento JSON per leggere gli oggetti figlio Elementi attività da un documento JSON locale. In itemsDataProvider, creare un'istanza di una classe MutableArrayDataProvider di Oracle JET che rappresenta un array di oggetti figlio definiti dal documento JSON. Associare quindi l'istanza itemsArray a un'istanza osservabile itemsDataProvider. Il componente Oracle JET List View nella vista fa riferimento a questo osservabile nel relativo attributo data per visualizzare l'elenco dei dettagli degli elementi attività.

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

Nella parte superiore del file dashboard.ts, dopo la dichiarazione di tipo Activity, dichiarare il seguente tipo Item.

type Activity = {
   id: number;
};

type Item = {
   id: number;
   name: string;
   short_desc: string;
   price: number;
   quantity: number;
   quantity_shipped: number;
   quantity_instock: number;
   activity_id: number;
   image: string;
};
. . . 

Cancellare il codice dalla dichiarazione di const lg_xl_view fino a non includere la dichiarazione di this.chartTypes. Il blocco di codice termina con una riga di commento che legge End of oj-module code. Una chiamata di documento JSON sostituirà i dati statici e il codice del modello in linea.

L'aspetto del file dovrebbe essere simile a detail-list-task2a-dashboard-ts.txt.
Dalle importazioni del modulo nella parte superiore di dashboard.ts, eliminare le istruzioni di importazione HtmlUtils, ResponsiveUtils, ResponsiveKnockoutUtils e ojmodule-element non utilizzate.

Aggiungere un'istruzione di importazione per il modulo ojs/ojavatar alla lista di importazione. Il modulo ojavatar supporta la vista nella sezione successiva di questa esercitazione.

import * as AccUtils from "../accUtils";
import * as ko from "knockout";
import MutableArrayDataProvider = require("ojs/ojmutablearraydataprovider");
import "ojs/ojselectsingle";
import "ojs/ojlabel";
import "ojs/ojchart";
import * as storeData from "text!../store_data.json";
import "ojs/ojlistview";
import "ojs/ojavatar";

Dopo la definizione this.activityDataProvider, all'interno della funzione constructor aggiungere le definizioni per activitiesArray e itemsArray. Quindi dichiarare this.itemsDataProvider come istanza di MutableArrayDataProvider. Analizza i dati dell'area di memorizzazione e rende disponibili gli oggetti figlio del primo oggetto padre Attività nel componente Vista lista Oracle JET. Nell'esercitazione successiva è possibile impostare l'oggetto Attività in modo dinamico utilizzando gli handler di eventi.

. . . 
let activitiesArray = JSON.parse(storeData);
let itemsArray = activitiesArray[0].items;

this.itemsDataProvider = new MutableArrayDataProvider<Item["id"], Item>(
  itemsArray,
  { keyAttributes: "id" }
  );

} // closing bracket of constructor function
. . . 

Rimuovere quindi le annotazioni tipo non utilizzate per large e moduleConfig e aggiungere le annotazioni tipo per itemsArray e itemsDataProvider.

class DashboardViewModel {
    chartTypes: Array<Object>;
    chartTypesDP: MutableArrayDataProvider<ChartType["value"], ChartType>;
    chartData: Array<Object>;
    chartDataProvider: MutableArrayDataProvider<string, {}>;
    activityDataProvider: MutableArrayDataProvider<Activity["id"], Activity>;
    val: ko.Observable<string>;
    itemsArray: Array<Object>;
    itemsDataProvider: MutableArrayDataProvider<Item["id"], Item>;

L'aspetto del file dovrebbe essere simile a detail-list-task2b-dashboard-ts.txt.

Task 3: Esecuzione dell'applicazione Web

Il comando ojet serve consente di apportare modifiche al codice dell'applicazione che si riflettono immediatamente nel browser Web.

Nella finestra del terminale, passare alla directory JET_Web_Application ed eseguire l'applicazione.
```
$ ojet serve
```
Nella scheda Dashboard il browser Web visualizza l'elenco dei dettagli associati ai dati con l'intestazione Elementi attività.

Descrizione dell'immagine formatted_master_detail_list.png
Lasciare aperta la finestra del terminale e il browser in cui è visualizzata l'applicazione Web.

Task 4: Dettagli elemento di associazione dati e grafico a torta nella vista

Sostituire i grafici a torta Dettagli elemento e a barre con gli elementi riportati di seguito.

Componente Avatar Oracle JET associato all'immagine dell'articolo di un oggetto figlio Elementi attività
Componenti di più campi di testo Oracle JET associati agli elementi dati dell'oggetto figlio Elementi attività
Un componente Grafico a torta associato agli elementi dati del grafico dello stesso oggetto figlio Elementi attività

Nel file dashboard.html, all'interno dell'elemento div in cui id="itemDetailsContainer", individuare l'intestazione Dettagli elemento. Sotto l'intestazione, aggiungere una regola orizzontale seguita da un elemento HTML personalizzato oj-avatar associato all'elemento dati immagine per un oggetto figlio Elementi attività.
```
<div id="itemDetailsContainer" class="oj-flex-item oj-panel oj-bg-neutral-30 oj-md-6 oj-sm-12">
  <h3>Item Details</h3>
  <hr class="hr-margin" />
  <oj-avatar role="img" size="lg" :aria-label="[['product image for '+ itemData().name]]"
    :src="[[itemData().image]]" class="float-right">
  </oj-avatar>
```
Il componente osservabile itemData popola il componente Avatar di Oracle JET utilizzando un'istanza del provider di dati creata nell'applicazione viewModel. La funzione itemData().image è la notazione osservabile Knockout per la lettura del valore corrente di un elemento dati. L'elemento dati viene identificato dalla proprietà image dell'oggetto figlio Elementi attività.
In dashboard.html, sotto il tag di chiusura dell'elemento oj-avatar creato, eliminare l'elemento HTML personalizzato oj-label for="basicSelect" e l'elemento oj-select-single.
Sotto il tag di chiusura dell'elemento oj-avatar creato, aggiungere quattro elementi div con gli elementi HTML personalizzati oj-bind-text associati al nome, alla descrizione breve, al prezzo e agli elementi dati ID di un oggetto figlio Elementi attività.
```
. . . 
</oj-avatar>
  <div id="itemName" class="data-name">
    <oj-bind-text value="[[itemData().name]]"></oj-bind-text>
  </div>
  <div id="itemDesc" class="data-desc">
    <oj-bind-text value="[[itemData().short_desc]]"></oj-bind-text>
  </div>
  <div id="itemPrice">
    <oj-bind-text value="[['Price: ' + itemData().price + ' each']]"></oj-bind-text>
  </div>
  <div id="itemId">
    <oj-bind-text value="[['Item Id: ' + itemData().id]]"></oj-bind-text>
  </div>
. . . 
```
Gli osservatori itemData popolano il componente Associazione testo di Oracle JET utilizzando un provider di dati creato nell'applicazione viewModel. La funzione itemData().<prop_name> legge il valore corrente dell'elemento dati denominato. Gli elementi dati vengono identificati dalle proprietà name, short_desc, price e id dell'oggetto figlio Elementi attività.

Passare alla directory JET_Web_Application/src/css e aprire il file app.css per aggiungere le definizioni di stile seguenti.

.hr-margin {
  margin-top: 12px;
}

.data-name {
  font-size: 20px;
  font-weight: bolder;
}

.data-desc {
  font-size: 14px;
  font-weight: 400;
  font-style: italic;
  margin-bottom: 10px;
}

.float-right {
  float: right;
}

Il file dovrebbe avere un aspetto simile a app-css-final.txt.

Sotto gli elementi div creati, eliminare l'elemento HTML personalizzato oj-chart id="barChart".
Dopo la tag di chiusura </div> dell'elemento div id="itemId", aggiungere un nuovo elemento div e un elemento HTML personalizzato oj-chart associato a una serie di grafici a torta per un oggetto figlio Elementi attività.
```
. . . 
<div id="itemId">
  <oj-bind-text value="[['Item Id: ' + itemData().id]]"></oj-bind-text>
</div>
<div>
  <oj-chart type="pie" series="[[pieSeriesValue]]" animation-on-display="auto" 
    animation-on-data-change="auto"
    hover-behavior="dim" legend.position="bottom" class="chartStyle">
  </oj-chart>
</div>
. . . 
```
Il componente osservabile pieSeriesValue popola il componente Grafico a torta di Oracle JET utilizzando un array di dati creato nell'applicazione viewModel.
Salvare il file dashboard.html.

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

Task 5: Impostare i parametri osservabili per i dettagli dell'articolo e i componenti del grafico a torta in ViewModel

Ottiene un elemento dati dall'oggetto figlio Elementi attività e popola gli osservabili per associare i componenti della vista. Nella vista, l'attributo value dei vari componenti Dettagli elemento fa riferimento all'osservabile itemData. L'attributo series del componente Grafico a torta fa riferimento ai dati del grafico osservabile pieSeriesValue dello stesso elemento dati.

Nel file dashboard.ts eliminare il blocco di codice che inizia con this.val e termina con this.chartTypesDP. Eliminare inoltre le annotazioni di tipo non utilizzato per le variabili rimosse. L'elenco delle annotazioni del tipo e l'inizio della funzione constructor() devono essere simili all'esempio seguente.

class DashboardViewModel {
  activityDataProvider: MutableArrayDataProvider<Activity["id"], Activity>;
  itemsArray: Array<Object>;
  itemsDataProvider: MutableArrayDataProvider<Item["id"], Item>;

  constructor() {
    this.activityDataProvider = new MutableArrayDataProvider<
      Activity["id"],
      Activity
    >(JSON.parse(storeData), {
      keyAttributes: "id",
    });
. . . 

Aggiungere le annotazioni di tipo itemData e pieSeriesValue alla classe DashboardViewModel.

class DashboardViewModel {
  activityDataProvider: MutableArrayDataProvider<Activity["id"], Activity>;
  itemsArray: Array<Object>;
  itemsDataProvider: MutableArrayDataProvider<Item["id"], Item>;
  itemData: ko.Observable<any>;
  pieSeriesValue: ko.ObservableArray;

  constructor() {
. . . 

Dopo l'istruzione this.itemsDataProvider, impostare l'osservabile itemData con un riferimento al primo oggetto padre Attività e al primo oggetto figlio Elemento attività associato a tale attività nel documento JSON.

  this.itemsDataProvider = new MutableArrayDataProvider<Item["id"], Item>(
    itemsArray,
    { keyAttributes: "id" }
  );

  this.itemData = ko.observable(''); 
  this.itemData(activitiesArray[0].items[0]);

}   // End of constructor function

Infine, al di sotto della dichiarazione osservabile itemData, impostare l'osservabile this.pieSeriesValue.

this.itemData = ko.observable(''); 
this.itemData(activitiesArray[0].items[0]);

this.pieSeriesValue = ko.observableArray([]);

let pieSeries = [
  { name: "Quantity in Stock", items: [this.itemData().quantity_instock] },
  { name: "Quantity Shipped", items: [this.itemData().quantity_shipped] }
];
this.pieSeriesValue(pieSeries);

Task 6: visualizzazione degli elenchi principale e dettagliato

Tornare al browser per visualizzare le modifiche nell'applicazione Web.

In the Dashboard tab of your web app, the databound Oracle JET text fields, avatar, and pie chart are displayed in the Items Details container, but the lists do not respond to selections. In the next tutorial, event handlers you create will add selection functionality.

Descrizione dell'immagine formatted_master_detail_items_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 detail view in an Oracle JET web app

F53176-01

February 2022