oracle apex & phonegap
DESCRIPTION
TRANSCRIPT
APEX &
Christian RokittaOGh APEX World
9 April 2013
APEX World 2013
VOORAF
75 APEX sessions in 4 days +Symposium day with Oracle Dev Teamkscope13.com
Samenwerkingsverband vanzelfstandige APEX professionalssmart4apex.nl
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
GEDRAG GEBRUIKERS
APP VS MOBILE WEB
NATIVE + WEB APP = HYBRID
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 createmobile apps using standardized web APIs
APEX!?
APP = WEBVIEW +PHONEGAP FRAMEWORKNative OS
PhoneGap Container App
WebView
Java
Scrip
t API
Nati
ve A
PI
<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
Demo!
VRAAG
Hoe krijgen wij APEX in dePhoneGap WebView Container?
APEX & PHONEGAP
A. APEX URL ipv index.html aanroepenin 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
PHONEGAP API
Definitie JS functie:navigator.camera.getPicture( cameraSuccess , cameraError [ , cameraOptions ] );
cameraSucces/Error: functions
CAMERA API INTRO 1
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 API INTRO 2
Camera.DestinationType = { DATA_URL : 0, // Return image as base64 encoded string FILE_URI : 1 // Return image file URI};
CAMERA API SCRIPT 1
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!');}
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 -> CLOBDECLARE 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
ALTERNATIEF: APEX IN IFRAME
ADOBE PHONEGAP BUILD
PHONEGAP BUILD WEBINTERFACE
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-PLATFORMAPEX 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>
VRAGEN & DISCUSSIE
?!