TUTORIAL: ADF Faces (Part 2)

Passing parameter values between JSF pages By: Dr. Ahmad Taufik Jamil, Pusat Teknologi Maklumat, HUKM

This tutorial will show you how to pass parameter value originated from a JSF form and view them in another JSF page. The

tutorial will show various ways to achieve the objectives. The entire tutorials will use JavaBeans and ADF Faces.

Part 2

Using backing beans and managed beans

1. Creating new project folder.

a. Using the same workspace in part 1, create new project folder. Right click at workspace ADFJB, click New…

b. In New Gallery dialog box, inside Categories column, expand General > Project, inside Items, click Empty

Project, and then click OK.

c. In Create Project dialog box, enter view2 for Project Name :, and then click OK.

2. Creating page navigation using face-config.xml.

a. Right click at view2 project, click Project Properties…. In Project Properties dialog box, click Technology

Scope at left column; find and click JSF and JavaBeans at Available Technologies and move to right column

(Selected Technologies)-Java, JSP and Servlets is moved as well. Click OK.

b. Right click at view2 project, and click Open JSF navigation. File faces-config.xml is opened in Diagram view.

c. Click, drag & drop 2 JSF Page to design area of faces-config.xml and create JSF Navigation, just like in part

1 tutorial, follow steps 2(c) – 2(d) in part 1 tutorial.

3. Creating Managed Bean

a. Right click at view2 project, click New…

b. At New Gallery dialog box, expand General, find and click JavaBeans. Inside Items, click Bean and then click

OK.

c. At Create Bean dialog box, enter UserBean for Name:, view2 for Package:, and choose java.lang.Object for

Extends:, then click OK. Source editor for UserBean.java is now opened.

d. Add the following lines inside the UserBean class, immediately below UserBean constructor ( public

UserBean() { }). (****in part 1 tutorial, the following source code I put in backing bean. Now I separate

it into the managed bean (Userbean.java)).

private String nama; private String email; private String jantina; private String bangsa; //NAMA public String getNama(){ return nama; } public void setNama(String nama){ this.nama=nama; } //EMAIL public String getEmail(){ return email; } public void setEmail(String email){ this.email=email; } //JANTINA public String getJantina(){ return jantina; } public void setJantina(String jantina){ this.jantina=jantina; } //BANGSA public String getBangsa(){ return bangsa; } public void setBangsa(String bangsa){ this.bangsa=bangsa; }

e. Save all and compile.

4. Creating JSF form and backing beans.

a. Go back to faces-config.xml Diagram view.

b. Double click icon /untitled1.jsp. Enter borang.jsp for File name:. Click Next. Choose Automatically Expose

UI Components in a New managed Beans. Click Finish.

c. Follow step 3(c) until 3(l) of part 1 tutorial, BUT for step 3(d), change the title to ADF Faces: Passing value

using backing beans and managed beans. Make sure you get something like below:

d. Save All & compile.

5. Editing backing beans.

a. Double click button Hantar. At Bind Action Property dialog box, accept all values and click OK.

a. Now we are editing file Borang.java (backing bean). At line 37 (below variable declaration), add new variables:

private String nama; private String email; private String jantina; private String bangsa;

b. Add following lines below the last method commandButton1_action() (after the curly bracket ( })).

private UserBean userbean = new UserBean(); public UserBean getUserbean() { return userbean; }

c. Press Alt+Enter to add import view2.UserBean;

d. Within method commandButton1_action(), add below line // Add event code here... nama = (String)inputText1.getValue(); email = (String)inputText2.getValue(); jantina = (String)selectOneRadio1.getValue(); bangsa = (String)selectOneChoice1.getValue(); userbean.setNama(nama); userbean.setEmail(email); userbean.setJantina(jantina); userbean.setBangsa(bangsa);

e. Then change return null; to return “submit”;

f. Save All & compile.

6. Creating JSF page to view parameter values.

a. Follow step 5(a)-5(g), from tutorial part 1.You will get similar outcome.

b. Click outputText1 in design area to mark it. At Property Inspector, click Value. Click icon Bind to data. A

dialog box Value will appear.

b. c. Expand backing_borang in Variables column. Find userbean and expand it. Find and click nama to mark it.

Click button > to move it to Expression column. Then click OK.

d. The Value in Property Inspector has changed to #{backing_borang.nama}.

e. Repeat the same for outputText2, 3 &4, for email, jantina and bangsa repectively.

f. Click button Semula to mark it. Go to Property Inspector, for column Action, choose back.

g. Save All & compile.

h. Run file borang.jsp

i. Enter value for all columns, and click button Hantar.

j. Click button Semula, you will be redirected to the first JSF page.