What's new in JavaServer Faces tooling in IBM Rational Application Developer Version 7.5

This article highlights the most important new features for JavaServer Faces support in IBM Rational Application Developer Version 7.5.

Share:

Yury Kats (ykats@us.ibm.com), Advisory Software Engineer, IBM

Yury Kats is a developer in the IBM Rational Application Developer team, working on JSF implementation, components, and tooling.



26 September 2008

Also available in Chinese Russian

Support for JavaServer Faces (JSF) technology has been one of the cornerstone features of IBM Rational Application Developer for several years. As an integrated development environment (IDE), Rational Application Developer offers Web developers a lot of support in creating JSF applications through its tooling features and an extensive set of JSF components.

The new release of Rational Application Developer, Version 7.5, continues this tradition by adding features to make JSF development even easier and faster than before. This article highlights the most important and noteworthy new features.

Generic JSF component libraries

This is arguably the most important and most desirable addition to the Rational Application Developer JSF feature set. Although  Rational Application Developer provides an extensive library of JSF components developed by IBM, a lot of developers expressed their desire to be able to use other component libraries, such as MyFaces Tomahawk, MyFaces Trinidad or JBoss RichFaces.

Although it was always possible to use any component library in a Web application, the experience was limited to manually editing JavaServer Pages (JSP) and XML files in source mode. It was very difficult to make  Rational Application Developer aware of third-party JSF component libraries so that components would appear on the palette, render in the Design view, be supported by Properties and Quick Edit views and, overall, become part of the integrated development environment on par with IBM's own JSF components.

Not any more. With V7.5, developers can provide metadata about a generic component library, and the tooling will recognize such libraries and make them part of the IDE. The metadata can be created by using a wizard and simply pointing to a library Java archive (JAR) file, then you can edit it with a specialized editor and share with other developers.

You begin by creating a new Faces library definition and pointing to the JAR file that contains the library (anywhere on your file system or in the current workspace).

For example, to make  Rational Application Developer support a MyFaces Tomahawk library, you would download the Tomahawk JAR file from the MyFaces site and then use it to create a library definition by selecting File > New > Other > Faces library definition to bring up the wizard and point it to the Tomahawk JAR (see Figure 1).

Figure 1. Create a JavaServer Faces library definition
Create a JavaServer Faces library

When you click Finish in the wizard,  Rational Application Developer will analyze the JAR to find out what JSF components it contains, what the components’ attributes are, and any other information that can be gathered about a library from a JAR file. All of this data will be stored in a JSF library definition (JLD) file, and the file will be opened in the editor so that you can tweak and customize it to your liking (see Figure 2). Of course, you don’t have to make all if the changes right away, because you can always open and edit the JLD file to provide additional information about the library.

Figure 2. Library definition editor
Library

There is quite a lot of information about the library that you can provide to  Rational Application Developer. Here is just a snippet of what you have control over:

  • Palette. What components appear on the palette and how they appear, including order, images, and labels. When the library definition is first created from a JAR file, all components found in the JAR are visible on the palette.
  • Component attributes. The type of each attribute can be specified so that  Rational Application Developer knows what values are correct for a given attribute and what helper dialogs to offer you when editing an attribute’s value. When the library definition is first created from a JAR file, many standard JSF attributes (such as ID, value, rendered) will be automatically and properly typed.
  • Component visualization in the Design view. The Page Designer in  Rational Application Developer will try to automatically render any JSF component in the Design view by invoking the component's renderer. Although it may work for fairly simple components, such as inputText, it's likely to fail for more advanced components simply because rendering code for them is complex and depends on artifacts not available at design time (such as JavaScript libraries or data connections). For such components, you can provide HTML snippets to be used as design-time visualization rather than  running the renderer.
  • Resources. Many JSF components require additional resources to be added to the page or to the application. These resources typically include JavaScript and CSS files, updates to applications' Web.xml and faces-config.xml files, or additional JARs that are required by the library at runtime.

After a library definition is created and saved in the workspace, Rational Application Developer becomes aware of the new component library, and the new components can be used everywhere in the IDE where IBM components can be used: the palette (see Figure 3), Design view (see Figure 4), Properties view, Quick Edit view, Data binding.

Figure 3. Component libraries In the palette view
Component libraries
Figure 4. Design-time visualization
visualization

Custom JSF components

It's great to be able to use all different JSF component libraries available today, isn't it? But what if none of them contain the component that you need? Create your own! Too complicated? Not so with Rational Application Developer V7.5. This new version makes it very easy to create your own JSF components from  existing ones, whether you want to create a new component or you've found that you use a number of simple components over and over again (for example, to input information about a person).

