AJAX Workbench in MyEclipse
MyEclipse is the first Eclipse-based product to provide the essential development features for programming and debugging AJAX web applications. All AJAX tools and 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.
The AJAX tool set includes:
- MyEclipse AJAX Workbench
- MyEclipse AJAX Perspective
- MyEclipse AJAX Web Browser
- DOM Inspector View
- DOM Source View
- DOM Watcher View
- CSS View
- AJAX Request Monitor View
2. MyEclipse AJAX Workbench™
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 Perspective is a customizable layout of views, editors, menus, and toolbar actions. The perspective's default layout is shown in the image above. The MyEclipse AJAX Perspective opens by default when the MyEclipse AJAX Workbench™ is created, but can be accessed via the Perspective shortcut menu.
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 related AJAX views.
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 that 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 way to launch the AJAX Web Browser from the MyEclipse AJAX Perspective is to click the Launch MyEclipse AJAX Web Browser icon on the toolbar. This icon is found in many of the MyEclipse development perspectives.
An alternate method for launching the AJAX Web Browser is by clicking the New icon on the toolbar, and expand MyEclipse>Web.
The MyEclipse AJAX Web Browser can also support any proxy configuration set by selecting Window>Preferences, and expanding General> Network Connections.
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 Cache, removes 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 automatically 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 icon , and press CTRL while clicking an area in the browser. Selecting an image causes the corresponding elements in the DOM Inspector to be highlighted and the DOM source to display the corresponding source.
The MyEclipse AJAX Web Browser allows you to preview your web applications from within MyEclipse; however its true power lies in the supporting views that surround it.
- DOM Inspector: Allows you to view the structure of the document currently loaded in the browser.
- DOM Source view: Allows you to view the dynamic HTML source of the DOM nodes currently selected in the DOM Inspector.
- DOM Watcher: Monitors the changes that happen over a period of time for a particular element.
- CSS view: Shows extended design information for CSS and allows for dynamic update of CSS attributes on the DOM node.
- AJAX Request Monitor: Allows you to inspect your asynchronous calls and is much easier than using a TCP/IP monitor.
To open specific views, select Window>Show View, and then expand, MyEclipse AJAX.
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 image below, the Google home page is loaded in the AJAX Web Browser, and the corresponding DOM is displayed in the DOM Inspector.
Notice 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 inspect the CSS style computed by the browser for the selected node.
As you select nodes in the DOM Inspector view, the corresponding objects in the browser temporarily flash to reveal their location.
Using the DOM Inspector, you can dynamically change the attributes of some tags. In the image below, the width attribute of the IMG node have been adjusted dramatically for effect, using the Attributes Editor.
The DOM Inspector has a Search Filter capability that allows searching nodes by three different search criteria.
- Name Filter
- ID Filter
- Class Filter
In the image below, the Name filter has been activated, and the search criteria is "DIV". 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 right-click context menu. The following image shows 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 displays the dynamic source that is no longer available in the browser source page.
There are several actions available in 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.
The following figure illustrates the potential of the DOM Source view. In the example below, a chat application uses a DIV element to add new chat messages. The chat DIV has been selected, and in the DOM Source view you can see the DIV element is initially empty.
In the next image, a new chat message appears via an AJAX request, and the DOM Source view indicates there are changes to this node.
Now that the DOM Source has changed, you can use the Refresh action to update the DOM Source view with the latest version of the node source.
The DOM Watcher view monitors the events or changes associated with selected or referenced nodes in the browser. In the example below, a DIV element in the browser page is selected, and the Start Watching action is enabled and monitors events that fire off of that element.
By default, all events are logged in the DOM Watcher view. However, you can modify the list of events that are watched by clicking the View Menu icon , and selecting Settings from the menu.
The CSS View shows extended information for elements selected in the DOM Inspector. The CSS View shows the following four types of extended CSS information:
- Style Rules
- Computed Styles
- Box Model
CSS properties can be added or edited using the tools in the CSS view.
The Box Model for an element can be displayed in the CSS view. Use the navigation controls to modify the box model.
Note: The current debugger is available only on Windows 32-bit and Linux 32- and 64-bit. The debugger also runs on OS X 32-bit Carbon in MyEclipse 2014 and earlier. However, because MyEclipse 2015 is supported only on 64-bit Cocoa, the debugger is not available for OS X in MyEclipse 2015. A new debugger that is available for all three OSs is a high priority for the MyEclipse team and is planned to be delivered during the 2015 calendar year.
Why can't I see AJAX features in my workbench?
- Your configuration cache could be corrupted. Restart your Eclipse executable one time with the "-clean" argument to clear out the configuration cache.
- You have an old version of MyEclipse.
How do I open the AJAX Web Browser?
Click the AJAX Web Browser icon on the toolbar or select File>New>Other from the menu, and expand MyEclipse>Web in the New window.
Why does a new workbench window open when
What rendering engine is used by the
MyEclipse AJAX Web Browser?
The browser uses a Gecko/Mozilla-based rendering engine compatible with Firefox.
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.