The Mobile & Digital Assistant Blog covers the latest in mobile and conversational AI development and engagement

ADF Mobile - In the Dojo!

Jeff Davies
Cloud Success Manager

The other day I heard someone say that Mobile Suite couldn’t do Dojo. This didn’t make sense to me since Dojo is a HTML5 technology and Mobile Suite supports HTML5 natively. So I thought I put together a small proof-of-concept project to show how easy it is to create a Dojo project in a local HTML page.

I began by creating a new ADF Mobile project in JDeveloper. Then I added a single Local HTML feature to the admf-features.xml file (in the View Controller/Application Sources/META-INF folder).

Adding the Local HTML featutre to the project

After that is defined, I open the dojoExample.html file that I created when I added the Local HTML feature and replace the default HTML with the following:

 <!DOCTYPE html>


ADF Mobile Dojo tutorial | Part I


<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>


<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>


<meta name="apple-mobile-web-app-capable" content="yes"/>


<title>Dojo ADF Mobile tutorial</title>


<!-- application stylesheet will go here -->


<!-- dynamically apply native visual theme according to the browser user agent -->


<script type="text/freezescript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.9.2/dojox/mobile/deviceTheme.js"></script>


<!-- dojo configuration options -->


<script type="text/freezescript">


dojoConfig = {


async: true,


parseOnLoad: false






<!-- dojo bootstrap -->


<script type="text/freezescript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.9.2/dojo/dojo.js"></script>


<!-- dojo application code -->


<script type="text/freezescript">




















], function (parser) {
// now parse the page for widgets




<body style="visibility:hidden;">


<!-- the view or "page"; select it as the "home" screen -->


<div id="settings" data-dojo-type="dojox/mobile/View" data-dojo-props="selected:true">


<!-- a sample heading -->


<h1 data-dojo-type="dojox/mobile/Heading">ADF Mobile Dojo!</h1>


<!-- a rounded rectangle list container -->


<ul data-dojo-type="dojox/mobile/RoundRectList">


<!-- list item with an icon containing a switch -->


<li data-dojo-type="dojox/mobile/ListItem" data-dojo-props="icon: 'images/ic-Airline-red48.png'">Airplane Mode


<!-- the switch -->


<div data-dojo-type="dojox/mobile/Switch"></div>




<!-- list item with an icon that slides this view away and then loads another page -->


<li data-dojo-type="dojox/mobile/ListItem" data-dojo-props="icon: 'images/ic_wireless.png', rightText:'mac'">Wi-Fi</li>


<!-- list item with an icon that slides to a view called "general" -->


<li data-dojo-type="dojox/mobile/ListItem" data-dojo-props="icon: 'images/ic_crm.png', rightText:'AcmePhone'">Carrier</li>





Now compile and deploy to the emulator or device of your choice as usual. The result is exactly what you would expect:

The Dojo project in the iOS simulator

As you can see it is pretty straight-forward. In my next installment I'll be showing you how to call ADF Mobile interfaces from within the Dojo page.

Join the discussion

Comments ( 4 )
  • guest Tuesday, May 6, 2014

    Is it possible to build/compile iOS apps using Windows with Oracle ADF Mobile?

  • Jeff Davies Tuesday, May 6, 2014

    @guest - I wish. You can create the app in Windows, but to compile the final version for iOS (or to test it in the iOS simulator) you need to use a Mac. I bought a Mac Mini for around $500 USD last year for this purpose and I can create Andriod and iOS deployables using Oracle Mobile Suite on the Mac Mini.

    Sadly for Windows machines, they can't compile Mac code. :(

  • guest Tuesday, July 8, 2014

    it seem part of the text in abouve exmple was cut.

  • Jeff Davies Tuesday, July 8, 2014

    @guest The text appears to be cut in the blog, but if you copy and paste the XL text it will all appear. It looks like I need to reformat the text for a narrower display in the future.

    - Jeff

Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.

Recent Content