Migliorare e archiviare il 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 ed è possibile utilizzare un modello di avvio Oracle JET per generare i file HTML e Typecript o JavaScript modificati per aggiungere e configurare il componente Web.

Nell'esercitazione precedente è stato creato un componente Web che visualizza quattro campi di testo di input. In questa esercitazione viene descritto come modificare il campo ID articolo in un campo di sola lettura, aggiungere un convertitore di valuta al campo Prezzo articolo e un programma di convalida della lunghezza al campo Descrizione articolo. Per passare i valori a questi campi, definire gli attributi per i quattro campi di testo di input nell'origine HTML dell'applicazione Web. Gli attributi utilizzati devono avere una proprietà corrispondente definita nel file di metadati del componente Web. È possibile passare valori statici agli attributi oppure utilizzare la sintassi dell'espressione associata ai dati per l'associazione di dati unidirezionale o bidirezionale tra l'applicazione Web e il componente Web.

Obiettivi

In questa esercitazione è possibile migliorare il componente Web con funzioni aggiuntive in un'applicazione Web Oracle JET. Viene inoltre descritto come creare il package del componente Web e prepararlo per la condivisione con un'altra applicazione.

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
Completamento dell'esercitazione precedente in questo percorso di apprendimento, in modo da creare il componente Web demo-update-item nella cartella JET_Web_Component_Application

Task 1: Modifica ID elemento in sola lettura

Il campo ID articolo nel componente Web deve essere di sola lettura. Ai fini dell'accesso facilitato, sostituire l'elemento HTML personalizzato oj-input-text per il campo ID elemento con l'elemento HTML personalizzato oj-label-value. L'elemento oj-label-value definisce uno slot che utilizza l'elemento oj-bind-text per modificare il campo ID elemento in sola lettura.

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.

Individuare l'elemento HTML personalizzato oj-input-text con l'attributo value="ID number" e sostituire l'elemento oj-input-text con l'elemento oj-label-value.

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

Salvare il file demo-update-item-view.html.

Il codice demo-update-item-view.html deve essere simile a readonly-itemid.txt.
Passare alla directory JET_Web_Component_Application/src/ts/jet-composites/demo-update-item e aprire il file demo-update-item-viewModel.ts in un editor.

Nel file demo-update-item-viewModel.ts importare il modulo del programma di caricamento ojs/ojlabelvalue dopo la voce che importa il modulo ojs/ojinputtext.

"use strict";

import * as ko from "knockout";
import componentStrings = require("ojL10n!./resources/nls/demo-update-item-strings");
import Context = require("ojs/ojcontext");
import Composite = require("ojs/ojcomposite");
import "ojs/ojknockout";
import * as ResponsiveUtils from "ojs/ojresponsiveutils";
import * as ResponsiveKnockoutUtils from "ojs/ojresponsiveknockoututils";
import "ojs/ojformlayout";
import "ojs/ojinputtext";
import "ojs/ojlabelvalue";

Salvare il file demo-update-item-viewModel.ts.
Nella finestra del terminale, passare alla directory JET_Web_Component_Application ed eseguire l'applicazione.
```
$ ojet serve
```
Il browser visualizza il componente Web con i quattro campi di testo di input nella scheda Dashboard dell'applicazione Web. Il campo ID elemento è ora di sola lettura.

Descrizione dell'illustrazione form-wc-itemid-readonly.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 2: Aggiunta di un convertitore di valuta

Utilizzare un convertitore di valuta per il campo Prezzo articolo.

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.

Individuare l'elemento HTML personalizzato oj-input-text con l'attributo value="Price" e aggiornarlo per utilizzare un convertitore di valuta che verrà definito in un passo successivo. Immettere 00 anziché Price come valore segnaposto per la proprietà value in quanto il convertitore richiede un numero valido anziché una stringa.

<oj-form-layout id="form-container" label-edge="[[labelEdge]]">
...
<oj-input-text value="Name" label-hint="Item Name"></oj-input-text>
<oj-input-text value="00" 
               help.instruction="enter an amount with or without grouping separator"
               converter="[[currency]]" 
               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. Il codice demo-update-item-view.html deve essere simile a currency-code-html.txt.
Passare alla directory JET_Web_Component_Application/src/ts/jet-composites/demo-update-item e aprire il file demo-update-item-viewModel.ts in un editor.

Nella parte superiore del file demo-update-item-viewModel.ts, importare IntlNumberConverter dal modulo ojs/ojconverter-number:

"use strict";

import * as ko from "knockout";
. . .
import "ojs/ojinputtext";
import "ojs/ojlabelvalue";
import { IntlNumberConverter } from "ojs/ojconverter-number";

Nella classe ViewModel aggiungere un campo valuta per il convertitore di valuta da inizializzare nel passo successivo.

