Your SlideShare is downloading. ×
Jquery dojo slides
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Jquery dojo slides

1,823

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,823
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
66
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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
  • 5. 1.3 Toolkit Overview Web Technologies5 Dojo DojoX UtilDijit Base Core
  • 6. 1.3 Toolkit Overview Web Technologies6 Dojo DojoX UtilDijit Base Core
  • 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
  • 12. 1.3 Toolkit Overview Web Technologies12 Dojo DojoX UtilDijit Base Core
  • 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

×