Query the Faculty Table Using JavaServer Faces and- 123docz.net

JAVA RUNTIME OBJECTS METHOD

8.6 BUILD JAVA WEB PROJECT TO ACCESS AND MANIPULATE ORACLE DATABASE

8.6.8 Query the Faculty Table Using JavaServer Faces and

First, let ’ s build our Web page FacultyPage.jsp fi le.

Recalled that in Section 8.4.3.3 , we discussed how to build the Faculty.jsp page and saved that page in the local folder, such as C:\Temp folder. Now we need to modify that page to make it our JSF page FacultyPage.jsp .

8.6.8.1 Modify the Faculty.jsp to Make it Our JSF Page FacultyPage.jsp

Open the Windows Explorer and browse to our Temp folder to locate the Faculty.jsp page fi le. Copy that fi le and save it to our current project folder JavaWebDBJSPOracle that should be located at the folder C:\Book9\Chapter 8 . You can also fi nd this page fi le from the folder JSP Files that is located at the Wiley ftp site (refer to Figure 1.2 in Chapter 1).

Then launch the NetBeans IDE and our project, JavaWebDBJSPOracle . Then open the Files window, fi nd and copy the Faculty.jsp fi le from the Files window, and paste it to the Web Pages node in the Projects window.

Now perform the following operations to create our JSF page FacultyPage.jsp fi le and modify the Faculty.jsp fi le to make it our JSF page fi le.

1. Right click on our project JavaWebDBJSPOracle and select New > JSF Page item to open the New JSF File wizard.

2. Enter FacultyPage into the File Name fi eld and check the JSP File radio button under the Options group.

3. Click on the Finish button to complete this JSF page creation process.

4. On the opened JSF page, remove the <h:outputText value =″Hello World! ″/ >

tag.

5. Open the Palette window by going to Window > Palette menu item.

6. Drag a JSF Form from the Palette window, which is located under the JSF group, and place it under the <body > tag in our newly created JSF page. Your JSF page should match the one that is shown in Figure 8.132 .

7. Open the Faculty.jsp fi le and copy the codes between the <head > and </head > tag pair and paste them under the <head > tag in our new JSF page FacultyPage.jsp .

8. Copy the <![if !pub] > tag that is under the <div style … > tag in the Faculty.jsp fi le and paste it to the new FacultyPage.jsp page, just under the <body > tag.

9. Copy all codes between the <form > and </form > tag from the Faculty.jsp page and paste them into our new JSF page FacultyPage.jsp , exactly between the <h:form > and

</h:form > tag in the FacultyPage.jsp fi le.

10. Copy the <![endif] > tag from the Faculty.jsp fi le, which is located just under the

</form > tag, and paste it to our new JSF page FacultyPage.jsp , exactly just under the

</h:form > tag.

Now perform the following modifi cations to the related attributes of the tags to bind them to the associated properties or methods defi ned in our managed bean class

FacultyMBean.java that will be built in the following section.

A. Modify the margin and style of the labels displayed in this page by changing the following margins and text indent that are located under the / * Style Definitions * / group below the <style > tag:

a. Change the margin - top from 0 pt to − 10 pt. The result is margin - top: - 10pt;

b. Change the margin - bottom from 0 pt to 10 pt. The result is margin - bottom:10pt;

Figure 8.132. The code window of the JSF page FacultyPage.jsp.

c08.indd 712

c08.indd 712 7/20/2011 11:12:35 AM7/20/2011 11:12:35 AM

www.traintelco.com

B. Add an new id attribute for the <h:form > tag, and make this id equal to FacultyPage . The modifi ed <h:form > tag now becomes <h:form id =″FacultyPage ″> .

C. Modify the tag

<div v:shape =″_x0000_s1025 ″ style =′padding:2.88pt 2.88pt 2.88pt 2.88pt ′ class =shape > that is located under the

<table ... > tag and around line 108 to:

D. Replace the following tag, which is located at line 130 in our new JSF page,

<v:imagedata src =″Faculty_files/image295.emz ″ o:title =″<EM PTY >″/ >

with the tag:

<h:graphicImage id =″fImage ″ width =″140 ″ height =″150 ″ value =″#{FacultyMBean.facultyImage} ″/ >

E. Modify the tag <p class =MsoNormal ><span lang =en - US style =′font - weight:bold;language:en - US ′>Faculty Name </span ></p > that is around line 161 by removing the text label Faculty Name . The modifi ed tag is:

F. Modify the tag <p class =MsoNormal ><span lang =en - US style =′font - weight:bold;language:en - US ′>Faculty ID </span ></p > that is around line 191 by removing the text label Faculty ID . The modifi ed tag is:

<p class =MsoNormal ><span lang =en - US style =′font - weight:

bold;language:en - US ′></span ></p >

G. In a similar way as we did in steps E and F , remove the text label Name (around line 221),

Title (line 251), Offi ce (line 281), Phone (line 311), College (line 341), and Email (line 371), respectively.

H. Replace the tag <input name =FacultyImageField maxlength =255 size =18 value =″″... ... > with the tag:

<h:inputText id =″facultyImageName ″ value =″#{FacultyMBean.

facultyImageName} ″></h:inputText >

I. Replace the tag <input name =FacultyNameField maxlength =255 size =18 value =″″... ... > with the tags:

<h:outputLabel

style =″position:absolute;left: - 60pt;font - weight:bold;

font - size:10.0pt;language:en - US ″ value =″Faculty Name ″/ >

<h:inputText id =″facultyName ″ value =″#{FacultyMBean.

facultyName} ″></h:inputText >

J. Replace the tag <input name =FacultyIDField maxlength =255 size =21 value =″″ ... ... ... > with the tags:

<h:outputLabel