Hybride mobile Applikationen mit ADF und PhoneGap · mit ADF und PhoneGap DOAG Konferenz 2011 ......

32
Hybride mobile Applikationen mit ADF und PhoneGap DOAG Konferenz 2011 Nürnberg, 16. November 2011 Christof Kaller - T: +49 (0) 177 234 4548 E: [email protected]

Transcript of Hybride mobile Applikationen mit ADF und PhoneGap · mit ADF und PhoneGap DOAG Konferenz 2011 ......

Hybride mobile Applikationen

mit ADF und PhoneGap

DOAG Konferenz 2011

Nürnberg, 16. November 2011

Christof Kaller - T: +49 (0) 177 234 4548 – E: [email protected]

MT AG Key Facts

14.11.2011 Hybride mobile Applikationen mit ADF und PhoneGap 2

Full-Service-Dienstleistung für alle

Phasen des Software-Lifecycle

Herstellerunabhängige Expertise in

den marktführenden Technologien wie

Oracle, IBM, Microsoft, SAP und

OpenSource

Themen- und Lösungs-Know-how in den

Kerndisziplinen des Adaptive Enterprise

Gründung 1994

Inhabergeführte AG:

Aktienkapital 1.500.000 €

Hauptsitz Ratingen;

Niederlassungen Dortmund, Frankfurt

Mitarbeiter:

> 200 Festangestellte

> 65 Freie Mitarbeiter

MT AG MANAGING TECHNOLOGY – ENABLING THE ADAPTIVE ENTERPRISE

Agenda

14.11.2011 3

■ Ausgangslage – Relevante Betriebssysteme der „Big Player“

■ Gemeinsamkeiten der Plattformen

■ Architektur PhoneGap & ADF

■ Live Demo

Hybride mobile Applikationen mit ADF und PhoneGap

■ Zusammenfassung

Agenda

14.11.2011 4

■ Ausgangslage – Relevante Betriebssysteme der „Big Player“

■ Gemeinsamkeiten der Plattformen

■ Architektur PhoneGap & ADF

■ Live Demo

Hybride mobile Applikationen mit ADF und PhoneGap

■ Zusammenfassung

Ausgangslage – Relevante Betriebssysteme der „Big Player“

14.11.2011

Android

iOS

Symbian

RIM /

Blackberry OS

Windows Mobile

Objective-C, Java, Flash,

Skriptsprachen, Web- HTML5,

CSS, JavaScript

Hybride mobile Applikationen mit ADF und PhoneGap 5

Agenda

14.11.2011 6

■ Ausgangslage – Relevante Betriebssysteme der „Big Player“

■ Gemeinsamkeiten der Plattformen

■ Architektur PhoneGap & ADF

■ Live Demo

Hybride mobile Applikationen mit ADF und PhoneGap

■ Zusammenfassung

Gemeinsamkeiten

OS Sprache IDE

Shop/

Lizenz-

kosten

Simulator/

Emulator

Debug-

ging

Test

Sicher-

heits-

modelle

Adobe

Air Web-/

Widgets

QT

PhoneGap/

Titanium/

Rhodes

Mobile

Beson-

derheiten

An-

droid Java Eclipse Ja, 25$ Ja Ja Ja Ja Ja Nein Ja

Dalvik Virtual

Machine,

open source

iOS Objective- C Xcode Ja, 99$ Ja Ja Ja Nein Ja Nein Ja Mac zur Ent-

wicklung

RIM Java 5 Eclipse Ja, 80$ Ja Ja Ja Ja Ja Nein Ja

Beliebtes

Buisness

Smartphone

Sym-

bian

Java ME

Symbian C

Python

Eclipse

NetBeans Ja, 0$ Ja Ja Ja Ja Ja Ja Ja

versuchter

Standard

JavaME

Win-

dows

Mobile

C, C#

Visual

Studio

2005

/2007

Express

Ja, 75€ Ja Ja Ja Nein Ja Ja Ja One click

install

7 14.11.2011 Hybride mobile Applikationen mit ADF und PhoneGap

Gemeinsamkeiten

OS Sprache IDE

Shop/

Lizenz-

kosten

Simulator/

Emulator

Debug-

ging

Test

Sicher-

heits-

modelle

Adobe

Air Web-/

Widgets

QT

PhoneGap/

Titanium/

Rhodes

Mobile

