JBoss.comEnterprise Documentation

Visual Web Tools Reference Guide

Version: 1.1.0.GA

April 2008


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. Templating
3.2.4. Advanced Settings
3.2.5. Page Preview
3.2.6. Setup notes for Linux
3.3. More Editors
3.3.1. Graphical Properties Editor
3.3.2. Graphical TLD 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. JBoss Tools Palette
4.1. Palette Options
4.1.1. Palette Editor
4.1.2. Show/Hide
4.1.3. Import
4.2. Using the Palette
4.2.1. Inserting Tags into a JSP File
4.2.2. Adding Custom JSF Tags to the JBoss Tools Palette
4.3. RichFaces Support
4.3.1. Relevant Resources Links
5. Web Projects View
5.1. Project Organization
5.2. Drag and Drop
5.2.1. For a Property
5.2.2. For Managed Bean Attributes
5.2.3. Navigation Rules
5.2.4. For a Tag Library File Declaration
5.2.5. For JSP Pages
5.3. Developing the Application
5.4. Expanding Tag Library Files
5.5. Drag and Drop Tag Libraries on to JBoss Tools Palette
5.6. Create and Import JSF and Struts Projects
6. JBoss Tools Preferences
6.1. Packaging Archives
6.2. Editors
6.3. Visual Page Editor
6.4. El Variables
6.5. JSF
6.6. JSF Pages
6.7. JSF Project
6.8. JSF Flow Diagram
6.9. Label Decorations
6.10. Seam
6.11. Seam Validator
6.12. Struts
6.13. Struts Automation
6.14. Plug-in Insets
6.15. Resource Insets
6.16. Struts Customization
6.17. Struts Project
6.18. Struts Support
6.19. Struts Pages
6.20. Struts Flow Diagram
6.21. Tiles Diagram
6.22. Verification

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

  • 3rd party plugins bundled and configured

  • access to RHEL and Red Hat Network

  • access to the JBoss/Red Hat supported software

For additional information, please visit the JBoss Developer Studio home page at: http://www.jboss.com/products/devstudio.

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

FeatureBenefitChapter
Visual Page EditorPowerful and customizable visual page editor. Possibility to develop an application using any web technology: jsf, seam, struts, jsp, html and others. Developing using four tabs: visual/source, visual, 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. visual page editor
JBoss Tools PaletteOrganizing 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 controling the number of tag groups shown on the palette. jboss tools palette
Web Projects ViewVisualizing 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. web projects view
OpenOnEasy navigation between views and other parts of your projects. openOn
Content AssistCode completion proposals while working with html, java, JavaScript , xml, jsp, xhtml, xhtml, seam project and jsf configuration files. Content assist based on project data (dynamic code assist); with graphical editor. Code completion for values from property files, beans attributes and methods, navigation rule outcomes and jsf variables. content assist
Drag-and-DropPossibility 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 draging to source code. visual page editor drag-and-drop
RichFaces SupportTight integration between JBDS 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. RichFaces support

JBoss Developer Studio is bundled with 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 had possibility to read about Graphical Editor for JSF and Struts configuration files, Graphical Editor for Tiles Files, Graphical Editor for Struts Validation Files. All these editors have OpenOn and Content Assist features, which are described in more details in this document. In addition you get to know a Visual Page Editor for combined visual and source editing of Web pages and many other editors for different types of files.

JBoss Developer Studio has powerful editor features that help you easily navigate within your application and make use of content and code assist no matter what project file (jsp, xhtml, xml, css, etc...) you are working on.

Content assist is available when working with

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

Here is what you need to do to add project based code assist to a custom component added in JBoss Developer Studio:

Follow these steps to set what is available for code assist:


<AttributeType ...>
       <proposal type="jsfVariables"/>
</AttributeType>

<AttributeType ...>
       <proposal type="bundleProperty"/>
</AttributeType>

<AttributeType ...>
       <proposal type="beanProperty"/>
</AttributeType>

<AttributeType ...>
       <proposal type="beanProperty">
          <param name="type" value="java.lang.Boolean"/>
       </proposal>
</AttributeType>

<AttributeType ...>
       <proposal type="beanMethodBySignature">
          <param name="paramType" value="javax.faces.context.FacesContext"/>
          <param name="paramType" value="javax.faces.component.UIComponent"/>
          <param name="paramType" value="java.lang.Object"/>
          <param name="returnType" value="void"/>
       </proposal>
