DOJO ToolKit with HTML 5 , CSS 3 & JavaScript for iPhone, iPad, Android & BlackBerry


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”&gt;

<html xmlns=”http://www.w3.org/1999/xhtml”&gt;

<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”&gt;

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&#8221;

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&#8221;

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.
Advertisements

About Anindita
Anindita Basak is working as Big Data Cloud Consultant in Microsoft. Worked in multiple MNCs as Developer & Senior Developer on Microsoft Azure, Data Platform, IoT & BI , Data Visualization, Data warehousing & ETL & of course in Hadoop platform.She played both as FTE & v- employee in Azure platform teams of Microsoft.Passionate about .NET , Java, Python & Data Science. She is also an active Big Data & Cloud Trainer & would love share her experience in IT Training Industry. She is an author, forum contributor, blogger & technical reviewer of various books on Big Data Hadoop, HDInsight, IoT & Data Science, SQL Server PDW & PowerBI.

4 Responses to DOJO ToolKit with HTML 5 , CSS 3 & JavaScript for iPhone, iPad, Android & BlackBerry

  1. Pingback: DOJO ToolKit with HTML 5 , CSS 3 & JavaScript for iPhone, iPad … | ThrowSMS News

  2. Pingback: DOJO ToolKit with HTML 5 , CSS 3 & JavaScript for iPhone, iPad … - EtondeGroup Blog of Web Applications | EtondeGroup Blog of Web Applications

  3. Pingback: Javascript toolkit | Ghyou

  4. Pingback: URL

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: