|
||||||||||
Outline
|
||||||||||
1. PrefaceThis document was written using MyEclipse 6.0 GA, Sun Java 5, and Eclipse 3.3. All screenshots are based upon the default user interface settings for MyEclipse Enterprise Workbench, Eclipse, and Windows XP. If you experience difficulty with the instruction of this document, please see the User Feedback section for how to provide feedback to the MyEclipse documentation team. |
||||||||||
2. RequirementsBelow is a list of requirements for this Tutorial: |
||||||||||
3. IntroductionMyEclipse Enterprise Workbench ships an innovative set of technologies collectively known as the MyEclipse AJAX Tools Platform™ (W2TP). This tutorial introduces the basic features, concepts, and techniques for getting started with MyEclipse W2TP JavaScript development and debugging facilities. A simple web application known JS_Mario is provided as the context for introducing JavaScript development features in this document. It is assumed that you are familiar with the JavaScript language and concepts as they are very different from Java's object-oriented concepts. For questions and concepts not fully covered in this tutorial, we refer you to the Resources section for a list of JavaScript resources. Specifically this document presents how to:
Note-1 : Completion of the Web Project Tutorial is recommend before debugging JavaScript resources deployed as part of a web application. Note-2: Please familiarize yourself with the known limitations of the MyEclipse JavaScript development tools. Of special note JavaScript debugging in MyEclipse 5.0 GA is only supported on the Windows an Linux platforms. Mac support is still under development.
|
||||||||||
4. Installing the Mario Web Project
A simple MyEclipse web application named JS_Mario is used to
demonstrate the MyEclipse JavaScript development features. Mario
consists of a single webpage that uses JavaScript to animate an
image of the Nintendo™ Mario character on an HTML web page.
Installing the project is a simple two step process.
Step 1: Download the JS_Mario Project Select the following link to begin downloading the js_mario.zip archive containing the JS_Mario web project. Save the archive to your local file system and proceed to Step-2. Step 2: Import JS_Mario Project into MyEclipse workspace
Step 3: Verify Project Installation Upon completion of step-2 open the Navigator view or the Java Package Explorer view and verify that your imported project is consistent with Figure 3.
|
||||||||||
5. Working with JavaScript Source |
||||||||||
5.1 Creating JavaScript Files
|
||||||||||
5.2 Editing JavaScript FilesThe MyEclipse JavaScript Editor provides advanced language specific editing features such as:
Content-Assistance
JavaScript Outline View
Quick Comment Toggle
|
||||||||||
5.3 Validating JavaScript SourceThe MyEclipse source-code validation system supports validation of JavaScript files. When enabled, validation will occur when you manually validate the project, save & build the project, and while you type. Enable JavaScript Validation
You can also set the validator preferences on a per-project basis by selecting a project, right clicking, and selecting the properties action. In the properties dialog select the MyEclipse-Validation property page. You must activate the Override validation preferences option and then you can configure the JavaScript Validator specifically for your project.
Validating JavaScript Files Once JavaScript source code validation is enabled the validator will be executed while typing, each time a JavaScript file is saved, or when the validator is executed manually. To manually execute the validator, select one or more JavaScript files and then from the context-menu (right-click menu) select the MyEclipse > Run Validation action. Viewing Validation Problems 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. 9.
|
||||||||||
6. Debugging Local JavaScript ApplicationsThe MyEclipse JavaScript Debugging System is integrated into the Eclipse debugging architecture and is an integral part of the MyEclipse Web 2.0 Tools Platform (W2TP). In this section we will present a JavaScript debugging scenario that involves:
|
||||||||||
6.1 Setting JavaScript Breakpoints in HTML
Note within an HTML or JSP file, JavaScript breakpoints can only be set on JavaScript source lines nested in a <script> element.
Figure 11, below illustrates a JavaScript breakpoint set on line #9. To remove a JavaScript breakpoint simply double-click the breakpoint image or use the context-menu Toggle Breakpointsaction to remove the breakpoint.
|
||||||||||
6.2 Launching and Debugging HTML/JavaScript Source
|
||||||||||
6.3 Stepping Through JavaScript Code
We continue with our debugging scenario:
Figure 14: Initiate "Step into" debug action
|
||||||||||
6.4 Inspecting Variables
|
||||||||||
7. Debugging JavaScript Applications From a ServerIn the prior section we covered JavaScript debugging basics using the application files directly. In this section we'll be using the same example to demonstrate how to configure a advanced launch configuration to execute deployed web application resources that contain JavaScript breakpoints. Since the Mario example from the prior sections is a MyEclipse Web Project, the first step to remotely debugging the example is to deploy it on your chosen application server. The detailed instructions to accomplish this are in section 7.1 of the Working with Web Project Tutorial here. In this specific example we'll be using Tomcat 5 as the server. Once deployed, your server must be launched and allowed to load the application. Details on configuring an application server for use with MyEclipse are contained in section 4 of the Application Server Tutorial while instructions for launching the server are detailed in section 7.1 of the same tutorial. Once you've followed the tutorials to deploy the test application and have started the server, debugging can begin. As in section 6, we'll need to configure a JavaScript Application launch configuration. However, since we're going to be performing server-based debugging we'll need to provide a custom configuration that will specify the correct URL for the page as referenced from the server. There are multiple options for initiating a JavaScript debugging session. Here we demonstrate launching a debug session directly from the HTML Web Designer.
From this point, debugging JavaScript in pages served from an application / web server behaves identically to the 'file based' debugging that was detailed in section 6. Additionally, although this particular server debugging example used an HTML file, a JSP file that contained or referenced JavaScript would be handled the same way, as long as the URL in the launch configuration is updated appropriately. |
||||||||||
8. Debugging JavaScript Applications With No Local Source Files (a.k.a. Instant-On Debugging)Some JavaScript frameworks, for example DWR, generate JavaScript based on another description language . Debugging these applications, as well as other applications for which there is no local source requires special tactics. The Instant-On debugging feature allows you to debug these applications as well as investigate existing JavaScript applications to determine how they work without having to make a local copy. We will use Google Maps to illustrate this feature. Start by opening a new MyEclipse AJAX Web Browser. In the Address bar enter http://maps.google.com. Now click the instant-on JavaScript debugging button located in the toolbar next to the New MyEclipse AJAX Web Browser action. Note: You must use the MyEclipse AJAX Web Browser to navigate to the web page you'd like to debug. The other web browsers currently do not support instant-on debugging.
In the Debug Perspective you will see that a JavaScript debug session has been started for Google Maps. But a debug session alone doesn't help us understand the application. We still need to be able to set breakpoints and view the JavaScript scripts that comprise Google Maps. To facilitate this bring the JavaScript Scripts Inspector View into focus. It has been added to the default Debug Perspective, so if you don't see it you can select Window > Reset Perspective to open it. In the JavaScript Scripts Inspector View you will see the script files that comprise the Google Maps application. If you select one of these scripts and expand the tree you will see the individual functions that make up this file. By double clicking or seletcing one of the top level files or methods you can open an editor on that method or file. Once you have an editor open on the remote script you can add breakpoints to it like you would for a local JavaScript application.
|
||||||||||
9. Known Limitations
|
||||||||||
10. SummaryThis concludes your introduction to JavaScript Development and Debugging using MyEclipse. Additional Tutorial documents are available that introduce working with the Database Explorer, Struts, JSF, Web Projects, editing, application server configuration, EJB development, and enterprise application projects. For more information visit the MyEclipse Tutorial library. |
||||||||||
11. User FeedbackIf you have comments or suggestions regarding this document please submit them to the MyEclipse Documentation Forum. |
||||||||||
12. Resources
|