Oracle APEX & PhoneGap

APEX World 2013

APEX &

Christian Rokitta
OGh APEX World
9 April 2013

VOORAF

Samenwerkingsverband van
zelfstandige APEX professionals
smart4apex.nl

75 APEX sessions in 4 days +
Symposium day with Oracle Dev Team
kscope13.com

AGENDA

• PhoneGap: Concept en Architectuur

• APEX & PhoneGap

• PhoneGap API (met APEX)

• Cross Platform App Development

APEX FOR MOBILE WEB
APPLICATIONS

MOBILE APPS MET APEX

SQL & PL/SQL

WAAROM PHONEGAP
Easily create apps using the web technologies
you know and love: HTML, CSS, and JavaScript

PhoneGap is a free and open source framework that allows you to create
mobile apps using standardized web APIs

APP = WEBVIEW +
PHONEGAP FRAMEWORK
Native OS
PhoneGap Container App

WebView

JavaScript API

Native API
<HTML />
{CSS;}
Javascript();
images.png

INSTALLATIE PHONEGAP VOOR
ANDROID
• Eclipse

• Android SDK

• Android Development Tools (ADT)
Plugin voor Eclipse IDE

• Apache Cordova (PhoneGap)
http://www.phonegap.com

PHONEGAP PROJECT IN ECLIPSE
• Project
 New Eclipse Project
 PhoneGap libs/js/xml kopiëren
 Configuratie: java/xml/html bestanden
• Deploy  Simulator/Smartphone

VRAAG

Hoe krijgen wij APEX in de
PhoneGap WebView Container?

APEX & PHONEGAP
A. APEX URL ipv index.html aanroepen
in MainActivity.java:
super.loadUrl("http://apex.oracle.com/pls/apex/f?p=41097:1");

B. PhoneGap libraries in APEX pagina’s
opnemen

DOMAIN WHITELIST
• Domain Whitelisting is een security model om
toegang tot servers buiten de WebView
Containers te controleren.

• Standaard worden alle aanroepen in het net
geblokkeerd.

• De ontwikkelaar kan toegang tot (sub-)
domeinen declareren.

WHITELISTING SYNTAX
• <access> element, W3C specificatie:
<access origin="http://example.com" />
<access origin="https://example.com" subdomains="true" />

• Platform afhankelijk
– Android: res/xml/cordova.xml,
volledige ondersteuning syntax
– Windows: default alle domeinen toegankelijk
– iOS: geen ondersteuning protocollen,
* syntax flexibeler

CAMERA API INTRO 1
Definitie JS functie:
navigator.camera.getPicture( cameraSuccess
, cameraError
[ , cameraOptions ] );

cameraSucces/Error: functions

CAMERA API INTRO 2
cameraOptions:

{ quality : 75,
destinationType : Camera.DestinationType.DATA_URL,
sourceType : Camera.PictureSourceType.CAMERA,
allowEdit : true,
encodingType: Camera.EncodingType.JPEG,
targetWidth: 100,
targetHeight: 100,
Camera.DestinationType = {
popoverOptions: CameraPopoverOptions, base64 encoded string
DATA_URL : 0, // Return image as
saveToPhotoAlbum: false };
FILE_URI : 1 // Return image file URI
};

CAMERA API SCRIPT 1
document.addEventListener("deviceready", onDeviceReady, onFa
il);
// Cordova is ready to be used!
//

function onDeviceReady() {
pictureSource = navigator.camera.PictureSourceType;
destinationType = navigator.camera.DestinationType;
console.log('Device ready!');
}

CAMERA API SCRIPT 2
// A button will call this function
//
function capturePhoto() {
// Take picture using device camera
// and retrieve image as base64-encoded string
navigator.camera.getPicture(
onPhotoDataSuccess
, onFail
, {quality: 50
,destinationType: destinationType.DATA_URL}
);
}

CAMERA API SCRIPT 3
function onPhotoDataSuccess(imageData) {
// Unhide image element
$("#smallImage").css("display", "block");

// Show the captured photo
$("#smallImage").attr(
"src"
, "data:image/jpg;base64," + imageData);

// Copy image data
staticImg = imageData;
}

APEX: BASE64 -> CLOB
// Function to upload CLOB data using APEX AJAX API

function clob_set() {
var clob_ob = new apex.ajax.clob(

function() {
var rs = p.readyState
if (rs == 1 || rs == 2 || rs == 3) {
$.mobile.showPageLoadingMsg();
} else if (rs == 4) {
$s('P1_RESPONSE', p.responseText);
$.mobile.hidePageLoadingMsg()
} else {
return false;
}
});
clob_ob._set(staticImg);
}
http://carlback.blogspot.nl/2008/04/new-stuff-4-over-head-with-clob.html

APEX: BASE64 -> CLOB
DECLARE
l_clob CLOB;
l_blob BLOB;
l_id NUMBER;
BEGIN

-- fetch the image CLOB from the collection
SELECT clob001
INTO l_clob
FROM apex_collections
WHERE collection_name = 'CLOB_CONTENT';

l_id := blob_test_seq.NEXTVAL;

-- convert base64 CLOB into BLOB image
l_blob := apex_web_service.clobbase642blob(l_clob);

INSERT INTO blob_test(id, blob_content, mime_type, file_name)
VALUES (l_id, l_blob, 'image/jpeg', 'image' || l_id || '.jpg');
END;

http://carlback.blogspot.nl/2008/04/new-stuff-4-over-head-with-clob.html

REDIRECT IN INDEX.HTML

<!DOCTYPE html>
<html>
<head>
<title>Redirect</title>
</head>
<body
onload="window.location.href='http://apex.oracle.com/pls/apex/f?p=demo';">
</body>
</html>

CROSS-PLATFORM
APEX PAGE TEMPLATE
<script>
(function loadCordova() {

//Initialize our user agent string to lower case.
var uagent = navigator.userAgent.toLowerCase();

if (uagent.search("android") > -1) {
document.write('<script type="text/javascript" ' +
'src="#WORKSPACE_IMAGES#cordova.android.js">' +
'<//script>');
} else if (uagent.search("iphone") > -1) {
document.write('<script type="text/javascript" ' +
'src="#WORKSPACE_IMAGES#cordova.ios.js">' +
'<//script>');
}
})();
</script>

CONTACT ME
E christian@rokitta.nl
W themes4apex.nl
B rokitta.blogspot.com
T @crokitta

Oracle APEX & PhoneGap

More Related Content

What's hot

Viewers also liked

Similar to Oracle APEX & PhoneGap

More from Christian Rokitta

Recently uploaded

Oracle APEX & PhoneGap