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.

MyEclipse AJAX Workbench™

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.

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.  

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.

AJAX Web Browser Source View

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.

Launching the AJAX Web Browser from the New wizard

The MyEclipse AJAX Web Browser can also support any proxy configuration set by selecting Window>Preferences, and expanding General> Network Connections.

General proxy configuration the AJAX Web Browser honors

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.

AJAX Web Browser actions

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.

Using the DOM Selection tool to quickly navigate the DOM

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.

Opening AJAX-related views from the menu

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.  

DOM Inspector view

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.

Using the DOM Attributes Editor to dynamically change DOM element attributes

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.

DOM Inspector search

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.

DOM node context menu

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.

DOM Source view context menu

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.  

Viewing dynamic DOM elements in the DOM Source view

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.

DOM Source status indicates the selected element changed

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.

Refreshing the changes to the DOM node

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.

DOM Watcher view starts watch on a DIV 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.

DOM Watcher shows the attribute change to the element being watched

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.

Settings for supported events in the DOM Watcher view

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.

Evaluation of DOM node in JavaScript view

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

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.

CSS View styles

The Box Model for an element can be displayed in the CSS view. Use the navigation controls to modify the box model.

Box Model in CSS view

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.

The AJAX Request Monitor View

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 Console displaying CSS warnings

JavaScript errors and exceptions are also shown in the Browser Console view.

JavaScript error shown in the Browser Console

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.

JavaScript Scripts Inspector view displaying URLs and functions

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.