MyEclipse Logo

MyEclipse Ajax Workbench Overview

Outline

  1. Introduction
  2. MyEclipse Ajax Workbench
  3. MyEclipse Ajax Perspective
  4. Ajax Web Browser
    1. How to use the the MyEclipse Ajax Browser
    2. MyEclipse Ajax Web Browser actions
  5. Ajax Related Views
    1. DOM Inspector View
    2. DOM Source View
    3. DOM Watcher View
    4. JavaScript View
    5. CSS View
    6. Ajax Request Monitor View
    7. JavaScript Console View
    8. JavaScript Scripts Inspector View
  6. JavaScript Debugging Support
  7. FAQ
  8. User Feedback
  9. Resources

1. Introduction

MyEclipse is the first Eclipse-based product to provide the essential development features for programming and debugging Ajax web applications.  All Ajax tools and their 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 and its tools.

Topics introduced in this document include:

  • 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


Figure 1.1 Example screenshot of MyEclipse Ajax Workbench™

Note-1: It is recommended that you read this document before reading the JavaScript Development and Debugging Tutorial.

2. 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 feature-sets:

  • 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.


Figure 2.1: The MyEclipse Ajax Workbench™

3. 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 Figure 2.1 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.


Figure 3.1: Perspective shortcut

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 the all of the related Ajax views that are discussed in Section 5.

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.  


Figure 4.1: 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 in Figure 4.2.


Figure 4.2: Ajax Web Browser Source View

4.1 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 Figure 4.1.1 below).  This action can be found in many of the MyEclipse development perspectives.


Figure 4.1.1: Launch Ajax Web Browser action

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


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

The MyEclipse Ajax Web Browser can also support any proxy configuration that the user has set by using the Window > Preferences > General > Network Connections preference panel


Figure 4.1.3: General proxy configuration that the Ajax Web Browser will honor

4.2 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.


Figure 4.2.1: Ajax Web Browser Actions

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


Figure 4.2.2: 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 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 view 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 in Figure 5.1.


Figure 5.1: Opening Ajax Related Views via Window->Show View

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 Figure 5.1.1, 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 view, the corresponding objects in the browser will temporarily flash to reveal their location.  


Figure 5.1.1: DOM Inspector view

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 in Figure 5.1.2.


Figure 5.1.2: 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.

  1. Name Filter
  2. ID Filter
  3. Class Filter

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


Figure 5.1.3: DOM Inspector Search

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


Figure 5.1.4: DOM Node Actions

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 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

  1. Update Browser source with changes
  2. Refresh source from browser
  3. Validate DOM Source


    Figure 5.2.1: DOM Source view 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 5.2.2, the chat DIV has been selected and in the DOM Source view you can see the DIV element is initially empty.  


Figure 5.2.2: Using the DOM Source View to view dynamic DOM elements

In the next Figure 5.2.3, 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 view.


Figure 5.2.3: 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 view with the latest version of the Node source as shown in Figure 5.2.4.


Figure 5.2.4: Refreshing the changes to the DOM Node

5.3 DOM Watcher View

The DOM Watcher view can monitor the events or changes that are associated with any selected or referenced node in the browser.  In Figure 5.3.1, 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.


Figure 5.3.1: 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 view.  In Figure 5.3.2, the DIV element which was hidden has now been made visible through JavaScript and you can see the style attribute change.


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

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


Figure 5.3.3: 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.  Simply right-click on any DOM node and choose "Evaluate Node" for it to be shown in the JavaScript view as shown in Figure 5.4.1.


Figure 5.4.1: Evaluation of DOM Node in JavaScript view

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


Figure 5.4.2: General evaluation of JavaScript code

5.5 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 in the CSS View as shown in Figure 5.5.1.


Figure 5.5.1: CSS View Styles

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


Figure 5.5.2: Box Model in CSS View

5.6 Ajax Request Monitor View

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.


Figure 5.6.1: The Ajax Request Monitor View


5.7 JavaScript Console View

The JavaScript Console View 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.


Figure 5.7.1: The JavaScript Console displaying CSS warnings.

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


Figure 5.7.2: JavaScript error shown in JavaScript console

5.8 JavaScript Scripts Inspector View

The JavaScript Scripts Inspector View 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.


Figure 5.8.1: The JavaScript Scripts Inspector View 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.


Figure 5.8.2: The JavaScript Scripts Inspector View displaying URLs and functions.

6. JavaScript Debugging Support

This section assumes that you are familiar with the MyEclipse 6.0 JavaScript Debugger and have read the JavaScript Development and Debugging Tutorial.

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 will launch a new MyEclipse Ajax Web Browser instance in the MyEclipse Ajax Workbench™ with the JavaScript debugging engine enabled.  Upon completion of a JavaScript debug session, its corresponding Ajax Web Browser will be automatically closed.

7. FAQ

Why can't I see any Ajax features in my workbench?

  1. Your configuration cache may be corrupted. Restart your eclipse executable one time with the "-clean" argument to clear out the configuration cache.
  2. You have a previous version of MyEclipse, not the latest version 6.0 GA.

How do I open the Ajax Web Browser?

Open the Ajax perspective and use either the toolbar action with the icon or the New File wizard entry under File>New>MyEclipse>Web .

Why does a new workbench window open when I debug a JavaScript application or open a Ajax Web Browser?

All instances of the MyEclipse Ajax Web Browser are opened in the MyEclipse Ajax Workbench™. If an active MyEclipse Web 2.0 Workbench™ is not already open, a new MyEclipse Ajax Workbench Workbench™ window is opened. Since 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 that is compatible with Firefox 2.0.

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.

8. User Feedback

If you have comments or suggestions regarding this document please submit them to the MyEclipse Documentation Forum.

9. Resources