Create parent container 1 and activity container components

Introduction

The Oracle JavaScript Extension Toolkit (Oracle JET) virtual DOM app that you will have developed at the end of this learning path series will be composed of the components shown in the following image. That is, the ParentContainer1 component contains an ActivityContainer component that displays a list of activities. Once an activity is selected, a second parent component (ParentContainer2) renders that includes a component (ActivityItemContainer) to display the list of items associated with the selected activity. Finally, on selection of an activity item, the app renders an ItemDetailContainer component that displays pricing and stock level information about the selected activity item.

The app's layout composition

Objectives

In this tutorial, you will compose some of the foundational components of your Oracle JET virtual DOM app. To aid in the visualization of the app layout, you will also add the Oracle JET oj-panel and oj-bg style classes to display borders and color around the containers. You can remove these style classes from the final app.

Prerequisites

Task 1: Download the Starter Virtual DOM App

Skip this task if you’re continuing to work in an app that you created in the previous learning path.

  1. Rename jet_virtual_dom_app_temp.zip as JET-Virtual-DOM-app.zip. Extract the contents to the JET-Virtual-DOM-app directory.

  2. Navigate to the JET-Virtual-DOM-app directory, and restore the Oracle JET virtual DOM app.

    npm install

    Your virtual DOM app is ready to use.

Task 2: Create the Item Detail Component

The Content component was created when you scaffolded the virtual DOM app in the last learning path. Rename and refactor this component as ItemDetailContainer, a child component that will be rendered by the ParentContainer2 component that you will create in the next tutorial.

  1. In the JET-Virtual-DOM-app/src/components directory, rename the content directory to ItemDetail. Then rename the index.tsx file within it to ItemDetailContainer.tsx.

    Note: If your editor brings up a prompt asking whether imports should be updated in the renamed file or directory, as in the message from Visual Studio Code below, click No and continue.

    VS Code Prompt.

  2. In ItemDetailContainer.tsx, change the line export function Content() { to const ItemDetailContainer = () => {. Then add an export statement for the ItemDetailContainer component to the end of the file.

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

export default ItemDetailContainer;

  3. Replace the beginning of the return statement in the ItemDetailContainer component with the following code, up to but not including the oj-label element. The div includes an Oracle JET oj-bg style class to add a gray background color to the container.

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

  4. Delete the renderListItem function and remove the last closing </div> tag from the end of the return statement.

  5. Save and close the file.

    Your code should look similar to item-detail-container-tsx.txt

Task 3: Create the Content Component

Recreate the Content component, which renders a title for your app and a Preact element for the ParentContainer1 component that you will create in the following task.

  1. In the JET-Virtual-DOM-app/src/components directory, create a Content directory with an empty Content.tsx file inside it.

  2. Add the following import statements to the top of the file. You will create the ParentContainer1 component later in this tutorial.

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

  3. Create the Content component’s function definition.

    const Content = () => {
  return (

  );
}

  4. In the function’s return statement, add a div containing the h1 header Product Information and a ParentContainer1 element to access the component you will create.

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

  5. At the end of the file, add an export statement for the Content component.

    export default Content;

  6. Save and close the file. Your code should look similar to content-tsx.txt.

  7. In the JET-Virtual-DOM-app/src/components directory, open the app.tsx file in your editor. At the top of the file, find the line of code where import { Content } from "./content/index";, then edit it to read import Content from "./Content/Content";.

  8. Save and close the file.

Task 4: Create the Parent Container 1 Component

Create the ParentContainer1 component, which is the parent container component for the rest of the components you will create.

  1. In the JET-Virtual-DOM-app/src/components directory, create a ParentContainer1.tsx file.

  2. Add the following import statements to the top of the file. You will create the ActivityContainer component later in this tutorial.

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

  3. Create the ParentContainer1 component’s function definition, which returns a div that contains the ActivityContainer element. The div element includes an Oracle JET oj-bg style class to add a yellow background color to the container and an oj-panel style class to create a border.

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

  4. At the end of the file, add an export statement for the ParentContainer1 component.

    export default ParentContainer1;

  5. Save and close the file.

    Your code should look similar to parent-container1-tsx.txt.

Task 5: Create the Activity Container Component

Create the ActivityContainer component, a child component that is rendered by the ParentContainer1 component. The ActivityContainer component renders a header and a list of activities.

  1. In the JET-Virtual-DOM-app/src/components directory, create an Activity directory and an ActivityContainer.tsx file inside it.

  2. At the top of the file, add the following import statement.

     import { h, ComponentProps } from "preact";

  3. Create the ActivityContainer component’s function definition, which returns a div element containing an h3 HTML header Activities and a list of activities. The div includes an Oracle JET oj-bg style class to add a blue background color to the container.

    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. At the end of the file, add an export statement for the ActivityContainer component.

    export default ActivityContainer;

  5. Save and close the file.

    Your code should look similar to activity-container-tsx.txt.

  6. Navigate to the JET-Virtual-DOM-app/src/styles directory and open the app.css file in an editor. Add the item-display, no-wrap, and li-item style classes to the end of the 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. Save and close the file.

    Your code should look similar to app-css.txt.

Task 6: Run the Virtual DOM App

  1. In the terminal window, run the app from the JET-Virtual-DOM-app directory.

    npx ojet serve

    The Activity Container (blue) inside of Parent Container 1 (yellow) displays the list of activity names. Note that the Item Detail Container is not displayed because it has not yet been rendered inside another component (it will be added to the Parent Container 2 component, created in the next tutorial).

    Parent Container 1 and the Activities Container

  2. Close the browser window or tab that displays your running virtual DOM app.

  3. In the terminal window, press Ctrl+C, and if prompted, enter y to exit the Oracle JET tooling batch job.

Next Step

Proceed to the next tutorial in this module.

This tutorial is part of the module Compose Components.

You can return to the virtual DOM learning path’s main page to access all the modules on building virtual DOM apps.

More Learning Resources

Explore other labs on docs.oracle.com/learn or access more free learning content on the Oracle Learning YouTube channel. Additionally, visit education.oracle.com/learning-explorer to become an Oracle Learning Explorer.

For product documentation, visit Oracle Help Center.