Utilizzare il componente Web in un'applicazione 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 e Cascading Style Sheet (CSS). 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 TypeScript o JavaScript modificati per aggiungere il componente Web.

Il modello di programma di avvio dell'applicazione Web Oracle JET (applicazione che utilizza il componente Web) utilizzato in questa esercitazione visualizza il pannello Informazioni prodotto con la sezione Attività e elementi attività. Nella sezione Elementi attività vengono visualizzati i pulsanti Crea, Aggiorna ed Elimina. Il pulsante Aggiorna consente di visualizzare la finestra di dialogo Aggiorna dettagli elemento con un modulo composto da quattro campi di testo di input. Il componente Web aggiunto a questo modello iniziale sostituisce il contenuto della finestra di dialogo Aggiorna dettagli elemento.

Obiettivi

In questa esercitazione verrà utilizzato un componente Web in un'applicazione Web Oracle JET. Verrà inoltre descritto come definire gli attributi nel file HTML dell'applicazione Web per utilizzare i dati da un endpoint REST.

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
(Opzione 1) Completamento del percorso di apprendimento precedente in questa serie: Sviluppare un'applicazione Web con supporto CRUD in Oracle JavaScript Extension Toolkit
(Opzione 2) Se il percorso di apprendimento precedente di questa serie non è stato completato: jet_web_application_temp.zip scaricato
Completamento delle esercitazioni precedenti in questo percorso di apprendimento, in modo da creare un file demo-update-item.zip del componente Web
Facoltativamente, è stato scaricato l'applicazione jet_web_component_application_final.zip completata

Task 1: Scaricare l'applicazione Starter

Ignorare questo task se si continua a lavorare in un'applicazione creata nel percorso di apprendimento precedente.

Rinominare jet_web_application_temp.zip come JET_Web_Application.zip. Estrarre il contenuto nella cartella JET_Web_Application.
Nella finestra del terminale verificare di aver installato la versione più recente di Oracle JET. Se non lo si è già fatto, aggiornare la versione di Oracle JET.
```
$ npm list -g @oracle/ojet-cli
$ npm install -g @oracle/ojet-cli
```
Passare alla cartella JET_Web_Application e ripristinare l'applicazione Oracle JET.
```
$ ojet restore
```
L'applicazione è pronta per l'uso.
Nella finestra del terminale eseguire l'applicazione.
```
$ ojet serve
```
Il browser visualizza l'applicazione Web che mostra il pannello Informazioni prodotto con l'elenco delle attività nella sezione Attività.

Descrizione dell'illustrazione product-information-page.png
Nel browser in cui viene visualizzata l'applicazione Web, fare clic su una delle attività, quindi selezionare uno degli elementi nella sezione Elementi attività.

Descrizione dell'illustrazione Activity-items-buttons.png

Nella sezione Elementi attività vengono visualizzati i pulsanti Crea, Aggiorna ed Elimina.
Fare clic su Aggiorna per visualizzare il contenuto della finestra di dialogo Aggiorna dettagli elemento.
Nella finestra del terminale premere Ctrl+C e, se richiesto, immettere y per uscire dal processo batch di strumenti Oracle JET.
Chiudere la finestra o la scheda del browser.

Task 2: Aggiungi cartella componente Web

Passare alla directory JET_Web_Application/src/ts e creare una nuova cartella denominata jet-composites.
Estrarre il file demo-update-item.zip nella cartella jet-composites.

La nuova cartella contiene il percorso JET_Web_Application/src/ts/jet-composites/demo-update-item e i file di origine del componente Web.

Task 3: Modificare l'applicazione ViewModel

Per utilizzare il componente Web nell'applicazione Web, aggiungere il modulo del programma di caricamento del componente Web al file JavaScript dell'applicazione Web.

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 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.

Task 4: Modifica vista applicazione

Per utilizzare il componente Web nell'applicazione Web, è inoltre necessario aggiungere l'elemento del componente Web con gli attributi definiti al file HTML dell'applicazione Web.

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

Individuare l'elemento HTML personalizzato oj-dialog con id="editDialog" e commentare i riferimenti degli elementi HTML personalizzati oj-label-value e oj-input-text per i campi di testo di input nell'elemento div slot="body".

   
<oj-dialog id="editDialog" class="no-display" dialog-title="Update Item Details" cancel-behavior="icon">
<div slot="body">

   <!-- <oj-label-value label-edge="inside">
      <oj-label for="chatWindow" slot="label">Item ID</oj-label>
      <div slot="value" class="slot-line">
      <oj-bind-text id="chatWindow" value="[[inputItemID]]" class="text-width"></oj-bind-text>
      </div>
   </oj-label-value>
   <oj-label class="oj-label oj-label-value" for="createNewName">Name</oj-label>
   <oj-input-text id="createNewName" value='{{inputItemName}}'></oj-input-text>
   <oj-label class="oj-label oj-label-value" for="createNewPrice">Price</oj-label>
   <oj-input-text id="createNewPrice" value="{{inputPrice}}"></oj-input-text>
   <oj-label class="oj-label oj-label-value" for="createNewDesc">Description</oj-label>
   <oj-input-text id="createNewDesc" value="{{inputShortDesc}}"></oj-input-text>
