Visual Web Tools Reference Guide

JBoss Developer Studio provides the following when working with JSF:

JBoss Developer Studio allows you to create brand new JSF projects . A new JSF project will have all JSF libraries, tag libraries and a JSF configuration file.

JBoss Developer Studio comes with a number of predefined project templates. These templates are flexible and easily customizable.

To create a brand new JSF project, select File > New > Project > JBoos Tools Web > JSF > JSF Project and click Next :

Figure 3.10. Choosing a JSF Project

On this form enter Project Name. You can also select where to create the project.

JSF Version allows you to select which JSF implementation to use:

Figure 3.11. Creating a New JSF Project

You can also pick a different template on which to base the project. Almost all templates come in two variations: with jsf libraries and without ones. Some servers already provide jsf libs and you take risk of getting conflicting libraries while deploying your project. So the idea here is to avoid such conflicts. Select a template without libs if you use a server with its own jsf libraries.

Figure 3.12. JSF Templates

The JSFBlank template will create a standard Web project structure with all JSF capabilities.

The JSFKickStart template will create the same standard structure but will also include a sample application that is ready to run.

Figure 3.13. Choosing JSF Template

On the next screen select what Servlet version to use and whether to register this application with JBoss AS (or other server) for running and testing of your application.

Context Path is the name under which the application will be deployed.

The Runtime value tells Eclipse where to find Web libraries in order to build (compile) the project. It is not possible to finish project creation without selecting Runtime. If you don't have any values, select New... to add new Runtime.

Target Server allows you specify whether to deploy the application. The Target Server corresponds to the Runtime value selected above.

If you don't want to deploy the application, uncheck this value:

Figure 3.14. Registering the Project on Server

When you are all done, you should have the project that has been created in the Package Explorer view:

Figure 3.15. A New Project in the Package Explorer

At this point you can open faces-config.xml and start working on your application.

For detailed information on migration projects to JBoss Developer Studio see Migration Guide.

With JBoss Developer Studio you can add JSF capability (JSF libraries, tag libraries) to any existing Eclipse project in your workspace.

By adding JSF capability to your project, you can now edit any file using JBoss Developer Studio editors, such as JSF configuration editor, JBoss Tools JSP editor and any others.

Right click the project and select JBoss Tools > Add JSF Capabilities . This will start the process of adding all necessary libraries, files to make this a Web JSF project:

Figure 3.16. Adding JSF Capabilities

The wizard will first show you the web.xml file location and the project name:

Figure 3.17. Project Location

On the last form you can set the different folders for your project as well as register this application with a servlet container.

Make sure to select Add JSF Libraries for JBoss Developer Studio to add all required JSF related libraries to this project.

Context Path is the name under which the application will be deployed.

The Runtime value tells Eclipse where to find Web libraries in order to build (compile) the project. It is not possible to finish project import without selecting Runtime. If you don't have any values, select New... to add new Runtime.

Target Server allows you specify whether to deploy the application. The Target Server corresponds to the Runtime value selected above.

If you don't want to deploy the application, uncheck this value:

Figure 3.18. Project Folders

Once your project is imported you can see that JSF related libraries have been added to your project jsf-api.jar and jsf-impl.jar.

You are now ready to work with JSF by creating a new JSF configuration file:

Figure 3.19. Creating a New JSF Configuration File

JBoss Developer Studio has a powerful templating capability for creating new and importing existing Struts and JSF projects. This templating facility has a variety of aspects to consider. But, let's start with the most straightforward case.

Let's say you have a project that you want to use as the basis for a new template. Follow these steps to make a template out of it:

Figure 3.20. Saving Your Project as Template

That's it. Now, you can use this template with any new or imported project that uses the same run-time implementation as the project you turned into a template.

The Diagram view displays the navigation rules in the JSF configuration file:

Figure 3.21. Diagram View

To create a new page (view), you can click the page icon on this toolbar and then click anywhere on the diagram. A New Page Wizard will appear.

To create a transition (rule) connecting pages:

A transition will appear between the two pages:

