It may me earlier to introduce dijit in this chapter. But it is not hard to push it as a last topic.
Dojo toolkit provide many widgets with many properties pre-programmed to reuse. So it is easy for the programmers to include this widget and override the properties as required. Dijit is built on top of dojo and hence require dojo core.
Let us understand it quickly with a code with textbox and button example.
Normal approach:
<input type="text" id="nameText" value="Enter Name" /><br />
<input type="button" id="clickBtn" value="Click" />
Dijit approach:
<input id="nameText" dojoType="dijit.form.TextBox" value="Enter Name" > </input><br />
<button id="dojoButton" dojoType="dijit.form.Button">Click</button>
Once the dojoType="dijit.form.Button" is added as an attribute to the element, dojo will convert it to its dijit element. Dijit can use the styles automatically while you include the dojo's themes. You can see it on browser with the following code. You should note the lines marked in bold in the code below.
Dojo toolkit provide many widgets with many properties pre-programmed to reuse. So it is easy for the programmers to include this widget and override the properties as required. Dijit is built on top of dojo and hence require dojo core.
Let us understand it quickly with a code with textbox and button example.
Normal approach:
<input type="text" id="nameText" value="Enter Name" /><br />
<input type="button" id="clickBtn" value="Click" />
Dijit approach:
<input id="nameText" dojoType="dijit.form.TextBox" value="Enter Name" > </input><br />
<button id="dojoButton" dojoType="dijit.form.Button">Click</button>
Once the dojoType="dijit.form.Button" is added as an attribute to the element, dojo will convert it to its dijit element. Dijit can use the styles automatically while you include the dojo's themes. You can see it on browser with the following code. You should note the lines marked in bold in the code below.
<!DOCTYPE html PUBLIC "-//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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Dijit Button Event</title>
<link href="js/dijit/themes/claro/claro.css" rel="stylesheet"/>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css">
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js" djConfig="parseOnLoad: true"></script>
<script type="text/javascript">
//Remember to import the following modules
dojo.require("dijit.form.Button");
dojo.require("dijit.form.TextBox");
dojo.require("dojo.NodeList-manipulate");//"text" method is defined inside this module.
dojo.ready(function(){
//note how I have binded the onClick function for the dijit button.
//if you try to access the button using dojo.byID or dojo.query methods
//it will fail. I will explain this in next chapter in detail.
dojo.connect(dijit.byId("dojoButton"), "onClick", function(){
dojo.query("#content").text("Welcome "+dijit.byId("nameText").attr("value"));
});
});
</script>
</head>
<body class="claro">
<label for="nameText">Enter Your Name: </label>
<input id="nameText" dojoType="dijit.form.TextBox"></input>
<br />
<button id="dojoButton" dojoType="dijit.form.Button">Show Content</button>
<div id="content"></div><!-- container to receive the value from the text box -->
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Dijit Button Event</title>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css">
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js" djConfig="parseOnLoad: true"></script>
<script type="text/javascript">
//Remember to import the following modules
dojo.require("dijit.form.Button");
dojo.require("dijit.form.TextBox");
dojo.require("dojo.NodeList-manipulate");//"text" method is defined inside this module.
dojo.ready(function(){
//note how I have binded the onClick function for the dijit button.
//if you try to access the button using dojo.byID or dojo.query methods
//it will fail. I will explain this in next chapter in detail.
dojo.connect(dijit.byId("dojoButton"), "onClick", function(){
dojo.query("#content").text("Welcome "+dijit.byId("nameText").attr("value"));
});
});
</script>
</head>
<body class="claro">
<label for="nameText">Enter Your Name: </label>
<input id="nameText" dojoType="dijit.form.TextBox"></input>
<br />
<button id="dojoButton" dojoType="dijit.form.Button">Show Content</button>
<div id="content"></div><!-- container to receive the value from the text box -->
</body>
</html>
The code above will get the value of the text box entered by the user and write it inside the div container on click of the button. This code add onClick event to the dijit button.
dojo.connect(dijit.byId("dojoButton"), "onClick", function(){
dojo.query("#content").text("Welcome "+dijit.byId("nameText").attr("value"));
});
dojo.query("#content").text("Welcome "+dijit.byId("nameText").attr("value"));
});
I have corrected the CSS link which was pointing to local css file. Now this code CSS is referring to CDN.
ReplyDelete