JBoss.orgCommunity Documentation

Visual Web Tools Reference Guide

Version: 4.0.0


1. Visual Web Tools
1.1. Key Features of Visual Web Tools
1.2. Other relevant resources on the topic
2. Spring Tools
2.1. Spring IDE guide
2.1.1. Add Spring Project Nature
2.1.2. Create New Spring Project
2.1.3. Add References To Other Spring Projects
2.1.4. Add Spring Beans Config Files
2.1.5. Create Spring Beans Config Sets
2.1.6. Open Spring Explorer
2.1.7. Validate Spring Beans Config
2.1.8. Open Spring Beans Graph
2.1.9. Search Spring Beans
3. Editors
3.1. Editors Features
3.1.1. OpenOn
3.1.2. Content Assist
3.1.3. Synchronized Source and Visual Editing
3.2. Visual Page Editor
3.2.1. Visual/Source View
3.2.2. Pages Styling
3.2.3. Visual Templates for Unknown Tags
3.2.4. Export/Import of the Templates for Unknown Tags
3.2.5. VPE Toolbar
3.2.6. Page Preview
3.2.7. Error Messages
3.2.8. Support for Custom Facelets Components
3.3. More Editors
3.3.1. Graphical Properties Editor
3.3.2. Graphical Tag Library Editor
3.3.3. Graphical Web Application File (web.xml) Editor
3.3.4. CSS Editor
3.3.5. JavaScript Editor
3.3.6. XSD Editor
3.3.7. Support for XML Schema
4. Browsers
4.1. Generic web browser
4.2. Mobile web browser
4.2.1. System requirements
4.2.2. Using BrowserSim
5. JBoss Tools Palette
5.1. Palette Options
5.1.1. Palette Editor
5.1.2. Show/Hide
5.1.3. Import
5.2. Using the Palette
5.2.1. Inserting Tags into a JSP File
5.2.2. Adding Custom JSF Tags to the JBoss Tools Palette
6. CSS Editing Perspective
6.1. Outline view
6.2. Properties view
6.3. CSS Properties view
6.4. CSS Preview
7. RichFaces Support
7.1. Code Assist for RichFaces
7.2. OpenOn for RichFaces
7.3. RichFaces in the JBoss Tools Palette
7.4. Relevant Resources Links
8. Web Projects View
8.1. Project Organization
8.2. Drag and Drop
8.2.1. For a Property
8.2.2. For Managed Bean Attributes
8.2.3. Navigation Rules
8.2.4. For a Tag Library File Declaration
8.2.5. For JSP Pages
8.3. Developing the Application
8.4. Expanding Tag Library Files
8.5. Drag and Drop Tag Libraries on to JBoss Tools Palette
8.6. Create and Import JSF and Struts Projects
9. JBoss Tools Preferences
9.1. Project Archives
9.2. Editors
9.3. Visual Page Editor
9.4. Visual Page Editor Code Templates
9.5. EL Variables
9.6. JSF
9.7. JSF Project
9.8. JSF Flow Diagram
9.9. Label Decorations
9.10. Seam
9.11. Seam Validator
9.12. Seam Pages Diagram
9.13. Struts
9.14. Struts Automation
9.15. Plug-in Insets
9.16. Resource Insets
9.17. Struts Customization
9.18. Struts Project
9.19. Struts Support
9.20. Struts Flow Diagram
9.21. Tiles Diagram
9.22. Server Preferences
9.23. XDoclet
10. Context Menu Preferences and Options
10.1. Add/Remove Struts Capabilities
10.2. Add/Remove JSF Capabilities
10.3. Add Custom Capabilities
11. FAQ
11.1. What should I do if Visual Page Editor does not start under Linux?
11.2. How do I change the auto-formating preferences for the Visual Page Editor?
11.3. Visual Editor starts OK, but the Missing Natures dialog appears
12. Conclusion

This guide covers the usage of Visual Web Tools in JBoss Developer Studio and JBoss Tools. The difference between these products is that JBoss Tools are just a set of Eclipse plugins, where JBoss Developer Studio adds the following functionality:

  • An installer

  • Eclipse and Web Tools preconfigured

  • JBoss EAP with JBoss AS and Seam preconfigured

  • Third party plugins bundled and configured

  • Access to Red Hat Enterprise Linux and Red Hat Network

  • Access to the JBoss and Red Hat supported software

