jquery dojo slides
DESCRIPTION
TRANSCRIPT
![Page 1: Jquery dojo slides](https://reader038.vdocuments.site/reader038/viewer/2022110115/5498ed03b479594d098b4673/html5/thumbnails/1.jpg)
Client-side technologiesjQuery and Dojo
Jan Holz, Helen Magiera, Yousef Hatem, Michael Schlimnat
Web Technologies – Prof. Dr. Ulrik Schroeder – WS 2010/111The slides are licensed under a
Creative Commons Attribution 3.0 License
PLEASE SELECT PLAYER
![Page 2: Jquery dojo slides](https://reader038.vdocuments.site/reader038/viewer/2022110115/5498ed03b479594d098b4673/html5/thumbnails/2.jpg)
Overview1. Dojo
1. What is Dojo? Why Dojo?2. How to get Dojo3. Toolkit Overview4. Dojo Demo
2. jQuery1. What is jQuery?2. jQuery UI3. A quick introduction to jQuery4. The ready() function5. Geting started with jQuery: Examples
3. Summery/ Conclusion
Web Technologies2
![Page 3: Jquery dojo slides](https://reader038.vdocuments.site/reader038/viewer/2022110115/5498ed03b479594d098b4673/html5/thumbnails/3.jpg)
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
![Page 4: Jquery dojo slides](https://reader038.vdocuments.site/reader038/viewer/2022110115/5498ed03b479594d098b4673/html5/thumbnails/4.jpg)
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
![Page 5: Jquery dojo slides](https://reader038.vdocuments.site/reader038/viewer/2022110115/5498ed03b479594d098b4673/html5/thumbnails/5.jpg)
1.3 Toolkit Overview
Web Technologies5
Dojo
DojoX UtilDijit
Base Core
![Page 6: Jquery dojo slides](https://reader038.vdocuments.site/reader038/viewer/2022110115/5498ed03b479594d098b4673/html5/thumbnails/6.jpg)
1.3 Toolkit Overview
Web Technologies6
Dojo
DojoX UtilDijit
Base Core
Where do I find
what I need?
![Page 7: Jquery dojo slides](https://reader038.vdocuments.site/reader038/viewer/2022110115/5498ed03b479594d098b4673/html5/thumbnails/7.jpg)
1.3 Toolkit Overview
Web Technologies7
Dojo
Base included in the base-level dojo namespace: dojo.js most commonly used
functions
![Page 8: Jquery dojo slides](https://reader038.vdocuments.site/reader038/viewer/2022110115/5498ed03b479594d098b4673/html5/thumbnails/8.jpg)
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
![Page 9: Jquery dojo slides](https://reader038.vdocuments.site/reader038/viewer/2022110115/5498ed03b479594d098b4673/html5/thumbnails/9.jpg)
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,…)
![Page 10: Jquery dojo slides](https://reader038.vdocuments.site/reader038/viewer/2022110115/5498ed03b479594d098b4673/html5/thumbnails/10.jpg)
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)
![Page 11: Jquery dojo slides](https://reader038.vdocuments.site/reader038/viewer/2022110115/5498ed03b479594d098b4673/html5/thumbnails/11.jpg)
1.3 Toolkit Overview
Web Technologies11
Dojo
DojoX UtilDijit
Base Core Contains JavaScript unit-testing framework
tool for creating custom versions of dojo
![Page 12: Jquery dojo slides](https://reader038.vdocuments.site/reader038/viewer/2022110115/5498ed03b479594d098b4673/html5/thumbnails/12.jpg)
1.3 Toolkit Overview
Web Technologies12
Dojo
DojoX UtilDijit
Base Core
![Page 13: Jquery dojo slides](https://reader038.vdocuments.site/reader038/viewer/2022110115/5498ed03b479594d098b4673/html5/thumbnails/13.jpg)
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
![Page 14: Jquery dojo slides](https://reader038.vdocuments.site/reader038/viewer/2022110115/5498ed03b479594d098b4673/html5/thumbnails/14.jpg)
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
![Page 15: Jquery dojo slides](https://reader038.vdocuments.site/reader038/viewer/2022110115/5498ed03b479594d098b4673/html5/thumbnails/15.jpg)
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
![Page 16: Jquery dojo slides](https://reader038.vdocuments.site/reader038/viewer/2022110115/5498ed03b479594d098b4673/html5/thumbnails/16.jpg)
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
![Page 17: Jquery dojo slides](https://reader038.vdocuments.site/reader038/viewer/2022110115/5498ed03b479594d098b4673/html5/thumbnails/17.jpg)
1.4 Dojo – Fetching Data from a DataStore2
Web Technologies17
function callback(items){//string array var strings = new Array();
//put the results in a matrixdojo.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
}
![Page 18: Jquery dojo slides](https://reader038.vdocuments.site/reader038/viewer/2022110115/5498ed03b479594d098b4673/html5/thumbnails/18.jpg)
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
![Page 19: Jquery dojo slides](https://reader038.vdocuments.site/reader038/viewer/2022110115/5498ed03b479594d098b4673/html5/thumbnails/19.jpg)
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 supportsdojo.require("dijit.Menu");
pMenu = new dijit.Menu();pMenu.addChild(new dijit.MenuItem({label:"Menu Item", onClick:function(){alert (“I am hit!");}));
Web Technologies19
![Page 20: Jquery dojo slides](https://reader038.vdocuments.site/reader038/viewer/2022110115/5498ed03b479594d098b4673/html5/thumbnails/20.jpg)
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
![Page 21: Jquery dojo slides](https://reader038.vdocuments.site/reader038/viewer/2022110115/5498ed03b479594d098b4673/html5/thumbnails/21.jpg)
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
![Page 22: Jquery dojo slides](https://reader038.vdocuments.site/reader038/viewer/2022110115/5498ed03b479594d098b4673/html5/thumbnails/22.jpg)
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
![Page 23: Jquery dojo slides](https://reader038.vdocuments.site/reader038/viewer/2022110115/5498ed03b479594d098b4673/html5/thumbnails/23.jpg)
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
![Page 24: Jquery dojo slides](https://reader038.vdocuments.site/reader038/viewer/2022110115/5498ed03b479594d098b4673/html5/thumbnails/24.jpg)
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
![Page 25: Jquery dojo slides](https://reader038.vdocuments.site/reader038/viewer/2022110115/5498ed03b479594d098b4673/html5/thumbnails/25.jpg)
2.5 Getting started with jQueryWe 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
![Page 26: Jquery dojo slides](https://reader038.vdocuments.site/reader038/viewer/2022110115/5498ed03b479594d098b4673/html5/thumbnails/26.jpg)
2.5 Getting started with jQueryA glimpse of code
$ == jQuery == window.jQuery
$(object).someFunction();
$(object).someFunction($(obj).prevFunction());
$(object1).someFunction(function() { $(object2).nextFunction(); });
Web Technologies26
![Page 27: Jquery dojo slides](https://reader038.vdocuments.site/reader038/viewer/2022110115/5498ed03b479594d098b4673/html5/thumbnails/27.jpg)
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");});
![Page 28: Jquery dojo slides](https://reader038.vdocuments.site/reader038/viewer/2022110115/5498ed03b479594d098b4673/html5/thumbnails/28.jpg)
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 Introduction