Oracle by Example brandingOracle Application Express 18: jQuery Mobile to Universal Theme (1 of 4) - Getting Started

section 0Before You Begin

This 15 minute tutorial describes how to transition an Oracle Application Express release 5.1 application that uses jQuery Mobile to the new Universal Theme in Oracle Application Express 18.

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

Background

Previous releases of Oracle Application Express used jQuery Mobile to create mobile pages. jQuery Mobile will be desupported in a future release. Therefore, developers need to migrate jQuery Mobile pages to the Universal Theme. In Oracle Application Express release 18, the Universal Theme - 42 includes new UI responsive patterns that work equally well on small screen devices (such as smartphones and tablets) and larger screen devices (including laptops and desktops).

In this tutorial, you import and install the 5.1 Sample Projects application. You will update the Universal Theme to ensure you are using the latest styles and templates and then create new pages by copying existing mobile pages. In subsequent tutorials, you update page attributes to take advantage of new template enhancements, create new navigation for your pages, and then test the new mobile pages using a device emulator.

What Do You Need?

To complete this tutorial you need:

  • Download and unzip the 5.1 Sample Projects application, 5_1_sample_projects.zip.
  • Access to Oracle Application Express release 18.1 or later.

Accessing Your Development Environment

How you sign in and access Oracle Application Express depends upon where Oracle Application Express resides. Oracle Application Express may reside in a local on-premises Oracle Database or in a hosted environment, such as the Oracle Cloud. The sign in credentials you use to sign in differ depending upon the installation type.

  • Free Workspace: Give Oracle Application Express a test run by signing up for a free workspace. To request an evaluation workspace, go to apex.oracle.com, and click Get Started for Free.
  • Oracle Cloud: Develop and deploy applications without worrying about infrastructure, repair, and downtime. Oracle Application Express is available in Exadata Express Cloud Service and Database Cloud Service. However, you need to manually customize your databases to install and enable Oracle Application Express. To learn more, see Database Cloud Service.
  • Oracle Application Express On-premises: Install Oracle Application Express directly within any Oracle Database and then sign in to your workspace using your sign in credentials. For details on your sign in credentials, contact your administrator or see Oracle Application Express Installation Guide.
  • Oracle Application Express Pre-Built VM: Install a Pre-Built Virtual Machine (VM) which includes an Oracle Database and Oracle Application Express 18.1. To learn more, see Hands-On Labs.
    Once the VM is installed, start the VM:
    • Click the big red circle labeled Start.
    • Click the APEX shortcut, or enter the following URL:
      http://localhost:8080/ords/f?p=4550:1
    • When prompted to sign in, enter the sign in credentials (unless given other credentials to use):
      • Workspace: obe
      • Username: obe
      • Password: oracle

Note your Application ID may be different when compared to the screenshots in this tutorial. Your Application ID is assigned automatically when you create the application.

section 1Download, Import, and Install the 5.1 Sample Projects Application

To download, import, and install the 5.1 Sample Projects application:

  1. Sign in to your development environment.
  2. Navigate to the Import page:
  3. On the Import page:
    • Import file: Navigate to the export file, 5_1_sample_projects.sql, you previously downloaded and unzipped.
    • File Type: Select Database Application, Page, or Component Export.
    • File Character Set: Accept the default, Unicode, UTF-8.
    •  Click Next. The File Import Confirmation page displays indicating the export file has been imported.
  4.  To install the file, click Next. The Install Database Application dialog appears.
  5. On Install Database Application dialog:
    • Parsing Schema: Select a schema. This is the schema against which all of the application's SQL and PL/SQL are parsed.
    • Build Status: Select Run and Build Application.
    • Install As Application: Select Auto Assign New Application ID. If you choose to select your own application ID, you must specify an application ID that is unique across all Application Express workspaces.
    • Click Install Application. 
  6. On Install Application, Supporting Objects:
    • Accept the defaults and click Next.
    • Click Next.
  7. On Install Application, Confirmation, click Install. A confirmation page appears indicating the application's supporting objects are installed.
  8. Click Edit Application. The Application home page appears.

section 2Refresh the Universal Theme

