Oracle by Example brandingOracle Application Express 18: jQuery Mobile to Universal Theme (4 of 4) - Running and Testing

section 0Before You Begin

This 10 minute tutorial describes how to run and test the new mobile Home and Task pages your created in the previous tutorials.

This is the fourth tutorial in the series, Oracle Application Express 18: jQuery Mobile to Universal Theme. Read the tutorials in the following sequence:

Background

In this tutorial, you run the new mobile Home and Task pages and review them using a device emulator available in modern versions of Google Chrome.

What Do You Need?

To complete this tutorial you need:

  • Complete the preceding tutorials in this series.
  • Current and prior major release of Google Chrome.

section 1Run and Review the New Mobile Pages

At the end of the last tutorial, you updated page 500 and page 542 to include the new navigation menu.

To run and review the new mobile pages:

  1. Return to page 500, Home - Mobile. In Page Designer, enter 500 in the Page Selector and click Go.
  2. Click Save and Run Page.
  3. If a Login dialog appears, enter your workspace username and password and click Login.
    A rendered version of page 500 appears.
    4. Rendered version of page 500
    Description of the illustration 500_run_page.png

    A new Navigation Menu displays at the top of the page and Tasks links to page 547, New Mobile Tasks.

    Note: In this tutorial series, you have only converted the mobile Home page and mobile Tasks pages. Other links on this page still take you to the previous Desktop version.

  4. Change the position of the Runtime Developer Toolbar so it displays on the right side of the page:
    • Click Developer Toolbar Options on the right side of the Runtime Developer Toolbar.
    • Select Display Position and then Right.
      • Developer Toolbar Options
      Description of the illustration change_toolbar_position.png

      Runtime Developer Toolbar now displays on the right side of the window.

    • Next, hide the toolbar. Click Developer Toolbar Options again and then select Auto Hide.
    • Click anywhere on the window and the Runtime Developer Toolbar is hidden.
  5. Access the new Tasks page. Click Tasks on the navigation menu.
    6. Tasks option on the navigation menu
    Description of the illustration tasks_list_item.png

     The Tasks page appears.

  6. Resize the window and make it smaller.
    7. Resized Tasks page
    Description of the illustration resize_window.png

    Note how elements move and realign based on the available space. In particular, notice that as the window decreases in size, the navigation menu shrinks and moves to the bottom of the page.

  7. Return the window to the original size that displayed.

section 2Test the Mobile Pages Using a Device Emulator

To view your new pages in a device emuator:

  1. Access Chrome Developer tools:
    • Click the Customize and control Google Chrome icon which resembles three vertical dots.
    • From the menu select More tools and then Developer tools.
      Tip: You can also press F12.
    • Click the Toggle device toolbar icon to the left of Elements.
  2. From the Responsive select list at the top of the page, select a device such as iPhone 6/7/8.
    Responsive select list
    Description of the illustration responsive_menu.png

    A revised image appears that emulates the device.

    Device emaulation
    Description of the illustration emulate_iphone.png
  3. Select other devices.
  4. To exit Chrome Developer tools:
    • Click the Toggle device toolbar icon.
    • Click the Close icon on Developer tools window.
      Tip: You can also press F12.

This ends the fourth and final tutorial in this series.

more informationWant to Learn More?