JavaOne - Ajax and Dojo

Overview and Summary
This was a morning session that covered Ajax and Dojo. It was excellent especially since I haven't coded Ajax. To summarize, Ajax uses HTML, CSS, and JavaScript. Using a web page document object model (DOM), JavaScript calls can be made to backend server processes. This technology does not require a browser plug in and is built-in to current browser versions. Popular examples of Ajax are on Google maps when you can drag the map using a mouse drag-and-drop event.

Ajax requires a lot of JavaScript to manipulate mouse coordinates, submit events, and refresh DOM objects. Looks cool but a lot of work. I think of maintenance issues when utilizing Ajax in the corporate environment. That's where Dojo (http://dojotoolkit.org) is beneficial. Dojo is an open-source library of Javascript libraries. The Dojo libraries (folders) can be imported into your project and accessed using tags. The Dojo libraries handle cross-browser compatibility issues with JavaScript.

Good links:

Labs from session are available at this URL: http://blogs.sun.com/tiger.

Can download and run easily if using Netbeans...We are getting a lot of Netbeans propaganda :-)

• Javascript
• http://en.wikipedia.org/wiki/JavaScript
• Demos and slides
• http://blogs.sun.com/tiger/entry/web_2_0_ajax_dojo
• Setup environment using Netbeans w/ plugins, Java, Sun App server:
• http://blogs.sun.com/tiger/resource/sem-dtj3108-labSetup.html
• Dojo web site:
• http://dojotoolkit.org
• Documentation:
• http://dojotoolkit.org -> see API reference under « Documentation
• http://manual.jojotoolkit.org
• http://blogs.sun.com/tiger/entry/web_2_0_ajax_dojo
  

The differences of the web were discussed:

• Web 1.0
• Static web sites and cgi
• News groups
• File Transfer Protocol (FTP), gopher
• Web 1.5
• Discussion forums
• Webmail
• MapQuest
• Google search
• Web 2.0
• Examples
• YouTube
• MySpace
• Wikipedia
• Photo sharing
• Blogs
• Emphasize online collaboration and sharing among users, such as social networking sites and wikis
• http://en.wikipedia.org/wiki/Web_2
  

Some More DOJO Notes:

• Open source set of JavaScript libraries
• Allows you to quickly build dynamic capabilities into web pages
• Widgets
• Animations
• Drag and Drop
• Completely client side, it is server technology agnostic (handles IE vs. Firefox, etc..)
• Why use Dojo?
• Quickly make web application more interactive, responsive and functional
• Supports Ajax
• Hides XMLHttpRequest processing such as handling browser incompatibilities
• Dojo web site: http://dojotoolkit.org
• Dojo enables functions through “packages”
• Sample libraries
• Dojo.widget: framework
• Dojo.io: Ajax-based communication w/ the server
• Dojo.event: Handles evend and DOM
• Dojo.dad: drag-and-drop
• Dojo.style: CSS manipulation
• Dojo.date : Date manipulation
• Dojo widgets
• A UI element such as a button, text box, scroll bar, calendar, tree, etc…
• Widgets are a lot easier to deal w/ than DOM API’s
• Handles browser incompatibilities
• Good starting point….
• Dojo toolkit
• Download the JavaScript libraries and unzip into a file directory. Download: URL: http://dojotoolkit.org
• File: dojo-0.4.1-ajax.zip
• Copy the dojo.js into the project directory: (wwwroot)
• Copy the src directory into the project directory (under wwwroot….same level as css directory).
• Add a Dojo component into the form.
• See slide 11 part II.
• See dojoEditor project in demos and index.html page.
• This is how to create a rich text editor on a web page:
• Import dojo.js as Javascript
• In [body] tag, add a [div dojotype="”Editor”" items="”commandGroup;|;bold;”"]Enter text here.[/div]
• Dojo has charting features…
  

In summary, Ajax definitely adds a lot of improvement opportunities to a web user interface. However, the Javascript complexity makes it questionable when attempting to create an easily maintainable application. Possibly the Dojo toolkit can hide a lot of this complexity? It is worth exploring with research and development.