Visual Web Tools Reference Guide

OpenOn is also implemented for css classes added by a complex link.

It shows that some features of content assist including this one probably will not work. To fix this problem and turn off the message box execute the following steps:

Click the minus sign to collapse a block tag.

When the minus sing is clicked on the appropriate tag collapses and a plus sing ( ) is displayed on the left margin as well as a gray rectangle two dots ( ) appears after opening and closing tags.

For editing inline styles for DOM elements VPE provides the CSS Dialog. It can be called from style line in the Properties view for a currently selected element.

It'll pick up the Edit Style Class Dialog which looks like on the figure below:

Choose a style class from the variants provided and click on the Ok button to apply the changes.

To open a CSS dialog based on the active CSS file click on in the top panel or use hot-keys (Shift+Ctrl+C).

To create a new CSS class for the file click on the Add CSS Class button, write its name in the field appeared and click on the Ok button:

Then you can configure style settings switching between the tabs: Text/Font, Background, Boxes, Property Sheet. The list of already existing classes with names beginning with the symbols printed will be displayed on standard "Ctrl+Space" key combination. To add existing styling to the chosen element just point to the necessary one. Each time you select any class it is displayed in the Preview tab. Click on the Apply button will apply the changes without closing the window.

The Edited properties tab gives a preview of the properties which are set for the existing style class. You can easily modify them with the help of this wizard.

If the style class isn't chosen, the tab doesn't show any properties.

The Preview tab is for observing the content of the chosen CSS file. This tab is hidden if no CSS file is chosen.

At the top of the CSS Class Dialog you can see a preview box which visualizes the result. To edit the preview you should double click in the box. To leave the focus, use Ctrl + Tab.

The dialog for creating a new CSS class, which is called from New > Other... > JBoss Tools Web > CSS Class, looks this way:

Click on the Browse button to open a dialog to select the CSS file to create a CSS class for:

Choose the necessary CSS file and click on the Ok button.

The second tab, Included CSS files , is used to add CSS files to be linked by Visual Page Editor when generating a preview:

The third one, Included tag libs, can be used to add Taglibs that can be used by the editor for getting appropriate templates to generate a preview:

The first two tabs of the window let you define actual runtime folders. The example below will help you understand how this can be done.

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

You can also switch on this option in the VPE preferences, having clicked on the Preferences button ().

If you want to hide the Selection Tag Bar, use the Show Selection Bar button ( ) on the VPE toolbar.

You can easily add a new tag:

You can also easily add a new attribute to an existing tag:

Content assist is available when editing the file using the Source viewer:

In the Source viewer, if at any point a tag is incorrect or incomplete, an error will be indicated next to the line and also in the Problems view below.

You can add any new elements right in the Tree viewer:

Also make sure that the JBoss Tools Palette is open. Select the tag library that you want to add and simply drag-and-drop it on to the JBoss Tools Palette.

You will see the following dialog window. As you can see JBoss Developer Studio takes care of all the details. Chosen TLD file , name and prefix of the library and Library URL are detected, thus just need to set the Group name to which you wish to place this tag library. You can either add this tag library to an existing Group or just create a new one.

Once you are finished, you will see the new tag library added to the JBoss Tools Palette.