-->
</div>
. . . 
</oj-dialog>

   

Nell'elemento div slot="body" del pulsante editDialog, sotto gli elementi commentati, aggiungere l'elemento Web demo-update-item con i valori degli attributi per ogni campo di testo di input.

<oj-dialog id="editDialog" class="no-display" dialog-title="Update Item Details" cancel-behavior="icon">
   <div slot="body">
   . . .
   <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 slot="footer">
      <oj-button id="submitBtn" on-oj-action="[[updateItemSubmit]]">Submit</oj-button>
   </div> 
</oj-dialog>

Salvare il file dashboard.html.

Task 5: Test della tua applicazione

Nella finestra di dialogo Aggiorna dettagli elemento vengono visualizzati i valori statici nei campi di testo di input. Questi valori non sono modificabili. Per modificare i campi è necessario associare i valori degli attributi ai riferimenti delle proprietà.

Nella finestra del terminale, passare alla directory JET_Web_Application ed eseguire l'applicazione Web.
```
$ ojet serve
```
Il browser visualizza l'applicazione Web con il pannello Informazioni prodotto.
Nel browser in cui viene visualizzata l'applicazione Web, selezionare un'attività nella sezione Attività, scegliere un elemento nella sezione Elementi attività, quindi fare clic su Aggiorna.

Descrizione dell'illustrazione update-button-passed-values.png

Nel task successivo di questa esercitazione, sostituire i dati statici con i dati di un endpoint REST.
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 6: Usa dati REST nella vista applicazione

JET_Web_Application utilizza i dati di un endpoint REST. È necessario modificare i valori degli attributi dell'elemento del componente Web demo-update-item definito nel file HTML dell'applicazione Web per visualizzare i dati dell'endpoint REST.

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

Modificare gli attributi definiti nell'elemento demo-update-item per utilizzare i valori dell'endpoint REST di JET_Web_Application.

   
<oj-dialog id="editDialog" class="no-display" dialog-title="Update Item Details" cancel-behavior="icon">
 <div slot="body">
   <demo-update-item item-id="[[itemData().id]]" item-name="{{inputItemName}}" 
	      item-price="{{inputPrice}}" item-desc="{{inputShortDesc}}">
     </demo-update-item>
   </div>      
 <div slot="footer">
   <oj-button id="submitBtn" on-oj-action="[[updateItemSubmit]]">Submit</oj-button>
 </div> 
</oj-dialog>
   

I riferimenti al nome della proprietà per i valori degli attributi utilizzano due parentesi graffe {{}} per l'associazione di dati bidirezionali e doppie parentesi [[]] per l'associazione di dati unidirezionale.

Salvare il file dashboard.html.

Il codice dashboard.html deve essere simile a final-use-wc-dashboard-html.txt.
Tornare al browser per visualizzare le modifiche nell'applicazione Web.
Nel browser in cui viene visualizzata l'applicazione Web, selezionare un'attività nella sezione Attività, scegliere un elemento nella sezione Elementi attività, quindi fare clic su Aggiorna.

Descrizione dell'illustrazione update-button-rest-values.png

Nella finestra di dialogo Aggiorna dettagli elemento vengono visualizzati i valori degli attributi dell'endpoint REST nei campi di testo di input. È ora possibile aggiornare i dettagli dell'elemento e fare clic su Sottometti.
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 terminare il processo batch di strumenti Oracle JET. Chiudere la finestra del terminale.

Task 7: (facoltativo) Esecuzione di un'applicazione Web da un'applicazione ripristinata

Se si desidera eseguire l'applicazione Web Oracle JET completata dal codice fornito, è possibile ripristinare l'applicazione dal file di archivio scaricato. Per utilizzare un'applicazione Oracle JET stripped and zipped, è necessario ripristinare le dipendenze del progetto, compresi gli strumenti Oracle JET e le librerie e i moduli richiesti, all'interno dell'applicazione estratta.

Scaricare il file jet_web_component_application_final.zip ed estrarre il contenuto dell'applicazione completata nella cartella jet_web_component_application_final.
Nella finestra del terminale, accedere alla cartella jet_web_component_application_final e ripristinare l'applicazione Web Oracle JET.
```
$ ojet restore
```
Attendere la conferma.
```
Restore complete
```
L'applicazione è pronta per l'uso.
Eseguire l'applicazione Web ed eseguire il test nel browser.
```
$ ojet serve
```
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

Use the web component in an Oracle JET web app

F53204-01

February 2022