Universal Theme
vs.
APEX mobile
Davide Groppuso & Steven Grzbielok:
15.11.2016 | DOAG 2016
 Davide Groppuso, Berater APEX Development
 Geboren 1995, lebt in Düsseldorf
 Arbeitet seit Juni 2014 bei der MT AG
 Zuletzt maßgeblich bei der Ablösung eines Lucom-Systems mit
APEX beteiligt (u.a. Integration mit SAP, SSO)
2
Über mich
 Steven Grzbielok, Berater APEX Development
 Geboren 1994, lebt in Frankfurt am Main
 Arbeitet seit August 2014 bei der MT AG
 Bachelor of Science in Wirtschaftsinformatik
 Zuletzt vorrangig mit Oberflächendesign (z.B. Einführung einer
APEX-Landingpage, UI-Workshop…) aber auch Serveradministration
und Virtualisierung beschäftigt
3
Über mich
Im Überblick
Technologie-orientiert
Branchen-unabhängig
Hauptsitz
Ratingen
240
Beschäftigte
Gründungsjahr
1994
Niederlassung
Frankfurt am Main
Ausbildungs-
betrieb
Inhabergeführte
Aktiengesellschaft
Zertifizierter
Partner von
Oracle,
Microsoft
und SAP
 Überblick
 Universal Theme
 APEX mobile
 Fazit
 Ausblick
 Demo
5
Agenda
Warum mobile Anwendungen entwickeln?
„If you don‘t have a mobile strategy, you don‘t have a
future strategy.“
(Eric Schmidt, Google Executive Chairman)
6
 Mehr als jeder zweite Mitarbeiter arbeitet zumindest teilweise mobil
 Zentrale Anforderung an IT-Abteilungen: Mobil verfügbare Geschäftsprozesse
 Erhöhte Flexibilität
 Schnellere Entscheidungsprozesse  höhere Effizienz
 Ortsunabhängiger Zugriff auf Anwendungen
 Erhöhte Zufriedenheit bei Nutzern
 Mehr Komfort
Warum mobile Anwendungen?
Überblick
http://idc.de/de/ueber-idc/press-center/56517-idc-studie-deutsche-unternehmen-setzen-auf-mobile-apps-zur-verbesserung-ihrer-geschaftsprozesse 7
 Ältere APEX Versionen: Viele verschiedene Themes
 APEX 5:
8
Überblick
Responsive für Desktop und mobile:
42: Universal Theme
(Standard in APEX 5)
Mobile only:
51: APEX mobile
(Spezielle mobile Komponenten, jedoch
fehlen Desktop Funktionen)
(42) Universal Theme
One Size fits All?
 Komponenten für Desktop und mobile Geräte out of the box
 Responsive Design
 Gute Darstellung auf Desktop und mobilen Geräten
 Theme Roller
 Farbliche Anpassungen (z.B. Corporate Design)
 Anlehnung an das Material Design
 Unterstützt Icon Fonts (Font Awesome)
 Unterstützt CSS3 und HTML5
Selbst ausprobieren auf https://apex.oracle.com/ut
10
One Size fits All
Universal Theme
 Navigation passt sich automatisch an
 Texte und Icons werden abhängig von der Bildschirmgröße ein- und
ausgeblendet
 Hamburger-Icon zum Ein- und Ausblenden (unabhängig vom
Bildschirm)
 Schriftgröße passt sich der Bildschirmgröße an
 Die meisten Komponenten sind ebenfalls Responsive-Design-fähig
 Ausnahmen vorhanden!
 Anordnung der Komponenten variiert je nach Bildschirmgröße
11
Responsives Verhalten
12
Wie verändert sich das Design auf unterschiedlichen Bildschirmgrößen?
Responsives Verhalten
13
Überarbeitetes Grid Layout
 12 Spalten pro Seite bzw. Region
 Spalten je Region/Item automatisch oder statisch definierbar
 Spaltenzahl variiert aufgrund der Bildschirmgröße
 Regionen und Items „springen“ in die nächste Zeile
14
Überarbeitetes Grid Layout
 Regions
 Classic Report
 Interactive Report
 Tabular Form
 Map Chart
 Region Display Selector
 Tree
 Modale Dialoge
 Gut nutzbar, werden jedoch u.U. nicht als solche wahrgenommen
 Verzögerung(300ms) bei Antippen von Komponenten
 Standard bei mobiler Entwicklung zur Vermeidung von