For additional information, please visit the JBoss Developer Studio home page.

In JBoss Tools there is an extensive collection of specialized wizards, editors and views that can be used in various scenarios while developing Web applications. The following chapters walk through these features.

Here is the table of the main features of Visual Web Tools:

Table 1.1. Key Functionality for Visual Web Tools

Feature Benefit Chapter
Visual Page Editor Powerful and customizable visual page editor that provides the ability to develop an application using any web technology including JSF, Seam, Struts, JSP, HTML and others. Development is done using three tabs: Visual/Source, Source and Preview. Fast and easy switching between these tabs. Split screen design of visual and source views. Full and instant synchronization between source and visual views. Integration with properties and outline views. Graphical toolbar to add inline styling to any tag. Section 3.2, “Visual Page Editor”
Multiple Editors An extensive collection of specialized editors for different file types including properties, TLD, web.xml, tiles, and so on. These include Graphical Properties Editor, Graphical TLD Editor, Graphical Web Application File (web.xml) Editor, CSS Editor, JavaScript Editor, XSD Editor, and support for XML Schema. Section 3.3, “More Editors”
JBoss Tools Palette Organizing various tags by groups, inserting tags into a JSP or XHTML page with one click, adding custom or 3rd party tag libraries into the palette, easy controlling the number of tag groups shown on the palette. Chapter 5, JBoss Tools Palette
Web Projects View Visualizing and displaying projects by function. Easy selecting of different kinds of items and dropping them into JSP pages. Using context menus to develop the application. Using icon shortcuts to create and import JSF and Struts projects. Expanding and inspecting tag library files. Selecting custom and third-party tag libraries to drag and drop onto the JBoss Tools Palette. Chapter 8, Web Projects View
OpenOn Easy navigation between views and other parts of your projects. Section 3.1.1, “OpenOn”
Content Assist Code completion proposals while working with HTML, Java, JavaScript , XML, JSP, XHTML, seam project and JSF configuration files. Content assist based on project data (dynamic code assist). Code completion for values from property files, beans attributes and methods, navigation rule outcomes and JSF variables. Section 3.1.2, “Content Assist”
Drag-and-Drop Possibility of inserting any tag onto the page you are editing by just drag-and-droping it from the palette to this page. Adding any properties, managed bean attributes, navigation rules, tag library file declarations, JSP files from web projects view by clicking them and dragging to source code. Section 3.2, “Visual Page Editor” Section 8.2, “Drag and Drop”
RichFaces Support Tight integration between JBoss Developer Studio and RichFaces frameworks. Easy managing RichFaces components in any web application. Support for RichFaces and Ajax4jsf libraries in JBoss Tools Palette. Rendering RichFaces components in Visual Page Editor. Chapter 7, RichFaces Support
Flexible Configuration Various features of JBoss Developer Studio can be easily configured via the Preferences screen. Chapter 9, JBoss Tools Preferences

JBoss Developer Studio is bundled with the Spring IDE for Eclipse. Visit Spring IDE site for the latest versions and documentation.

In the JSF Tools Reference Guide and Struts Tools Reference Guide you may have read about the Graphical Editors for JSF and Struts configuration files, Tiles Files, and Struts Validation Files. All these editors have OpenOn (see Section 3.1.1, “OpenOn”) and Code Assist (see Section 3.1.2, “Content Assist”) features, which are described in more detail in this document. In addition, this document will cover the Visual Page Editor (see Section 3.2, “Visual Page Editor”), which provides combined visual and source editing of Web pages, as well as a number of additional editors (see Section 3.3, “More Editors”) for different types of files.

JBoss Developer Studio has powerful editing features that help you easily navigate within your application and make use of content and code assist no matter what type of project file (JSP, XHTML, XML, CSS etc.) you are working on.

The mentioned features are the following:

OpenOn lets you easily link directly from one resource to another in your project without using the Package Explorer view (i.e. the project tree). With OpenOn, you can simply use F3 or Ctrl+Click on a reference to another file and the file will be opened.

OpenOn is available for:

Content assist is available when working with:

