Wednesday, 18 September 2013

Creating Mobile Web Application Interface in Oracle Application Express

Oracle APEX allows you to create two types of interfaces: Desktop and jQuery Mobile Smartphone. Each page in an application is associated with one user interface. If a user logs into the application with a mobile device, the pages created with jQuery Mobile Smartphone interface will be rendered; if a desktop is used, the desktop user interface is delivered. You created and used the desktop interface in previous chapters. Here, you’ll use jQuery Mobile interface for your mobile application.  

1. Click the button Edit Application Properties  in the main Sales Web Application interface.

2. Click on the User Interface tab.

3. Click the button Add New User Interface, located at the bottom of the page.

4. On the User Interface Page, set the attributes as follows and click Next.

Type: jQuery Mobile Smartphone
Selected a user interface type for the application. Select Desktop for applications primarily designed for desktop use. For mobile devices, such as smartphones or tablets, select the jQuery Mobile Smartphone interface.

Display Name: jQuery Mobile Smartphone
Specified a display name for the user interface. The display names is shown in wizards.

Auto Detect: Yes
Select whether the appropriate user interface should be automatically detected. If auto-detection is enabled, the user will be redirected to the corresponding login page or home page.

Specifies the home page of the application for the current user interface.

Points towards the login page of the application for the current user interface.

5. In Identify Theme, select Standard Themes as Theme Type and jQuery Mobile Smartphone (Theme 50) as the mobile application theme. Click Next.

6. Click Create.

Recall that when you initially created the desktop application, the application wizard created two pages for you (Home and Login). The mobile interface too, creates two default pages: Home (Page 13 in my scenario) and Login (Page 1001). In addition to these pages, the wizard creates a third one: Global Page - jQuery Mobile Smartphone (Page 0). Recall that this page was created manually for the desktop application in chapter 8 section 8.2. The Global page of your application functions as a master page. You can add a separate Global page for each user interface. The Application Express engine renders all components you add to a Global page on every page within your application.

Run the Login Page 1001 that will look like the following figure:

Enter the usual credentials (admin/asa), you’ve been using so far, and hit the Login button. A blank mobile home page will appear resembling the one illustrated below.

Click the Logout link. You’ll be landed to the desktop login page, which is not correct. Call definitions of the Global Page. Click the Logout link in the Buttons section. Scroll down to Action When Button Clicked section. Set Action to Redirect to Page in this Application and enter 1001 in Page. Click Apply Changes. These two settings inform APEX where to land user when he clicks the Logout button. Call and run the Home page again, login using the same admin account, and click the Logout button. This time you’ll see the correct login page i.e. Page 1001. Use your browser’s back button to move back to the development environment.

An excerpt from the book "Create Rapid Web Applications Using Oracle Application Express - Second Edition"


  1. Thanks for sharing information.
    Videocon offers one of the best postpaid prepaid service in Gujrat.

  2. I really appreciate information shared above. It’s of great help. If someone want to learn Online (Virtual) instructor lead live training in TECHNOLOGY , kindly contact us
    MaxMunus Offer World Class Virtual Instructor led training on TECHNOLOGY. We have industry expert trainer. We provide Training Material and Software Support. MaxMunus has successfully conducted 100000+ trainings in India, USA, UK, Australlia, Switzerland, Qatar, Saudi Arabia, Bangladesh, Bahrain and UAE etc.
    For Demo Contact us.
    Pratik Shekhar
    Ph:(0) +91 9066268701