• Web 2.0 Tools
• Swing UI Designer
• Java Persistence Tools
• Spring Tools
• Struts Designer
• XDoclet Support
• Eclipse Ajax
• Database Tools
• Visual JSF
• JSP Development
• Visual Web Design
• Eclipse Plugin
• Web Services
• Image Editor
• HTML Editor
• UML Tools
• Application Server Connectors
• Struts Tools
• MyEclipse SNAPs
• CSS Designer
• JSP Development
• MyEclipse Features
MyEclipse Ajax Tools
The MyEclipse Ajax Workbench™ consists of the following features:
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 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.
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.
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.
The MyEclipse Ajax Web Browser also provides a source view page
that displays the HTML source of the current page in the 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.
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).
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.
To use DOM selection, click the DOM selection button and then use
Ctrl+Click in the browser as shown.
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 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.
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.
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.
The DOM Inspector has a Search Filter capability that allows searching nodes by 3 different search criteria.
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.
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.
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
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.
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.
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.
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.
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
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.
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 as shown.
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.
Source Actions: Formatting/Quick Comment
To toggle on or off one or more single line comments select the region to comment and enter Ctrl+Shift+C .
source and content-assist. Validation options are also
the options in the main validation preference page.
Why can't I see any Ajax features in my
Open the Ajax perspective and use either the toolbar action with the icon or the New File wizard entry under File>New>MyEclipse>Web .
The browser uses a Gecko/Mozilla based rendering engine that is compatible with Firefox 2.0.
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.