SlideShare a Scribd company logo
1 of 31
Download to read offline
APEX World 2013




APEX &

  Christian Rokitta
   OGh APEX World
    9 April 2013
VOORAF



         Samenwerkingsverband van
         zelfstandige APEX professionals
         smart4apex.nl



         75 APEX sessions in 4 days +
         Symposium day with Oracle Dev Team
         kscope13.com
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 create
                 mobile apps using standardized web APIs
APP = WEBVIEW +
      PHONEGAP FRAMEWORK
    Native OS
       PhoneGap Container App

         WebView




                                JavaScript API


                                                 Native API
                <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
VRAAG


  Hoe krijgen wij APEX in de
PhoneGap WebView Container?
APEX & PHONEGAP
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 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
CAMERA API INTRO 1
Definitie JS functie:
navigator.camera.getPicture( cameraSuccess
                           , cameraError
                         [ , cameraOptions ] );


cameraSucces/Error: functions
CAMERA API INTRO 2
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, base64 encoded string
     DATA_URL : 0,        // Return image as
  saveToPhotoAlbum: false };
     FILE_URI : 1         // Return image file URI
 };
CAMERA API SCRIPT 1
document.addEventListener("deviceready", onDeviceReady, onFa
il);
// 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 -> CLOB
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
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-PLATFORM
APEX 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>
CONTACT ME
E   christian@rokitta.nl
W   themes4apex.nl
B   rokitta.blogspot.com
T   @crokitta
VRAGEN & DISCUSSIE

More Related Content

What's hot

Dynamic components using SPA concepts in AEM
Dynamic components using SPA concepts in AEMDynamic components using SPA concepts in AEM
Dynamic components using SPA concepts in AEMBojana Popovska
 
Dynamic Components using Single-Page-Application Concepts in AEM/CQ
Dynamic Components using Single-Page-Application Concepts in AEM/CQDynamic Components using Single-Page-Application Concepts in AEM/CQ
Dynamic Components using Single-Page-Application Concepts in AEM/CQNetcetera
 
Chris OBrien - Pitfalls when developing with the SharePoint Framework (SPFx)
Chris OBrien - Pitfalls when developing with the SharePoint Framework (SPFx)Chris OBrien - Pitfalls when developing with the SharePoint Framework (SPFx)
Chris OBrien - Pitfalls when developing with the SharePoint Framework (SPFx)Chris O'Brien
 
Building Mobile Friendly APIs in Rails
Building Mobile Friendly APIs in RailsBuilding Mobile Friendly APIs in Rails
Building Mobile Friendly APIs in RailsJim Jeffers
 
Build single page applications using AngularJS on AEM
Build single page applications using AngularJS on AEMBuild single page applications using AngularJS on AEM
Build single page applications using AngularJS on AEMconnectwebex
 
Extra aem development tools by Justin Edelson
Extra aem development tools by Justin EdelsonExtra aem development tools by Justin Edelson
Extra aem development tools by Justin EdelsonAEM HUB
 
Creating a Business Oriented UI in APEX
Creating a Business Oriented UI in APEXCreating a Business Oriented UI in APEX
Creating a Business Oriented UI in APEXEnkitec
 
Crash Course in AngularJS + Ionic (Deep dive)
Crash Course in AngularJS + Ionic (Deep dive)Crash Course in AngularJS + Ionic (Deep dive)
Crash Course in AngularJS + Ionic (Deep dive)ColdFusionConference
 
Build single page applications using AngularJS on AEM
Build single page applications using AngularJS on AEMBuild single page applications using AngularJS on AEM
Build single page applications using AngularJS on AEMAdobeMarketingCloud
 
WordPress REST API v2: Overview & Exploring
WordPress REST API v2: Overview & ExploringWordPress REST API v2: Overview & Exploring
WordPress REST API v2: Overview & ExploringNick Pelton
 
Enemy of the state
Enemy of the stateEnemy of the state
Enemy of the stateMike North
 
SharePoint PowerShell for the Admin and Developer - A Venn Diagram Experience
SharePoint PowerShell for the Admin and Developer - A Venn Diagram ExperienceSharePoint PowerShell for the Admin and Developer - A Venn Diagram Experience
SharePoint PowerShell for the Admin and Developer - A Venn Diagram ExperienceRicardo Wilkins
 
