1 / 56

UKOUG Development SIG

UKOUG Development SIG. Paul Chester. APEX Mobile. 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

cade-newman
Download Presentation

UKOUG Development SIG

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. UKOUG Development SIG Paul Chester

  2. APEX Mobile

  3. 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. 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. The Evolving Web.

  6. The Evolving Web Environment • Different Devices

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

  8. 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 is Native Apps Or Hybrid Apps Another option is Web Apps

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

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

  11. 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 •Mobile web apps require permanent Internet connection • Using offline web application caching and platforms like PhoneGapprovides ways to address these limitations

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

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

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

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

  16. Responsive Web Design.

  17. Demo Responsive Web DesignBoston Globewww.bostonglobe.comOracle Cloudwww.cloud.oracle.comSibylline Solutionswww.sibyl.co.uk

  18. Demo Responsive Web Design

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

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

  21. 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 Media queries & Break Pointsallow 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

  22. Responsive DesignAdaptive Dedicated Mobile Dedicated Desktop

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

  24. jQuery Mobile.

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

  27. jQuery Mobile What does that mean?

  28. jQuery Mobile What does that mean?

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

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

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

  33. APEX MobileDemo Mobile v Desktop

  34. APEX MobileDemo Apex Device Detection - User Interface

  35. APEX MobileDemo Apex Themes & Templates

  36. APEX MobileDemo Security – Authentication and Authorisation

  37. APEX MobileDemo Rest Services

  38. Demo – Apex 5

  39. APEX Mobile - Responsive Grids and Layouts Flexible Grids

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

  41. APEX Mobile - Responsive Fluid Grids

  42. APEX Mobile - Responsive Fluid Grids – Built In

  43. APEX Mobile - Responsive Media Queries @media Queries

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

  45. APEX Mobile - Responsive Flexible Images

  46. APEX Mobile - Responsive Flexible Images – Built In

  47. APEX Mobile - Responsive Viewport

  48. APEX Mobile - Responsive Viewport – Built In

  49. APEX Mobile - Responsive Device Detection

  50. APEX Mobile - Responsive Device Detection – Built In

More Related