Figure 3.22. Transition Between JSP Pages

It is also possible to create a new page by right-clicking anywhere on the diagram and selecting New View .

Figure 3.23. Creating a New View

To edit an existing transition, first select the transition line. Then, place the mouse cursor over the last black dot (on the target page). The mouse cursor will change to a big +. At this point, drag the line to a new target page:

Figure 3.24. Editing Transition Between Views

The Tree mode for the editor displays all JSF application artifacts referenced in the configuration file in a tree format. Select any node and its properties will appear in the right-hand area:

Figure 3.25. Tree View

To edit, right-click any node and select one of the available actions in the context menu. You can also edit in the properties window to the right:

Figure 3.26. Editing in Tree View

The Source mode for the editor displays a text view of the JSF configuration file. All three viewers are always synchronized, so any changes made in one of the viewers will immediately appear in the others:

Figure 3.27. Source View

Content assist is always available in the Source viewer:

Figure 3.28. Content Assist in Source View

Errors will be reported by JBoss Developer Studio's verification facility:

Figure 3.29. Error Reporting in Source View

Other errors are also reported.

Figure 3.30. Others Errors Reporting

You can also work in the Source viewer with the help of the Outline view . The Outline views show a tree structure of the JSF configuration file. Simply select any element in the Outline view, and it will jump to the same place in the Source viewer.

Figure 3.31. Outline View

If your diagram is large, within Outline view you can switch to a Diagram Navigator mode by selecting the middle icon at the top of the view window. It allows you to easily move around the diagram. Just move the blue area in any direction, and the diagram on the left will also move:

Figure 3.32. Outline View for Diagram

You can also edit in the Tree viewer with the help of the Properties view as shown below:

Figure 3.33. Properties View

JBoss Developer Studio gives you lots of power to work with managed beans.

To start, create a new managed bean in JSF configuration file editor, in the Tree view.

Figure 3.34. Creation of New Managed Bean

When you define a new managed bean, make sure that Generate Source Code is checked as shown in the figure below:

Figure 3.35. New Managed Bean

After the "Java" class has been generated you can open it for additional editing. There are two ways to open the "Java" class:

Figure 3.36. Opening of Created Managed Bean

The generated Java source:

Figure 3.37. Java Source Code

You can also generate source code for properties - this also includes "getter" and "setter" methods:

Figure 3.38. Generation of Source Code for Properties

Make sure that all the check boxes are selected:

Figure 3.39. "Add Property" Form

Once the generation is complete, you can open the file and see the added property with "getter" and "setter" methods:

Figure 3.40. Generated Java Source Code for Property

If you already have a Java bean you can easily add it to a JSF configuration file.

You should start the same way you create a new managed bean. Use Browse... to add your existing Java class.

Figure 3.41. New Managed Bean Form

Once the class is set, it's Name will be set as well. But you can easily substitute it for the other one. Notice that Generate Source Code option is not available as the "Java" class already exists.

After adding your class Next button will be activated. Pressing it you'll get Managed Properties dialog where all corresponding properties are displayed. Check the necessary ones to add them into your JSF Configuration File.

If you don't want to add any, just click Finish .

Figure 3.42. Selection of Bean's Properties.

JBoss Developer Studio provides the following when working with Struts.

JBoss Developer Studio includes a New Struts Project Wizard that radically simplifies the process for getting started with a new Struts project. You just need to follow these 4 steps:

Figure 4.2. Selecting Struts Wizard

Figure 4.3. Creating Struts Project

Figure 4.4. Registering The Project at Server

Figure 4.5. Selecting Tag Libraries

After the project is created, you should have the following project structure (if you used the KickStart template):

Figure 4.6. Project Structure

For detailed information on migration projects to JBoss Developer Studio see Migration Guide.

With JBoss Developer Studio you can add Struts capabilities (including Struts libraries, tag libraries and a Struts configuration file) to any existing Web application project in your Eclipse workspace. By adding a Struts Nature to your project, you can now edit files using JBoss Developer Studio editors, such as the Struts configuration editor and the JBoss Tools JSP editor.

