AJAX Toolkit Framework
Transcript of 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
Eclipse Foundation, Inc.
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
MozillaXULRunner & JavaXPCOM
EECCLLIIPPSSEE
Eclipse WebTools
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 ToolsJavaScriptTM 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
MozillaXULRunner & JavaXPCOM Eclipse WebTools
Eclipse Plugins
JavaScript Syntax Validator
PersonalitiesDOM Inspector And JavaScript
ConsoleJava Script Debugger
Embedded Mozilla Browser
Personality Builder
Rico Personality
Zimbra Personality
Dojo Personality
Rico Zimbra Dojo
Personality Common Libraries
AJAX “X” Personality
Ajax-x
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 JSLintDetects 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 BrowserUsing XULRunnerProvides 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 SupportDebug 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 enhancementsImprove Install
better support for run time dependenciesPersonality 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 CVSMilestones and Weekly builds
www.eclipse.org/atf/downloads/index.phpFlash 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.
© 2002 IBM Corporation
Confidential | Date | Other Information, if necessaryNovember 29, 2006
Screen Shots of products using ATF provided by different vendors.