APEX World 2013 APEX & Christian Rokitta OGh APEX World 9 April 2013
Samenwerkingsverband van zelfstandige APEX professionals smart4apex.nl 75 APEX sessions in 4 days + Symposium day with Oracle Dev Team kscope13.com
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
JavaScript API Native API Native OS PhoneGap Container App WebView <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, Camera.DestinationType = { popoveroptions: CameraPopoverOptions, DATA_URL : 0, savetophotoalbum: false }; }; FILE_URI : 1 // Return image as base64 encoded string // 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 l_blob l_id BEGIN CLOB; BLOB; NUMBER; -- 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';"> </html> </body>
<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>
christian@rokitta.nl themes4apex.nl rokitta.blogspot.com @crokitta