®

Emerging Internet Technologies

AJAX Toolkit Framework

Robert Goodman ([email protected])
IBM Software Group

© Copyright 2007 IBM Corp. ; made available under the EPL v1.0
 IBM Software Group

Agenda
Overview
AJAX Toolkit Framework Components
Component Details
JavaScriptTM Development Tools Project
Where to get AJAX Toolkit Framework
Demonstrations through-out

© Copyright 2007 IBM Corp. ; made available under the EPL v1.0 2
 IBM Software Group

Overview
 The AJAX Toolkit Framework (ATF) is an Integrated Development Environment
(IDE) for AJAX developers and an extensible framework for adding AJAX
runtimes in to the IDE. It is an open-source project in incubation phase on
Eclipse.
 Provides
 Tools to develop any DHTML/AJAX application
 Tooling to facilitate use of various AJAX toolkits
 Tight integration with the existing Eclipse user interface and development
paradigm
 Targets AJAX Application Developers and Toolkit Developers
 Aims to provide an ever-expanding set of high-function tools for AJAX developers
 Multi-platform support
 Windows, Linux x86, Mac OS X (New)

© Copyright 2007 IBM Corp. ; made available under the EPL v1.0 3
 IBM Software Group

AJAX Toolkit Framework are Eclipse Plugins

E
C AJAX Toolkit AJAX Toolkit Framework
Framework
L is a collection of Eclipse plugins
I
P
Eclipse WebTools
S
E

Mozilla
XULRunner & Javaconnect

© Copyright 2007 IBM Corp. ; made available under the EPL v1.0 4
 IBM Software Group

AJAX Toolkit Framework Components

 Creating AJAX applications
 Browser Tooling
DOM Source view, DOM Inspector, Browser Console, XHRequest Monitor,
and CSS Tools
 JavaScriptTM Editor
Integrated JavaScript editor with batch and as-you-type syntax validation
 JavaScript Debugger
Stack Frame, Variables and Script view
 Embedded Mozilla Browser
Run/Debug an Ajax application in the Embedded Mozilla Browser
 Application Deployment
Deployment of an AJAX Application to a server.
 Personality Builder

© Copyright 2007 IBM Corp. ; made available under the EPL v1.0 5
 IBM Software Group

AJAX Toolkit Framework Components

Eclipse Plugins
Personalities
DOM Inspector JavaScript Syntax
Java Script
And JavaScript Validator
Debugger Personality Builder
Console

Rico Zimbra Dojo AJAX “X”

Embedded Mozilla Browser Personality Personality Personality Personality

Rico Zimbra Dojo Ajax-x

Personality Common Libraries

Mozilla
Eclipse WebTools
XULRunner & JavaConnect

© Copyright 2007 IBM Corp. ; made available under the EPL v1.0 6
 IBM Software Group

Ajax Application Creation

Support a number of AJAX runtimes today
 Dojo, Rico, Script.aculo.us, and Zimbra
 Personality Builder supports adding other AJAX runtimes.
Application Creation Wizard
 Template to create initial Ajax Application
 Drag and Drop snippets to Application Source File
Eclipse Projects
 Static Web Project, Dynamic Web Project, and PHP Projects
 Able to add in AJAX to existing project.

© Copyright 2007 IBM Corp. ; made available under the EPL v1.0 7
 IBM Software Group

JavaScript Tooling
Enhanced Editor with Validation
Integrated JavaScript editor
Batch and as-you-type syntax validation
 Syntax checker based on the Mozilla Rhino engine
 Validator based on JSLint
• Detects undesirable or ambiguous constructs considered to be bad practice
• JSLint errors are consider warnings.

© Copyright 2007 IBM Corp. ; made available under the EPL v1.0 8
 IBM Software Group

Ajax Application Creation

Future Enhancements
 Generic Runtime support.
• Support for configuring and using most AJAX Toolkit Runtimes
• Not as extensive as existing personalities
 Existing Personalities to become example runtime implementations
• Used as reference implementation
• Can be extended/enhanced by providers of ATF.

© Copyright 2007 IBM Corp. ; made available under the EPL v1.0 9
 IBM Software Group

JavaScript Tooling
Future Enhancements
JavaScript Development Tools
 A new WST component to provide Robust JavaScript Tooling
 Real JavaScript Model
 Enhanced code completion
 Enhanced Outline view
 Code formatting
 Code refactoring
 “Language level” searching
 Etc.
 Provide JDT level of functionality for JavaScript.
 Usable as a stand alone editor and integrated into WTP

© Copyright 2007 IBM Corp. ; made available under the EPL v1.0 10
 IBM Software Group

Application Deployment
 Multiple Server Types
 HTTP Web Server
 J2EE Servers
 HTTP Web Server
Support defining a HTTP Web Server in Eclipse
 Ability to specify publish directory
 Defining the HTTP server port
 Support for Home Page URLs (~username)
 J2EE Servers
 Multiple J2EE Servers (Tomcat, JBOSS. etc.)
 Testing done using Tomcat
 Publishing Options
 Automatically publish to server
 Never publish to server

