®
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
3© Copyright 2007 IBM Corp. ; made available under the EPL v1.0
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
4© Copyright 2007 IBM Corp. ; made available under the EPL v1.0
MozillaXULRunner & Javaconnect
AJAX Toolkit Framework are Eclipse Plugins
EECCLLIIPPSSEE
Eclipse WebTools
AJAX Toolkit Framework
AJAX Toolkit Framework
is a collection of Eclipse plugins
IBM Software Group
5© Copyright 2007 IBM Corp. ; made available under the EPL v1.0
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
6© Copyright 2007 IBM Corp. ; made available under the EPL v1.0
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
7© Copyright 2007 IBM Corp. ; made available under the EPL v1.0
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
8© Copyright 2007 IBM Corp. ; made available under the EPL v1.0
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
9© Copyright 2007 IBM Corp. ; made available under the EPL v1.0
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
10© Copyright 2007 IBM Corp. ; made available under the EPL v1.0
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
11© Copyright 2007 IBM Corp. ; made available under the EPL v1.0
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
12© Copyright 2007 IBM Corp. ; made available under the EPL v1.0
Embedded Browser
Integrated the Mozilla Browser Using XULRunnerProvides the engine for AJAX Tooling
DebuggerJavaScript EngineBrowser Views
Mozilla perspective
IBM Software Group
13© Copyright 2007 IBM Corp. ; made available under the EPL v1.0
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
14© Copyright 2007 IBM Corp. ; made available under the EPL v1.0
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
15© Copyright 2007 IBM Corp. ; made available under the EPL v1.0
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
16© Copyright 2007 IBM Corp. ; made available under the EPL v1.0
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
17© Copyright 2007 IBM Corp. ; made available under the EPL v1.0
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
18© Copyright 2007 IBM Corp. ; made available under the EPL v1.0
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
19© Copyright 2007 IBM Corp. ; made available under the EPL v1.0
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
20© Copyright 2007 IBM Corp. ; made available under the EPL v1.0
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
21© Copyright 2007 IBM Corp. ; made available under the EPL v1.0
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
22© Copyright 2007 IBM Corp. ; made available under the EPL v1.0
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
23© Copyright 2007 IBM Corp. ; made available under the EPL v1.0
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
24© Copyright 2007 IBM Corp. ; made available under the EPL v1.0
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
IBM Software Group
25© Copyright 2007 IBM Corp. ; made available under the EPL v1.0
AJAX Toolkit Framework
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
26© Copyright 2007 IBM Corp. ; made available under the EPL v1.0
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
28© Copyright 2007 IBM Corp. ; made available under the EPL v1.0
Project creationUse standard Web projects for
AJAX application
Static Web ProjectDynamic Web Project
IBM Software Group
29© Copyright 2007 IBM Corp. ; made available under the EPL v1.0
Project CreationAdding a Dojo runtime to a Static
Web Project using facets
IBM Software Group
30© Copyright 2007 IBM Corp. ; made available under the EPL v1.0
URL Debugging and RunningCreating a Debug
configuration to debug an AJAX application using an URL.
IBM Software Group
31© Copyright 2007 IBM Corp. ; made available under the EPL v1.0
URL Debugging and RunningA file opened in the
JavaScript editor using an URL
IBM Software Group
32© Copyright 2007 IBM Corp. ; made available under the EPL v1.0
Debugger - BreakpointsBreakpoint can be set by
double clicking in ruler.
IBM Software Group
33© Copyright 2007 IBM Corp. ; made available under the EPL v1.0
Debugger PreferencesNew debug options can be set
from the preference menu.
IBM Software Group
34© Copyright 2007 IBM Corp. ; made available under the EPL v1.0
DebuggerExpressions can be entered that
are evaluated in the debug session.
IBM Software Group
35© Copyright 2007 IBM Corp. ; made available under the EPL v1.0
DOM Source View
The DOM Source view is now notified of changes in the browser.
IBM Software Group
36© Copyright 2007 IBM Corp. ; made available under the EPL v1.0
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
37© Copyright 2007 IBM Corp. ; made available under the EPL v1.0
XHR Monitor
XHR Monitor now has the ability to format XHR response body according to content-type specified
IBM Software Group
38© Copyright 2007 IBM Corp. ; made available under the EPL v1.0
CSS View
Example of the Graphical box model created for selected DOM element with dimension, padding, border, and margin information
IBM Software Group
39© Copyright 2007 IBM Corp. ; made available under the EPL v1.0
CSS View Ability to add, remove, and edit CSS properties and show CSS changes in the
browser page
IBM Software Group
40© Copyright 2007 IBM Corp. ; made available under the EPL v1.0
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
41© Copyright 2007 IBM Corp. ; made available under the EPL v1.0
CSS View Example of the ability to view all computed style properties for a selected DOM
element.
IBM Software Group
42© Copyright 2007 IBM Corp. ; made available under the EPL v1.0
CSS View The Diff output generated for all CSS style property changes made. XULRunner
1.8.1 only
IBM Software Group
43© Copyright 2007 IBM Corp. ; made available under the EPL v1.0
CSS View
The ability to open the CSS file containing the CSS rule or property. XULRunner 1.8.1 only