|
||
Outline
|
||
1. IntroductionMyEclipse 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:
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:
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.
|
||
3. MyEclipse Ajax PerspectiveThe 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 BrowserThe 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.
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.
|
||
4.1 How to use the MyEclipse Ajax Web BrowserThe 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.
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).
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
|
||
4.2 MyEclipse Ajax Web Browser ActionsThe 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 in Figure 4.2.2.
|
||
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 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.
|
||
5.1 DOM Inspector ViewThe 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.
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.
The DOM Inspector has a Search Filter capability that allows searching nodes by 3 different search criteria.
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.
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.
|
||
5.2 DOM Source ViewThe 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 5.2.2, the chat DIV has been selected and in the DOM Source view you can see the DIV element is initially empty.
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.
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.
|
||
5.3 DOM Watcher ViewThe 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.
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.
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
|
||
5.4 JavaScript ViewThe 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.
The JavaScript expression field can handle general evaluation of JavaScript code as shown in Figure 5.4.2.
|
||
5.5 CSS ViewThe 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.
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.
|
||
5.6 Ajax Request Monitor ViewThe 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.
|
||
5.7 JavaScript Console ViewThe 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.
JavaScript errors and exceptions are also shown in the JavaScript Console view as shown in Figure 5.7.2.
|
||
5.8 JavaScript Scripts Inspector ViewThe 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.
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.
|
||
6. JavaScript Debugging SupportThis section assumes that you are familiar with the MyEclipse 6.0 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?
How do I open the Ajax Web Browser?
Open the Ajax perspective and use either the toolbar action with
the
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 FeedbackIf you have comments or suggestions regarding this document please submit them to the MyEclipse Documentation Forum. |
||
9. Resources
|