Creating a new JSF component in Rational Application Developer is very similar to developing a regular Web page. In fact, a Faces Componet Library project is just a flavor of a Web project, and a custom component is developed as a regular JSP. You have all of the familiar tools available to you. You can drag existing JSF components from the palette, bind them to data using the Page Data view, tweak their behavior by using the Properties view, and script events by using Quick Edit view.

Whenever your custom component changes, Rational Application Developer will notice the change and automatically generate Java files that constitute a JSF component (for example, component and tag classes) and XML files to hold component and library configurations (faces-config.xml and TLD). Then, all generated artifacts will be packaged into a single JAR that is ready to share with other developers and use in any Faces Web application.

You start creating a Component Library by selecting File > New > Project > Faces Component Library Project menu. The wizard that appears (Figure 5) is the same wizard that is already familiar to you from creating a Web project, except that  it uses a special configuration.

Figure 5. The new Faces Component Library wizard
The new Faces Component

A Component Library contains JSF components (as many as you want). The way that you create a new component is similar to creating a new Web page. Just select New >Faces Custom Component (Figure 6).

Figure 6. Creating a new Faces component
Creating a new component

After the component is created, you can configure its properties, such as name, type, and list of attributes and then add and configure existing JSF components from the palette.

For example, if you noticed that you often have input fields on your pages to enter people’s names and ages, you might create a new component called "person" so that, rather than replicating the same tags over and over on multiple pages, you can use just one tag. Such a component could have 3 specific attributes (for first name, last name, and date of birth) and 3 input fields, laid out in a grid.

Figure 7 shows how the source of the component could look, how it is visualized in the Design view, and the properties available in the Properties view. Notice all of the usual and familiar JSF tags used to create this new component.

Figure 7. "Person" component defined
The new component defined

After you have finished and save the page that contains your component, Rational Application Developer will generate Java and XML files and package them in a JAR file. It will also create a simple test page in the same library project so that you can easily test your component's rendering and behavior in action at run time.

You and other developers can use the resulting Component Library in Rational Application Developer, as described in the previous section, Generic JSF component libraries. Figure 8 shows the new component on the palette, added to the JSP source, visualized in the Design view, and with all attributes available in Properties view. Notice how a dozen JSF tags used in the source code shown in Figure 7 became just one <fc:person> tag.

Figure 8. The new Person component used in an application
Using the new component

Generation templates

Another great improvement in Rational Application Developer V7.5 is the ability to easily customize what JSF tags get generated when data objects are added to a page. Whenever you drop a data object from the palette, the Page Data view,  or any other source, Rational Application Developer analyzes the object's data type and offers you a list of JSF controls that could be generated for the given object.

For example, if you were to drop a byte array onto the page, Rational Application Developer would ask whether you want the array to be used with an Image, Link, or File Upload component (see Figure 9). After you made a choice, several JSF tags would be added to the page according to the selection that you made in the wizard.

Figure 9. Adding a byte array object
An array object

Rational Application Developer is usually pretty good at guessing what kinds of JSF controls make sense and generating robust and efficient code into JSPs. But what if you don't quite like the choices that Rational Application Developer offers or the tags that it generates? What if you just added support for a new Component Library (see previous sections), and now want Rational Application Developer to use the new components when you drop data to the page? That’s where the new Generation templates come into play.

In the past, code generation for data drops was based on templates; however, the templates were quite complicated, difficult to understand, and hard to change. They weren't available anywhere in the Rational Application Developer UI. In the new release, this is changed. All templates for generating JSF code are now available in Preferences and use simplified JSP-like syntax. Go to the Window > Preferences menu and select Web > JavaServer Faces Tools > Generation Templates to see the list of available templates (see Figure 10).

Figure 10. Generation templates

There are three types of templates:

  • Data for simple data types, such as sttring, Boolean, integer, date, and so on
  • Iterative for collection types, such as arrays and lists
  • Method for Java methods

Each template is associated with a Java type, has a name that appears in the wizard (see Figure 9), can be used in either input or output mode, and is described in a JSP-like syntax by providing tags that are generated when a template is used, with variables to customize the tags' attributes.

Iterative templates that are associated with collection types such as arrays and lists (see Figure 11) specify both the wrapper tag (for example, a <dataTable>) and the iterative tag (for example, a <column>).

Figure 11. Iterative template
Sample iterative template

Rational Application Developer includes a large number of Generation templates for most standard Java types and for using standard and IBM JSF components. You can now easily edit these templates or create your own by using the Preferences UI. You can also export and import templates to share them among developers.

Last but not least, Generation templates can also be specified as part of a library definition (see previous section). If you provide metadata for a new component library as described earlier, you can also create Generation templates that use components in that library. For example, if you were creating a library definition for MyFaces Tomahawk, you could create a generation template for the java.util.Date Java type and leverage Tomahawk's <t:inputDate> component.


