MyEclipse JavaScript Development Overview

Table of Contents

1. Introduction

This document presents an overview of JavaScript development features available in MyEclipse.

To get a better feel for MyEclipse and learning more about it, please check out our product Documentation for more material.

2. 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
  

2.1 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.

Figure 2.1.1: JavaScript content-assist example

Local JavaScript variables and functions are also made available in the code-assist proposals.

Figure 2.1.2: Local JavaScript Function completion

2.2 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.

Figure 2.2.1: "As-you-type" Syntax checking

2.3 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 in Fig. 2.3.1.

Figure 2.3.1: Viewing JavaScript validation warnings

2.4 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.

Figure 2.4.1: Outline view with activated menu

2.5 Source Actions: Formatting/Quick Comment

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.

Figure 2.5.1: Format action

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

Figure 2.5.2: Mark region to comment

Figure 2.5.3: Commented region after Ctrl+Shift+C

2.6 Editor Preferences

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

Figure 2.6.1: JavaScript Preference page

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

Figure 2.6.2: JavaScript Source preference page

JavaScript styles preference page allows customization of syntax highlighting.

Figure 2.6.3: JavaScript Styles preference page

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

Figure 2.6.4: JavaScript Validation preferences

3. JavaScript Debugger

The MyEclipse JavaScript Debugging System is integrated into the Eclipse debugging architecture and is an integral part of the MyEclipse Ajax Development tools.  In this section we will present a JavaScript debugging scenario that involves:

• Setting breakpoints
• Launching/Debugging JavaScript Applications
• Stepping through JavaScript Code
• Inspecting Variables
• Watch expressions/evaluations
• JavaScript Scripts View
• Debug Preferences

3.1 Setting Breakpoints

JavaScript breakpoints can be set in the JavaScript editor, the HTML Web Designer or the JSP Web Designer. Within any of these editors, JavaScript breakpoints are set in the left-hand margin (often referred to as the editor gutter) by double-clicking next to the source line or by right clicking and selecting Toggle Breakpoints.

Figure 3.1.1: Setting a JavaScript Breakpoint in a JS File

Breakpoints can also be added in JavaScript that is embedded in an HTML page.

Figure 3.1.2: Added Breakpoint in JavaScript inside HTML page

Both types of JavaScript breakpoints are shown in the standard Eclipse Debug breakpoints view.

Figure 3.1.3: JavaScript Breakpoints shown in Breakpoints view

3.2 Launching/Debugging JavaScript Applications

JavaScript Application launch configurations have been improved to support 2 different types of JavaScript applications: (Project file-based configuration and URL-based configuration).

Each launch configuration can also set 4 specific JavaScript debug preferences for suspending on various events. 

In previous MyEclipse releases, only URL based JavaScript configurations were possible.  Now project file-based configurations can be configured.

3.3 Stepping through JavaScript Code

When halted at a breakpoint the following actions are available from the toolbar of the Debug View.

	Resume execution; runs to next breakpoint or end of program
	Terminate debug process
	Step Into next executable source line
	Step Over next function
	Step to Return of current function

Figure 3.3.1: Stepping in JavaScript

3.4 Inspecting Variables

When stopped at a breakpoint or stepping through JavaScript execution, JavaScript variable values may be inspected using the Variables view. This view allows you to expand functions that are in scope and browse their properties and corresponding values. As you step through JavaScript functions the Variables view dynamically updates and refreshes its variable values as they change in order to provide you an accurate view of the execution state of your application.

Figure 3.4.1: Inspecting JavaScript Variables

3.5 Watch Expressions / Evaluation

JavaScript debugging now supports watch expressions.  In the Expression view, you add watch expressions to monitor JavaScript variables.  When you stop at a breakpoint the expressions will evaluate and display their values in the Expression view.

Figure 3.5.1: JavaScript Expressions/Evaluation

3.6 JavaScript Scripts View

When debugging a JavaScript application, the Script view will show all of the currently executing JavaScript scripts that are running in the Ajax Web Browser.  Any of these scripts can be opened by just double-clicking on any script.  The children elements of each top script shows the JavaScript functions that are available, so you can jump straight to that function when you open the script.  Opening the script will allow you to inspect the code and set breakpoints accordingly.

Figure 3.6.1: JavaScript Scripts View

3.7 Debug Preferences

A new preference page has been added to support default options for JavaScript debugger settings.  The new page is available at the MyEclipse > AJAX > JavaScript Debug preference path.

Figure 3.7.1: JavaScript Debug Preferences

4. Instant-On Debugging

The Instant-On JavaScript Debugging action in the AJAX Web Browser toolbar and MyEclipse Web Browser editor.  Clicking this action will begin debugging the current URL as a JavaScript application.

Figure 4.1: Instant-On JavaScript Debugging

5. Wizards

To create a new JavaScript file, use the new file wizard and select MyEclipse > Web > JavaScript file as shown below.

Figure 2.6.1: Launching New JavaScript file wizard

Figure 2.6.2: Entering the New JavaScript file name

6. Feedback

We would like to hear from you! If you liked this overview, have some suggestions or even some corrections for us please let us know. We track all user feedback about our learning material in our Documentation Forum.  Please be sure to let us know which piece of MyEclipse material you are commenting on so we can quickly pinpoint any issues that arise.