Demos
	Tutorials

Download free trial

MyEclipse Ajax Tools

MyEclipse Ajax Workbench | JavaScript Editor | Ajax Web Browser

MyEclipse is the first Eclipse-based product to provide the essential development features for programming and debugging Ajax web applications.  All Ajax tools (including an advanced JavaScript Debugger) 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.  The MyEclipse JavaScript Debugger is more fully addressed on this page.

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

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.

1. Name Filter
   
2. ID Filter
3. 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

1. Update Browser source with changes
2. Refresh source from browser
3. 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

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

To toggle on or off one or more single line comments select the region to comment and enter Ctrl+Shift+C .

Editor Preferences

The JavaScript editor has several source related preference pages that allow you configure different aspects of editing JavaScript.

JavaScript Preference page

The JavaScript Source page configures options for formatting source and content-assist.  Validation options are also available.

JavaScript Source preference page

JavaScript styles preference page allows customization of syntax highlighting.

JavaScript Styles preference page

The JavaScript validator can be enabled/disabled by configuring the options in the main validation preference page.

JavaScript Validation preferences

JavaScript Debugging Support

Please see the JavaScript Debugger features page here.

As a brief overview, 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.

FAQ

Why can't I see any Ajax features in my workbench?
How do I open the Ajax Web Browser?
Why does a new workbench window open when I debug a JavaScript application or open a Ajax Web Browser?
What rendering engine is used by the MyEclipse Ajax Web Browser?
Why does the DOM Inspector say: No active browser is selected?


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.

Resources

• Download Eclipse 3.3 SDK/Europa
• Download the MyEclipse 6.0 30-day trial edition
• To learn more about JavaScript visit the following site:
  • http://www.w3schools.com/js/default.asp
  • http://www.wdvl.com/Authoring/JavaScript/Tutorial/
• Visit the MyEclipse Educational Material page for more MyEclipse tutorials.

MyEclipse Innovations

The innovation and application of Eclipse technology is Genuitec's sole business. With well over 2 million downloads, our MyEclipse Enterprise Workbench product has grown to be the most popular and successful Eclipse-based JEE IDE. Our long chain of Eclipse technology innovation includes:

• First JSR-045 compliant source-level JSP debugger for Eclipse
• First public article explaining that Eclipse could be used as a rich-client platform in early 2002
• First commercial RCP applications shipped on Eclipse 2.0, well before the Eclipse 3.0 RCP
• First and most comprehensive suite of application server connectors for Eclipse
• First 'hot sync' JEE application deployer to enable continuous web development without server restarts
• First native JavaScript debugger for Eclipse
• First Web 2.0 / Ajax feature-set for Eclipse
• Most database connectors supported on Eclipse
• First IDE to fully support Hibernate / Spring integration
• First full-featured image editor for Eclipse
• First Eclipse IDE to offer a low-cost, all-inclusive subscription pricing model
• First IDE to integrate NetBeans features into Eclipse
• First to create platform-independent RCP applications with SNAPs