Mobile Web-Awendungen mit Oracle Application Express

Größe: px

Ab Seite anzeigen:

Download "Mobile Web-Awendungen mit Oracle Application Express"

Kornelius Hase
vor 7 Jahren
Abrufe

1 Mobile Web-Awendungen mit Oracle Application Express Carsten Czarski ORACLE Deutschland B.V. & Co KG

2 Mobile APEX-Anwendungen

3 Agenda Mobile Anwendungen: Grundsätzliches jquery Mobile: Was ist das? Mobile APEX-Anwendungen erstellen Erweiterte Möglichkeiten: Kamera, GPS, Kalender

4 Mobile Anwendungen Grundsätzliche Möglichkeiten Ausführung Unabhängigkeit Zugriff auf Gerätefunktionen Nativ Maschinen/Bytecode direkte Ausführung im Gerät Gezielte Entwicklung für eine Mobile- Plattform Umfassender Zugriff auf Gerätefunktionen (Kontakte, Kamera, GPS) Web Markup Language und JavaScript Ausführung im Browser Offene Web-Standards (HTML, CSS) Lauffähig auf allen Plattformen Nur bestimmte Gerätefunktionen via Browser verfügbar HTML5 Online / Offlinefähigkeit Online und Offlinebetrieb Nur Onlinebetrieb. Offline-Fähigkeiten sehr eingeschränkt Werkzeuge Spezielle Werkzeuge und Frameworks Standardwerkzeuge für Web- Anwendungen Aufwand Hoch für jede Plattform muss explizit entwickelt werden Gering: Eine Anwendung läuft auf allen Plattformen Softwareverteilung AppStore der jeweiligen Plattform Aufrufen einer URL im Browser H Y B R I D

5 Mobile Anwendungen mit APEX Mobile Webanwendungen Ausführung Markup Language und JavaScript Ausführung im Browser Unabhängigkeit Zugriff auf Gerätefunktionen Online / Offlinefähigkeit Werkzeuge Aufwand Softwareverteilung Offene Web-Standards (HTML, CSS) Lauffähig auf allen Plattformen Nur bestimmte Gerätefunktionen via Browser verfügbar HTML5 Nur Onlinebetrieb. Offline-Fähigkeiten sehr eingeschränkt Standardwerkzeuge für Web- Anwendungen Gering: Eine Anwendung läuft auf allen Plattformen Aufrufen einer URL im Browser

6 Mobile Web-Anwendungen in APEX 4.2 Grundsätzlich laufen APEX-Anwendungen auch auf modernen mobilen Geräten (ios, Android, ) Aber: Desktop-Anwendungen werden meist "suboptimal" dargestellt APEX 4.2 enthält fertige Themes und Templates für mobile Geräte Auf Basis von jquery mobile Look & Feel einer nativen App Optimiert für "Touch"-Geräte mit kleinen Bildschirmen

7 Exkurs: Responsive Web Design

jquery Mobile: Auf einen Blick 'Touch-optimized' JavaScript framework für mobile Geräte Auf Basis von jquery und jquery UI entwickelt Einheitliches User-Interface für alle

8 jquery Mobile: Auf einen Blick 'Touch-optimized' JavaScript framework für mobile Geräte Auf Basis von jquery und jquery UI entwickelt Einheitliches User-Interface für alle mobilen Geräte Basiert auf CSS anstelle von Bildern: Kleiner 'Footprint' Gleiche Code-Basis für Smartphones und Tablets Interne Nutzung von Techniken Responsive Web Design

9 Wie funktioniert jquery Mobile? <body> <div data-role="page" id="overview"> <div data-role="header"> <h1>apex Mobile: Hands On</h1> </div> <div data-role="content"> <p>mit der...</p> <div data-role="collapsible-set"> <div data-role="collapsible" data-theme="b" data-content-theme="d" data-collapsed="false"> <h3>agenda</h3>

Wie funktioniert jquery Mobile? <head> <link rel="stylesheet" href="http://.../jquery.mobile-1.2.1.min.

10 Wie funktioniert jquery Mobile? <head> <link rel="stylesheet" href=" /> <script src=" <script src=" </head> <body> <div data-role="page" id="overview"> <div data-role="header"> <h1>apex Mobile: Hands On</h1> </div> <div data-role="content"> <p>mit der...</p> <div data-role="collapsible-set"> <div data-role="collapsible" data-theme="b" data-content-theme="d" data-collapsed="false"> <h3>agenda</h3>

11 Was kann jquery Mobile: Dokumentation

