Crea un componente Web Oracle JET

Introduzione

Un componente Web è un elemento riutilizzabile dell'interfaccia utente che è possibile incorporare come elemento HTML personalizzato nell'applicazione Web. I componenti Web possono contenere componenti di Oracle JavaScript Extension Toolkit (Oracle JET), altri componenti Web, HTML, JavaScript, TypeScript e CSS (Cascading Style Sheet). Utilizzare gli strumenti Oracle JET per creare il componente Web. È possibile utilizzare un modello di avvio di Oracle JET per generare i file HTML e JavaScript o TypeScript modificati per aggiungere il componente Web.

Obiettivi

In questa esercitazione verrà creato e configurato un componente Web Oracle JET in un'applicazione Web che utilizza il modello di avvio del cassetto di navigazione. Viene inoltre descritto come modificare i file dei componenti Web per aggiungere un componente Layout modulo con quattro campi di testo di input.

Prerequisiti

Un ambiente di sviluppo impostato per creare applicazioni Oracle JET con runtime JavaScript, Node.js e l'interfaccia della riga di comando della release Oracle JET più recente installata
Accesso a Oracle JET Developer Cookbook

Task 1: creare un'applicazione Web Oracle JET

Utilizzare il modello di avvio del cassetto di navigazione e lo strumento Oracle JET per creare la cartella dell'applicazione in cui verrà creato il componente Web Oracle JET.

Aprire una finestra di terminale come amministratore e creare un'applicazione Web denominata JET_Web_Component_Application con il modello di avvio del cassetto di navigazione.
```
$ ojet create JET_Web_Component_Application --template=navdrawer --typescript  
```
Spostarsi nella directory JET_Web_Component_Application ed eseguire l'applicazione.
```
$ ojet serve
```
Nel browser viene visualizzato il modello di avvio del cassetto di navigazione con il contenuto predefinito visibile nella scheda Dashboard dell'applicazione Web.

Descrizione dell'immagine dashboard_default_message.png
Chiudere la finestra o la scheda del browser in cui viene visualizzata l'applicazione Web in esecuzione.

Task 2: creare un componente Web Oracle JET

Nella finestra del terminale premere Ctrl+C e, se richiesto, immettere y per uscire dal processo batch di strumenti Oracle JET.
Nella directory JET_Web_Component_Application creare il componente Web demo-update-item.
```
$ ojet create component demo-update-item
```
Gli strumenti Oracle JET creano il componente Web demo-update-item nella directory JET_Web_Component_Application/src/ts/jet-composites. Il nome del componente Web contiene un trattino ed è in minuscolo, come richiesto dalle convenzioni di denominazione W3C per i componenti Web.

Task 3: Aggiungere il componente Web all'applicazione

Per utilizzare il componente Web nell'applicazione Web, aggiungere il modulo del programma di caricamento del componente Web al file TypeScript dell'applicazione Web e aggiungere l'elemento del componente Web al file HTML dell'applicazione Web.

Passare alla directory JET_Web_Component_Application/src/ts/viewModels e aprire il file dashboard.ts in un editor.
Nella parte superiore del file dashboard.ts importare il modulo del programma di caricamento del componente Web.
```
import * as AccUtils from "../accUtils";
import "demo-update-item/loader";
```
Salvare il file dashboard.ts.
Passare alla directory JET_Web_Component_Application/src/ts/views e aprire il file dashboard.html in un editor.

Sostituire il contenuto dell'elemento div in Dashboard Content Area con l'elemento demo-update-item.

<div class="oj-hybrid-padding">
   <h1>Dashboard Content Area</h1>
      <div>
         <demo-update-item></demo-update-item>
      </div>
</div>

Modificare l'elemento h1 per visualizzare Update Item Details come titolo e aggiungere la classe oj-header-border.

<div class="oj-hybrid-padding">
   <h1 class="oj-header-border">Update Item Details</h1>
      <div>
         <demo-update-item></demo-update-item>
      </div>
</div>

Aggiungere un div con una classe oj-panel intorno al contenuto modificato per visualizzare un bordo di selezione per il componente Web.

