Emerging Internet Technologies

AJAX Toolkit Framework

Robert Goodman (goodmanr@us.ibm.com)
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

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

IBM Software Group

AJAX Toolkit Framework are Eclipse Plugins

E
C
L
I
P
S
E

AJAX Toolkit
Framework

AJAX Toolkit Framework

is a collection of Eclipse plugins

Eclipse WebTools

Mozilla
XULRunner & Javaconnect
Copyright 2007 IBM Corp. ; made available under the EPL v1.0

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

IBM Software Group

AJAX Toolkit Framework Components

Eclipse Plugins
Java Script
Debugger

DOM Inspector
And JavaScript
Console

Personalities
JavaScript Syntax
Validator

Embedded Mozilla Browser

Personality Builder

AJAX X
Dojo
Zimbra
Rico
Personality
Personality Personality Personality

Rico

Zimbra

Dojo

Ajax-x

Personality Common Libraries

Mozilla
XULRunner & JavaConnect

Eclipse WebTools

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

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

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

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

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 IBMs 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 doesnt 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
atf-dev@eclipse.org
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