Notice that code completion for EL variables have icons illustrating what they are from. These icons are described in the table below.




The ranking and sorting are available in EL code completions.

As you can see, in addition to proposals, content assist also provides descriptions of selected tags or attributes.


When working with a JSF project in JBoss Developer Studio, you can use various Content Assist features while developing:

JBoss Developer Studio takes Content Assist to the next level. JBoss Developer Studio will constantly scan your project, and you will be able to insert code into the JSP page from your project including:

The figure below demonstrates how to insert a message from a Properties file. You simply put the cursor inside the value attribute and press Ctrl+Space. JBoss Developer Studio will scan your project and display a list of possible values that can be inserted.


In the following screenshot we are inserting a Managed bean attribute value. Again, by simply pressing Ctrl+Space, JBoss Developer Studio will show a list of all possible values that can be inserted.

Once you select a Managed bean, it will show you a list of all available attributes for the selected Managed bean.


Code Assist based on project data will also prompt you for navigation rules that exist in your JSF configuration file.


Code Assist can also provide you with access to the beans located in JAR archives.


Code Assist is able to define Resource Bundles on template pages and provides the proposals on the client page.


JBoss Developer Studio comes with a powerful and customizable Visual Page Editor (VPE). You can use the Visual Page Editor to develop an application using any technology such as JSF, Struts, JSP, HTML and more. Double-click on a file in the Package Explorer view to open it in the Visual Editor, or just drag-and-drop it into perspective (the drag-and-drop feature can be also applied to JSP, XHTML or HTML files created locally).

As a new JSF 2.0 specification has been released, support of new features is now implemented in the Visual Page Editor. The JSF 2.0 tags like <h:body>, <h:head>, <h:outputscript>, <h:outputstyle> are supported in the editor, as well as the composite components and expression language resource handling. (See the JSF 2 fu, Part 2: Templating and composite components for information on how to use composite components and JSF 2.0 New Feature Preview Series (Part 2.3): Resources on how to handle EL resources).

The current VPE version has three tabs: Visual/Source, Source and Preview. To switch between the views you can use tabs at the bottom of the VPE or the shortcut keys Ctrl+PageUp and Ctrl+PageDown.


Using the Visual/Source view you can edit your pages in the Source and Visual modes simultaneously, with instant synchronization between them:


The view is designed in the form of a split pane with toggle buttons for quickly moving between Source, Visual or Source/Visual modes, as shown on the figure above.

One more way to toggle between the various states of the split pane is using the Shift+F6 keyboard shortcut for maximizing or restoring the Source part and Shift+Alt+F6 for maximizing or restoring the Visual part.

You can synchronize the scrolling between the source and visual panes by clicking the Synchronize scrolling between source and visual panes (Synchronize scrolling between source and visual panes) button in the toolbar of the Web Development perspective. This will ensure that scrolling in one window pane will automatically scroll the other pane to the same location.

Tip:

When editing large documents hiding the Visual part will speed up the editing.

It should be pointed out that, no matter what mode you are working in, you get a full integration with the Properties and Outline views:


The Outline view displays a specific outline of a structured file that is currently open in the editor area, and lists its structural elements. Right-clicking on these elements will open additional options that allow other specific elements to be added in their appropriate positions.

The Properties view shows the property names and their values for a selected item. The values are editable: just select any value and click on the button that will appear to choose a new value. The key combination Ctrl+Z will return the previous value, while Ctrl+Y will return the new value again. The Properties view has additional options and can be set up to display categories and advanced properties.

It is also possible to use the JBoss Tools Palette (see Chapter 5, JBoss Tools Palette) to insert any tag from the list of tag libraries into the page you are editing with just a click or by dragging-and-dropping.


You can insert a tag or component from the palette into either the Source or the Visual part by displaying the context menu and selecting Insert around, Insert before, Insert after or Replace With, picking the type of the tag and finally choosing the tag you want to insert.

The image below illustrates how you can insert a tag into the Source part.


And this is how a tag is inserted using a context menu in the Visual part.


The Visual Page Editor also displays custom tags correctly if they are configured properly. The picture below shows an example how the custom tags pagination and echo will be displayed in VPE.


