Transcript APEX Mobile - Responsive

UKOUG Development SIG
Paul Chester
0
APEX Mobile
0
Introduction - Sibylline
• 1992 - Occam started
as Oracle ISV
• 2000 - focused on HE
sector
• 2004 - HTML DB
Support Desk App
0
• 2005 - Apex 2.1 Apps
Sibylline Oracles
• 2013 - Sibylline spin
out to capitalise on
Prophetesses who uttered divine revelations
Apex IPR
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 the0 web.
The Evolving Web
.
0
The Evolving Web
Environment
Different Devices
0
The Evolving Web
Environment
Tomorrow?
Google
Car
Consumer Devices
0
Smart TV
The Evolving Web
Web Design
How do you to design and develop your UI for the
multiple environments that have to be catered for?
One option is0 Native Apps
Or Hybrid Apps
Another option is Web Apps
The Evolving Web
Web Design
What are web apps?
• Browser based application that runs in built-in
browser on device via URL
• Increasingly popular way to deliver content and
0
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
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)
0 on device compared to
Reduced security requirements
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
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
0
• 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
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
0
(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
Options for Multiple Environments
• Adaptive Design
Creating 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)
0
The Evolving Web
Web Design
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
0
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.
Evolving Web
Mobile Web Apps in APEX
• APEX applications generally work
on any modern Mobile device, like
iPhones, Androids, etc
• APEX had built in support for both
Responsive and Adaptive Design
0
• 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
Responsive Web Design
.
0
Demo Responsive Web
Design
Boston Globe
www.bostonglobe.com
0
Oracle Cloud
www.cloud.oracle.com
Sibylline Solutions
www.sibyl.co.uk
Demo
Responsive Web Design
0
Responsive Design
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
0
• 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
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 UI0level
• 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
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
0 you to specify which CSS style sheet
• Media queries & Break Points allow
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
Adaptive
Dedicated Mobile
Dedicated Desktop
0
Responsive Design
Adaptive
How is Adaptive Design Achieved?
• Device detection
• 1 application, 2 User Interfaces, 2 Themes
0
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
0
• 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
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
0
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
APEX Mobile
.
0
APEX Mobile
Architecture
0
• 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
APEX Mobile
Architecture
Apex Page Rendering
0
• <HTML/> - Structure Held in Apex Themes & Templates
• {CSS}
- Style
• Javascript - Action
Loaded from file system by Theme Templates
Loaded from file system by Theme Templates
APEX Mobile
Demo
Mobile v Desktop
0
APEX Mobile
Demo
Apex Device Detection - User Interface
0
APEX Mobile
Demo
Apex Themes & Templates
0
APEX Mobile
Demo
Security – Authentication and Authorisation
0
APEX Mobile
Demo
Rest Services
0
Demo – Apex 5
0
APEX Mobile - Responsive
Grids and Layouts
0
APEX Mobile - Responsive
Grids and Layouts – Built In
0
APEX Mobile - Responsive
Fluid Grids
0
APEX Mobile - Responsive
Fluid Grids – Built In
0
APEX Mobile - Responsive
Media Queries
@media Queries
0
APEX Mobile - Responsive
Media Queries – Built In
@media Queries
0
APEX Mobile - Responsive
Flexible Images
0
APEX Mobile - Responsive
Flexible Images – Built In
0
APEX Mobile - Responsive
Viewport
0
APEX Mobile - Responsive
Viewport – Built In
0
APEX Mobile - Responsive
Device Detection
0
APEX Mobile - Responsive
Device Detection – Built In
0
APEX Mobile - Responsive
jQuery Mobile
0
APEX Mobile - Responsive
jQuery Mobile – Built In
0
APEX Mobile
And More
•
•
•
•
•
•
•
•
Easy Web-Service integration eg REST API
JQuery Mobile Themeroller
Adobe’s Kuler tool (colour schemes)
AnyCharts (Flash & HTML5)
and AnyGantt
0
CKEditor
Twitter Bootstrap
Font Awesome
Modernizr
APEX Mobile Deployment
In-house applications
• Deploy to APEX instance in the
company internal network
• Access from outside the network via VPN
Public-facing applications
• Deploy on APEX instance that is
accessible from the Internet
• Deploy to hosted sites like the Oracle Cloud
0
Device
• Open apps in built-in web browser (Safari, Chrome.)
• Add to Home Screen (icon, opens app in browser)
APEX Mobile
Learning Resource
Books
Apress: Oracle APEX for Mobile Web Apps – Roel Hartman et al
Apress: Oracle APEX Themes (600 pages)– Paul Chester (2015)
Web Sites
www.w3schools.com
Google
0
Learning Organisations
Oracle Cloud tutorials
Apex Evangelists, Sibylline Solutions, Skillbuilders
Q&A
0
[email protected]