View
217
Download
0
Category
Preview:
Citation preview
Dipl.-Inf. Oguz IbramProf. Dr. Petra Sauer
Plain jQuery Mobile vs. APEX jQuery Mobile Smartphone vs. APEX Desktop
DOAG Konferenz und Ausstellung 2013, Nürnberg19. – 21. November 2013
DOAG Konferenz und Ausstellung 2013 • Nürnberg • November 2013 • Ibram, Sauer
Gliederung
Einführung „Apps“ Herangehensweisen bei App-EntwicklungAPEX Grundlagen … als Basis der mobilen APEX-ErweiterungjQuery Mobile jQuery und das jQuery Mobile Framework App-EntwicklungAPEX jQuery Mobile Smartphone App-Entwicklung Zusammenfassung und Fazit
22
DOAG Konferenz und Ausstellung 2013 • Nürnberg • November 2013 • Ibram, Sauer
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 amazingApple besitzt ebenso ausführliche iOS Human Interface GuidelinesWas ist so anders an Apps? Die folgenden Folien zeigen Ausschnitte aus den Android UI Design Patterns.
33
DOAG Konferenz und Ausstellung 2013 • Nürnberg • November 2013 • Ibram, Sauer
… visuell überzeugen …
44
DOAG Konferenz und Ausstellung 2013 • Nürnberg • November 2013 • Ibram, Sauer
… sich konsistent und vertraut verhalten …
55
DOAG Konferenz und Ausstellung 2013 • Nürnberg • November 2013 • Ibram, Sauer
…sich an vordefinierten Elementen orientieren …
66
DOAG Konferenz und Ausstellung 2013 • Nürnberg • November 2013 • Ibram, Sauer
Plattformübergreifende Apps
77
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 kompliziertesZulassungsverfahren im App Store / Google Play Store
Provider hat volle Kontrolle über Updates
Updates abhängig vom Nutzerdownload
bedingter Zugriff auf Hardware App liegt nativ im Gerät
schlechtere Performance bessere Performance
DOAG Konferenz und Ausstellung 2013 • Nürnberg • November 2013 • Ibram, Sauer
Gliederung
Einführung Apps Herangehensweisen bei App-EntwicklungAPEX Grundlagen … als Basis der mobilen APEX-ErweiterungjQuery Mobile jQuery und das jQuery Mobile Framework App-EntwicklungAPEX jQuery Mobile Smartphone App-EntwicklungZusammenfassung und Fazit
88
DOAG Konferenz und Ausstellung 2013 • Nürnberg • November 2013 • Ibram, Sauer
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
99
DOAG Konferenz und Ausstellung 2013 • Nürnberg • November 2013 • Ibram, Sauer
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
1010
DOAG Konferenz und Ausstellung 2013 • Nürnberg • November 2013 • Ibram, Sauer
APEX-Grundlagen : das Page Rendering
1111
DOAG Konferenz und Ausstellung 2013 • Nürnberg • November 2013 • Ibram, Sauer
APEX-Grundlagen: das Page Processing
1212
DOAG Konferenz und Ausstellung 2013 • Nürnberg • November 2013 • Ibram, Sauer
APEX-Grundlagen: Shared Components
1313
DOAG Konferenz und Ausstellung 2013 • Nürnberg • November 2013 • Ibram, Sauer
Gliederung
Einführung Apps Herangehensweisen bei App-EntwicklungAPEX Grundlagen … als Basis der mobilen APEX-ErweiterungjQuery Mobile jQuery und das jQuery Mobile Framework App-EntwicklungAPEX jQuery Mobile Smartphone App-EntwicklungZusammenfassung und Fazit
1414
DOAG Konferenz und Ausstellung 2013 • Nürnberg • November 2013 • Ibram, Sauer
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
1616
DOAG Konferenz und Ausstellung 2013 • Nürnberg • November 2013 • Ibram, Sauer
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>
1717
DOAG Konferenz und Ausstellung 2013 • Nürnberg • November 2013 • Ibram, Sauer
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 Pages1818
DOAG Konferenz und Ausstellung 2013 • Nürnberg • November 2013 • Ibram, Sauer
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" data-
transition="pop"> data-transition=
"{fade|flip|flow|none|pop|slide|slidedown|slidefade|slideup|turn}"
1919
DOAG Konferenz und Ausstellung 2013 • Nürnberg • November 2013 • Ibram, Sauer
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 Toolbarsdata-role = " header " / "footer"
2020
DOAG Konferenz und Ausstellung 2013 • Nürnberg • November 2013 • Ibram, Sauer
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"
2121
DOAG Konferenz und Ausstellung 2013 • Nürnberg • November 2013 • Ibram, Sauer
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:
2222
DOAG Konferenz und Ausstellung 2013 • Nürnberg • November 2013 • Ibram, Sauer
Customizing jQm I (Demo Showcase continued)
2323
DOAG Konferenz und Ausstellung 2013 • Nürnberg • November 2013 • Ibram, Sauer
Customizing jQm II
jQuery mobile bringt eigene umfangreiche jQuery API mit
2424
DOAG Konferenz und Ausstellung 2013 • Nürnberg • November 2013 • Ibram, Sauer
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
2525
DOAG Konferenz und Ausstellung 2013 • Nürnberg • November 2013 • Ibram, Sauer
jQuery Mobile Theming II
2626
DOAG Konferenz und Ausstellung 2013 • Nürnberg • November 2013 • Ibram, Sauer
Gliederung
Einführung Apps Herangehensweisen bei App-EntwicklungAPEX Grundlagen … als Basis der mobilen APEX-ErweiterungjQuery Mobile jQuery und das jQuery Mobile Framework App-EntwicklungAPEX jQuery Mobile Smartphone App-EntwicklungZusammenfassung und Fazit
2727
DOAG Konferenz und Ausstellung 2013 • Nürnberg • November 2013 • Ibram, Sauer
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 ihrenTemplates z.B.Header bzw. Footer Toolbar(Fixed)
2828
DOAG Konferenz und Ausstellung 2013 • Nürnberg • November 2013 • Ibram, Sauer
Templates enthalten jQuery mobile-Code
Template Header Toolbar (fixed)
2929
DOAG Konferenz und Ausstellung 2013 • Nürnberg • November 2013 • Ibram, Sauer
Vorgehen bei App-Entwicklung
3030
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
DOAG Konferenz und Ausstellung 2013 • Nürnberg • November 2013 • Ibram, Sauer
Was APEX daraus macht …
3131
DOAG Konferenz und Ausstellung 2013 • Nürnberg • November 2013 • Ibram, Sauer
Vorgehen bei App-Entwicklung
3232
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
DOAG Konferenz und Ausstellung 2013 • Nürnberg • November 2013 • Ibram, Sauer
Page-Elemente deklarieren: ListViews I
List Views konfigurieren über Region Attribute
3333
DOAG Konferenz und Ausstellung 2013 • Nürnberg • November 2013 • Ibram, Sauer
Page-Elemente deklarieren: ListViews II
Counter Column ist eine Spalte in der Ergebnismenge
3434
DOAG Konferenz und Ausstellung 2013 • Nürnberg • November 2013 • Ibram, Sauer
Page-Elemente deklarieren: Buttons
Buttons konfigurieren über Button Attribute
3535
DOAG Konferenz und Ausstellung 2013 • Nürnberg • November 2013 • Ibram, Sauer
Page-Elemente deklarieren: Forms
Forms konfigurieren über Item Attribute
3636
DOAG Konferenz und Ausstellung 2013 • Nürnberg • November 2013 • Ibram, Sauer
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()
3737
DOAG Konferenz und Ausstellung 2013 • Nürnberg • November 2013 • Ibram, Sauer
Theming
deklarative Grid Layout-Bestimmung
mit ThemeRoller generierteCSS-Datei in APEX nutzen
3838
DOAG Konferenz und Ausstellung 2013 • Nürnberg • November 2013 • Ibram, Sauer
Baumkontrolle mit APEX und jQuery mobile
3939
DOAG Konferenz und Ausstellung 2013 • Nürnberg • November 2013 • Ibram, Sauer
Gliederung
Einführung Apps Herangehensweisen bei App-EntwicklungAPEX Grundlagen … als Basis der mobilen APEX-ErweiterungjQuery Mobile jQuery und das jQuery Mobile Framework App-EntwicklungAPEX jQuery Mobile Smartphone App-EntwicklungZusammenfassung und Fazit
4040
DOAG Konferenz und Ausstellung 2013 • Nürnberg • November 2013 • Ibram, Sauer
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
4141
DOAG Konferenz und Ausstellung 2013 • Nürnberg • November 2013 • Ibram, Sauer 42
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
Referenzen
DOAG Konferenz und Ausstellung 2013 • Nürnberg • November 2013 • Ibram, Sauer 43
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
Dokumentationen
DOAG Konferenz und Ausstellung 2013 • Nürnberg • November 2013 • Ibram, Sauer 44
Vielen Dank für Ihre Aufmerksamkeit!
Dipl.-Inf. Oguz Ibram / Prof. Dr. Petra SauerBeuth-Hochschule für Technik BerlinFachbereich InformatikLuxemburger Str. 1013353 Berlin
Web: prof.beuth-hochschule.de/sauerMail: 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
Recommended