© Copyright 2007 IBM Corp. ; made available under the EPL v1.0 11
 IBM Software Group

Embedded Browser
Integrated the Mozilla Browser
Using XULRunner
Provides the engine for AJAX Tooling
 Debugger
 JavaScript Engine
 Browser Views
Mozilla perspective

© Copyright 2007 IBM Corp. ; made available under the EPL v1.0 12
 IBM Software Group

Embedded Browser
Latest Improvements
 Support for Mac OS X
 Support for IBM’s JVM
 Support for HTTPS
 Browser widget profile support
Future Enhancements
 Generic Multiple Browser Support
 I.E support
 Other Browsers

© Copyright 2007 IBM Corp. ; made available under the EPL v1.0 13
 IBM Software Group

JavaScript Debugger
Breakpoints
Ability to set breakpoints in JavaScript
 Any file type with JavaScript content (html, js, php).
 Breakpoints can be enable/disabled

Debug Views for JavaScript

 Call Stack
 Variables
 Breakpoints
 Scripts View
Expression Support
Debug Preference options

© Copyright 2007 IBM Corp. ; made available under the EPL v1.0 14
 IBM Software Group

URL Debugging/Running

HTTP or File URL support

Able to launch and debug an AJAX application using a URL.
Application doesn’t have to reside in Eclipse.
All tooling supports handling files by URL.
 Editor
 Debugger
 Browser tooling
Breakpoint Management
 User has to manually delete breakpoints

© Copyright 2007 IBM Corp. ; made available under the EPL v1.0 15
 IBM Software Group

Debugging
Latest Improvements
 Browser Refresh support
 Debug a project without running on Server
 Expression support
Future Enhancements
 JavaScript Eval() support
 I.E Debugging support
 Other Browsers Debugging support

© Copyright 2007 IBM Corp. ; made available under the EPL v1.0 16
 IBM Software Group

Browser Tooling
DOM Inspector
 Shows the DOM tree rendered by the Browser
 Dynamically updated to reflect changes within the browser
 Attributes of a node can be edited, added to, and removed
 A breadcrumb trail of hyperlinks is created for the node's path
DOM Source view
 Displays the HTML source of the selected DOM node
 Source can edited, validated, and updated back to the browser
 Notification of a DOM element's source being out of sync with the
browser
DOM watcher
 Watch events for a selected node.

© Copyright 2007 IBM Corp. ; made available under the EPL v1.0 17
 IBM Software Group

Browser Tooling
DOM Compare
 Allows nodes to be compared
Browser Console
 Shows all browser (i.e JavaScript, CSS) errors, warnings, and logging
messages
 Double clicking on an error opens to the relevant line of code
 XMLHTTPRequest Monitor
 Observe XMLHTTPRequest request/response information
 Formatting of the response body based on content-types
JavaScript Eval view
 Interactive JavaScript Evaluation

© Copyright 2007 IBM Corp. ; made available under the EPL v1.0 18
 IBM Software Group

Browser Tooling
CSS View
Style Rules
 Shows the rules and their defined properties
 Able to edit and add a property
 Open CSS file for the rule and property
 Highlights the DOM elements using a selected style rule or property
Computed Styles
 Shows every style rule computed by the browser
Box Model
 Shows the dimensions, x-y coordinates, padding, border, and margin
information
Diffs
 Shows the changes made to CSS rules and properties

© Copyright 2007 IBM Corp. ; made available under the EPL v1.0 19
 IBM Software Group

Browser Tooling
Latest Improvements
 DOM events watcher
 JavaScript Eval view
 DOM Compare view
 DOM inspector filtering
 Extensible Framework for creating new Browser Tools.
Future Enhanements
 Support for I.E.
 Other Browsers.

© Copyright 2007 IBM Corp. ; made available under the EPL v1.0 20
 IBM Software Group

Installing/Configuring AJAX Toolkit Framework

XULRunner 1.8.2
 Must be Manually downloaded and configured.
Use Eclipse Update Manager to install ATF.
 Automatically downloads some dependences that have been
packaged as eclipse plugins.
Preference options for configuring AJAX runtimes
 Must be manually downloaded and configured.
 All Ajax runtimes are optional
 Only need to configure runtimes that will be used.

© Copyright 2007 IBM Corp. ; made available under the EPL v1.0 21
 IBM Software Group

Installing/Configuring AJAX Toolkit Framework

Latest Improvements
 Preference options for configuring AJAX runtimes
 Ajax Runtimes are now optional
 Platform independent download
Future Enhancements
 Packaging XULRunnner as a plugin
 Restructuring of ATF
• ATF core
 Based functionality without runtimes and personality builder
 Reduced dependencies on other parts of Eclipse
• ATF Personalities
 DoJo, Script.aculo.us, etc.
Improve install

