Wednesday, August 1st, 2007...12:34 am

ADF Faces for Dummies - 2.3: Create Your Hello World App (Continued)

Jump to Comments

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.

  • Let’s bring out our JDev and open the login.jspx JSF page we created in last session. On the page, there is a “Login” button.

    • 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.

  • To validate the inputted user id and pasword, we will add some logic into the “LoginBackingBean”.First, let’s add two String fields to receive the input from the JSF page. Create 2 String fields by inputing this hightlight code into the “LoginBackingBean”. They are used to store the userid and password from the JSF page.

    • 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.

  • Next, we are moving into the hardcore of this session. We will code the logic to validate user’s id and password. This logic will be placed in the “loginButton_action()” method of the “LoginBackingBean” class. So when user click the Login button to login, this piece of code will check to see if the user’s id and password is valid.

    • 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).

  • Well, we finished the coding for validating user login. But remember we made one assumption on the way: we assume that in the “loginButton_action()” method we have user login inputted userid and password already stored in the “userName” and “password” property of “LoginBackingBean”.

    • 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.
  • All right, that’s all the changes we need to make this time. We can now give a go to our new HelloWorld application.
    As usual, Right-click on the login.jspx, choose the “Run” menu item.

    • 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.

    1618 Comments

    Filed under tutorial

    1618 Comments

    Leave a Reply