Wednesday, 25 June 2014

DOJO Hello world

DOJO is a javascript framework for developing rich UI based web applications. Dojo built using javascript and html. Best part of dojo is its supports AJAX call and ready made UI components called Widgets.

Dojo comes with below packages:

1. Dojo
2. dijit
3. Dojox
4. Util

DOJO simple application to show how dojo can be used.

1. down load Dojo libray from www.dojotoolkit.org
2. extract the zip and keep in project folder as shown below


3. jsp file

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>

<link rel="stylesheet"
href="../dojo-release-1.0.0/dijit/themes/tundra/tundra.css">
<script type="text/javascript" djConfig="parseOnLoad: true"
src="../dojo-release-1.0.0/dojo/dojo.js"></script>

<script type="text/javascript" src="../dojo-release-1.0.0/dojo/dojo.js">

</script>

<script type="text/javascript">
dojo.require("dijit.form.TextBox");
dojo.require("dijit.form.ComboBox");
dojo.require("dijit.form.CheckBox");
dojo.require("dijit.form.DateTextBox");
</script>
</head>
<body class="tundra">
<p>Enter a date below:</p>
<input dojoType="dijit.form.DateTextBox" />
<p>Enter a Name below:</p>
<input dojoType="dijit.form.TextBox" />
<p>Select a Sate below:</p>


<select dojoType="dijit.form.ComboBox" autocomplete="true"
value="Enter a state">
<option selected="selected">Karnataka</option>
<option>AP</option>
<option>Maharastra</option>
<option>Keral</option>
</select>

<p>Check a Name below:</p>
<input dojoType="dijit.form.CheckBox" />

</body>
</html>


4. Run on server in eclipse

Now we can see the features provided by dojo like combo box, date picker etc.





No comments:

Post a Comment