UKOUG Development SIG Paul Chester

0 0 APEX Mobile

0 0 Introduction - Sibylline Occam started as Oracle ISV focused on HE sector HTML DB Support Desk App Apex 2.1 Apps Sibylline spin out to capitalise on Apex IPR Sibylline Oracles Prophetesses who uttered divine revelations

0 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.

The Evolving Web.

0 0 The Evolving Web Environment Different Devices

0 0 The Evolving Web Environment Tomorrow? Google Car Consumer Devices Smart TV

0 0 How do you to design and develop your UI for the multiple environments that have to be catered for? One option is Native Apps Or Hybrid Apps Another option is Web Apps The Evolving Web Web Design

0 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 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 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 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 0 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) The Evolving Web Web Design

0 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 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

Responsive Web Design.

Demo Responsive Web Design Boston Globe Oracle Cloud Sibylline Solutions

0 0 Demo Responsive Web Design

0 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 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 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 0 Responsive Design Adaptive Dedicated MobileDedicated Desktop

0 0 How is Adaptive Design Achieved? Device detection 1 application, 2 User Interfaces, 2 Themes Responsive Design Adaptive

jQuery Mobile.

0 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 0 jQuery Mobile What does that mean?

0 0 jQuery Mobile What does that mean?

0 0 jQuery Mobile What does that mean?

0 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

APEX Mobile.

0 0 APEX Mobile Architecture 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 0 Apex Page Rendering - StructureHeld in Apex Themes & Templates {CSS}- StyleLoaded from file system by Theme Templates Javascript- ActionLoaded from file system by Theme Templates APEX Mobile Architecture

0 0 APEX Mobile Demo Mobile v Desktop

0 0 APEX Mobile Demo Apex Device Detection - User Interface

0 0 APEX Mobile Demo Apex Themes & Templates

0 0 APEX Mobile Demo Security – Authentication and Authorisation

0 0 APEX Mobile Demo Rest Services

0 0 Demo – Apex 5

0 0 Grids and Layouts APEX Mobile - Responsive

0 0 Grids and Layouts – Built In APEX Mobile - Responsive

0 0 Fluid Grids APEX Mobile - Responsive

0 0 Fluid Grids – Built In APEX Mobile - Responsive

0 0 Media Queries APEX Mobile - Queries

0 0 Media Queries – Built In APEX Mobile - Queries

0 0 Flexible Images APEX Mobile - Responsive

0 0 Flexible Images – Built In APEX Mobile - Responsive

0 0 Viewport APEX Mobile - Responsive

0 0 Viewport – Built In APEX Mobile - Responsive

0 0 Device Detection APEX Mobile - Responsive

0 0 Device Detection – Built In APEX Mobile - Responsive

0 0 jQuery Mobile APEX Mobile - Responsive

0 0 jQuery Mobile – Built In APEX Mobile - Responsive

0 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 0 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 Device Open apps in built-in web browser (Safari, Chrome.) Add to Home Screen (icon, opens app in browser) APEX Mobile Deployment

0 0 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 Google Learning Organisations Oracle Cloud tutorials Apex Evangelists, Sibylline Solutions, Skillbuilders

Q & A