00

UKOUG Development SIG

Paul Chester

0

APEX Mobile

• Sibylline Solutions Limited

Introduction

• UI Environments & Web Design

The Evolving Web

• Responsive Design in Apex

Responsive Web Design

• jQuery in Apex

jQuery Mobile Overview

• Building Mobile Applications with Apex

Apex Mobile

Q&A

0

Introduction - Sibylline

• 1992 - Occam started as Oracle ISV

• 2000 - focused on HE sector

• 2004 - HTML DB Support Desk App

• 2005 - Apex 2.1 Apps• 2013 - Sibylline spin

out to capitalise on Apex IPR

Sibylline Oracles Prophetesses who uttered divine revelations

0

Introduction - Topic

There is no reason why you cannot create an APEX Mobile User Interface that is every bit as rich or sophisticated as anything else on

the web.

00

The Evolving Web

.

0

The Evolving Web Environment

Different Devices

0

The Evolving Web Environment

Tomorrow?Google

Car

Consumer Devices

Smart TV

0

How do you to design and develop your UI for the multiple environments that have to be catered for?

One option is Native AppsOr Hybrid Apps

Another option is Web Apps

The Evolving Web Web Design

0

What are web apps?

• Browser based application that runs in built-in browser on device via URL

• Increasingly popular way to deliver content and business applications to mobile devices

• Alternative to developing native mobile apps• No need for download and installation via an

App Store• Run on any OS, desktop, tablet, smartphone

The Evolving Web Web Design

0

Advantages

• Easy to develop using standard web technologies• No need to download and install• Run on any device and OS• Used through a web browser with the bulk of functionally

executed on the web server (optionally)• Reduced security requirements on device compared to

native or hybrid • Advances in HTML, CSS and JavaScript allow more

functionality to run in the browser, providing richer user experience and better performance

• Easy to maintain and easy roll out of updates• Lowers cost of development as reuse skills

The Evolving Web Web Design

0

Limitations

• Browsers do not necessarily have access to advanced functions of a device, like GPS, camera, address book, etc.

• Web apps are often slower than native apps• Mobile web apps require permanent Internet

connection• Using offline web application caching and

platforms like PhoneGap provides ways to address these limitations

The Evolving Web Web Design

0

Environment rapidly changing

• Majority of content data downloaded outside working hours over an internet connection (not mobile carrier network)

• Internet moving to “Always on” model (hotspots, etc)

• 4G LTE is an IP protocol and will change dynamics of mobile phone apps (300mbs down, 75mbs up, <5ms latency)

• SQLite & Oracle Database Lite Mobile Server

The Evolving Web Web Design

0

Options for Multiple Environments

• Adaptive DesignCreating interfaces that adapt to the device. Replicate pages in application with environment specific Themes and Templates for each targeted environment (e.g. Sample Apex App, User Interface detection loads Desktop/Theme 25 or Mobile/Theme 50)

The Evolving Web Web Design

0

Options for Multiple Environments

• Responsive Design

Responsive design is an approach that web developers take to adapt the layout of a site to enable any screen size, any device and any device orientation to share the same code base and content without the need for separate website pages. Through responsive design you only need to develop one codebase for all of your touch points to provide the best possible experience to the user.

The Evolving Web Web Design

0

• APEX applications generally work on any modern Mobile device, like iPhones, Androids, etc

• APEX had built in support for both Responsive and Adaptive Design

• APEX 4.2 introduced mobile specific features by adding mobile enabled themes and templates based on the jQuery Mobile framework, extended in APEX 5.0

Evolving Web Mobile Web Apps in APEX

00

Responsive Web Design

.

00

Demo Responsive Web Design

Boston Globewww.bostonglobe.com

Oracle Cloudwww.cloud.oracle.com

Sibylline Solutionswww.sibyl.co.uk

0

Demo Responsive Web Design

0

Responsive Design - Advantages

• Separates business processes from presentation layer• One code base for all business logic – less room for error arising

from multiple code bases.• Reduces development overhead and release cycles for multi device

environments, now & in the future.• One deployment• Does not preclude using device specific CSS or jQuery if required.• Optimised experience for all touch points, not just smartphone v

desktop.• Easier to incorporate new environments and devices in the future• Googlebot user agents only need to crawl once

Responsive Design

0

Responsive Design - Disadvantages (versus mobile)

• Not easy to incorporate mobile specific features (location, camera, etc)

• Not easy to use jQuery Mobile UI functionality (rolling calendars, etc)

• Requires HTML5/CSS3/jQuery or javascript skills• Increased coding effort at UI level• Page size remains the same. You are loading the full HTML,

CSS, and JS resources, even on mobile devices with limited broadband.

