Building a Mobile Web Application Using Oracle Application Express
5.0
Overview
Purpose
This tutorial covers how to create a mobile web application
using Oracle Application Express 5.0.
Time to Complete
Approximately 45 minutes.
Introduction
Mobile applications are designed to run specifically on
smartphone devices and hence they must be built with extremely
minimal, semantic HTML that is optimized for mobile connections.
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. Mobile devices that
have HTML5 capabilities can utilize all of the capabilities that
can be built into the applications, including HTML5 date-pickers,
sub-types that display different keypads based on field
definition, and so. Older devices will still render the
application they will offer less advanced features. The major
advantage of developing browser-based applications is that you
only need to develop them once for the majority of mobile devices.
To support mobile application development, Oracle Application
Express incorporates jQuery Mobile. jQuery Mobile-based web pages
use a lightweight framework that enables you to create compact and
minimalistic web sites that include only a few images and CSS
files. Using jQuery Mobile, these applications can run on the
following mobile operating systems: iOS, Android, Blackberry, and
Windows Mobile.
To test your mobile applications, you can also download and
install some of these recommended emulators to view the mobile
application.
On a Mac, you can use the XCode iPhone Simulator
On Windows, you can use the following:
Emulator included in the Android
SDK
Genymotion - which is an Android
running in a Virtual Machine
Andy
Scenario
In this tutorial, you create a mobile application that is based
on the Projects and Departments tables. You will create a List and
a Form type of pages for both Projects and Departments.
Prerequisites
Before starting this tutorial, you should have:
Access to Oracle Database 11g or later
Installed Oracle Application Express 5.0 into your Oracle
Database
Downloaded and installed the files.zip
into your working directory.
Created a workspace and user to perform this tutorial.
Running SQL Script to Load Tables
Before you build the application, you should run the SQL Script
that is used to load tables into the database. The mobile
application is built using loaded tables.
Log into the Application Express Login page using your login
credentials. Enter your login credentials and click Login.
Enter Mobile App for Name. Click the up
arrow to select the Theme for the mobile application. APEX 5.0
ships with a new mobile theme called Theme 51, which includes
a choice of theme styles. Theme styles provide different color
schemes and styling.
The two types of Mobile themes that are available are jQuery
Mobile Smartphone Theme 50 and Theme 51. The difference
between these two theme styles is that Theme 51 uses a List
template type and Theme 50 uses a Tab template type. Click jQuery Mobile Smartphone
of ID 51.
Click the Theme Style select list to view
the available theme colors. Blue and Red are the two Theme
Styles that a re available. Select Blue and
click Next.
View Image
Select List View and Form
page type. List View is optimized to display data and provide
easy navigation on Smartphones. This page type builds a two
page List View and Form combination of pages. On the first
page, you can select a row to update from the List View. On
the second page, you can add a new record, and update or
delete the selected record.
Select Home(1) for Subordinate to Page, OBE_DEPARTMENTS for Table Name, and DEPARTMENT_NAME
for Display Column.
Click Add Page.
You want to add a Column Toggle Report. A column Toggle
Report hides less important columns at narrower widths and
surfaces a button to open a menu allowing the user to choose
the columns to be viewed. Click Column
Toggle Report. Select OBE_EMPLOYEES
for Table Name. Click Add
Page.
A Reflow report
collapses the table columns into a stacked presentation. Click
Reflow Report. Select
Home (1) for Subordinate
to Page. Select OBE_EMPLOYEES
for Table Name. Click Add
Page.
The pages in your application have been created. You want to
edit the names of some pages in your application. Click the Edit icon against ID 6
of the Obe Employees
of Column Toggle Report page type.
Your application has been successfully created. The
application definition is displayed with the various pages
that you added using the Create Application wizard.
Click the panel button icon on the left corner to view the
panel that contains the top level pages that were added at the
time of creating the application.
A List View containing the Department Names is displayed. The
Create button is available to create a new record. Click Administration to view
the Administration department details.
The Department details such as the Department Name and
Location Id are displayed. The Save and Delete buttons are
available to save the modified record and delete the selected
record.
A list view of Projects is displayed. The Create button is
available to create a new record. Click one of the Project
Names to view the Project Details. In this case, click Maintain Support Systems.
The Project Details pertaining to that particular project is
displayed. The Save and Delete buttons are available to save
the modified record and delete the selected record.
You want to add this page to the Navigation List. Enter EmpDept Chart for
Top Level List Item Label, select Yes
for Add Page Link
to Navigation List and enter EmpDept
Chart for List Item
Label. Click Submit.
Copy and paste the following query into the query field.
Click Next. select null link, d.dname
label, e.emp_count value from (select deptno, count(*)
emp_count
from emp group by deptno) e, dept d where e.deptno =
d.deptno
Notice that the EmpDept
Chart list entry is listed in the navigation list
along with page link to the navigation list. Click EmpDept
Chart page link in the navigation list.
Modifying Departments List View and Departments Form pages
In this section, you modify the Name, Title, Region, and Query
definitions of the Departments List View and Departments Form
pages appropriately. You can make use of the settings available in
the List View attributes to display the report based on your
requirement. The List View supports the following features:
Advanced Formatting: This
feature allows you to include text formatting conventions for
common list patterns like header/descriptions, secondary
information and counts through semantic HTML markup.
Show Image:You can add an
image inside a list item as the first child element.
Show List Divider: This
feature allows List items to be turned into dividers to organize
and group the list items.
Has Split Button: In
cases where there is more than one possible action per list item,
you can use a split button to offer two independently clickable
items - the list item and a small arrow icon in the far right.
Enable Search: jQuery
Mobile provides a very easy way to filter a list with a simple
client side search feature. The framework will have a search box
above the list to filter out list items that do not contain the
current search string as the user types.
Is Nested List View: This
feature can be used to populate a new page with the title of the
parent in the header and the list of child elements when a list
item with a child list is clicked.
Inset List: You can use
this feature if lists are embedded in a page with other types of
content. An inset list packages the list into a block that sits
inside the content area with a bit of margin and rounded corners.
In the Property Editor - Region section of the Page Designer,
change the Title as
Departments,
and replace the SQL Statement with the query provided below.
select department_name, department_id, (select count(*)
from OBE_PROJECTS p where p.project_dept = d.department_id)
Projects from OBE_DEPARTMENTS d View Image
In the Property Editor - Attributes section of the Paqe
Designer, under Settings,
uncheck the Enable Search
feature. In the Counter
Column, select Projects.
In the Number of Rows
textbox, enter 10 and
click Save.
Next, you will modify the Items in the Page. Currently, the
item Department_Id is a hidden item and you want
to change it to a Number field so that you can add a new Department
Id in the form. In the Rendering section of the Page
Designer, click
P3_DEPARTMENT_ID
In the Property Editor - Page Item section of the Page
Designer, notice that the Type
is Number Field.
However, you can change it to a Select
List where you can select the Location Names from the
locations table to be displayed in the form. To do this,
change the Number Field
to Select List in
the Type property.
Change the Label to
Locations. In the List of Values property,
select SQL Query for
Type and enter the
below given SQL Statement.
Click Save. select city d, location_id r
from mob_locations
You will be taken to the Maintain Departments page where the
Department Details of the department that you have selected is
displayed. Notice that the Department Id (which was a Hidden
item, but later changed to a Number Field) is displayed and
also notice that the Location item is a Select List. You can
modify the Department Details by changing any of these items.
Click the down arrow in the Select List of the Location
field and change the location to Bombay. Click Save.
In the Property Editor - Attributes section, expand Settings.
Select Advanced Formatting
and Show List Divider
under Features. Enter the code given below in the Text
Formatting text field. Select PROJECT_DEPT
in the List Divider Column
to divide the Project lists based on the Department.
Further down, change the Search
Type as Server:
Like and Ignore Case. Select
PROJECT_NAME for
Search Column and enter Search
By Project Name in Search
Box Placeholder text field. In the Layout property,
enter Number of Rows
as 10
and click Save.
In the Property Editor - Page section of the Page Designer of
Page Number 5 (Obe
Projects), change the Name and
Title as
Maintain Projects. Click Save.
You want to change the Type of this item to be a select list
so that you can select the Departments that are available and
modify the Projects with a different Department if needed. In
the Property Editor - Page Item section of the Page Designer,
select the Type to Select List in the
Identification property. Select Type
as SQL Query in the
List of Values property and enter the SQL Statement given
below. Click Save. select department_name
d, department_id r from obe_departments
You want to have a Select List for the Status of the
Projects. In the Property Editor - Page Item section of the
Page Designer, change the Type
to Select List
in the Identification property. Select Type
as SQL Query
in the List of Values property and enter the SQL Statement
given below. Click Save.
select distinct status
d, status r from obe_projects
You now want to run the application to view the changes you
made to the Projects List View and Form pages. Select the tab
that has the application open and running.
Notice that the projects have been divided based on the
Department Id. Enter a term in the Search field to search the
Projects based on the Search item. Type Maintain
in the Search field and press Enter key.
Enhancing the Projects Form page by Adding a New Page Item and
Dynamic Action
In this section, you add a new page item called LOCATION
to the Projects form page. You will then
associate the P5_PROJECT_DEPT
item with a Dynamic Action that will display the Location based on
the Department selected. Dynamic Actions are used to define
complex client-side behavior declaratively without the need for
JavaScript. Using the Dynamic Actions, you specify an action that
is performed when a defined set of conditions occur. You can also
specify which elements are affected by the action, and when and
how they are affected.
Navigate back to the Page Designer tab of the Application by
clicking Page Designer tab. page.
In the Property Editor - Page Item section of the Maintain
Projects page, enter
P5_LOCATION for Name
and select Type as
Display Only. In the
Source property, select Type
as Item and
select P5_LOCATION
from the Popup List of Values of Pick Item. Click Save.
Next, you want to create a Dynamic Action for the P5_PROJECT_DEPT
item which will display the appropriate Location of the
Department whenever the Department Name is changed.
Right-click P5_PROJECT_DEPT
and select Create Dynamic
Action.
In the Property Editor - Action section, change Action
property to Set
Value. Expand Settings
and select Set Type
as SQL Statement and
enter the SQL Statement given below. Select
P5_PROJECT_DEPT for Page
Items to Submit. Note that under the Affected
Elements, P5_LOCATION
is selected with Selection
Type as Item(s).
Click Save. select city from
obe_locations where location_id = (select location_id from
obe_departments where department_id = :P5_PROJECT_DEPT)
In this topic, you view the Employees Column Toggle report. In
this report, you can toggle the columns and hide the columns which
are less important in the report thereby allowing the user to
choose the columnms to be viewed.
Click Employees Column
Toggle Report in the panel list.
Notice that all the columns in the report are displayed. You
can choose to display only columns that are of importance to
you by clicking the Columns button on the top right corner of
the screen. Click Columns...
All the columns that are available are displayed here. You
can uncheck the columns that you do not want in your report.
Click Employee Id and Email columns to
deselect and not display in the report.
In this topic, you view the Employees Reflow report. In this
report, the table columns are in a stacked presentation that look
like block of label/data pair for each row.
Resize your browser by clicking the maximize option.
Overview