Aggiungere componenti a un'applicazione DOM virtuale Oracle JET

Introduzione

Questa esercitazione descrive come aggiungere i componenti di Oracle JavaScript Extension Toolkit (Oracle JET) al componente Content nel modello di avvio basic dell'applicazione DOM virtuale di Oracle JET.

Oracle JET è un toolkit di sviluppo che consente di creare applicazioni DOM virtuali lato client. Per utilizzare i componenti Oracle JET nell'applicazione DOM virtuale, utilizzare Oracle JET Cookbook per individuare gli esempi di componenti che illustrano le funzionalità specifiche che si desidera aggiungere all'applicazione. Sebbene non ottimizzato per JSX (sintassi tag utilizzata dalle applicazioni DOM virtuali), Cookbook mostra i componenti Oracle JET e il codice TypeScript che è possibile utilizzare per derivare l'equivalente JSX nell'applicazione DOM virtuale Oracle JET mostrando, ad esempio, l'istruzione di importazione che è necessario utilizzare per includere il componente nell'applicazione DOM virtuale.

Obiettivi

In questa esercitazione verrà descritto come utilizzare Oracle JET Cookbook per aggiungere i componenti Oracle JET Select Single and Chart al componente Content dell'applicazione DOM virtuale. Imparerai anche come connettere questi due componenti per aggiungere interattività.

Prerequisiti

Un ambiente di sviluppo impostato per creare applicazioni DOM virtuali Oracle JET che include un'installazione di Node.js
Completamento dell'esercitazione precedente in questo percorso di apprendimento, Creazione di un'applicazione DOM virtuale Oracle JET mediante un modello iniziale
Accesso a Oracle JET Cookbook

Task 1: Aggiungi classi di stile

È consigliabile posizionare gli stili che si desidera applicare ai componenti in un file CSS separato anziché utilizzare l'attributo style in linea, illustrato nell'esempio seguente:

<oj-select-single id="basicSelect" style="max-width:20em" data={chartTypesDP}>

Prima di aggiungere i componenti Seleziona singolo e Grafico alla nostra pagina, creeremo classi di stile nel file CSS dell'applicazione a cui i componenti possono fare riferimento.

Passare alla directory JET-Virtual-DOM-app/src/styles e aprire il file app.css in un editor.
Alla fine del file app.css, aggiungere le seguenti classi di stile che determineranno le proprietà di stile per i componenti Seleziona singolo e Grafico.
```
.selectSingleStyle {
   max-width:20em
}

.chartStyle {
   max-width:500px;
   width:100%;
   height:350px;
}
```
In seguito, in questa esercitazione, i componenti Seleziona singolo e Grafico fanno riferimento a questi stili utilizzando l'attributo class del componente:
```
<oj-select-single id="basicSelect" . . . class="selectSingleStyle" >. . .
<oj-chart id="barChart" . . . class="chartStyle">. . .
```

Task 2: Aggiungi un singolo componente di selezione

Passare alla directory JET-Virtual-DOM-app/src/components/content e aprire il file index.tsx in un editor.

Nella parte superiore del file index.tsx, importare i moduli Oracle JET per i componenti MutableArrayDataProvider, Etichetta e Seleziona singolo, oltre alla definizione del tipo per il componente Seleziona singolo.

import { h } from "preact";
import "ojs/ojlabel";
import "ojs/ojselectsingle";
import { ojSelectSingle } from "ojs/ojselectsingle";   
import MutableArrayDataProvider = require("ojs/ojmutablearraydataprovider");

All'interno dell'elemento HTML div della funzione Content(), aggiungere un elemento HTML h1 per visualizzare l'intestazione Informazioni prodotto.

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

export function Content() {
   return (
      <div class="oj-web-applayout-max-width oj-web-applayout-content">
         <h1>Product Information</h1>
      </div>
   );
}

All'interno dell'elemento HTML div della funzione Content(), aggiungere un altro elemento div e, all'interno di questo elemento div più recente, aggiungere un elemento oj-label e un elemento oj-select-single. Aggiungere inoltre un attributo id con un valore itemDetailsContainer al nuovo elemento div.

. . .
<div class="oj-web-applayout-max-width oj-web-applayout-content">
<h1>Product Information</h1>
<div id="itemDetailsContainer">
 <oj-label for="basicSelect">Select Chart:</oj-label>
 <oj-select-single
      id="basicSelect"
      value="pie"
      class="selectSingleStyle"
      data={chartTypesDP}
   ></oj-select-single>
 </div>
 </div>  

Prima della funzione Content(), aggiungere un alias del tipo per i tipi di grafico (ChartType) e un array di dati del tipo di grafico (chartTypesData). Inoltre, prima della funzione Content(), aggiungere un'istanza della classe MutableArrayDataProvider (chartTypesDP) per consentire l'associazione dei dati del tipo di grafico mediante il componente Seleziona singolo.

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

