1. ® Emerging Internet Technologies © Copyright 2007 IBM Corp. ; made available under the EPL v1.0 AJAX Toolkit Framework Robert Goodman (goodmanr@us.ibm.com) IBM Software Group

2. © Copyright 2007 IBM Corp. ; made available under the EPL v1.0 2 Agenda  Overview  AJAX Toolkit Framework Components  Component Details  JavaScript TM Development Tools Project  Where to get AJAX Toolkit Framework  Demonstrations through-out

3. IBM Software Group © Copyright 2007 IBM Corp. ; made available under the EPL v1.0 3 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

4. IBM Software Group © Copyright 2007 IBM Corp. ; made available under the EPL v1.0 4 Mozilla XULRunner & JavaXPCOM AJAX Toolkit Framework are Eclipse Plugins ECLIPSE Eclipse WebTools AJAX Toolkit Framework AJAX Toolkit Framework is a collection of Eclipse plugins

5. IBM Software Group © Copyright 2007 IBM Corp. ; made available under the EPL v1.0 5 AJAX Toolkit Framework Components  Browser Tooling DOM Inspector, DOM Source view, Browser Console, Request Monitor, CSS Tools, etc.  JavaScript TM Debugger Stack Frame, Variables and Script view  JavaScript TM Development Tools Robust JavaScript Tooling  Embedded Mozilla Browser Run/Debug an Ajax application in the Embedded Mozilla Browser  Application Deployment Deployment of an AJAX Application to a server.

6. IBM Software Group © Copyright 2007 IBM Corp. ; made available under the EPL v1.0 6 Installing/Configuring AJAX Toolkit Framework  All-in-one packages available. Builds available for Win32 (XP), Linux (32 bit), and Mac OS Contains only the Eclipse/ATF functionality needed by the Web Developer Web Development and Web Tools Perspectives Views and Menus only needed by Web Developers.  No Java Development Tools and Java Enterprise Editions (JSPs, JSF, etc.) Simple Unzip/Tar install.  ATF unzip packages Two packages available WST only WST and JST (J2EE support). Unzip on top of an existing eclipse install. Usual way Eclipse projects are released.  ATF Archive Site Zip. Uses Eclipse Update Manager to install ATF. Checks and download dependences.

7. IBM Software Group © Copyright 2007 IBM Corp. ; made available under the EPL v1.0 7 Installing/Configuring AJAX Toolkit Framework  Generic Ajax Runtime Support Ability to configure and use most Ajax Runtimes Runtimes need to be manually downloaded ATF doesn’t ship Ajax Runtimes.  Configure and use your favorite runtime. Ajax Runtimes are optional  ATF tooling available for JavaScript/DHTML development  Ajax Toolkit Project Wizards to create a Ajax Project and configure an Ajax Runtime Web Tools Static and Dynamic Web Projects are also supported

8. IBM Software Group © Copyright 2007 IBM Corp. ; made available under the EPL v1.0 8 JavaScript Development Tools  JavaScript 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 See Phil Berkland’s Presentation How to Develop AJAX Applications with Eclipse JavaScript Wednesday 1:00pm – 1:45pm

9. IBM Software Group © Copyright 2007 IBM Corp. ; made available under the EPL v1.0 9 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

10. IBM Software Group © Copyright 2007 IBM Corp. ; made available under the EPL v1.0 10 Embedded Browser  Integrated the Mozilla Browser  Using XULRunner  Provides the engine for AJAX Tooling Debugger JavaScript Engine Browser Views  Web Development and Web Tools perspectives

11. IBM Software Group © Copyright 2007 IBM Corp. ; made available under the EPL v1.0 11 JavaScript Debugger  Breakpoints Ability to set breakpoints in JavaScript Any file type with JavaScript content (html, js). Breakpoints can be enable/disabled  Debug Views for JavaScript Call Stack Variables Breakpoints Scripts View  Expression Support  Debug Preference options

12. IBM Software Group © Copyright 2007 IBM Corp. ; made available under the EPL v1.0 12 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 Management User has to manually delete breakpoints

13. IBM Software Group © Copyright 2007 IBM Corp. ; made available under the EPL v1.0 13 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 watcher Watch events for a selected node.

14. IBM Software Group © Copyright 2007 IBM Corp. ; made available under the EPL v1.0 14 Browser Tooling  DOM Compare Allows nodes to be compared  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  Request Monitor Observe HTTP request/response information Formatting of the response body based on content-types  JavaScript Eval view Interactive JavaScript Evaluation

15. IBM Software Group © Copyright 2007 IBM Corp. ; made available under the EPL v1.0 15 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

16. IBM Software Group © Copyright 2007 IBM Corp. ; made available under the EPL v1.0 16 Where to get AJAX Toolkit Framework  Open Source Project on Eclipse www.eclipse.org/atf Listserv and Newsgroup atf-dev@eclipse.org 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

17. IBM Software Group © Copyright 2007 IBM Corp. ; made available under the EPL v1.0 17 AJAX Toolkit Framework  Would like AJAX developers to use the tool Tell us what you like or dislike Enhancements that should be made.  Would like AJAX Runtime vendors to plug-in their runtimes  Looking for Contributors

18. IBM Software Group © Copyright 2007 IBM Corp. ; made available under the EPL v1.0 18 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.