Before You Begin
This 15-minute tutorial shows you how to add navigation with images to a mobile application using Oracle Application Express 18.
This
is the last tutorial in the series Oracle Application
Express 18: Mobile App Series. Read the tutorials in
sequence:
- Oracle Application Express 18: Mobile App (1 of 3) - Creating
- Oracle Application Express 18: Mobile App (2 of 3) - Adding Reports
- Oracle Application Express 18: Mobile App (3 of 3) - Improving Navigation
Background
Mobile applications developed with Oracle Application Express are browser-based applications that run inside the browser on the mobile device. Therefore, these applications must have a connection in order to communicate with the Oracle Database and cannot operate in a disconnected environment.
What Do You Need?
To complete this tutorial you need to:
- Complete the preceding tutorials in this series.
Add the List View to the Home Page
The
List View displays data in an easy to navigate list. You can
also enhance the List View by incorporating numerous features.
To add List View to the Home page :
- From the application (
My_Mobile_Application
) home page, select the Home page. The Page Designer opens. You add new components in Page Designer by selecting them from Gallery at the bottom on the central pane. - To add a List View report:
- In the Gallery, select the Regions tab.
- Find and select List View.
- Right-click List View and select Add To, and then Content Body.
- To edit the List View:
- In the Property Editor, update the following:
- Identification: Title – Enter List View
- Source – Type – Select SQL Query
- Source – SQL Query – Enter the script.txt to add labels.
- To add the links:
- In the Rendering tab, click the Attributes region .
- In Property Editor, update the following:
- Settings: Text Column - Select Label.
- Settings: Link Target - Select No Link Defined
- Click Link Target field again and Link Builder – Link Target window appears. Under Target, select the following:
- Type - URL
- URL - &URL
- Click OK.
- Save and Run page and click the links. Each link will open the corresponding page.
Add Images to the Navigation Menu
- From the application home page, click Shared Components.
- Click Navigation Menu under Navigation.
- Click Desktop Navigation Menu.
- Edit each of the following list items by selecting a new
image. Note that you must edit each list entry one at a time.
- For adding icon to Projects Navigation Menu:
- Desktop Navigation Menu: Select Projects.
- Desktop Navigation Menu: Image/Class - Select fa-folder-o
- Click Apply Changes.
- For adding icon to Milestones Navigation Menu:
- Desktop Navigation Menu: Select Milestones.
- Desktop Navigation Menu: Image/Class
- Select fa-flag-o
- Click Apply Changes.
- For adding icon to Tasks Navigation Menu:
- Desktop Navigation Menu: Select Tasks.
- Desktop Navigation Menu: Image/Class - Select fa-check-square-o
- Click Apply Changes.
- Save and Run page. You can see the new icons in the Application Wizard.
Want to Learn More?