Right-click the project and select JBoss Tools > Add Struts Capabilities from the context menu. This will start the process of adding all necessary libraries and files to make this a Web JSF project.

Figure 4.7. Adding Struts Capabilities

The wizard will first show you the web.xml file location and the project name.

Figure 4.8. Choosing Project Location

After hitting Next, you will see the following screen. This screen simply means that you need to add at least one Struts module to your project to make this project a Struts project. Adding a Struts module means that a new struts-config.xml will be added to your project and registered in the web.xml file. In addition, all required Struts libraries will be added. To add a Struts module, select the Add Struts Support button.

Figure 4.9. Project Modules

Here you can select what Struts version, Servlet class, URL pattern and TLDs to add to this project.

Figure 4.10. Selecting Struts Support Options

When done, you will see the default Struts module configuration information. See how to Edit Struts modules.

Figure 4.11. Project Configuration Information

On the last screen you can set the different folders for your project as well as register this application with a servlet container.

Figure 4.12. Registering the Project at Server

When done, you can open the struts-config.xml file. (The Struts configuration is shown below in the Tree viewer).

Figure 4.13. Struts-config.xml File

The Diagram mode graphically displays the Web flow of the application defined in the Struts configuration file.

Figure 4.14. Diagram Mode

Just by right-clicking anywhere on the diagram, you can use a context menu to create the building blocks of a Struts application:

Figure 4.15. Diagram Context Menu

Along the upper-left side of the editor is a stack of seven icons for changing the behavior of the cursor in the diagram. The first icon switches to the default regular selection cursor, the second to the marquee selection cursor and the third to the new connection cursor. The last four icons switch the cursor to an insert cursor for each type of Struts build block listed above (and in the order listed).

For instance, clicking on the first of these four icons (the one with the gears) will switch the cursor to insert actions. Clicking anywhere in the diagram with this cursor has the same effect as right-click and selecting Add > Action... from the context menu with the regular cursor active. It's just more efficient to use this cursor if you're adding more than one action at once.

Figure 4.16. Insert Actions Cursor

In the Tree mode, the different elements of the Struts application are organized into functional categories on the left-hand side and a form for editing the properties of currently selected items on the right-hand side.

Figure 4.17. Tree Mode

You can also right-click on any node in the category tree and perform appropriate operations through a context menu. For instance, by right-clicking on the action-mappings category node, you can add new actions to the application.

Figure 4.18. Tree Context Menu

In the Source mode, you have complete editing control of the underlying XML coding:

Figure 4.19. Source Mode

You can take advantage of code assist:

Figure 4.20. Code Assist

The editor will also immediately flag any errors:

Figure 4.21. Errors in Source Mode

Finally, you can use the Outline view with the editor to easily navigate through the file:

Figure 4.22. Outline View

To create a new Tiles files, right click any folder and select New > Tiles File.

Figure 4.23. Creating a New Tiles File

In the Tree mode, the different elements of the Tiles file are organized into functional categories on the left-hand side and a form for editing the properties of currently selected items on the right-hand side.

Figure 4.24. Tree View

To edit the file, simply right click any node and select among the available actions:

Figure 4.25. Editing in Tiles Editor

The Diagram mode is shown below:

Figure 4.26. Diagram Mode

To create new definitions, simply right click anywhere in the diagram:

Figure 4.27. Creating New Definition

You can also use the Diagram toolbar to make editing easier:

Figure 4.28. Diagram Toolbar

The Tiles editor also comes with a Source view that gives you full control over the source. Any changes here will immediately appear in other viewers when you switch to them.

Figure 4.29. Source View

Content assist is available in the Source mode:

Figure 4.30. Content Assist in Source Mode

Any errors are immediately reported as shown below:

Figure 4.31. Errors Reporting

You can also use the Outline view together with the editor's Source mode. Selecting any node in the Outline view will jump to that place in the source.

Figure 4.32. Outline View

JBoss Developer Studio supports working with Struts projects that have multiple modules. You can easily do the following:

During Struts project import, if the project has multiple modules, you will see a screen with all existing modules. You can select each module and edit its details.

Figure 4.40. Configuring Project Modules

To edit modules in an existing project, right click the project and select JBoss Tools > Modules Configuration.

Figure 4.41. Choosing Modules Configuration

You will see the same screen as above where you will be able to select a module and edit its details:

Figure 4.42. Modules Configuration

Adding a new module is very simple. First switch to Web Project view. Expand your project to the Configuration folder. Under that folder you should see the current modules. Right click on Configuration and select New > Struts Config.

Figure 4.43. Adding New Modules

You will see the screen below. You can specify a new module name and also add the new Struts configuration file to web.xml file.

Figure 4.44. Adding New Modules

In the Palette Editor window(Figure 5.1. "Palette Editor") we can see that every group contains its own subgroups. For example, JSF includes Core, Facelets, HTML. So, in the Palette every group has the next view: <Group name> <Subgroup name>.

Figure 5.2. JBoss Tools Palette

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

By using Show/Hide button you can add any predefined group of tag libraries. It's also possible to create your own group.

A new tag can be added into any text file including jsp, xhtml и htm(l).

It's very simple to do this. Place the cursor in the JSP page where you want to add a tag and then click the tag in the palette. In the example below, the commandButton tag has been inserted. Notice also that if you place the cursor over any tag, a balloon tip is shown with all the "tag" attributes.

Figure 5.3. Inserting Tag

The cursor position after adding a tag into a file is specified by "|" symbol in the tag template on the right in the Palette Editor window.

Figure 5.4. Palette Editor

Above you can see where the cursor position for HTML/Form/input is set. So, after adding this tag into your file the cursor will be in the attribute "type". Then, you can straight use the combination of buttons Ctrl + Space to inquire about a prompting.

Figure 5.5. Cursor position

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.

Switch to the Web Projects view and expand the Tag Libraries folder. If the view not active, select Window > Show View > Web Projects from the menu bar.

Figure 5.6. Web Projects View

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. You just need to set the Group name to which to add this tag library. You can either add this tag library to an existing Group or just create a new one.

Figure 5.7. Import Tags From TLD File Form

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

Figure 5.8. JBoss Tools Palette with New Tag Library

The same you can do with Import button.

Figure 5.9. Import Button

On this screen you can select Browse to locate the tag library that you want to add.

Figure 5.10. Import Tags From TLD File Form

Now select the TLD file you want to be added:

Figure 5.11. Select TLD File

To edit the Pallete view use Edit button. The Palette Editor provides following possibilities:

Show/Hide is a very useful feature that allows you to control the number of tag groups that are shown on the palette.

Figure 5.20. Show/Hide Button

Figure 5.21. Show/Hide Drawers

Figure 5.22. New Added Groups

The Import button lets you add a custom or 3rd party tag library to JBoss Tools Palette. See here how to add.

Expand the Resources Bundles folder that holds all the Property files in your project. Select the file from which you want to add the property and then select the property.

We will be dragging and dropping a property file value inside the outputText tag for the "value" attribute.

Figure 6.2. OutputText Tag

Select the property:

Figure 6.3. Selecting Property

Drag the property and drop it between the quotes for the value attribute in the JSP file. Notice that JBoss Developer Studio added the correctly formatted expression for referring to the property value: #{Message.header} automatically.

Figure 6.4. Inserted Property

You can actually place the tag anywhere in the page, not just inside an existing tag. In this case, JBoss Developer Studio will place the complete tag <h:outputText value="#{Message.header}"/> in the page.

Select a "managed bean" attribute and then drag and drop it onto the JSP page. We are going to place it inside the "value" attribute of the inputText tag.

Figure 6.5. Selecting Managed Bean Attrubute

Once again, JBoss Developer Studio adds the correct expression, #{user.name}.

Figure 6.6. Added Expression

Select the navigation rule under Configuration > faces-config.xml > Navigation Rules:

Figure 6.7. Selecting Navigation Rule

