You use the Web Page Editor Palette to edit and create a variety of tags, such as HTML, JSP, JSF, and so on.
In addition to standard HTML and JSP tags, the Palette displays an item for each tag in the JSP tag libraries that are on the application's classpath. You drag and drop tags on to the Design or Source view to design Web pages. You can pin the Palette to be open, or set to automatically expand when the cursor is placed over it while it is in its collapsed state.
To access the Palette, from your Web project open in the Project Explorer, right-click a page on which you are planning to drop or edit tags, and then select Open With > Web Page Editor from the drop-down menu.
With the page open in the editor view, click Show Palette (a gray triangular button located at the top right corner of the editor) to display the Palette.
You can display the Palette outside of the Web Page Editor. To do so, right-click the Palette and select Options > Show as External Palette from the drop-down menu
To reverse the external view display and have the Palette displayed as a part of the Web Page Editor, click the Close button.
Notice that the external view allows you to filter the tag library nodes to define which ones the Palette should display. To do so, enter the filter text in the filter field.
To add a tag, you select it from the library and then drag it from the Palette and drop onto the JSP page that is open in either the Design or Source view in the Web Page Editor. You can enter values for the tag attributes using the corresponding dialog that pops up upon the drop.
Alternatively, you can use a property sheet to add and edit tags.
The Data Palette is a part of the Web Page Editor Palette and is always the last list item in the tag library list.
The Data Palette displays variables in scope for the page, as follows:
Variables are displayed as children of a group and grouped by Page Variables and External Variables. If a group does not contain any member variables, the group is not displayed. The scope of a variable is indicated by an icon (green square for the application scope, blue triangle for the session scope, orange rectangle for the request scope, and blue circle for the page scope), as well as by the tool tip text that also provides information about the variable type, name, and data type.
Fields are displayed as children of a variable and include fields with accessor methods indicated by a green circle and a tool tip text that lists the field name and data type.
Fields of fields are displayed as children of the fields.
Note: The Data Palette automatically refreshes itself when variables are discovered. Also note that when the Palette is displayed as an external view and you have the ability to use filters, you can filter by "used variable only".
The Data Palette allows you to do the following:
Add a variable to a page by right-clicking a variable and selecting Insert in the page from the drop-down menu.
This opens the Insert Fields dialog that lets you select a generator for content creation choose fields that you would like to generate and define the order in which they should appear.
Navigate to a variable declaration by right-clicking the variable and selecting Open Declaration from the drop-down menu.
This opens the editor with the position of the variable declaration highlighted.
Navigate to the value reference type declaration by right-clicking the variable and selecting Open Type from the drop-down menu.
This opens the appropriate Java class in the source editor or, if the source is not available, in the read-only Class File Editor.
Notes:
If the type is an array type, the component type is used. For example, if it is java.lang.String[], you would navigate to java.lang.String.
If the type is a collection type, the container type is used.
The navigation is not available for primitive types.
Create new external (artificial) variables by right-clicking a variable group node and selecting New Artificial Variable from the drop-down menu. This opens the New Artificial Variable dialog. You create a variable by entering its name and providing its data type.
To customize the way the Palette displays tags, right-click a specific tag library node and select Options > Customize.
This opens the Customize Palette dialog.
Using this dialog, you can modify names and descriptions of tag library nodes, specify whether or not a particular node should be displayed, as well as import or export tag libraries.
You can also modify the Palette settings by right-clicking a specific tag library node and selecting Options > Settings to open the Palette Settings dialog.
Using this dialog, you can specify the font, layout, and icon size for a tag library node, as well as define drawer options.
When the Palette is displayed as an external view, you may choose to change the display to the docked view in the Web Page Editor. To do so, click on the Palette tab and select Fast View from the drop-down menu.
Notice the Palette icon at the bottom left corner of the main IDE window.
In addition to performing the Palette customization using the Customize Palette and Palette Settings dialogs, you can modify the way the Palette and its tag library nodes are displayed within the Web Page Editor as follows:
Move it to the left or right side of the Web Page Editor by clicking the top area and dragging the cursor to the left or right.
Alternatively, you can move the Palette by right-clicking the top area and selecting Dock On > Left or Dock On > Right from the drop-down menu.
Change the width of the Palette by right-clicking the top area and selecting Resize from the drop-down menu.
Use the marquee tool. To do so, you click Marquee button located on the Palette toolbar.
Apply the following changes to a tag library node by making selections from the drop-down menu with the cursor positioned on a particular node:
Expand the size of a tag library node to the size of the Palette by selecting Maximize.
Remove a tag library node from the Palette view by selecting Hide.
Undo the preceding changes by selecting Restore.
Change the Palette layout or the size of icons for a tag library node by selecting appropriate options from the drop-down menu.