AJAX toolkit

®

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

Overview

AJAX Toolkit Framework Components

Component Details

JavaScriptTM Development Tools Project

Where 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



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

IBM Software Group


MozillaXULRunner & JavaConnect

Eclipse WebTools

Eclipse Plugins


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 Creation

Support a number of AJAX runtimes todayDojo, 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 Validation

Integrated JavaScript editor

Batch and as-you-type syntax validationSyntax 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.

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 Enhancements

JavaScript Development ToolsA 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 Deployment

Multiple Server TypesHTTP Web Server J2EE Servers

HTTP Web Server

Support defining a HTTP Web Server in EclipseAbility 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 XULRunner

Provides the engine for AJAX ToolingDebugger

JavaScript Engine

Browser Views

Mozilla perspective

IBM Software Group


Embedded Browser

Latest ImprovementsSupport for Mac OS X

Support for IBM’s JVM

Support for HTTPS

Browser widget profile support

Future EnhancementsGeneric Multiple Browser Support

I.E support

Other Browsers

IBM Software Group


JavaScript Debugger

Breakpoints

Ability to set breakpoints in JavaScriptAny file type with JavaScript content (html, js, php).

Breakpoints can be enable/disabled

Debug Views for JavaScriptCall Stack

Variables

Breakpoints

Scripts View

Expression Support

Debug Preference options

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 ManagementUser has to manually delete breakpoints

IBM Software Group


Debugging

Latest ImprovementsBrowser Refresh support

Debug a project without running on Server

Expression support

Future EnhancementsJavaScript Eval() support

I.E Debugging support

Other Browsers Debugging support

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 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 Tooling

CSS ViewStyle 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 watcher

JavaScript Eval view

DOM Compare view

DOM inspector filtering

Extensible 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 optional

Only need to configure runtimes that will be used.

IBM Software Group


Installing/Configuring AJAX Toolkit Framework

Latest ImprovementsPreference 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 data

New application templates

Code patterns

Deployment data

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

targeted for AJAX toolkits

Enables customization and addition of functionality

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 buildswww.eclipse.org/atf/downloads/index.php

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

IBM Software Group



Would like AJAX developers to use the toolTell us what you like or dislike

Enhancements 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 creation

Use standard Web projects for AJAX application

Static Web Project

Dynamic Web Project

IBM Software Group


Project Creation

Adding a Dojo runtime to a Static Web Project using facets

IBM Software Group


URL Debugging and Running

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

IBM Software Group


URL Debugging and Running

A file opened in the JavaScript editor using an URL

IBM Software Group


Debugger - Breakpoints

Breakpoint can be set by double clicking in ruler.

IBM Software Group


Debugger Preferences

New debug options can be set from the preference menu.

IBM Software Group


Debugger

Expressions 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

AJAX toolkit

Documents

Transcript of AJAX toolkit