Beson-

derheiten

An-

droid Java Eclipse Ja, 25$ Ja Ja Ja Ja Ja Nein Ja

Dalvik Virtual

Machine,

open source

iOS Objective- C Xcode Ja, 99$ Ja Ja Ja Nein Ja Nein Ja Mac zur Ent-

wicklung

RIM Java 5 Eclipse Ja, 80$ Ja Ja Ja Ja Ja Nein Ja

Beliebtes

Buisness

Smartphone

Sym-

bian

Java ME

Symbian C

Python

Eclipse

NetBeans Ja, 0$ Ja Ja Ja Ja Ja Ja Ja

versuchter

Standard

JavaME

Win-

dows

Mobile

C, C#

Visual

Studio

2005

/2007

Express

Ja, 75€ Ja Ja Ja Nein Ja Ja Ja One click

install

8 14.11.2011 Hybride mobile Applikationen mit ADF und PhoneGap

Gemeinsamkeiten

9 14.11.2011 Hybride mobile Applikationen mit ADF und PhoneGap

OS Sprache Web- /

Widgets

QT

PhoneGap/

Titanium/

Rhodes

Mobile

Besonder-

heiten

Android Java Ja Nein Ja

Dalvik Virtual

Machine, open

source

iOS Objective- C Ja Nein Ja Mac zur Ent-

wicklung

RIM OS Java 5 Ja Nein Ja

Beliebtes

Buisness

Smartphone

Symbian

Java ME

Symbian C

Python

Ja Ja Ja

versuchter

Standard

JavaME

Windows

Mobile C, C# Ja Ja Ja One click install

ADF Mobile - Client vs. Browser

10

■ Mobile Browser

■ Real- Time Data

■ Basisintegration von nativen Funktionen

■ Breite Unterstützung mobiler Geräte

■ Sehr schnelle Entwicklung - go-alive today

■ Mobile Client

■ Offline Verfügbarkeit von Daten

■ Breite Unterstützung nativer Funktionen (GPS, Kontakte,…)

■ Konsistente Client Performance

■ Eingeschränkte Unterstützung mobiler Geräte

14.11.2011 Hybride mobile Applikationen mit ADF und PhoneGap

Abdeckung Nativer Funktionen (PhoneGap)

11 14.11.2011 Hybride mobile Applikationen mit ADF und PhoneGap

PhoneGap

HTML(5) &

JavaScript

iOS Android RIM Symbian Windows

Mobile

Container

GPS

Speicher

Kamera

Erweiterbarkeit

Dokumentiert

Verfügbarkeit 100% 100% 100% 100% 50%

Agenda

14.11.2011 12

■ Ausgangslage – Relevante Betriebssysteme der „Big Player“

■ Gemeinsamkeiten der Plattformen

■ Architektur PhoneGap & ADF

■ Live Demo

Hybride mobile Applikationen mit ADF und PhoneGap

■ Zusammenfassung

Architekturübersicht – The Bigger Picture I

Hardware

Betriebssystem

Native

Klassen/

Funktionen

Phonegap Native Klassen

Web- Anwendung (ADF, APEX…)

Java Script API

13 14.11.2011 Hybride mobile Applikationen mit ADF und PhoneGap

Sequenzdiagramm – The Bigger Picture III

PhoneGap

Bridge:PhoneGap.js

Natives

Android:DroidGap

Webapplikation:index.html

navigat.camera.getPicture

(dump.pic, fail,{quality});

GapCam.takePicture(q);

mAppView.loadUrl

("javascript:navigator.

camera.win

('"+js_out+"');“);

wincallback

=..=dump_pic(d);

15 14.11.2011 Hybride mobile Applikationen mit ADF und PhoneGap

Sequenzdiagramm – The Bigger Picture III

PhoneGap

Bridge:PhoneGap.js

Natives

Android:DroidGap

Webapplikation:index.html

navigat.camera.getPicture

(dump.pic, fail,{quality});

GapCam.takePicture(q);

mAppView.loadUrl

("javascript:navigator.cam

era.win

('"+js_out+"');“)

wincallback

=..=dump_pic(d);

16 14.11.2011 Hybride mobile Applikationen mit ADF und PhoneGap

Sequenzdiagramm – The Bigger Picture III

PhoneGap

Bridge:PhoneGap.js

Natives

Android:DroidGap

