|
|
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.
-
Name Filter
-
ID Filter
-
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
-
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.
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
|
|
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
|
|
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
|
|
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
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?
-
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
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
|
