0 0 0 0 ukoug development sig paul chester. 0 0 apex mobile
TRANSCRIPT
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