News

Speed AJAX Development With ATF

• By Lee Thé
• October 11, 2007

Expert programmers have been able to build AJAX-type applications for years. However, the rest of the programming community needs frameworks and integrated development environments (IDEs) to accomplish the task. The programming community also needs easier languages than C++ and Java, and JavaScript has satisfied that need. It looks a bit like Java but is otherwise unrelated -- and much simpler to use.

The framework part of the data-intensive Web app puzzle is still being tackled. The AJAX Toolkit Framework for Eclipse (ATF), now in development, is one effort to help ease the effort of programmers developing data-intensive Web apps.

Details about the new ATF Framework were described at the recent AjaxWorld conference by Robert Goodman, an IBM software engineer who's the ATF project leader. He demonstrated ATF's components and also provided information about a proposed JavaScript Development Tool (JDT).

What's ATF?
ATF provides tools for creating and debugging AJAX applications. Those tools include enhanced JavaScript editing capabilities, such as edit-time syntax checking, and an embedded Document Object Model (DOM) browser. The DOM is used to represent HTML or XML formats and the like with a standard object model independent of platform and language.

ATF tools also include a JS debugger, JS console, an embedded Mozilla Web browser (Firefox), support for various AJAX toolkits, such as Dojo, Zimbra and Rico, and tools for Cascading Style Sheets.

ATF integrates tightly with the user interface (UI) and development paradigm of Eclipse, a Java-centric IDE. Eclipse has a strong support community, with more than 60 projects to date. ATF is one of those Eclipse projects and has support from major vendors such as IBM, Eclipse's originator.

ATF is a collection of Eclipse plug-ins running on top of the Eclipse WebTools Platform (WTP) within Eclipse. WTP extends the Eclipse platform with tools for developing Web and Java EE applications, including source and graphical editors for a variety of languages, application development wizards, and tools and APIs for deploying, running, and testing apps. Eclipse in turn runs on top of Mozilla XULRunner and JavaXPCOM. XUL is Mozilla's UI language. XPCOM is a cross-platform object model whose multiple language bindings include Java and JS.

ATF has five main components:

• Browser tooling, with a DOM Inspector, DOM Source view, Browser Console, HTTP Request Monitor, CSS Tools and more;
• JavaScript Debugger, including Stack Frame (activation record), Variables, and Script View;
• JavaScript Development Tools, including JS editing and tooling;
• Embedded Mozilla browser, which lets you run and debug AJAX apps in it; and
• Application Deployment of AJAX apps to a server.

ATF Streamlines AJAX and JS Development
Goodman said the ATF project's goal was to provide "an ever-expanding set of high-function tools for AJAX developers." He described ATF as an "extensible framework that supports using arbitrary AJAX runtimes through the Personality Builder function."

The Personality Builder assists in the construction of arbitrary AJAX runtime frameworks, enabling you to use those runtimes with ATF tools. Goodman added that you can use ATF to create, debug and deploy AJAX apps on the popular Apache and J2EE servers.

You don't have to be doing AJAX development to use ATF, Goodman pointed out. ATF works for building Dynamic HTML (DHTML) and straight JS applications as well.

For ATF "we've removed everything we thought Web developers didn't need," Goodman said. He contrasted that approach with Eclipse's kitchen sink approach, which he said had elicited complaints for providing too much. ATF sticks to useful elements for Web developers, including its script view, which lets you see active scripts in the browser. By the same token, ATF leave out Java development tools, along with the Java Enterprise Editions.

Install ATF on XP, Linux, or Mac OS
Goodman said it's simple to install and configure ATF. All-in-one packages are available, with builds for Win32 (XP), Linux (32 bit) and Mac OS. ATF does require a Java 5 runtime environment, which provides the libraries, the Java Virtual Machine and other components to run Java applets and apps. If you have Eclipse, it will install on top of that using the Eclipse Update Manager, which also checks and downloads dependencies.

AFT provides generic AJAX runtime support. It can configure and use most AJAX runtimes, which need to be downloaded manually. ATF does not ship AJAX runtimes -- you must configure and use one of your choosing. Such runtimes are optional, because you can do JS/DHTML development instead. AFT includes wizards to create an AJAX Project and configure an AJAX runtime, along with supporting static and dynamic Web projects.

A new component at the time of writing is the JDT project, independent of AJAX. This project provides the same level of functionality as Java tools in Eclipse. JDT provides a real JavaScript model, enhanced code completion, an enhanced outline view, code formatting, code refactoring to improve readability and language-level searching. You'll be able to use it as a standalone editor or integrated into the Eclipse Web tools platform.

For example, Goodman demonstrated how JDT autoformats your HTML file. It specifies where Dojo is, if you're using Dojo, and it reparses the file and validates it. It validates a file as you type, hovering over errors. Errors show up in a Problems View window, which takes you to where the error is.

Deploy ATF Apps Over HTTP or J2EE Servers
ATF supports deploying apps over both HTTP and J2EE servers. It can define an external HTTP server, with a homepage URL option on Linux. It should also work on any J2EE server available on Eclipse, though Goodman conceded that it has only been tested in Apache Tomcat so far.

On an HTTP Web server, JDT features an embedded preview server. ATF supports defining an external HTTP Web server, letting you specify a publish directory and define the HTTP server port. You can opt to automatically publish to a server or never to do so.
ATF's embedded browser provides the engine for AJAX tooling, with a debugger, JS engine and browser tooling views.

The JS debugger provides breakpoints you can set in JS. You can enable/disable them and use any file time with JS content, including HTML. Debug views for JS include call stack, variables, breakpoints and scripts view. You also get expression support and a number of debug preference options. ATF provides HTTP or file URL support for launching and debugging an AJAX app using a URL. You can use the editor, debugger and browser tooling to handle files by URL. However, you do have to manually delete breakpoints.

Inspect Your DOC and CSS Every Which Way
The browser tooling's DOM inspector shows the DOM tree rendered by the browser, dynamically updated to reflect changes in the browser. You can edit, add to, and remove node attributes, and the node's path creates a breadcrumb trail of hyperlinks.

The DOM source view displays the HTML source of a selected DOM node. You can edit, validate and update source back to the browser. The DOM Watcher watches events for a selected node, while DOM Compare compares nodes. A browser console shows all browser (i.e., JS, CSS) errors, warnings and logging messages. Double clicking on an error opens to the relevant line of code. A Request Monitor observes HTTP request/response information. The monitor formats the response body based on content types. And a JS eval view provides interactive JS evaluation.

AFT's CSS View provides style rules that show the rules and their defined properties. You can edit and add a property, open a CSS file for the rule and property, and highlight the DOM elements using a selected style rule or property. Computer Styles shows every style rule computed by the browser. Box Model shows the dimensions, x-y coordinates, padding, border and margin information. Lastly, Diffs shows the changes made to CSS rules and properties.

ATF Prospects
Some in the audience asked about unit testing or performance profiling tools in ATF. Goodman said not yet -- ditto for integrating ATF with JS unit testing.

"What we're going after next is PHP (Hypertext Preprocessor language) integration," he added, and possibly Microsoft Internet Explorer support as well. However, Goodman pointed out that the IE debugger "locks the entire browser, so it would hang Eclipse."

Goodman ended on a request for participation. He wants to know what you like or dislike, and enhancements you want. And he's looking for contributors, particularly if they are Java or Eclipse developers. He pointed out that ATF is free, including a listserv, newsgroup and source code. His team does milestones and weekly (well, usually weekly) builds. The Web site includes movies and presentations.