</AttributeType>

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: JSF, Struts, JSP, HTML and others.

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 shortcuts Ctrl + PageUp/Ctrl + PageDown.


Most web pages use the cascading style sheets (CSS) to control the way they look. With Visual Page Editor you can easily stylise your pages. In this section we are going to introduce you to a powerful mechanism that VPE provides for a complete control over pages styling.

In the left vertical pane of the Visual part there are three buttons: Preferences, Refresh and Page Design Options.


You can find useful one more functionality provided by VPE. At the bottom of the Visual/Source view there is a Selection Tag Bar. It allows to see tags tree for a current component selected in Visual or Source mode.


If you want to hide the Selection Tag Bar, use the button in the form of a red cross on the lower right side. To reset it again you should check the proper option in the VPE Preferences.

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.

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. Now you can do it more faster without additional knowledge.

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 existed tag libraries:

  • HTML

  • JBoss

  • JSF

  • JSTL

  • MyFaces

  • Oracle ADF Faces

  • Struts

  • XHTML


By default the Palette is represented in Web Development Perspective with four groups. If you can't see it, select Window > Show View Other... > JBoss Tools Web > JBoss Tools Palette from the menu bar.

To facilitate your work, you can configure the Palette in your own way, by selecting the corresponding icon on the Palette toolbar.

There is a possibility to configure the JBoss Tools Palette:


JBoss Tools Palette contains existing libraries of tags, thus the Palette editor is intended to work with them or create your new one, as well.

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, every of which is a tag library. The right side of the palette editor is an editing window where it's possible to change values of group or tag library attributes that you've 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 possibilities when working with existing tags or icons:

There are two ways to add any custom or 3rd party tag library to the JBoss Tools Palette:

Before you can add your custom component library, you need to make sure it is included in your project. Either place the ".tld" file or the ".jar" that includes your tag library under the lib folder in your project.

The same you can do with Import button. You can see this button 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. Set the name and prefix of the library and Library URL. Also you need to set the Group name to which you'd like to add your tag library. And 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:


JBoss Developer Studio comes with a tight integration with RichFaces component framework. RichFaces and Ajax4jsf tag libraries in JBoss Tools Palette always exist.


To start using RichFaces components as well as Ajax4jsf ones in JBDS you should first put richfaces-*.jar files into the /lib folder of your project.

Note:

Currant version of JBoss Developer Studio (i. e. 1.1.0GA) includes RichFaces 3.2.2. The JBoss Tools 3.0.0.beta1 comes with RichFaces 3.1.3 and partly support 3.2 version of the component framework. If you need to use the latest version of the component framework you should import it into the Palette like any other custom tag library.

It may be helpful for you to look through the movie which covers a creation of a jsf application with simple content using the 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 Window > Show View > Other > JBoss Tools Web > Web Projects from the menu bar.

With the Web Projects view, you can:

  • Visualize the project better because the project artifacts for JSF and Struts 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

  • Select custom and third-party tag libraries to drag and drop onto the JBoss Tools Palette

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 Window > Preferences > JBoss Tools from the menu bar.


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

JBoss Tools > Web > Editors > Visual 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.


On the Templates tab you can edit or remove VPE templates.


Select a template for editing from the available list and press Edit button. It will pick up the Template dialog where you can adjust new settings.

Select JBoss Tools > Web > JSF > Project to see JSF Project preferences page.

On the New Project tab you can set default values for New JSF Project wizard:

  • Version for setting the default JSF Environment

  • Project Template so as New JSF Project wizard shows this template as default for the chosen JSF Environment

  • Project Root for specifying default location for a new JSF project

    If you check Use Default Path here, this box will be also checked in the New JSF Project wizard.

  • Servlet Version for setting the default Servlet version of a new JSF project

    Here it's also possible to define whether to register Web Context in server.xml while organizing a new project or not. Check the proper box in order to do that.


On the Import Project tab in the JSF Project screen you can determine the default Servlet version for the Import JSF Project wizard and also whether to register Web Context in server.xml or not.


Selecting JBoss Tools > Web > Editors > JSF 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 Page 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.

In summary, this document should guide you to those parts of JBoss Tools which you specifically need to develop Web Applications. It coves 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 Forum to ask questions. There we are also looking for your suggestions and comments.