® Emerging Internet Technologies © Copyright 2007 IBM Corp. ; made available under the EPL v1.0 AJAX Toolkit Framework Robert Goodman

®

Emerging Internet Technologies

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

AJAX Toolkit Framework

Robert Goodman ([email protected])IBM Software Group

IBM Software Group

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

Agenda

OverviewAJAX Toolkit Framework ComponentsComponent DetailsJavaScriptTM Development Tools ProjectWhere to get AJAX Toolkit Framework Demonstrations through-out

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)

IBM Software Group


MozillaXULRunner & Javaconnect

AJAX Toolkit Framework are Eclipse Plugins

EECCLLIIPPSSEE

Eclipse WebTools



is a collection of Eclipse plugins

IBM Software Group


AJAX Toolkit Framework ComponentsCreating AJAX applications Browser Tooling

DOM Source view, DOM Inspector, Browser Console, XHRequest Monitor, and CSS Tools

JavaScriptTM EditorIntegrated JavaScript editor with batch and as-you-type syntax validation

JavaScript DebuggerStack Frame, Variables and Script view

Embedded Mozilla BrowserRun/Debug an Ajax application in the Embedded Mozilla Browser

Application DeploymentDeployment of an AJAX Application to a server.

Personality Builder

IBM Software Group


MozillaXULRunner & JavaConnect Eclipse WebTools

Eclipse Plugins

AJAX Toolkit Framework Components

JavaScript Syntax Validator

PersonalitiesDOM Inspector And JavaScript

Console

Java Script Debugger

Embedded Mozilla Browser

Personality Builder

Rico Personality

Zimbra Personality

Dojo Personality

Rico Zimbra Dojo

Personality Common Libraries

AJAX “X” Personality

Ajax-x

IBM Software Group


Ajax Application CreationSupport a number of AJAX runtimes today

Dojo, Rico, Script.aculo.us, and ZimbraPersonality Builder supports adding other AJAX runtimes.

Application Creation WizardTemplate to create initial Ajax ApplicationDrag and Drop snippets to Application Source File

Eclipse ProjectsStatic Web Project, Dynamic Web Project, and PHP ProjectsAble to add in AJAX to existing project.

IBM Software Group


JavaScript Tooling

Enhanced Editor with ValidationIntegrated JavaScript editorBatch and as-you-type syntax validation

Syntax checker based on the Mozilla Rhino engineValidator based on JSLint

• Detects undesirable or ambiguous constructs considered to be bad practice • JSLint errors are consider warnings.

IBM Software Group


Ajax Application Creation

Future EnhancementsGeneric 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.

IBM Software Group


JavaScript Tooling

Future EnhancementsJavaScript 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

IBM Software Group


Application DeploymentMultiple Server Types

HTTP Web ServerJ2EE Servers

HTTP Web ServerSupport defining a HTTP Web Server in Eclipse

Ability to specify publish directoryDefining the HTTP server portSupport for Home Page URLs (~username)

J2EE ServersMultiple J2EE Servers (Tomcat, JBOSS. etc.)Testing done using Tomcat

Publishing OptionsAutomatically publish to serverNever publish to server

IBM Software Group


Embedded Browser

Integrated the Mozilla Browser Using XULRunnerProvides the engine for AJAX Tooling

DebuggerJavaScript EngineBrowser Views

Mozilla perspective

IBM Software Group


Embedded Browser

Latest ImprovementsSupport for Mac OS XSupport for IBM’s JVMSupport for HTTPS Browser widget profile support

Future EnhancementsGeneric Multiple Browser SupportI.E supportOther Browsers

IBM Software Group


JavaScript Debugger

BreakpointsAbility to set breakpoints in JavaScript

Any file type with JavaScript content (html, js, php).Breakpoints can be enable/disabled

Debug Views for JavaScriptCall Stack VariablesBreakpointsScripts View

Expression SupportDebug Preference options

IBM Software Group


URL Debugging/Running

HTTP or File URL supportAble 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.

EditorDebuggerBrowser tooling

Breakpoint ManagementUser has to manually delete breakpoints

IBM Software Group


Debugging

Latest ImprovementsBrowser Refresh supportDebug a project without running on ServerExpression support

Future EnhancementsJavaScript Eval() supportI.E Debugging supportOther Browsers Debugging support

