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.