Creare la vista principale in un'applicazione DOM virtuale di Oracle JET

Introduzione

Questa esercitazione descrive come leggere i dati gerarchici master-detail da un documento JSON (Object Notation) JavaScript locale e visualizzare i dati in un componente List View di un'applicazione DOM virtuale di Oracle JavaScript Extension Toolkit (Oracle JET).

In Oracle JET è possibile utilizzare l'API Oracle JET per creare un oggetto provider di dati. L'oggetto rappresenta un array di dati popolato dagli oggetti padre di un data store di documenti JSON. L'attributo data degli elementi HTML personalizzati di Oracle JET si associa ai dati tramite un'istanza di un oggetto provider di dati MutableArrayDataProvider creato dall'utente.

Obiettivi

In questa esercitazione è possibile associare più elementi degli oggetti dati padre in un documento JSON locale e popolare le righe di un componente Vista elenco Oracle JET nel componente Contenitore attività con tali dati.

Prerequisiti

Task 1: Scarica l'app Starter Virtual DOM

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

  1. Rinominare jet-virtual-dom-app-temp.zip come JET-Virtual-DOM-app.zip. Estrarre il contenuto nella directory JET-Virtual-DOM-app.

  2. Nella finestra del terminale, accedere alla directory JET-Virtual-DOM-app e ripristinare l'applicazione Oracle JET.

    npm install

    L'app è pronta per l'uso.

Task 2: Scarica le immagini del prodotto

Ignora questo task se hai scaricato l'app di avvio in jet-virtual-dom-app-temp.zip.

  1. Se il processo batch di Oracle JET Tooling Server è in esecuzione nella finestra del terminale, premere Ctrl+C e, se richiesto, immettere y per uscire dal processo batch del server.

    Il processo batch server riconosce solo le revisioni apportate ai file di applicazione esistenti. Dopo aver creato nuovi file, è necessario eseguire di nuovo l'applicazione DOM virtuale.

  2. Scaricare il file product_images.zip nella directory JET-Virtual-DOM-app/src/styles/images.

  3. Estrarre il contenuto del file zip in una nuova directory product_images nella directory images.

    Il percorso della nuova directory è JET-Virtual-DOM-app/src/styles/images/product_images e la directory contiene le immagini utilizzate dall'applicazione.

Task 3: Creare un provider di dati array modificabile nel contenitore padre 1

  1. Aprire Oracle JET Cookbook e accedere alla home page Cookbook. Fare clic su Framework, quindi su Provider dati e infine su Provider dati array modificabili. Nella barra degli strumenti Cookbook, fare clic su Documento API.

  2. Nella documentazione dell'API, leggere le informazioni sulla classe MutableArrayDataProvider. Si noti come utilizzare l'argomento facoltativo keyAttributes per creare un'istanza di MutableArrayDataProvider in base all'attributo chiave dell'oggetto dati passato.

  3. Se non lo si è già fatto in un percorso di apprendimento precedente, scaricare il file store_data.json nella directory JET-Virtual-DOM-app/src/components.

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

  5. Nella parte superiore del file, aggiungere le istruzioni import per la classe MutableArrayDataProvider e i dati JSON nel file store_data.json.

    import MutableArrayDataProvider = require('ojs/ojmutablearraydataprovider');
import * as storeData from 'text!./store_data.json';

  6. Creare un alias di tipo Activity.

    type Activity = {
  id: number;
  name: string;
  short_desc: string;
};

  7. Creare un'istanza activityDataProvider di MutableArrayDataProvider.

    const activityDataProvider = new MutableArrayDataProvider<Activity['id'], Activity>(
  JSON.parse(storeData),
  {
    keyAttributes: 'id',
  }
);

    La proprietà keyAttributes della classe MutableArrayDataProvider popola un array in base all'attributo id dell'oggetto padre. L'attributo id è l'attributo chiave per gli oggetti dati padre e figlio nel documento JSON.

  8. Nella funzione ParentContainer1 aggiungere un attributo data all'elemento ActivityContainer che passa l'oggetto provider dati al componente Contenitore attività utilizzando props.

    return (
    <div id="parentContainer1" class="oj-flex oj-flex-init oj-panel oj-bg-warning-20">
        <ActivityContainer data={activityDataProvider} />
        <ParentContainer2 />
    </div>
    );
};

    Il codice dovrebbe essere simile a parent-container1-1-tsx.txt.

