universal theme vs. apex mobile
TRANSCRIPT
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 einerAPEX-Landingpage, UI-Workshop…) aber auch Serveradministration und Virtualisierung beschäftigt
3
Über mich
Im Überblick
Technologie-orientiert
Branchen-unabhängig
Hauptsitz
Ratingen240
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 vonversehentlichen 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
DesktopMobile
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
@dgroppuso
Steven Grzbielok
Berater APEX Development
Telefon: +49 2102 30961 – 0
@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!