Introduction
Java Server Faces (JSF) is a widely-used web application framework based on standards and promoted by Sun Microsystems. It provides a high level framework, based on the MVC pattern, which brings several functionalities for simplifying the building of user interfaces of web applications.
also read:
In this article we introduce the Exadel’s IDE and its excellent capabilities for development in JSF. This tool had been released recently as an open source product since its incorporation in the JBoss Group.
Download and Install the software
The software can download from http://www.exadel.com/. As you can check, from that page, there are versions for both operating systems: Windows and Linux.
Installation is very straightforward, provided that it’s shipped with an installer for both platforms. While you are installing the software, you will be asked to point to your Eclipse installation (notice that version 3.2 is required). Then, the installer takes care of plugging the Exadel features in your current Eclipse’s installation.
The sample application
The application that we are building is a login module for a general enterprise application. In this simple scenario, we will develop just three distinct pages to accomplish this functionality: login.jsp, success.jsp, error.jsp . As you already might figured out, the navigation proposed for the application is exemplified in the Figure 1.
Figure 1.
We will implement some business logic that will define the navigation flow chosen by the application for a given user’s input.
Create the project
The first step for building the application, as usual, is to create a JSF project in Exadel. For that matter, you have to select Exadel Studio > JSF > JSF Project (Figure 2).
Figure 2.
The next step should be to create the required JSP files that composed the application. In this line of work, we need to create the following files: login.jsp, success.jsp and error.jsp in the project. Using the New File JSP Wizard, displayed in Figure 3, we can easily create those files by selecting New > JSP File in the Package Explorer .
Figure 3.
Defining the Navegation
At this point, it is reasonable to define the navigations of the site. This task is very straightforward with the Exadel’s Visual Editor for the JSF configuration file ( faces-config.xml) .
To open the Visual Editor we only need to double-click the faces-config.xml and the proper editor will pop-up. At first, an empty diagram should be displayed as we didn’t define anything at this point. First thing we got to do is to drag and drop our JSP files (login.jsp, success.jsp and error.jsp) to the diagram, so we will be able to define the navigation from one file to another. After we drag-and-drop those files, we should see some visualization like the one is presented in Figure 4.
Figure 4.
Suppose we want to define one path of execution from login.jsp to success.jsp. The first thing we do is select the Arrow icon of the vertical toolbar of the Visual Editor. Then we got to select the login.jsp icon (the source page), after that we click on the success.jsp (the target page). In the same manner we define the navigation flow from login.jsp to error.jsp.
Notice that, the outcome expected from the login.jsp, to navigate to success.jsp (or error.jsp), is inferred by Exadel as the name of the target file. The final display should be exactly the same as the one that is shown in Figure 1.
Model: JavaBeans.
As the MVC architecture mandates we got to implement our business logic and data model in separated layers composed of different JavaBean components. The easiest way to define a JSF managed bean is to select the Tree tab of Visual Editor of the faces-config.xml’s file and then click con the Add button. When the New Managed Bean wizard appears we fill it with the appropriate data as shown in Figure 5.
Figure 5.
In this example, we define a JavaBean with the following characteristics:
- Scope: request
- Class: javabeat.net.examples.User
- Name: User
Make sure to check the Generate Source Code option; this way Exadel will generate the appropriate file for us (if it doesn’t exist). After you click the Finish button the managed bean were already included into the project.
Then we add the following properties for the JavaBean, by means of the Add button of the Property panel shown for the bean in the Visual Editor:
| login | java.lang.String |
| Password | java.lang.String |
The code should look like this:
package javabeat.net.examples;
/**
* @author marcelo.giorgi
*
*/
public class User {
private java.lang.String login;
private java.lang.String password;
public User() {
}
public java.lang.String getLogin() {
return login;
}
public void setLogin(java.lang.String login) {
this.login = login;
}
public java.lang.String getPassword() {
return password;
}
public void setPassword(java.lang.String password) {
this.password = password;
}
}
Action of the command
In JSF there are two principal ways for defining the navigation as a result of an user click on a given link (commandLink’s JSF component) or button (commandButton):
- Static outcome . When the navigation is known in compilation time (don’t depends on runtime values) we can simple hard coded the outcome of the action property of a commandLink or commandButton components.
- By means of a bean’s method . Other scenarios, require dynamic information, which may depend on variable factors, the user’s input for example, for these cases we need to implement a method that defines which way to go with the given input.
In our example we based our decision based on the user’s name in the checkLogin method of the User’s bean as we illustrate here:
public String checkLogin(String login, String password) {
String result = "error";
if (userExists(login, password) && userPermission(login, ‘LOGIN_USER’)) {
result = "success";
}
return result;
}
Notice the correspondence between the return values of this method and the navigation rules defined in faces-config.xml. In the next section, we bind this method with the commandButton that whether accept or reject the user’s login.
View: JSP’s edition.
In this section we will focus on the presentation’s component of the application. The main presentation component of this application is the login.jsp page, which we bring into picture by double-clicking in the Navegator View on the login.jsp file. This immediately produces the Visual Editor to be displayed (Figure 6).
Figure 6.
Exadel provides a WYSIWYG Editor for the view components of a JSF application. That means, that we can drag and drop almost any JSF component to our view and configure each of them using wizards. This facility reduces enormously TTM (Time To Market) of our projects because it reduces the coding time and the probability of syntax errors.
In our example, we are going to construct the Login Page display for the login.jsp. We can accomplish this by doing the following:
- Insert a JSF form component to our view . Click on the form item of the JSF HTML panel shown in the Figure 6, and drop it inside the editor. When the wizard of the form appears (Figure 7), change the id attribute of the form with the loginForm value.
Figure 7.
- Introduce the Name label in the form . We are going to implement this label with an outputText component from the JSF HTML panel , which can be done by means of the drag and drop feature. Enter the text ‘Login’ as the value of the outputText component when the wizard of the component shows up.
- Insert an inputText component for the login . This can be done in an analogous way as step 2, the slightly difference is that we drag and drop an inputText instead of an outputText. We change the id attribute of the component with the ‘inputLogin’ value, we can do that by selecting the Attribute ‘s tab of the Wizard. It is important to associate the value attribute to the login property of the managed bean we defined earlier, by doing this we would be able to use this value in any page of the application for the time the request lives. To define this correlation we select the button on the right of the value’s attribute name with label ‘ … ‘. This would bring up the Wizard illustrated in the Figure 8. In this wizard we select the login item that is a sub-element of the Managed Bean called ‘user’. As you might expect we can associate any Bean property using this dialog with the selected outputText, as well as any JSF Variable (like cookies, session attributes, etc.).
Figure 8.
- Introduce the Password label in the form . This component can be inserted in an analogous way as step 2. Enter the text ‘Password’ as the value of the outputText component.
- Introduce an inputSecret component from the JSF HTML panel . When we have to handle some kind of secret input from the user, usually a user’s password, we got to use the inputSecret component. To include such a component into the view, we drag it to the editor in the same way we did for the previous components. We change the id attribute of the component with this value: ‘inputPassword’.
- Using commandButton component . At this point the only thing that is left is some kind of button that enable us to either validate or not the login action of a given user. The commandButton is the JSF component that we are requiring for this functionality, so we drag it into the editor as we did in the previous steps. This time, we set the value of the component to ‘Log in!’. Remember, that we implement the business logic for the user’s login action in the checkLogin method of the user managed bean, so we can bind it to the button by setting the action attribute with the following value: #{user.checkLogin}.
At the end of the day, the final jsp code should look like this:
<table> <tbody> <tr> <td></td> </tr> <tr> <td></td> </tr> </tbody> </table>
This is it for our main page!. Now, we got to modify the success.jsp and error.jsp. In this article we will show the implementation of the former of those pages, the latter is almost identical from a technical point of view so we leave it to you for give your own implementation ;).
Follow these steps to implement the success.jsp page, which is displayed after the user successfully logs in:
- First of all we double-click the success.jsp file.
- Then we drag and drop an outputText as we had been doing, and set the value attribute to ‘#{user.login}’. As we explained above, this associates the outputText component to the login property of the user’s managed bean.
Then, the finished implementation of this view should look like this:
are successfully logged in!!
Up and running!
One requirement that we must fulfill is to include an index.jsp page that redirects our non-Faces request to our login.jsp page as a Faces request, in this way we make sure that all the JSF objects are correctly initialized. To achieve this we can use the New > JSP File wizard in a similar manner as we already did for the other jsp’s files, but this time using the JSPRedirect template (Figure 10).
Figure 10.
Then we got to complete the page attribute of the jsp:forward element in the index.jsp with the value of ‘login.jsf’. Those, the code should look like this:
To see the results of what we were being doing in this article, we have to configure web.xml file so that the index.jsp file belongs to the welcome-file-list.
Figure 11.
This can be done manually, as you probably had done many times, or using the Web XML Editor that Exadel provides, as shown in Figure 11.
Figure 12.
After that we can right click in the project and select Run on Server and the application would be executed within the Exadel virtual machine. Figure 12 illustrates the login’s form (on the left) and how the application should look like when the user successfully completes the login process (the right image).
Conclusion
This article shows how easy is to implement a JSF application using Exadel IDE. The release of this development tool as open source represents excellent news for the Java community. It is very important because JSF is not just another way of implementing the MVC pattern in our projects; rather it is a Java standard that influences the way IDEs evolves. Exadel’s implementation of JSF currently supports Ajax development as a clear example of the adoption of the emerging technologies. Building our applications based on standards guarantees that we keep our solutions on the leading wave of technology.
Sample Application for Java Persistence API (JPA)