SlideShare uma empresa Scribd logo
1 de 31
Baixar para ler 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

Mais conteúdo relacionado

Mais procurados

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
 

Mais procurados (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
 

Destaque

"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
 

Destaque (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 ...
 

Semelhante a 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
 

Semelhante a 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
 

Mais de 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
 

Mais de 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
 

Último

SIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENT
SIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENTSIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENT
SIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENTxtailishbaloch
 
UiPath Studio Web workshop series - Day 4
UiPath Studio Web workshop series - Day 4UiPath Studio Web workshop series - Day 4
UiPath Studio Web workshop series - Day 4DianaGray10
 
Novo Nordisk's journey in developing an open-source application on Neo4j
Novo Nordisk's journey in developing an open-source application on Neo4jNovo Nordisk's journey in developing an open-source application on Neo4j
Novo Nordisk's journey in developing an open-source application on Neo4jNeo4j
 
CyberSecurity - Computers In Libraries 2024
CyberSecurity - Computers In Libraries 2024CyberSecurity - Computers In Libraries 2024
CyberSecurity - Computers In Libraries 2024Brian Pichman
 
Introduction to RAG (Retrieval Augmented Generation) and its application
Introduction to RAG (Retrieval Augmented Generation) and its applicationIntroduction to RAG (Retrieval Augmented Generation) and its application
Introduction to RAG (Retrieval Augmented Generation) and its applicationKnoldus Inc.
 
IT Service Management (ITSM) Best Practices for Advanced Computing
IT Service Management (ITSM) Best Practices for Advanced ComputingIT Service Management (ITSM) Best Practices for Advanced Computing
IT Service Management (ITSM) Best Practices for Advanced ComputingMAGNIntelligence
 
2024.03.12 Cost drivers of cultivated meat production.pdf
2024.03.12 Cost drivers of cultivated meat production.pdf2024.03.12 Cost drivers of cultivated meat production.pdf
2024.03.12 Cost drivers of cultivated meat production.pdfThe Good Food Institute
 
Extra-120324-Visite-Entreprise-icare.pdf
Extra-120324-Visite-Entreprise-icare.pdfExtra-120324-Visite-Entreprise-icare.pdf
Extra-120324-Visite-Entreprise-icare.pdfInfopole1
 
20140402 - Smart house demo kit
20140402 - Smart house demo kit20140402 - Smart house demo kit
20140402 - Smart house demo kitJamie (Taka) Wang
 
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedIn
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedInOutage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedIn
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedInThousandEyes
 
LF Energy Webinar - Unveiling OpenEEMeter 4.0
LF Energy Webinar - Unveiling OpenEEMeter 4.0LF Energy Webinar - Unveiling OpenEEMeter 4.0
LF Energy Webinar - Unveiling OpenEEMeter 4.0DanBrown980551
 
The Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and InsightThe Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and InsightSafe Software
 
Key Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdfKey Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdfCheryl Hung
 
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024Alkin Tezuysal
 
My key hands-on projects in Quantum, and QAI
My key hands-on projects in Quantum, and QAIMy key hands-on projects in Quantum, and QAI
My key hands-on projects in Quantum, and QAIVijayananda Mohire
 
TrustArc Webinar - How to Live in a Post Third-Party Cookie World
TrustArc Webinar - How to Live in a Post Third-Party Cookie WorldTrustArc Webinar - How to Live in a Post Third-Party Cookie World
TrustArc Webinar - How to Live in a Post Third-Party Cookie WorldTrustArc
 
Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - Tech
Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - TechWebinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - Tech
Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - TechProduct School
 
EMEA What is ThousandEyes? Webinar
EMEA What is ThousandEyes? WebinarEMEA What is ThousandEyes? Webinar
EMEA What is ThousandEyes? WebinarThousandEyes
 
March Patch Tuesday
March Patch TuesdayMarch Patch Tuesday
March Patch TuesdayIvanti
 

Último (20)

SIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENT
SIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENTSIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENT
SIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENT
 
UiPath Studio Web workshop series - Day 4
UiPath Studio Web workshop series - Day 4UiPath Studio Web workshop series - Day 4
UiPath Studio Web workshop series - Day 4
 
Novo Nordisk's journey in developing an open-source application on Neo4j
Novo Nordisk's journey in developing an open-source application on Neo4jNovo Nordisk's journey in developing an open-source application on Neo4j
Novo Nordisk's journey in developing an open-source application on Neo4j
 
CyberSecurity - Computers In Libraries 2024
CyberSecurity - Computers In Libraries 2024CyberSecurity - Computers In Libraries 2024
CyberSecurity - Computers In Libraries 2024
 
Introduction to RAG (Retrieval Augmented Generation) and its application
Introduction to RAG (Retrieval Augmented Generation) and its applicationIntroduction to RAG (Retrieval Augmented Generation) and its application
Introduction to RAG (Retrieval Augmented Generation) and its application
 
IT Service Management (ITSM) Best Practices for Advanced Computing
IT Service Management (ITSM) Best Practices for Advanced ComputingIT Service Management (ITSM) Best Practices for Advanced Computing
IT Service Management (ITSM) Best Practices for Advanced Computing
 
2024.03.12 Cost drivers of cultivated meat production.pdf
2024.03.12 Cost drivers of cultivated meat production.pdf2024.03.12 Cost drivers of cultivated meat production.pdf
2024.03.12 Cost drivers of cultivated meat production.pdf
 
Extra-120324-Visite-Entreprise-icare.pdf
Extra-120324-Visite-Entreprise-icare.pdfExtra-120324-Visite-Entreprise-icare.pdf
Extra-120324-Visite-Entreprise-icare.pdf
 
20140402 - Smart house demo kit
20140402 - Smart house demo kit20140402 - Smart house demo kit
20140402 - Smart house demo kit
 
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedIn
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedInOutage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedIn
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedIn
 
LF Energy Webinar - Unveiling OpenEEMeter 4.0
LF Energy Webinar - Unveiling OpenEEMeter 4.0LF Energy Webinar - Unveiling OpenEEMeter 4.0
LF Energy Webinar - Unveiling OpenEEMeter 4.0
 
The Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and InsightThe Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and Insight
 
Key Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdfKey Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdf
 
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024
 
My key hands-on projects in Quantum, and QAI
My key hands-on projects in Quantum, and QAIMy key hands-on projects in Quantum, and QAI
My key hands-on projects in Quantum, and QAI
 
TrustArc Webinar - How to Live in a Post Third-Party Cookie World
TrustArc Webinar - How to Live in a Post Third-Party Cookie WorldTrustArc Webinar - How to Live in a Post Third-Party Cookie World
TrustArc Webinar - How to Live in a Post Third-Party Cookie World
 
SheDev 2024
SheDev 2024SheDev 2024
SheDev 2024
 
Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - Tech
Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - TechWebinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - Tech
Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - Tech
 
EMEA What is ThousandEyes? Webinar
EMEA What is ThousandEyes? WebinarEMEA What is ThousandEyes? Webinar
EMEA What is ThousandEyes? Webinar
 
March Patch Tuesday
March Patch TuesdayMarch Patch Tuesday
March Patch Tuesday
 

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