As an example, let's create two pages named register.jsp and success.jsp. Usually, you would have had to edit these files by hand to describe the pages flow, but using Diagram view features, we can do it visually. For this, you have to apply the following steps:

Now, it is time to connect the two pages by creating a transition (navigation rule) from register.jsp to success.jsp. To do this, follow these steps:

A very powerful facility of the Tree view is the support for managed beans. Now, we can create, modify, and delete managed beans without touching the source code. Next, you will see how to create beans properties, how to create getter and setter methods, and how to obtain the generated source code in just a few steps.

As you have seen in the introduction of this chapter, we want to develop a registration form (register.jsp) with four fields representing name (java.lang.String), age (int), birth date (java.util.Date), and phone number (register.PhoneNumber) of the user. Each of these fields can be encapsulated as a property of a managed bean that can be developed by following these steps:

Now that we have created the managed bean stub, it is time to create the bean's properties. For doing this, you can follow these steps:

An interesting aspect is represented by the Your Phone Number field, because this field is mapped to another managed bean named register.PhoneNumber. This managed bean has three properties used for extracting from the inserted phone number, the country code (countryCode property), area code (areaCode property), prefix number (prefixNumber property), and a property for keeping the entire phone number (allNumber property). These four properties are all strings (java.lang.String). Now, use what you have learnt so far to create this managed bean with JSF Tools (for alias name, use the phoneNumber text).

In the end, you should have the two managed beans as shown in the following three screenshots:

Finally, save the project state by selecting the Save option from the File main menu.

If you want to see the generated code source for our beans, you can double-click the Managed-Bean-Class link that appears in the right panel of the Tree view when you select a bean from the left panel of the same view (as shown in the following screenshot).

You can also open a bean from the Package Explorer view by expanding the project node and double-clicking on the bean's name.

Creating and registering a custom converter is a very elegant method for accomplishing conversion issues that can't be resolved by JSF default converters. For example, in our registration form, we need the following conversions:

Now, creating a custom converter can be done like this:

Edit the converter-generated source code by clicking on the Converter-Class link that appears in the right panel of the Tree view (as shown in the following screenshot):

Note that you have to manually insert the behavior of the getAsObject and getAsString methods. For example, we convert the inserted phone number into a register.PhoneNumber object by adding the following code to these methods:

import java.util.StringTokenizer;
...
public Object getAsObject(FacesContext arg0, UIComponent arg1, String arg2) {
// TODO Auto-generated method stub
System.out.println("//getAsObject method//");
StringTokenizer st = new StringTokenizer(arg2,"-");
PhoneNumber pn = new PhoneNumber();
try{
pn.setAllNumber(arg2);
pn.setCountryCode(st.nextToken());
pn.setAreaCode(st.nextToken());
pn.setPrefixNumber(st.nextToken());
}catch (Exception e){ return pn; }
return pn;
}
public String getAsString(FacesContext arg0, UIComponent arg1, Object arg2) {
// TODO Auto-generated method stub
System.out.println("//getAsString method//");
if(arg2 != null)
{
String value = ((PhoneNumber)arg2).getAllNumber();
return value;
}
return "";
}

Finally, save the project state by selecting the Save option from the File main menu.

When JSF default validators don't satisfy your application's needs, it is time to implement a custom validator. For example, for our registration form, we have the following situation:

Now, creating a custom validator can be done like this:

Edit the validator-generated source code by clicking on the Validator-Class link that appears in the right panel of the Tree view as shown in the following screenshot:

Notice that you have to manually insert the behavior of the validate method. For example, we validate the inserted phone number by adding the following code to this method:

import javax.faces.application.FacesMessage;
tree view, JSF application configuration filecustom validators, creatingimport java.util.regex.Matcher;
import java.util.regex.Pattern;
...
public void validate(FacesContext arg0, UIComponent arg1, Object arg2)
throws ValidatorException {
// TODO Auto-generated method stub
System.out.println("//validate method//");
String value = ((PhoneNumber)arg2).getAllNumber();
String countryCode = "^[0-9]{1,2}";
String areaCode = "( |-|\\(){1}[0-9]{3}( |-|\\)){1}";
String prefixNumber = "( |-)?[0-9]{3}";
String number = "( |-)[0-9]{4}$";
Pattern mask = Pattern.compile(countryCode + areaCode +
prefixNumber + number);
Matcher matcher = mask.matcher(value);
if (!matcher.find()){
FacesMessage message = new FacesMessage();
message.setDetail("Your phone number is not valid!");
message.setSummary("Your phone number is not valid!");
message.setSeverity(FacesMessage.SEVERITY_ERROR);
throw new ValidatorException(message);
}
}

Finally, save the project state by selecting the Save option from the File main menu.