type ChartType = {
   id: number;
   value: string;
   label: string;
};

const chartTypeData = [
   { value: "bar", label: "Bar" },
   { value: "pie", label: "Pie" }
];

const chartTypesDP: MutableArrayDataProvider<ChartType["value"], ChartType> 
   = new MutableArrayDataProvider(chartTypeData, { keyAttributes: "value" });

export function Content() {
   . . .

Salvare il file index.tsx.

Il codice index.tsx deve avere un aspetto simile a add-select-single-index-tsx.txt.
Aprire una finestra di terminale, passare alla directory JET-Virtual-DOM-app ed eseguire l'applicazione.
```
npx @oracle/ojet-cli serve
```
Il browser visualizza il modello iniziale basic con il componente Seleziona singolo visibile nell'applicazione DOM virtuale.

Descrizione dell'illustrazione select-single.png
Lasciare aperta la finestra del terminale e il browser che visualizza l'app DOM virtuale.

Il comando serve dell'interfaccia della riga di comando di Oracle JET consente di apportare modifiche al codice nella directory JET-Virtual-DOM-app/src immediatamente riflesso nel browser. Un'eccezione è che se si aggiunge o si elimina un file, è necessario eseguire nuovamente npx @oracle/ojet-cli serve per visualizzare la modifica riportata nel browser. Il comando serve crea e fornisce il contenuto della directory JET-Virtual-DOM-app/src nella directory JET-Virtual-DOM-app/web. Non apportare modifiche al codice nella directory JET-Virtual-DOM-app/web poiché tali modifiche verranno sovrascritte alla successiva esecuzione del comando npx @oracle/ojet-cli serve.

Task 3: Aggiungi un componente grafico

Nel file index.tsx aperto della directory JET-Virtual-DOM-app/src/components/content, importare il modulo e le definizioni dei tipi per il componente Oracle JET Chart.

import { h } from "preact";
import "ojs/ojlabel";
import "ojs/ojselectsingle";
import { ojSelectSingle } from "ojs/ojselectsingle";
import MutableArrayDataProvider = require("ojs/ojmutablearraydataprovider");
import "ojs/ojchart";
import { ojChart } from "ojs/ojchart";
. . .

Prima della funzione Content(), aggiungere un alias di tipo per i dati del grafico (ChartItem), un array di dati del grafico (chartData) e un'istanza della classe MutableArrayDataProvider (chartDataProvider) per fare riferimento ai dati visualizzati dal componente Grafico.

. . .

type ChartItem = {
   id: number;
   series: string;
   group: string;
   value: number;
   };

const chartData  = [
   { "id": 0, "series": "Baseball", "group": "Group A", "value": 42 },
   { "id": 1, "series": "Baseball", "group": "Group B", "value": 34 },
   { "id": 2, "series": "Bicycling", "group": "Group A", "value": 55 },
   { "id": 3, "series": "Bicycling", "group": "Group B", "value": 30 },
   { "id": 4, "series": "Skiing", "group": "Group A", "value": 36 },
   { "id": 5, "series": "Skiing", "group": "Group B", "value": 50 },
   { "id": 6, "series": "Soccer", "group": "Group A", "value": 22 },
   { "id": 7, "series": "Soccer", "group": "Group B", "value": 46 } 
]

const chartDataProvider: MutableArrayDataProvider<ChartItem["id"], ChartItem> =
  new MutableArrayDataProvider(chartData, { keyAttributes: "id" });

export function Content() {
 . . .

All'interno dell'elemento HTML div della funzione Content() con il valore di attributo id itemDetailsContainer, aggiungere l'elemento HTML personalizzato oj-chart sotto l'elemento HTML personalizzato oj-select-single in modo che i due elementi vengano visualizzati all'interno dell'elemento itemDetailsContainer HTML div.

. . .
<div class="oj-web-applayout-max-width oj-web-applayout-content">
<h1>Product Information</h1>
<div id="itemDetailsContainer">
 <oj-label for="basicSelect">Select Chart:</oj-label>
 <oj-select-single . . .></oj-select-single>
   <oj-chart id="barChart" type="bar" data={chartDataProvider} animationOnDisplay="auto" 
            animationOnDataChange="auto" hoverBehavior="dim" class="chartStyle"></oj-chart>
 </div>
</div>   

All'interno dell'elemento HTML personalizzato oj-chart, aggiungere un elemento HTML template con un attributo slot per eseguire il rendering di ogni elemento nel grafico.

. . .
<div class="oj-web-applayout-max-width oj-web-applayout-content">
<h1>Product Information</h1>
<div id="itemDetailsContainer">
 <oj-label for="basicSelect">Select Chart:</oj-label>
 <oj-select-single . . .></oj-select-single>
  <oj-chart . . .>
      <template slot="itemTemplate" render={chartItem}></template>
   </oj-chart>
 </div>
</div>   

Prima dell'istruzione return nella funzione Content(), aggiungere il codice seguente per visualizzare i dati degli elementi del grafico.

. . .
export function Content() {

const chartItem = (
   item: ojChart.ItemTemplateContext<ChartItem["id"], ChartItem>
) => {
   return (
      <oj-chart-item
         value={item.data.value}
         groupId={[item.data.group]}
         seriesId={item.data.series}></oj-chart-item>
   );
};

return (

Salvare il file index.tsx.

Il file index.tsx dovrebbe avere un aspetto simile a final-chart-index-tsx.txt.
Tornare al browser per visualizzare le modifiche nell'applicazione DOM virtuale.

Il browser visualizza il modello iniziale basic con il componente Grafico che visualizza un grafico a barre nell'applicazione DOM virtuale.

Descrizione dell'illustrazione select-chart.png

Si noti che l'applicazione DOM virtuale visualizza solo il formato grafico a barre per ciascuna opzione dell'elenco a discesa Seleziona grafico. È necessario aggiungere una dipendenza tra i due componenti in modo che il componente Grafico risponda all'evento di selezione nel componente Seleziona singolo.
Lasciare aperta la finestra del terminale e il browser che visualizza l'app DOM virtuale.

Task 4: connettere i due componenti

Nel file index.tsx aperto dalla directory JET-Virtual-DOM-app/src/components/content, importare i ganci useState e useCallback e ComponentProps da Preact.
```
import { h, ComponentProps } from "preact";
import { useState, useCallback } from "preact/hooks";
. . . 
```
Prima della funzione Content(), aggiungere un alias di tipo per le proprietà del grafico (ChartProps).
```
type ChartProps = ComponentProps<"oj-chart">;

export function Content() {
. . . 
```

All'interno della funzione Content(), aggiungere il codice per impostare un valore iniziale di bar per il componente Seleziona singolo utilizzando l'hook useState di Preact e includere l'hook useCallback di Preact per passare i tipi di grafico appena selezionati all'hook useState.

export function Content() {
   const [val, setVal] = useState("pie" as ChartProps["type"]);

   const valChangeHandler = useCallback(
      (event: ojSelectSingle.valueChanged<ChartType["value"], ChartType>) => {
         setVal(event.detail.value as ChartProps["type"]);
      },
      [val, setVal]
   );
. . . 

All'interno dell'elemento div HTML itemDetailsContainer della funzione Content(), aggiornare i valori degli attributi personalizzati oj-select-single e oj-chart per fare riferimento al valore selezionato corrente (val) e a un handler di eventi (valChangeHandler) richiamato quando un utente seleziona un nuovo tipo di grafico.

<div id="itemDetailsContainer">
   . . .
   <oj-select-single
      id="basicSelect"
      . . .
      value={val}
      onvalueChanged={valChangeHandler}
   ></oj-select-single>

   <oj-chart
      id="barChart"
      type={val}
      . . .>

Salvare il file index.tsx.

Il file index.tsx dovrebbe avere un aspetto simile a final-connect-index-tsx.txt.
Tornare al browser per visualizzare le modifiche nell'applicazione DOM virtuale.

Il browser ora visualizza il modello iniziale basic con i componenti Seleziona singolo e Grafico a torta visibili nell'applicazione DOM virtuale.

Descrizione dell'illustrazione connect-select-and-chart.png
Per visualizzare i diversi formati di grafico, scegliere tra le opzioni nell'elenco a discesa Seleziona grafico.
Chiudere la finestra o la scheda del browser in cui è visualizzata l'app Virtual DOM in esecuzione.
Nella finestra del terminale, premere Ctrl+C e, se richiesto, immettere y per terminare il processo batch di strumenti Oracle JET.
Lasciare aperta la finestra del terminale per la prossima esercitazione.

Passo successivo

Per passare all'esercitazione successiva in questo percorso di apprendimento, fare clic qui.

Altre risorse di apprendimento

Esplora altri laboratori all'indirizzo docs.oracle.com/learn o accedi ad altri contenuti per la formazione gratuita sul canale YouTube di Oracle Learning. Inoltre, visitare education.oracle.com/learning-explorer per diventare Oracle Learning Explorer.

Per la documentazione sul prodotto, visitare Oracle Help Center.

Titolo e informazioni sul copyright

Add components to an Oracle JET virtual DOM app

F61017-01

December 2022