TUTORIAL: ADF Faces (Part 1-Modified)

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

This tutorials below 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 1

Using backing beans

1. Creating workspace and project folder.

a. Create a new workspace. Enter ADFJB for Application Name:, and No Template [All Technologies] for

Application Template:, click OK.

b. Create a project folder. Enter view4 for Project Name:, then click OK.

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

a. Right click at project view4, click Project Properties. Click Technology Scope. Move JSF (in Available

Technologies: column) to the right column (Selected Technologies:). The click OK. (Java, JSP and Servlet

is move to the right column as well).

b. Right click again at project view4, click Open JSF Navigation. faces-config.xml diagram view is seen.

c. Create new page navigation. Click, drag & drop JSF Page from Component Palette, onto the diagram view

of faces-config.xml, and then drop another JSF page beside it. Click JSF Navigation Case from

Component Palette, then click at /untitled1.jsp and then click at /untitled2.jsp. An arrow is created and

pointing to /untitled2.jsp. Change – success to – submit.

d. Create another JSF Navigation from /untitled2.jsp to /untitled1.jsp. Rename – success to – back.

3. Creating JSF form and backing beans.

a. Double click /untitled1.jsp. At step 1 of 4 of Create JSF JSP wizard, change File Name : to borang.jsp.

Click Next.

b. At step 2 of 4, choose Automatically Expose UI Component in a New Managed Bean. Click Next. Then

click Finish. A JSF file (borang.jsp) and backing bean, Borang.java is created.

c. At the borang.jsp design area, click, drag and drop PanelPage from Components Palette, to borang.jsp

design area.

d. Using Property Inspector, change Title to ADF Faces: Passing value using backing beans. Now the title

of the page is changed.

e. Right click at design area, > Insert Inside PanelPage……..>JSF HTM.

f. Choose PanelGrid, then click OK. Click Next on first wizard, then enter 1 at Number of Column :, then

click Finish.

g. Click, drag & drop 2 InputText from Components Palette to design area, and rename the Label to Nama:

and E-Mail: respectively.

h. Click, drag & drop SelectOneRadio from Component Palette to design area, behind E-Mail: input text. A

dialog box will appear. Choose Create List (Select Item). Click button Add, and enter Lelaki and Lelaki at

both column. Add another line for Perempuan and Perempuan. Click OK.

i. Change Label 1 to Jantina : (at Property Inspector), then press Enter.

j. Click, drag & drop SelectOneChoice from Components Palette, and drop behind SelectOneRadio. A

dialog box will appear. Choose Create List (Select Item). Add Melayu & Melayu, India & India, Cina &

Cina and Lain-lain & Lain-lain, for both column respectively.Click OK.

k. Change Label 1 to Bangsa: (at Property Inspector), then press Enter.

l. Click, drag & drop CommandButton behind SelectOneChoice. Rename Text to Hantar at Property

Inspector.

4. Editing backing beans.

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

b. Now we are editing file Borang.java (backing bean).

c. Change return null; to return “submit”;

d. Compile and click Save All.

5. Creating JSF page to view parameter value.

a. Go back to diagram view of faces-config.xml. Double click icon /untitled2.jsp

b. On wizard, change file name to papar.jsp. Click Next. Choose Do Not Automatically Expose UI……then

click Finish.

c. Click, drag & drop PanelPage to design area, and change the title to ADF Faces: View value from other

page.

d. Using JSF HTML component, Click, drag and drop Panel Grid inside the PanelPage at design area, and

Enter 2 for Number of Column, then click Finish.

e. Using ADF Faces Core, click, drag and drop OutputLabel inside PanelGrid at design area, then click,

drag & drop OutputText behind it. Repeat 3 times. Then click, drag and drop CommandButton, until you

get this.

f. Rename outputLabel1,2,3 & 4 to Name :, E-Mail :, Jantina :, Bangsa : respectively, by changing column

Value in Property Inspector .

g. Change CommandButton Text to Semula, press Enter.

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

dialog box Value will appear.

i. Expand backing_borang in Variables column. Find inputText1>value and click value to mark it. Click

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

j. The Value in Property Inspector has changed to #{backing_borang.inputText1.value}.

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

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

m. Save All & compile.

n. Run file borang.jsp

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

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