# Using the Web Page Editor

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.

## Using the Design View

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.

## Using the Preview Tab

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.

## Using the Source View

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.

### Using the Content Assist

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.

### Using HyperLink

You can use the HyperLink feature of the Source view to open a managed bean's code. To do so, press Ctrl+Click key combination on the value attribute of a tag.

### Using HoverHelp

The Source view offers the HoverHelp that displays information about the page elements, or on how to use them.

You can zoom in to the help topic by pressing F2.

## Using the Outline View

The Outline view (see Figure 6) allows you to do the following:

- Visually inspect the document structure

- Change the selection of the current element

- Drag and drop elements within the view

- Modify elements and attributes using the context menu