Task 4: Creazione del componente vista elenco del contenitore attività

Creare un componente Oracle JET List View nel componente Contenitore attività per visualizzare più elementi dati per ogni riga della lista dall'oggetto provider dati trasmesso tramite props dal componente ParentContainer1. Per creare un'istanza del contenuto degli elementi dati delle righe elenco in fase di esecuzione, il componente Vista elenco utilizza un elemento HTML template con un attributo slot come segnaposto.

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

  2. Aggiungere le istruzioni di importazione seguenti per il componente Oracle JET List View e la classe MutableArrayDataProvider nella parte superiore del file.

    import 'ojs/ojlistview';
import { ojListView } from 'ojs/ojlistview';
import MutableArrayDataProvider = require('ojs/ojmutablearraydataprovider');

  3. Creare alias di tipo Props e Activity.

    type Props = {
  data?: MutableArrayDataProvider<Activity['id'], Activity>;
  value?: string;
};

type Activity = {
  id: number;
  name: string;
  short_desc: string;
};

  4. Trovare l'elemento div con id="activitiesContainer" ed eliminare la classe dell'applicazione di supporto oj-sm-only-text-align-end per impedire il riallineamento del contenuto del contenitore attività.

  5. Creare la funzione listItemRenderer che visualizza ogni elemento dell'elenco e include elementi span e div per popolare le righe del componente Vista elenco con un'immagine di sfondo, un nome e una breve descrizione.

    Inoltre, definire una variabile image per assicurarsi che l'applicazione DOM virtuale possa individuare le immagini del prodotto nella directory styles dell'applicazione.

    const listItemRenderer = (item: ojListView.ItemTemplateContext) => {
  let image = item.data.image.replace('css', 'styles');
  return (
    <div class="oj-flex no-wrap">
      <span
        class="demo-thumbnail oj-flex-item"
        style={'background-image:url(' + image + ')'}></span>
      <div class="demo-content oj-flex-item">
        <div>
          <strong>{item.data.name}</strong>
        </div>
        <span class="demo-metadata">{item.data.short_desc}</span>
      </div>
    </div>
  );
};

  6. Sotto la funzione listItemRenderer, aggiungere l'alias di tipo ListViewProps seguente e due variabili per definire le proprietà di griglia e scorrimento per il componente Vista elenco.

    type ListViewProps = ComponentProps<'oj-list-view'>;
