APEX World 2013APEX &  Christian Rokitta   OGh APEX World    9 April 2013
VOORAF         Samenwerkingsverband van         zelfstandige APEX professionals         smart4apex.nl         75 APEX sess...
AGENDA• PhoneGap: Concept en Architectuur• APEX & PhoneGap• PhoneGap API (met APEX)• Cross Platform App Development
APEX FOR MOBILE WEBAPPLICATIONS
MOBILE APPS MET APEX                       SQL & PL/SQL
GEDRAG GEBRUIKERS
APP VS MOBILE WEB
NATIVE + WEB APP = HYBRID
WAAROM PHONEGAPEasily create apps using the web technologiesyou know and love: HTML, CSS, and JavaScript  PhoneGap is a fr...
APP = WEBVIEW +      PHONEGAP FRAMEWORK    Native OS       PhoneGap Container App         WebView                         ...
INSTALLATIE PHONEGAP VOOR    ANDROID         • Eclipse         • Android SDK         • Android Development Tools (ADT)    ...
PHONEGAP PROJECT IN ECLIPSE • Project    New Eclipse Project    PhoneGap libs/js/xml kopiëren    Configuratie: java/xml...
VRAAG  Hoe krijgen wij APEX in dePhoneGap WebView Container?
APEX & PHONEGAPA. APEX URL ipv index.html aanroepen   in MainActivity.java:   super.loadUrl("http://apex.oracle.com/pls/ap...
DOMAIN WHITELIST• Domain Whitelisting is een security model om  toegang tot servers buiten de WebView  Containers te contr...
WHITELISTING SYNTAX• <access> element, W3C specificatie:  <access origin="http://example.com" />  <access origin="https://...
PHONEGAP API
CAMERA API INTRO 1Definitie JS functie:navigator.camera.getPicture( cameraSuccess                           , cameraError ...
CAMERA API INTRO 2cameraOptions:{ quality : 75,  destinationType : Camera.DestinationType.DATA_URL,  sourceType : Camera.P...
CAMERA API SCRIPT 1document.addEventListener("deviceready", onDeviceReady, onFail);// Cordova is ready to be used!//functi...
CAMERA API SCRIPT 2// A button will call this function//function capturePhoto() {   // Take picture using device camera   ...
CAMERA API SCRIPT 3function onPhotoDataSuccess(imageData) {   // Unhide image element   $("#smallImage").css("display", "b...
APEX: BASE64 -> CLOB// Function to upload CLOB data using APEX AJAX APIfunction clob_set() {   var clob_ob = new apex.ajax...
APEX: BASE64 -> CLOBDECLARE   l_clob   CLOB;   l_blob   BLOB;   l_id     NUMBER;BEGIN  -- fetch the image CLOB from the co...
ALTERNATIEF: APEX IN IFRAME
ADOBE PHONEGAP BUILD
PHONEGAP BUILD WEBINTERFACE
REDIRECT IN INDEX.HTML<!DOCTYPE html><html>  <head>  <title>Redirect</title>  </head>  <bodyonload="window.location.href=h...
CROSS-PLATFORMAPEX PAGE TEMPLATE<script>(function loadCordova() { //Initialize our user agent string to lower case. var ua...
CONTACT MEE   christian@rokitta.nlW   themes4apex.nlB   rokitta.blogspot.comT   @crokitta
VRAGEN & DISCUSSIE
Upcoming SlideShare
Loading in...5
×

Oracle APEX & PhoneGap

2,033

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
2,033
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
41
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Oracle APEX & PhoneGap

  1. 1. APEX World 2013APEX & Christian Rokitta OGh APEX World 9 April 2013
  2. 2. VOORAF Samenwerkingsverband van zelfstandige APEX professionals smart4apex.nl 75 APEX sessions in 4 days + Symposium day with Oracle Dev Team kscope13.com
  3. 3. AGENDA• PhoneGap: Concept en Architectuur• APEX & PhoneGap• PhoneGap API (met APEX)• Cross Platform App Development
  4. 4. APEX FOR MOBILE WEBAPPLICATIONS
  5. 5. MOBILE APPS MET APEX SQL & PL/SQL
  6. 6. GEDRAG GEBRUIKERS
  7. 7. APP VS MOBILE WEB
  8. 8. NATIVE + WEB APP = HYBRID
  9. 9. WAAROM PHONEGAPEasily create apps using the web technologiesyou 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
  10. 10. APP = WEBVIEW + PHONEGAP FRAMEWORK Native OS PhoneGap Container App WebView JavaScript API Native API <HTML /> {CSS;} Javascript(); images.png
  11. 11. INSTALLATIE PHONEGAP VOOR ANDROID • Eclipse • Android SDK • Android Development Tools (ADT) Plugin voor Eclipse IDE • Apache Cordova (PhoneGap)http://www.phonegap.com
  12. 12. PHONEGAP PROJECT IN ECLIPSE • Project  New Eclipse Project  PhoneGap libs/js/xml kopiëren  Configuratie: java/xml/html bestanden • Deploy  Simulator/Smartphone
  13. 13. VRAAG Hoe krijgen wij APEX in dePhoneGap WebView Container?
  14. 14. APEX & PHONEGAPA. 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
  15. 15. 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.
  16. 16. 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
  17. 17. PHONEGAP API
  18. 18. CAMERA API INTRO 1Definitie JS functie:navigator.camera.getPicture( cameraSuccess , cameraError [ , cameraOptions ] );cameraSucces/Error: functions
  19. 19. CAMERA API INTRO 2cameraOptions:{ 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 };
  20. 20. CAMERA API SCRIPT 1document.addEventListener("deviceready", onDeviceReady, onFail);// Cordova is ready to be used!//function onDeviceReady() { pictureSource = navigator.camera.PictureSourceType; destinationType = navigator.camera.DestinationType; console.log(Device ready!);}
  21. 21. 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} );}
  22. 22. CAMERA API SCRIPT 3function 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;}
  23. 23. APEX: BASE64 -> CLOB// Function to upload CLOB data using APEX AJAX APIfunction 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
  24. 24. 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
  25. 25. ALTERNATIEF: APEX IN IFRAME
  26. 26. ADOBE PHONEGAP BUILD
  27. 27. PHONEGAP BUILD WEBINTERFACE
  28. 28. REDIRECT IN INDEX.HTML<!DOCTYPE html><html> <head> <title>Redirect</title> </head> <bodyonload="window.location.href=http://apex.oracle.com/pls/apex/f?p=demo;"> </body></html>
  29. 29. 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>
  30. 30. CONTACT MEE christian@rokitta.nlW themes4apex.nlB rokitta.blogspot.comT @crokitta
  31. 31. VRAGEN & DISCUSSIE
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×