4.2.1. Advanced Settings

There are three buttons on the Visual Page Editor left side:

Visual Page Editor Buttons

Figure 4.37. Visual Page Editor Buttons


  • Preferences

Provides quick access to Visual Page Editor preferences.

Visual Page Editor Preferences Window

Figure 4.38. Visual Page Editor Preferences Window


  • Refresh

Refresh displaying information with this button.

  • Page Design Options

This button leads to page design options.

Page Design Options

Figure 4.39. Page Design Options


This dialog let's you set resources which are usually only resolved in runtime. To set a stylesheet, click Add (for CSS File Path section) and add your stylesheet. It works when CSS is defined on your page in the following way:

Code:

<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.

The next section (URI), let's you add URI taglibs if you are using includes so that the editor knows where to find the tag libraries.

The first two sections let you define actual runtime folders. Here is an example.

Let's say you have the following project structure:

WebContent/
  pages/
    img/
       a.gif
    header.jsp
  main.jsp

header.jsp content:

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

main.jsp:

<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 <project>WebContent > pages and you will see the image appear.

  • Hide Selection bar

By clicking on the component in Visual view or selecting a code snippet in Source mode you can see the tags tree. If you want to hide the selection bar, use the "Hide Selection Bar" button on the lower right side.

Selection Bar

Figure 4.40. Selection Bar