Drag and drop it inside the commandButton tag:

Figure 6.8. Naviagation Rule in CommandButton Tag

You could do the same if the navigation rule was defined inside an action method:

Figure 6.9. Navigation Rule in Action Method

Here is how it would look after drag and drop:

Figure 6.10. Inserted Navigation Rule

Select a TLD file:

Figure 6.11. Selecting TLD File

Then drag and drop it onto the JSP page to add a declaration at the top of the page:

Figure 6.12. Inserted TLD File

You can also drag and drop a JSP page path to a JSP page to create a forward as shown:

Figure 6.13. Creating JSP Forward

JBoss Developer Studio checks for many different rules for a JSF project that can be configured by selecting Window > Preferences from the menu bar, selecting JBoss Tools > Web > Verification from the Preferences dialog box and then expanding the JSF Rules node.

Figure 7.1. JSF Rules

Suppose you are working in the Source viewer for a JSF configuration file as shown below:

Figure 7.2. Faces-config.xml File

While typing a class name, you might make a minor typo (like "jsfHello.PersonBean9" instead of "jsfHello.PersonBean"). After saving the file, verification checks to make sure everything is correct and finds the error below:

Figure 7.3. Error in Source View

Notice that the Package Explorer View shows a marked folder and a marked file where the error is.

You can place the cursor over the line with an error message and get a detailed error message:

Figure 7.4. Error Message

Verification also checks navigation rules:

Figure 7.5. Checking Navigation Rules

If you provide a page name that does not exist, verification will let you know about that:

Figure 7.6. Page Name Verification

You can always call up verification explicitly by right-clicking any element in the tree and selecting Verify from the context menu. This works from both the Tree and Diagram viewers for the JSF configuration file editor. You can also invoke verification from the Web Projects view. Below we are checking all of the elements in the configuration file.

Figure 7.7. Verify Command

JBoss Developer Studio provides the same functionality for Struts projects. To configure Struts project verification select Window > Preferences from the menu bar, select JBoss Tools > Web > Verification from the Preferences dialog box and then expand the Struts Rules node.

Figure 7.8. Struts Rules

Suppose you are working in the Source viewer for a Struts configuration file as shown below:

Figure 7.9. Struts Configuration File

While typing a class name or entering it from the graphical editor, you might make a minor typo (like "sample.GreetingAction1" instead of "sample.GreetingAction"). After saving the file, verification checks to make sure everything is correct and finds the error below:

Figure 7.10. Error Reporting

Notice that the Package Explorer View shows a marked folder and a marked file where the error is.

You can place the cursor over the line with the error to view a detailed error message:

Figure 7.11. Error Message

The verification also checks to make sure you have specified the correct JSP page for the forward:

Figure 7.12. JSP Page Verification

Once you place the cursor over the line, you can see the error message:

Figure 7.13. Error Message

You can always invoke the verification by switching to the Diagram viewer, right-clicking and selecting Verify from the context menu:

Figure 7.14. Verify Command

OpenOn let's you easily navigate through your project without using the Package Explorer view (project tree). With OpenOn, you can simply click on a reference to another file and that file will be opened.

OpenOn is available for the following files:

8.1.1.1. XML Files

Press and hold down the Ctrl key. As you move the mouse cursor over different file references in the file, they display an underline. When you have the mouse cursor over the name of the file you want to open, click and the file will open in its own editor. In this example the managed bean NameBean will open.

Figure 8.1. NameBean Managed Bean

This is the result of using OpenOn

Figure 8.2. NameBean Java Class

You can also try OpenOn with defined attributes.

Figure 8.3. OpenOn With Defined Attributes

You can also open any JSP pages.

Figure 8.4. JSP Page OpenOn

8.1.1.2. JSP Pages

OpenOn is also very useful in JSP pages. It will allow you to quickly jump to the reference instead of having to hunt around in the project structure.

You can easily open the imported property files.

Figure 8.5. OpenOn With Imported Property Files

Use OpenOn to open a CSS file used with a JSP page:

Figure 8.6. OpenOn With CSS File

