AJAX Toolkit Framework

Robert Goodman ([email protected])

Leugim (Gino) Bustelo ([email protected] )

IBM Software Group

November 29, 2006 Confidential | Date | Other Information, if necessary

© 2002 IBM Corporation
 Agenda

 Overview
 AJAX Toolkit Framework Components
 Component Details
 Where to get AJAX Toolkit Framework
 Demonstrations through-out
 ATF Based Products

Eclipse Foundation, Inc.

 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.

ATF 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

Eclipse Foundation, Inc.

 AJAX Toolkit Framework are Eclipse
Plugins

E
C AJAX Toolkit
L Framework

I
P
Eclipse WebTools
S
E

Mozilla
XULRunner & JavaXPCOM

Eclipse Foundation, Inc.

 AJAX Toolkit Framework Components

Creating AJAX applications

 Drag and Drop Application Snippets
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
 Ability to create tooling for AJAX toolkits

Eclipse Foundation, Inc.

 AJAX Toolkit Framework Components

Eclipse Plugins
DOM Inspector
Personalities
Java Script JavaScript Syntax
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 & JavaXPCOM

Eclipse Foundation, Inc.

 Ajax Application Creation

Support for three AJAX runtimes today

 Dojo, Rico, 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.

Eclipse Foundation, Inc.

 JavaScript Editor

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.

Drag and Drop snippets to Application Source File

Eclipse Foundation, Inc.

 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

Eclipse Foundation, Inc.

 Embedded Mozilla Browser

Integrated the Mozilla Browser

Using XULRunner
Provides the engine for AJAX Tooling
 Debugger
 JavaScript Engine
 Browser Views

Mozilla perspective

Eclipse Foundation, Inc.

 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

Eclipse Foundation, Inc.

 URL Debugging/Running

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
Eclipse Foundation, Inc.
 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

Eclipse Foundation, Inc.

 Browser Tooling

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

Eclipse Foundation, Inc.

 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

Eclipse Foundation, Inc.

 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

Eclipse Foundation, Inc.

 Future Enhancements

Robust JavaScript Tooling

 Real JavaScript Model, Enhanced code
completion, Enhanced Outline view , Code
formatting, etc
Debugger enhancements
Improve Install
 better support for run time dependencies
Personality Builder improvements
Multiple Browser Support (IE, Opera, etc)

Eclipse Foundation, Inc.

 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

Eclipse Foundation, Inc.

 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.

Eclipse Foundation, Inc.

 Screen Shots of products using ATF
provided by different vendors.

November 29, 2006 Confidential | Date | Other Information, if necessary

© 2002 IBM Corporation
 Helmi Technologies RIA IDE

Eclipse Foundation, Inc.

 Genuitec MyEclipse 2.0

Eclipse Foundation, Inc.

Visual Drag Drop Editing
DOM Inspection
Event Wizard