AJAX Workbench in MyEclipse
1. AJAX Tools in MyEclipse
MyEclipse is the first Eclipse-based product to provide the essential development features for programming and debugging AJAX web applications. All AJAX tools and user-interfaces are integrated and managed within a special Eclipse workbench known as the MyEclipse AJAX Workbench™. This document presents an overview of the features, concepts, and instructions for working with the MyEclipse AJAX Workbench.
The AJAX tool set includes:
- MyEclipse AJAX Workbench
- MyEclipse AJAX Perspective
- MyEclipse AJAX Web Browser
- DOM Inspector View
- DOM Source View
- DOM Watcher View
- JavaScript View
- CSS View
- AJAX Request Monitor View
- JavaScript Console View
- JavaScript Debugging
- JavaScript Scripts Inspector View
2. MyEclipse AJAX Workbench™
The MyEclipse AJAX Workbench™ is a special Eclipse workbench that provides MyEclipse AJAX tools in a single window. When a MyEclipse AJAX Web Browser is created or a JavaScript debug session is launched, the MyEclipse AJAX Workbench™ window is activated and the web page and information describing the web page is displayed in the browser and support views.
The following figure depicts the typical layout of the MyEclipse AJAX Workbench™. The highlighted elements are described in further detail in subsequent sections of this document.
3. MyEclipse AJAX Perspective
The MyEclipse AJAX Perspective is a customizable layout of views, editors, menus, and toolbar actions. The perspective’s default layout is shown in the image above. The MyEclipse AJAX Perspective opens by default when the MyEclipse AJAX Workbench™ is created, but can be accessed via the Perspective shortcut menu.
4. MyEclipse AJAX Web Browser
The MyEclipse AJAX Workbench™ provides an integrated version of the Mozilla browser called the MyEclipse AJAX Web Browser, which provides standard web browser capabilities as well as support for related AJAX views.
In addition, the MyEclipse AJAX Web Browser provides JavaScript debugging facilities. When you launch a JavaScript debugging session, the MyEclipse AJAX Workbench™ opens, and the MyEclipse AJAX Web Browser displays the JavaScript application being debugged. The JavaScript scripts that are loaded appear in the JavaScript Scripts Inspector.
The MyEclipse AJAX Web Browser provides standard web browser facilities as well as the DOM Selection tool, which enables you to determine the DOM nodes that correspond with selected HTML elements in the browser.
The MyEclipse AJAX Web Browser also provides a source view page that displays the HTML source of the current page in the browser.
The easiest way to launch the AJAX Web Browser from the MyEclipse AJAX Perspective is to click the Launch MyEclipse AJAX Web Browser icon 
on the toolbar. This icon is found in many of the MyEclipse development perspectives.
An alternate method for launching the AJAX Web Browser is by clicking the New icon 
on the toolbar, and expand MyEclipse>Web.
The MyEclipse AJAX Web Browser can also support any proxy configuration set by selecting Window>Preferences, and expanding General> Network Connections.
The AJAX Web Browser provides standard web browser actions including forward, back, open URL, refresh, and stop loading. In addition to the standard actions, it provides two non-standard actions. The first, Clear Cache, removes saved data from the browser’s cache. The second, the DOM selection action, allows you to select regions within the browser and have the corresponding DOM elements selected automatically in the DOM inspector. This is an easy way to determine how changes in your document are affecting the structure of your document and vice-versa.
To use DOM selection, click the DOM Selection icon 
, and press CTRL while clicking an area in the browser. Selecting an image causes the corresponding elements in the DOM Inspector to be highlighted and the DOM source to display the corresponding source.
5. AJAX-Related Views
The MyEclipse AJAX Web Browser allows you to preview your web applications from within MyEclipse; however its true power lies in the supporting views that surround it.
- DOM Inspector: Allows you to view the structure of the document currently loaded in the browser.
- DOM Source view: Allows you to view the dynamic HTML source of the DOM nodes currently selected in the DOM Inspector.
- DOM Watcher: Monitors the changes that happen over a period of time for a particular element.
- JavaScript view: Can evaluate DOM nodes and execute JavaScript on the current DOM document.
- CSS view: Shows extended design information for CSS and allows for dynamic update of CSS attributes on the DOM node.
- AJAX Request Monitor: Allows you to inspect your asynchronous calls and is much easier than using a TCP/IP monitor.
- JavaScript Console: Displays the errors that arise during the execution of your JavaScript application.
- JavaScript Scripts Inspector: Allows you to see all the JavaScript scripts loaded by web pages both local and remote.
To open specific views, select Window>Show View, and then expand, MyEclipse AJAX.
5.1 DOM Inspector View
The DOM Inspector displays a real-time view of the current browser’s document object model (DOM). The DOM Inspector displays the DOM using a tree of document nodes and an attributes editor, which displays detailed information for the selected node. In the image below, the Google home page is loaded in the AJAX Web Browser, and the corresponding DOM is displayed in the DOM Inspector.
Notice the DOM Inspector allows you to inspect the box model, DOM attributes, and computed styles of each node. The box model allows you to inspect how each node will be displayed, the DOM attributes allows you to inspect the HTML attributes of the selected node, and the computed style allows you to inspect the CSS style computed by the browser for the selected node.
As you select nodes in the DOM Inspector view, the corresponding objects in the browser temporarily flash to reveal their location.
Using the DOM Inspector, you can dynamically change the attributes of some tags. In the image below, the width attribute of the IMG node have been adjusted dramatically for effect, using the Attributes Editor.
The DOM Inspector has a Search Filter capability that allows searching nodes by three different search criteria.
- Name Filter
- ID Filter
- Class Filter
In the image below, the Name filter has been activated, and the search criteria is “DIV”. Only the DIV elements are shown in the DOM Inspector.
Each node in the DOM Inspector has several actions that can be performed on it through the right-click context menu. The following image shows the DOM node related actions that are available for any node in the DOM Inspector.
5.2 DOM Source View
The DOM Source view displays the dynamic source for the element selected in the DOM Inspector view. This is useful if any AJAX routines in your application are modifying the DOM on the page because the DOM Source view displays the dynamic source that is no longer available in the browser source page.
There are several actions available in the DOM Source view that are used to interact with the corresponding DOM node. There is also a Source Status field that displays the current status of the DOM source with respect to the node in the browser.
The following figure illustrates the potential of the DOM Source view. In the example below, a chat application uses a DIV element to add new chat messages. The chat DIV has been selected, and in the DOM Source view you can see the DIV element is initially empty.
In the next image, a new chat message appears via an AJAX request, and the DOM Source view indicates there are changes to this node.
Now that the DOM Source has changed, you can use the Refresh action to update the DOM Source view with the latest version of the node source.
5.3 DOM Watcher View
The DOM Watcher view monitors the events or changes associated with selected or referenced nodes in the browser. In the example below, a DIV element in the browser page is selected, and the Start Watching action is enabled and monitors events that fire off of that element.
If any events fire from this DIV element, those events and their changes appear in the DOM Watcher view. Below, the DIV element that was hidden has now been made visible through JavaScript, and you can see the style attribute change.
By default, all events are logged in the DOM Watcher view. However, you can modify the list of events that are watched by clicking the View Menu icon 
, and selecting Settings from the menu.
5.4 JavaScript View
The JavaScript view allows evaluation of any DOM node as a JavaScript object. Right-click any DOM node, and select Evaluate Node from the menu to view the node in the JavaScript view.
The JavaScript expression field can handle general evaluation of JavaScript code.
5.5 CSS View
The CSS View shows extended information for elements selected in the DOM Inspector. The CSS View shows the following four types of extended CSS information:
- Style Rules
- Computed Styles
- Box Model
- Diffs
CSS properties can be added or edited using the tools in the CSS view.
The Box Model for an element can be displayed in the CSS view. Use the navigation controls to modify the box model.
5.6 AJAX Request Monitor View
The AJAX Request Monitor allows you to inspect the requests and responses the JavaScript application sends and receives. It displays each request/response pair in a table. Selecting an entry in this table displays the headers for each request/response. The body tab allows you to see the body of each request.
5.7 Browser Console View
The Browser Console view displays messages the browser produces while loading pages and style sheets, as well as JavaScript warnings and errors. You can filter the view to display only messages of a certain type.
JavaScript errors and exceptions are also shown in the Browser Console view.
5.8 JavaScript Scripts Inspector View
The JavaScript Scripts Inspector view displays scripts loaded during the rendering of a web page. For the scripts view to populate with scripts, you must be running a JavaScript debugging session. Select the Debug icon 
on the browser toolbar.
When the JavaScript Scripts Inspector is populated, you can double-click a URL or function in the Scripts view to open an editor to display the source of the URL or function. The editor opened is read only, but it allows you to set breakpoints and debug the JavaScript application.
For more information on JavaScript debugging in MyEclipse see the JavaScript debugging tutorial.
6. JavaScript Debugging Support
The AJAX Web Browser includes an integrated JavaScript debugging engine. This debugging engine is used by the integrated MyEclipse JavaScript Debugger. When initiating debugging of a JavaScript application, the MyEclipse JavaScript Debugger launches a new MyEclipse AJAX Web Browser instance in the MyEclipse AJAX Workbench™ with the JavaScript debugging engine enabled. Upon completion of a JavaScript debugging session, the corresponding AJAX Web Browser closes automatically. See the JavaScript debugging tutorial for more information.
Note: The current debugger is available only on Windows 32-bit and Linux 32- and 64-bit. The debugger also runs on OS X 32-bit Carbon in MyEclipse 2014 and earlier. However, because MyEclipse 2015 is supported only on 64-bit Cocoa, the debugger is not available for OS X in MyEclipse 2015. A new debugger that is available for all three OSs is a high priority for the MyEclipse team and is planned to be delivered during the 2015 calendar year.
7. FAQ
Why can’t I see AJAX features in my workbench?
- Your configuration cache could be corrupted. Restart your Eclipse executable one time with the “-clean” argument to clear out the configuration cache.
- You have an old version of MyEclipse.
How do I open the AJAX Web Browser?
Click the AJAX Web Browser icon on the toolbar or select File>New>Other from the menu, and expand MyEclipse>Web in the New window.
Why does a new workbench window open when I debug a JavaScript application or open an AJAX Web Browser?
All instances of the MyEclipse AJAX Web Browser open in the MyEclipse AJAX Workbench™. If an active MyEclipse Web Workbench™ is not already open, a new MyEclipse AJAX Workbench™ window opens. Because debugging a JavaScript application needs a MyEclipse AJAX Web Browser, it opens the MyEclipse AJAX Workbench™, as well.
What rendering engine is used by the MyEclipse AJAX Web Browser?
The browser uses a Gecko/Mozilla-based rendering engine compatible with Firefox.
Why does the DOM Inspector say, “No active browser is selected?”
The DOM Inspector is connected to the currently active MyEclipse AJAX Web Browser. This message appears when there is no active MyEclipse AJAX Web Browser currently selected in the editor area.