JSF / ADF Faces For Dummies

Last session, we have added a simple login form to our JSF page. In this session, we will add some business logic to the form to make it work like a real login page.

Now this button has no real business connected with it, we will try adding some user id/password checking function to this button.To add a function to a button, we can Doubleclick on the button to bring out a “Bind Action Property” diaglog box.

In JSF (also in ADF Faces), the “CommandButton” component has a property called “Action”. The value of this “Action” property will point a method in a class. When the button on the JSF page is clicked, this method will be called by the JSF (ADF Faces) framework.The “Bind Action Property” dialog box is just used to specify which class and method will be put in the “Action” property of the button and be invoked when the button clicked. (Method Binding)

First, we will specify the “Class”. Click the “New…” button to create a “Managed Bean”.

A “Managed Bean” is just a normal Java Bean. The reason it’s “managed” is that the bean is instantiated by the JSF(ADF Faces) framework, instead of by your program. And it’s instantiated when the user clicks on the button. A normal Java Bean has to be declared as a “Managed Bean” in a xml file called faces-config.xml under /WEB-INF. We will talk about this xml file later.

The “Create Managed Bean” dialog box allows you declare a Java Class as a managed bean. If the Java Class is not there yet, Jdev can generate the .java source file fo you.

Here in our HelloWorld Login page, we will create a managed bean called “login_backingbean” with its class file as: “com.dummies.LoginBackingBean”.

In the “Scope” property, we will just leave it as “request”. This means that when the ADF Faces framework instantiate the bean, the bean will be put into the current HTTP Request object as an attribute. So when the current request is finished, the bean will be destroyed with the Request object. If you want to continute using the bean after this request, you will then define the “Scope” as “session”.

Click “OK”, you are back to the “Bind Action Proerty” dialog box,

A Java class has been created for you. In the new Java class, a method called “loginButton_action()” is also created. It’s obvious this method is used as the action method for the Login button. So you select the “loginButton_action” in the “Method” dropdown box.

Click “OK”, then you finished declaring the action for the Login button. Let’s see what we got here:

We can see that a new Java class file “LoginBackingBean” has been created. In this class, there is also a method generated “loginButton_action()”. This is the button-click event handling method. But nothing is here yet.

Since LoginBackingBean is a Java bean, we also need to create the setter and getter methods for the 2 fields. JDev has the code generation function which we can use to generate the accessor methods.We just right-click in the editor. In the context menu, choose “Generate Accessor”.

In the popup dialog box choose the userName and password accessor methods to generate.

As the result, the following accessor methods are generated in the “LoginBackingBean” class.

Here is the code for validating user:

FacesMessage msg = null;

if ("dummy".equals(userName) && "welcome".equals(password))
    msg = new FacesMessage("Welcome dummy, you are in.");
else
    msg = new FacesMessage("Sorry, invalid user and password.");

FacesContext facesContext = FacesContext.getCurrentInstance();

facesContext.addMessage(null, msg);

return null;

To understand the code, we need to make one assumption here. That is we need to assume that when the program comes into this method, the “userName” and “password” proerty of LoginBackingBean have already had the value of the user inputted userid and password. (We will come to the part where we make this happen shortly.)

So in this piece of simple code, we hard-coded to check that if the inputted userid is “dummy” and passowrd is “welcome”. If they are, we will create a welcome message to show to the user later using a FaceMessage class. Otherwise, we will create a invalid-user-password message. Then we save the new FacesMessage instance into the FacesContext instance using the addMessage method of FacesContext. You can think of the FacesContext as the HttpServletRequest object in servlet world. We just use it to pass around objects from controller layer (LoginBackingBean) to view layer (login.jspx).

But how can we get this to happen in realtime?

Ok, let’s open the “login.jspx” file again.On the “login.jspx”, use the mouse pointer to select the “User” InputText component. On the right side of the JDev, open the “Property Inspector” pane (if it’s not there, find it under the “View” main menu). The “Property Inspector” pane lists all the properties available for editing for “User” InputText component.

Among all the properties for InputText, there is a “Value” property. Change the “Value” property to #{login_backingbean.userName}. What this mean is that the InpuText control’s text (or value) is first put into and later retrieved from the userName attribute (getUserName()/setUserName() methods precisely) of the login_backingbean (LoginBackingBean.java).

We will do the same for the password InputText control. In doing this, we connected the value of the InputText controls on the JSF page on the client-side with attributes from the ManagedBean on the server-side. Thus, when we click the Login button, the user and password we inputted on the Login page will be passed into the LoginBackingBean’s userName and password attributes. And later, when the control return from ManagedBean to the JSF page, the JSF will use the attributes of LoginBackingBean to display the text in the input boxes.

The last thing left is to show a message in the login.jspx page when user submit the login and the control come back to the JSF page.
Drag&drop the Messages component from the “ADF Faces Core” palette onto the header part of the Login.jspx page.
ADF Faces Messages is a component for displaying all kind of messages on page. When it’s rendered, it will check into the current FacesContext to see if there is any FacesMessage instance in it. If so, it will display the FacesMessage in the format you specified. Since we put some messages in the loginButton_action() method, we should expect to see some after login.

The JDev will open Login page in your browser automatically.

First, let’s try to input a wrong user name and password and submit.

The page return back to itself with the “Invalidate user name and password” message, which we added in the LoginBackingBean.java, remember?

Then, try input the “dummy” as the user and “password” as password and submit.

The page still return back to itself, but this time with the welcome message. That proves our login code is working correctly.