DOJO Toolkit is an open source framework library well known for mobile web development close to native mobile applications for iPhone, iPad,BlackBerry, Android devices. It has close support for PhoneGap & renders controls with JavaScript , CSS 3 with HTML 5. It expects all features of Mobile Webkit browsers like Offline Cache, Browser manifest, local storage & isolation storage for mobile browsers etc.
- So , It’s just another feather of JQTouch , Sencha Touch , JQuery Mobile but it has some of it’s unique features like Native Mobile application support like Google Maps with Location track, Enterprise Charts for Mobile, Mobile Gauge etc.
- DOJO Toolkit initially is a project of Sun MicroSystems as open source DHTML based Ajax functionality with DOM support but later it’s divided into JavaScript, Ajax, HTML 5 , CSS 3 different features & provides native app support for mobile web 2.0
- Though initial it’s support was based on Eclipse IDE of Java but I was keen to explore it’s features in my favourite IDE Visual Studio. So Download the toolkit from http://dojotoolkit.org/download/ & extract it foundation files in three parts :
- Now , Add all the three folders of DOJO Toolkit “dijit, dojo, dojox” in Visual Studio Solution explorer & including “Show All Files” “include all the files in project”.
- Now start code by adding a new .aspx or .htm page with DOJO toolkit for Ajax, HTML 5, CSS 3, Google Ajax CDN, Mobile browser Webkit.
Sample Code:
<!DOCTYPE htmlPUBLIC“-//W3C//DTD XHTML 1.0 Transitional//EN”“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<script type=”text/javascript”src=”dojoroot/dojo/dojo.js”
djConfig=”parseOnLoad: true, isDebug: false”></script>
<script language=”javascript”type=”text/javascript”>
dojo.require(“dojox.mobile”);
dojo.require(“dojox.mobile.parser”);
dojo.requireIf(!dojo.isWebKit, “dojox.mobile.compat”);
</script>
//For Native iPhone view
<link rel=”Stylesheet”type=”text/css”href=”dojoroot/dojox/mobile/themes/iphone/iphone.css”/>
//For Native iPad view
<link rel=”Stylesheet”type=”text/css”href=”dojoroot/dojox/mobile/themes/iphone/ipad.css”/>
// For Android View
<link rel=”Stylesheet”type=”text/css”href=”dojoroot/dojox/mobile/themes/android/android.css”
// For BlackBerry View
<link rel=”Stylesheet”type=”text/css”href=”dojoroot/dojox/mobile/themes/blackberry/blackberry.css”
</head>
<body>
<div id=”main”dojoType=”dojox.mobile.View”selected=”true”>
<h1 dojoType=”dojox.mobile.Heading”>
Settings
</h1>
<ul dojoType=”dojox.mobile.EdgeToEdgeList”>
<li dojoType=”dojox.mobile.ListItem”icon=”http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/mobile/tests/images/i-icon-1.png”>
Coolness Mode
<div class=”mblItemSwitch”dojoType=”dojox.mobile.Switch”>
</div>
</li>
<li dojoType=”dojox.mobile.ListItem”icon=”http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/mobile/tests/images/i-icon-2.png”
rightText=”mac”moveTo=”disco”>
Disco Room
</li>
<li dojoType=”dojox.mobile.ListItem”icon=”http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/mobile/tests/images/i-icon-3.png”
rightText=”AcmePhone”moveTo=”disco”>
Carrier
</li>
</ul>
</div>
<div id=”disco”dojoType=”dojox.mobile.View”>
<h1 dojoType=”dojox.mobile.Heading”>
Hello
</h1>
<ul dojoType=”dojox.mobile.EdgeToEdgeList”>
<ul dojoType=”dojox.mobile.EdgeToEdgeList”>
<li dojoType=”dojox.mobile.ListItem”moveTo=”main”>
I’m a square , man
</li>
</ul>
</ul>
</div>
</body>
</html>
- Check out the output for iPhone 4 & iPad View:
- iPAD 2 View
- DOJO Toolkit for Mobile in BlackBerry 9800 View:
- Android Tablet 3.0 View for DOJO Ajax HTML 5 view :
- Lets explore with DOJO with Ajax, DOM HTML 5 with CSS 3 for mobile browser WebKit.
