Oracle APEX allows you to create two types of interfaces: Desktop and jQuery Mobile smartphones. 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 the 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 the 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 are 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.
Home URL: f?p=&APP_ID.:HOME_JQM_SMARTPHONE:&SESSION.
Specifies the home page of the application for the current user interface.
Login URL: f?p=&APP_ID.:LOGIN_JQM_SMARTPHONE:&SESSION.
Points towards the login page of the application for the current user interface.
5. In Identify Theme, select Standard Themes as the 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 also 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 on 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 the user when he clicks the Logout button. Call and run the Home page again, log in 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"