Open managed beans:

Figure 8.7. OpenOn With Maneaged Beans

For JSP files in a JSF project, you can also easily open the navigation rules by applying OpenOn to the JSF tag for the navigation outcome:

Figure 8.8. OpenOn With JSF Tag

JBoss Developer Studio offers the flexibility to edit any files in either source or extra visual modes at the same time.

The project is yours and so is the source. JBoss Developer Studio provides you many different graphical editors to speed your application development. At the same time, you always have full control over all project source files. Any changes you make in the source view, will immediately appear in the graphical view.

The JSF configuration file editor has three views: Diagram, Tree and Source. All views are synchronized, you can edit the file in any view.

Figure 8.32. Diagram View

Figure 8.33. Tree View

Figure 8.34. Source View

The same applies to all other JBoss Developer Studio editors.

Web XML editor is shown. Web XML editor has a graphical view (Tree) and source (Source).

Figure 8.35. Tree View

Figure 8.36. Source View

JBoss Developer Studio TLD file editor shown in Tree view. At any point you can edit the source by going switching to Source view.

Figure 8.37. Tree Editor

Figure 8.38. Source Editor

The Struts configuration file editor has three views: Diagram, Tree and Source. All views are synchronized, you can edit the file in any view.

Figure 8.39. Struts Diagram View

Source view. Any changes here will immediately appear in all other views.

Figure 8.40. Struts Source View

Current VPE version has four tabs: Visual/Source, Visual, Source and Preview.

Split screen design with instant synchronization between source and visual views:

Figure 8.41. Visual/Source View

You can also switch to pure Visual design:

Figure 8.42. Visual View

Or work just in Source view. Note that selection bar is now available not only in Visual mode but also in Source one:

Figure 8.43. Source View

No matter what view you select, you get full integration with Properties and Outline views:

Figure 8.44. Properties And Outline Views

Preview mode is read-only, it only shows how the page will look like in a browser.

Figure 8.45. Preview Mode

Use the graphical toolbar to add inline styling to any tag.

Figure 8.46. Graphical Toolbar

With just a click or drag-and-drop insert any tags from the palette on to the page you are editing.

Figure 8.47. Inserting Tags From Palette

8.2.1.1. Advanced Settings

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

Figure 8.48. Visual Page Editor Buttons

• Preferences

Provides quick access to Visual Page Editor preferences.

Figure 8.49. Visual Page Editor Preferences Window

• Refresh

Refresh displaying information with this button.

• Page Design Options

This button leads to page design options.

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

Figure 8.51. Selection Bar

When working in JBoss Tools JSP editor you are constantly provided with feedback and contextual error checking as you type.

JBoss Developer Studio comes with JSP design-time preview features. When designing JSP pages you can easily preview how they will look during runtime. You can even attach your stylesheet to the preview.

JSP preview is available for:

The preview features are available with Visual Page Editor.

The Properties editor allows you to work in two different modes and also supports unicode characters.

To create a new properties file, in the Package Explorer view, select New > Properties File from the right-click context menu on the folder where you want to create the file.

Figure 8.52. Selecting Properties File

You can edit the file using a table-oriented "Properties" viewer:

Figure 8.53. "Properties" Viewer

You can also use a Source viewer for editing the file:

Figure 8.54. Source Viewer

The TLD editor comes with same features you will find in all other JBoss Developer Studio editors:

8.3.2.1. Tree view

Figure 8.55. Tree View

8.3.2.2. Source view

You can easily switch from Tree to Source by selecting the Source tab at the bottom of the editor.

Figure 8.56. Source View

You can easily add a new tag:

Figure 8.57. Adding a New Tag

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

Figure 8.58. Adding a New Attribute

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

Figure 8.59. Content Assist

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.

Figure 8.60. Error Reporting

The Web Application File editor comes with the same features you will find in all other JBoss Developer Studio editors:

8.3.3.1. Tree View

Figure 8.61. Tree View

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

Figure 8.62. Adding New Elements

8.3.3.2. Source View

