Add containers to the Oracle JET virtual DOM app

Introduction

A responsive page layout can flexibly scale to fit a wide range of screen sizes, from small phones to desktop monitors. An Oracle JavaScript Extension Toolkit (Oracle JET) flex layout has child elements that you can arrange in any direction. When the screen size changes, these elements adjust themselves, growing to fill the unused space or shrinking to avoid the overflow of parent or child elements in the layout. To design a responsive page layout for the virtual DOM app you composed in the previous learning path, use the Oracle JET oj-flex and oj-flex-item layout classes to create responsive containers. The changed layout of your virtual DOM app will look similar to this.

The layout plan for the responsive layout page

Objectives

In this tutorial, you will add Oracle JET flex layout style classes to your virtual DOM app to convert its current page layout to a responsive page layout.

Prerequisites

A development environment set up to create Oracle JET virtual DOM apps that includes an installation of Node.js
Google Chrome web browser installed and set as the default web browser
Access to the Oracle JET Developer Cookbook
(Option 1) Completion of the final tutorial in the previous learning path in this series: Create Parent Container 2 and Activity Item Container Components
(Option 2) If you haven’t completed the previous learning path in this series: The jet-virtual-dom-app-temp.zip downloaded

Task 1: Download the Starter Virtual DOM App

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

Rename jet_virtual_dom_app_temp.zip as JET-Virtual-DOM-app.zip. Extract the contents to the JET-Virtual-DOM-app folder.
Navigate to the JET-Virtual-DOM-app folder, and restore the Oracle JET virtual DOM app.

npm install

Your virtual DOM app is ready to use.

Task 2: Add Style Classes to Parent Container 1 and the Activity Container

Add Oracle JET flex layout style classes to the Parent Container 1 and Activity Container components to create a flexible box layout.

Open the Oracle JET Cookbook, click Layout & Nav in the menu bar and then select the Flex Layout component. In the toolbar, click API Doc and then select flex.
In the Flex Layout API documentation, scroll to the table that describes the flex layout classes and read about the oj-flex class.
Navigate to the JET-Virtual-DOM-app/src/components directory, and open the ParentContainer1.tsx file in an editor.
Find the div element where id="parentContainer1". Add oj-flex oj-flex-init flex layout classes to the element.
```
<div id="parentContainer1" class="oj-flex oj-flex-init oj-panel oj-bg-warning-20">
```
Navigate to the JET-Virtual-DOM-app/src/components/Activity directory, and open ActivityContainer.tsx in an editor.
Find the div element where id="activitiesContainer". Add an Oracle JET oj-flex-item container item flex layout class.
```
<div id="activitiesContainer" class="oj-flex-item oj-bg-info-30">
```
Save and close the open files.

Task 3: Add Style Classes to Parent Container 2 and Its Child Containers

Add Oracle JET flex layout style classes to Parent Container 2, the Item Details Container, and the Activity Container components to create a flexible box layout.

Navigate to the JET-Virtual-DOM-app/src/components directory, and open the ParentContainer2.tsx file in an editor.
Find the div element where id="parentContainer2". Add oj-flex oj-flex-item flex layout classes to the element.
```
<div id="parentContainer2" class="oj-flex oj-flex-item oj-panel oj-bg-danger-30">
```
Navigate to the JET-Virtual-DOM-app/src/components/ActivityItem directory and open ActivityItemContainer.tsx in an editor.
Find the div element where id="activityItemsContainer". Add an Oracle JET oj-flex-item container item flex layout class to the element.
```
<div id="activityItemsContainer" class="oj-flex-item oj-bg-success-20">
```
Navigate to the JET-Virtual-DOM-app/src/components/ItemDetail directory, and open ItemDetailContainer.tsx in an editor.
Find the div element where id="itemDetailsContainer". Add an Oracle JET oj-flex-item container item flex layout class.
```
<div id="itemDetailsContainer" class="oj-flex-item oj-bg-neutral-30">
```
Save and close the open files.

Task 4: Run the Virtual DOM App

In the terminal window, run the virtual DOM app from the JET-Virtual-DOM-app directory.
```
npx ojet serve
```
Oracle JET tooling runs your virtual DOM app in your local web browser. In the browser window, the layout of the virtual DOM app has changed. The components are laid out horizontally across the window, and resizing the width of the window causes the containers to adjust to maintain their respective positions and content displays.
Close the browser window or tab that displays your running virtual DOM app.
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 Responsive Design.

Add Containers to the Oracle JET Virtual DOM App
Format the Containers for the Oracle JET Virtual DOM App
Show or Hide Content in the Oracle JET Virtual DOM App
Test the Oracle JET Virtual DOM App on Different Screen Sizes

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.

Title and Copyright Information

Add containers to the Oracle JET virtual DOM app

F72921-05

Oracle and/or its affiliates.