You use the Web Page Editor to edit JSP and HTML files. It is a multi-page editor that provides the following:
Design page that supports visual development.
Source page that lets you edit text.
Preview page
Using its toolbar, you can configure the editor to display both a Design and a Source page of the current document in either horizontal or vertical split modes, as Figure 1 shows. You can also configure it to display only either the Design or the Source page. Note that the currently-selected element is synchronized between all pages and views.
The following views are associated with the Web Page Editor:
Properties view that enables editing of the most common attributes of tags using choice dialogs.
Palette view that allows you to edit and create tags, such as HTML, JSP, and JSF.
Outline view
The Web Page Editor also includes the Preview tab and a toolbar. The toolbar enables the following:
Display of horizontally-split Design and Source pages
Display of vertically-split Design and Source pages
Display of Design page only
Display of Source page only
Underlining selected text
Bolding selected text
Italicizing selected text
Making selected text appear small
Making selected text appear large
To access the Editor, from your Web project open in the Project Explorer, right-click a page which you are planning to edit, and then select Open With > Web Page Editor from the drop-down menu, as Figure 2 shows.
The Design view is editable and allows you to select elements and move them around on the page, display an element's properties in the properties editor, drop tags from the Palette onto the page, edit elements using the context menu, and so on.
Figure 3 shows a JSP page displayed in the design view with an input text selected and its properties displayed in the properties editor.
Note that some elements enable tag-specific editing through the context menu.
The Design view provides tooltips with the information on which element will be selected upon a mouse click.
In addition, the Design view allows you to visually inspect and select nonvisual child components, such as converters and validators. To do so, float the cursor over an element, and you will see these nonvisual child components as semitransparent icons at the top-right of the element.
Selecting the element and then clicking the "pin" icon that appears at the top-right of the element will then let you select the nonvisual child component by clicking the component's icon.
he Preview tab represents a non-editable view that closely emulates the Web page as it will be rendered at run time.
Figure 6 shows a preview of a JSP page.
The Source view is editable and allows you to select elements, display an element's properties in the properties editor, drop tags from the Palette onto the page, and so on. Figure 7 shows a JSP page displayed in the Source view with an output text selected and its properties displayed in the properties editor.
You can use the content assist feature of the Source view that lets you select tags from a list of available tags with descriptions. You activate the content assist by pressing Ctrl+Space key combination.