Debug di un'applicazione Web Oracle JET

Introduzione

Questa esercitazione descrive come eseguire il debug di un'applicazione Oracle JET utilizzando gli strumenti di sviluppo del browser.

Il debug in un browser è utile per isolare rapidamente il codice problematico e per testare le soluzioni. Tutti i browser dispongono di strumenti per sviluppatori utilizzabili per eseguire task quali la visualizzazione e la revisione di codice HTML, CSS (Cascading Style Sheets) e origine JavaScript. Ad esempio, quando si esegue l'applicazione Web Oracle JET nel browser Web di Google Chrome, è possibile utilizzare Google Chrome Developer Tools (Chrome DevTools) per esaminare l'origine della pagina e gli stili CSS per ogni componente.

Obiettivi

Al termine di questa esercitazione, verrà descritto come utilizzare gli strumenti per sviluppatori Web nel browser per individuare il codice non corretto nell'applicazione Web Oracle JET, modificare un file di progetto di esempio fornito e rivedere le modifiche dal vivo nel browser.

Prerequisiti

Un ambiente di sviluppo impostato per creare applicazioni Oracle JET con runtime JavaScript, Node.js e l'interfaccia della riga di comando Oracle JET più recente installata
Google Chrome installato
Completamento delle esercitazioni precedenti in questo percorso di apprendimento, in modo da creare l'applicazione Web Oracle JET nella cartella JET_Web_Application
Esempio dashboard.html scaricato nella directory JET_Web_Application/src/ts/views

Task 1: Esecuzione dell'applicazione Web

Passare alla directory JET_Web_Application/src/ts/views, creare una copia di backup del file dashboard.html, quindi scaricare il file di esempio dashboard.html fornito nella stessa directory.
Se il processo batch del server degli strumenti Oracle JET è in esecuzione nella finestra del terminale, premere Ctrl+C e, se richiesto, immettere y per uscire dal processo batch del server. Il processo batch del server riconosce solo le revisioni apportate ai file di applicazione esistenti. Dopo aver creato nuovi file, è necessario eseguire di nuovo l'applicazione Web.
Nella finestra del terminale, dalla directory JET_Web_Application eseguire l'applicazione.
```
$ ojet serve
```
Il browser visualizza il campione con un grafico compresso. L'elenco a discesa Seleziona grafico non funziona.

Descrizione dell'illustrazione app-open.png
Se il browser predefinito non è Google Chrome, aprirlo e copiare l'indirizzo della pagina aperta nel campo dell'indirizzo URL di Google Chrome.

Task 2: Debug dell'applicazione Web

Nel browser Google Chrome premere Ctrl+Shift+I per visualizzare la finestra Strumenti sviluppatore. Chrome DevTools visualizza il codice di origine.
Nel pannello Elementi espandere i tag nidificati fino a individuare l'elemento HTML personalizzato oj-chart. Si noti che l'attributo type per l'elemento HTML personalizzato oj-chart è non modificabile come bar anziché utilizzare il valore dell'elemento HTML personalizzato oj-select-single. Nel pannello Stili di Chrome DevTools, sotto il diagramma di posizione del componente Grafico, notare anche che l'attributo del componente grafico width è impostato su 135 pixel.

Descrizione dell'illustrazione style-tab.png

L'elemento HTML personalizzato oj-chart è contenuto da un elemento div HTML che imposta la larghezza su 135px e fa sì che il componente Grafico venga compresso nella pagina. Pertanto, il componente Grafico eredita la larghezza da un contenitore padre e ignora l'impostazione della larghezza di stile del 100%.

Task 3: Correggere il codice dell'applicazione Web

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

Cercare l'elemento HTML personalizzato oj-chart. Modificare il tipo di grafico in [[val]] e rimuovere i tag <div> che racchiudono il tag .

. . .
</oj-select-single>
<oj-chart id="barChart" type="[[val]]" data="[[chartDataProvider]]" animation-on-display="auto" 
          animation-on-data-change="auto" hover-behavior="dim" style='width:100%;height:350px;'>
  <template slot="itemTemplate" data-oj-as="item">
. . .

Se non è già presente, aggiungere una classe di stile, chartStyle, alla fine del file appRootDir/src/css/app.css:
```
.chartStyle {
   max-width:500px;
   width:100%;
   height:350px;
}
```
Sostituire l'attributo style con l'attributo class che fa riferimento alle proprietà di stile nel file appRootDir/src/css/app.css.
```
<oj-chart id="barChart" type="[[val]]" . . . style='width:100%;height:350px;'>
```
Becomes
```
<oj-chart id="barChart" type="[[val]]" . . . class="chartStyle">
```
È 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 precedente.
Per verificare le modifiche, salvare il file e visualizzare l'output live aggiornato dell'applicazione Web nel browser.
Sostituire il file di esempio con il file dashboard.html originale.
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.
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.

Titolo e informazioni sul copyright

Debug an Oracle JET web app

F53101-01

February 2022