Keep me moving goin mobile

Christian Rokitta
Christian RokittaOracle Database & APEX Developer, APEX UI Designer, Oracle ACE
Keep me moving
Goin’ Mobile
with Universal Theme
and Beyond
Christian Rokitta
Bonn 2019
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
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 of 36
Demand
Convenience
user & developer
Topics
5 of 36
Universal Theme Tools UX Discussion
Keep me moving   goin mobile
Universal Theme
Mobile Patterns (5.1+)
Navigation
Headers and Footers
Data Entry
Touch Gestures
Mobile Components
7 of 36
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 of 36
Universal Theme
Mobile Patterns – Navigation - User Interface Details
Universal Theme
Mobile Patterns – Navigation - Template Options
10 of 36
Universal Theme
Mobile Patterns – Data Entry
UI enhancements
UX challenges
11 of 36
Universal Theme
Mobile Patterns – Data Entry
text
12 of 36
Universal Theme
Mobile Patterns – Data Entry
email
13 of 36
Universal Theme
Mobile Patterns – Data Entry
date
14 of 36
$("input.html5-date").attr("type","date");
Universal Theme
Mobile Patterns – Data Entry
number
15 of 36
$("input.html5-tel").attr("type", "tel");
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
Universal Theme
Mobile Patterns – optimized Components
17 of 36
Universal Theme
Responsive Classes
18 of 36
Challenges
19 of 36
Universal Theme
Responsive?!
20 of 36
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
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
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?!
Universal Theme
What I’m missing2
24 of 36
Pagination in
Column Toogle and
Reflow Report
was available in jQuery Mobile
Universal Theme
What I’m missing3
25 of 36
Listview
Dynamic Load at
EndOfList/Scroll event
Infinite Scrolling
again: was available in jQuery Mobile
Universal Theme
What I’m missing4
26 of 36
Listview
Dynamic Load at
EndOfList/Scroll event
Infinite Scrolling
again: was available in jQuery Mobile
Beyond
Universal Theme
27 of 36
Keep me moving   goin mobile
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
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
PWA Browser Support
31 of 36
https://caniuse.com/#feat=serviceworkers
PWA Browser Support - Mobile
32 of 36
https://caniuse.com/#feat=serviceworkers
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">
PWA Concepts
Manifest
34 of 36
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"
}
PWA Concepts
Manifest - display
36 of 36
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
PWA Concepts
Add to Home Screen
38 of 36
Session:
Progressive Web Apps mit APEX
Till Albert MT AG
9. Mai, 15:15 – 16:00
Kameha Spirit
39 of 36
Bonn 2019
Blog: APEX as a PWA
Vincent Morneau - The Complete Guide
40 of 36
http://vmorneau.me/apex-pwa/
Q&A
www.iadvise.eu
www.apexsmartpivot.com
rokitta.blogspot.com
@crokitta @iadvise_live @apexsmartpivot
www.linkedin.com/in/rokit
1 of 41

More Related Content

Similar to Keep me moving goin mobile(20)

More from Christian Rokitta(16)

Hitchhiker's guide to the Universal ThemeHitchhiker's guide to the Universal Theme
Hitchhiker's guide to the Universal Theme
Christian Rokitta892 views
Browser Developer Tools for APEX DevelopersBrowser Developer Tools for APEX Developers
Browser Developer Tools for APEX Developers
Christian Rokitta1.1K views
Bootstrapify Universal ThemeBootstrapify Universal Theme
Bootstrapify Universal Theme
Christian Rokitta2K views
Plugins unpluggedPlugins unplugged
Plugins unplugged
Christian Rokitta665 views
Challenges going mobileChallenges going mobile
Challenges going mobile
Christian Rokitta1.2K views
APEX & Cookie MonsterAPEX & Cookie Monster
APEX & Cookie Monster
Christian Rokitta2K views
5 x HTML5 worth using in APEX (5)5 x HTML5 worth using in APEX (5)
5 x HTML5 worth using in APEX (5)
Christian Rokitta3.1K views
Oracle APEX URLs Untangled & SEOptimizedOracle APEX URLs Untangled & SEOptimized
Oracle APEX URLs Untangled & SEOptimized
Christian Rokitta6K views
Browser Developer ToolsBrowser Developer Tools
Browser Developer Tools
Christian Rokitta2.1K views
"Native" Apps with APEX and PhoneGap"Native" Apps with APEX and PhoneGap
"Native" Apps with APEX and PhoneGap
Christian Rokitta6.7K views
Apex & jQuery MobileApex & jQuery Mobile
Apex & jQuery Mobile
Christian Rokitta4.2K views
Responsive Web Design & APEX Theme 25Responsive Web Design & APEX Theme 25
Responsive Web Design & APEX Theme 25
Christian Rokitta5.8K views
Confessions of an APEX Design GeekConfessions of an APEX Design Geek
Confessions of an APEX Design Geek
Christian Rokitta1.7K views
Oracle APEX & PhoneGapOracle APEX & PhoneGap
Oracle APEX & PhoneGap
Christian Rokitta5.8K views

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
  • 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
  • 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
  • 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">
  • 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

  1. Navigation Bar: std drop down. Might want to change
  2. 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.
  3. 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.
  4. 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.
  5. 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.
  6. 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.
  7. 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.
  8. 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.
  9. 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.