Webapplikation:index.html

navigat.camera.getPicture

(dump.pic, fail,{quality});

GapCam.takePicture(q);

mAppView.loadUrl

("javascript:navigator.cam

era.win

('"+js_out+"');“)

wincallback

=..=dump_pic(d);

17 14.11.2011 Hybride mobile Applikationen mit ADF und PhoneGap

Sequenzdiagramm – The Bigger Picture III

PhoneGap

Bridge:PhoneGap.js

Natives

Android:DroidGap

Webapplikation:index.html

navigat.camera.getPicture

(dump.pic, fail,{quality});

GapCam.takePicture(q);

mAppView.loadUrl

("javascript:navi

gator.camera.win

('"+js_out+"');“)

wincallback

=..=dump_pic(d);

18 14.11.2011 Hybride mobile Applikationen mit ADF und PhoneGap

Sequenzdiagramm – The Bigger Picture III

PhoneGap

Bridge:PhoneGap.js

Natives

Android:DroidGap

Webapplikation:index.html

navigat.camera.getPicture

(dump.pic, fail,{quality});

GapCam.takePicture(q);

mAppView.loadUrl

("javascript:navi

gator.camera.win

('"+js_out+"');“)

wincallback

=..=dump_pic(d);

19 14.11.2011 Hybride mobile Applikationen mit ADF und PhoneGap

Agenda

14.11.2011 20

■ Ausgangslage – Relevante Betriebssysteme der „Big Player“

■ Gemeinsamkeiten der Plattformen

■ Architektur PhoneGap & ADF

■ Live Demo

Hybride mobile Applikationen mit ADF und PhoneGap

■ Zusammenfassung

<tr:table horizontalGridVisible="false" var="row" width="100%" …>

<tr:column>

<tr:image source="#{row.bindings.TypeIconUrl.inputValue}"/>1

</tr:column>

<tr:column inlineStyle="width:100%;">

<tr:panelGroupLayout layout="vertical">

<tr:commandLink text="#{row.bindings.DescShort.inputValue}"

action="detail" styleClass="af_m_listingLink">

</tr:commandLink>

<tr:outputText value="#{row.bindings.Balance.inputValue}"

styleClass="af_m_listingDetails">

</tr:outputText>

</tr:panelGroupLayout>

</tr:column>

</tr:table>

One tool for everything ?

21 14.11.2011 Hybride mobile Applikationen mit ADF und PhoneGap

<tr:table horizontalGridVisible="false" var="row" width="100%" …>

<tr:column>

<tr:image source="#{row.bindings.TypeIconUrl.inputValue}"/>1

</tr:column>

<tr:column inlineStyle="width:100%;">

<tr:panelGroupLayout layout="vertical">

<tr:commandLink text="#{row.bindings.DescShort.inputValue}"

action="detail" styleClass="af_m_listingLink">

</tr:commandLink>

<tr:outputText value="#{row.bindings.Balance.inputValue}"

styleClass="af_m_listingDetails">

</tr:outputText>

</tr:panelGroupLayout>

</tr:column>

</tr:table>

One tool for everything ?

22 14.11.2011 Hybride mobile Applikationen mit ADF und PhoneGap

14.11.2011 Hybride mobile Applikationen mit ADF und PhoneGap 23

Quelle: ADF Session Webcast mit Ted Farrel am 10.11.2011

Zusammenfassung – Die einzelnen Schritte (Client)

24 14.11.2011 Hybride mobile Applikationen mit ADF und PhoneGap

0. Download / Install / Create / Import

- Eclipse, Android SDK, PhoneGap

Android Projekt

1. PhoneGap Projekt erweitern

- Plugins (childBrowser, etc)

2. Anpassen

- Name, Icons, Start URL

3. Compilieren / Installieren

Zusammenfassung – Die einzelnen Schritte (Server)

25 14.11.2011 Hybride mobile Applikationen mit ADF und PhoneGap

4. Projekt erstellen

- JDeveloper, ADF, BCDB

5. JavaScript Ressourcen einbinden

- phonegap-1.1.0.js

6. Anpassen

- CSS für verschiedene Plattformen

7. Kompilieren / Deployen / Kopieren

Agenda

14.11.2011 26

■ Ausgangslage – Wer sind die Big Player?

■ Gemeinsamkeiten der Plattformen

■ Architektur PhoneGap & ADF

