Plain jQuery Mobile vs. APEX jQuery Mobile Smartphone vs

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
DOAG Konferenz und Ausstellung 2013 • Nürnberg • November 2013 • Ibram, Sauer
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.
DOAG Konferenz und Ausstellung 2013 • Nürnberg • November 2013 • Ibram, Sauer
3
… visuell überzeugen …
DOAG Konferenz und Ausstellung 2013 • Nürnberg • November 2013 • Ibram, Sauer
4
… sich konsistent und vertraut verhalten …
DOAG Konferenz und Ausstellung 2013 • Nürnberg • November 2013 • Ibram, Sauer
5
…sich an vordefinierten Elementen orientieren …
DOAG Konferenz und Ausstellung 2013 • Nürnberg • November 2013 • Ibram, Sauer
6
Plattformübergreifende Apps
Mobile Web-Apps
Mobile native Apps
plattformübergreifende App mit
plattformspezifische App => hoher
HTML5, CSS3, JavaScript und
Programmieraufwand
einer serverseitigen Komponente
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
DOAG Konferenz und Ausstellung 2013 • Nürnberg • November 2013 • Ibram, Sauer
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
DOAG Konferenz und Ausstellung 2013 • Nürnberg • November 2013 • Ibram, Sauer
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
DOAG Konferenz und Ausstellung 2013 • Nürnberg • November 2013 • Ibram, Sauer
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-DetailForms, Interactive Reports)
 Logik implementieren in SQL und PL/SQL
 Look & Feel: ausgelagert in Templates, App-weite Konsistenz
durch Themes
DOAG Konferenz und Ausstellung 2013 • Nürnberg • November 2013 • Ibram, Sauer
10
APEX-Grundlagen : das Page Rendering
DOAG Konferenz und Ausstellung 2013 • Nürnberg • November 2013 • Ibram, Sauer
11
APEX-Grundlagen: das Page Processing
DOAG Konferenz und Ausstellung 2013 • Nürnberg • November 2013 • Ibram, Sauer
12
APEX-Grundlagen: Shared Components
DOAG Konferenz und Ausstellung 2013 • Nürnberg • November 2013 • Ibram, Sauer
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
DOAG Konferenz und Ausstellung 2013 • Nürnberg • November 2013 • Ibram, Sauer
14
jQuery Mobile
DOAG Konferenz und Ausstellung 2013 • Nürnberg • November 2013 • Ibram, Sauer
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
DOAG Konferenz und Ausstellung 2013 • Nürnberg • November 2013 • Ibram, Sauer
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.mobile1.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.mobile1.3.2.min.js"></script>
<ab hier ggfs. noch eigene CSS- und JavaScript - Libraries>
DOAG Konferenz und Ausstellung 2013 • Nürnberg • November 2013 • Ibram, Sauer
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
DOAG Konferenz und Ausstellung 2013 • Nürnberg • November 2013 • Ibram, Sauer
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 HistoryFunktionalitä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}"
DOAG Konferenz und Ausstellung 2013 • Nürnberg • November 2013 • Ibram, Sauer
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"
DOAG Konferenz und Ausstellung 2013 • Nürnberg • November 2013 • Ibram, Sauer
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"
DOAG Konferenz und Ausstellung 2013 • Nürnberg • November 2013 • Ibram, Sauer
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:
DOAG Konferenz und Ausstellung 2013 • Nürnberg • November 2013 • Ibram, Sauer
22
Customizing jQm I (Demo Showcase continued)
DOAG Konferenz und Ausstellung 2013 • Nürnberg • November 2013 • Ibram, Sauer
23
Customizing jQm II
 jQuery mobile bringt eigene umfangreiche jQuery API mit
DOAG Konferenz und Ausstellung 2013 • Nürnberg • November 2013 • Ibram, Sauer
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
DOAG Konferenz und Ausstellung 2013 • Nürnberg • November 2013 • Ibram, Sauer
25
jQuery Mobile Theming II
DOAG Konferenz und Ausstellung 2013 • Nürnberg • November 2013 • Ibram, Sauer
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
DOAG Konferenz und Ausstellung 2013 • Nürnberg • November 2013 • Ibram, Sauer
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)
DOAG Konferenz und Ausstellung 2013 • Nürnberg • November 2013 • Ibram, Sauer
28
Templates enthalten jQuery mobile-Code
 Template Header Toolbar (fixed)
DOAG Konferenz und Ausstellung 2013 • Nürnberg • November 2013 • Ibram, Sauer
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
DOAG Konferenz und Ausstellung 2013 • Nürnberg • November 2013 • Ibram, Sauer
30
Was APEX daraus macht …
DOAG Konferenz und Ausstellung 2013 • Nürnberg • November 2013 • Ibram, Sauer
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
DOAG Konferenz und Ausstellung 2013 • Nürnberg • November 2013 • Ibram, Sauer
32
Page-Elemente deklarieren: ListViews I
 List Views konfigurieren über Region Attribute
DOAG Konferenz und Ausstellung 2013 • Nürnberg • November 2013 • Ibram, Sauer
33
Page-Elemente deklarieren: ListViews II
Counter Column ist eine Spalte in der Ergebnismenge
DOAG Konferenz und Ausstellung 2013 • Nürnberg • November 2013 • Ibram, Sauer
34
Page-Elemente deklarieren: Buttons
 Buttons konfigurieren über Button Attribute
DOAG Konferenz und Ausstellung 2013 • Nürnberg • November 2013 • Ibram, Sauer
35
Page-Elemente deklarieren: Forms
 Forms konfigurieren über Item Attribute
DOAG Konferenz und Ausstellung 2013 • Nürnberg • November 2013 • Ibram, Sauer
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()
DOAG Konferenz und Ausstellung 2013 • Nürnberg • November 2013 • Ibram, Sauer
37
Theming
 deklarative Grid Layout-Bestimmung
 mit ThemeRoller generierte
CSS-Datei in APEX nutzen
DOAG Konferenz und Ausstellung 2013 • Nürnberg • November 2013 • Ibram, Sauer
38
Baumkontrolle mit APEX und jQuery mobile
DOAG Konferenz und Ausstellung 2013 • Nürnberg • November 2013 • Ibram, Sauer
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
DOAG Konferenz und Ausstellung 2013 • Nürnberg • November 2013 • Ibram, Sauer
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
DOAG Konferenz und Ausstellung 2013 • Nürnberg • November 2013 • Ibram, Sauer
41
Referenzen

Czarski, Carsten: Express-Dienst – Oracle APEX. Rapid Application DevelopmentWerkzeug 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
DOAG Konferenz und Ausstellung 2013 • Nürnberg • November 2013 • Ibram, Sauer
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)
DOAG Konferenz und Ausstellung 2013 • Nürnberg • November 2013 • Ibram, Sauer
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:
prof.beuth-hochschule.de/sauer
Mail:
oibram / [email protected]
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.
DOAG Konferenz und Ausstellung 2013 • Nürnberg • November 2013 • Ibram, Sauer
44