const gridlinesItemVisible: ListViewProps['gridlines'] = { item: 'visible' };
const scrollPolicyOpts: ListViewProps['scrollPolicyOptions'] = { fetchSize: 5 };

  7. Aggiungere props alla definizione della funzione ActivityContainer.

    const ActivityContainer = (props: Props) => {

  8. All'interno dell'istruzione return della funzione ActivityContainer, eliminare l'elemento div in cui id="activitiesItems e l'elenco al suo interno. Sostituirli con il componente Vista elenco seguente, in cui è possibile accedere all'oggetto provider dati tramite props nell'attributo data della vista elenco.

    <h3 id="activitiesHeader">Activities</h3>
  <oj-list-view id="activitiesList" class="item-display" aria-labelledby="activitiesHeader"
                data={props.data} gridlines={gridlinesItemVisible} selectionMode="single"
                scrollPolicy="loadMoreOnScroll" scrollPolicyOptions={scrollPolicyOpts}>
  </oj-list-view>

  9. Nel componente Vista elenco aggiungere un elemento template con un attributo slot per visualizzare ogni elemento dell'elenco.

    . . .
    <template slot="itemTemplate" render={listItemRenderer}></template>
</oj-list-view>

    Salvare il file. Il codice dovrebbe essere simile a activity-container-tsx-1.txt.

Task 5: Eseguire l'applicazione ed eseguire il debug del foglio di stile a cascata dell'applicazione

  1. Nella finestra del terminale, passare alla directory JET_Virtual_DOM_app ed eseguire l'applicazione.

    npx ojet serve

    Gli strumenti Oracle JET eseguono l'applicazione DOM virtuale nel browser Web locale, in cui è possibile visualizzare le modifiche al componente Contenitore attività. Le immagini visualizzate a sinistra dei nomi delle attività e delle descrizioni brevi vengono visualizzate solo parzialmente perché troppo grandi.

    Se si ridimensiona il browser e non viene ancora visualizzata una pagina simile a questo screenshot di esempio, confermare di aver estratto le immagini dell'applicazione nella directory images/product_images.

    Le immagini di anteprima sono visualizzate solo parzialmente

  2. Nel browser Google Chrome fare clic con il pulsante destro del mouse sull'immagine parziale dell'attività Calcio e selezionare Ispeziona. Il browser visualizza gli strumenti di sviluppo di Chrome (DevTools) in cui è possibile ispezionare l'origine della pagina HTML.

  3. Nel pannello Elementi, l'elemento span in cui deve essere selezionato class="demo-thumbnail oj-flex-item". Nel pannello Stili, individuare lo stile element.style background-image evidenziato. Fare clic con il pulsante destro del mouse sull'URL dell'immagine jrsoccerball.jpg e selezionare Rivela nel pannello Origini.

    Esaminare l'origine dell'immagine nel pannello Origini

  4. Il pannello Origini di Chrome DevTools mostra che l'immagine è di 300 x 300 pixel e quindi la dimensione è troppo grande per essere visualizzata nella vista elenco. Per eseguire il rendering di un'immagine di dimensioni ridotte da un'immagine di dimensioni complete, è possibile definire una classe di stile CSS (Cascading Style Sheets).

    Visualizza le proprietà dell'immagine nel pannello Origini

  5. Chiudere la finestra DevTools di Chrome e tornare all'app nel browser.

Task 6: Correggere il CSS e visualizzare le modifiche all'elenco delle attività

  1. Passare alla directory JET-Virtual-DOM-app/src/styles e aprire il file app.css in un editor.

  2. Definire le proprietà per il selettore di classe .demo-thumbnail. Nell'elenco delle proprietà, impostare una proprietà background-repeat su no-repeat per mostrare l'immagine una sola volta.

    .demo-thumbnail {
  border-radius: 5px;
  background-size: 40px 40px;
  background-repeat: no-repeat;
  min-width: 40px;
  min-height: 40px;
  max-width: 40px;
  margin-right: 10px;
}

    Nella funzione listItemRenderer nel file ActivityContainer.tsx, l'elemento span fa riferimento al selettore di classe per formattare le immagini dell'elenco Attività come miniature impostando lo stile CSS demo-thumbnail sull'attributo class.

  3. Salvare e chiudere il file app.css. Il file deve avere un aspetto simile a app-css.txt.

  4. Tornare al browser e visualizzare gli aggiornamenti.

    L'app visualizza l'elenco Attività con le immagini di anteprima.

    Le immagini nel contenitore attività vengono visualizzate correttamente

  5. Chiudere la finestra o la scheda del browser che visualizza l'applicazione DOM virtuale in esecuzione.

  6. Nella finestra del terminale, premere Ctrl+C e, se richiesto, immettere y per uscire dal job batch degli strumenti Oracle JET.

Passo successivo

Passare all'esercitazione successiva in questo modulo.

Questa esercitazione fa parte del modulo Viste dettagli principali in Oracle JET.

Puoi tornare alla pagina principale del percorso di apprendimento DOM virtuale per accedere a tutti i moduli sulla creazione di app DOM virtuali.

Altre risorse di apprendimento

Esplora altri laboratori su docs.oracle.com/learn o accedi a più contenuti di formazione gratuiti sul canale YouTube di Oracle Learning. Inoltre, visitare education.oracle.com/learning-explorer per diventare Oracle Learning Explorer.

Per la documentazione del prodotto, visitare Oracle Help Center.