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
Ajax Request Monitor View
Example screenshot of MyEclipse Ajax Workbench™
Note-1: It is recommended that you read this document
before reading the
MyEclipse Ajax Workbench™
The MyEclipse Ajax Workbench™ is a special
workbench which provides MyEclipse Ajax tools in a single
window. When a MyEclipse Ajax Web Browser is created or a
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
MyEclipse Ajax Workbench Window
MyEclipse Ajax Perspective
MyEclipse Ajax Web Browser
DOM Inspector View
DOM Source View
Ajax Monitor View
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
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 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.
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.
launched the MyEclipse Ajax Workbench™ will open and the
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 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.
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 (
4.1.2: Launching a new MyEclipse Ajax Web Browser from
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
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
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.
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 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 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.
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
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
As you select nodes in the DOM Inspector view, the corresponding
objects in the browser will temporarily flash to reveal their
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.
Using the DOM Attributes Editor to dynamically change DOM
The DOM Inspector has a Search
Filter capability that allows searching nodes by 3 different
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
Update Browser source with changes
Refresh source from browser
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.
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
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
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
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
choose "Evaluate Node" for it to be shown in the
Figure 5.4.1: Evaluation of DOM Node in
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:
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
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
The Ajax Request Monitor View
produces while loading pages and style sheets, as well as
display only messages of a certain type.
shown in Figure 5.7.2.
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
next to the New Ajax Web Browser action.
Session is active.
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
This section assumes that you are familiar with the MyEclipse
engine. This debugging engine is used by the integrated
launch a new MyEclipse Ajax Web Browser instance in the MyEclipse
corresponding Ajax Web Browser will be automatically closed.
Why can't I see any Ajax features in my
Your configuration cache may be corrupted. Restart your eclipse
executable one time with the "-clean" argument to
clear out the configuration cache.
You have a previous version of MyEclipse, not the latest version
How do I open the Ajax Web Browser?
Open the Ajax perspective and use either the toolbar action with
icon or the New File wizard entry under
Why does a new workbench window open when
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
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.
If you have comments or suggestions regarding this document
please submit them to the