versehentlichen Klicks durch Touch Gesten
 Theme Roller integriert nutzbar
15
Nur im Universal Theme enthalten
16
Ergebnisse unter Android 6.0
Mangelhafte UX
Interactive Report Tabular Forms Map Chart
(Not supported)
17
Mangelhafte UX
18
Oracle JET
Die Zukunft des Universal Theme
Desktop
Mobile
19
Interactive Grid
Die Zukunft des Universal Theme
Desktop
Mobile
20
Master Detail Detail
Die Zukunft des Universal Theme
APEX mobile
Lohnt sich der Mehraufwand?
 Einführung 2012 mit APEX 4.2
 Verwendet jQuery mobile
 Speziell für mobile Endgeräte entwickelt
 Fokus auf Stabilität und Performance
 Leichtgewichtiger als das UT (weniger CSS, HTML und JavaScript)
 Geringere Ladezeiten auch bei schlechtem Empfang
 Ajax-Seitenaufruf
 „App-Gefühl“
APEX mobile
22
23
Zusätzliche Features
APEX mobile
Column Toggle ReportReflow ReportList View
24
Nur in APEX mobile enthalten
 HTML 5 Formelemente
 Nutzt Eingabemethode des mobilen Betriebssystems
 Z.B. Datepicker, Kamera
 Touch-optimierte Elemente (z.B. Slider, Kippschalter)
 Im UT ohne JavaScript-Programmierung nicht nutzbar
 Dynamic Actions können durch Touch Events ausgelöst werden
 Fixierter Footer
25
Hier liegt die Grenze
APEX mobile
 Hohe Spaltenzahl im Querformat
 Alternative: Column Toggle Report
 Formatierung im Hochformat
 Alternative: List View
 Suchfunktion nur für eine Spalte
 Alternative: Unsichtbare Suchspalte
Reflow Report
List View
26
Die Zukunft von APEX mobile
 Oracle JET Integration
 Integration neuer jQuery mobile Versionen
 Theme Roller Integration
Fazit
Nehme ich nun…
oder ?
 Anwendungsfall beachten
 Eingesetzte Komponenten berücksichtigen
 Universal Theme
 Mobile friendly
 Eine Anwendung für alle Geräte
 Design im Fokus
 Theme Roller
 APEX mobile
 Mobile only
 Separate Desktopanwendung nötig  Mehraufwand
 Funktionalität im Fokus  Usability
 Bessere Performance (Seitenaufbau bis zu 1 Sek. schneller)
 Nativeres Look&Feel
Universal Theme oder APEX mobile?
28
 Stärkere Weiterentwicklung des Universal Themes
 Neue Features in APEX mobile zunächst nicht verfügbar
 Jedoch auch im UT teils kaum mobil nutzbar
 Empfehlung bleibt bestehen
 Mobile-Touch besser im UT unterstützt
 Z.B. Durch Carousel „swipen“
 IR soll responsiver werden
29
Und was ist mit APEX 5.1?
30
Mobile light – Ein Praxisbeispiel aus APEX 4.2
Alternative
 Desktop-Anwendung + funktionsbeschränkte mobile App
 Desktop for all & mobile for manager
 Urlaubsanträge via Desktop einreichen
 Genehmigen auch vom Smartphone möglich
 Mobile interface
 In APEX 5.0 nur UT
Weitere Vorträge am 15.11.
Davide Groppuso
Berater APEX Development
Telefon: +49 2102 30961 – 0
davide.groppuso@mt-ag.com
@dgroppuso
Steven Grzbielok
Berater APEX Development
Telefon: +49 2102 30961 – 0
steven.grzbielok@mt-ag.com
@sgrzbielok
ROADSHOW
„VON FORMS NACH APEX“
24.01.2017 Hamburg
25.01.2017 Düsseldorf
26.01.2017 Frankfurt
27.01.2017 München
9.-11. Mai 2017
in Berlin
apex.doag.org
Bis 21. November 2016
Vortrag einreichen!
Zu den verschiedenen Optionen finden Sie hier Demos:
https://apex.mt-ag.com/apex/f?p=UAM
oder einfach folgenden QR-Code einscannen:
34
Testen Sie selbst!