Apex 5.1 migration and templates - APAC webinar tour
Apex 5.1 migration and templates - APAC webinar tourApex 5.1 migration and templates - APAC webinar tour
Apex 5.1 migration and templates - APAC webinar tourLino Schildenfeld
 
Asp.Net 2.0 Presentation
Asp.Net 2.0 PresentationAsp.Net 2.0 Presentation
Asp.Net 2.0 Presentationsasidhar
 
Mock Servers - Fake All the Things!
Mock Servers - Fake All the Things!Mock Servers - Fake All the Things!
Mock Servers - Fake All the Things!Atlassian
 
BDD in Java using Cucumber
BDD in Java using CucumberBDD in Java using Cucumber
BDD in Java using Cucumberslavkurochkin
 
Creating an Effective Mobile API
Creating an Effective Mobile API Creating an Effective Mobile API
Creating an Effective Mobile API Nick DeNardis
 

What's hot (20)

Dynamic components using SPA concepts in AEM
Dynamic components using SPA concepts in AEMDynamic components using SPA concepts in AEM
Dynamic components using SPA concepts in AEM
 
Dynamic Components using Single-Page-Application Concepts in AEM/CQ
Dynamic Components using Single-Page-Application Concepts in AEM/CQDynamic Components using Single-Page-Application Concepts in AEM/CQ
Dynamic Components using Single-Page-Application Concepts in AEM/CQ
 
Chris OBrien - Pitfalls when developing with the SharePoint Framework (SPFx)
Chris OBrien - Pitfalls when developing with the SharePoint Framework (SPFx)Chris OBrien - Pitfalls when developing with the SharePoint Framework (SPFx)
Chris OBrien - Pitfalls when developing with the SharePoint Framework (SPFx)
 
Building Mobile Friendly APIs in Rails
Building Mobile Friendly APIs in RailsBuilding Mobile Friendly APIs in Rails
Building Mobile Friendly APIs in Rails
 
Build single page applications using AngularJS on AEM
Build single page applications using AngularJS on AEMBuild single page applications using AngularJS on AEM
Build single page applications using AngularJS on AEM
 
Extra aem development tools by Justin Edelson
Extra aem development tools by Justin EdelsonExtra aem development tools by Justin Edelson
Extra aem development tools by Justin Edelson
 
Creating a Business Oriented UI in APEX
Creating a Business Oriented UI in APEXCreating a Business Oriented UI in APEX
Creating a Business Oriented UI in APEX
 
Crash Course in AngularJS + Ionic (Deep dive)
Crash Course in AngularJS + Ionic (Deep dive)Crash Course in AngularJS + Ionic (Deep dive)
Crash Course in AngularJS + Ionic (Deep dive)
 
Build single page applications using AngularJS on AEM
Build single page applications using AngularJS on AEMBuild single page applications using AngularJS on AEM
Build single page applications using AngularJS on AEM
 
Joomla REST API
Joomla REST APIJoomla REST API
Joomla REST API
 
WordPress REST API v2: Overview & Exploring
WordPress REST API v2: Overview & ExploringWordPress REST API v2: Overview & Exploring
WordPress REST API v2: Overview & Exploring
 
APEX Themes and Templates
APEX Themes and TemplatesAPEX Themes and Templates
APEX Themes and Templates
 
Enemy of the state
Enemy of the stateEnemy of the state
Enemy of the state
 
Ionic by Example
Ionic by ExampleIonic by Example
Ionic by Example
 
SharePoint PowerShell for the Admin and Developer - A Venn Diagram Experience
SharePoint PowerShell for the Admin and Developer - A Venn Diagram ExperienceSharePoint PowerShell for the Admin and Developer - A Venn Diagram Experience
SharePoint PowerShell for the Admin and Developer - A Venn Diagram Experience
 
Apex 5.1 migration and templates - APAC webinar tour
Apex 5.1 migration and templates - APAC webinar tourApex 5.1 migration and templates - APAC webinar tour
Apex 5.1 migration and templates - APAC webinar tour
 
Asp.Net 2.0 Presentation
Asp.Net 2.0 PresentationAsp.Net 2.0 Presentation
Asp.Net 2.0 Presentation
 
