TUTORIAL: ADF Faces (Part 1-Modified) Passing parameter values between JSF pages By: Dr.Ahmad Taufik Jamil, Pusat Teknologi Maklumat, HUKM

Transcription

1 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).

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

3 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.

4 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.

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

6 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.

7 g. Click, drag & drop 2 InputText from Components Palette to design area, and rename the Label to Nama: and respectively. h. Click, drag & drop SelectOneRadio from Component Palette to design area, behind 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.

8 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.

9 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.

10 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.

11 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 :, , Jantina :, Bangsa : respectively, by changing column Value in Property Inspector.

12 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.

13 j. The Value in Property Inspector has changed to #{backing_borang.inputtext1.value}. k. Repeat the same for outputtext2, 3 &4, for , 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

14 o. Enter value for all columns, and click button Hantar. p. Click button Semula, you will be redirected to the first JSF page.