export default class ViewModel implements Composite.ViewModel<Composite.PropertiesType> {
   busyResolve: (() => void);
   . . . 
   currency: IntlNumberConverter;

constructor(context: Composite.ViewModelContext<Composite.PropertiesType>) {
. . .       

Nel metodo constructor() dopo le voci osservabili di esempio, aggiungere il convertitore di valuta.

constructor(context: Composite.ViewModelContext<Composite.PropertiesType>) {        
   . . .
   this.res = componentStrings["demo-update-item"];

   this.currency = new IntlNumberConverter({
      style: "currency",
      currency: "USD ",
      currencyDisplay: "code",
   });

Salvare il file demo-update-item-viewModel.ts.

Il codice demo-update-item-viewModel.ts deve essere simile a currency-code-ts.txt.
Tornare al browser per visualizzare le modifiche nell'applicazione Web.
Immettere il prezzo nel campo Prezzo articolo e premere Invio per verificare le modifiche.

Descrizione dell'illustrazione form-wc-currency-converter.png

Il prezzo immesso mostra un prefisso USD. Se si immette un valore non numerico, nel campo Prezzo articolo viene visualizzato un errore.
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 3: Aggiungi programma di convalida lunghezza

Utilizzare un programma di convalida della lunghezza per il campo Descrizione articolo.

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.

Individuare l'elemento HTML personalizzato oj-input-text con l'attributo value="Description" e aggiornarlo per utilizzare un programma di convalida della lunghezza che verrà definito in un passo successivo.

   
<oj-form-layout id="form-container">
...
<oj-input-text value="00" 
            help.instruction="enter an amount with or without grouping separator"
            converter="[[currency]]" 
            label-hint="Item Price">
      </oj-input-text> 
<oj-input-text
     value="{{lengthValue1}}" validators="[[validators]]"
     placeholder="Enter a description of 5-50 characters"
     label-hint="Item Description"
   ></oj-input-text>
</oj-form-layout>
   

Salvare il file demo-update-item-view.html.

Il codice demo-update-item-view.html deve essere simile a validator-code-html.txt.
Passare alla directory JET_Web_Component_Application/src/ts/jet-composites/demo-update-item e aprire il file demo-update-item-viewModel.ts in un editor.

Nella parte superiore del file demo-update-item-viewModel.ts, importare AsyncLengthValidator dal modulo ojs/ojasyncvalidator-length:

import * as ko from "knockout";
. . .
import { IntlNumberConverter } from "ojs/ojconverter-number";
import AsyncLengthValidator = require("ojs/ojasyncvalidator-length");

Nella classe ViewModel aggiungere i campi per gli osservatori di esclusione che verranno inizializzati nel passo successivo.

export default class ViewModel implements Composite.ViewModel<Composite.PropertiesType> {
 busyResolve: (() => void);
 . . . 
 currency: IntlNumberConverter;
 lengthValue1: ko.Observable<string>;
 validators: ko.ObservableArray<AsyncLengthValidator<string>>;

Nel metodo constructor dopo il convertitore di valuta, aggiungere il programma di convalida della lunghezza.

constructor(context: Composite.ViewModelContext<Composite.PropertiesType>) {        
   . . .
   this.res = componentStrings["demo-update-item"];

   this.currency = new IntlNumberConverter({
      style: "currency",
      currency: "USD ",
      currencyDisplay: "code",
   });

   this.lengthValue1 = ko.observable("");
   this.validators = ko.observableArray([
      new AsyncLengthValidator({ min: 5, max: 50 }),
    ]);

Il programma di convalida della lunghezza definisce una lunghezza minima di 5 caratteri e una lunghezza massima di 50 caratteri per il campo Descrizione articolo.

Salvare il file demo-update-item-viewModel.ts.

Il codice demo-update-item-viewModel.ts deve avere un aspetto simile a final-demo-update-item-viewModel-ts.txt.
Tornare al browser per visualizzare le modifiche nell'applicazione Web.
Immettere una descrizione nel campo Descrizione elemento e premere Invio, quindi premere Tabulazione per cancellare la descrizione comandi.

Descrizione dell'illustrazione form-wc-length-validator.png

Se la descrizione è più lunga dell'intervallo impostato, nel campo Descrizione articolo viene visualizzato un errore.
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: Definizione dei metadati del componente Web

Il file dei metadati del componente Web definisce le proprietà richieste del componente Web. A ogni campo di testo di input del componente Web deve essere associata una proprietà che restituirà gli aggiornamenti dal componente Web.

Passare alla directory JET_Web_Component_Application/src/ts/jet-composites/demo-update-item e aprire il file component.json in un editor.

Definire le proprietà dei metadati displayName e description.

{
"name": "demo-update-item",
"version": "1.0.0",
"jetVersion": "^12.0.0",
"displayName": "demo-update-item",
"description": "A Web Component with form layout",
...
}

Sotto la proprietà dei metadati description, utilizzare la convenzione di denominazione dei casi della cammello per definire le proprietà associate ai campi nella vista del componente Web.

"description": "A Web Component with form layout",
"properties": {
   "itemId": {
      "type": "number"
   },
   "itemName": {
      "type": "string",
      "description": "Description for the item-name attribute",
      "writeback": true
   },
   "itemPrice": {
      "type": "number",
      "writeback": true
   },
   "itemDesc": {
      "type": "string",
      "writeback": true
   }
},

La proprietà writeback impostata su true garantisce che queste proprietà ricevano aggiornamenti dal componente Web che fa riferimento alla proprietà in un'espressione di associazione dati bidirezionale.

Salvare il file component.json.

Il codice component.json deve essere simile a component-json.txt.

Task 5: Definizione degli attributi e dei valori degli attributi

Gli attributi dell'elemento componente Web possono fare riferimento alle proprietà dichiarate nel file di metadati del componente Web. Nell'origine HTML dell'applicazione Web i riferimenti alle proprietà vengono visualizzati come nomi di attributi di elementi HTML senza distinzione tra maiuscole e minuscole con trattini.

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

Nell'elemento demo-update-item definire gli attributi con valori statici per i quattro campi di testo di input.

<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 item-id="34" 
                           item-name="John" 
                           item-price="3434.55" 
                           item-desc="This is an updated item">
                     </demo-update-item>
      </div>
   </div>
</div>

Salvare il file dashboard.html.

Task 6: Definizione della vista Componente Web

È possibile accedere a qualsiasi proprietà definita nel file di metadati del componente Web utilizzando la variabile $properties del contesto di associazione vista.

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.

Negli elementi HTML personalizzati dell'elemento oj-form-layout associare gli attributi value alle proprietà definite nel file component.json utilizzando la variabile $properties.

   
<oj-form-layout id="form-container" label-edge="[[labelEdge]]">
. . .
<div slot="value">
      <oj-bind-text value="[[$properties.itemId]]"></oj-bind-text>
  </div>
</oj-label-value>  
   <oj-input-text value="{{$properties.itemName}}" label-hint="Item Name"></oj-input-text>
   <oj-input-text value="{{$properties.itemPrice}}" 
      help.instruction="enter an amount with or without grouping separator"
      ...> 
   </oj-input-text>
   <oj-input-text
      value="{{$properties.itemDesc}}"
      . . .>
   </oj-input-text>
</oj-form-layout>
   

Per definire i valori degli attributi, utilizzare la sintassi [[]] per definire l'associazione di dati unidirezionale e la sintassi {{}} per l'associazione di dati bidirezionali.

Salvare il file demo-update-item-view.html.

Il codice demo-update-item-view.html deve essere simile a final-demo-update-item-view-html.txt.
Tornare al browser per visualizzare le modifiche nell'applicazione Web.

Il browser visualizza il componente Web con i valori statici nei quattro campi di testo di input.
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. Chiudere la finestra del terminale.

Task 7: Archivia il componente Web

Dopo aver configurato il componente Web, è necessario preparare il componente Web per altre applicazioni.

Aprire una finestra di terminale, passare alla directory JET_Web_Component_Application ed eseguire il comando ojet package component con il nome del componente, demo-update-item, come parametro di comando:

$ ojet package component demo-update-item

Oracle JET inserisce il contenuto della directory JET_Web_Component_Application/src/ts/jet-composites/demo-update-item in un file ZIP (demo-update-item_1-0-0.zip) creato nella directory JET_Web_Component_Application/dist. Come parte del task di packaging, Oracle JET trasporta il codice TypeScript nella directory JET_Web_Component_Application/src/ts/jet-composites/demo-update-item nel codice JavaScript. Se, ad esempio, si apre il file JET_Web_Component_Application/dist/demo-update-item_1-0-0.zip, si noterà che contiene un file demo-update-item-viewModel.js che lo strumento Oracle JET ha trasposto dal file demo-update-item-viewModel.ts nella directory JET_Web_Component_Application/src/ts/jet-composites/demo-update-item.

È possibile distribuire il file demo-update-item_1-0-0.zip dalla directory JET_Web_Component_Application/dist ai consumer che desiderano riutilizzare il componente Web nella propria applicazione Web. Per utilizzare il componente Web nella propria applicazione Web, i consumatori estraggono il contenuto del file ZIP in una directory demo-update-item nella propria applicazione Web. Questa attività verrà descritta in dettaglio nell'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.

Titolo e informazioni sul copyright

Enhance and archive the Oracle JET web component

F53189-01

February 2022