MyEclipse使用教程

MyEclipse Web 2.0 Workbench Overview Last Revision: January 27, 2006 Outline 1. Preface 2. Requirements 3. Introduction 4. Web 2.0 Workbench 1. Web 2.0 Perspective 2. Integrated Web 2.0 Browser 1. Opening the Web 2.0 Browser 3. DOM Inspector 5. JavaScript Debugging Support 6. FAQ 7. User Feedback 8. Resources 1. Preface This document was written using Sun JDK 1.4.2, Eclipse 3.1 and MyEclipse 4.1 GA. All screenshots are based upon the default user interface settings for Eclipse, MyEclipse Enterprise Workbench, 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. Back to Top 2. Requirements Below is a list of requirements for this Quickstart: Below is a list of requirements for this Quickstart: 1. Java 2 SDK, Standard Edition 1.4 or later installed (see Resources for a download link) 2. Eclipse 3.1.X SDK (see Resources for a download link) 3. MyEclipse 4.1 GA (see MyEclipse 4.1 GA (see Resources for a download link) Back to Top 3. Introduction MyEclipse 4.1 is the first Eclipse-based product to provide the essential development features for programming and debugging Web 2.0/AJAX web applications. These features are built upon an innovative MyEclipse technology platform known as the Web 2.0 Tools Platform or W2TP. All W2TP tools and their user-interfaces are integrated and managed within a special Eclipse workbench known as the MyEclipse Web 2.0 Workbench™. This quickstart presents an overview of the features, concepts, and instructions for working with the MyEclipse Web 2.0 Workbench and its tools. Topics introduced in this document include: • Web 2.0 Workbench • Web 2.0 Perspective • Web 2.0 Browser • DOM Inspector • Use JavaScript Debugging takes advantage of the Web 2.0 Workbench Figure 3.1: Example screenshot of Web 2.0 Workbench Note-1: It is recommended that you read this document before reading other W2TP quickstarts, namely the JavaScript Development and Debugging Quickstart . Note-2 : The Web 2.0 Workbench is only available on the Windows platforms for the 4.1GA release. Linux support for all Web 2.0 features is planned for the upcoming MyEclipse 4.1.1 release. Back to Top 4. Web 2.0 Workbench The Web 2.0 Workbench is a special Eclipse workbench that serves as a desktop environment for seamlessly integrating MyEclipse Web 2.0 tools under a single user-interface window. When a Web 2.0 tool is launched, the Web 2.0 Workbench window is activated and the user-interface of the active tools is displayed within it according to the workbench perspective (see Web 2.0 Perspective). Additional Web 2.0 tools will be provided in future releases. Each of these tools will be designed to integrate into the Web 2.0 Workbench. The MyEclipse 4.1 Web 2.0 Workbench consists of the following feature-sets: • Web 2.0 Workbench Window • Web 2.0 Perspective • Web 2.0 Browser • DOM Inspector • JavaScript Debugger Engine The following figure depicts the typical layout of the Web 2.0 Workbench. The highlighted elements are described in further detail in subsequent sections of this document. Figure 4-1: Web 2.0 Workbench Back to Top 4.1 Web 2.0 Perspective The Web 2.0 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 4-1 above. To open Web 2.0 Perspective, use a perspective shortcut as show in Figure 4.1-1 or navigate to the Eclipse perspectives list and select it (Window menu>Open Perspective>Other>MyEclipse Web 2.0 ). Figure 4.1.1: MyEclipse Web 2.0 perspective shortcut Back to Top 4.2 Integrated Web 2.0 Browser Web 2.0/AJAX development is centered around the web browser and browser hosted services. Because the Eclipse SWT Browser lacks the openness and comprehensive features to support the tools of the Web 2.0 Workbench, MyEclipse provides a new integrated browser. This browser, known as the Web 2.0 Browser, is Mozilla compatible and provides the common services to support current features such as the MyEclipse DOM Inspector and JavaScript debugger engine, as well as future MyEclipse Web 2.0 features. The Web 2.0 Browser is always launched into the Web 2.0 Perspective and resides in the editor area of the Web 2.0 workbench as shown in Figure 4.2-1 highlighted by a blue border. A big advantage of using the Web 2.0 Browser for browsing web pages is using it in conjunction with the DOM Inspector which is covered in more detail in Section 4.3. Figure 4.2-1: Integrated Web 2.0 Browser 4.2.1 Opening the Web 2.0 Browser The easiest method for launching the Web 2.0 Browser from the Web 2.0 Perspective is to use the Launch MyEclipse Web 2.0 Browser action the main toolbar (see Figure 4.2-2 below). Figure 4.2-2: Launch Web 2.0 Browser action An alternative method for launching the Web 2.0 Browser is from the New File Wizard in eclipse as depicted in Figure 4.2-3 (File>New>MyEclipse>Web>Web 2.0 Browser ) or the New Wizard toolbar action on the toolbar (see Figure 4.2-4). Figure 4.2-3: Launching new Web 2.0 Browser from File>New Figure 4.2-4: Launching new Web 2.0 Browser from wizard shortcuts Back to Top 4.3 DOM Inspector The DOM Inspector is tightly integrated with the Web 2.0 Browser. It displays the current browser's document object model (DOM) in real-time. The DOM Inspector user interface is comprised of a tree view for hierarchical viewing and navigation among DOM nodes, and an Attributes Editor that displays the attribute details of the current selected DOM node and enables them to be edited. In Figure 4.3-1, the Web 2.0 Browser has loaded the Google search form and its DOM is depicted by the DOM Inspector. Figure 4.3-1: DOM Inspector outlined in the red border The default configuration of the Web 2.0 Perspective automatically launches the DOM Inspector when it is opened. If the DOM Inspector is closed or not available, it can be relaunched using the Show View menu as shown in Figure 4.3-2 (Windows menu>Show View>DOM Inspector). Figure 4.3-2: Add DOM Inspector View As you select nodes in the DOM Inspector view, the corresponding objects in the browser will temporarily flash to reveal their location. This visual technique is illustrated in the following screenshot where the Google image is being highlighted with a red rectangle to correspond with the selected IMG node in the DOM Inspector. Figure 4.3-3: Selected IMG node flashes in Web 2.0 Browser In the next figure, the width and height attributes of the IMG node have been adjusted dramatically for effect using the Attributes Editor. Figure 4.3-4: DOM Attributes Editor Back to Top 5. JavaScript Debugging Support This section assumes that you are familiar with the MyEclipse 4.1 JavaScript Debugger and have read the JavaScript Development and Debugging Quickstart. If you have not read this document, we recommend reading it now or skipping this section and proceeding to the FAQ section . The Web 2.0 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 Web 2.0 Browser instance in the Web 2.0 Workbench with the JavaScript debugging engine enabled. Upon completion of a JavaScript debug session, its corresponding Web 2.0 Browser will be automatically closed and all internal resources reclaimed. Note: JavaScript debugging can only be performed with a Web 2.0 Browser that has been opened by a JavaScript debug launch configuration. A Web 2.0 Browser that has been opened using the toolbar action or New File Wizard cannot be used for JavaScript debugging. Back to Top 6. FAQ Q1: Why can't I see any Web 2.0 features in my workbench? A1a: You are not on a compatible platform. Currently only Windows platform is supported. Refer to Q2 for more information. A1b: Your configuration cache may be corrupted. Restart your eclipse executable one time with the "-clean" argument to clear out the configuration cache. A1c: You have a previous version of MyEclipse, not the latest version 4.1 GA. Q2: When will there be a Linux/Mac platform support for Web 2.0 Browser and JavaScript debugger? A2: Linux support will be added in MyEclipse 4.1.1. Mac support is planned for a future release after 4.1.1. Note: Other Web 2.0 features such as JavaScript development are fully supported on both the Linux and Mac platforms. Q3: How do I open the Web 2.0 Browser? A3: Open the Web 2.0 perspective and use either the toolbar action with the icon or the New File wizard entry under File>New>MyEclipse>Web . Q4: Why does a new workbench window open when I debug a JavaScript application or open a Web 2.0 browser? A4: All instances of the Web 2.0 Browser are opened in the Web 2.0 Workbench. If an active Web 2.0 Workbench which manifests as a new workbench window opened to the Web 2.0 Perspective is not already open, a new Web 2.0 workbench window is opened. Since debugging a JavaScript application needs a Web 2.0 browser, it opens the new workbench window as well. Q5: What is the Web 2.0 Browser rendering engine based on? A5: The browser uses a Gecko/Mozilla based rendering engine that is compatible with Firefox 1.0.7. Q6: Why does the DOM Inspector say: No active browser is selected? A6: The DOM Inspector is slaved to the currently active Web 2.0 Browser. This message appears when there is no active Web 2.0 Browser currently selected in the editor area. See Section 4.2 for how to open the Web 2.0 Browser Q7: Where are my other favorite browser-based development features such as the JavaScript console? A7: The Web 2.0 features available in MyEclipse 4.1 represent the initial phase of a broad range of planned tools build on the W2TP. Visit the MyEclipse site to learn more about planned MyEclipse Web 2.0 and other features and their target release timeframes. Back to Top 7. User Feedback If you have comments or suggestions regarding this document please submit them to the If you have comments or suggestions regarding this document please submit them to the MyEclipse Documentation Forum. Back to Top 8.Resources • Download Java 2 SDK, Standard Edition 1.4 from Sun Microsystems. • Download Eclipse 3.1 SDK or greater from the Eclipse Foundation • Download the MyEclipse 4.1 30 day trial edition; portal registration is required. Download the MyEclipse 4.1 30 day trial edition; portal registration is required. • To learn more about JavaScript visit the following site: • http://www.w3schools.com/js/default.asp • http://www.wdvl.com/Authoring/JavaScript/Tutorial/ • Visit the MyEclipse Quickstart Library for more MyEclipse tutorials. Back to Top Copyright © 2004 - 2006 by Genuitec L.L.C. Outline 1. Preface 2. Requirements 3. Introduction 4. Web 2.0 Workbench 4.1 Web 2.0 Perspective 4.2 Integrated Web 2.0 Browser 4.3 DOM Inspector 5. JavaScript Debugging Support 6. FAQ 7. User Feedback 8.Resources