AJAX Toolkit Framework Robert Goodman ( [email_address] ) Leugim (Gino) Bustelo ( [email_address] ) IBM Software Group

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

Overview

AJAX Toolkit Framework Components

Component Details

Where to get AJAX Toolkit Framework

Demonstrations through-out

ATF Based Products

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

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

AJAX Toolkit Framework are Eclipse Plugins Mozilla XULRunner & JavaXPCOM E C L I P S E Eclipse WebTools AJAX Toolkit Framework

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

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

AJAX Toolkit Framework Components Mozilla XULRunner & JavaXPCOM Eclipse WebTools Eclipse Plugins Personalities JavaScript Syntax Validator Personalities DOM 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

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.

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.

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

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

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

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

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

Integrated the Mozilla Browser

Using XULRunner

Provides the engine for AJAX Tooling

Debugger

JavaScript Engine

Browser Views

Mozilla perspective

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

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

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

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

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

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

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

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

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

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

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

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)

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)

Where to get AJAX Toolkit Framework Open Source Project on Eclipse www.eclipse.org/atf Listserv and Newsgroup [email_address] 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

Open Source Project on Eclipse

www.eclipse.org/atf

Listserv and Newsgroup

[email_address]

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

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.

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.

Screen Shots of products using ATF provided by different vendors.

Helmi Technologies RIA IDE

Genuitec MyEclipse 2.0

Visual Drag Drop Editing

DOM Inspection

Event Wizard