1. Client-side technologies
jQuery and Dojo
Jan Holz, Helen Magiera, Yousef Hatem, Michael Schlimnat
Web Technologies – Prof. Dr. Ulrik Schroeder – WS 2010/111
The slides are licensed under a
Creative Commons Attribution 3.0 License
PLEASE SELECT
PLAYER
2. Overview
1. Dojo
1. What is Dojo? Why Dojo?
2. How to get Dojo
3. Toolkit Overview
4. Dojo Demo
2. jQuery
1. What is jQuery?
2. jQuery UI
3. A quick introduction to jQuery
4. The ready() function
5. Geting started with jQuery: Examples
3. Summery/ Conclusion
Web Technologies2
3. 1.1 What is Dojo? Why Dojo?
JavaScript Toolkit
Makes web development projects easy to realize
Save time by spending less effort on the common tasks
spend more time on the really interesting aspects of a web project
Some further Reasons:
Big Community
Open source software
Provides end-to-end solution
Portability
Web Technologies3
4. 1.2 How to get Dojo
Dojo From Google CDN/AOL CDN:
Easy embedding into your website
Dojo From Google CDN:
<script
src="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js"
type="text/javascript"></script>
Dojo From AOL CDN:
<script src="http://o.aolcdn.com/dojo/1.5/dojo/dojo.xd.js"
type="text/javascript"></script>
Web Technologies4
7. 1.3 Toolkit Overview
Web Technologies7
Dojo
Base
included in the base-level
dojo namespace: dojo.js
most commonly used
functions
8. 1.3 Toolkit Overview
Web Technologies8
Dojo
Base Core
supplements base with additional
functions
call it with dojo.require-fuction:
dojo.require("dojo.dnd.Mover");
kinds of features:
• animation machinery: dojo.fx
• drag-and-drop facilities: dojo.dnd
• data management layer: dojo.data
• cookie handling: dojo.cookie
• back-button handling: dojo.back
• many more
9. 1.3 Toolkit Overview
Web Technologies9
Dojo
Dijit
Base Core
Library of widgets (short for “Dojo widget”)
Out of the box: doesn’t require any
JavaScript at all
Widgets created with dijit are ultra-
portable and can be shared onto any web
server
Plugging in with dojoType inside of
ordinary html-tags
<script type="text/javascript"> dojo.require("dijit.form.Textarea");
</script>
...
<textarea id="textarea2" name="textarea2"
dojoType="dijit.form.Textarea" style="width:200px;"> Blabla
</textarea>
Divided into:
• general-purpose application widgets
(progress bars, Calendars, …)
• layout widgets (tab containers,…)
• form widgets (button, input elements,…)
10. 1.3 Toolkit Overview
Web Technologies10
Dojo
DojoXDijit
Base Core
• Area for development of extensions to the
Dojo toolkit
• managed by subprojects (each contains
readme.txt)
11. 1.3 Toolkit Overview
Web Technologies11
Dojo
DojoX UtilDijit
Base Core Contains JavaScript unit-testing
framework
tool for creating custom versions
of dojo
13. 1.4 Dojo Demo
Huge API, we will introduce only a few
Some clever wrappers for the usual old JS functions
Drag and Drop
Context Menus
Collecting data from data stores
Web Technologies13
14. 1.4 Another perspective of searching!
Welcome to Google <3 Dojo website!
Relies on Google search engine to get the results.
uses Dojo to give the user a rich experience: take a sneak look at
the website, add the search result to favorites bucket, and
highlight them using different colors.
Web Technologies14
15. 1.4 Dojo Syntactic Sugars
Extensions to JavaScript basic functions and constructs
Querying elements flexibly:
dojo.query('#foo .bar > h3')
Iteration on elements cannot be easier:
dojo.query(“foo").forEach( function(fooTag) {fooTag.disabled =
true; } );
Using signal-slot system to wire up the system
dojo.connect(exampleObj, "foo", exampleObj, "bar");
Web Technologies15
16. 1.4 Dojo – Fetching Data from a DataStore
Dojo introduces a uniform way of accessing data.
dojo.require("dojox.data.GoogleSearchStore");
var search = new dojox.data.GoogleSearchStore();
search.fetch(
{
query: { text: queryText },
count: 20,
onComplete: callback //handles the returned data
}
);
Web Technologies16
17. 1.4 Dojo – Fetching Data from a DataStore2
Web Technologies17
function callback(items){
//string array
var strings = new Array();
//put the results in a matrix
dojo.forEach(items, function(item){
strings.push("<b>" + search.getValue(item,
"title") + "<b><br/><a href="" +
search.getValue(item, "url") +
"">"+search.getValue(item, "url")+"</a>"); });
//now we have the data stored in strings
}
18. 1.4. Dojo - DnD
Dojo offers a very neat cross platform way for drag and drop
Define a source, a destination, and Dojo will do the magic!
dojo.require("dojo.dnd.Source");
var dragList = new dojo.dnd.Source(“someNode");
var dropList = new dojo.dnd.Target(“someOtherNode");
To add elements to the drag list, simply use insertNodes
and according the type to DOM element which the drag list is
wrapping, dojo will create the appropriate list element
Web Technologies18
19. 1.4. Dojo – Context Menu
Dojo offers an easy way to incorporate menus in a website
There are so many type of menus that Dojo supports
dojo.require("dijit.Menu");
pMenu = new dijit.Menu();
pMenu.addChild(new dijit.MenuItem({label:"Menu
Item", onClick:function(){alert (“I am
hit!");}));
Web Technologies19
20. 2.1 What is jQuery?
JavaScript library
makes navigating through HTML and CSS elements easier
intuitive Event Handling functionalities
animations
ajax support
Download jquery.js at jQuery.com
include <script type="text/javascript" src="jquery.js"></script> in
the <head>
Web Technologies20
21. 2.2 jQuery UI
additional low-level interactions
e.g. drag and drop and resize items
variety of widgets
advanced effects
customizable download
select which modules should be downloaded
built on top of jQuery
Web Technologies21
22. 2.3 A quick introduction to jQuery
$ alias for jQuery class
$() constructs a jQuery object (alias for jQuery())
takes css classes and IDs, html elements and XPath expressions as
arguments
e.g $(“.myClass”) represents .myClass
advantage of jQuery: intuitive element selector functionality
don't use document.getElementByID anymore
Web Technologies22
23. 2.4 The ready() function
Start with this:
$(document).ready(function(){ // put your code here});
or shorter: $(function(){ // your code});
executes the code when DOM is constructed
use instead of window.onload = function(){ // executed when page
is loaded}
Web Technologies23
24. 2.5 Getting started with jQuery
Enough theory, now we...
use a hover effect
change "static" text in realtime
introduce some animations
code a small jQuery plugin
Web Technologies24
25. 2.5 Getting started with jQuery
We have...
...a plain html/css site (bit.ly/jQdemo)
We want...
…a clean separation of functionality and structure
We need...
...the DOM for jQuery to read/manipulate it
→ $(document).ready(function() { … });
Web Technologies25
26. 2.5 Getting started with jQuery
A glimpse of code
$ == jQuery == window.jQuery
$(object).someFunction();
$(object).someFunction($(obj).prevFunction());
$(object1).someFunction(function() {
$(object2).nextFunction();
});
Web Technologies26
27. Summary/ Conclusion
Both are pretty fast JS-Frameworks
Both offer almost the same functionality
Dojo offers more fine-grained libraries (dojo.require)
→ choose the one you like best
Web Technologies27
hover with Dojo:
dojo.query("p").forEach(function(node){
node.onmouseover = function(){
dojo.addClass(node, "red");
}
node.onmouseout = function(){
dojo.removeClass(node, "red");
}
});
hover with jQuery:
$("p").hover(function() {
$(this).addClass("red");
},function(){
$(this).removeClass("red");
});
28. Literature
Books: M.A. Russell – Dojo. The definitive Guide
Tutorials: http://www.sitepen.com/blog/series/dojo-quick-start-
guide/
Links: http://www.dojotoolkit.org
Dojo Official Website, API Documentation:
http://api.dojotoolkit.org/
Dojo.Campus.org
http://dojocampus.org/
Practical Dojo Project, Frank W. Zammetti
APress publications, ISBN-13 (pbk): 978-1-4302-1066-5
1 Introduction28