Tutorialadf Faces Javabeans Part3

8/2/2019 Tutorialadf Faces Javabeans Part3

1/22

TUTORIAL: ADF Faces (Part 3)

Passing parameter values between JSF pagesBy: 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 3

Using Managed Beans & Data Control

1. Creating project folder.a. Using the same workspace in part 1, create new project folder. Right click at workspaceADFJB, click

New

b. InNew Gallery dialog box, inside Categories column, expand General > Project, insideItems, clickEmptyProject, and then clickOK.


2/22

c. In Create Projectdialog box, enterview3 forProject Name :, and then clickOK.

2. Creating managed beans.a. Follow steps 3(a) 3(e) in part 2 tutorial. But for steps 3(a) and 3(c), please change view2 to view3.


3/22

3. Creating data control.a. At Applications Navigator tab, expand project view3,Application Sources, view3, until you see file

UserBean.java.

b. Right click at UserBean.java, and clickCreate Data Control.


4/22

c. New files will created;DataControl.dxtand UserBean.xmlunder folderview3.

d. Click Save All.4. Creating page navigation using face-config.xml

a.

Right click at view3 project, clickProject Properties. InProject Properties dialog box, clickTechnologyScope at left column; find and clickJSFand JavaBeans atAvailable Technologies and move to right

column (Selected Technologies)-Java, JSP and Servlets is moved as well. ClickOK.


5/22

b. Right click at view3 project, and clickOpen JSF navigation. Filefaces-config.xmlis opened in Diagramview.


6/22

c. Click, drag & drop 2JSF Page to design area offaces-config.xmland createJSF Navigation, just like inpart 1 tutorial, follow steps 2(c) 2(d) in part 1 tutorial, until you get something like below:

5. Creating JSF formd. Go tofaces-config.xmlDiagram view.


7/22

e. Double click icon/untitled1.jsp. Enterborang.jsp forFile name:. ClickNext. ChooseDo NotAutomatically Expose UI Components in a Managed Beans. ClickFinish.


8/22

f. You will create new file borang.jsp without backing beans.

g. From Components Palette, using ADF Faces Core, click, drag & drop PanelPage to file borang.jsp Designarea. Change the Title 1 to ADF Faces: Passing parameter value using Managed Beans and Data

Control.


9/22

h. Insert PanelGrid (using JSF HTML component), inside PanelPage, and enter 1 for No of Columns. ClickFinish. (Follow step 3(e)-3(f) in tutorial part 1 ).

i. Go to Data Controls tab, expand UserBeanDataControl and Operations.


10/22

j. Click, drag & drop nama toPanel Grid, choose Texts and clickADF Input Text w/ Label. Do the same foremail.

k. Make sure you get this:

l. Click at the first input text to mark it, go toProperty Inspector, change theLabelto Nama :.


11/22

m. Do the same for second input text, and change theLabelto E-Mail: at theProperty Inspector.

n. Now, click, drag & dropjantina, behind E-Mail input text, choose Single Selection and clickADF SelectOne Radio


12/22

o. At List Binding Editordialog box, choose Fixed List. ForBase Data Source Attribute, selectjantina. ForSet Values: , enterLelaki and Perempuan. Lastly chooseSelection Required forNo Selection Item:.

Then clickOK.


13/22

p. Click on the radio button you made just now to mark it, at the Property Inspector, changeLabeltoJantina : , then press Enter.

q. Click, drag & drop bangsa fromData Controltab, to Panel Grid, behind the radio button. Choose SingleSelection, and then clickADF Select One Choice

r. At List Binding Editordialog box, choose Fixed List. ForBase Data Source Attribute, selectjantina. ForSet Values: , enterMelayu, Cina, India and Lain-lain. Lastly chooseSelection Required forNo

Selection Item:. Then clickOK.


14/22

s. Click at the Select One Choice component you have just made just now to mark it, at Property Inspector,changeLabelto Bangsa : , then press Enter.

t. From Data Control tab, click, drag & drop committo Panel Grid, behindBangsa (One Choice component).


15/22

u. ClickADF Command Button.

v. Click button Committo mark it. At theProperty Inspector, change Textto Hantar, and atDisabled, deleteexclamation mark (!) (from #{!bindings.Commit.enabled} to #{bindings.Commit.enabled}). AtAction,

entersubmit. Press Enter.


16/22

w. Save all and compile.

6. Creating JSF page to view parameter value.a. Use instruction from tutorial part 1 from 5(a) 5(c).

b. UsingJSF HTML component, Click, drag and dropPanel Gridinside thePanelPage at design area, andEnter1 forNumber of Column, then clickFinish.


17/22

c. Go to Data Control tab, click, drag and drop nama toPanel Grid. Choose Texts, and then clickADF OutputText w/ Label.


18/22

d. Repeat the same foremail,jantina and bangsa.

e. Go back to Components Palette tab, usingADF Faces Core, click, drag and drop CommandButton, behindthe last inputValue component.

f. While the CommandButton is still marked, atProperty Inspector, change Textto Kembali. Press Enter.


19/22

g. Atpapar.jsp Structure, find and clickaf:panelLabelAndMessage - #{bindings.nama.label} to mark it.(underh:panelGrid).

h. Go to Property Inspector, change Label from #{bindings.nama.label} to Nama : , then press Enter.


20/22

i. Repeat step 6(g) & 6(h) foremail,jantina and bangsa, and enterE-Mail : , Jantina : and Bangsa :respectively forLabelinProperty Inspector.

j. Click button Kembali to mark it. At Property Inspector, set Action to back.


21/22

k. Click Save All & compile.l. Run file borang.jsp, and enter values for each field and click buttonHantar.

m. See the result.


22/22

n. Finally, click buttonKembali.

Tutorialadf Faces Javabeans Part3

Documents

Transcript of Tutorialadf Faces Javabeans Part3