Switch to the Source viewer to edit the web.xml file by hand at any time:

Figure 8.63. Source View

8.3.3.3. Content Assist

Content assist is available in the Source viewer. Simply click CTRL-Space anywhere in the file.

Figure 8.64. Content Assist

8.3.3.4. Errors Checking and Validation

If errors occur anywhere in the file, small red dots will appear next to the lines where the errors occurred. Also, note that the file is marked by a small x in the Package Explorer view.

Figure 8.65. Errors Reporting

JBoss Developer Studio comes with a visual validation editor. To create a new validation file, right click any folder and select File > Validation File from the context menu.

Figure 8.76. Creating Validation File

The validation editor works through a number of viewers.

The Formsets viewer shows forms and their elements for which to define validation rules:

Figure 8.77. Formsets Viewer

The Constants viewer lets you set constant values for your validation rules:

Figure 8.78. Constants viewer

The validation file also can be viewed in a Tree viewer:

Figure 8.79. Tree Viewer

At any point you have full control over the source by switching to the Source viewer. Any editing in this viewer will immediately be available in the other viewers of this editor.

Figure 8.80. Source Viewer

You can also open your own custom or Struts-standard validation-rules.xml file.

The Validators viewer shows the validation rules for a selected validator. You can of course add your own rules.

Figure 8.81. Validation Rules

Here are the validation rules shown in the Source viewer.

Figure 8.82. Validation Rules in Source Viewer

JBoss Developer Studio bundles a Spring Framework editor from Spring IDE for Eclipse. Visit this site for the latest versions and documentation.

You can add a Spring Project Nature to an existing project by right-clicking on the project and selecting Adding Spring Project Nature from the context menu:

Figure 8.83. Adding Spring Project Nature

If you need to remove it you should select Remove Spring Project Nature from the context menu of your project.

Once the Nature is added, a Spring project will be decorated with a small "S" in the Package Explorer view.

Figure 8.84. Project with Spring Nature

To add a Spring Configuration File with bean definitions open Properties dialog from the context menu of your project. Then select Spring > Beans Support on the left side.

Figure 8.85. Spring Beans

Click on Add button to choose the corresponding Spring Configuration File.

Figure 8.86. Adding Configuration Files

The added file will also be marked by an "S" in the Package Explorer view.

To activate the Spring Explorer view, select Window > Show View... > Other and then Spring > Spring Explorer .

Figure 8.87. Selecting Spring Beans View

This view shows a read-only outline view of the Spring Bean Configuration File.

The CSS editor comes with the same features you will find in all other JBoss Developer Studio editors.

With the CSS (Cascading Style Sheet) editor, you can take advantage of code prompting:

Figure 8.88. CSS Editor

And you can also use the Properties view next to the editor to edit existing stylesheet declaration properties:

Figure 8.89. Properties View

The JavaScript editor includes a Preview viewer and a Source viewer. In the Source viewer, you can use code assist:

Figure 8.90. JavaScript Editor

You can also use the Source viewer with the Outline view to navigate around the file:

Figure 8.91. Source Viewer

JBoss Developer Studio comes with an XSD Editor for XML Schema files. This editor comes from the Web Tools Project (WTP) (see WTP Getting Started).

To create a new XSD file, right-click a folder in the Package Explorer view, select New > Other... from the context menu and then select XML > XML Schema in the dialog box.

Figure 8.92. Creating New XSD file

The XSD Editor includes two viewers for working on the file, a Design viewer and a Source viewer:

Figure 8.93. Source Viewer

In the Design viewer, you can drill down on an element by double-clicking on it:

Figure 8.94. Design Viewer

Various edit options are available when you right-click an element in the diagram:

Figure 8.95. Edit Options

You can also use the Properties view to edit a selected element:

Figure 8.96. Properties View

You can also use a Source viewer for the file. In this viewer, along with direct editing of the source code, you can also edit the file by using the Properties view on the right:

Figure 8.97. Source Viewer

JBoss Developer Studio fully supports XML files based on schemas as well as DTDs:

Figure 8.98. XML File