The listings of the custom tag implementations will help to demonstrate how VPE works.

  • echo.xhtml:

    <ui:composition xmlns:ui="http://java.sun.com/jsf/facelets">
    	<span class="message">#{msg}</span>
    </ui:composition>
              
  • paginator.xhtml:

    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml"
    	xmlns:ui="http://java.sun.com/jsf/facelets"
    	xmlns:h="http://java.sun.com/jsf/html"
    	xmlns:f="http://java.sun.com/jsf/core">
    <ui:component>
    <!-- h:inputHidden id="currentPage" replace, because if on page two fields,
    two elements with equal id has been used, but should be used only one -->
    	<h:panelGrid style="margin-right:auto;margin-left:auto;" columns="4">
    		<h:commandButton value="&lt;&lt;" type="submit" 
    		onclick="document.getElementById('currentPage').value=0" >
    		</h:commandButton>
    		<h:commandButton value="&lt;" type="submit" 
    		onclick="document.getElementById('currentPage').value=#{user.currentPage-user.rowsPerPage}">
    		</h:commandButton>
    		<h:commandButton value="&gt;" type="submit" 
    		onclick="document.getElementById('currentPage').value=#{user.currentPage+user.rowsPerPage}">
    		</h:commandButton>
    		<h:commandButton value="&gt;&gt;" type="submit" 
    		onclick="document.getElementById('currentPage').value=#{user.numberOfItems - user.rowsPerPage}">
    		</h:commandButton>
    	</h:panelGrid>
    	<h:inputHidden id="currentPage" value=""/>
    </ui:component>
    </html>
              

If your custom tags are not configured correctly your Visual mode will look like this:


When you make a selection of tags in the source part of the editor, they will all be selected in the visual part of the editor as well. This makes it easy to link code that you have written, with the visual output.


Most web pages use the cascading style sheets (CSS) to control the way they look. With Visual Page Editor you can easily stylize your pages. In this section we are going to introduce you to a powerful mechanism that Visual Page Editor provides for complete control over a pages' styling. Additional information on working with CSS files can be found in Chapter 6, CSS Editing Perspective

The pages you are working with in the Visual Page Editor can use external stylesheets.

The Visual Page Editor allows you to create new style classes in existing stylesheets, as well as edit them. The Edit Style Class dialog is provided for this purposes.

Select the element for which you need to create or edit style class, and press button next to the styleClass field in the Properties view.


This will display the Edit Style Class dialog, which is shown in the image 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, enter its name in the textbox, and click on the OK button:


Then you can configure style settings by switching between the tabs: Text/Font, Background, Boxes, Property Sheet. The list of existing classes with names beginning with the symbols printed will be displayed by using the standard Ctrl+Space key combination. To add an existing style 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 to apply the changes without closing the window.


The Edited properties tab provides 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 is not chosen, the tab does not show any properties.


The Preview tab provides a way to view the content of the selected CSS file. This tab is hidden if no CSS file is selected.


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 NewOther...JBoss Tools WebCSS Class, is shown in the image below:


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


Choose the appropriate CSS file and click on the OK button.

The Visual Page Editor toolbar includes the following buttons:


The Page Design Options button ( ) displays a window which helps you specify necessary references of the resources. It is represented by a window with four tabs. The first one, Actual Run-Time folders, is used to replace absolute and relative path values when generating a preview:


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 tab, Included tag libs, can be used to add Taglibs that can be used by the editor for getting appropriate templates to generate a preview:


And finally, the Substituted El expressions tab is used to add El expressions that will be substituted by the editor when generating 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 the main.jsp file in the 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 Name]WebContentpages, and you will see the image appeared.

Let's 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 does not know the value of requestContextPath in design time. 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 both in Source and Visual modes you see the EL expression #{user.name}. When you switch to Preview view, you will also see this expression. Now click the 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.


Visual Page Editor supports custom Facelets tag libraries both declared in the web.xml file (for details, see Creating a component) and packed into a JAR file.

Tip:

In case of Facelets tag library packed in .jar, remember to put *.taglib.xml in right place: [filename].jar/META-INF/*.taglib.xml

Visual Page Editor recognizes the tags from the custom Facelets tag library and correctly renders them both in source and visual view of the editor.


While editing an XHTML file that uses a custom Facelets components you can always make use of the following editor's features:

Besides Visual Page Editor JBDS is supplied with a huge range of various editors for different file types: properties, TLD, web.xml, tiles and so on.

The deployment descriptor web.xml file is intended for describing the servlets, container-managed security constraints and various deployment properties specific for your web application.

To edit the deployment descriptor JBoss Developer Studio provides its own web.xml editor that comes with the same features you will find in all other JBoss Developer Studio editors:

Different browsers are available for testing the look of a web page or site before going to production. This chapter outlines each browser type available and how to utilize them.

Note

These web browsers are only for testing, contents may appear diferently depending on the browser used to view your page or site outside of the workbench environment.

BrowserSim simulates a mobile web browser so you can see how your web page or site will be viewable on mobile devices.

To test your page or site using BrowserSim, right-click on your HTML, XHTML or other web page extention file and navigate through the context menu to Open WithBrowserSim.


A new window will launch, displaying the contents of the page you selected as it will appear on mobile devices.

You are able to select the type of mobile device to simulate the browser on by right-clicking on part of the theme and selecting from the context menu.


A View page source is also available from the contexzt menu. This can be helpful when wishing to view the HTML code of an Internet site.

To open the BrowserSim without using a context menu, click on the BrowserSim button BrowserSim toolbar icon in your toolbar. If the button is not in your toolbar you can add it by undertaking the following:

Launching BrowserSim from the toolbar will either present you with the simulator and a blank webpage or the webpage currently open in the Internal Web Browser.


This chapter will introduce you to the functionality provided by JBoss Tools Palette. The Palette allows you to quickly and easily create your JSP or JSF pages.

The JBoss Tools Palette allows you to:

  • Insert tags into a JSP or JSF page with one click

  • Add custom and 3rd party tags

The JBoss Tools Palette contains a developer's project tag libraries and provides possibility to add any tag libraries to it. Also you can choose a necessary one from the list of already existing tag libraries:

  • HTML

  • JBoss

  • JSF

  • JSTL

  • MyFaces

  • Oracle ADF Faces

  • Struts

  • XHTML


By default the JBoss Tools Palette is not displayed. If you want to use it select WindowShow View Other...JBoss Tools WebJBoss Tools Palette from the menu bar.

The standard Eclipse Palette is displayed by default in both Web Development and Seam perspectives. Now the standard Eclipse Palette is featured with all JBoss Tools Palette options and capabilities.

To open the standard Eclipse Palette navigate to WindowShow ViewOthersGeneralPalette.

The differences between the two palettes are as follows:

  • The standard Eclipse Palette is blank by default. Content of the palette is available only if Visual Page Editor is open and active, while JBoss Tools Palette always contains a predefined set of components.

  • The Expanded/Collapsed state of components in the standard Eclipse Palette is not global as in JBoss Tools Palette. State is associated with an instance of Visual Page Editor. It means that the state can be different for various files and each new file opened in Visual Page Editor will have the default state of Palette with all components collapsed.

The Palette can be customized by using the following buttons on the Palette toolbar, which provide the following functionality:


The JBoss Tools Palette contains existing libraries of tags, and the Palette editor provides a way to add a new library, or edit existing libraries.

To open the editor, click on the Palette Editor icon ( ).

The window has two parts. There is a reflected grouped list of components on the left side of the palette editor. Each group is divided into multiple groups, each of which is a tag library. To the right side of the palette editor is an editing window where it is possible to change values of group or tag library attributes that you have chosen on the left part of the window.

It can also be done by right click and using Edit… option.

For example, JSF group consists of Core, Facelets, HTML tag libraries and the attributes as name, description and hidden which are available for editing:


The Palette Editor provides the following functionality when working with existing tags or icons:

If you have changed any object in the tree view and you don't like the final result you can always use the Restore Defaults button. Clicking this button will restore defaults for the object selected and for its children elements. Please remember that the button will only restore data for objects defined in the default palette. If selected object is created by you, the button will be disabled. Child objects added by you will not be removed.

When updating JBoss Tools the palette content is not updated.

There are two ways to add any custom (including custom Facelets libraries) or 3rd party tag library to the JBoss Tools Palette:

Before you add your custom component library, you need to make sure it is included in your project. You need to either place the TLD file or the JAR that includes your tag library under the lib folder in your project. Or you can just add TLD or JAR file to the classpath and the library will be added to the Tag Library List in Web Projects View.

Tag libraries can also be imported with the Import button ( ). This button is found at the top right side of the JBoss Tools Palette.

By clicking on the Import button you will see the Import Tag window a similar like in the Drag-and-Drop method (see Section 5.2.2.1, “Drag-and-Drop”). Set the name and prefix of the library and Library URL. You also need to set the Group name to which you'd like to add your tag library.

Like in the previous method you can add it to an existing Group or create a new one. On this Import Tag form you can use Browse... button to locate the tag library that you want to add:


In this chapter we will discuss CSS Editing Perspective views. More information about style sheets can be found in Section 3.2.2, “Pages Styling” of Editor chapter.

The CSS Editing Perspective combines a set of views which allow you to see the structure of your css files, edit them and see the results. To use this perspective you need to select WindowOpen PerspectiveCSS Editing. All of the views are fully synchronized with each other: the changes being made in one view are reflected in the others.

As you know there are three ways of inserting a style sheet:

  • External style sheet (.css file)

  • Internal style sheet (using the <style> tag in the head section of an HTML/XHTML/JSP page)

  • Inline style (using style attribute)

Using the CSS Editing Perspective you can change your style sheet, inserted in any of the possible places described before in three ways:


CSS Properties view has five tabs:

JBoss Developer Studio comes with a tight integration with RichFaces component framework.

Note:

RichFaces 3.3.X is fully supported in the current version of JBoss Developer Studio and JBoss Tools 3.2.0.GA.

The following features are implemented and fully supported for the current version of the RichFaces components:

All you have to do is to download and install RichFaces libraries into your project, i. e. just put richfaces-*.jar files into the /lib project folder. For more information on how to get started with RichFaces, please read the RichFaces documentation.

To get more in-depth information on RichFaces framework refer to the RichFaces Developer Guide.

It may be also helpful for you to view the movies that demonstrate the usage of RichFaces components.

Web Projects is a special view that comes with JBoss Developer Studio.

If the Web Projects view's tab is not visible next to the Package Explorer tab, select WindowShow ViewOtherJBoss Tools WebWeb Projects from the menu bar.

With the Web Projects view you can:

  • Visualize the project better because the project artifacts for JSF, Struts and Seam projects are organized and displayed by function.

  • Select these kinds of items to drag and drop into JSP pages:

    • JSF managed bean attributes

    • JSF navigation rules outcomes

    • Property file values

    • Tag library files

    • Tags from tag libraries

    • JSP page links

  • Use context menus to develop the application (all create and edit functions are available)

  • Use icon shortcuts to create and import JSF and Struts projects

  • Expand and inspect tag library files

  • Section 5.2.2, “Adding Custom JSF Tags to the JBoss Tools Palette”

The Web Projects view has a drag and drop option that can be used for property, managed bean attributes, navigation rules, tag library file declaration and JSP Pages.

Configuring the various JBoss Developer Studio features is done via the Preferences screen by selecting WindowPreferencesJBoss Tools from the menu bar.


From this screen, you can select these more specific sets of JBoss Tools preferences:

The Preferences dialog (WindowPreferences ) also allows to adjust settings for Section 9.22, “Server Preferences” and Section 9.23, “XDoclet” module.

Click on the Project Archives to open the page for changing Project Archives preferences.

Here you can determine settings for Core Preferences, Project Archives View, Project Explorer Preferences and Fileset Preferences.


The next table lists all available preferences for Project Archives and their description.


JBoss ToolsWebEditorsVisual Page Editor screen allows you to control some aspects of the behavior of the Visual Page Editor (VPE) for JSF/HTML files.


The next table lists the possible settings that you can adjust on the General tab of the VPE Preferences page.

Table 9.3. VPE General Preferences

Option Description Default
Show toolbar within the editor (otherwise in Eclipse's toolbar) The option allows to select where the Visual Page Editor toolbar appears. By default it appears as part of the Eclipse toolbar. Off
Show border for unknown tags The option allows to place the border around unknown tags or undo this On
Show non-visual tags Check this box, if you want the editor shows non-visual elements on the page you're editing Off
Show selection tag bar The option allows to show/hide the Selection Bar On
Show text formatting bar Check this box in order to show/hide the Text Formatting bar On
Show resource bundles usage as EL expressions If the option is checked, the editor will show EL expressions instead of the resource values Off
Ask for tag attributes during tag insert Having this option off, the dialog with possible attributes for inserting tag won't appear if all its attributes are optional On
Inform if the project is not configured properly to use Visual Page Editor If this option is deselected you will not be notified that a project is not configured for use with the Visual Page Editor. This may cause unexpected results. On
Synchronize scrolling between source and visual panes This option allows you to set the scrollbars of the source and visual panes of the editor to be synchronized by default. An option to activate and deactivate this option exists as part of the toolbar. Off
Select the default active editor's tab The option provides possibility to choose one of the following views - Visual/Source, Source or Preview, as default when opening the editor Visual/Source
Visual/Source editors splitting The option allows to choose one of the following Visual,Source layouts - Vertical Source on top, Vertical Visual on top,Horizontal Source to the left or Horizontal Visual to the left, as a default one when opening the Visual/Source view Vertical splitting with Source Editor on the top
Size of the Visual Editor pane (0 – 100%) With the help of this scroll bar you can adjust the percentage rating between the Source and Visual modes of the Visual/Source view 50%

On the Visual Templates tab you can add, edit or remove Section 3.2.3, “Visual Templates for Unknown Tags”.


Select a template for editing from the available list and press Edit button. It will pick up the Section 3.2.3, “Visual Templates for Unknown Tags” where you can adjust new settings.

Selecting JBoss ToolsWebEditorsEditorsJSF Flow Diagram allows you to specify some aspects of the Diagram mode of the JSF configuration file editor.


The first two items control the background grid for the diagram. The next two items allow you to control the appearance of the labels for views (pages) and the transitions between views. For these two items clicking the Change...button allows you to assign a font with a dialog box.

The first check box determines whether a view in the diagram that doesn't have a transition connecting it to another view yet should be written to the source code as a partial navigation rule. The next check box determines whether the diagram cursor reverts immediately to the standard selection mode after it's used in the transition-drawing mode to draw a transition. Finally the last two check boxes concern shortcuts. A shortcut is a transition that is there but isn't actually displayed in the diagram as going all the way to the target view it's connected to, in order to make the diagram clearer. With the check boxes you can decide whether to display a small shortcut icon as part of the shortcut and also whether to display the target view as a label or not.


Selecting the Add View tab in the JSF Flow Diagram screen allows you to determine the default template and file extension for views (pages) you add directly into the diagram using a context menu or the view-adding mode of the diagram cursor.

To adjust the project specific preferences, you should bring the context menu for your project and select the Properties option. More details on what adjustments you can perform in the Preferences screen, see in the Chapter 9, JBoss Tools Preferences chapter.

Under the Configure option in the context menu there are also several actions provided by JBDS:

  • Add/Remove Struts Capabilities

  • Add/Remove JSF Capabilities

  • Add Custom Capabilities

The Visual Page Editor requires the library libstdc++.so.5. This library is contained in the compat-libstdc++-33.i386 package.

In case you have the library installed and you still have issue with starting the Visual Page Editor then close all browser views/editors and leave one Visual Page Editor open and restart eclipse. This should force a load of the right XULRunner viewer.

If it doesn't help and you use Fedora Core Linux and Eclipse Version: 3.4.1, the issue can be produced because libswt-xulrunner-gtk-3449.so file doesn't present in eclipse-swt-3.4.1-5.fc10.x86_64.rpm/eclipse/plugins/org.eclipse.swt.gtk.linux.x86_64_3.4.1.v3449c.jar. To add this file to eclipse you should:

On the whole, this document should guide you to those parts of JBoss Tools which you specifically need to develop Web Applications. It covers different aspects of visual components such as editors, views, etc. for browsing, representing and editing web resources you are working with.

If there's anything we didn't cover or you can't figure out, please feel free to visit our JBoss Developer Studio Users Forum or JBoss Tools Users Forum to ask questions. There we are also looking for your suggestions and comments.