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 dispayed in the design view with an input text selected and its properties displayed in the properties editor.
Figure 3. Design View
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 componenents, 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, as Figure 4 shows.
Figure 4. Displaying Nonvisual Child Components
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.
Figure 5. Selecting Nonvisual Child Components
2. Using the Preview Tab
The 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.
Figure 6. Preview Tab
3. 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 dispayed in the Source view with an output text selected and its properties displayed in the properties editor.
Figure 7. Source View
3.1 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.
Figure 9. Content Assist in Source View
3.2 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.
3.3 Using HoverHelp
The Source view offers the HoverHelp that displays information about the page elements, or on how to use them, as Figure 9 shows.
Figure 9. HoverHelp in Source View
You can zoom in to the help topic by pressing F2.
4. 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
Figure 6. Outline View
5. Related Information