Mock Servers - Fake All the Things!
Mock Servers - Fake All the Things!Mock Servers - Fake All the Things!
Mock Servers - Fake All the Things!
 
BDD in Java using Cucumber
BDD in Java using CucumberBDD in Java using Cucumber
BDD in Java using Cucumber
 
Creating an Effective Mobile API
Creating an Effective Mobile API Creating an Effective Mobile API
Creating an Effective Mobile API
 

Viewers also liked

"Native" Apps with APEX and PhoneGap
"Native" Apps with APEX and PhoneGap"Native" Apps with APEX and PhoneGap
"Native" Apps with APEX and PhoneGapChristian Rokitta
 
Developing Mobile Applications for iOS and Android the Oracle way
Developing Mobile Applications for iOS and Android the Oracle wayDeveloping Mobile Applications for iOS and Android the Oracle way
Developing Mobile Applications for iOS and Android the Oracle wayToronto-Oracle-Users-Group
 
5 Cool Things you can do with HTML5 and APEX
5 Cool Things you can do with HTML5 and APEX5 Cool Things you can do with HTML5 and APEX
5 Cool Things you can do with HTML5 and APEXRoel Hartman
 
New Features in Oracle ORAchk & EXAchk 12.2.0.1.1
New Features in Oracle ORAchk & EXAchk 12.2.0.1.1New Features in Oracle ORAchk & EXAchk 12.2.0.1.1
New Features in Oracle ORAchk & EXAchk 12.2.0.1.1Gareth Chapman
 
Best of both worlds: Create hybrid mobile applications with Oracle Applicatio...
Best of both worlds: Create hybrid mobile applications with Oracle Applicatio...Best of both worlds: Create hybrid mobile applications with Oracle Applicatio...
Best of both worlds: Create hybrid mobile applications with Oracle Applicatio...Roel Hartman
 
