François Briard GS-AIS-HRDatabase Developers Forum, APEX6th May 2014

APEX MobileApplicationDevelopment 101

Disclaimer• Even if widely used in the past and still in use for some

applications, Oracle Application Express (APEX) is not the main GS-AIS Development Tool.

• This presentation is based mostly on personal experience made with the tool outside AIS main scope (i.e. Open Days tools)

Mobile AppsNative Apps Web Apps

• Installed on the device• Available from a « store »

• Running in a web browser• Just need URL

Pros • Can run offline• Better performance• Better user experience• Better at monetization

• No need to deploy• Users always have latest version• Runs on (nearly) all

OS/Platform/BrowserCons • Approval / Publication in Stores

can be complex• Need to develop/support

multiple versions

• Permanent Internet Connection• Access to local resources (GPS,

camera etc) not guaranteed• Security considered lower

If you need a database intensive application available to a maximum number of mobile OS then APEX Mobile Web Apps is the right choice.

Tim Berner-Lees on Mobile Apps

“If you don't give it a URL, people can't tweet about it. If people can't tweet or email about it, then it's not part of the discourse.”

cnet.com, March 2014

jQuery Mobile• APEX integrates jQuery for

improving Javascript useand support AJAX requests

• jQuery mobile is a framework builton top of jQuery

• Simplistic page structure• Comes with bunch of predefined

CSS styles• Very constraintful but guarantees

native-like look and feel

APEX Mobile Applications and Pages• Applications are assigned one default User Interface

• In Application Properties,you can add an additionalinterface

• Pages can be assigned anyof the application interfaces

• There is only one jQuery Mobiletheme, but it can be customizedthrough CSS generated byjQuery Mobile Theme Roller

APEX Mobile Regions and Items• Mobile specific page types

• ListView• ListView and Form• HTML5 Charts• HTML5 Calendars

• Mobile specific item types• Text Field sub-types: email, phone, URL• Yes/No• Slider

SimpleDemo

(http://cern.ch/go/apexdemo)

In a nutshell1. Select « jQuery Mobile Smartphone » for User Interface

when creating the application

2. Use mobile page types:• ListView• ListView and Form• HTML5 Charts• HTML5 Calendars

3. Check exsiting mobile region templates

4. Use mobile item types• Text Field sub-types: email, phone, URL• Yes/No• Slider

My experience• Desktop and Mobile versions of a web application

are 2 very different web applications!Don’t try to adapt existing screens from Desktop to Mobile.• Desktop UI = many data / few clicks• Mobile UI = few data / many clicks• Tablets are somewhere in between

• Keep as much business logic in DB(this is true for all APEX applications)

• Reuse what jQuery mobile offers: http://demos.jquerymobile.com

• When testing run app in new tab