Dojo Toolkit
Dojo Toolkit is an open source modular JavaScript library (or more specifically JavaScript toolkit) designed to ease the rapid development of cross-platform, JavaScript/Ajax-based applications and web sites.
Dojo will support the following themes:
· Claro
· Nihilo
· Soria
· Tundra
Go to /dojo/dijit/themes folder to see the supported themes.
To use any one of the above themes in your application, import dojo/dojo/resources/dojo.css and any one of the theme css file which you are going to use (Ex:/dojo/dijit/themes/claro/claro.css) in your application.
Sample code: (copy entire dojo package under /WebContent/ folder)
Use the below code in your html or jsp page.
| <style> @import url(“<c:url value=”/ dojo/dojo/resources/dojo.css”/>”); @import url(““<c:url value=” / dojo/dijit/themes/claro/claro.css”/>”); </style> |
Spring JavaScript (spring-js) is a lightweight abstraction over common JavaScript toolkits such as Dojo. It aims to provide a common client-side programming model for progressively enhancing a web page with rich widget behavior and Ajax remoting.
Using Spring JavaScript in a page requires including the underlying toolkit as normal, the Spring.js base interface file, and the Spring-(library implementation).js file for the underlying toolkit.
Include Spring.js, Spring-Dojo.js and Dojo.js in your html or jsp.
Sample code:
| <script type=”text/javascript” src=”<c:url value=”/dojo/dojo/dojo.js”/>”></script> <script type=”text/javascript” src=”<c:url value=”/js/Spring.js”/>”></script> <script type=”text/javascript” src=”<c:url value=”/dojo/spring/Spring-Dojo.js”/>”></script> |
and import dojo components you’re going to use in your web page.
Sample code:
| <script type=”text/javascript”> dojo.require(“dojo.form.DateTextBox”); </script> |
And add class=”claro” in your body tag. Ex:
| <body class=” claro”> |
The above javascript and css files are required to integrate spring and Dojo.
Sample integration code:
| <form:input path=”bean_property_name” value=”any_default_value” id=”id” > <script type=”text/javascript”> Spring.addDecoration( Spring.ElementDecortaion ({ elementId: ” id”, widgetType: “dijit.form.DateTextBox”, style: “width:200px”, widgetAttrs: { datePattern: “MM/dd/yyyy”, required: true, onChange: function() {//do some other work}, onFocus: function() {//do some other work}, onBlur: function() {//do some other work}, //can use any dojo supported attrs. } }); ); </script> |
form:input is a spring input component.
The form:input’s id value and elementId value should be same.
The addDecoration method is used to apply dojo decorations.
The ElementDecoration is used to apply rich widget behavior to an existing DOM node.
src=””>
ReplyDeletesrc=””>
Hello sir,
where does this spring-dojo.js came from? are you using spring web flow? since in Spring environment it will not able to load the dojo files directly based on above
value=”/js/Spring.js”/
ReplyDelete/dojo/spring/Spring-Dojo.js
apolozise that browser removed the content