Design-time validation

Design-time validation is a powerful tool to find bugs and potential problems with your Web application without deploying to the server and debugging. Rational Application Developer V7.5 significantly extends the JSF validation capabilities, as compared to previous versions. It can now validate JSF expressions, check data types, link JSF tags with JSF configuration files, and much more.

Figure 12 shows a few examples of what Rational Application Developer now warns you about in a JSF page:

  • The first <commandButton> tag uses a navigation outcome of "success," but there is no corresponding navigation rule in the faces-config.xml file.
  • The second <commandButton> uses a method of a bean as its action, but the "config" managed bean does not have a method named "outcome."
  • The <inputText> is bound to a java.util.Date object but does not use a converter.

All three issues would lead to a serious problem at runtime once the application is deployed to a server. Thanks to the validation warnings, you can catch such issues early and fix them.

Figure 12. New validation capabilities
Validation capabilities
Figure 13. Validation preferences
The new JSF validation preferences

The new JSF validation is not only very powerful; it's also easily customizable through the Preferences tab in the UI (see Figure 13). You will find numerous validation settings by selecting Web > JavaServer Faces Tools > Validation in Preferences.

Be aware, however, that it's not always possible for Rational Application Developer to correctly evaluate and validate JSF EL expressions at design time, especially if expressions are complex or use data objects with types not known at design time. Therefore, it is possible that Rational Application Developer might generate warnings for expressions that are perfectly fine. If that happens, you can either ignore the warning or tweak your validation preferences to make Rational Application Developer ignore a particular validation rule.


The last two features highlighted in this article will be appreciated by developers who prefer to work directly with JSP source code, not with the visual representation of the page. Rational Application Developer V7.5 brings two major improvements into JSF source editing: Content Assist and hyperlinks.

Content Assist will be familiar to any Java or JSP developer. Here's how it works: Whenever you want Rational Application Developer to make a suggestion about the code that you type, you can press Ctrl+Space and choose a Java method name, JSP tag, or anything else applicable to your current context, without remembering and typing all of the code yourself.

When working with JSPs in Rational Application Developer V7.5, Content Assist is "aware of" your JSF environment and can suggest managed bean names (see Figure 14), properties, and methods, as well as attribute values (see Figure 15).

Figure 14. Content AssistAssist for JSF expression
A JSF expression
Figure 15. Content Assist response for a JSF attribute
Response for a JSF attribute

Another source code editing helper that you might be familiar with from working with Rational Application Developer or Eclipse is hyperlinks. When you hover the mouse cursor over a fragment of your code while holding down the Ctrl key on the keyboard, that fragment of the code can turn into a hyperlink. When you click the link, you go to the area of your project where the clicked fragment is defined. Many Java developers use this technique to navigate between methods in Java classes.

In this version,  you can use the same great time-saver to navigate between JSF artifacts. Rational Application Developer editors are aware of the JSF context that you are in and can bring you directly from a JSP to a Java class or from a faces-config.xml file to a JSP with just one click of your mouse button.

Figure 16 shows two examples of using hyperlinks in a JSF application.

Figure 16. Hyperlinks
Using hyperlinks in a JSF application

When you use Ctrl+click on the name of a managed bean (config) in the JSP source code, you are taken into the faces-config.xml file where this managed bean is defined. When you use Ctrl+click on a method of the bean (doAction), you get to the Java editor for the class where that method is defined.

Resources

Learn

Get products and technologies

Discuss

Comments

developerWorks: Sign in

Required fields are indicated with an asterisk (*).


Need an IBM ID?
Forgot your IBM ID?


Forgot your password?
Change your password

By clicking Submit, you agree to the developerWorks terms of use.

 


The first time you sign into developerWorks, a profile is created for you. Information in your profile (your name, country/region, and company name) is displayed to the public and will accompany any content you post, unless you opt to hide your company name. You may update your IBM account at any time.

All information submitted is secure.

Choose your display name



The first time you sign in to developerWorks, a profile is created for you, so you need to choose a display name. Your display name accompanies the content you post on developerWorks.

Please choose a display name between 3-31 characters. Your display name must be unique in the developerWorks community and should not be your email address for privacy reasons.

Required fields are indicated with an asterisk (*).

(Must be between 3 – 31 characters.)

By clicking Submit, you agree to the developerWorks terms of use.

 


All information submitted is secure.

Dig deeper into Rational software on developerWorks


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=1
Zone=Rational
ArticleID=339333
ArticleTitle=What's new in JavaServer Faces tooling in IBM Rational Application Developer Version 7.5
publish-date=09262008