Crea container padre 1 e componenti container attività

Introduzione

L'applicazione DOM virtuale di Oracle JavaScript Extension Toolkit (Oracle JET) sviluppata alla fine di questa serie di percorsi di apprendimento sarà composta dai componenti mostrati nell'immagine seguente. Cioè, il componente ParentContainer1 contiene un componente ActivityContainer che visualizza un elenco di attività. Una volta selezionata un'attività, viene visualizzato un secondo componente padre (ParentContainer2) che include un componente (ActivityItemContainer) per visualizzare l'elenco degli elementi associati all'attività selezionata. Infine, quando si seleziona un elemento attività, l'app visualizza un componente ItemDetailContainer che visualizza le informazioni sui prezzi e sul livello di scorte relative all'elemento attività selezionato.

La composizione del layout dell'app

Obiettivi

In questa esercitazione è possibile comporre alcuni dei componenti di base dell'applicazione DOM virtuale Oracle JET. Per facilitare la visualizzazione del layout dell'applicazione, sarà inoltre possibile aggiungere le classi di stile oj-panel e oj-bg di Oracle JET per visualizzare bordi e colori intorno ai contenitori. È possibile rimuovere queste classi di stile dall'app finale.

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. Passare alla directory JET-Virtual-DOM-app e ripristinare l'applicazione Oracle JET Virtual DOM.

    npm install

    L'applicazione DOM virtuale è pronta per l'uso.

Task 2: Creazione componente dettagli articolo

