Keep me moving goin mobile
•Download as PPTX, PDF•
2 likes•286 views
Using APEX for Mobile Web Applications has always lead to a limited user experience, compared to native mobile applications. The use of jQuery Mobile was a valid approach to overcome this, but had it’s difficulties and booby-traps for the developers. Recent enhancements to Universal Theme in APEX version 18 improved the UX. Combine this with the latest PWA features to provide a better user experience, mobile versions of APEX web applications are becoming much more user friendly and native-like. I will explain the mobile functionality of APEX and Universal Theme, like mobile specific components and templates, touch gestures based dynamic actions, and show a real life public facing (mobile) web application. Beyond standard APEX functionality, I will show how to improve the mobile user experience with transition effects and PWA features like off-line handling, shortcut icons and notifications. Keep’s you moving …
Recommended
Recommended
More Related Content
Similar to Keep me moving goin mobile
Similar to Keep me moving goin mobile (20)
More from Christian Rokitta
More from Christian Rokitta (16)
Recently uploaded
Recently uploaded (20)
Keep me moving goin mobile
- 1. Keep me moving Goin’ Mobile with Universal Theme and Beyond Christian Rokitta Bonn 2019
- 2. 1993 today 1996 1999 2009 20152010 2011 2014 Oracle Database Version 6 Hoechst AG Clinical Research Frankfurt, Germany Custom Development Utrecht, Netherlands <HTML> Oracle Consultant/Product Development Manager Utrecht, Netherlands mod_plsql Oracle Web Toolkit JavaScript(); HTML DB APEX Speaker Oracle Database & Application Express Consultant Utrecht, Netherlands {CSS} proud member of APEX UI Customization Reporting Plug-in Christian Rokitta
- 3. Out in the woods Or in the city It's all the same to me When I'm driving free The world's my home When I'm mobile … Keep me moving Goin' Mobile / Who’s Next The Who
- 4. 4 of 36 Demand Convenience user & developer
- 5. Topics 5 of 36 Universal Theme Tools UX Discussion
- 7. Universal Theme Mobile Patterns (5.1+) Navigation Headers and Footers Data Entry Touch Gestures Mobile Components 7 of 36
- 8. Universal Theme Mobile Patterns – Page Layout • Navigation • Top Menu: SM, MD & LG screen width • Bottom Menu: XXS, XS screen width • Navigation Bar • Header • Breadcrumb Region Position • Button Region Template • Footer • Button Region Template 8 of 36
- 9. 9 of 36 Universal Theme Mobile Patterns – Navigation - User Interface Details
- 10. Universal Theme Mobile Patterns – Navigation - Template Options 10 of 36
- 11. Universal Theme Mobile Patterns – Data Entry UI enhancements UX challenges 11 of 36
- 12. Universal Theme Mobile Patterns – Data Entry text 12 of 36
- 13. Universal Theme Mobile Patterns – Data Entry email 13 of 36
- 14. Universal Theme Mobile Patterns – Data Entry date 14 of 36 $("input.html5-date").attr("type","date");
- 15. Universal Theme Mobile Patterns – Data Entry number 15 of 36 $("input.html5-tel").attr("type", "tel");
- 16. Universal Theme Mobile Patterns – Touch Gestures 16 of 36 Exposed by predefined dynamic actions: using event data this.data.pointerType: type of pointer (mouse or touch) • tap this.data.tapCount • press • swipe this.data.offsetDirection (2 left, 4 right), this.data.distance • pan this.data.offsetDirection (2 left, 4 right, 8 up, 16 down), this.data.isFinal
- 17. Universal Theme Mobile Patterns – optimized Components 17 of 36
- 18. Universal Theme Responsive Classes 18 of 36
- 21. Universal Theme Client Side vs Server Side • Universal Theme • Responsive Grid • Utility Classes • Server Side Device Detection? • Who are you? – client device Categorizr for APEX (desktop, tablet, mobile) http://rokitta.blogspot.com/2012/04/are-you-client-device-categorizr-for.html • How are you? - Categorizr for APEX part 2: the Plug-in (viewportWidth, g_viewportHeight, g_viewportOrientation) http://rokitta.blogspot.com/2013/05/how-are-you-categorizr-for-apex-part-2.html 21 of 36
- 22. Universal Theme Reduce Traffic use AJAX instead of Page rendering/processing cycle • Declarative: Dynamic Action some region types are not refreshable with build in dynamic action: PL/SQL Region, ListView, … • JavaScript API: apex.server.process 22 of 36
- 23. Universal Theme What I’m missing1 23 of 36 Page Transitions It’s possible to add your own custom CSS and jQuery code i.c.w. build in Touch Gestures Dynamic Actions. Demo?!
- 24. Universal Theme What I’m missing2 24 of 36 Pagination in Column Toogle and Reflow Report was available in jQuery Mobile
- 25. Universal Theme What I’m missing3 25 of 36 Listview Dynamic Load at EndOfList/Scroll event Infinite Scrolling again: was available in jQuery Mobile
- 26. Universal Theme What I’m missing4 26 of 36 Listview Dynamic Load at EndOfList/Scroll event Infinite Scrolling again: was available in jQuery Mobile
- 27. Beyond Universal Theme 27 of 36
- 29. APEX vs PWA vs Hybrid vs Native • APEX -> online first • PWA (Progressive Web Apps) -> offline first • Hybrid -> AppStore, WebView, advanced device API’s, files on device • Native -> OS specific development 29 of 36
- 30. Progressive Web Apps (PWA) • Fullscreen mobile experience • Shortcut on Device • Caching : Faster • Collection of Browser API’s • Service Workers • Online/offline detection • (push) Notifications (using Firebase) • Local storage • … 30 of 36
- 31. PWA Browser Support 31 of 36 https://caniuse.com/#feat=serviceworkers
- 32. PWA Browser Support - Mobile 32 of 36 https://caniuse.com/#feat=serviceworkers
- 33. PWA Concepts Manifest 33 of 36 { "short_name": "Goin", "name": "Goin Mobile", "icons": [ { "src": "/c/goin/img/128/mobile_comment.png", "type": "image/png", "sizes": "128x128" }, { "src": "/c/goin/img/512/mobile_comment.png", "type": "image/png", "sizes": "512x512" } ], "start_url": "/ords/f?p=goin:home", "background_color": "#DF1174", "display": "standalone", "scope": "/ords/", "theme_color": "#DF1174" } <link rel="manifest" href="/goin.json">
- 34. PWA Concepts Manifest 34 of 36
- 35. PWA Concepts Manifest • short_name and/or name • icons • start_url • background_color • display • scope • theme_color • orientation 35 of 36 { "short_name": "Goin", "name": "Goin Mobile", "icons": [ { "src": "/c/goin/img/128/mobile_comment.png", "type": "image/png", "sizes": "128x128" }, { "src": "/c/goin/img/512/mobile_comment.png", "type": "image/png", "sizes": "512x512" } ], "start_url": "/ords/f?p=goin:home", "background_color": "#DF1174", "display": "standalone", "scope": "/ords/", "theme_color": "#DF1174" }
- 36. PWA Concepts Manifest - display 36 of 36
- 37. PWA Concepts Add to Home Screen - aka web app install prompt • web app is not already installed • meets a user engagement heuristic currently: the user has interacted with the domain for at least 30 seconds • includes a web app manifest • served over HTTPS (required for service workers) • has registered a service worker with a fetch event handler 37 of 36
- 38. PWA Concepts Add to Home Screen 38 of 36
- 39. Session: Progressive Web Apps mit APEX Till Albert MT AG 9. Mai, 15:15 – 16:00 Kameha Spirit 39 of 36 Bonn 2019
- 40. Blog: APEX as a PWA Vincent Morneau - The Complete Guide 40 of 36 http://vmorneau.me/apex-pwa/
Editor's Notes
- Navigation Bar: std drop down. Might want to change
- The web app manifest is a simple JSON file that tells the browser about your web application and how it should behave when 'installed' on the user's mobile device or desktop. Having a manifest is required by Chrome to show the Add to Home Screen prompt.
- The web app manifest is a simple JSON file that tells the browser about your web application and how it should behave when 'installed' on the user's mobile device or desktop. Having a manifest is required by Chrome to show the Add to Home Screen prompt.
- short_name and/or name You must provide at least the short_name or name property. If both are provided, short_name is used on the user's home screen, launcher, or other places where icons When a user adds your site to their home screen, you can define a set of icons for the browser to use. These icons are used in places like the home screen, app launcher, task switcher, splash screen, etc. space may be limited. name is used in the app install prompt. start_url The start_url tells the browser where your application should start when it is launched, and prevents the app from starting on whatever page the user was on when they added your app to their home screen. scope The scope defines the set of URLs that the browser considers to be within your app, and is used to decide when the user has left the app. The scope controls the URL structure that encompasses all the entry and exit points in your web app. Your start_url must reside within the scope. theme_color The theme_color sets the color of the tool bar, and may be reflected in the app's preview in task switchers.
- short_name and/or name You must provide at least the short_name or name property. If both are provided, short_name is used on the user's home screen, launcher, or other places where icons When a user adds your site to their home screen, you can define a set of icons for the browser to use. These icons are used in places like the home screen, app launcher, task switcher, splash screen, etc. space may be limited. name is used in the app install prompt. start_url The start_url tells the browser where your application should start when it is launched, and prevents the app from starting on whatever page the user was on when they added your app to their home screen. scope The scope defines the set of URLs that the browser considers to be within your app, and is used to decide when the user has left the app. The scope controls the URL structure that encompasses all the entry and exit points in your web app. Your start_url must reside within the scope. theme_color The theme_color sets the color of the tool bar, and may be reflected in the app's preview in task switchers.
- short_name and/or name You must provide at least the short_name or name property. If both are provided, short_name is used on the user's home screen, launcher, or other places where icons When a user adds your site to their home screen, you can define a set of icons for the browser to use. These icons are used in places like the home screen, app launcher, task switcher, splash screen, etc. space may be limited. name is used in the app install prompt. start_url The start_url tells the browser where your application should start when it is launched, and prevents the app from starting on whatever page the user was on when they added your app to their home screen. scope The scope defines the set of URLs that the browser considers to be within your app, and is used to decide when the user has left the app. The scope controls the URL structure that encompasses all the entry and exit points in your web app. Your start_url must reside within the scope. theme_color The theme_color sets the color of the tool bar, and may be reflected in the app's preview in task switchers.
- short_name and/or name You must provide at least the short_name or name property. If both are provided, short_name is used on the user's home screen, launcher, or other places where icons When a user adds your site to their home screen, you can define a set of icons for the browser to use. These icons are used in places like the home screen, app launcher, task switcher, splash screen, etc. space may be limited. name is used in the app install prompt. start_url The start_url tells the browser where your application should start when it is launched, and prevents the app from starting on whatever page the user was on when they added your app to their home screen. scope The scope defines the set of URLs that the browser considers to be within your app, and is used to decide when the user has left the app. The scope controls the URL structure that encompasses all the entry and exit points in your web app. Your start_url must reside within the scope. theme_color The theme_color sets the color of the tool bar, and may be reflected in the app's preview in task switchers.
- short_name and/or name You must provide at least the short_name or name property. If both are provided, short_name is used on the user's home screen, launcher, or other places where icons When a user adds your site to their home screen, you can define a set of icons for the browser to use. These icons are used in places like the home screen, app launcher, task switcher, splash screen, etc. space may be limited. name is used in the app install prompt. start_url The start_url tells the browser where your application should start when it is launched, and prevents the app from starting on whatever page the user was on when they added your app to their home screen. scope The scope defines the set of URLs that the browser considers to be within your app, and is used to decide when the user has left the app. The scope controls the URL structure that encompasses all the entry and exit points in your web app. Your start_url must reside within the scope. theme_color The theme_color sets the color of the tool bar, and may be reflected in the app's preview in task switchers.
- short_name and/or name You must provide at least the short_name or name property. If both are provided, short_name is used on the user's home screen, launcher, or other places where icons When a user adds your site to their home screen, you can define a set of icons for the browser to use. These icons are used in places like the home screen, app launcher, task switcher, splash screen, etc. space may be limited. name is used in the app install prompt. start_url The start_url tells the browser where your application should start when it is launched, and prevents the app from starting on whatever page the user was on when they added your app to their home screen. scope The scope defines the set of URLs that the browser considers to be within your app, and is used to decide when the user has left the app. The scope controls the URL structure that encompasses all the entry and exit points in your web app. Your start_url must reside within the scope. theme_color The theme_color sets the color of the tool bar, and may be reflected in the app's preview in task switchers.