JSF / ADF Faces For Dummies

August 1st, 2007

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

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.

4 Comments

Filed under tutorial

July 24th, 2007

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

In the end of the last session, we have created a blank JSF page (.jspx) . In this session, we will add a simple login form to the page and try to test it in the web browser.

JSF programming is about drag&drop. So the first step we need to d is to open the “Component Palette” on the right side and select the “ADF Faces Core” component group from the drop down list. (”ADF Faces Core” components are the main components you will be using when you build a ADF Faces application)

Find the “OutputFormatted” components from the list of components under “ADF Faces Core”, drag and drop this component onto our blank JSF page. The “OutputFormatted” component is used to create some free-text on the page.

Then we change the text in shown by the component by changing its properties in the property pane.

First we change the “title” property to “Login Into Hello World”, then we expand the “inlineStyle” proper to tweak a little bit on the font color and size as show here. The changes will be seen in the WSYIWSG editor immediately.

Next, we will create the login form which includes the user id and password input control and a submit button. To layout these controls on the page, we will use another JSF component - PanelForm.
There are quite a lot of components in JSF and ADF Faces which are called PanelXXXX, like PanelForm, PanelPage, PanelGroup. These components are all used to help the designer layout other visual components, like button or input box, on the JSF page. Remember, JSF programming is more like the traditional Delphi and Java Swing programming, where you create a page layout by using Panels or Canvas components, instead of HTML

The PanelForm is a layout component which will place its children components in the way we usually see in a HTML form (vertically aligned). After you drag&drop the PanelForm into your page, you will see a box has been created for you. Then, we will drag&drop a InputText component right into the box. The InputText in JSF is a little different from the HTML Input field, it actually goes with a Label in front of the text input box.

Then we need to add another InputText for password. This time we still use drag&drop, but we will not drop it onto the page. I will show you another way to add a component to a page.
On the left side of the editor, you should see a pane window called “Structure”. If you cannot see it, you just find it in the “View” main menu. The “Structure” window gives a hierachy view of the file you are currently editing.
For the login.jspx file, you can see there is already a PanelForm and an InputText in the Structure window. What we will do is drag&drop another InputText into the Structure window right below the first InputText within the PanelForm, so it become another child of PanelForm.

After the drag&drop, you will see another InputText is added. It’s the same as drop onto the page but it more acurrately controlled.

Then we make some changes to the two InputText’s properties to change the Label and make the password input hide the actuall text.

Now we have the input fields, what needed next is just a submit button. The button control in ADF Faces is called “CommandButton”. We will drag&drop it onto the page. But this time we will drop it in the little rectangle place which says “footer”.
The footer is a built-in Facet of the PanelForm. A Facet is nothing but just a placeholder in a component. PanelForm has one Facet called “footer”. Anything you put into this “footer” will be shown at the bottom of the PanelForm when it’s rendered at runtime. Many components have built-in Facet, so the developer will know where to put child components inside a complex component so they will look nicely fit.

Let’s change the CommandButton’s text property.

All right, we are done with the creation of the page for Hello World Login page. Let’s have a test…
Right-click on the page, on the context menu choose the “Run”. It will start the Jdeveloper embedded OC4J J2EE appserver and open your page’s URL in the browser.

Now you see what you got for the first-cut of your ADF Faces application. Though there is not much logic in the page, you still can see it is already working when you click on the Login button, just the page return to itself after submit.

2 Comments

Filed under tutorial

July 17th, 2007

ADF Faces for Dummies - 2.1: Create Your Hello World App

Alright, Let the game begin.

In this lesson, you will see how to create a JSF Hello World Login page using JDeveloper and ADF Faces.

Open you JDeveloper and Create a new Application as below.

In the “Create Application Dialog”, set the application’s properties as the following

The created new “HelloWorld” application will look like this. It has two Projects: “Model” and “ViewController”, which are automatically created for you by JDev when you choose the Web Application template in last step.