Test the Oracle JET virtual DOM app on different screen sizes

Introduction

A responsive layout adjusts itself to fit screen sizes across a wide range of devices. When you run your Oracle JavaScript Extension Toolkit (Oracle JET) virtual DOM app in the Google Chrome web browser, you can use Chrome developer tools (Chrome DevTools) to test the responsiveness of the app with different screen sizes.

Objectives

In this tutorial, you will test the responsive design of the developed Oracle JET virtual DOM app on various screen sizes.

Prerequisites

Task 1: Run the Virtual DOM App

The Oracle JET virtual DOM app has a responsive layout and components, and it can run on many web browsers and devices. For this tutorial, we will use the Chrome browser and DevTools to view the app in various screen sizes.

  1. In the terminal window, change to the JET-Virtual-DOM-app directory and run the app.

    npx ojet serve

    Oracle JET tooling runs your virtual DOM app in the browser.

    The app with a responsive layout

    Description of the illustration final_app.png

Task 2: Change the Screen Size

You can test the app with various screen sizes and devices in the debugger mode of the Chrome browser. When you use the app on different devices, the components of the app and their contents will adjust to the size of the given screen. For example, the text alignment of the Activity Container content will change for a small screen size, as will the Activity Item Container’s list items and color.

  1. In Google Chrome, press Ctrl+Shift+I to display the Chrome DevTools.

    Google Chrome debugger enabled

    Description of the illustration chrome_debmode.png

  2. In the Chrome DevTools toolbar, click Toggle device toolbar button to switch to the device mode.

    Device mode toolbar locator

    Description of the illustration device_mode_lens.png

  3. Click the Dimensions dropdown menu in the device mode’s screen emulator.

    Various viewports are displayed

    Description of the illustration viewport.png

  4. From the dropdown menu, select the Pixel 7, with a small screen size, and view the app in the screen emulator.

    In the Activity Container, the content is right-aligned. In the Activity Item Container, the abbreviated list of items for small and medium screens is displayed, and the header Activity Details replaces the header Activity Items. The container’s color is light cyan.

    The app displayed for a small screen size

    Description of the illustration small_screen_view.png

  5. From the Dimensions dropdown menu, select the iPad Air, with a medium screen size.

    In the Activity Container, the content is left-aligned. In the Activity Item Container, the abbreviated list of items for small and medium screens is displayed, and the header Activity Details replaces the header Activity Items. The container’s color is light cyan.

    The app displayed for a medium screen size

    Description of the illustration medium_screen_view.png

  6. From the Dimensions dropdown menu, select the Nest Hub Max, with a large screen size.

    In the Activity Container, the content is left-aligned. In the Activity Item Container, the list items for large and extra-large screens are displayed. In Parent Container 2, padding is applied on the left side of the Activity Item Container and the right side of the Item Detail Container.

    The app displayed for a large screen size

    Description of the illustration large_screen_view.png

  7. In the Chrome DevTools toolbar, click Toggle device toolbar button to exit the device mode.

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

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

Next Step

To proceed to the first tutorial in the next learning path in this series, click here.

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.