<div class="oj-hybrid-padding">
   <div class="oj-panel oj-sm-margin-2x demo-mypanel">
      <h1 class="oj-header-border">Update Item Details</h1>
      <div>
         <demo-update-item></demo-update-item>
      </div>
   </div>
</div>

Salvare il file dashboard.html.
Nella finestra del terminale, passare alla directory JET_Web_Component_Application ed eseguire l'applicazione.
```
$ ojet serve
```
Il browser visualizza il pannello Aggiorna dettagli elemento del componente Web nella scheda Dashboard dell'applicazione Web. Nel pannello viene visualizzato un bordo e un messaggio predefinito.

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

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

Task 4: Aggiunta di un modulo al componente Web

Configurare il componente Web per visualizzare un modulo con quattro campi di testo di input. Modificare i file TypeScript e HTML del componente Web per aggiungere un componente Layout modulo.

Aprire Oracle JET Cookbook e passare alla home page di Cookbook, quindi fare clic su Moduli nella barra dei menu e selezionare il componente Layout modulo. Leggi come gestire il layout delle etichette e dei campi in un modulo.
Passare alla directory JET_Web_Component_Application/src/ts/jet-composites/demo-update-item e aprire il file demo-update-item-view.html in un editor.

Sostituire il contenuto del file demo-update-item-view.html con il componente Layout modulo Oracle JET e quattro campi Testo input Oracle JET da visualizzare nel pannello Aggiorna dettagli elemento.

<oj-form-layout id="form-container" label-edge="[[labelEdge]]">
   <oj-input-text value="ID number" label-hint="Item ID"></oj-input-text>
   <oj-input-text value="Name" label-hint="Item Name"></oj-input-text>
   <oj-input-text value="Price" label-hint="Item Price"></oj-input-text>
   <oj-input-text value="Description" label-hint="Item Description"></oj-input-text>
</oj-form-layout>

Salvare il file demo-update-item-view.html.
Nella directory JET_Web_Component_Application/src/ts/jet-composites/demo-update-item aprire il file demo-update-item-viewModel.ts in un editor.

Nella classe ViewModel aggiungere un Knockout osservabile isSmall che utilizza la utility ResponsiveKnockoutUtils con il metodo createMediaQueryObservable() per creare un osservabile in base alla larghezza dello schermo.

export default class ViewModel implements Composite.ViewModel<Composite.PropertiesType> {
   busyResolve: (() => void);      
   . . .
   res: { [key: string]: string };
   smallQuery = ResponsiveUtils.getFrameworkQuery( ResponsiveUtils.FRAMEWORK_QUERY_KEY.SM_ONLY);
   isSmall: ko.Observable = ResponsiveKnockoutUtils.createMediaQueryObservable(this.smallQuery);

Aggiungere anche un osservabile calcolato Knockout che restituisce top se la dimensione dello schermo è piccola e start altrimenti.

. . .
isSmall: ko.Observable = ResponsiveKnockoutUtils.createMediaQueryObservable(this.smallQuery);

// For small screens: labels on top
// For medium or bigger: labels at the start
labelEdge: ko.Computed = ko.computed(() => {
  return this.isSmall() ? "top" : "start";

}, this);
. . . 

Nella parte superiore del file demo-update-item-viewModel.ts importare i seguenti moduli necessari per eseguire il codice aggiunto nei passi precedenti.

"use strict";
. . .
import "ojs/ojknockout";
import * as ResponsiveUtils from "ojs/ojresponsiveutils";
import * as ResponsiveKnockoutUtils from "ojs/ojresponsiveknockoututils";
import "ojs/ojformlayout";
import "ojs/ojinputtext";


. . . 

Salvare il file demo-update-item-viewModel.ts. Il codice demo-update-item-viewModel.ts deve avere un aspetto simile a demo-update-item-viewModel-ts.txt.
Tornare al browser per visualizzare le modifiche nell'applicazione Web.

Il browser visualizza il componente Web con quattro campi di testo di input nella scheda Dashboard dell'applicazione Web.

Descrizione dell'immagine update_item_details_formlayout.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 an Oracle JET web component

F53199-01

February 2022