AJAX Technologies.ppt
Upcoming SlideShare
Loading in...5
×
 

AJAX Technologies.ppt

on

  • 731 views

 

Statistics

Views

Total Views
731
Views on SlideShare
731
Embed Views
0

Actions

Likes
0
Downloads
15
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

    AJAX Technologies.ppt AJAX Technologies.ppt Presentation Transcript

    • Ajax Runtime Toolkits IBM Emerging Technologies
    • What is an AJAX Toolkit/Framework?
      • An AJAX Toolkit/Runtime is more than just XMLHTTPRequest
      • Should includes:
        • Network Communication
        • UI Controls
        • Programming Model
          • OO JavaScript
          • Declarative
        • Drag and Drop
        • Easily extensible
        • Data Model
    • AJAX Pros & Cons
      • Pros
        • Back-channel communication with server (fewer page refreshes)
        • UI state maintained on the browser (less load on the server)
        • Richer interfaces (Drag & Drop, Animation, Effects, UI Controls)
        • No additional Plug-in necessary
      • Cons
        • Some cross-browser issues remain (LCD)
        • JavaScript Performance
        • Lack of tooling
        • History & Back button support difficult
        • Same domain sandbox restrictions
    • JavaScript Evolved
      • Early Use (1996-2004)
      • Individual Snippets intermixed with markup
      • Conditional code for different browsers/versions
      • Some "libraries" of utility code, typically function based and often hard-coded around a web page
      • Low reusability
      • Used XHttpRequest or iframe trick
      • 1st Generation AJAX (2004-2005)
      • Reusable components wrapped as in JavaScript objects.
      • Object Orientation done by explicit use of prototype chain.
      • Browser compatibility code hidden in base libraries.
      • Standardize use of XMLHttpRequest
      • Better reusability and extensibility.
      • Latest Generation AJAX
      • Declarative grammar or simpler Behavior attachment mechanisms.
      • Better OO practices by using closures and inheritance. Hides the use of the prototype chain.
      • Introduces Namespaces for better organization of code.
      • Highest reusability and extensibility.
    • Rico
      • Overview
        • Uses unobtrusive JavaScript approach to assign behavior to markup elements using IDs.
        • Limited control set (Accordion, Live Grid)
        • Animations and Effects (Position, Size, Fade, Rounded Corners)
        • Drag and Drop support (customizable)
        • IO – XHR abstraction requires response messages to be wrapped with Rico specific tags. 2 ways:
          • Object - Binds response to a JavaScript object
          • InnerHTML – Response is set as InnerHTML of the Id element.
    • Rico (continue)
        • Built on top of prototype.js
          • Foundation set of JavaScript functions and Objects
          • Serves as a compatibility layer between Browsers
          • Defines a way to use JavaScript in a more OO way (new classes, inheritance, constructors,…).
          • Provides basic abstraction for XMLHTTPRequest.
          • Used by Ruby on Rails for AJAX support.
    • Rico (continue)
      • Sample code
      • < div id = &quot;accordion&quot; >
        • < div id = &quot;panel1&quot; >
          • < div id = &quot;panel1Header&quot; > Panel 1 Header </ div >
          • < div id = &quot;panel1Content&quot; > Panel 1 Content </ div >
        • </ div >
        • < div id = &quot;panel2&quot; >
          • < div id = &quot;panel2Header&quot; > Panel 2 Header </ div >
          • < div id = &quot;panel2Content&quot; > Panel 2 Content </ div >
        • </ div >
        • < div id = &quot;panel2&quot; >
          • < div id = &quot;panel2Header&quot; > Panel 2 Header </ div >
          • < div id = &quot;panel2Content&quot; > Panel 2 Content </ div >
        • </ div >
      • </ div >
      • < script >
        • new Rico.Accordion( 'accordion' , { panelHeight:300 } );
      • </ script >
      Element ID Rico Behavior
    • Rico (continue)
      • www.openrico.org
      • Uses
        • No known uses.
      • License and Community
        • Apache 2 License (Partial Copyrights owned by Sabre Airlines Solutions)
        • Lacks development community (Key developers now at Yahoo)
    • Zimbra
      • Overview
        • Modeled after SWT. Follows the traditional Windowing Toolkit patterns.
        • ~100% of development done in JavaScript
        • Abstraction for controls (Button, Label, Dialog, …)
        • Basic abstraction for XHR (simple object containing setup information and callbacks).
        • Drag and Drop support
        • Pub/Sub abstraction on top of DOM Event model.
    • Zimbra (continue)
      • Sample code
      var tree = new DwtTree(parent, null , null , DwtControl.ABSOLUTE_STYLE); tree.setBounds(0, 0, Dwt.DEFAULT, &quot;100%&quot; ); var ti = new DwtTreeItem(tree); ti.setText( &quot;Accounting&quot; ); ti.setImage(ExImg.I_FOLDER); ti.setData( &quot;DEPT&quot; , &quot;Accounting&quot; ); ti.setToolTipContent( &quot;Accounting Department&quot; ); var ti2 = new DwtTreeItem(ti, null , &quot;Bob Brown&quot; , ExImg.I_ICON); ti2.setDragSource(ds); ti2.setData( &quot;EMPINFO&quot; , { name: &quot;Bob Brown&quot; , id: 987261, dept: &quot;Accounting&quot; } ); ti2.setToolTipContent( &quot;<b>ID: </b>987261&quot; ); ti = new DwtTreeItem(tree, null , &quot;Engineering&quot; , ExImg.I_FOLDER); ti.setData( &quot;DEPT&quot; , &quot;Engineering&quot; ); ti.setDropTarget(dt); ti.setToolTipContent( &quot;Engineering Department&quot; ); parent control absolute positioning tree node
    • Zimbra (continue)
      • http://www.zimbra.com
      • Uses
        • Toolkit behind Zimbra Communication Suite
      • License and Community
        • Zimbra AJAX Public License, just recently donated as a Incubator in Apache.
        • Lacks development community (Key developers are all at Zimbra). Apache Incubator will facilitate a community.
    • D ōjō
      • Overview
        • 2 main ways of using Dojo’s components
          • Attach behavior to HTML element (i.e. DIV) – Uses special attribute “dojoType” to bind to a Dojo component. This approach provides UI degradation.
          • Custom markup (i.e. dojo:FloatingPane) – Markup is parsed and interpreted by Dojo. DOM is modified and JavaScript behaviors assigned.
        • Dojo’s core is a simple package loading system.
        • Provides a Pattern for augmenting the Dojo library (custom packages, namespaces, and objects).
    • D ōjō (continue)
        • Ever-growing set of controls
        • XHR support – simple bind() method to set a callback. Interesting MIME type support. For Example, Dojo calls eval() on MIME type of “JavaScript” (built-in JSON support).
        • Event Binding – several ways:
          • connect() method
          • dojoAttachEvent attribute (for Widgets)
          • Aspect Oriented Programming
    • D ōjō (continue)
      • Sample code
      < script language = &quot;JavaScript&quot; type = &quot;text/javascript&quot; > dojo.require( &quot;dojo.widget.FloatingPane&quot; ); dojo.require( &quot;dojo.widget.Tree&quot; ); </ script > < dojo:FloatingPane title = &quot;Inlook Express“ style = &quot;width: 500px; height: 300px; left: 100px; top: 100px;&quot; > < div dojoType = &quot;Tree&quot; toggle = &quot;fade&quot; > < div dojoType = &quot;TreeNode&quot; title = &quot;Mail Account&quot; > < div dojoType = &quot;TreeNode&quot; title = &quot;Inbox&quot; ></ div > < div dojoType = &quot;TreeNode&quot; title = &quot;Sent Mail&quot; ></ div > < div dojoType = &quot;TreeNode&quot; title = &quot;Deleted&quot; ></ div > < div dojoType = &quot;TreeNode&quot; title = &quot;Saved Mail&quot; > < div dojoType = &quot;TreeNode&quot; title = &quot;Friends&quot; > < div dojoType = &quot;TreeNode&quot; title = &quot;Bob&quot; ></ div > < div dojoType = &quot;TreeNode&quot; title = &quot;Jack&quot; ></ div > </ div > < div dojoType = &quot;TreeNode&quot; title = &quot;Work&quot; ></ div > </ div > </ div > </ div > </ dojo:FloatingPane > loading of JavaScript declarative instantiation behavior attachment custom attributes
    • D ōjō (continue)
      • http://www.dojotoolkit.org
      • Uses
        • Toolkit behind JotSpot
      • License and Community
        • Dual Licensing
          • Academic Free License v2.1
          • BSD License
        • Existing and active community with CLA in place.
    • script.aculo.us
      • Coming soon
    • Resources
      • http://www.petefreitag.com/item/514.cfm
      • AJAX Strategy Whitepaper (C. Mitchell, et al)
      • http://openrico.org
      • http://zimbra.com/pdf/Zimbra%20AJAX%20TK%20Whitepaper.pdf
      • http://www.dojotoolkit.org/