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
–>
<html>
<head>

 

<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

 

};

 

</script>

 

<!– 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">

 

require([

 

"dojox/mobile/parser",

 

"dojox/mobile/compat",

 

"dojo/domReady!",

 

"dojox/mobile/View",

 

"dojox/mobile/Heading",

 

"dojox/mobile/RoundRectList",

 

"dojox/mobile/ListItem",

 

"dojox/mobile/Switch"

 

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

 

});

 

</script>
</head>
<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>

 

</li>

 

<!– 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>

 

</ul>

 

</div>
</body>
</html>

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.