AJAX Toolkit Framework

26
© 2002 IBM Corporation Confidential | Date | Other Information, if necessary November 29, 2006 AJAX Toolkit Framework Robert Goodman ([email protected] ) Leugim (Gino) Bustelo ( [email protected] ) IBM Software Group

description

 

Transcript of AJAX Toolkit Framework

Page 1: AJAX Toolkit Framework

© 2002 IBM Corporation

Confidential | Date | Other Information, if necessaryNovember 29, 2006

AJAX Toolkit Framework

Robert Goodman ([email protected])

Leugim (Gino) Bustelo ([email protected] )

IBM Software Group

Page 2: AJAX Toolkit Framework

Eclipse Foundation, Inc.

Agenda

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

Page 3: AJAX Toolkit Framework

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

Page 4: AJAX Toolkit Framework

Eclipse Foundation, Inc.

AJAX Toolkit Framework are Eclipse Plugins

MozillaXULRunner & JavaXPCOM

EECCLLIIPPSSEE

Eclipse WebTools

AJAX Toolkit Framework

Page 5: AJAX Toolkit Framework

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

Page 6: AJAX Toolkit Framework

Eclipse Foundation, Inc.

AJAX Toolkit Framework Components

MozillaXULRunner & JavaXPCOM

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

Page 7: AJAX Toolkit Framework

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.

Page 8: AJAX Toolkit Framework

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

Page 9: AJAX Toolkit Framework

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

Page 10: AJAX Toolkit Framework

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

Page 11: AJAX Toolkit Framework

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

Page 12: AJAX Toolkit Framework

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

Page 13: AJAX Toolkit Framework

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

Page 14: AJAX Toolkit Framework

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

Page 15: AJAX Toolkit Framework

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

Page 16: AJAX Toolkit Framework

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

Page 17: AJAX Toolkit Framework

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)

Page 18: AJAX Toolkit Framework

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

Page 19: AJAX Toolkit Framework

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.

Page 20: AJAX Toolkit Framework

© 2002 IBM Corporation

Confidential | Date | Other Information, if necessaryNovember 29, 2006

Screen Shots of products using ATF provided by different vendors.

Page 21: AJAX Toolkit Framework

Eclipse Foundation, Inc.

Helmi Technologies RIA IDE

Page 22: AJAX Toolkit Framework

Eclipse Foundation, Inc.

Genuitec MyEclipse 2.0

Page 23: AJAX Toolkit Framework

Visual Drag Drop Editing

Page 24: AJAX Toolkit Framework

DOM Inspection

Page 25: AJAX Toolkit Framework

Event Wizard

Page 26: AJAX Toolkit Framework