Embed Size (px)
Citation preview
APEX &
Christian Rokitta OGh APEX World
9 April 2013
APEX World 2013
75 APEX sessions in 4 days +
Symposium day with Oracle Dev Team kscope13.com
Samenwerkingsverband van
zelfstandige APEX professionals smart4apex.nl
• PhoneGap: Concept en Architectuur
• APEX & PhoneGap
• PhoneGap API (met APEX)
• Cross Platform App Development
SQL & PL/SQL
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
Native OS
PhoneGap Container App
WebView
Java
Scri
pt
AP
I
Nat
ive
AP
I
<HTML />
{CSS;}
Javascript();
images.png
• Eclipse
• Android SDK
• Android Development Tools (ADT) Plugin voor Eclipse IDE
• Apache Cordova (PhoneGap)
http://www.phonegap.com
• Project
New Eclipse Project
PhoneGap libs/js/xml kopiëren
Configuratie: java/xml/html bestanden
• Deploy Simulator/Smartphone
Hoe krijgen wij APEX in de
PhoneGap WebView Container?
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 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.
• <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
Definitie JS functie: navigator.camera.getPicture( cameraSuccess
, cameraError
[ , cameraOptions ] );
cameraSucces/Error: functions
cameraOptions:
{ quality : 75, destinationType : Camera.DestinationType.DATA_URL, sourceType : Camera.PictureSourceType.CAMERA, allowEdit : true, encodingType: Camera.EncodingType.JPEG, targetWidth: 100, targetHeight: 100, popoverOptions: CameraPopoverOptions, saveToPhotoAlbum: false };
Camera.DestinationType = { DATA_URL : 0, // Return image as base64 encoded string FILE_URI : 1 // Return image file URI };
document.addEventListener("deviceready", onDeviceReady, onFail);
// Cordova is ready to be used!
//
function onDeviceReady() {
pictureSource = navigator.camera.PictureSourceType;
destinationType = navigator.camera.DestinationType;
console.log('Device ready!');
}
// 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}
);
}
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;
}
// 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
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
<!DOCTYPE html>
<html>
<head>
<title>Redirect</title>
</head>
<body onload="window.location.href='http://apex.oracle.com/pls/apex/f?p=demo';">
</body>
</html>
<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>
