1. 0 0 0 0 UKOUG Development SIG Paul Chester

2. 0 0 APEX Mobile

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

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

5. 0 0 0 0 The Evolving Web.

6. 0 0 The Evolving Web Environment Different Devices

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

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

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

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

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

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

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

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

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

16. 0 0 0 0 Responsive Web Design.

17. 0 0 0 0 Demo Responsive Web Design Boston Globe www.bostonglobe.com Oracle Cloud www.cloud.oracle.com Sibylline Solutions www.sibyl.co.uk www.bostonglobe.com www.cloud.oracle.com www.sibyl.co.uk

18. 0 0 Demo Responsive Web Design

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

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

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

22. 0 0 Responsive Design Adaptive Dedicated MobileDedicated Desktop

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

24. 0 0 0 0 jQuery Mobile.

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

26. 0 0 jQuery Mobile What does that mean?

27. 0 0 jQuery Mobile What does that mean?

28. 0 0 jQuery Mobile What does that mean?

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

30. 0 0 0 0 APEX Mobile.

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

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

33. 0 0 APEX Mobile Demo Mobile v Desktop

34. 0 0 APEX Mobile Demo Apex Device Detection - User Interface

35. 0 0 APEX Mobile Demo Apex Themes & Templates

36. 0 0 APEX Mobile Demo Security – Authentication and Authorisation

37. 0 0 APEX Mobile Demo Rest Services

38. 0 0 Demo – Apex 5

39. 0 0 Grids and Layouts APEX Mobile - Responsive

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

41. 0 0 Fluid Grids APEX Mobile - Responsive

42. 0 0 Fluid Grids – Built In APEX Mobile - Responsive

43. 0 0 Media Queries APEX Mobile - Responsive @media Queries

44. 0 0 Media Queries – Built In APEX Mobile - Responsive @media Queries

45. 0 0 Flexible Images APEX Mobile - Responsive

46. 0 0 Flexible Images – Built In APEX Mobile - Responsive

47. 0 0 Viewport APEX Mobile - Responsive

48. 0 0 Viewport – Built In APEX Mobile - Responsive

49. 0 0 Device Detection APEX Mobile - Responsive

50. 0 0 Device Detection – Built In APEX Mobile - Responsive

51. 0 0 jQuery Mobile APEX Mobile - Responsive

52. 0 0 jQuery Mobile – Built In APEX Mobile - Responsive

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

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

55. 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 www.w3schools.com Google Learning Organisations Oracle Cloud tutorials Apex Evangelists, Sibylline Solutions, Skillbuilders

56. 0 0 0 0 Q & A pchester@sibyl.co.uk