■ Live Demo

Hybride mobile Applikationen mit ADF und PhoneGap

■ Zusammenfassung

MT AG managing technology I Balcke-Dürr-Allee 9 I 40882 Ratingen

Tel. +49 (0) 2102 309 61-0 I [email protected] I www.mt-ag.com

Vielen Dank!

? !

MT AG managing technology I Balcke-Dürr-Allee 9 I 40882 Ratingen

Tel. +49 (0) 2102 309 61-0 I [email protected] I www.mt-ag.com

Bei Rückfragen zur Präsentation: Christof Kaller: Tel.- ++49(0)177 234 45 48

Quellen: PhoneGap

Oracle Einstieg

Oracle ADF mobile Blog

MT AG – Vorträge auf der DOAG

MT AG MANAGING TECHNOLOGY – ENABLING THE ADAPTIVE ENTERPRISE

Di. 15.11.2011,

10 Uhr

Tabellen und Indizies reorganisieren, aber wann? Ernst Leber

Di. 15.11.2011,

12 Uhr

Das Apache POI-Framework als Reporting-Tool für Oracle Anwendungen. Sven-Olaf Kelbert

Di. 15.11.2011,

15 Uhr

AJAX-Rezepte für Web Services mit APEX-Bordmitteln, jQuery und JSON Andreas Wismann

Mi. 16.11.2011,

9 Uhr

Gewusst wie: IPhone-Anbindung in SOA-Landschaften. Guido Neander

Mi. 16.11.2011,

10 Uhr

Tipps und Tricks in der Datenbankadministration. Volker Mach

Mi. 16.11.2011,

10 Uhr

Hybride mobile Applikationen mit ADF und PhoneGap Christof Kaller

Mi. 16.11.2011,

14 Uhr

SAP+Microsoft+Social Media=Oracle WebCenter Portal. Niels de Bruijn

Mi. 16.11.2011,

16 Uhr

Viel aus wenig: Enterprise-DWH mit Basic ETL Jörg Menker

Do. 17.11.2011,

9 Uhr

Sesam (APEX) Öffne Dich Oliver Lemm

Do. 17.11.2011,

13 Uhr

Versionierung von SOA Projekten mit Subversion im JDeveloper. Klaus Friemelt

Do. 17.11.2011,

14 Uhr

Flexible Schnittstellen für Data Warehousing auf XML Basis. Lutz Bauer

Do. 17.11.2011,

16 Uhr

DWH Migration nach Exadata: Performance „Out Of The Box“? Lutz Bauer

<tr:table horizontalGridVisible="false" var="row" width="100%" …>

<tr:column>

<tr:image source="#{row.bindings.TypeIconUrl.inputValue}"/>1

</tr:column>

<tr:column inlineStyle="width:100%;">

<tr:panelGroupLayout layout="vertical">

<tr:commandLink text="#{row.bindings.DescShort.inputValue}"

action="detail" styleClass="af_m_listingLink">

</tr:commandLink>

<tr:outputText value="#{row.bindings.Balance.inputValue}"

styleClass="af_m_listingDetails">

</tr:outputText>

</tr:panelGroupLayout>

</tr:column>

</tr:table>

Proof of concept - PhoneGap Container & Styles

mit CSS

30

Android

iPhone

Blackberry

14.11.2011 Hybride mobile Applikationen mit ADF und PhoneGap

Extra Folie A

31 14.11.2011 Hybride mobile Applikationen mit ADF und PhoneGap

private void bindBrowser(WebView appView)

{

gap = new PhoneGap(this, appView);

geo = new GeoBroker(appView, this);

accel = new AccelListener(this, appView);

launcher = new CameraLauncher(appView, this);

//fictive Erweiterung zum Blutdruckmessen

pressure = new BloodPressure(appView, this)

appView.addJavascriptInterface(gap, "DroidGap");

appView.addJavascriptInterface(geo, "Geo");

appView.addJavascriptInterface(accel, "Accel");

appView.addJavascriptInterface(launcher, "GapCam");

// fictives JavaScriptÍnterface

appView.addJavascriptInterface(pressure, "BloodPressure");

}

Extra Folie B

32 14.11.2011 Hybride mobile Applikationen mit ADF und PhoneGap

Extra Folie C

33 14.11.2011 Hybride mobile Applikationen mit ADF und PhoneGap