Oracle by Example brandingOracle Application Express 18: jQuery Mobile to Universal Theme (3 of 4) - Creating Navigation

section 0Before You Begin

This 15 minute tutorial describes how to create navigation for your new mobile pages.

This is the third 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 create a new mobile home page and add a list view report to it. Then you create a new navigation menu which will display as tabs at the top of the page. Finally, you will enable the new navigation menu on page 500 and page 547.

What Do You Need?

To complete this tutorial you need:

  • Complete the preceding tutorials in this series.

section 1Create a New Mobile Home Page

Run the Create Page Wizard to create a new mobile home page.

To create a new mobile home page:

  1. In App Builder, navigate to the Sample Projects application you imported in the previous tutorial.
  2. On the Application home page, click Create Page. The Create Application Wizard appears.
  3. On Create a Page, select Blank Page.
  4. On Page Attributes:
    • Page Number: Enter 500
    • Name: Enter Home - Mobile 2
    • Accept the remaining defaults and click Next.
  5. On Navigation Menu:
    • Navigation Preferences: Select Do not associate this page with a navigation menu entry.
    • Click Next.
  6. Click Finish. The message Page 500 created appears and the new page displays in Page Designer.
    Page 500 created
    Description of the illustration page_500_create.png

section 2Add a List View Report to the New Home Page

Add a List View report to the new home page:

  1. In the Rendering tab, right-click Content Body and select Create Region.
    Create Region
    Description of the illustration create_region.png

    The new region appears.

  2. In the Property Editor, edit the following attributes:
    • Identification: Title - Enter Actions
    • Identification: Type - Select List View.
    • Source: Type - Select SQL Query.
    • Click the Code Editor icon.
      Code Editor icon
      Description of the illustration code_editor_icon.png

      The Code Editor appears.

    • In the Code Editor, copy and paste the query in sql_query.txt and click OK.

      • Note: In this OBE you are only be converting the task pages and not the pages for projects and milestones. Therefore, the previous query still points to the existing desktop pages for projects (220) and milestones (230).

    • Appearance: Template - Select Blank with Attributes (No Grid)
  3. Update the region Attributes:
    • In the Rendering tab, select the Attributes node.
    • In the Property Editor, edit the following attributes:
      • Settings: Features: Select Inset List.
      • Settings: Text Column: Select Label.
      • Settings: Counter Column: Select Value.
  4. Enter a target page (or Link Target) to be called when the user clicks a list entry:
    • Settings: Link Target - Click the No Link Defined button. The Link Builder - Link Target dialog appears.
  5. Click Save.

section 3Create a New Navigation Menu

Next, you need to create a new navigation menu so you can use the new templates available in the current release. The easiest approach is to copy the existing Mobile Navigation Menu and then modify it.

To create a new navigation menu:

  1. View the existing navigation menus defined for this application:
  2. Make a copy of the Mobile Navigation Menu:
    • Select Mobile Navigation Menu.
      Mobile Navigation Menu
      Description of the illustration nav_menus.png

      The Shared Components page appears.

    • Under Tasks on the right side of the page, select Copy List. The Copy List Wizard appears.
      • For Create List as a copy of, select List in this application and click Next.
      • For Copy List, select Mobile Navigation Menu.
      • For New List Name, enter Mobile Navigation Tabs.
      • Click Copy.
  3. Select the new list. From the List select list at the top of the page, select Mobile Navigation Tabs.
  4. Update the Home list entry to point to page 500.
  5. Update the Tasks list entry.
    • Select the Tasks list entry.
      Tasks list entry
      Description of the illustration task_list_entry.png
    • Update the following attributes:
      • Entry: Image/Class - Enter fa-check-square-o u-color-10
      • Target: Page - Select 547
      • Current List Entry: List Entry Current for Pages Type - Select Current Page is Target.
      • Click Apply Changes. The List Details page appears.
  6. Return to page 500. Click Edit Page 500 on the Developer Toolbar.
    Edit Page 500
    Description of the illustration edit_pg_500.png

    Page Designer displays page 500.

section 4Enable the Navigation Menu on Page 500

To enable the navigation menu on Page 500:

  1. In the Rendering Tab, select Page 500: Home - Mobile 2.
    Page 500 Home - Mobile 2
    Description of the illustration home_mobile_2.png
  2. In the Property Editor, edit the following attributes:
    • Navigation Menu: Override User Interface Level - Select Yes.
    • Navigation Menu: List - Select Mobile Navigation Tabs.
    • Navigation Menu: List Position - Select Top
    • Navigation Menu: List Template - Select Top Top Navigation Tabs
  3. Click Save

section 5Enable the Navigation Menu on Page 547

To enable the navigation menu on page 547:

  1. Navigate to page 547. In Page Designer, enter 547 in the Page Selector and click Go.
    2. Page Selector
    Description of the illustration goto_pg_547.png

    Page Designer displays page 547.

  2. In the Rendering Tab, select Page 547: New Mobile Tasks.
  3. In the Property Editor, find the Navigation Menu group and edit the following attributes:
    • Navigation Menu: Override User Interface Level - Select Yes.
    • Navigation Menu: List - Select Mobile Navigation Tabs.
    • Navigation Menu: List Position - Select Top
    • Navigation Menu: List Template - Select Top Top Navigation Tabs
  4. Click Save

This ends the third tutorial in this series.

next stepNext Tutorial

Oracle Application Express 18.1: jQuery Mobile to Universal Theme (4 of 4) - Running and Testing

more informationWant to Learn More?