• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content

Loading…

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

Like this presentation? Why not share!

Jquery dojo slides

on

  • 2,041 views

 

Statistics

Views

Total Views
2,041
Views on SlideShare
2,041
Embed Views
0

Actions

Likes
0
Downloads
60
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Jquery dojo slides Jquery dojo slides Presentation Transcript

    • Client-side technologiesjQuery and Dojo
      Jan Holz, Helen Magiera, YousefHatem, Michael Schlimnat
      PLEASE SELECT PLAYER
      The slides are licensed under aCreative Commons Attribution 3.0 License
      Web Technologies – Prof. Dr. Ulrik Schroeder – WS 2010/11
      1
    • Overview
      Dojo
      What is Dojo? Why Dojo?
      How to get Dojo
      Toolkit Overview
      Dojo Demo
      jQuery
      What is jQuery?
      jQuery UI
      A quick introduction to jQuery
      The ready() function
      GetingstartedwithjQuery: Examples
      Summery/ Conclusion
      Web Technologies
      2
    • 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 Technologies
      3
    • 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 Technologies
      4
    • 1.3 Toolkit Overview
      Web Technologies
      5
      Dojo
      Base
      Core
      DojoX
      Util
      Dijit
    • 1.3 Toolkit Overview
      Web Technologies
      6
      Dojo
      Base
      Core
      Where do I find what I need?
      DojoX
      Util
      Dijit
    • 1.3 Toolkit Overview
      Web Technologies
      7
      Dojo
      Base
      • included in the base-level dojo namespace: dojo.js
      • most commonly used functions
    • 1.3 Toolkit Overview
      Web Technologies
      8
      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
    • 1.3 Toolkit Overview
      Web Technologies
      9
      • 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>
      ...
      <textareaid="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,…)
      Dojo
      Base
      Core
      Dijit
    • 1.3 Toolkit Overview
      Web Technologies
      10
      Dojo
      Base
      Core
      • Area for development of extensions to the Dojo toolkit
      • managedbysubprojects (each contains readme.txt)
      DojoX
      Dijit
    • 1.3 Toolkit Overview
      Web Technologies
      11
      Dojo
      Base
      Core
      • Contains JavaScript unit-testing framework
      • tool for creating custom versions of dojo
      DojoX
      Util
      Dijit
    • 1.3 Toolkit Overview
      Web Technologies
      12
      Dojo
      Base
      Core
      DojoX
      Util
      Dijit
    • 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 Technologies
      13
    • 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 Technologies
      14
    • 1.4 Dojo Syntactic Sugars
      Extensions to JavaScript basic functions and constructs
      Queryingelementsflexibly:
      dojo.query('#foo .bar > h3')
      Iteration on elements cannot be easier:
      dojo.query(“foo").forEach( function(fooTag) {fooTag.disabled = true; } );
      Usingsignal-slotsystem to wire up the system
      dojo.connect(exampleObj, "foo", exampleObj, "bar");
      Web Technologies
      15
    • 1.4 Dojo – Fetching Data from a DataStore
      Dojo introduces a uniform way of accessing data.
      dojo.require("dojox.data.GoogleSearchStore");
      var search =newdojox.data.GoogleSearchStore();
      search.fetch(
      {
      query:{text:queryText},
      count:20,
      onComplete:callback//handles the returned data
      }
      );
      Web Technologies
      16
    • 1.4 Dojo – Fetching Data from a DataStore2
      Web Technologies
      17
      functioncallback(items){
      //string array
      varstrings=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>");});
      //nowwehave the data stored in strings
      }
    • 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");
      vardragList=newdojo.dnd.Source(“someNode");
      vardropList=newdojo.dnd.Target(“someOtherNode");
      To add elements to the drag list, simply use insertNodesand according the type to DOM element which the drag list is wrapping, dojo will create the appropriate list element
      Web Technologies
      18
    • 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=newdijit.Menu();
      pMenu.addChild(newdijit.MenuItem({label:"Menu Item",onClick:function(){alert (“I am hit!");}));
      Web Technologies
      19
    • 2.1 WhatisjQuery?
      JavaScript library
      makes navigating through HTML and CSS elements easier
      intuitive Event Handling functionalities
      animations
      ajaxsupport
      Download jquery.js at jQuery.com
      include <script type="text/javascript" src="jquery.js"></script> in the <head>
      Web Technologies
      20
    • 2.2 jQuery UI
      additional low-levelinteractions
      e.g. drag and drop and resize items
      varietyofwidgets
      advancedeffects
      customizabledownload
      select which modules should be downloaded
      built on top of jQuery
      Web Technologies
      21
    • 2.3 A quick introduction to jQuery
      $ alias forjQueryclass
      $() 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'tusedocument.getElementByIDanymore
      Web Technologies
      22
    • 2.4 The ready() function
      Start withthis:
      $(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 Technologies
      23
    • 2.5 GettingstartedwithjQuery
      Enoughtheory, nowwe...
      use a hovereffect
      change "static" text in realtime
      introducesomeanimations
      code a smalljQueryplugin
      Web Technologies
      24
    • 2.5 GettingstartedwithjQuery
      Wehave...
      ...a plainhtml/csssite (bit.ly/jQdemo)
      Wewant...
      …a clean separationoffunctionalityandstructure
      Weneed...
      ...the DOM forjQuerytoread/manipulateit
      -> $(document).ready(function() { … });
      Web Technologies
      25
    • 2.5 GettingstartedwithjQuery
      A glimpseofcode
      $ == jQuery == window.jQuery
      $(object).someFunction();
      $(object).someFunction($(obj).prevFunction());
      $(object1).someFunction(function() {
      $(object2).nextFunction();
      });
      Web Technologies
      26
    • 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 Technologies
      27
    • 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
      28