Universal Theme vs. APEX mobile

  • 1.
    Universal Theme vs. APEX mobile DavideGroppuso & Steven Grzbielok: 15.11.2016 | DOAG 2016
  • 2.
     Davide Groppuso,Berater APEX Development  Geboren 1995, lebt in Düsseldorf  Arbeitet seit Juni 2014 bei der MT AG  Zuletzt maßgeblich bei der Ablösung eines Lucom-Systems mit APEX beteiligt (u.a. Integration mit SAP, SSO) 2 Über mich
  • 3.
     Steven Grzbielok,Berater APEX Development  Geboren 1994, lebt in Frankfurt am Main  Arbeitet seit August 2014 bei der MT AG  Bachelor of Science in Wirtschaftsinformatik  Zuletzt vorrangig mit Oberflächendesign (z.B. Einführung einer APEX-Landingpage, UI-Workshop…) aber auch Serveradministration und Virtualisierung beschäftigt 3 Über mich
  • 4.
    Im Überblick Technologie-orientiert Branchen-unabhängig Hauptsitz Ratingen 240 Beschäftigte Gründungsjahr 1994 Niederlassung Frankfurt amMain Ausbildungs- betrieb Inhabergeführte Aktiengesellschaft Zertifizierter Partner von Oracle, Microsoft und SAP
  • 5.
     Überblick  UniversalTheme  APEX mobile  Fazit  Ausblick  Demo 5 Agenda
  • 6.
    Warum mobile Anwendungenentwickeln? „If you don‘t have a mobile strategy, you don‘t have a future strategy.“ (Eric Schmidt, Google Executive Chairman) 6
  • 7.
     Mehr alsjeder zweite Mitarbeiter arbeitet zumindest teilweise mobil  Zentrale Anforderung an IT-Abteilungen: Mobil verfügbare Geschäftsprozesse  Erhöhte Flexibilität  Schnellere Entscheidungsprozesse  höhere Effizienz  Ortsunabhängiger Zugriff auf Anwendungen  Erhöhte Zufriedenheit bei Nutzern  Mehr Komfort Warum mobile Anwendungen? Überblick http://idc.de/de/ueber-idc/press-center/56517-idc-studie-deutsche-unternehmen-setzen-auf-mobile-apps-zur-verbesserung-ihrer-geschaftsprozesse 7
  • 8.
     Ältere APEXVersionen: Viele verschiedene Themes  APEX 5: 8 Überblick Responsive für Desktop und mobile: 42: Universal Theme (Standard in APEX 5) Mobile only: 51: APEX mobile (Spezielle mobile Komponenten, jedoch fehlen Desktop Funktionen)
  • 9.
  • 10.
     Komponenten fürDesktop und mobile Geräte out of the box  Responsive Design  Gute Darstellung auf Desktop und mobilen Geräten  Theme Roller  Farbliche Anpassungen (z.B. Corporate Design)  Anlehnung an das Material Design  Unterstützt Icon Fonts (Font Awesome)  Unterstützt CSS3 und HTML5 Selbst ausprobieren auf https://apex.oracle.com/ut 10 One Size fits All Universal Theme
  • 11.
     Navigation passtsich automatisch an  Texte und Icons werden abhängig von der Bildschirmgröße ein- und ausgeblendet  Hamburger-Icon zum Ein- und Ausblenden (unabhängig vom Bildschirm)  Schriftgröße passt sich der Bildschirmgröße an  Die meisten Komponenten sind ebenfalls Responsive-Design-fähig  Ausnahmen vorhanden!  Anordnung der Komponenten variiert je nach Bildschirmgröße 11 Responsives Verhalten
  • 12.
    12 Wie verändert sichdas Design auf unterschiedlichen Bildschirmgrößen? Responsives Verhalten
  • 13.
    13 Überarbeitetes Grid Layout 12 Spalten pro Seite bzw. Region  Spalten je Region/Item automatisch oder statisch definierbar  Spaltenzahl variiert aufgrund der Bildschirmgröße  Regionen und Items „springen“ in die nächste Zeile
  • 14.
  • 15.
     Regions  ClassicReport  Interactive Report  Tabular Form  Map Chart  Region Display Selector  Tree  Modale Dialoge  Gut nutzbar, werden jedoch u.U. nicht als solche wahrgenommen  Verzögerung(300ms) bei Antippen von Komponenten  Standard bei mobiler Entwicklung zur Vermeidung von versehentlichen Klicks durch Touch Gesten  Theme Roller integriert nutzbar 15 Nur im Universal Theme enthalten
  • 16.
    16 Ergebnisse unter Android6.0 Mangelhafte UX Interactive Report Tabular Forms Map Chart (Not supported)
  • 17.
  • 18.
    18 Oracle JET Die Zukunftdes Universal Theme Desktop Mobile
  • 19.
    19 Interactive Grid Die Zukunftdes Universal Theme Desktop Mobile
  • 20.
    20 Master Detail Detail DieZukunft des Universal Theme
  • 21.
    APEX mobile Lohnt sichder Mehraufwand?
  • 22.
     Einführung 2012mit APEX 4.2  Verwendet jQuery mobile  Speziell für mobile Endgeräte entwickelt  Fokus auf Stabilität und Performance  Leichtgewichtiger als das UT (weniger CSS, HTML und JavaScript)  Geringere Ladezeiten auch bei schlechtem Empfang  Ajax-Seitenaufruf  „App-Gefühl“ APEX mobile 22
  • 23.
    23 Zusätzliche Features APEX mobile ColumnToggle ReportReflow ReportList View
  • 24.
    24 Nur in APEXmobile enthalten  HTML 5 Formelemente  Nutzt Eingabemethode des mobilen Betriebssystems  Z.B. Datepicker, Kamera  Touch-optimierte Elemente (z.B. Slider, Kippschalter)  Im UT ohne JavaScript-Programmierung nicht nutzbar  Dynamic Actions können durch Touch Events ausgelöst werden  Fixierter Footer
  • 25.
    25 Hier liegt dieGrenze APEX mobile  Hohe Spaltenzahl im Querformat  Alternative: Column Toggle Report  Formatierung im Hochformat  Alternative: List View  Suchfunktion nur für eine Spalte  Alternative: Unsichtbare Suchspalte Reflow Report List View
  • 26.
    26 Die Zukunft vonAPEX mobile  Oracle JET Integration  Integration neuer jQuery mobile Versionen  Theme Roller Integration
  • 27.
  • 28.
     Anwendungsfall beachten Eingesetzte Komponenten berücksichtigen  Universal Theme  Mobile friendly  Eine Anwendung für alle Geräte  Design im Fokus  Theme Roller  APEX mobile  Mobile only  Separate Desktopanwendung nötig  Mehraufwand  Funktionalität im Fokus  Usability  Bessere Performance (Seitenaufbau bis zu 1 Sek. schneller)  Nativeres Look&Feel Universal Theme oder APEX mobile? 28
  • 29.
     Stärkere Weiterentwicklungdes Universal Themes  Neue Features in APEX mobile zunächst nicht verfügbar  Jedoch auch im UT teils kaum mobil nutzbar  Empfehlung bleibt bestehen  Mobile-Touch besser im UT unterstützt  Z.B. Durch Carousel „swipen“  IR soll responsiver werden 29 Und was ist mit APEX 5.1?
  • 30.
    30 Mobile light –Ein Praxisbeispiel aus APEX 4.2 Alternative  Desktop-Anwendung + funktionsbeschränkte mobile App  Desktop for all & mobile for manager  Urlaubsanträge via Desktop einreichen  Genehmigen auch vom Smartphone möglich  Mobile interface  In APEX 5.0 nur UT
  • 31.
  • 32.
    Davide Groppuso Berater APEXDevelopment Telefon: +49 2102 30961 – 0 davide.groppuso@mt-ag.com @dgroppuso Steven Grzbielok Berater APEX Development Telefon: +49 2102 30961 – 0 steven.grzbielok@mt-ag.com @sgrzbielok ROADSHOW „VON FORMS NACH APEX“ 24.01.2017 Hamburg 25.01.2017 Düsseldorf 26.01.2017 Frankfurt 27.01.2017 München
  • 33.
    9.-11. Mai 2017 inBerlin apex.doag.org Bis 21. November 2016 Vortrag einreichen!
  • 34.
    Zu den verschiedenenOptionen finden Sie hier Demos: https://apex.mt-ag.com/apex/f?p=UAM oder einfach folgenden QR-Code einscannen: 34 Testen Sie selbst!