| <html> |
| <head> |
| <META http-equiv="Content-Type" content="text/html; charset=UTF-8"> |
| <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> |
| <link rel="stylesheet" href="../../../../..//default_style.css" type="text/css"> |
| <link rel="stylesheet" href="../../../../..//webtools/wtp.css" type="text/css"> |
| <title> |
| Reintroducing the Structured Source Editing family of |
| editors |
| </title> |
| </head> |
| <body> |
| <table width="100%" cellspacing="5" cellpadding="2" border="0"> |
| <tbody> |
| <tr> |
| <td width="60%" align="left"><font class="indextop"> |
| Reintroducing the Structured Source Editing family of |
| editors |
| </font> |
| <br> |
| <font class="indexsub"> |
| Reintroducing the Structured Source Editing family of |
| editors |
| </font></td><td width="40%"><img width="120" hspace="50" height="86" align="middle" src="../../../../..//images/Idea.jpg"></td> |
| </tr> |
| </tbody> |
| </table> |
| <table width="100%" cellspacing="5" cellpadding="2" border="0"> |
| <col width="16"> |
| <col width="*"> |
| <tbody> |
| <tr> |
| <td valign="top" bgcolor="#0080c0" align="left" colspan="2"><b><font face="Arial,Helvetica" color="#ffffff">Structured Source Editing in Milestone 2</font></b></td> |
| </tr> |
| <tr> |
| <td valign="top" align="right"> </td><td valign="top"> |
| <p> |
| The Structured Source Editing (SSE) family of editors are |
| now available as part of WTP 1.0M2. They support editing |
| XML, DTD, HTML, CSS, JavaScript, and JSP files. The SSE |
| editors make significant usage of Eclipse frameworks as well |
| as each other. |
| |
| For end users it means that they behave consistently with |
| each other as well as with other Eclipse editors. Users of |
| the JDT's Java editor will recognize many of the features |
| they're used to seeing there available in many of the SSE |
| editors: |
| <ul> |
| |
| <li>Configurable syntax highlighting</li> |
| |
| <li>Editing of external files</li> |
| |
| <li>Quick Diff</li> |
| |
| <li>Delimiter matching</li> |
| |
| <li>Content Assist Templates</li> |
| |
| <li>Outline view with functional context menu</li> |
| |
| <li>Properties view</li> |
| |
| <li> |
| Comment toggling and block commenting and |
| uncommenting |
| </li> |
| |
| <li>Line shifting</li> |
| |
| <li>Next/Previous Annotation navigation</li> |
| |
| <li>Finding All Occurrences in the file</li> |
| |
| <li> |
| Highlighting for remote files (ex.: files opened |
| from the CVS Explorer) |
| </li> |
| |
| <li> |
| |
| <i>Source</i> |
| menu actions in the Navigator |
| </li> |
| |
| <li> |
| |
| <i>Navigate|Show In</i> |
| menu in the editors |
| </li> |
| |
| </ul> |
| Settings for one language are reflected when editing other |
| languages. For example, the CSS highlighting preferences are |
| obeyed in the HTML editor while the CSS, HTML, and Java |
| highlighting preferences are obeyed in the JSP editor. |
| Refactoring changes made to Java files affect references in |
| JSP files (and vice versa) and JSP files are included in |
| Java search results. |
| <br> |
| |
| <br> |
| And there's |
| <b>much</b> |
| more. See the |
| <a href="../../../wst/components/sse/featureTables/featureSummary.html">feature summary</a> |
| for an overview of what editing feature is supported by |
| which editor. Also see the |
| <a href="../XMLCatalog/XMLCatalogTutorial.html"> |
| XML Catalog Tutorial |
| </a> |
| and the |
| <a href="../XMLWizards/XMLWizards.html"> |
| New XML File Tutorial |
| </a> |
| for related information. |
| |
| </p> |
| </td> |
| </tr> |
| <tr> |
| <td valign="top" bgcolor="#0080c0" align="left" colspan="2"><b><font face="Arial,Helvetica" color="#ffffff"> |
| Content Assist |
| <a name="contentassist"></a> |
| </font></b></td> |
| </tr> |
| <tr> |
| <td valign="top" align="right"> </td><td valign="top"> |
| <p> |
| Content Assist provides a list of proposals, basically "text |
| available to insert into the document", at the current |
| cursor location. You can invoke Content Assist from the |
| menu, or by pressing |
| <b>Ctrl+Space</b> |
| . Content Assist will always try to leave the document in a |
| well-formed state after a proposal is inserted. |
| </p> |
| </td> |
| </tr> |
| <tr> |
| <td valign="top" align="right"> </td><td valign="top"> |
| <p> |
| Content Assist is very sensitive to context. You will get |
| different proposals depending where the caret is in the |
| document. |
| </p> |
| </td> |
| </tr> |
| <tr> |
| <td valign="top" align="right"> </td><td valign="top"> |
| <p> |
| In a JSP file you have many different content types. In the |
| HTML regions, you will get appropriate HTML tag proposals |
| when you invoke content assist. In server-side scripting |
| regions,( |
| <code><%...%></code> |
| ), you will get proposals for the scripting language of the |
| JSP file. If the language is Java, you will get appropriate |
| Java proposals for that cursor position. |
| </p> |
| </td> |
| </tr> |
| <tr> |
| <td valign="top" align="right"> </td><td valign="top"> |
| <p> |
| In a XML file, proposals may come from a referenced |
| <i>content model</i> |
| if a DTD or Schema is specified for the file, and then |
| possibly through the |
| <a href="#xml_catalog">XML Catalog</a> |
| . This will give you "smarter" proposals, such as specific |
| child element proposals within a given element, or required |
| attribute proposals. |
| </p> |
| </td> |
| </tr> |
| <tr> |
| <td valign="top" align="right"> </td><td valign="top"> |
| <p> |
| In a HTML file, if you invoke Content Assist within a |
| <b>style</b> |
| tag or attribute you will get CSS Content Assist proposals: |
| <br> |
| |
| <code> |
| <b><p style="|"> text </p></b> |
| </code> |
| |
| <br> |
| |
| <br> |
| |
| here you will get JavaScript proposals: |
| <br> |
| |
| <code> |
| <b><button onclick="|"> text </button></b> |
| </code> |
| |
| <br> |
| |
| </p> |
| </td> |
| </tr> |
| <tr> |
| <td valign="top" bgcolor="#0080c0" align="left" colspan="2"><b><font face="Arial,Helvetica" color="#ffffff"> |
| XML Catalog |
| <a name="xml_catalog"></a> |
| </font></b></td> |
| </tr> |
| <tr> |
| <td valign="top" align="right"> </td><td valign="top"> |
| <p> |
| Web Tools allows you to store DTDs or Schemas locally in the |
| XML Catalog and have the documents map to PUBLIC ids. These |
| ids are usually specified in XML documents via the |
| <br> |
| |
| <code><!DOCTYPE></code> |
| declaration. Users have the option of specifying a |
| DTD/Schema via a SYSTEM id (local file system) or PUBLIC id |
| (for pure catalog-based lookup). |
| </p> |
| </td> |
| </tr> |
| <tr> |
| <td valign="top" align="right"> </td><td valign="top"> |
| <p> |
| Examples of instructions placed at the top of an XML file |
| defining grammar constraints : |
| </p> |
| </td> |
| </tr> |
| <tr> |
| <td valign="top" align="right"> </td><td valign="top"> |
| <p> |
| |
| <code> |
| <!DOCTYPE JobPosting SYSTEM "JobPosting.dtd"> |
| </code> |
| |
| <br> |
| (looked up locally in the same folder as the XML file) |
| </p> |
| </td> |
| </tr> |
| <tr> |
| <td valign="top" align="right"> </td><td valign="top"> |
| <p> |
| |
| <code> |
| <!DOCTYPE JobPosting PUBLIC |
| "www.blah.com/blah.dtd"> |
| </code> |
| |
| <br> |
| (looked up in the catalog with "www.blah.com/blah.dtd" as a |
| key) |
| </p> |
| </td> |
| </tr> |
| <tr> |
| <td valign="top" align="right"> </td><td valign="top"> |
| <p> |
| |
| <code> |
| <po:purchaseOrder xmlns:po="http://www.ibm.com" |
| xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" |
| xsi:schemaLocation="http://www.ibm.com PurchaseOrder.xsd |
| "> |
| </code> |
| |
| <br> |
| (looked up in catalog with "http://www.ibm.com |
| PurchaseOrder.xsd " as a key) |
| </p> |
| </td> |
| </tr> |
| <tr> |
| <td valign="top" align="right"> </td><td valign="top"> |
| <p> |
| |
| <b>What are catalog entries used for?</b> |
| |
| <br> |
| The DTD/Schema entries are used for a number of things. They |
| can give you context sensitive |
| <a href="#contentassist">Content Assist</a> |
| proposals in a XML document. They give rules for what to |
| mark as errors in as-you-type validation. |
| </p> |
| </td> |
| </tr> |
| <tr> |
| <td valign="top" align="right"> </td><td valign="top"> |
| <p> |
| The Structured source editors support editing XHTML files. |
| When users use any of the XHTML |
| <code>DOCTYPE</code> |
| (XHTML 1.0 Strict, XHTML 1.0 Transitional, XHTML 1.0 |
| Frameset) the content model for that particular |
| <code>DOCTYPE</code> |
| is followed. When users perform Content Assist within the |
| document, they get the correct list of tags and attributes. |
| Other editor functions will also respect the new |
| well-formedness and validity constraints. |
| </p> |
| </td> |
| </tr> |
| <tr> |
| <td valign="top" align="right"> </td><td valign="top"> |
| <p> |
| |
| <b>When should you use catalog entries?</b> |
| <b></b> |
| Typically, DTDs and Schemas in a document are specified so |
| they are availble via URL download as well as identified by |
| ID. So if you are connected to the internet there would be |
| no reason you would be required to use a catalog entry. |
| However, if you ever work disconnected, you can download |
| your own copy of the DTD to your local file system, and |
| create a catalog entry for it, so it can be found whether |
| connected or not. And, since the priority order of "lookup" |
| is that it looks for catalog entries first, and then the |
| network URL's, there is sometimes some performance advantage |
| to having a local copy. |
| </p> |
| </td> |
| </tr> |
| <tr> |
| <td valign="top" bgcolor="#0080c0" align="left" colspan="2"><b><font face="Arial,Helvetica" color="#ffffff">Editor-relevant preferences</font></b></td> |
| </tr> |
| <tr> |
| <td valign="top" align="right"> </td><td valign="top"> |
| <p> |
| All Structured source editors have a "Preferences.." action |
| in the editor context menu. When this action is performed, |
| the preferences relative to this editor are displayed in a |
| dialog to the user. |
| </p> |
| </td> |
| </tr> |
| <tr> |
| <td valign="top" align="right"> </td><td valign="top"><img border="0" src="images/pref_menu.jpg" alt="In editor preferences menu"></td> |
| </tr> |
| <tr> |
| <td valign="top" align="right"> </td><td valign="top"> |
| <p> |
| This allows users to change editor preferences easily and |
| immediately without having to navigate the entire preference |
| page tree. |
| </p> |
| </td> |
| </tr> |
| <tr> |
| <td valign="top" align="right"> </td><td valign="top"> |
| <p> |
| |
| <img border="0" src="images/pref_dialog.jpg" alt="In editor preferences"> |
| </p> |
| </td> |
| </tr> |
| <tr> |
| <td valign="top" bgcolor="#0080c0" align="left" colspan="2"><b><font face="Arial,Helvetica" color="#ffffff">Hover Help</font></b></td> |
| </tr> |
| <tr> |
| <td valign="top" align="right"> </td><td valign="top"> |
| <p> |
| Hover help is displayed when users mouse over text in |
| Structured source editors. |
| </p> |
| </td> |
| </tr> |
| <tr> |
| <td valign="top" align="right"> </td><td valign="top"><img border="1" src="images/hover.jpg" alt="Hover help"></td> |
| </tr> |
| <tr> |
| <td valign="top" align="right"> </td><td valign="top"> |
| <p> |
| There are several different types of hover help that can |
| appear for the user. |
| </p> |
| </td> |
| </tr> |
| <tr> |
| <td valign="top" align="right"> </td><td valign="top"> |
| <table border="BORDER"> |
| |
| <tbody> |
| |
| <tr> |
| |
| <th width="50%">Text Hover Name</th> |
| <th width="50%">Description</th> |
| |
| </tr> |
| |
| <tr> |
| |
| <td>Annotation Description</td> |
| <td> |
| Displays description of the current annotation |
| shown in text. For example, if a task is |
| highlighted in the editor and the user mouses |
| over the task text, hover help displays the name |
| of the task. |
| </td> |
| |
| </tr> |
| |
| <tr> |
| |
| <td>Documentation Description</td> |
| <td> |
| Displays documentation of the text. For XML |
| elements and attributes, the content model of |
| the current element/attribute is displayed. If |
| additional documentation information is included |
| in the associated schema, that information is |
| also displayed. For HTML elements, a description |
| of the current tag is displayed. For HTML |
| attributes and JSP tags/attributes, the content |
| model of the currently selected tag/element is |
| displayed. For JSP Java content, the JavaDoc for |
| the currently selected object/method is |
| displayed. |
| </td> |
| |
| </tr> |
| |
| <tr> |
| |
| <td>Problem Description</td> |
| <td> |
| Displays description of the current problem |
| shown in text. For example, if the user has an |
| error in a XML file and the user mouse overs the |
| text with the error indication, hover help |
| displays the error description. |
| </td> |
| |
| </tr> |
| |
| <tr> |
| |
| <td>Combined Hover</td> |
| <td> |
| Displays the description from the previously |
| mentioned hover help types that best fits the |
| currently selected text. |
| </td> |
| |
| </tr> |
| |
| </tbody> |
| |
| </table> |
| </td> |
| </tr> |
| <tr> |
| <td valign="top" align="right"> </td><td valign="top"> |
| <p> |
| The hover help displayed depends on the modifier keys users |
| press when hovering over text. Users can control the type of |
| hover help displayed in the Structured Text Editors Hovers |
| preference page. |
| </p> |
| </td> |
| </tr> |
| <tr> |
| <td valign="top" align="right"> </td><td valign="top"> |
| <p> |
| |
| <img border="0" src="images/hoverspref.jpg" alt="Hover help preferences"> |
| </p> |
| </td> |
| </tr> |
| <tr> |
| <td valign="top" bgcolor="#0080c0" align="left" colspan="2"><b><font face="Arial,Helvetica" color="#ffffff">Open Selection [with hyper-link support]</font></b></td> |
| </tr> |
| <tr> |
| <td valign="top" align="right"> </td><td valign="top"> |
| <p> |
| Users are able to open on/navigate to the |
| source/declaration/referred to file of certain tag |
| attributes by using the Open Selection menu item (shortcut |
| key F3 by default). They are also able to perform the same |
| action by using a combination of pressing a modifier key |
| (the Ctrl key by default) and their mouse to hover over the |
| tag users want to open selection on. A hyperlink will then |
| appear for users to click on to Open Selection. |
| </p> |
| </td> |
| </tr> |
| <tr> |
| <td valign="top" align="right"> </td><td valign="top"> |
| <p> |
| |
| <img border="1" src="images/openonlink.jpg" alt="Open on hyperlink"> |
| </p> |
| </td> |
| </tr> |
| <tr> |
| <td valign="top" align="right"> </td><td valign="top"> |
| <p> |
| The file opened depends on the type of tag the user Open |
| Selections on. |
| </p> |
| </td> |
| </tr> |
| <tr> |
| <td valign="top" align="right"> </td><td valign="top"> |
| <table border="BORDER"> |
| |
| <tbody> |
| |
| <tr> |
| |
| <th width="50%">Tag</th> |
| <th width="50%">File opened</th> |
| |
| </tr> |
| |
| <tr> |
| |
| <td> |
| any HTML tag that contains a URI attribute (as |
| defined by the HTML 4.01 DTD) such as the Anchor |
| tag |
| </td> |
| <td>the file located in the URI attribute value</td> |
| |
| </tr> |
| |
| <tr> |
| |
| <td> |
| any JSP tag that contains a URI attribute (as |
| defined by the JSP 1.2 Specification) such as |
| the jsp:forward tag |
| </td> |
| <td>the file located in the URI attribute value</td> |
| |
| </tr> |
| |
| <tr> |
| |
| <td>jsp:useBean</td> |
| <td>the class referenced by the useBean action</td> |
| |
| </tr> |
| |
| <tr> |
| |
| <td>JSP scriptlets</td> |
| <td>selected Java element's declaration</td> |
| |
| </tr> |
| |
| <tr> |
| |
| <td>DOCTYPE Declaration</td> |
| <td>the file referenced by the public/system ID</td> |
| |
| </tr> |
| |
| <tr> |
| |
| <td>Schema location attribute</td> |
| <td> |
| the file referenced by the schema location |
| attribute |
| </td> |
| |
| </tr> |
| |
| </tbody> |
| |
| </table> |
| </td> |
| </tr> |
| <tr> |
| <td valign="top" align="right"> </td><td valign="top"> |
| <br> |
| </td> |
| </tr> |
| <tr> |
| <td valign="top" align="right"> </td><td valign="top"> |
| <p> |
| Users can control behaviour of the hyperlink navigation in |
| the Structured Text Editors Navigation preference page. |
| </p> |
| </td> |
| </tr> |
| <tr> |
| <td valign="top" align="right"> </td><td valign="top"> |
| <p> |
| |
| <img border="0" src="images/openonprefs.jpg" alt="Open on navigation preferences"> |
| </p> |
| </td> |
| </tr> |
| <tr> |
| <td valign="top" bgcolor="#0080c0" align="left" colspan="2"><b><font face="Arial,Helvetica" color="#ffffff">As-you-type validation</font></b></td> |
| </tr> |
| <tr> |
| <td valign="top" align="right"> </td><td valign="top"> |
| <p> |
| Errors are found and displayed in the editor while editing |
| the document. |
| </p> |
| </td> |
| </tr> |
| <tr> |
| <td valign="top" align="right"> </td><td valign="top"> |
| <p> |
| |
| <b>General XML syntax:</b> |
| |
| <br> |
| General syntax for XML will be marked as you type. This |
| includes errors such as missing quotes, missing brackets, |
| missing end tags... |
| <a href="#quickfix" alt="Quick Fix">Quick fix</a> |
| will be provided for many of these syntax errors. |
| </p> |
| </td> |
| </tr> |
| <tr> |
| <td valign="top" align="right"> </td><td valign="top"> |
| <p> |
| |
| <b>DTD/Schema backed validation:</b> |
| |
| <br> |
| If a DTD/Schema is specified in the XML file, as-you-type |
| validation will enforce these constraints (eg. number of |
| elements, children, names...), and mark errors in the file |
| accordingly. |
| </p> |
| </td> |
| </tr> |
| <tr> |
| <td valign="top" align="right"> </td><td valign="top"> |
| <p> |
| |
| <b>JSP-Java validation:</b> |
| |
| <br> |
| Server-side script regions (for the Java language) in JSP |
| files will be marked with Java as-you-type errors (eg. |
| missing imports, bad Java symbol references). |
| </p> |
| </td> |
| </tr> |
| <tr> |
| <td valign="top" align="right"> </td><td valign="top"> |
| <p> |
| |
| <b>XML Catalog:</b> |
| |
| <br> |
| The DTD/Schema specified in the XML can be available locally |
| in the XML Catalog. An Internet connection need not be |
| available. |
| </p> |
| </td> |
| </tr> |
| <tr> |
| <td valign="top" bgcolor="#0080c0" align="left" colspan="2"><b><font face="Arial,Helvetica" color="#ffffff">Expand Selection To menu</font></b></td> |
| </tr> |
| <tr> |
| <td valign="top" align="right"> </td><td valign="top"> |
| <p> |
| You can quickly select XML elements using the Structured |
| Selection feature. Highlight a XML element and press |
| Alt+Shift+Arrow Up or select |
| <b>Edit > Expand Selection To > Enclosing Element</b> |
| from the menu bar - the selection will be expanded to the |
| smallest XML element that contains the selection. You can |
| then further expand the selection to the enclosing element, |
| the next element, the previous element, or restore the last |
| selection by selecting Enclosing Element, Next Element, |
| Previous Element, or Restore Last Selection from the Edit > |
| Expands Selection To menu bar respectively. |
| </p> |
| </td> |
| </tr> |
| <tr> |
| <td valign="top" bgcolor="#0080c0" align="left" colspan="2"><b><font face="Arial,Helvetica" color="#ffffff">Smart Insert</font></b></td> |
| </tr> |
| <tr> |
| <td valign="top" align="right"> </td><td valign="top"> |
| <p> |
| The XML Editor has a Smart Insert mode which can be toggled |
| via |
| <b>Edit > Smart Insert Mode</b> |
| or Ctrl+Shift+Insert (by default). In Smart Insert mode, the |
| editor provides language-specific extras. For example, when |
| you start typing an end tag, "</", in a XML file after a |
| start tag with its end tag missing, Smart Insert completes |
| the end tag automatically. When you start typing the opening |
| of a XML comment, "<!—", Smart Insert ends the comment |
| for you by inserting the closing "-->", leaving the caret |
| in the middle of the comment tag so you can continue typing |
| the comment text. |
| </p> |
| </td> |
| </tr> |
| <tr> |
| <td valign="top" bgcolor="#0080c0" align="left" colspan="2"><b><font face="Arial,Helvetica" color="#ffffff">Linked Editing</font></b></td> |
| </tr> |
| <tr> |
| <td valign="top" align="right"> </td><td valign="top"> |
| <p> |
| In Linked Edit mode, you may change multiple occurrences of |
| a string in the file simultaneously. This is most easily |
| seen through |
| <a href="#quickfix" alt="Quick Fix"> |
| Quick Fix and Quick Assist |
| </a> |
| , such as the Quick Assist shown below for renaming an |
| element: |
| </p> |
| </td> |
| </tr> |
| <tr> |
| <td valign="top" align="right"> </td><td valign="top"> |
| <p> |
| |
| <img src="images/linkedit.jpg" alt="XML tag name linked editing"> |
| </p> |
| </td> |
| </tr> |
| <tr> |
| <td valign="top" bgcolor="#0080c0" align="left" colspan="2"><b><font face="Arial,Helvetica" color="#ffffff">Formatting and Cleanup</font></b></td> |
| </tr> |
| <tr> |
| <td valign="top" align="right"> </td><td valign="top"> |
| <p> |
| XML Formatting lets you reformat the indentations and line |
| delimiters, and reflow long lines of the selected XML |
| element or the whole XML document. XML Formatting makes the |
| document easier to read and better for printing. The XML |
| formatting options are configured on the XML Source |
| preference page ( |
| <b> |
| Window > Preferences > Web and XML > XML Files |
| > XML Source |
| </b> |
| ). |
| </p> |
| </td> |
| </tr> |
| <tr> |
| <td valign="top" align="right"> </td><td valign="top"> |
| <p> |
| |
| <img src="images/format_block.jpg" alt="preference page block for XML formatting"> |
| </p> |
| </td> |
| </tr> |
| <tr> |
| <td valign="top" align="right"> </td><td valign="top"> |
| <p> |
| Highlight a XML element and press Ctrl+I or select |
| <b>Source > Format > Active Elements</b> |
| from the menu bar to format the selected XML element. Press |
| Ctrl+Shift+F or select |
| <b>Source > Format > Document</b> |
| from the menu bar to format the whole XML document. |
| </p> |
| </td> |
| </tr> |
| <tr> |
| <td valign="top" align="right"> </td><td valign="top"> |
| <p> |
| XML Cleanup lets you correct simple errors in the XML |
| document such as adding required attributes that are |
| missing, inserting missing begin or end tags, and quoting |
| unquoted attribute values. Some convenient options, such as |
| compressing empty element tags, formating the source, and |
| converting line delimiters, are provided to make documents |
| more consistent. |
| </p> |
| </td> |
| </tr> |
| <tr> |
| <td valign="top" align="right"> </td><td valign="top"> |
| <p> |
| |
| <img src="images/cleanup_dialog.jpg" alt="popup Cleanup dialog"> |
| </p> |
| </td> |
| </tr> |
| <tr> |
| <td valign="top" bgcolor="#0080c0" align="left" colspan="2"><b><font face="Arial,Helvetica" color="#ffffff">JavaScript Editor with Preview</font></b></td> |
| </tr> |
| <tr> |
| <td valign="top" align="right"> </td><td valign="top"> |
| <p> |
| With the help of the Outline view, the JavaScript Editor |
| gives you a clear hierarchy view of the JavaScript variables |
| and functions you have in the JavaScript file. JavaScript |
| keywords are highlighted in different colors and Content |
| Assist provides you with a list of suggested completions for |
| partially entered strings along with visual indicators for |
| the web browsers that support the method. |
| </p> |
| </td> |
| </tr> |
| <tr> |
| <td valign="top" align="right"> </td><td valign="top"> |
| <p> |
| |
| <img src="images/js_multipageeditor.jpg" alt="JavaScript Editor"> |
| </p> |
| </td> |
| </tr> |
| <tr> |
| <td valign="top" align="right"> </td><td valign="top"> |
| <p> |
| SSE provides two JavaScript editors differing only by the |
| presence of a Preview page. The Preview Page in the |
| JavaScript Editor lets you test your code by wrapping the |
| file in a simple HTML file using a |
| <b>script</b> |
| tag. You may also preview the JavaScript file with any HTML |
| file in the project that includes the JavaScript file. |
| </p> |
| </td> |
| </tr> |
| <tr> |
| <td valign="top" align="right"> </td><td valign="top"> |
| <p> |
| |
| <img src="images/js_default_preview.jpg" alt="JavaScript Editor's Preview page"> |
| </p> |
| </td> |
| </tr> |
| <tr> |
| <td valign="top" bgcolor="#0080c0" align="left" colspan="2"><b><font face="Arial,Helvetica" color="#ffffff">Quick Fix and Quick Assist</font></b></td> |
| </tr> |
| <tr> |
| <td valign="top" align="right"> </td><td valign="top"> |
| <p> |
| |
| <a name="quickfix"></a> |
| In the XML editor, if you see an error underlined with a |
| squiggly line, position the caret inside the underlined |
| range and press Ctrl+1 or select |
| <b>Edit > Quick Fix</b> |
| to see a list of suggested corrections. |
| </p> |
| </td> |
| </tr> |
| <tr> |
| <td valign="top" align="right"> </td><td valign="top"> |
| <p> |
| |
| <img src="images/quickfix.jpg" alt="XML Quick Fix example"> |
| </p> |
| </td> |
| </tr> |
| <tr> |
| <td valign="top" align="right"> </td><td valign="top"> |
| <p> |
| Quick Assist proposals are available even if there is no |
| problem or warning. |
| </p> |
| </td> |
| </tr> |
| <tr> |
| <td valign="top" align="right"> </td><td valign="top"> |
| <p> |
| |
| <img src="images/quickassist1.jpg" alt="XML Quick Assist example"> |
| </p> |
| </td> |
| </tr> |
| <tr> |
| <td valign="top" align="right"> </td><td valign="top"> |
| <p> |
| Depending on the Quick Assist proposal, you may enter the |
| Linked Edit mode where you may change multiple occurrences |
| of a string in the file simultaneously. |
| </p> |
| </td> |
| </tr> |
| <tr> |
| <td valign="top" align="right"> </td><td valign="top"> |
| <p> |
| |
| <img src="images/quickassist2.jpg" alt="XML Quick Assist example with Rename Element chosen"> |
| </p> |
| </td> |
| </tr> |
| <tr> |
| <td valign="top" align="right"> </td><td valign="top"> |
| <p> |
| Quick Fix and Quick Assist proposals for Java code embedded |
| in JSP files are also available. |
| </p> |
| </td> |
| </tr> |
| <tr> |
| <td valign="top" align="right"> </td><td valign="top"> |
| <p> |
| |
| <img src="images/quickfix_java.jpg" alt="Quick Fix example of Java in the JSP editor"> |
| </p> |
| </td> |
| </tr> |
| <tr> |
| <td valign="top" bgcolor="#0080c0" align="left" colspan="2"><b><font face="Arial,Helvetica" color="#ffffff">JSP semantic highlighting</font></b></td> |
| </tr> |
| <tr> |
| <td valign="top" align="right"> </td><td valign="top"> |
| <p> |
| The JSP editor allows you to highlight JSP and custom action |
| tags differently from HTML and XML to help distinguish the |
| JSP content from the its template content. |
| </p> |
| </td> |
| </tr> |
| <tr> |
| <td valign="top" align="right"> </td><td valign="top"> |
| <p> |
| |
| <img src="images/jsp_styles.jpg" alt="JSP Style preference page; the Java source is not itself highlighted in this preference page"> |
| <br> |
| |
| <i> |
| Did you know that clicking in the sample text area |
| automatically shows the style settings for that text's |
| content type? |
| </i> |
| |
| </p> |
| </td> |
| </tr> |
| <tr> |
| <td valign="top" bgcolor="#0080c0" align="left" colspan="2"><b><font face="Arial,Helvetica" color="#ffffff">JSP Debugging</font></b></td> |
| </tr> |
| <tr> |
| <td valign="top" align="right"> </td><td valign="top"> |
| <p> |
| The JSP editor can set breakpoints compatible with JSR-045 |
| compliant servers such as Apache Tomcat 5.0 and newer. As in |
| the JDT Java editor, breakpoints are set using the ruler's |
| context menu. |
| </p> |
| </td> |
| </tr> |
| <tr> |
| <td valign="top" align="right"> </td><td valign="top"> |
| <p> |
| |
| <img src="images/jsp_togglebreakpoint.jpg" alt="the JSP editor ruler context menu"> |
| </p> |
| </td> |
| </tr> |
| <tr> |
| <td valign="top" align="right"> </td><td valign="top"> |
| <p> |
| When stepping, local variables are visible as well as the |
| JSP source itself. |
| </p> |
| </td> |
| </tr> |
| <tr> |
| <td valign="top" align="right"> </td><td valign="top"> |
| <p> |
| |
| <img src="images/jsp_debug1.jpg" alt="a JSP being debugged"> |
| </p> |
| </td> |
| </tr> |
| <tr> |
| <td valign="top" align="right"> </td><td valign="top"> |
| <p> |
| The Debug perspective's Run menu and its accelerators are |
| also made available. |
| </p> |
| </td> |
| </tr> |
| <tr> |
| <td valign="top" align="right"> </td><td valign="top"> |
| <p> |
| |
| <img src="images/jsp_debugmenu.jpg" alt="The Debug perspective's Run menu"> |
| </p> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </body> |
| </html> |