MyEclipse Ajax Workbench™

The MyEclipse Ajax Workbench™ is a special Eclipse workbench which 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 MyEclipse Ajax Workbench™ consists of the following features:

MyEclipse Ajax Workbench Window
MyEclipse Ajax Perspective
MyEclipse Ajax Web Browser
DOM Inspector View
DOM Source View
JavaScript Console View
JavaScript Scripts Inspector View
Ajax Monitor View
Instant-on JavaScript Debugging

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.

The MyEclipse Ajax Workbench™

MyEclipse Ajax Perspective

The MyEclipse Ajax Perspective is a user customizable layout of user-interface views, editors, menus and toolbar actions. The perspective's default layout can be seen in the figure above. The MyEclipse Ajax Perspective is opened by default when the MyEclipse Ajax Workbench™ is created, but can be accessed via the perspective shortcut pulldown.

Perspective shortcut

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 the all of the related Ajax views that are discussed in the Ajax Related Views section.

In addition, the MyEclipse Ajax Web Browser provides JavaScript debugging facilities. When a JavaScript debug session is launched the MyEclipse Ajax Workbench™ will open and the MyEclipse Ajax Web Browser will display the JavaScript application that is being debugged. The JavaScript scripts that are loaded will be displayed 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 which correspond with selected HTML elements in the browser.

MyEclipse Ajax Browser

The MyEclipse Ajax Web Browser also provides a source view page that displays the HTML source of the current page in the browser as shown.

Ajax Web Browser Source View

How to use the MyEclipse Ajax Web Browser

The easiest method for launching the Ajax Web Browser from the MyEclipse Ajax Perspective is to use the Launch MyEclipse Ajax Web Browser action the main toolbar (see the figure below). This action can be found in many of the MyEclipse development perspectives.

Launch Ajax Web Browser action

An alternative method for launching the Ajax Web Browser is from the New File Wizard in eclipse as depicted ( File->New->MyEclipse->Web->Ajax Web Browser).

Launching a new MyEclipse Ajax Web Browser from File->New

MyEclipse Ajax Web Browser Actions

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 browser cache, removes all 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 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.

Ajax Web Browser Actions

To use DOM selection, click the DOM selection button and then use Ctrl+Click in the browser as shown.

Using the DOM Selection Tool to quickly navigate the DOM

Ajax Related Views

The MyEclipse Ajax Web Browser allows you to preview your web applications from within MyEclipse, however it's true power lies in the supporting views that surround it.

The DOM Inspector allows you to view the structure of the document currently loaded in the browser.
The DOM Source allows you to view the dynamic HTML source of the DOM nodes currently selected in the DOM Inspector.
The DOM Watcher can monitor the changes that happen over a period of time for a particular element.
The JavaScript view can evaluation DOM nodes and execute JavaScript on the current DOM document.
The CSS View shows extended design information for CSS and allows for dynamic update of CSS attributes on DOM node.
The Ajax Request Monitor allows you to inspect your asynchronous calls and is much easier than using a TCP/IP monitor.
The JavaScript Console displays the errors that arise during the execution of your JavaScript application.
The JavaScript Scripts Inspector allows you to see all of the JavaScript scripts that are loaded by web pages both local and remote.

The MyEclipse Ajax Perspective includes all of these views by default. If you have closed a view and wish to re-open it you can access these views from the Ajax Perspective via the Window->Show View submenu as is depicted.

Opening Ajax Related Views via Window->Show View

DOM Inspector

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 figure below, the Ajax Web Browser has loaded the Google home page and the corresponding DOM is depicted by the DOM Inspector.

Notice that 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 introspect the CSS style that was computed by the browser for the selected node.

As you select nodes in the DOM Inspector, the corresponding objects in the browser will temporarily flash to reveal their location.

DOM Inspector

Using the DOM Inspector you can dynamically change the attributes of some tags. In the next figure, the width and height attributes of the IMG node have been adjusted dramatically for effect using the Attributes Editor as shown.

Using the DOM Attributes Editor to dynamically change DOM element attributes

The DOM Inspector has a Search Filter capability that allows searching nodes by 3 different search criteria.

Name Filter
ID Filter
Class Filter

In the following, the Name filter has been activated and the search criteria is "DIV". Notice how only the DIV elements are shown in the DOM Inspector.

DOM Inspector Search

Each node in the DOM Inspector has several actions that can be performed on it through the context-menu. The figure below shows all of the DOM node related actions that are available for any node in the DOM Inspector.

DOM Node Actions

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 allows you to see the dynamic source that is no longer available in the Browser source page.

There are several actions available on 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.

DOM Source view actions

Update Browser source with changes
Refresh source from browser
Validate DOM Source

DOM Source actions

