Tutorial: ADF Faces: Passing parameter values … › 2007 › 05 › tutorial-adf...TUTORIAL: ADF...
Transcript of Tutorial: ADF Faces: Passing parameter values … › 2007 › 05 › tutorial-adf...TUTORIAL: ADF...
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.