MT AG Rapid Application Development mit APEX 5 (Important: latest version on ...
MT AG Rapid Application Development mit APEX 5 (Important: latest version on ...MT AG Rapid Application Development mit APEX 5 (Important: latest version on ...
MT AG Rapid Application Development mit APEX 5 (Important: latest version on ...Niels de Bruijn
 

Viewers also liked (6)

"Native" Apps with APEX and PhoneGap
"Native" Apps with APEX and PhoneGap"Native" Apps with APEX and PhoneGap
"Native" Apps with APEX and PhoneGap
 
Developing Mobile Applications for iOS and Android the Oracle way
Developing Mobile Applications for iOS and Android the Oracle wayDeveloping Mobile Applications for iOS and Android the Oracle way
Developing Mobile Applications for iOS and Android the Oracle way
 
5 Cool Things you can do with HTML5 and APEX
5 Cool Things you can do with HTML5 and APEX5 Cool Things you can do with HTML5 and APEX
5 Cool Things you can do with HTML5 and APEX
 
New Features in Oracle ORAchk & EXAchk 12.2.0.1.1
New Features in Oracle ORAchk & EXAchk 12.2.0.1.1New Features in Oracle ORAchk & EXAchk 12.2.0.1.1
New Features in Oracle ORAchk & EXAchk 12.2.0.1.1
 
Best of both worlds: Create hybrid mobile applications with Oracle Applicatio...
Best of both worlds: Create hybrid mobile applications with Oracle Applicatio...Best of both worlds: Create hybrid mobile applications with Oracle Applicatio...
Best of both worlds: Create hybrid mobile applications with Oracle Applicatio...
 
MT AG Rapid Application Development mit APEX 5 (Important: latest version on ...
MT AG Rapid Application Development mit APEX 5 (Important: latest version on ...MT AG Rapid Application Development mit APEX 5 (Important: latest version on ...
MT AG Rapid Application Development mit APEX 5 (Important: latest version on ...
 

Similar to Oracle APEX & PhoneGap

[JMaghreb 2014] Developing JavaScript Mobile Apps Using Apache Cordova
[JMaghreb 2014] Developing JavaScript Mobile Apps Using Apache Cordova[JMaghreb 2014] Developing JavaScript Mobile Apps Using Apache Cordova
[JMaghreb 2014] Developing JavaScript Mobile Apps Using Apache CordovaHazem Saleh
 
Apache Cordova In Action
Apache Cordova In ActionApache Cordova In Action
Apache Cordova In ActionHazem Saleh
 
Creating a modern web application using Symfony API Platform, ReactJS and Red...
Creating a modern web application using Symfony API Platform, ReactJS and Red...Creating a modern web application using Symfony API Platform, ReactJS and Red...
Creating a modern web application using Symfony API Platform, ReactJS and Red...Jesus Manuel Olivas
 
Web APIs & Apps - Mozilla
Web APIs & Apps - MozillaWeb APIs & Apps - Mozilla
Web APIs & Apps - MozillaRobert Nyman
 
Creating a modern web application using Symfony API Platform Atlanta
Creating a modern web application using  Symfony API Platform AtlantaCreating a modern web application using  Symfony API Platform Atlanta
Creating a modern web application using Symfony API Platform AtlantaJesus Manuel Olivas
 
Introduction to Apache Cordova (Phonegap)
Introduction to Apache Cordova (Phonegap)Introduction to Apache Cordova (Phonegap)
Introduction to Apache Cordova (Phonegap)ejlp12
 
phonegap with angular js for freshers
phonegap with angular js for freshers    phonegap with angular js for freshers
phonegap with angular js for freshers dssprakash
 
Google Cloud Endpoints: Building Third-Party APIs on Google AppEngine
Google Cloud Endpoints: Building Third-Party APIs on Google AppEngineGoogle Cloud Endpoints: Building Third-Party APIs on Google AppEngine
Google Cloud Endpoints: Building Third-Party APIs on Google AppEngineRoman Kirillov
 
BlackBerry DevCon 2011 - PhoneGap and WebWorks
BlackBerry DevCon 2011 - PhoneGap and WebWorksBlackBerry DevCon 2011 - PhoneGap and WebWorks
BlackBerry DevCon 2011 - PhoneGap and WebWorksmwbrooks
 
(2018) Webpack Encore - Asset Management for the rest of us
(2018) Webpack Encore - Asset Management for the rest of us(2018) Webpack Encore - Asset Management for the rest of us
(2018) Webpack Encore - Asset Management for the rest of usStefan Adolf
 
WebNet Conference 2012 - Designing complex applications using html5 and knock...
WebNet Conference 2012 - Designing complex applications using html5 and knock...WebNet Conference 2012 - Designing complex applications using html5 and knock...
WebNet Conference 2012 - Designing complex applications using html5 and knock...Fabio Franzini
 
Play Support in Cloud Foundry
Play Support in Cloud FoundryPlay Support in Cloud Foundry
Play Support in Cloud Foundryrajdeep
 
HTML5 tutorial: canvas, offfline & sockets
HTML5 tutorial: canvas, offfline & socketsHTML5 tutorial: canvas, offfline & sockets
HTML5 tutorial: canvas, offfline & socketsRemy Sharp
 
Cannibalising The Google App Engine
Cannibalising The  Google  App  EngineCannibalising The  Google  App  Engine
Cannibalising The Google App Enginecatherinewall
 
IBM Cloud University: Build, Deploy and Scale Node.js Microservices
IBM Cloud University: Build, Deploy and Scale Node.js MicroservicesIBM Cloud University: Build, Deploy and Scale Node.js Microservices
IBM Cloud University: Build, Deploy and Scale Node.js MicroservicesChris Bailey
 
APEX Alpe Adria 2019 - JavaScript in APEX - do it right!
APEX Alpe Adria 2019 -  JavaScript in APEX - do it right!APEX Alpe Adria 2019 -  JavaScript in APEX - do it right!
APEX Alpe Adria 2019 - JavaScript in APEX - do it right!Marko Gorički
 
Building mobile applications with DrupalGap
Building mobile applications with DrupalGapBuilding mobile applications with DrupalGap
Building mobile applications with DrupalGapAlex S
 
Bringing the open web and APIs to mobile devices with Firefox OS - Whisky W...
 	Bringing the open web and APIs to mobile devices with Firefox OS - Whisky W... 	Bringing the open web and APIs to mobile devices with Firefox OS - Whisky W...
Bringing the open web and APIs to mobile devices with Firefox OS - Whisky W...Robert Nyman
 
Cloud Endpoints _Polymer_ Material design by Martin Görner
Cloud Endpoints_Polymer_Material design by Martin GörnerCloud Endpoints_Polymer_Material design by Martin Görner
Cloud Endpoints _Polymer_ Material design by Martin GörnerEuropean Innovation Academy
 

Similar to Oracle APEX & PhoneGap (20)

[JMaghreb 2014] Developing JavaScript Mobile Apps Using Apache Cordova
[JMaghreb 2014] Developing JavaScript Mobile Apps Using Apache Cordova[JMaghreb 2014] Developing JavaScript Mobile Apps Using Apache Cordova
[JMaghreb 2014] Developing JavaScript Mobile Apps Using Apache Cordova
 
Phone Gap
Phone GapPhone Gap
Phone Gap
 
Apache Cordova In Action
Apache Cordova In ActionApache Cordova In Action
Apache Cordova In Action
 
Creating a modern web application using Symfony API Platform, ReactJS and Red...
Creating a modern web application using Symfony API Platform, ReactJS and Red...Creating a modern web application using Symfony API Platform, ReactJS and Red...
Creating a modern web application using Symfony API Platform, ReactJS and Red...
 
Web APIs & Apps - Mozilla
Web APIs & Apps - MozillaWeb APIs & Apps - Mozilla
Web APIs & Apps - Mozilla
 
Creating a modern web application using Symfony API Platform Atlanta
Creating a modern web application using  Symfony API Platform AtlantaCreating a modern web application using  Symfony API Platform Atlanta
Creating a modern web application using Symfony API Platform Atlanta
 
Introduction to Apache Cordova (Phonegap)
Introduction to Apache Cordova (Phonegap)Introduction to Apache Cordova (Phonegap)
Introduction to Apache Cordova (Phonegap)
 
phonegap with angular js for freshers
phonegap with angular js for freshers    phonegap with angular js for freshers
phonegap with angular js for freshers
 
Google Cloud Endpoints: Building Third-Party APIs on Google AppEngine
Google Cloud Endpoints: Building Third-Party APIs on Google AppEngineGoogle Cloud Endpoints: Building Third-Party APIs on Google AppEngine
Google Cloud Endpoints: Building Third-Party APIs on Google AppEngine
 
BlackBerry DevCon 2011 - PhoneGap and WebWorks
BlackBerry DevCon 2011 - PhoneGap and WebWorksBlackBerry DevCon 2011 - PhoneGap and WebWorks
BlackBerry DevCon 2011 - PhoneGap and WebWorks
 
(2018) Webpack Encore - Asset Management for the rest of us
(2018) Webpack Encore - Asset Management for the rest of us(2018) Webpack Encore - Asset Management for the rest of us
(2018) Webpack Encore - Asset Management for the rest of us
 
WebNet Conference 2012 - Designing complex applications using html5 and knock...
WebNet Conference 2012 - Designing complex applications using html5 and knock...WebNet Conference 2012 - Designing complex applications using html5 and knock...
WebNet Conference 2012 - Designing complex applications using html5 and knock...
 
Play Support in Cloud Foundry
Play Support in Cloud FoundryPlay Support in Cloud Foundry
Play Support in Cloud Foundry
 
HTML5 tutorial: canvas, offfline & sockets
HTML5 tutorial: canvas, offfline & socketsHTML5 tutorial: canvas, offfline & sockets
HTML5 tutorial: canvas, offfline & sockets
 
Cannibalising The Google App Engine
Cannibalising The  Google  App  EngineCannibalising The  Google  App  Engine
Cannibalising The Google App Engine
 
IBM Cloud University: Build, Deploy and Scale Node.js Microservices
IBM Cloud University: Build, Deploy and Scale Node.js MicroservicesIBM Cloud University: Build, Deploy and Scale Node.js Microservices
IBM Cloud University: Build, Deploy and Scale Node.js Microservices
 
APEX Alpe Adria 2019 - JavaScript in APEX - do it right!
APEX Alpe Adria 2019 -  JavaScript in APEX - do it right!APEX Alpe Adria 2019 -  JavaScript in APEX - do it right!
APEX Alpe Adria 2019 - JavaScript in APEX - do it right!
 
Building mobile applications with DrupalGap
Building mobile applications with DrupalGapBuilding mobile applications with DrupalGap
Building mobile applications with DrupalGap
 
Bringing the open web and APIs to mobile devices with Firefox OS - Whisky W...
 	Bringing the open web and APIs to mobile devices with Firefox OS - Whisky W... 	Bringing the open web and APIs to mobile devices with Firefox OS - Whisky W...
Bringing the open web and APIs to mobile devices with Firefox OS - Whisky W...
 
Cloud Endpoints _Polymer_ Material design by Martin Görner
Cloud Endpoints_Polymer_Material design by Martin GörnerCloud Endpoints_Polymer_Material design by Martin Görner
Cloud Endpoints _Polymer_ Material design by Martin Görner
 

More from Christian Rokitta

Hitchhiker's guide to the Universal Theme
Hitchhiker's guide to the Universal ThemeHitchhiker's guide to the Universal Theme
Hitchhiker's guide to the Universal ThemeChristian Rokitta
 
Browser Developer Tools for APEX Developers
Browser Developer Tools for APEX DevelopersBrowser Developer Tools for APEX Developers
Browser Developer Tools for APEX DevelopersChristian Rokitta
 
Bootstrapify Universal Theme
Bootstrapify Universal ThemeBootstrapify Universal Theme
Bootstrapify Universal ThemeChristian Rokitta
 
Responsive Web Design & APEX Theme 25 (OGh APEX World 2014)
Responsive Web Design & APEX Theme 25 (OGh APEX World 2014)Responsive Web Design & APEX Theme 25 (OGh APEX World 2014)
Responsive Web Design & APEX Theme 25 (OGh APEX World 2014)Christian Rokitta
 
Face off apex template and themes - 3.0 - k-scope11
Face off   apex template and themes - 3.0 - k-scope11Face off   apex template and themes - 3.0 - k-scope11
Face off apex template and themes - 3.0 - k-scope11Christian Rokitta
 
Responsive Web Design & APEX Theme 25
Responsive Web Design & APEX Theme 25Responsive Web Design & APEX Theme 25
Responsive Web Design & APEX Theme 25Christian Rokitta
 
Confessions of an APEX Design Geek
Confessions of an APEX Design GeekConfessions of an APEX Design Geek
Confessions of an APEX Design GeekChristian Rokitta
 

More from Christian Rokitta (11)

Keep me moving goin mobile
Keep me moving   goin mobileKeep me moving   goin mobile
Keep me moving goin mobile
 
Hitchhiker's guide to the Universal Theme
Hitchhiker's guide to the Universal ThemeHitchhiker's guide to the Universal Theme
Hitchhiker's guide to the Universal Theme
 
Browser Developer Tools for APEX Developers
Browser Developer Tools for APEX DevelopersBrowser Developer Tools for APEX Developers
Browser Developer Tools for APEX Developers
 
Bootstrapify Universal Theme
Bootstrapify Universal ThemeBootstrapify Universal Theme
Bootstrapify Universal Theme
 
Plugins unplugged
Plugins unpluggedPlugins unplugged
Plugins unplugged
 
Challenges going mobile
Challenges going mobileChallenges going mobile
Challenges going mobile
 
APEX & Cookie Monster
APEX & Cookie MonsterAPEX & Cookie Monster
APEX & Cookie Monster
 
Responsive Web Design & APEX Theme 25 (OGh APEX World 2014)
Responsive Web Design & APEX Theme 25 (OGh APEX World 2014)Responsive Web Design & APEX Theme 25 (OGh APEX World 2014)
Responsive Web Design & APEX Theme 25 (OGh APEX World 2014)
 
Face off apex template and themes - 3.0 - k-scope11
Face off   apex template and themes - 3.0 - k-scope11Face off   apex template and themes - 3.0 - k-scope11
Face off apex template and themes - 3.0 - k-scope11
 
Responsive Web Design & APEX Theme 25
Responsive Web Design & APEX Theme 25Responsive Web Design & APEX Theme 25
Responsive Web Design & APEX Theme 25
 
Confessions of an APEX Design Geek
Confessions of an APEX Design GeekConfessions of an APEX Design Geek
Confessions of an APEX Design Geek
 

Recently uploaded

Generative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdfGenerative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdfIngrid Airi González
 
QCon London: Mastering long-running processes in modern architectures
QCon London: Mastering long-running processes in modern architecturesQCon London: Mastering long-running processes in modern architectures
QCon London: Mastering long-running processes in modern architecturesBernd Ruecker
 
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxThe Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxLoriGlavin3
 
Abdul Kader Baba- Managing Cybersecurity Risks and Compliance Requirements i...
Abdul Kader Baba- Managing Cybersecurity Risks  and Compliance Requirements i...Abdul Kader Baba- Managing Cybersecurity Risks  and Compliance Requirements i...
Abdul Kader Baba- Managing Cybersecurity Risks and Compliance Requirements i...itnewsafrica
 
A Framework for Development in the AI Age
A Framework for Development in the AI AgeA Framework for Development in the AI Age
A Framework for Development in the AI AgeCprime
 
Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024Hiroshi SHIBATA
 
Design pattern talk by Kaya Weers - 2024 (v2)
Design pattern talk by Kaya Weers - 2024 (v2)Design pattern talk by Kaya Weers - 2024 (v2)
Design pattern talk by Kaya Weers - 2024 (v2)Kaya Weers
 
Microservices, Docker deploy and Microservices source code in C#
Microservices, Docker deploy and Microservices source code in C#Microservices, Docker deploy and Microservices source code in C#
Microservices, Docker deploy and Microservices source code in C#Karmanjay Verma
 
The State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxThe State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxLoriGlavin3
 
Zeshan Sattar- Assessing the skill requirements and industry expectations for...
Zeshan Sattar- Assessing the skill requirements and industry expectations for...Zeshan Sattar- Assessing the skill requirements and industry expectations for...
Zeshan Sattar- Assessing the skill requirements and industry expectations for...itnewsafrica
 
Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Farhan Tariq
 
Landscape Catalogue 2024 Australia-1.pdf
Landscape Catalogue 2024 Australia-1.pdfLandscape Catalogue 2024 Australia-1.pdf
Landscape Catalogue 2024 Australia-1.pdfAarwolf Industries LLC
 
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesHow to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesThousandEyes
 
A Glance At The Java Performance Toolbox
A Glance At The Java Performance ToolboxA Glance At The Java Performance Toolbox
A Glance At The Java Performance ToolboxAna-Maria Mihalceanu
 
So einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdfSo einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdfpanagenda
 
Potential of AI (Generative AI) in Business: Learnings and Insights
Potential of AI (Generative AI) in Business: Learnings and InsightsPotential of AI (Generative AI) in Business: Learnings and Insights
Potential of AI (Generative AI) in Business: Learnings and InsightsRavi Sanghani
 
Modern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better StrongerModern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better Strongerpanagenda
 
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...Wes McKinney
 
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...Nikki Chapple
 
Decarbonising Buildings: Making a net-zero built environment a reality
Decarbonising Buildings: Making a net-zero built environment a realityDecarbonising Buildings: Making a net-zero built environment a reality
Decarbonising Buildings: Making a net-zero built environment a realityIES VE
 

Recently uploaded (20)

Generative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdfGenerative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdf
 
QCon London: Mastering long-running processes in modern architectures
QCon London: Mastering long-running processes in modern architecturesQCon London: Mastering long-running processes in modern architectures
QCon London: Mastering long-running processes in modern architectures
 
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxThe Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
 
Abdul Kader Baba- Managing Cybersecurity Risks and Compliance Requirements i...
Abdul Kader Baba- Managing Cybersecurity Risks  and Compliance Requirements i...Abdul Kader Baba- Managing Cybersecurity Risks  and Compliance Requirements i...
Abdul Kader Baba- Managing Cybersecurity Risks and Compliance Requirements i...
 
A Framework for Development in the AI Age
A Framework for Development in the AI AgeA Framework for Development in the AI Age
A Framework for Development in the AI Age
 
Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024
 
Design pattern talk by Kaya Weers - 2024 (v2)
Design pattern talk by Kaya Weers - 2024 (v2)Design pattern talk by Kaya Weers - 2024 (v2)
Design pattern talk by Kaya Weers - 2024 (v2)
 
Microservices, Docker deploy and Microservices source code in C#
Microservices, Docker deploy and Microservices source code in C#Microservices, Docker deploy and Microservices source code in C#
Microservices, Docker deploy and Microservices source code in C#
 
The State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxThe State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptx
 
Zeshan Sattar- Assessing the skill requirements and industry expectations for...
Zeshan Sattar- Assessing the skill requirements and industry expectations for...Zeshan Sattar- Assessing the skill requirements and industry expectations for...
Zeshan Sattar- Assessing the skill requirements and industry expectations for...
 
Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...
 
Landscape Catalogue 2024 Australia-1.pdf
Landscape Catalogue 2024 Australia-1.pdfLandscape Catalogue 2024 Australia-1.pdf
Landscape Catalogue 2024 Australia-1.pdf
 
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesHow to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
 
A Glance At The Java Performance Toolbox
A Glance At The Java Performance ToolboxA Glance At The Java Performance Toolbox
A Glance At The Java Performance Toolbox
 
So einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdfSo einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdf
 
Potential of AI (Generative AI) in Business: Learnings and Insights
Potential of AI (Generative AI) in Business: Learnings and InsightsPotential of AI (Generative AI) in Business: Learnings and Insights
Potential of AI (Generative AI) in Business: Learnings and Insights
 
Modern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better StrongerModern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
 
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
 
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
 
Decarbonising Buildings: Making a net-zero built environment a reality
Decarbonising Buildings: Making a net-zero built environment a realityDecarbonising Buildings: Making a net-zero built environment a reality
Decarbonising Buildings: Making a net-zero built environment a reality
 

Oracle APEX & PhoneGap

  • 1. APEX World 2013 APEX & Christian Rokitta OGh APEX World 9 April 2013
  • 2. VOORAF Samenwerkingsverband van zelfstandige APEX professionals smart4apex.nl 75 APEX sessions in 4 days + Symposium day with Oracle Dev Team kscope13.com
  • 3. AGENDA • PhoneGap: Concept en Architectuur • APEX & PhoneGap • PhoneGap API (met APEX) • Cross Platform App Development
  • 4. APEX FOR MOBILE WEB APPLICATIONS
  • 5. MOBILE APPS MET APEX SQL & PL/SQL
  • 8. NATIVE + WEB APP = HYBRID
  • 9. 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 create mobile apps using standardized web APIs
  • 10. APP = WEBVIEW + PHONEGAP FRAMEWORK Native OS PhoneGap Container App WebView JavaScript API Native API <HTML /> {CSS;} Javascript(); images.png
  • 11. INSTALLATIE PHONEGAP VOOR ANDROID • Eclipse • Android SDK • Android Development Tools (ADT) Plugin voor Eclipse IDE • Apache Cordova (PhoneGap) http://www.phonegap.com
  • 12. PHONEGAP PROJECT IN ECLIPSE • Project  New Eclipse Project  PhoneGap libs/js/xml kopiëren  Configuratie: java/xml/html bestanden • Deploy  Simulator/Smartphone
  • 13. VRAAG Hoe krijgen wij APEX in de PhoneGap WebView Container?
  • 14. APEX & PHONEGAP 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
  • 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. 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
  • 18. CAMERA API INTRO 1 Definitie JS functie: navigator.camera.getPicture( cameraSuccess , cameraError [ , cameraOptions ] ); cameraSucces/Error: functions
  • 19. CAMERA API INTRO 2 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, base64 encoded string DATA_URL : 0, // Return image as saveToPhotoAlbum: false }; FILE_URI : 1 // Return image file URI };
  • 20. CAMERA API SCRIPT 1 document.addEventListener("deviceready", onDeviceReady, onFa il); // Cordova is ready to be used! // function onDeviceReady() { pictureSource = navigator.camera.PictureSourceType; destinationType = navigator.camera.DestinationType; console.log('Device ready!'); }
  • 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. 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; }
  • 23. 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
  • 24. APEX: BASE64 -> CLOB 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
  • 28. 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>
  • 29. CROSS-PLATFORM APEX 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. CONTACT ME E christian@rokitta.nl W themes4apex.nl B rokitta.blogspot.com T @crokitta