APEX World 2013 APEX & Christian Rokitta. OGh APEX World 9 April 2013

Size: px

Start display at page:

Download "APEX World 2013 APEX & Christian Rokitta. OGh APEX World 9 April 2013"

Ezra Mosley
10 years ago
Views:

1 APEX World 2013 APEX & Christian Rokitta OGh APEX World 9 April 2013

2 Samenwerkingsverband van zelfstandige APEX professionals smart4apex.nl 75 APEX sessions in 4 days + Symposium day with Oracle Dev Team kscope13.com

3 PhoneGap: Concept en Architectuur APEX & PhoneGap PhoneGap API (met APEX) Cross Platform App Development

5 SQL & PL/SQL

9 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

is a free and open source framework that allows

10 JavaScript API Native API Native OS PhoneGap Container App WebView <HTML /> {CSS;} Javascript(); images.png

11 Eclipse Android SDK Android Development Tools (ADT) Plugin voor Eclipse IDE Apache Cordova (PhoneGap)

12 Project New Eclipse Project PhoneGap libs/js/xml kopiëren Configuratie: java/xml/html bestanden Deploy Simulator/Smartphone

13 Hoe krijgen wij APEX in de PhoneGap WebView Container?

14 A. APEX URL ipv index.html aanroepen in MainActivity.java: super.loadurl(" B. PhoneGap libraries in APEX pagina s opnemen

java: super.loadurl("http://apex.oracle.

15 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.

Standaard worden alle aanroepen in het net geblokkeerd.

16 <access> element, W3C specificatie: <access origin=" /> <access origin=" subdomains="true" /> Platform afhankelijk Android: res/xml/cordova.xml, volledige ondersteuning syntax Windows: default alle domeinen toegankelijk ios: geen ondersteuning protocollen, * syntax flexibeler

com" subdomains="true" /> Platform afhankelijk Android: res/xml/cordova.

18 Definitie JS functie: navigator.camera.getpicture( camerasuccess, cameraerror [, cameraoptions ] ); camerasucces/error: functions

19 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

$DestinationType = { popoveroptions: CameraPopoverOptions, DATA_URL : 0, savetophotoalbum: false }; };$

20 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!'); }

21 // 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 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;

23 // 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);

24 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;

28 <!DOCTYPE html> <html> <head> <title>redirect</title> </head> <body onload="window.location.href=' </html> </body>

29 <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 themes4apex.nl

BASIC COMPONENTS. There are 3 basic components in every Apache Cordova project:

BASIC COMPONENTS. There are 3 basic components in every Apache Cordova project: Apache Cordova is a open-source mobile development framework. It allows you to use standard web technologies such as HTML5, CSS3 and JavaScript for cross-platform development, avoiding each mobile platform