The following figure illustrates the potential of the DOM Source View. If the example below, a chat application uses a DIV element to add new chat messages. In this figure, the chat DIV has been selected and in the DOM Source you can see the DIV element is initially empty.

Using the DOM Source to view dynamic DOM elements

In the next figure, a new chat message has appeared via an Ajax request and the DOM Source view indicates that there have been changes to this node in the DOM Source.

DOM Source status changes to show that selected element has changed

Now that the DOM Source has changed the "Refresh" action can be used to update the DOM Source with the latest version of the Node source as shown.

Refreshing the changes to the DOM Node

DOM Watcher

The DOM Watcher can monitor the events or changes that are associated with any selected or referenced node in the browser. In the figure below, a DIV element in the browser page has been selected and the "Start Watching" action has been used to monitor any events that fire off of that element.

DOM Watcher view starts watch on a DIV element

If any events fire from this DIV element, those events and their changes will be listed in the DOM Watcher. In this figure, the DIV element which was hidden has now been made visible through javascript and you can see the style attribute change.

DOM Watcher shows the attribute change to the element that is being watched

By default all events will be logged in the DOM Watcher. However, you can modify the list of events that are "watched" through the "Settings..." menu action as shown.

Settings for supported events in the DOM Watcher view

JavaScript View

The JavaScript view allows evaluation of any DOM node as a JavaScript object. Simply right-click on any DOM node and choose "Evaluate Node" for it to be shown in the JavaScript view as shown.

Evaluation of DOM Node in JavaScript view

The JavaScript expression field can handle general evaluation of JavaScript code as shown.

General evaluation of JavaScript code

CSS View

The CSS View shows extended information for elements that are selected in the DOM Inspector. The CSS View shows the following 4 types of extended CSS information:

Style Rules
Computed Styles
Box Model
Diffs

CSS properties can be added or edited using the actions as shown.

CSS Styles

The Box Model for a particular element can be displayed in the CSS View as shown. Modification of the box model is possible by using the Navigation Controls.

Box Model in CSS View

Ajax Request Monitor

The Ajax Request Monitor allows you to inspect the requests and responses your 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.

The Ajax Request Monitor

JavaScript Console

The JavaScript Console displays messages that the browser produces while loading pages and style sheets, as well as JavaScript warnings and errors. The view can be filtered to display only messages of a certain type.

The JavaScript Console displaying CSS warnings.

JavaScript errors and exceptions are also shown in the JavaScript Console as shown.

JavaScript error shown in JavaScript console

JavaScript Scripts Inspector

The JavaScript Scripts Inspector displays all of the scripts that are loaded during the rendering of a web page. In order for the scripts view to populate with scripts you must be running a JavaScript debug session. The easiest way to do this is to select the Instant-on JavaScript Debugging action located in the toolbar next to the New Ajax Web Browser action.

The JavaScript Scripts Inspector when no JavaScript Debug Session is active.

Once the JavaScript Scripts Inspector has been populated you can double click on a URL or function in the scripts view to open an editor to display the source of that URL or function. The editor opened will be read only, but it will allow you to set breakpoints and debug the JavaScript application.

For more information on JavaScript debugging in MyEclipse see the JavaScript Development and Debugging Tutorial.

The JavaScript Scripts Inspector displaying URLs and functions.

JavaScript Editor

The MyEclipse JavaScript Editor provides advanced language specific editing features such as:

Code-Assist
Syntax Checking
Validation
Outline view
Source Actions: Formatting, Quick comment
Editor Preferences

Code-Assist

The JavaScript editor provides code-assist proposals for your current context whenever you press the Ctrl+Space key combination. Each proposal includes a small graphic indicator of whether the JavaScript proposal is supported by IE and Netscape/Mozilla/Firefox. If a browser compatibility indicator is grayed out then the proposal is not supported by that browser.

JavaScript content-assist example

Local JavaScript variables and functions are also made available in the code-assist proposals.

Local JavaScript Function completion

Syntax Checking

The JavaScript editor provides "as-you-type" syntax checking and shows syntax errors in multiple locations to make it easy to see where errors are in your JavaScript code.

"As-you-type" Syntax checking

Validation

Validation problems are indicated as warning markers in the JavaScript Editor, Problems view and in the Package Explorer view. To view problem details, in the JavaScript fly-over a warning marker in the left margin as shown.

Viewing JavaScript validation warnings

Outline View

The outline view depicts a structured view of the functions and variables of a JavaScript Editor. The variables in the list may be filtered using the "Show Variables" action from the view's menubar.

Outline view with activated menu

Source Actions: Formatting/Quick Comment

The JavaScript editor can quickly format either highlighted sections or the entire JavaScript file. This action is available in the Source menu, editor Context-menu, or using the Ctrl+F shortcut.

Format action