dojo in my lab – part 1
Last few weeks, been hooked onto dojo. Its a very powerful framework, and unbelivably simple to use and rich library. In this blog and the sequence of the blogs to follow, I would like to share my experiences with dojo, and the sample code which I have been writing to explore this amazing framework.
There is not much material on web, u will have to refer various tutorials..so this is an attempt to get everything in one place with more practical examples, so that it helps u guys.
Let me get started with the simple..Hello world?? its for C, C++ programmers.. 
I am bored of starting programming on a new language with a “Hello World”..let me start with a logon screen..which makes more sense in a web world.
So what do we need?? I have dojo, eclipse and tomcat..to keep it simple..search the web and get the latest and greatest versions of the above
when u download dojo, u get 3 folders dojo, dijit & dojox. dojo has the “core” and “base” framework and dijit is full of “widgets” and dojox has some extensions. thats all u need to know (as thats all I have learnt so far ) to get started. I drag dropped these 3 folders into WebContent\js\dojo folder (ofcourse I created a dynamic web project, and configured tomcat and tested with the classic “Hello World” JSP ha ha ha)
So lets get started..we need a username, password field and a login button. We will need a backend JSP/servlet which will take the username and password, do some check and sends back the true/false. thats all we need. And mind you I am planning to use JSON over XML…JSON is pretty simple..and please google and learn the notation quickly..
So here is the code and look out for my comments in the code…
<html>
<head>
<title>Login</title>
<!-- Following are some of the stylesheets that u get with dojo.
they provide a pretty cool look and feel. so lets use it -->
<link rel="StyleSheet" type="text/css"
href="js/dojo/dojo/resources/dojo.css">
<link rel="StyleSheet" type="text/css"
href="js/dojo/dijit/themes/tundra/tundra.css">
<!--
The following script is a configuration of dojo.
djConfig is the variable that we need to configure
So what am I saying?? I am just saying my base dojo
scripts are under js/dojo from the context root
as I dragged dropped all the dojo folder
(dojo, dojox & dojit) into /js/dojo
and I am asking dojo to parse for the dojo scripts
on load of the page.
-->
<script type="text/javascript">
var djConfig = {baseScriptUri :"js/dojo/", parseOnLoad :true};
</script>
<!--
following include is the actual dojo (compressed version) script
which holds all the scripts and loads the scripts as and when
required. this is all we need to do to use dojo
-->
<script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
<!--
Following is the list of "includes" or "imports" I am just
telling dojo that I am going to use the declared components
-->
<script type="text/javascript">
//Parser component that is used to parse the dojo scripts on load of page
dojo.require("dojo.parser");
dojo.require("dijit.form.TextBox"); //Text box widget
// Text box widget with validation capability
dojo.require("dijit.form.ValidationTextBox");
dojo.require("dijit.form.Button"); //Button widget
dojo.require("dijit.Tooltip"); //Tool tip widget
//Title page widget/container
dojo.require("dijit.TitlePane");
</script>
<!--
Then comes the functions and scripts that I am going to use.
-->
<script>
//This function needs to be called on click of the submit/login button
function submitLogin() {
//So what am I doing?? getting the username and password
//from the widgets (using dijit) and using the dojo xhr
//(XMLHttpHandler object) to invoke the singin.jsp, and telling it
//to handle the response as JSON (not XML) and call loginHandler()
//function onreadystate ain't that cool ??..
//there u go thats all we need to do for AJAX..coolest framework
var userName = dijit.byId("userName").value;
var password = dijit.byId("password").value;
dojo.xhrGet( {
url :"signin.jsp?userName=" + userName + "&password=" + password,
handleAs :"json",
handle :loginHandler
});
}
//This is called onreadystate..and what are we expecting?? a JSON object..
//and Dojo converted the JSON text stream to a object and
//passed as parameter..how cool!! To keep it simple I am just
//checking login attribute and if its true alerting success
function loginHandler(response) {
if (response.login) {
alert("login success");
} else {
alert("login failed");
}
}
</script>
<head>
<!-- Here is where I am using the dojo styles to make it look cool -->
<body>
<!-- Here is where I am using the title pane to get a cool pane around
my login form. -->
<div dojoType="dijit.TitlePane" title="Login" style="width: 400px;">
<form id="registration_form"> <!-- just a dummy form -->
<div>
<label>User Name:</label>
<!-- Following the userID field, I am using the validation text box
widget to show u guys how I can provide validatio rules.
I am telling that the value needs to be trimmed, and shud always be
lowercase, and should be validated as per the regexpression provided
in regexp attribute. Thats the regex for email validation.
and then I am saying the value is required, and if its invalid..
what message needs to be shown -->
<input type="text" maxlength=25
name="userName" id="userName" dojoType="dijit.form.ValidationTextBox"
trim="true" lowercase="true"
regExp="[a-z0-9._%+-]+@[a-z0-9-]+\.[a-z]{2,4}" required="true"
invalidMessage="Please enter a valid e-mail address" />
<!-- This is the coolest part..defining a span which is a tooltip.
The content of this element appears when I go over the text box.
I am connecting this tooltip to the above input box by providing
the "id" of the text box in the "connectId" attribute of Tooltip -->
<span dojoType="dijit.Tooltip" connectId="userName">
Enter User Name(email name)
</span>
<label>Password :</label>
<!-- this is not a big deal to understand now -->
<input id="password" type="password"
maxlength=25 name="last" dojoType="dijit.form.TextBox" trim="true"/>
<span dojoType="dijit.Tooltip" connectId="password">
Enter Password
</span>
<!-- the singin button which invokes the submitLogin()
script above on click -->
<button id="login" dojoType="dijit.form.Button" onclick="submitLogin">
Login
</button>
</div>
</form>
</div>
</body>
</html>
and here the code for the signin.jsp
<%@ page contentType="text/plain"%>
<%
try {
String userName = request.getParameter("userName");
String password = request.getParameter("password");
if (password.equals("dojoiscool")) {
out.println("{login: true}");
} else {
out.println("{login: false}");
}
} catch (Exception ex) {
out.println(ex.getMessage());
ex.printStackTrace();
}
%>
This can be a ASP, PHP or a ASPX page..or a simple CGI..it just needs to respond with a plain text JSON string. so dojo can be used with any server side program!! that’s another cool thing about dojo..on top of it it promises a browser independent Javascript ..what else do we need?
Bottomline
Dojo is cool, rich, powerful and easy to use framework. So now we know how to configure and use dojo, and how to do ajax using dojo…thats all for now..look out for more to come..have fun
vijjuk
