Associa i dati a un componente in un'applicazione Web Oracle JET

Introduzione

Questa esercitazione descrive come utilizzare un documento JSON locale nell'applicazione Web Oracle JavaScript Extension Toolkit (Oracle JET).

Oracle JET è un toolkit di sviluppo che fornisce una serie di classi di data provider per gestire i dati provenienti da varie origini. Nel file viewModel verrà popolata un'istanza di MutableArrayDataProvider con i dati letti da un file JSON, quindi associare l'istanza MutableArrayDataProvider agli elementi HTML personalizzati di Oracle JET nella vista.

Obiettivi

Al termine di questa esercitazione, verrà descritto come leggere i dati da un documento JSON in un provider di dati, aggiungere un componente Oracle JET List View e associare i dati al componente agli oggetti dati JSON.

Prerequisiti

Task 1: scaricare il documento JSON ed esaminare i dati

  1. Scaricare il file store_data.json nella directory JET_Web_Application/src/ts/.
  2. Aprire il file store_data.json nel browser Web e visualizzare la struttura dei dati. Il file store_data.json contiene una lista di oggetti attività e le relative proprietà. Ogni attività include un array di elementi con proprietà proprie.

Task 2: Popolare un provider di dati in ViewModel

È possibile eseguire il push dei dati dal file JSON in un oggetto ojmutablearraydataprovider di Oracle JET.

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

  2. Importare i dati dal file store_data.json in modo che siano disponibili in ViewModel.

    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";

  3. Se non è presente, importare il modulo ojmutablearraydataprovider da utilizzare per contenere i dati JSON.

    import MutableArrayDataProvider = require("ojs/ojmutablearraydataprovider");

  4. Prima della classe DashboardViewModel(), definire un alias di tipo, Activity, che include il campo id di tipo number.

    ...
type Activity = {
  id: number;
}

class DashboardViewModel {

  5. Nella classe DashboardViewModel() aggiungere un tipo per activityDataProvider che verrà creato nel passo successivo.

    class DashboardViewModel {

   val: ko.Observable<string>;
   . . .
   chartDataProvider: MutableArrayDataProvider<string, {}>;
   chartData: Array<Object>;
   activityDataProvider: MutableArrayDataProvider<Activity["id"], Activity>;    
   . . .

  6. Nel metodo constructror della classe DashboardViewModel() creare un'istanza di MutableArrayDataProvider (activityDataProvider) e utilizzare il metodo JSON.parse per leggere nei dati JSON.

    constructor() {
   this.val = ko.observable("pie");
   ...

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

  7. Importare il modulo componente Oracle JET List View.

    import * as storeData from "text!../store_data.json";
import MutableArrayDataProvider = require("ojs/ojmutablearraydataprovider");
import "ojs/ojlistview";

    Il modulo ojlistview supporta la vista nella sezione successiva di questa esercitazione.

  8. Salvare il file dashboard.ts. Il file dashboard.ts deve avere un aspetto simile a final-data-bind-dashboard-ts.txt.

Task 3: Associazione dei dati al componente vista elenco nella vista

L'elemento oj-list-view è un elemento HTML personalizzato Oracle JET con funzioni interattive che è una versione avanzata di un elenco HTML. Per fornire i dati all'elenco, associare la variabile activityDataProvider popolata in viewModel all'attributo data della vista elenco.

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

  2. Nel file dashboard.html aggiungere un elemento div con un valore di attributo id activitiesContainer sopra l'elemento itemDetailsContainer div che contiene i componenti Oracle JET Select Single e Chart.

    <div class="oj-hybrid-padding">
  <h1>Product Information</h1>
   <div id="activitiesContainer">
      </div>
   <div id="itemDetailsContainer">
      <oj-label for="basicSelect">Select Chart:</oj-label>
      ...
   </div>

  3. All'interno dell'elemento activitiesContainer div aggiungere un elemento oj-list-view con un attributo data che utilizza un'associazione unidirezionale per ottenere i dati della lista.

    <div class="oj-hybrid-padding">
<h1>Product Information</h1>
 <div id="activitiesContainer">
  <oj-list-view id="activitiesList" aria-labelledby="activitiesHeader" data="[[activityDataProvider]]" gridlines.item="visible">
   </oj-list-view>
 </div>

    È inoltre possibile specificare il valore visible per l'attributo gridlines in modo che venga visualizzata una linea di griglia tra gli elementi dell'elenco e l'attributo aria-labelledby come procedura ottimale per l'accesso facilitato.

  4. All'interno dell'elemento oj-list-view creato, aggiungere un elemento HTML template con un attributo slot per visualizzare ogni elemento nella lista.

    <div class="oj-hybrid-padding">
<h1>Product Information</h1>
<div id="activitiesContainer">
   <oj-list-view id="activitiesList" aria-labelledby="activitiesHeader" data="[[activityDataProvider]]" gridlines.item="visible">
      <template slot="itemTemplate">
         </template>
   </oj-list-view>
</div>

  5. All'interno dell'elemento modello aggiungere un altro elemento div contenente un elemento HTML personalizzato oj-bind-text con un attributo value che utilizza un'associazione unidirezionale per ottenere i dati della lista dall'oggetto dati corrente.

    <div class="oj-hybrid-padding">
<h1>Product Information</h1>
<div id="activitiesContainer">
   <oj-list-view id="activitiesList" aria-labelledby="activitiesHeader" data="[[activityDataProvider]]" gridlines.item="visible">
      <template slot="itemTemplate">
            <div>
               <strong>
                  <oj-bind-text value="[[$current.data.name]]"></oj-bind-text>
               </strong>
            </div>
         </template>
   </oj-list-view>
</div>

  6. Aggiungere un elemento HTML h3 per fornire un'intestazione per l'elenco delle attività.

    <div class="oj-hybrid-padding">
<h1>Product Information</h1>
<div id="activitiesContainer">
   <h3 id="activitiesHeader">Activities</h3>
  <oj-list-view id="activitiesList" aria-labelledby="activitiesHeader" data="[[activityDataProvider]]" gridlines.item="visible">
. . .

  7. In itemDetailsContainer div aggiungere un elemento h3 e un elemento oj-label per fornire un'intestazione per il grafico.

    . . .
<div id="itemDetailsContainer">
  <h3>Item Details</h3>
    <oj-label for="basicSelect">Select Chart:</oj-label>
. . .

  8. Salvare il file dashboard.html. Il file dashboard.html deve avere un aspetto simile a final-data-bind-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

    Il browser visualizza l'elenco delle attività visibili nella scheda Dashboard dell'applicazione Web.

    Area Informazioni prodotto.

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

  4. Lasciare aperta la finestra del terminale per l'esercitazione successiva.

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.