• Responsive Web Design is just the tip of the iceberg

Responsive Design

0

How is Responsive Design Achieved?

• Fluid layout (flexible grids and layouts) allows the layout of page elements to grow or shrink to pre-determined maximum or minimum widths, therefore accommodating a width range in which the browser can adapt the layout. Based on HTML5 and CSS3

• Flexible Images allows images to be resized for environment. Based on HTML5 and CSS3

• Media queries & Break Points allow you to specify which CSS style sheet to use when a desired width has been reach or detected. Based on CSS3

• Touch of Javascript• Device Detection & Dynamic loading of CSS & jQuery libraries for different

environments. Based on jQuery and Javascript• Viewport informs mobile browsers that the site is optimised for mobile

viewing and to render the page at the devices width and or height. HTML5

Responsive Design

0

Responsive DesignAdaptive

Dedicated Mobile Dedicated Desktop

0

How is Adaptive Design Achieved?

• Device detection• 1 application, 2 User Interfaces, 2 Themes

Responsive DesignAdaptive

00

jQuery Mobile

.

0

jQuery Mobile

jQuery Mobile Overview

• Libraries of utilities or widgets • AJAX-based navigation system to enable animated

page transitions while maintaining back button, bookmarking and clean URLs

• Support for touch and mouse events to allow for different user input methods using a simple API

• Accessibility features like WAI-ARIA integrated throughout framework, means support for screen readers and other assistive technologies

0

jQuery Mobile

What does that mean?

0

jQuery Mobile

What does that mean?

0

jQuery Mobile

What does that mean?

0

jQuery Mobile

jQuery Mobile Philosophy

• One Code Base, All Platforms• Works everywhere• Optimised for mobile screens and touch enabled

devices • Lightweight size and minimal image

dependencies for speed• User Experience based on device capabilities • Built on standards, unified user interface• Built on top of jQuery Core

00

APEX Mobile

.

0

APEX MobileArchitecture

• Simple 2-Tier Architecture • Pages dynamically rendered using meta data in

the Database • No code generation • No file based compilation • Runs everywhere Oracle Database runs

0

Apex Page Rendering

•<HTML/> - Structure Held in Apex Themes & Templates• {CSS} - Style Loaded from file system by Theme Templates• Javascript - Action Loaded from file system by Theme

Templates

APEX MobileArchitecture

0

APEX MobileDemo

Mobile v Desktop

0

APEX MobileDemo

Apex Device Detection - User Interface

0

APEX MobileDemo

Apex Themes & Templates

0

APEX MobileDemo

Security – Authentication and Authorisation

0

APEX MobileDemo

Rest Services

0

Demo – Apex 5

0

Grids and Layouts

APEX Mobile - Responsive

0

Grids and Layouts – Built In

APEX Mobile - Responsive

0

Fluid Grids

APEX Mobile - Responsive

0

Fluid Grids – Built In

APEX Mobile - Responsive

0

Media Queries

APEX Mobile - Responsive

@media Queries

0

Media Queries – Built In

APEX Mobile - Responsive

@media Queries

0

Flexible Images

APEX Mobile - Responsive

0

Flexible Images – Built In

APEX Mobile - Responsive

0

Viewport

APEX Mobile - Responsive

0

Viewport – Built In

APEX Mobile - Responsive

0

Device Detection

APEX Mobile - Responsive

0

Device Detection – Built In

APEX Mobile - Responsive

0

jQuery Mobile

APEX Mobile - Responsive

0

jQuery Mobile – Built In

APEX Mobile - Responsive

0

• Easy Web-Service integration eg REST API• JQuery Mobile Themeroller• Adobe’s Kuler tool (colour schemes) • AnyCharts (Flash & HTML5) and AnyGantt

• CKEditor

• Twitter Bootstrap

• Font Awesome

• Modernizr

APEX Mobile

And More

0

In-house applications• Deploy to APEX instance in thecompany internal network• Access from outside the network via VPN

Public-facing applications• Deploy on APEX instance that isaccessible from the Internet• Deploy to hosted sites like the Oracle Cloud

Device

• Open apps in built-in web browser (Safari, Chrome.)• Add to Home Screen (icon, opens app in browser)

APEX Mobile Deployment

0

APEX Mobile

Learning Resource

BooksApress: Oracle APEX for Mobile Web Apps – Roel Hartman et alApress: Oracle APEX Themes (600 pages)– Paul Chester (2015)

Web Siteswww.w3schools.comGoogle

Learning OrganisationsOracle Cloud tutorialsApex Evangelists, Sibylline Solutions, Skillbuilders

00

Q&Apchester@sibyl.co.uk