IBM Software Group


Browser ToolingDOM 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 removedA breadcrumb trail of hyperlinks is created for the node's path

DOM Source viewDisplays the HTML source of the selected DOM node Source can edited, validated, and updated back to the browserNotification of a DOM element's source being out of sync with the

browser

DOM watcherWatch events for a selected node.

IBM Software Group


Browser Tooling

DOM CompareAllows nodes to be compared

Browser ConsoleShows all browser (i.e JavaScript, CSS) errors, warnings, and logging

messages Double clicking on an error opens to the relevant line of code

XMLHTTPRequest MonitorObserve XMLHTTPRequest request/response information Formatting of the response body based on content-types

JavaScript Eval viewInteractive JavaScript Evaluation

IBM Software Group


Browser ToolingCSS View

Style Rules Shows the rules and their defined properties Able to edit and add a propertyOpen CSS file for the rule and property Highlights the DOM elements using a selected style rule or property

Computed StylesShows every style rule computed by the browser

Box ModelShows the dimensions, x-y coordinates, padding, border, and margin

information

Diffs Shows the changes made to CSS rules and properties

IBM Software Group


Browser Tooling

Latest ImprovementsDOM events watcherJavaScript Eval viewDOM Compare viewDOM inspector filteringExtensible Framework for creating new Browser Tools.

Future EnhanementsSupport for I.E.Other Browsers.

IBM Software Group


Installing/Configuring AJAX Toolkit Framework

XULRunner 1.8.2Must 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 runtimesMust be manually downloaded and configured. All Ajax runtimes are optionalOnly need to configure runtimes that will be used.

IBM Software Group


Installing/Configuring AJAX Toolkit FrameworkLatest Improvements

Preference options for configuring AJAX runtimesAjax Runtimes are now optionalPlatform independent download

Future Enhancements Packaging XULRunnner as a pluginRestructuring 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

IBM Software Group


Personality Builder

A set of Wizards which accept:Artifact data (AJAX toolkit libraries)Build requirements dataNew application templatesCode patternsDeployment data

Wizards output a ‘basic’ Personality PluginThe builder will provide necessary basic development features

targeted for AJAX toolkitsEnables customization and addition of functionality

IBM Software Group


Where to get AJAX Toolkit Framework

Open Source Project on Eclipsewww.eclipse.org/atfListserv and Newsgroup

[email protected]://eclipse.webtools.atf/

Source Code in Eclipse CVSMilestones and Weekly builds

www.eclipse.org/atf/downloads/index.php

Flash Demo Movieswww.eclipse.org/atf/flash/index.php

http://www.eclipse.org/atf

mailto:[email protected]

news://eclipse.webtools.atf/



http://www.eclipse.org/atf/downloads/index.php

http://www.eclipse.org/atf/flash/index.php

IBM Software Group



Would like AJAX developers to use the toolTell us what you like or dislikeEnhancements that should be made.

Would like AJAX Runtime vendors to plug-in their runtimes

Looking for Contributors

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.

®

Emerging Internet Technologies

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

Screen Shots AJAX Toolkit Framework in Action

IBM Software Group


Project creationUse standard Web projects for

AJAX application

Static Web ProjectDynamic Web Project

IBM Software Group


Project CreationAdding a Dojo runtime to a Static

Web Project using facets

IBM Software Group


URL Debugging and RunningCreating a Debug

configuration to debug an AJAX application using an URL.

IBM Software Group


URL Debugging and RunningA file opened in the

JavaScript editor using an URL

IBM Software Group


Debugger - BreakpointsBreakpoint can be set by

double clicking in ruler.

IBM Software Group


Debugger PreferencesNew debug options can be set

from the preference menu.

IBM Software Group


DebuggerExpressions can be entered that

are evaluated in the debug session.

IBM Software Group


DOM Source View

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

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.

IBM Software Group


XHR Monitor

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

IBM Software Group


CSS View

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

IBM Software Group


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

browser page

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).

IBM Software Group


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

element.

IBM Software Group


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

1.8.1 only

IBM Software Group


CSS View

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

Documents

® Emerging Internet Technologies © Copyright 2007 IBM Corp. ; made available under the EPL v1.0 AJAX Toolkit Framework Robert Goodman