12 Auszug: Schaltflächen mit jquery Mobile

13 jquery Mobile Oberflächen Customizing Eingebautes Theming ThemeRoller Anwendung

14 Mobile Web Apps mit APEX 4.2 erstellen

15 Mobile Web Apps mit APEX 4.2 erstellen Anwendungserstellung wie bei Desktop-Anwendungen Komponentenerstellung mit APEX Assistenten Einsatz von SQL und PL/SQL Ab APEX 4.2: Benutzeroberflächen (User Interfaces) Eine Anwendung kann mehrere User Interfaces haben Jede Seite ist genau einem User Interface zugeordnet Jedes User-Interface hat eine Global Page Auto-Detect des Endgeräts möglich: Direkte Umleitung auf passendes UI

16 (Nicht nur) für mobile: Listenansicht

17 Mobile Formulare

18 Schaltflächen in mobilen Anwendungen Zunächst normale APEX-Schaltflächen Wichtig: Schaltflächenattribute jquery Mobile Dokumentation "data-icon": Schaltflächensymbol "data-theme": Einfärbung "data-mini": Kleine Schaltfläche

19 Diagramme in mobilen Anwendungen... wie in Desktop-Anwendungen

20 Besondere Features mobiler Anwendungen Zugriff auf das GPS (Ortungsdienste) Zugriff auf die Kamera Abonnieren eines Kalenders

21 Zugriff auf das GPS Funktion des mobilen Browsers nahezu in allen Geräten unterstützt JavaScript-Funktion Asynchrone Ausführung Übergabe von Callback-Funktionen navigator.geolocation.getcurrentposition ( {handle-location-function}, {handle-error-function} );

$getcurrentposition (function (pos) { $s("px_lat", pos.coords.latitude); $s("px_lon", pos.coords.longitude); $s("px_alt", pos.coords.altitude); $s("px_head", pos.$

22 Nutzung in APEX Schaltfläche erstellen Bei Klick: Dynamische Aktion starten Aktion: JavaScript-Code ausführen navigator.geolocation.getcurrentposition (function (pos) { $s("px_lat", pos.coords.latitude); $s("px_lon", pos.coords.longitude); $s("px_alt", pos.coords.altitude); $s("px_head", pos.coords.heading); });

23 Zugriff auf die Kamera Nur auf aktuellen mobilen Plattformen möglich (ios 5.x und höher, Android 3.2 und höher) APEX-Element "Datei durchsuchen" hinzufügen Verarbeitung danach wie bei Desktop-Anwendung Asynchrones Hochladen mit HTML5 möglich. Aber: Aufwand.

24 Kalenderintegration Direkter Zugriff auf den Kalender ist nicht möglich Einträge können nicht gelöscht oder "still" hinzugefügt werden Aber: Integration via icalendar-format möglich ical-format aus der APEX-Anwendung generieren Per Button, Link oder Seitenverzweigung ansprechen

25 Kalender-Integration per ical Feed 1. ical Feed bereitstellen Per Anwendungsprozeß oder direkten PL/SQL Aufruf BEGIN:VCALENDAR VERSION:2.0 PRODID: METHOD:PUBLISH BEGIN:VEVENT ORGANIZER;CN="DOAG SUMMARY:DOAG2013 DESCRIPTION:DOAG Jahreskonferenz 2013 CLASS:PUBLIC DTSTART: T080000Z DTEND: T180000Z DTSTAMP: T125900Z END:VEVENT END:VCALENDAR

26 2. a) Link zu ical Feed in der Anwendung

27 2. b) Kalenderabonnement

28 Deployment mobiler Web-Anwendungen Interne Anwednungen Bereitstellung wie jede andere APEX-Anwendung Externer Zugriff nur via VPN Öffentliche Anwendungen Bereitstellung auf extern zugänglicher APEX Engine Alternative: Bereitstellung in der Cloud (Oracle Public Cloud)

29 Weitere Informationen Tutorial: Mobile APEX Anwendungen Zugriff auf das GPS inkl. HTML5 Geolocation Plugin Zugriff auf die Kamera Deutschsprachige APEX Community-Webseite APEX im OTN

Ähnliche Dokumente

Mobile Webapps in kürzester Zeit: APEX mobile!

Mobile Webapps in kürzester Zeit: APEX mobile! Carsten Czarski ORACLE Deutschland B.V. & Co KG Riesstr. 25, 80992 München Schlüsselworte APEX, Mobile Anwendungen, jquery Mobile Einleitung Anwendungen für