Plain jquery Mobile vs. APEX jquery Mobile Smartphone vs. APEX Desktop Dipl.-Inf. Oguz Ibram Prof. Dr. Petra Sauer DOAG Konferenz und Ausstellung 2013, Nürnberg 19. 21. November 2013
Gliederung Einführung Apps Herangehensweisen bei App-Entwicklung APEX Grundlagen als Basis der mobilen APEX-Erweiterung jquery Mobile jquery und das jquery Mobile Framework App-Entwicklung APEX jquery Mobile Smartphone App-Entwicklung Zusammenfassung und Fazit 2
Apps vs. Webseiten Mobile Apps haben Design Guidelines oder eine Creative Vision. Die Android UI Design Patterns verlangen von einer App: Enchant me Simplify my life Make me amazing Apple besitzt ebenso ausführliche ios Human Interface Guidelines Was ist so anders an Apps? Die folgenden Folien zeigen Ausschnitte aus den Android UI Design Patterns. 3
visuell überzeugen 4
sich konsistent und vertraut verhalten 5
sich an vordefinierten Elementen orientieren 6
Plattformübergreifende Apps Mobile Web-Apps Mobile native Apps plattformübergreifende App mit HTML5, CSS3, JavaScript und einer serverseitigen Komponente plattformspezifische App => hoher Programmieraufwand Laufzeitumgebung ist der Browser kompliziertes Zulassungsverfahren im App Store / Google Play Store Provider hat volle Kontrolle über Updates abhängig vom Updates Nutzerdownload bedingter Zugriff auf Hardware App liegt nativ im Gerät schlechtere Performance bessere Performance 7
Gliederung Einführung Apps Herangehensweisen bei App-Entwicklung APEX Grundlagen als Basis der mobilen APEX-Erweiterung jquery Mobile jquery und das jquery Mobile Framework App-Entwicklung APEX jquery Mobile Smartphone App-Entwicklung Zusammenfassung und Fazit 8
Oracle Application Express (APEX) Rapid Application Development-Werkzeug datenbankzentriert, Zwei-Schichten-Architektur => kein ORM deklarative Anwendungs- und App-Entwicklung im Browser Web-App-Entwicklung in APEX mittels integriertem jquery Mobile-Framework 9
APEX-Grundlagen: die Page Definition Page Definition Page ist im Zentrum der Arbeit mit APEX: Page Rendering, Page Processing, Shared Components sind die Säulen der Anwendungsentwicklung mit APEX zahlreiche Wizards viele einsatzbereite Komponenten (Reports, Forms, Charts, speziellere Komponenten wie Tabular Forms, Master-Detail- Forms, Interactive Reports) Logik implementieren in SQL und PL/SQL Look & Feel: ausgelagert in Templates, App-weite Konsistenz durch Themes 10
APEX-Grundlagen : das Page Rendering 11
APEX-Grundlagen: das Page Processing 12
APEX-Grundlagen: Shared Components 13
Gliederung Einführung Apps Herangehensweisen bei App-Entwicklung APEX Grundlagen als Basis der mobilen APEX-Erweiterung jquery Mobile jquery und das jquery Mobile Framework App-Entwicklung APEX jquery Mobile Smartphone App-Entwicklung Zusammenfassung und Fazit 14
jquery Mobile 15
jquery Mobile Features implementiert mit jquery Markup-getriebene Konfiguration der App-Seiten Progressive Enhancement mittels HTML5-data-*- Elementattribute Responsive Design AJAX-basiertes Navigationssystem Einheitliche UI-Widgets Unterstützung von Touch-Events Eigenes Theming-Framework 16
Vorgehen bei App-Entwicklung Benötigte Bibliotheken und Metadaten hinzufügen <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile- 1.3.2.min.css" /> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile- 1.3.2.min.js"></script> <ab hier ggfs. noch eigene CSS- und JavaScript - Libraries> 17
Vorgehen bei App-Entwicklung Markup schreiben (semantische HTML5-Elemente nutzen) data-*-elementattribute hinzufügen <section data-role="page" id= page1"> <header data-role="header"> <h1> </h1> </header> <div data-role="content"> <p> </p> </div> <footer data-role="footer"> <h4> </h4> </footer> </section> <section data-role="page" id= page2"> ein HTML-Dokument, zwei interne Pages 18
Applikationsstruktur Pages <div data-role="page"> Dialogs: die zweite Art von Pages <a href="foo.html" data-rel="dialog"> Speicherung der Navigation durch die Pages in History- Funktionalität des Browsers Transitions Page: <a href="foo.html" data-transition="pop"> Dialog: <a href="foo.html" data-rel="dialog" datatransition="pop"> data-transition= "{fade flip flow none pop slide slidedown slidef ade slideup turn}" 19
Page-Elemente: Widgets I List Views <ul data-role="listview" data-inset="true"> <li><a href="#">acura</a></li>. </ul> Toolbars Navigation Bars <div data-role="navbar"> <ul><li><a href="#" class="ui-btn-active">one </a></li> Header / Footer Toolbars data-role = " header " / "footer" 20
Page-Elemente: Widgets II Buttons: drei Möglichkeiten automatisch für input type="submit reset" automatisch für <button>-element auf anchor <a> angewendetes data-role="button" Gruppierung der Buttons mit data-role="controlgroup" Forms automatisch für input type= "checkbox radio" Flip-Toggle data-role= " slider" HTML5-Typen bei Inputfeldern Search-Felder bekommen Fernglas-Icon und Suchfunktionalität durch input type= "search" 21
Nur data-*-attribute? Customizing jqm I jquery mobile ist jquery, ist also nach jquery-art $(selector).action() verwendbar. Keine Beschränkung auf mit data-*-attributen eingebettete Funktionalität. Beispiel aus den jqm-demo-showcases: 22
Customizing jqm I (Demo Showcase continued) 23
Customizing jqm II jquery mobile bringt eigene umfangreiche jquery API mit 24
jquery Mobile Theming Built-In Layout Grids ui-grid-a bis ui-grid-d ui-block-a bis ui-block-e Responsive Design könnte darauf aufbauen ThemeRoller Themes und Swatches-Begriffe Steuerbar über Attribut data-theme 25
jquery Mobile Theming II 26
Gliederung Einführung Apps Herangehensweisen bei App-Entwicklung APEX Grundlagen als Basis der mobilen APEX-Erweiterung jquery Mobile jquery und das jquery Mobile Framework App-Entwicklung APEX jquery Mobile Smartphone App-Entwicklung Zusammenfassung und Fazit 27
Vorgehen bei App-Entwicklung App anlegen mit Create Database Application UI auf jquery Mobile Smartphone Smartphone-Theme wählen fertiges App-Gerüst mit drei Seiten steht dann bereits Global Page wird immer angelegt und enthält Header und Footer mit ihren Templates z.b. Header bzw. Footer Toolbar(Fixed) 28
Templates enthalten jquery mobile-code Template Header Toolbar (fixed) 29
Vorgehen bei App-Entwicklung Benötigte Bibliotheken und Metadaten sind bereits hinzugefügt, allerdings jquery mobile 1.2.1 bei APEX 4.2.3 eigene CSS-/JavaScript-Bibliotheken in /i/libraries und /i/themes ablegen und in Page Definition bzw. Page Template einbinden Content Delivery Network über Application Properties deklarativ nutzbar 30
Was APEX daraus macht 31
Vorgehen bei App-Entwicklung Wie gewohnt Pages hinzufügen Neue und weggefallene Page-Typen Report als ListView Form on a Table with ListView Kein Interactive Report, keine Master-Detail-Forms, keine Tabular Forms 32
Page-Elemente deklarieren: ListViews I List Views konfigurieren über Region Attribute 33
Page-Elemente deklarieren: ListViews II Counter Column ist eine Spalte in der Ergebnismenge 34
Page-Elemente deklarieren: Buttons Buttons konfigurieren über Button Attribute 35
Page-Elemente deklarieren: Forms Forms konfigurieren über Item Attribute 36
Customizing von jqm in APEX Das Event definieren und mit Execute JavaScript eigenen Code einfügen jquery mobile-events sind integriert jquery() und $() vs. apex.jquery() 37
Theming deklarative Grid Layout-Bestimmung mit ThemeRoller generierte CSS-Datei in APEX nutzen 38
Baumkontrolle mit APEX und jquery mobile 39
Gliederung Einführung Apps Herangehensweisen bei App-Entwicklung APEX Grundlagen als Basis der mobilen APEX-Erweiterung jquery Mobile jquery und das jquery Mobile Framework App-Entwicklung APEX jquery Mobile Smartphone App-Entwicklung Zusammenfassung und Fazit 40
Fazit Apps deklarativ zu entwickeln ist möglich, aber an einigen Stellen ist Kenntnis von jquery mobile von Vorteil (z.b. Button Attributes) Großer Vorteil der Entwicklung mit APEX ist die zur Verfügung stehende Datenbankanbindung und Entwicklung serverseitiger Logik nach bekannter APEX-Art Responsive Web Design mit APEX nur für Desktop-Themes, die jquery Mobile Smartphone-Themes sind auch nur für Smartphone-Apps/Pages gedacht 41
Referenzen Czarski, Carsten: Express-Dienst Oracle APEX. Rapid Application Development- Werkzeug für Webanwendungen, Heise 2009 Hartman, Roel; Rokitta, Christian; Peake, David: Oracle Application Express for Mobile Web Applications, New York 2013 Oracle Technology Network: Oracle Application Express Application Builder User s Guide, R4.2 Raganitsch, Peter: Wie hausgemacht. Mobile Oracle-Anwendungen mit APEX, ix 10/2013 Reid, Jon: jquery Mobile Building Cross-Platform Mobile Applications, Sebastopol 2011 42
Dokumentationen Oracle Datenbank http://www.oracle.com/database/ APEX http://apex.oracle.com http://www.oracle.com/technetwork/developer-tools/apex/overview/index.html (OTN) http://www.oracle.com/webfolder/technetwork/de/community/apex/index.html (Deutschsprachige APEX- und PL/SQL-Community) 43
Vielen Dank für Ihre Aufmerksamkeit! Dipl.-Inf. Oguz Ibram / Prof. Dr. Petra Sauer Beuth-Hochschule für Technik Berlin Fachbereich Informatik Luxemburger Str. 10 13353 Berlin Web: Mail: prof.beuth-hochschule.de/sauer oibram / sauer@beuth-hochschule.de Die Entwicklungsarbeit wurde im Rahmen des Projektes Forschungsassistenz VI durch die Senatsverwaltung für Wirtschaft, Technologie und Forschung mit Mitteln des Europäischen Sozialfonds gefördert. 44