Upload
sampetruda
View
829
Download
1
Tags:
Embed Size (px)
DESCRIPTION
Citation preview
®
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
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 Components
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
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 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
8© Copyright 2007 IBM Corp. ; made available under the EPL v1.0
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
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 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
11© Copyright 2007 IBM Corp. ; made available under the EPL v1.0
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
12© Copyright 2007 IBM Corp. ; made available under the EPL v1.0
Embedded Browser
Integrated the Mozilla Browser
Using XULRunner
Provides the engine for AJAX ToolingDebugger
JavaScript Engine
Browser 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 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
14© Copyright 2007 IBM Corp. ; made available under the EPL v1.0
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
15© Copyright 2007 IBM Corp. ; made available under the EPL v1.0
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
16© Copyright 2007 IBM Corp. ; made available under the EPL v1.0
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
17© Copyright 2007 IBM Corp. ; made available under the EPL v1.0
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
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 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
20© Copyright 2007 IBM Corp. ; made available under the EPL v1.0
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
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 optional
Only 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 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
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 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
24© Copyright 2007 IBM Corp. ; made available under the EPL v1.0
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
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 dislike
Enhancements 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 creation
Use standard Web projects for AJAX application
Static Web Project
Dynamic Web Project
IBM Software Group
29© Copyright 2007 IBM Corp. ; made available under the EPL v1.0
Project Creation
Adding 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 Running
Creating 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 Running
A 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 - Breakpoints
Breakpoint can be set by double clicking in ruler.
IBM Software Group
33© Copyright 2007 IBM Corp. ; made available under the EPL v1.0
Debugger Preferences
New debug options can be set from the preference menu.
IBM Software Group
34© Copyright 2007 IBM Corp. ; made available under the EPL v1.0
Debugger
Expressions 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