Visual Web Tools Reference Guide

This dialog lets you set resources which are usually only resolved in runtime. Let's look at what functionality it proposes.

The first two sections of the window let you define actual runtime folders. The example below will help you to clarify how this can be used.

Suppose you have the following project structure:

WebContent/

  pages/

    img/

       a.gif

    header.jsp

  main.jsp

  

The content of the header.jsp is:

My Header

<img src="img/a.gif"/>

and main.jsp content is:

<jsp:include page="pages/header.jsp" />

When you open main.jsp in Visual Page Editor, it will not be able to resolve the image from the header, however, it will work fine in runtime. To fix this in design time, click the Page Design Options button and set Actual Run-Time Relative Folder to 'projectName > WebContent > pages' and you will see the image appeared.

Let' consider an example. For instance, the definition of your CSS on the page is the next:

<link rel="stylesheet" type="text/css"  

    href="#{facesContext.externalContext.requestContextPath}/style.css"/>

This will work fine in runtime, but the Visual Page Editor doesn't know what requestContextPath in design time is. In order to see the necessary styles applied in design time your should add a path to your stylesheet in the CSS File Path section.

The next URI section lets you add URI taglibs so that the editor knows where to find the tag libraries.

And the last Substituted EL expressions section is provided to specify the values for specific EL variables. It can be useful for a preview generation.

As an example look at the figure below:

Here bath in Source and Visual modes you see the EL expression #{user.name}. When you switch to Preview view, you'll also see this expression. Now press Page Design Options button and set the value for the #{user.name} as World.

As a result in Visual mode and Preview view the word World is displayed.

to work with a set of icons

Icons is the root folder for the icon sets. The first step is creating the icon set. Right click on the Icons folder and select Create > Create Set...

Set the value of the name in the Add Icons window and click Finish button. A new element will appear in the list.

Also you can delete the set. Right click on the set of icons that you wish to remove and chose the Delete Set option from the pop-up menu or click the Delete keyboard button.

Set the name of the icon and the path and click Finish button.

You are allowed to edit or delete a group, as well. If you'd like to change attributes of a group, use the right editing window of the palette editor or the Edit... option, like it was mentioned before. In order to remove the group, right click on the group that you wish to remove and chose the Delete option or click the Delete keyboard button.

After setting the attribute name and the path of the icon, click Ok button.

You are allowed to edit or delete the tag library, as well. If you'd like to change attributes of the library or choose another icon, use the right editing window of the palette editor or the Edit... option. In order to remove the tag library, right click on the library that you wish to remove and chose the Delete option or click the Delete keyboard button.

In the Add Palette Macro window, you can configure the tag element. Attribute Name is mandatory to fill and it will be the name of the tag element. Other settings are optional. You can choose the icon and set the Start Text and the End Text for your tag element. If your tag text is too long, use the Change... button to see it all. For start text and end text there is a possibility to control the cursor position by using "|" symbol.

After all the attributes are set, click Finish button.

You are also allowed to edit or delete the tag. If you'd like to change the attributes of the tag or choose another icon for it, use the right editing window of the palette editor or the Edit... option from the pop-up menu. In order to remove the tag, right click on the tag that you wish to remove and chose the Delete option or click the Delete keyboard button.