plain jquery mobile vs. apex jquery mobile smartphone … · dipl.-inf. oguz ibram prof. dr. petra...

44
Dipl.-Inf. Oguz Ibram Prof. Dr. Petra Sauer Plain jQuery Mobile vs. APEX jQuery Mobile Smartphone vs. APEX Desktop DOAG Konferenz und Ausstellung 2013, Nürnberg 19. – 21. November 2013

Upload: danghuong

Post on 04-Jun-2018

217 views

Category:

Documents


0 download

TRANSCRIPT

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

1515

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 / [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.

44