Web Application Development: Using the Web Page Editor Palette

This document describes the following:

  1. Displaying the Palette in External View
  2. Editing Tag Library Entries in the Palette
  3. Using the Data Palette
  4. Customizing the Palette
    1. Docking and Undocking the Palette
    2. Modifying the Display of the Palette
  5. Related Information

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, as Figure 1 shows.



Figure 1. Opening JSP Page in Web Page Editor


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, as Figure 2 shows.



Figure 2. Palette



1. Displaying the Palette in External View

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, as Figure 3 shows. Figure 4 demonstrates the external Palette.



Figure 3. Displaying External Palette




Figure 4. External Palette


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.


2. Editing Tag Library Entries in the Palette

To add a tag, you select it from the library, as Figure 5 shows, 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 (see Figure 6).

Alternatively, you can use a property sheet to add and edit tags.



Figure 5. Selecting a Tag Library Entry




Figure 6. Construct Tag Dialog




3. Using the Data Palette

The Data Palette that Figure 7 shows is a part of the Web Page Editor Palette and is always the last list item in the tag library list.



Figure 7. Data Palette


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 that 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, as Figure 8 shows.



    Figure 8.     Inserting Variable in the Page


    This opens the Insert Fields dialog that lets you select a generator for content creation (see Figure 9), choose fields that you would like to generate (see Figure 10) and define the order in which they should appear (see Figure 11).



    Figure 9.     Choosing a Generator




    Figure 10.     Choosing Fields




    Figure 11.     Ordering Fields


  • Navigate to a variable declaration by right-clicking the variable and selecting Open Declaration from the drop-down menu, as Figure 12 shows.



    Figure 12.     Opening Variable Declaration


    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, as Figure 13 shows.



    Figure 13.     Opening Variable Type


    This opens the appropriate Java class in the source editor or, if the source is not available, in the read-only Class File Editor.

    Note the following:
    • 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 Artifical Variable from the drop-down menu. This opens the New Artifical Variable dialog that Figure 14 shows. You create a variable by entering its name and providing its data type.



    Figure 14.     Creating a New Artifical Variable



4. Customizing the Palette

To customize the way the Palette displays tags, right-click a specific tag library node and select Options > Customize, as Figure 15 shows.



Figure 15. Customizing the Palette


This opens the Customize Palette dialog, as Figure 16 shows.



Figure 16. 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 that Figure 17 shows.



Figure 17. Changing the Palette Settings


Using this dialog, you can specify the font, layout, and icon size for a tag library node, as well as define drawer options.


4.1 Docking and Undocking the Palette

When the Palette is displayed as an external view, you may choose to unexternalize it by changing 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, as Figure 18 shows.



Figure 18. Displaying External Palette


Notice the Palette icon at the bottom left corner of the main IDE window that Figure 19 shows. You undock the Palette by clicking this icon.



Figure 19. Docked Palette



4.2 Modifying the Display of the Palette

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, as Figure 20, Figure 21, and Figure22 show.



    Figure 20.     Preparing to Move the Palette




    Figure 21.     Moving the Palette




    Figure 22.     Repositioned Palette


    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, as Figure 23 shows.



    Figure 23.     Docking the Palette


    Figure 24 shows the repositioned Palette.



    Figure 24.     Repositioned Palette


  • Change the width of the Palette by right-clicking the top area and selecting Resize from the drop-down menu, as Figure 25 shows.



    Figure 25.     Resizing the Palette


  • Use the marquee tool (see Figure 26). To do so, you click Marquee button located on the Palette toolbar.



    Figure 26.     Using the Marquee Tool


  • 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, as Figure 27 shows.



    Figure 27.     Changing the Palette Layout and Icon Size



5. Related Information