JSF / ADF Faces For Dummies

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

Roosevelt Lai — Wed, 01 Aug 2007 06:34:59 +0000

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.

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

Roosevelt Lai — Tue, 24 Jul 2007 07:39:26 +0000

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.

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

Roosevelt Lai — Tue, 17 Jul 2007 11:50:14 +0000

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.

Then we will create a JSF page on the new “ViewController” project.

Choose the JSF JSP for the file type.

Give the page a new and choose the .jspx file type instead of the .jsp type. (.jspx is a xml like JSP file type, which is for JSP 2.0 standard)

Choose “Do Not Automatically Expose UI Component In a Managed Bean”, we will come to that later.

You need to select the JSP Tag Libraries you will use in your page, so its defination will be added to the JSP page header for you.

Give it a title.

Finish it.

You now finished creating your first JSF page. You can see it in the Application Navigator under the “Web Content” folder.

ADF Faces for Dummies - 1: Install Oracle ADF Faces and get ready to code?

Roosevelt Lai — Mon, 02 Jul 2007 10:21:17 +0000

a) Download

To create J2EE application using Oracle ADF Faces, you need an IDE called Oracle JDeveloper and nothing else.

Oracle JDeveloper(JDev) is an IDE just like the famous JBuilder (actually it was originated from JBuilde’s early version). But the difference is that JDeveloper is free. You can download the JDev’s latest version from Oracle’s OTN website.

There are 3 flavors you can choose to download: Studio Edition, J2EE Edition, Java Edition. Please choose the J2EE Edition. It includes the ADF libraries and does not overloaded with other Oracle proprietary toolset in the Studio Edition.

b) Install

After downloaded the zip file, to install, you need to first unzip the file to a directory you like. Then, …… it’s done.

You will see a file called “jdeveloper.exe” in the unzipped directory, you just doubleclick on that file to launch the JDev for the first time.

Now, you are all set and we soon move into the real game play in the next session.

ADF Faces for Dummies - 0: What is Oracle ADF Faces?

Roosevelt Lai — Fri, 29 Jun 2007 16:39:21 +0000

1. What is Oracle ADF Faces? What do I use it for?
Oracle ADF Faces is an implementation of standard JavaServer Face (JSF) specification. JSF is a framework designed by SUN for creating a Visual Basic or Borland Delphi like rapid web application development tool.

Generally, you use ADF Faces to rapidly and easily (hopeful) create a J2EE based web application.

2. Why must I use JSF?

You don’t. There are tons of J2EE framework, like Struts, WebWorks, Tapstry, Spring, etc, all of these are to help you build a web application. JSF or ADF Faces is just one of them.

There are two general differences (or advantages) between JSF/ADF Faces and other frameworks.

JSF is a J2EE standard, which means it have more support from major software vendors like SUN, Oracle, BEA…. In this case it may have potentials to live longer than other frameworks.
JSF is trying to bring the web application development experience back to the good old days we enjoyed during the C/S era when we had the Visua Basic, Borland Delphi and PowerBuilder. I believe this is a right path at least for now.

3. Why must I use Oracle ADF Faces? What does a Database company have to do with JSF?

ADF Faces is Oracle’s implementation of JSF standard. There are other implementations out there, like MyFaces, ICEFaces and Sun’s reference implementation. ADF Faces is among the best JSF implemenations so far, it owns more 100+ JSF UI/non-UI components which programers can use to create their web app.

Actually Oracle is using the ADF Faces to build their next generation of ERP/CRM systems called Fusion Applications. So ADF Faces is more widely used than many other JSF components.

4. How do I learn ADF Faces? Do I need to know JSF first? Is it hard?

Basically, I suggest you learn the JSF before learn the ADF Faces. There are many JSF tutorials you can find using google. jsftutorials.net is good place to start with. There are also some good books about JSF, JavaServer Faces: The Complete Reference is a good one. Generally, JSF is a little complicated than Struts.

If you know JSF already, ADF Faces will be just a walk by the lake for you.
However, in articles on this site I’ll assume you have no experience with JSF.

Hello World and Why This Blog……

Roosevelt Lai — Fri, 29 Jun 2007 16:38:53 +0000

This is the #1 post of this blog. I’m gonna spend a little time explaining what you will see in this blog in the future.

1. What is this site all about?

Generally, this purpose of this site is to teach people how to use Oracle ADF Faces framework to create J2EE application.

2. Why Oracle ADF Faces?

First of all, it’s a Oracle product and I’m working for Oracle. ‘

Secondly, I do believe a JSF implementation like ADF Faces together with Oracle JDeveloper will move J2EE web app developers a step closer to the Rapid Application Developer (RAD) goal. It will definitly boost the productivity if you know it well.

3. Why without Databinding?

If you know Oracle’s ADF product, you will understand that besides ADF Faces, there is another major ingredient in the ADF framework - the ADF Data Binding mechanism. The existance of ADF Data Binding is to enable utimate drag&drop style development when building a data driven application. It will release you from the burden of manually plumbing the UI component with the underlying business service layer and handles the UI events for you automatically.

But the ADF Data Binding is a sword with two sides. It does save you time from writing some event-handling code. On the other hand, it is not like a breeze to learn how to use Data Biniding. What makes the situation more complicated is that the ADF Faces (or the JSF) is also not as easy as some of the old popular frameworks like Struts. You can imagine, what happens when you have to mix the two at the same time, not to mention you have to know the ADF Business Component or EJB which serves as the Business Service Layer as required by the Data Binding.

So this site is determined to devote to the pure ADF Faces (JSF) way of programming.