Il componente Content è stato creato quando è stato eseguito lo scaffold dell'applicazione DOM virtuale nell'ultimo percorso di apprendimento. Rinominare e rifattorizzare questo componente come ItemDetailContainer, un componente figlio che verrà visualizzato dal componente ParentContainer2 che verrà creato nella prossima esercitazione.

  1. Nella directory JET-Virtual-DOM-app/src/components rinominare la directory content in ItemDetail. Quindi rinominare il file index.tsx al suo interno in ItemDetailContainer.tsx.

    Nota: se l'editor visualizza un prompt che chiede se le importazioni devono essere aggiornate nel file o nella directory rinominati, come nel messaggio da Visual Studio Code riportato di seguito, fare clic su No e continuare.

    Prompt codice VS

  2. In ItemDetailContainer.tsx, modificare la riga export function Content() { in const ItemDetailContainer = () => {. Aggiungere quindi un'istruzione export per il componente ItemDetailContainer alla fine del file.

    const ItemDetailContainer = () => {
  . . .
  };

export default ItemDetailContainer;

  3. Sostituire l'inizio dell'istruzione return nel componente ItemDetailContainer con il codice seguente, fino all'elemento oj-label incluso ma non incluso. div include una classe di stile oj-bg di Oracle JET per aggiungere un colore di sfondo grigio al contenitore.

    return (
  <div
    id="itemDetailsContainer" class="oj-bg-neutral-30">
    <h3>Item Details</h3>
    <oj-label for="basicSelect">Select Chart:</oj-label>
. . .

  4. Eliminare la funzione renderListItem e rimuovere l'ultimo tag </div> di chiusura dalla fine dell'istruzione return.

  5. Salvare e chiudere il file.

    Il codice dovrebbe essere simile a item-detail-container-tsx.txt

Task 3: Creazione del componente contenuto

Ricreare il componente Content, che visualizza un titolo per l'applicazione e un elemento Preact per il componente ParentContainer1 che verrà creato nel task seguente.

  1. Nella directory JET-Virtual-DOM-app/src/components creare una directory Content contenente un file Content.tsx vuoto.

  2. Aggiungere le istruzioni di importazione riportate di seguito nella parte superiore del file. Verrà creato il componente ParentContainer1 più avanti in questa esercitazione.

    import { h } from "preact";
import ParentContainer1 from "../ParentContainer1";

  3. Creare la definizione di funzione del componente Content.

    const Content = () => {
  return (

  );
}

  4. Nell'istruzione return della funzione, aggiungere un div contenente l'intestazione h1 Product Information e un elemento ParentContainer1 per accedere al componente che si creerà.

    const Content = () => {
  return (
    <div class="oj-web-applayout-max-width oj-web-applayout-content">
      <h1>Product Information</h1>
      <ParentContainer1 />
    </div>
  );
};

  5. Alla fine del file, aggiungere un'istruzione export per il componente Content.

    export default Content;

  6. Salvare e chiudere il file. Il codice deve essere simile a content-tsx.txt.

  7. Nella directory JET-Virtual-DOM-app/src/components aprire il file app.tsx nell'editor. Nella parte superiore del file, trovare la riga di codice in cui import { Content } from "./content/index";, quindi modificarlo per leggere import Content from "./Content/Content";.

  8. Salvare e chiudere il file.

Task 4: Creazione del componente container padre 1

Creare il componente ParentContainer1, ovvero il componente contenitore padre per il resto dei componenti che verranno creati.

  1. Nella directory JET-Virtual-DOM-app/src/components creare un file ParentContainer1.tsx.

  2. Aggiungere le seguenti istruzioni import nella parte superiore del file. Verrà creato il componente ActivityContainer più avanti in questa esercitazione.

    import { h } from "preact";
import ActivityContainer from "./Activity/ActivityContainer";

  3. Creare la definizione di funzione del componente ParentContainer1, che restituisce un valore div che contiene l'elemento ActivityContainer. L'elemento div include una classe di stile oj-bg di Oracle JET per aggiungere un colore di sfondo giallo al contenitore e una classe di stile oj-panel per creare un bordo.

    const ParentContainer1 = () => {
  return (
    <div id="parentContainer1" class="oj-panel oj-bg-warning-20">
      <ActivityContainer />
    </div>
  );
};

  4. Alla fine del file, aggiungere un'istruzione export per il componente ParentContainer1.

    export default ParentContainer1;

  5. Salvare e chiudere il file.

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

Task 5: Crea componente container attività

Creare il componente ActivityContainer, un componente figlio visualizzato dal componente ParentContainer1. Il componente ActivityContainer visualizza un'intestazione e un elenco di attività.

  1. Nella directory JET-Virtual-DOM-app/src/components creare una directory Activity e un file ActivityContainer.tsx al suo interno.

  2. Nella parte superiore del file, aggiungere la seguente istruzione import.

     import { h, ComponentProps } from "preact";

  3. Creare la definizione di funzione del componente ActivityContainer, che restituisce un elemento div contenente un'intestazione HTML h3 Attività e un elenco di attività. div include una classe di stile oj-bg di Oracle JET per aggiungere un colore di sfondo blu al contenitore.

    const ActivityContainer = () => {
  return (
    <div id="activitiesContainer" class="oj-bg-info-30">
      <h3 id="activitiesHeader">Activities</h3>
      <div id="activitiesItems" class="item-display no-wrap">
        <ul>
          <li class="li-item">Baseball</li>
          <li class="li-item">Bicycling</li>
          <li class="li-item">Skiing</li>
          <li class="li-item">Soccer</li>
        </ul>
      </div>
    </div>
  );
};

  4. Alla fine del file, aggiungere un'istruzione export per il componente ActivityContainer.

    export default ActivityContainer;

  5. Salvare e chiudere il file.

    Il codice dovrebbe essere simile a activity-container-tsx.txt.

  6. Passare alla directory JET-Virtual-DOM-app/src/styles e aprire il file app.css in un editor. Aggiungere le classi di stile item-display, no-wrap e li-item alla fine del file.

    .item-display {
  width: 100%;
  height: 100%;
  max-height: 500px;
  overflow-x: hidden;
  overflow-y: auto;
}

.no-wrap {
  flex-wrap: nowrap;
}

.li-item {
  list-style-type: none;
  font-size: 1rem;
  font-weight: 500;
}

  7. Salvare e chiudere il file.

    Il codice dovrebbe essere simile a app-css.txt.

Task 6: Eseguire l'applicazione DOM virtuale

  1. Nella finestra del terminale, eseguire l'app dalla directory JET-Virtual-DOM-app.

    npx ojet serve

    Il contenitore attività (blu) all'interno del contenitore padre 1 (giallo) visualizza l'elenco dei nomi attività. Si noti che il contenitore dettagli articolo non viene visualizzato perché non è ancora stato visualizzato all'interno di un altro componente (verrà aggiunto al componente Container padre 2, creato nell'esercitazione successiva).

    Container padre 1 e container attività

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

  3. 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 Componi componenti.

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.