First, you need to update the Universal Theme to use the latest styles and templates.

To refresh the Universal Theme:

  1. Navigate to the Shared Components page. On the Application home page, click the Shared Components icon.
    Shared Components icon
    Description of the illustration shared_components_icon.png

    The Shared Components page appears.

  2. Under User Interface, click Themes.
    Shared Components page
    Description of the illustration shared_components.png

    The Themes page appears. Verify that the Subscribed From column for Universal Theme says Theme Repository.

  3. Click Universal Theme - 42. The Create/Edit Theme page appears.
    4. Create/Edit Theme page
    Description of the illustration edit_theme.png
  4. Scroll down and find the Theme Subscription region. In the region header, click Verify.
    Theme Subscription region
    Description of the illustration theme_verify.png

    The Verify Theme Subscription dialog appears.

  5. In the Theme Subscription dialog, click Verify. Another dialog appears confirming the current theme matches the master them. Click OK.
  6. In the Theme Subscription region header, click Refresh Theme. The following message appears at the top of the page:

    Templates and template options refreshed from master theme.

  7. Click Apply Changes. The Themes page appears again.

section 3View the Existing Mobile Tasks Page

To view the existing mobile Task pages:

  1. On the Themes page, click the Run icon in the upper right corner.
    Run icon on Themes page
    Description of the illustration themes_run_pg.png

    A Login page appears.

  2. Enter your workspace username and password and click Log In. The Sample Projects application appears
  3. Click the Mobile navigation bar icon in the upper right of the page.
    Mobile navigation bar icon
    Description of the illustration mobile_nav_icon.png

    The mobile Home page appears.

  4. Click Incomplete Tasks. The Tasks page appears.
    Tasks page
    Description of the illustration 5_1_tasks_page.png

    The Tasks page contains a List View report. You can view details about a task by clicking anywhere on a task. Clicking the icon in the upper left of the page displays a conventional navigation menu. In the next few steps, you will create a copy of the Tasks and Maintain Tasks pages to take advantage of other UI enhancements in the Universal Theme. Then, in a later tutorial you will create a new tab-based navigation menu.

  5. Navigate back to the Application home page:

section 4Copy Page 47 - Tasks

To copy the existing mobile Tasks page:

  1. View the mobile Tasks page in Page Designer. On the Application home page, find and select page 47 - Tasks.
    Page Designer displays Page: 47 - Tasks.
  2. On the Page Designer toolbar, select the Create menu and then Page as Copy.
    Page as Copy
    Description of the illustration page_as_copy.png

    3. The Copy Page dialog appears.

  3. For Create a page as a copy of, select Page in this application and click Next.
  4. For Page to Copy:
    • New Page Number: Enter 547
    • New Page Name: Enter New Mobile Tasks
    • Accept the remaining defaults.
    • Click Next.
  5. For Navigation Menu:
    • Navigation Preference: Select Do not associate this page with a navigation menu entry.
    • Click Next.
  6. Click Copy. Page Designer now displays Page 547: New Mobile Tasks.

section 5Copy Page 42 - Maintain Tasks

To copy page 42 - Maintain Tasks:

  1. Navigate to page 42 - Maintain Tasks:
  2. On the Page Designer toolbar, select the Create menu and then select Page as Copy.
    Page as Copy
    Description of the illustration page_as_copy2.png

    3. The Copy Page dialog appears.

  3. For Copy Page Option, select Page in this application and click Next.
  4. For Page to Copy:
    • Page Number: Enter 542
    • Page Name: Enter New Mobile Maintain Tasks
    • Accept the remaining defaults.
    • Click Next.
  5. For Navigation Menu:
    • Navigation Preference: Select Do not associate this page with a navigation menu entry.
    • Click Next.
  6. Click Copy. Page Designer now displays Page 542: New Mobile Maintain Tasks.
  7. Return to the Application home page. Click the Application ID breadcrumb at the top of the page. The Application home page appears.

This ends the first tutorial in this series.

next stepNext Tutorial

Oracle Application Express 18: jQuery Mobile to Universal Theme (2 of 4) - Updating Attributes

more informationWant to Learn More?