© Copyright 2007 IBM Corp. ; made available under the EPL v1.0 22
 IBM Software Group

Personality Builder
A set of Wizards which accept:
 Artifact data (AJAX toolkit libraries)
 Build requirements data
 New application templates
 Code patterns
 Deployment data
Wizards output a ‘basic’ Personality Plugin
 The builder will provide necessary basic development features
targeted for AJAX toolkits
 Enables customization and addition of functionality

© Copyright 2007 IBM Corp. ; made available under the EPL v1.0 23
 IBM Software Group

Where to get AJAX Toolkit Framework

Open Source Project on Eclipse
www.eclipse.org/atf
Listserv and Newsgroup
 [email protected]
 news://eclipse.webtools.atf/
Source Code in Eclipse CVS
Milestones and Weekly builds
 www.eclipse.org/atf/downloads/index.php
Flash Demo Movies
 www.eclipse.org/atf/flash/index.php

© Copyright 2007 IBM Corp. ; made available under the EPL v1.0 24
 IBM Software Group

AJAX Toolkit Framework

Would like AJAX developers to use the tool
 Tell us what you like or dislike
 Enhancements that should be made.

Would like AJAX Runtime vendors to plug-in their runtimes

Looking for Contributors

© Copyright 2007 IBM Corp. ; made available under the EPL v1.0 25
 IBM Software Group

Legal Notices
 Java and all Java-based trademarks are trademarks of Sun
Microsystems, Inc. in the United States, other countries, or
both.

 Other company, product, or service names may be

trademarks or service marks of others.

© Copyright 2007 IBM Corp. ; made available under the EPL v1.0 26
 ®

Emerging Internet Technologies

Screen Shots AJAX Toolkit Framework in Action

© Copyright 2007 IBM Corp. ; made available under the EPL v1.0
 IBM Software Group

Project creation
 Use standard Web projects for
AJAX application
Static Web Project
Dynamic Web Project

© Copyright 2007 IBM Corp. ; made available under the EPL v1.0 28
 IBM Software Group

Project Creation
 Adding a Dojo runtime to a Static
Web Project using facets

© Copyright 2007 IBM Corp. ; made available under the EPL v1.0 29
 IBM Software Group

URL Debugging and Running

 Creating a Debug
configuration to debug an
AJAX application using an
URL.

© Copyright 2007 IBM Corp. ; made available under the EPL v1.0 30
 IBM Software Group

URL Debugging and Running

 A file opened in the
JavaScript editor using an
URL

© Copyright 2007 IBM Corp. ; made available under the EPL v1.0 31
 IBM Software Group

Debugger - Breakpoints
 Breakpoint can be set by
double clicking in ruler.

© Copyright 2007 IBM Corp. ; made available under the EPL v1.0 32
 IBM Software Group

Debugger Preferences
 New debug options can be set
from the preference menu.

© Copyright 2007 IBM Corp. ; made available under the EPL v1.0 33
 IBM Software Group

Debugger
 Expressions can be entered that
are evaluated in the debug
session.

© Copyright 2007 IBM Corp. ; made available under the EPL v1.0 34
 IBM Software Group

DOM Source View

 The DOM Source view is now notified of changes in the browser.

© Copyright 2007 IBM Corp. ; made available under the EPL v1.0 35
 IBM Software Group

DOM Inspector
 The DOM Inspector now has a
linked breadcrumb trail created
from root HTML node to
currently selected node. See
“Selection” in the screen shot.

© Copyright 2007 IBM Corp. ; made available under the EPL v1.0 36
 IBM Software Group

XHR Monitor

 XHR Monitor now has the ability to format XHR response body according
to content-type specified

© Copyright 2007 IBM Corp. ; made available under the EPL v1.0 37
 IBM Software Group

CSS View

 Example of the Graphical box model created for selected DOM element
with dimension, padding, border, and margin information

© Copyright 2007 IBM Corp. ; made available under the EPL v1.0 38
 IBM Software Group

CSS View
 Ability to add, remove, and edit CSS properties and show CSS changes in the
browser page

© Copyright 2007 IBM Corp. ; made available under the EPL v1.0 39
 IBM Software Group

CSS View
 Ability to select a CSS rule or property and highlight all elements in the browser page
currently using that CSS declaration (XUL Runner 1.8.1 only).

© Copyright 2007 IBM Corp. ; made available under the EPL v1.0 40
 IBM Software Group

CSS View
 Example of the ability to view all computed style properties for a selected DOM
element.

© Copyright 2007 IBM Corp. ; made available under the EPL v1.0 41
 IBM Software Group

CSS View
 The Diff output generated for all CSS style property changes made. XULRunner
1.8.1 only

© Copyright 2007 IBM Corp. ; made available under the EPL v1.0 42
 IBM Software Group

CSS View

 The ability to open the CSS file containing the CSS rule or
property. XULRunner 1.8.1 only

© Copyright 2007 IBM Corp. ; made available under the EPL v1.0 43