ADF Mobile - In the Dojo!

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.

Comments:

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

Posted by guest on May 06, 2014 at 01:28 PM PDT #

@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. :(

Posted by Jeff Davies on May 06, 2014 at 03:35 PM PDT #

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

Posted by guest on July 08, 2014 at 01:18 AM PDT #

@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

Posted by Jeff Davies on July 08, 2014 at 08:26 AM PDT #

Post a Comment:
  • HTML Syntax: NOT allowed
About

This blog is is dedicated to announcements,tips and tricks and other items related to developing, integrating, securing, and managing mobile applications using Oracle's Mobile Platform. It is created and maintained by the Oracle Mobile product development team.

Archive of past entries

Even More Mobile Development Blogs

Oracle A-Team Site - Mobile Related Entries

Code samples from the Community

Fusion Middleware Blogs

Search

Archives
« July 2015
SunMonTueWedThuFriSat
   
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 
       
Today