Practice for JEE5. Using stateless session EJB 3.0 as a business layer, ADF data Model as a model layer and ADF faces as a view layer. Version 1.

Transcription

1 Practice for JEE5 Using stateless session EJB 3.0 as a business layer, ADF data Model as a model layer and ADF faces as a view layer. Version 1.1 Modified by: Dr. Ahmad Taufik Jamil BSc (Med), MD, MPH, MSc(IT) Head, Center of Information Technology UKM Medical Center Adapted from: Appendix A, Practice & Solution, Oracle AS 10g R3: Build J2EE Applications 1 1

2 Table of Contents Practice 1 Practice 1-1: Create an Application with Two Projects :4 Practice 1-2: Create the EJB Data Model :5 Practice 1-3: Create the Source Code for Session Bean and Data Control :7 Practice 1-4: Create a Data-Aware JSF Page :13 Practice 2 Practice 2-1: Create an Application and a JSF Diagram :14 Practice 2-2: Add a Managed Bean to the Project :15 Practice 3 Practice 3-1: Create a New Application and EJB3.0 :16 Practice 4 Practice 4-1: Create and Use a Data Control :29 Practice 4-2: Modify the Binding :31 Practice 5 Practice 5-1: Create a Template jspx :32 Practice 5-2: Create the SREdit Page and Apply the Template :33 Practice 5-3: Add Data-Aware Components to the SREdit Page :35 Practice 6 Practice 6-2: Add Data Components to the Search Page :37 Practice 6-3: Modify the Default Behavior :39 Practice 7 Practice 7-1: Complete the Edit Page :40 Practice 7-2: Add the Commit Function :43 Practice 8 Practice 8-1: Link SRSearch to SREdit :44 Practice 8-2: Add a Delete Page :46 Practice 8-3: Wire the Buttons :48 Appendix A: Setting up database :49 2

3 What s New? Changes From previous release (1.0) i. Changes on source code ServiceRequestsBean.java. Please refer page 16 & 22. Marked in yellow. ii. Correction on Practice 8-3, No 2, page 48. 3

4 Practice 1 In this practice you create an application using stateless EJB and JSF technologies. The practice includes detailed steps for each of the areas of the application. Practices in later lessons have less detailed instructions, but for this introductory practice, we provide step-by-step instructions. Practice 1-1: Create an Application with Two Projects All the components for an application in JDeveloper are contained within a structure called an application. It is accessible through the Applications Navigator. The first step in application development using JDeveloper is to create an application structure. In this section, you create an application and rename the default projects. 1) Open JDeveloper i. Double-click the JDeveloper icon on the desktop. ii. If JDeveloper prompts you to migrate from a previous version, click No. iii. Setup database. Please refer Appendix A. 2) Create an Application. i. Select File New. ii. Select General Application in the New Gallery. iii. Click OK. iv. Use EJB-JSF as the Application Name. v. Enter sr as the Application Package Prefix. vi. Select Web Application [JSF, EJB] for the Application Template. vii. Click OK. This creates the EJB-JSF application and includes two projects: Model and ViewController. 3) Rename the default projects. i. Select the Model project in the Applications Navigator ii. Select File Rename. iii. Enter DataModel for the new name. iv. Click Save. v. Select the ViewController project in the Applications Navigator. vi. Select File Rename. vii. Enter UserInterface for the new name. viii. Click Save. ix. Select File Save on the JDeveloper menu. The Applications Navigator now looks like the screenshot shown below: 4

5 Practice 1-2: Create the EJB Data Model In this section, you create the EJB data model, which will be the basis of the application. For now, you are just creating a default model for testing. The first part of this practice is to create a new database connection. 1) In JDeveloper, choose View Connection Navigator. 2) Right-click the Database node and choose New Database Connection. 3) Click Next on the Welcome page. 4) In the Connection Name field, enter the connection name srconn, and then click Next. 5) On the Authentication page, enter the values shown in the following table, and then click Next. Field Username: Password: Deploy Password: Value SRDEMO Oracle Select the check box 6) On the Connection page, enter the following values, and then click Next. Field Value Host Name Localhost This is the default host name if the database is run on the same machine as JDeveloper. If the database is on another machine, enter the name (or IP address) of the computer where the database is located. JDBC Port 1521 This is the default value of the port used to access the database. If you do not know this value, check with your instructor. SID ORCL This is the default value for the SID that is used to connect to the database. 7) On the Test page, click Test Connection. If the database is available and the connection details are correct, you will see a success message. If not, click Back and check the values. 8) When the connection is successful, click Finish to create the connection. Now that you have a connection, you can create the default Data Model for your application. 9) In the Applications Navigator, right-click DataModel and select New. 10) In the New Gallery, select Business Tier, EJB, Session Bean (1.1/2.x/3.0). 11) Click OK. This opens the Create Session Bean Wizard. 12) Click Next on the opening page of the wizard. 13) Step 1 of 4: Select EJB version i. Select Enterprise JavaBeans 3.0(J2EE 5,0). ii. Click Next. 14) Step 2 of 4: EJB Name and Options. i. Enter Products for EJB Name. ii. Accept the default values. iii. Click Next. 15) Step 3 of 4: Class Definitions i. Accept the default values. ii. Click Next. 16) Step 4 of 4: EJB Components Interfaces i. Accept the default values. ii. Click Next then Finish. iii. Click Save. 17) The Applications Navigator should look like the following: 5

6 6

7 Practice 1-3: Create the Source Code for Session Bean and Data Control 1) Enter the following source code inside ProductsBean.java //Second Constructor public ProductsBean(int prodid, String name, String image, String description) this.prodid=prodid; this.name=name; this.image=image; this.description=description; //Dependancy Injection for private DataSource srconndatasource; public void setdatasource(datasource mydb) this.srconndatasource = mydb; //Variable declaration private int prodid; private String name; private String image; private String description; //Getter & Setter methods public void setprodid(int prodid) this.prodid = prodid; public int getprodid() return prodid; public void setname(string name) this.name = name; public String getname() return name; public void setimage(string image) this.image = image; public String getimage() return image; public void setdescription(string description) this.description = description; public String getdescription() return description; //Connection to Database private Connection connecttodatabase() Connection conn=null; int ret_code; try conn=srconndatasource.getconnection(); catch (SQLException se) ret_code = se.geterrorcode(); System.out.println("SQL Error while connecting to the database : "+ se.tostring()); catch (Exception ne) System.out.println("Other Error while connecting to the database : "+ ne.tostring()); return conn; //Insert Method 7

8 public void insertproducts(int prodid, String name, String image, String description) Connection conn = null; PreparedStatement pstmtinsert=null; try conn = connecttodatabase(); String sqlinsert = "INSERT INTO PRODUCTS (PROD_ID, NAME, IMAGE, DESCRIPTION) VALUES (?,?,?,?)"; pstmtinsert = conn.preparestatement(sqlinsert); pstmtinsert.setint(1, prodid); pstmtinsert.setstring(2, name); pstmtinsert.setstring(3, image); pstmtinsert.setstring(4, description); pstmtinsert.executeupdate(); catch (SQLException e) System.out.println(e.getSQLState()); System.out.println(e.getMessage()); System.out.println(e.getErrorCode()); System.out.println("ERROR: insertproducts()"); finally try pstmtinsert.close(); conn.close(); catch(sqlexception e2) System.out.println(e2); public void updateproducts(int prodid, String name, String image, String description) Connection conn = null; PreparedStatement pstmtupdate=null; try conn = connecttodatabase(); String sqlupdate = "UPDATE PRODUCTS SET NAME =?, IMAGE =?, DESCRIPTION =? WHERE PROD_ID =?"; pstmtupdate = conn.preparestatement(sqlupdate); pstmtupdate.setstring(1, name); pstmtupdate.setstring(2, image); pstmtupdate.setstring(3, description); pstmtupdate.setint(4, prodid); pstmtupdate.executeupdate(); catch (SQLException e) System.out.println(e.getSQLState()); System.out.println(e.getMessage()); System.out.println(e.getErrorCode()); System.out.println("ERROR: updateproducts()"); finally try pstmtupdate.close(); conn.close(); catch(sqlexception e2) System.out.println(e2); System.out.println("Error from finally block updateproducts"); public List<ProductsBean> findproductsbyid(int prodid) List<ProductsBean> retval = new ArrayList<ProductsBean>(); Connection connection = null; 8

9 PreparedStatement pstmtselect=null; ResultSet rs=null; try connection = connecttodatabase(); String sql = "SELECT * FROM PRODUCTS WHERE PROD_ID =? "; pstmtselect = connection.preparestatement(sql); pstmtselect.setint(1, prodid); rs = pstmtselect.executequery(); while (rs.next()) ProductsBean productsbean = new ProductsBean(rs.getInt("PROD_ID"),rs.getString("NAME"),rs.getString("IMAGE"),rs.getString("DESCRIPTION")); retval.add(productsbean); catch (SQLException e) e.printstacktrace(); System.out.println(e.getSQLState()); System.out.println(e.getMessage()); System.out.println(e.getErrorCode()); System.out.println("ERROR: findproductsbyid(int productid)"); catch (Exception e1) e1.printstacktrace(); finally try rs.close(); pstmtselect.close(); connection.close(); catch(sqlexception e2) System.out.println(e2); return retval; public List<ProductsBean> findallproducts() List<ProductsBean> retval = new ArrayList<ProductsBean>(); Connection connection = null; PreparedStatement pstmtselect=null; ResultSet rs=null; try connection = connecttodatabase(); String sql = "SELECT * FROM PRODUCTS"; pstmtselect = connection.preparestatement(sql); rs = pstmtselect.executequery(); while (rs.next()) ProductsBean productsbean = new ProductsBean(rs.getInt("PROD_ID"),rs.getString("NAME"),rs.getString("IMAGE"),rs.getString("DESCRIPTION")); retval.add(productsbean); catch (SQLException e) e.printstacktrace(); System.out.println(e.getSQLState()); System.out.println(e.getMessage()); System.out.println(e.getErrorCode()); System.out.println("ERROR: findallproducts()"); catch (Exception e1) e1.printstacktrace(); finally try rs.close(); pstmtselect.close(); connection.close(); catch(sqlexception e2) System.out.println(e2); 9

10 return retval; public void removeproducts(int prodid) Connection conn = null; PreparedStatement pstmtupdate=null; try conn = connecttodatabase(); String sqldelete = "DELETE FROM PRODUCTS WHERE PROD_ID =?"; pstmtupdate = conn.preparestatement(sqldelete); pstmtupdate.setint(1, prodid); pstmtupdate.executeupdate(); catch (SQLException e) System.out.println(e.getSQLState()); System.out.println(e.getMessage()); System.out.println(e.getErrorCode()); System.out.println("ERROR: removeproducts(int productid)"); finally try pstmtupdate.close(); conn.close(); catch(sqlexception e2) System.out.println(e2); System.out.println("Error from finally block removeproducts(int productid)"); 2) Import the following libraries. import java.sql.connection; import java.sql.preparedstatement; import java.sql.resultset; import java.sql.sqlexception; import java.util.arraylist; import java.util.list; import javax.annotation.resource; import javax.sql.datasource; 3) Compile: Right click ProductsBean.java, and click Make. 4) View ProductBean.java Structure on the lower left panel. You may see like this: 10

11 5) Expose all method into Local and Remote interface: a. Right click method findallproducts(), then click Properties.. b. Check both Expose through Local interface and Expose through Remote interface, then click OK 11

12 c. Repeat the same for the other 4 methods (findallproductsbyid, insertproducts, updateproducts and removeproducts). 6) Right-click ProductsBean.java in the Applications Navigator and select Create Data Control. 7) Select Local for the interface to use with this EJB data control. Click OK. 8) Click Save All on the JDeveloper toolbar. 12

13 Practice 1-4: Create a Data-Aware JSF Page In this section, you create a simple JSF page that displays data from the ProductsBean object. 1) Right-click UserInterface in the Applications Navigator and select New. 2) In the New Gallery, select Web Tier > JSF > JSF JSP and click OK. 3) Click Next on the first page of the Create JSF JSP Wizard. 4) In step 1 of 4: i. Enter products.jspx as the File Name: ii. Leave the default value in the Directory Name. iii. Select JSP Document (*.jspx). iv. Click Next. 5) In step 2 of 4, select Automatically Expose UI Components in a New Managed Bean. Although you will not use a managed bean in this practice, you can create it anyway. Click Next. 6) In step 3 of 4, accept the default libraries, which should be: ADF Faces Components ADF Faces HTML JSF Core JSF HTML Note: If the libraries are not listed in the Selected Libraries list, select the libraries from the Available Libraries list and move them. 7) Click Next. 8) In step 4 of 4, click Finish to accept the defaults and create the JSF. JDeveloper creates the JSF and opens the new JSF in the Visual Editor. In the next few steps, you add a data-aware component that displays product information. 9) In the Data Controls Palette, which is on the top right of JDeveloper (select View Data Control Palette to open it if it is not visible), expand ProductsLocal. 10) Expand findallproducts() to show the Products data control. 11) Drag ProductsBean to the Visual Editor. When you drop ProductsBean on the Visual Editor, JDeveloper displays a pop-up menu where you select what type of component you want to use. 12) Select Tables > ADF Table from the pop-up menu. JDeveloper may add libraries to your project if needed. Accept any proposed libraries. 13) In the Edit Table Columns dialog box, select Enable selection and Enable sorting, and then click OK. 14) You have now created a data-aware JSF. Right-click anywhere in the Visual Editor and select Run. This starts an internal (or embedded) OC4J instance, and opens your page in a browser. 15) The page should look something like the following: Notice that the page has an option button on each row of the table and a Submit button. These were created because you selected Enable Selection. Later, you add code behind the Submit button that navigates to a new page where you can edit the current row. 16) Experiment with the page you have just created. Here are some ideas: i. Click any of the headings (description, name, prodid) to re-sort the data in the table. ii. Click Next 10 to display the remainder of the rows. You can also use the row navigation drop-down list to select a specific set or rows or all rows. iii. When you are done, close the browser 13

14 Practice 2 In this practice, you build the JSF Navigation diagram for the course application. The application consists of three pages. You also add Case Navigation rules to the pages. In the last part of this practice, you will add a managed bean that is used to store information about the state of the client such as the current Service Request ID. Practice 2-1: Create an Application and a JSF Diagram In this first section, you create a new Application, a JSF diagram, and three JSF page references. 1) Open the JSF Navigation diagram. Right-click UserInterface in the Applications Navigator and select Open JSF Navigation. 2) Create three JSF Pages with the following names: SRSearch.jsp SREdit.jsp SRDelete.jsp i. Select JSF Navigation Diagram in the Component Palette. ii. Click JSF Page. iii. Click anywhere in JSF Navigation Diagram. iv. Change the default name of the reference. v. Repeat for each of the pages. 3) Add a JSF Navigation Case from /SRSearch.jsp to /SREdit.jsp. Set the name of the case to edit. i. Click JSF Navigation Case in the Component Palette (JSF Navigation Diagram). ii. Click the /SRSearch.jsp page reference, and then click the /SREdit.jsp page reference. iii. The default name should be success. Click the name and change it to edit. 4) Add a JSF Navigation Case from /SREdit.jsp to / SRSearch.jsp. Accept the default name, which should be success. i. Click JSF Navigation Case in the Component Palette (JSF Navigation Diagram). ii. Click the /SREdit.jsp page reference, and then click the /SRSearch.jsp page reference. iii. The default name should be success; if it is not, click the name and change it to success. 5) Add a JSF Navigation Case from /SRSearch.jsp to / SRDelete.jsp. Set the case name to delete. i. Click JSF Navigation Case in the Component Palette (JSF Navigation Diagram). ii. Click the /SRSearch.jsp page reference, and then click the /SRDelete.jsp page reference. iii. The default name should be success. Click the name and change it to delete. 6) Add a JSF Navigation Case from /SRDelete.jsp to / SRSearch.jsp. Set the case name to return. i. Click JSF Navigation Case in the Component Palette (JSF Navigation Diagram). ii. Click the /SRDelete.jsp page reference, and then click the /SRSearch.jsp page reference. iii. The default name should be success. Click the name and change it to return. 7) Add one more JSF Navigation Case from /SRDelete.jsp to / SRSearch.jsp. Set the case name to cancel. i. Click JSF Navigation Case in the Component Palette (JSF Navigation Diagram). ii. Click the /SRDelete.jsp page reference, and then click the /SRSearch.jsp page reference. iii. The default name should be success. Click the name and change it to cancel. 8) Your diagram should look similar to the following: 14

15 Practice 2-2: Add a Managed Bean to the Project In this section, you add an existing class as a managed bean. The managed bean class is provided for you in a directory called MiscFiles within the mywork directory. Because you have not created any Java classes in this project, the src directory structure does not exist. You could go to the operating system and create it, but an easier way is to have JDeveloper do it for you. 1) Right-click the UserInterface project and select New. 2) Select General Simple Files Java Class in the New Gallery and click OK. 3) In the Create Java Class dialog box: i. Accept the default name, which should be Class1. ii. Set the Package to sr.view. iii. Accept the other defaults and click OK. 4) In the Applications Navigator, expand UserInterface > Application Sources > sr.view. 5) The Applications Navigator should look something like: Now that the directory structure is built, you can delete the Java class. 6) Click Class1.java in the Applications Navigator. 7) Select File Erase from Disk from the JDeveloper menu. 8) Click Yes in the confirmation dialog. Now you can copy the UserSystemState.java file to the sr.view directory. 9) Using your operating system file browser, copy the UserSystemState.java file from the MiscFiles directory to the EJB-JSF > ViewController > src > sr > view directory. 10) The structure should look something like: Now that the Java class is in the project structure, you can add it as a managed bean. 11) Open the JSF Case Navigation diagram. 12) Add the UserSystemState class as a managed bean. i. Click the Overview tab, which is at the bottom of the diagram. ii. Select Managed Beans. iii. Click New. iv. Name the bean userstate. v. Click the Browse button for the Class. vi. On the Search tab, enter sr.view as the Match Class Name. vii. Select sr.view.usersystemstate and click OK. viii. Change the scope to Session. ix. Make sure the Generate Class check box is not selected. x. Click OK to register this class as a managed bean. 15

16 Practice 3 In this practice, you will create a default data model using stateless session EJB 3.0. Practice 3-1: Create a New Application and EJB3.0 In this first section, you add a set of EJB 3.0 to the DataModel project you have already been using. Start this practice with your application from the previous practice or open the Practice8 application. 1) Create EJB 3.0 for all the tables in the SRDEMO schema: a. In the Applications Navigator, right-click DataModel and select New. b. In the New Gallery, select Business Tier, EJB, Session Bean(1.1/2.x/3.0). c. Click OK. This opens the Create Session Bean Wizard. d. Click Next on the opening page of the wizard. e. Step 1 of 4: Select EJB version i. Select Enterprise JavaBeans 3.0(J2EE 5,0). ii. Click Next. f. Step 2 of 4: EJB Name and Options. i. Enter ServiceRequests for EJB Name. ii. Accept the default values. iii. Click Next. g. Step 3 of 4: Class Definitions i. Accept the default values. ii. Click Next. h. Step 4 of 4: EJB Components Interfaces i. Accept the default values. ii. Click Next then Finish. iii. Click Save. 2) Repeat steps 1) a h for EJB name Users. 3) Enter the following source code for ServiceRequestsBean.java and import all necessary libraries. i. Libraries import java.sql.connection; import java.sql.preparedstatement; import java.sql.resultset; import java.sql.sqlexception; import java.util.arraylist; import java.sql.date; import java.util.list; import javax.annotation.resource; import javax.ejb.stateless; import javax.sql.datasource; ii. public class ServiceRequestsBean implements ServiceRequests, ServiceRequestsLocal public ServiceRequestsBean() //Second Constructor public ServiceRequestsBean(int svrid,string status,date requestdate,string problemdescription,int prodid,int createdby,int assignedto,date assigneddate) this.svrid=svrid; this.status=status; this.requestdate=requestdate; this.problemdescription=problemdescription; this.prodid=prodid; this.createdby=createdby; this.assignedto=assignedto; this.assigneddate=assigneddate; //Variable declaration private int svrid; private String status; private Date requestdate; private String problemdescription; private int prodid; private int createdby; 16

17 private int assignedto; private Date assigneddate; //Dependancy Injection for private DataSource srconndatasource; public void setdatasource(datasource mydb) this.srconndatasource = mydb; //Getter & setter methods public void setsvrid(int svrid) this.svrid = svrid; public int getsvrid() return svrid; public void setstatus(string status) this.status = status; public String getstatus() return status; public void setrequestdate(date requestdate) this.requestdate = requestdate; public Date getrequestdate() return requestdate; public void setproblemdescription(string problemdescription) this.problemdescription = problemdescription; public String getproblemdescription() return problemdescription; public void setprodid(int prodid) this.prodid = prodid; public int getprodid() return prodid; public void setcreatedby(int createdby) this.createdby = createdby; public int getcreatedby() return createdby; public void setassignedto(int assignedto) this.assignedto = assignedto; public int getassignedto() return assignedto; public void setassigneddate(date assigneddate) this.assigneddate = assigneddate; public Date getassigneddate() return assigneddate; //Connection to Database private Connection connecttodatabase() Connection conn=null; 17

18 int ret_code; try conn=srconndatasource.getconnection(); catch (SQLException se) ret_code = se.geterrorcode(); System.out.println("SQL Error while connecting to the database : "+ se.tostring()); catch (Exception ne) System.out.println("Other Error while connecting to the database : "+ ne.tostring()); return conn; public void insertservicerequests(int svrid,string status,date requestdate,string problemdescription,int prodid,int createdby,int assignedto,date assigneddate) Connection conn = null; PreparedStatement pstmtinsert=null; //java.sql.date sqlrequestdate = new java.sql.date(requestdate.gettime()); //java.sql.date sqlassigneddate = new java.sql.date(assigneddate.gettime()); try conn = connecttodatabase(); String sqlinsert = "INSERT INTO SERVICE_REQUESTS (SVR_ID, STATUS, REQUEST_DATE, PROBLEM_DESCRIPTION, PROD_ID, CREATED_BY, ASSIGNED_TO, ASSIGNED_DATE) VALUES (?,?,?,?,?,?,?,?)"; pstmtinsert = conn.preparestatement(sqlinsert); pstmtinsert.setint(1, svrid); pstmtinsert.setstring(2, status); pstmtinsert.setdate(3, requestdate); pstmtinsert.setstring(4, problemdescription); pstmtinsert.setint(5, prodid); pstmtinsert.setint(6, createdby); pstmtinsert.setint(7, assignedto); pstmtinsert.setdate(8, assigneddate); pstmtinsert.executeupdate(); catch (SQLException e) System.out.println(e.getSQLState()); System.out.println(e.getMessage()); System.out.println(e.getErrorCode()); System.out.println("ERROR: insertservicerequests()"); finally try pstmtinsert.close(); conn.close(); catch(sqlexception e2) System.out.println(e2); public void updateservicerequests(int svrid,string status,date requestdate,string problemdescription,int prodid,int createdby,int assignedto,date assigneddate) Connection conn = null; PreparedStatement pstmtupdate=null; //java.sql.date sqlrequestdate = new java.sql.date(requestdate.gettime()); //java.sql.date sqlassigneddate = new java.sql.date(assigneddate.gettime()); try 18

19 conn = connecttodatabase(); String sqlupdate = "UPDATE SERVICE_REQUESTS SET STATUS =?,REQUEST_DATE =?,PROBLEM_DESCRIPTION =?,PROD_ID =?,CREATED_BY =?,ASSIGNED_TO =?,ASSIGNED_DATE =? WHERE SVR_ID =?"; pstmtupdate = conn.preparestatement(sqlupdate); pstmtupdate.setstring(1, status); pstmtupdate.setdate(2, requestdate); pstmtupdate.setstring(3, problemdescription); pstmtupdate.setint(4, prodid); pstmtupdate.setint(5, createdby); pstmtupdate.setint(6, assignedto); pstmtupdate.setdate(7, assigneddate); pstmtupdate.setint(8, svrid); pstmtupdate.executeupdate(); catch (SQLException e) System.out.println(e.getSQLState()); System.out.println(e.getMessage()); System.out.println(e.getErrorCode()); System.out.println("ERROR: updateservicerequests()"); finally try pstmtupdate.close(); conn.close(); catch(sqlexception e2) System.out.println(e2); System.out.println("Error dari finally block updatepatient"); public List<ServiceRequestsBean> findservicerequestsbyid(int svrid) List<ServiceRequestsBean> retval = new ArrayList<ServiceRequestsBean>(); Connection connection = null; PreparedStatement pstmtselect=null; ResultSet rs=null; try connection = connecttodatabase(); String sql = "SELECT * FROM SERVICE_REQUESTS WHERE SVR_ID =? "; pstmtselect = connection.preparestatement(sql); pstmtselect.setint(1, svrid); rs = pstmtselect.executequery(); while (rs.next()) ServiceRequestsBean servicerequestsbean = new ServiceRequestsBean(rs.getInt("SVR_ID"),rs.getString("STATUS"),rs.getDate("REQUEST_DATE"),rs.getString("PROBLEM_DESCRIPTIO N"),rs.getInt("PROD_ID"),rs.getInt("CREATED_BY"),rs.getInt("ASSIGNED_TO"),rs.getDate("ASSIGNED_DATE")); retval.add(servicerequestsbean); catch (SQLException e) e.printstacktrace(); System.out.println(e.getSQLState()); System.out.println(e.getMessage()); System.out.println(e.getErrorCode()); System.out.println("ERROR: findservicerequestsbyid()"); catch (Exception e1) e1.printstacktrace(); 19

20 finally try rs.close(); pstmtselect.close(); connection.close(); catch(sqlexception e2) System.out.println(e2); return retval; public List<ServiceRequestsBean> findservicerequestsbystatus(string status) List<ServiceRequestsBean> retval = new ArrayList<ServiceRequestsBean>(); Connection connection = null; PreparedStatement pstmtselect=null; ResultSet rs=null; try connection = connecttodatabase(); String sql = "SELECT * FROM SERVICE_REQUESTS WHERE STATUS =? "; pstmtselect = connection.preparestatement(sql); pstmtselect.setstring(1, status); rs = pstmtselect.executequery(); while (rs.next()) ServiceRequestsBean servicerequestsbean = new ServiceRequestsBean(rs.getInt("SVR_ID"),rs.getString("STATUS"),rs.getDate("REQUEST_DATE"),rs.getString("PROBLEM_DESCRIPTIO N"),rs.getInt("PRODUCT_ID"),rs.getInt("CREATED_BY"),rs.getInt("ASSIGNED_TO"),rs.getDate("ASSIGNED_DATE")); retval.add(servicerequestsbean); catch (SQLException e) e.printstacktrace(); System.out.println(e.getSQLState()); System.out.println(e.getMessage()); System.out.println(e.getErrorCode()); System.out.println("ERROR: findservicerequestsbystatus()"); catch (Exception e1) e1.printstacktrace(); finally try rs.close(); pstmtselect.close(); connection.close(); catch(sqlexception e2) System.out.println(e2); return retval; public List<ServiceRequestsBean> findallservicerequests() List<ServiceRequestsBean> retval = new ArrayList<ServiceRequestsBean>(); Connection connection = null; PreparedStatement pstmtselect=null; ResultSet rs=null; try 20

21 connection = connecttodatabase(); String sql = "SELECT * FROM SERVICE_REQUESTS"; pstmtselect = connection.preparestatement(sql); rs = pstmtselect.executequery(); while (rs.next()) ServiceRequestsBean servicerequestsbean = new ServiceRequestsBean(rs.getInt("SVR_ID"),rs.getString("STATUS"),rs.getDate("REQUEST_DATE"),rs.getString("PROBLEM_DESCRIPTIO N"),rs.getInt("PRODUCT_ID"),rs.getInt("CREATED_BY"),rs.getInt("ASSIGNED_TO"),rs.getDate("ASSIGNED_DATE")); retval.add(servicerequestsbean); catch (SQLException e) e.printstacktrace(); System.out.println(e.getSQLState()); System.out.println(e.getMessage()); System.out.println(e.getErrorCode()); System.out.println("ERROR: findallservicerequests()"); catch (Exception e1) e1.printstacktrace(); finally try rs.close(); pstmtselect.close(); connection.close(); catch(sqlexception e2) System.out.println(e2); return retval; public List<ServiceRequestsBean> searchservicerequests(string status, String problemdescription) List<ServiceRequestsBean> retval = new ArrayList<ServiceRequestsBean>(); Connection connection = null; PreparedStatement pstmtselect=null; ResultSet rs=null; /* if(status==null) status="%"; if(problemdescription==null) problemdescription="%"; */ String statusp = "%"+status+"%"; String problemdescriptionp ="%"+problemdescription+"%"; try connection = connecttodatabase(); String sql = "SELECT * FROM SERVICE_REQUESTS WHERE (STATUS LIKE UPPER(?) OR STATUS LIKE LOWER(?) OR STATUS LIKE INITCAP(?)) AND (PROBLEM_DESCRIPTION LIKE LOWER(?) OR PROBLEM_DESCRIPTION LIKE UPPER(?) OR PROBLEM_DESCRIPTION LIKE INITCAP(?))"; pstmtselect = connection.preparestatement(sql); pstmtselect.setstring(1, statusp); pstmtselect.setstring(2, statusp); pstmtselect.setstring(3, statusp); pstmtselect.setstring(4, problemdescriptionp); pstmtselect.setstring(5, problemdescriptionp); 21

22 pstmtselect.setstring(6, problemdescriptionp); rs = pstmtselect.executequery(); while (rs.next()) ServiceRequestsBean servicerequestsbean = new ServiceRequestsBean(rs.getInt("SVR_ID"),rs.getString("STATUS"),rs.getDate("REQUEST_DATE"),rs.getString("PROBLEM_DESCRIPTIO N"),rs.getInt("PROD_ID"),rs.getInt("CREATED_BY"),rs.getInt("ASSIGNED_TO"),rs.getDate("ASSIGNED_DATE")); retval.add(servicerequestsbean); catch (SQLException e) e.printstacktrace(); System.out.println(e.getSQLState()); System.out.println(e.getMessage()); System.out.println(e.getErrorCode()); System.out.println("ERROR: searchservicerequests()"); catch (Exception e1) e1.printstacktrace(); finally try rs.close(); pstmtselect.close(); connection.close(); catch(sqlexception e2) System.out.println(e2); return public void removeservicerequests(int svrid) Connection conn = null; PreparedStatement pstmtdelete=null; PreparedStatement pstmtupdate=null; try conn = connecttodatabase(); String sqldelete2 = "DELETE FROM SERVICE_HISTORIES WHERE SVR_ID =?"; String sqldelete = "DELETE FROM SERVICE_REQUESTS WHERE SVR_ID =?"; pstmtdelete = conn.preparestatement(sqldelete2); pstmtupdate = conn.preparestatement(sqldelete); pstmtdelete.setint(1, svrid); pstmtupdate.setint(1, svrid); pstmtdelete.executeupdate(); pstmtupdate.executeupdate(); catch (SQLException e) System.out.println(e.getSQLState()); System.out.println(e.getMessage()); System.out.println(e.getErrorCode()); System.out.println("ERROR: removeservicerequests()"); throw new EJBException(); finally try pstmtupdate.close(); conn.close(); catch(sqlexception e2) System.out.println(e2); 22

23 System.out.println("Error from finally block removeservicerequests"); public List<ServiceRequestsBean> findservicerequestsbycreatedby(int createdby) List<ServiceRequestsBean> retval = new ArrayList<ServiceRequestsBean>(); Connection connection = null; PreparedStatement pstmtselect=null; ResultSet rs=null; try connection = connecttodatabase(); String sql = "SELECT * FROM SERVICE_REQUESTS WHERE CREATED_BY =? "; pstmtselect = connection.preparestatement(sql); pstmtselect.setint(1, createdby); rs = pstmtselect.executequery(); while (rs.next()) ServiceRequestsBean servicerequestsbean = new ServiceRequestsBean(rs.getInt("SVR_ID"),rs.getString("STATUS"),rs.getDate("REQUEST_DATE"),rs.getString("PROBLEM_DESCRIPTIO N"),rs.getInt("PROD_ID"),rs.getInt("CREATED_BY"),rs.getInt("ASSIGNED_TO"),rs.getDate("ASSIGNED_DATE")); retval.add(servicerequestsbean); catch (SQLException e) e.printstacktrace(); System.out.println(e.getSQLState()); System.out.println(e.getMessage()); System.out.println(e.getErrorCode()); System.out.println("ERROR: findservicerequestsbycreatedby()"); catch (Exception e1) e1.printstacktrace(); finally try rs.close(); pstmtselect.close(); connection.close(); catch(sqlexception e2) System.out.println(e2); return retval; 4) Enter the following source code for UsersBean.java and import all necessary libraries. i. Libraries import java.sql.connection; import java.sql.preparedstatement; import java.sql.resultset; import java.sql.sqlexception; import java.util.arraylist; import java.util.list; import javax.annotation.resource; import javax.ejb.stateless; import javax.sql.datasource; 23

24 ii. Source code private int userid; private String userrole; private String ; private String firstname; private String lastname; private String streetaddress; private String city; private String stateprovince; private String postalcode; private String countryid; public UsersBean(int userid, String userrole, String , String firstname, String lastname, String streetaddress, String city, String stateprovince, String postalcode, String countryid) this.userid=userid; this.userrole=userrole; this. = ; this.firstname=firstname; this.lastname=lastname; this.streetaddress=streetaddress; this.city=city; this.stateprovince=stateprovince; this.postalcode=postalcode; this.countryid=countryid; //Dependancy Injection for private DataSource srconndatasource; public void setdatasource(datasource mydb) this.srconndatasource = mydb; public void setuserid(int userid) this.userid = userid; public int getuserid() return userid; public void setuserrole(string userrole) this.userrole = userrole; public String getuserrole() return userrole; public void set (string ) this. = ; public String get () return ; public void setfirstname(string firstname) this.firstname = firstname; public String getfirstname() return firstname; public void setlastname(string lastname) this.lastname = lastname; public String getlastname() return lastname; public void setstreetaddress(string streetaddress) this.streetaddress = streetaddress; 24

25 public String getstreetaddress() return streetaddress; public void setcity(string city) this.city = city; public String getcity() return city; public void setstateprovince(string stateprovince) this.stateprovince = stateprovince; public String getstateprovince() return stateprovince; public void setpostalcode(string postalcode) this.postalcode = postalcode; public String getpostalcode() return postalcode; public void setcountryid(string countryid) this.countryid = countryid; public String getcountryid() return countryid; private Connection connecttodatabase() Connection conn=null; int ret_code; try conn=srconndatasource.getconnection(); catch (SQLException se) ret_code = se.geterrorcode(); System.out.println("SQL Error while connecting to the database : "+ se.tostring()); catch (Exception ne) System.out.println("Other Error while connecting to the database : "+ ne.tostring()); return conn; public void insertusers(int userid, String userrole, String , String firstname, String lastname, String streetaddress, String city, String stateprovince, String postalcode, String countryid) Connection conn = null; PreparedStatement pstmtinsert=null; try conn = connecttodatabase(); String sqlinsert = "INSERT INTO USERS (USER_ID, USER_ROLE, , FIRST_NAME, LAST_NAME, STREET_ADDRESS, CITY, STATE_PROVINCE, POSTAL_CODE, COUNTRY_ID) VALUES (?,?,?,?,?,?,?,?,?,?)"; pstmtinsert = conn.preparestatement(sqlinsert); pstmtinsert.setint(1, userid); pstmtinsert.setstring(2, userrole); pstmtinsert.setstring(3, ); pstmtinsert.setstring(4, firstname); 25

26 pstmtinsert.setstring(5, lastname); pstmtinsert.setstring(6, streetaddress); pstmtinsert.setstring(7, city); pstmtinsert.setstring(8, stateprovince); pstmtinsert.setstring(9, postalcode); pstmtinsert.setstring(10, countryid); pstmtinsert.executeupdate(); catch (SQLException e) System.out.println(e.getSQLState()); System.out.println(e.getMessage()); System.out.println(e.getErrorCode()); System.out.println("ERROR: insertusers()"); finally try pstmtinsert.close(); conn.close(); catch(sqlexception e2) System.out.println(e2); public void updateusers(int userid, String userrole, String , String firstname, String lastname, String streetaddress, String city, String stateprovince, String postalcode, String countryid) Connection conn = null; PreparedStatement pstmtupdate=null; try conn = connecttodatabase(); String sqlupdate = "UPDATE USERS SET USER_ROLE =?, =?,FIRST_NAME =?,LAST_NAME =?,STREET_ADDRESS =?,CITY =?,STATE_PROVINCE =? POSTAL_CODE =?,COUNTRY_ID=? WHERE USER_ID =?"; pstmtupdate = conn.preparestatement(sqlupdate); pstmtupdate.setstring(1, userrole); pstmtupdate.setstring(2, ); pstmtupdate.setstring(3, firstname); pstmtupdate.setstring(4, lastname); pstmtupdate.setstring(5, streetaddress); pstmtupdate.setstring(6, city); pstmtupdate.setstring(7, stateprovince); pstmtupdate.setstring(8, postalcode); pstmtupdate.setstring(9, countryid); pstmtupdate.setint(10, userid); pstmtupdate.executeupdate(); catch (SQLException e) System.out.println(e.getSQLState()); System.out.println(e.getMessage()); System.out.println(e.getErrorCode()); System.out.println("ERROR: updateusers()"); finally try pstmtupdate.close(); conn.close(); catch(sqlexception e2) System.out.println(e2); System.out.println("Error from finally block updateusers"); 26

27 public List<UsersBean> findallusers() List<UsersBean> retval = new ArrayList<UsersBean>(); Connection connection = null; PreparedStatement pstmtselect=null; ResultSet rs=null; try connection = connecttodatabase(); String sql = "SELECT * FROM USERS"; pstmtselect = connection.preparestatement(sql); rs = pstmtselect.executequery(); while (rs.next()) UsersBean usersbean = new UsersBean(rs.getInt("USER_ID"),rs.getString("USER_ROLE"),rs.getString(" "),rs.getString("FIRST_NAME"),rs.getString("LAST_NA ME"),rs.getString("STREET_ADDRESS"),rs.getString("CITY"),rs.getString("STATE_PROVINCE"), rs.getstring("postal_code"), rs.getstring("country_id")); retval.add(usersbean); catch (SQLException e) e.printstacktrace(); System.out.println(e.getSQLState()); System.out.println(e.getMessage()); System.out.println(e.getErrorCode()); System.out.println("ERROR: findallusers()"); catch (Exception e1) e1.printstacktrace(); finally try rs.close(); pstmtselect.close(); connection.close(); catch(sqlexception e2) System.out.println(e2); return retval; public void removeuser(int userid) Connection conn = null; PreparedStatement pstmtupdate=null; try conn = connecttodatabase(); String sqldelete = "DELETE FROM USERS WHERE USER_ID =?"; pstmtupdate = conn.preparestatement(sqldelete); pstmtupdate.setint(1, userid); pstmtupdate.executeupdate(); catch (SQLException e) 27

28 System.out.println(e.getSQLState()); System.out.println(e.getMessage()); System.out.println(e.getErrorCode()); System.out.println("ERROR: removeusers()"); finally try pstmtupdate.close(); conn.close(); catch(sqlexception e2) System.out.println(e2); System.out.println("Error from finally block removeusers"); public List<UsersBean> findusersbyuserid(int userid) List<UsersBean> retval = new ArrayList<UsersBean>(); Connection connection = null; PreparedStatement pstmtselect=null; ResultSet rs=null; try connection = connecttodatabase(); String sql = "SELECT * FROM USERS WHERE USER_ID=?"; pstmtselect = connection.preparestatement(sql); pstmtselect.setint(1, userid); rs = pstmtselect.executequery(); while (rs.next()) UsersBean usersbean = new UsersBean(rs.getInt("USER_ID"),rs.getString("USER_ROLE"),rs.getString(" "),rs.getString("FIRST_NAME"),rs.getString("LAST_NA ME"),rs.getString("STREET_ADDRESS"),rs.getString("CITY"),rs.getString("STATE_PROVINCE"), rs.getstring("postal_code"), rs.getstring("country_id")); retval.add(usersbean); catch (SQLException e) e.printstacktrace(); System.out.println(e.getSQLState()); System.out.println(e.getMessage()); System.out.println(e.getErrorCode()); System.out.println("ERROR: findallusers()"); catch (Exception e1) e1.printstacktrace(); finally try rs.close(); pstmtselect.close(); connection.close(); catch(sqlexception e2) System.out.println(e2); return retval; 5) Exposed all methods through Local & Remote interface for both ServiceRequestsBean.java and UsersBean.java, using steps mentioned previously. 28

29 6) Compile both ServiceRequestsBean.java and UsersBean.java. Practice 4 In this practice, you create a data control based on a Session EJB. You then create a simple JSF and use the data control to bind data to the page. Practice 4-1: Create and Use a Data Control In this section, you create a data control based on an existing EJB model. You then create a simple master-detail page that consumes the data control. The page is based on Users as the master and displays all the ServiceRequests that belong to the user as the detail. Start this practice with your application from the previous practice. 1) Create a data control based on the ServiceRequestsBean.java and UsersBean.java in the DataModel project. i. Right-click ServiceRequestsBean.java in the DataModel project and select Create Data Control. ii. Select Local for the EJB interface type. iii. Click OK. iv. Notice the files that are created in the DataModel project. v. Save your work. vi. Do the same for UsersBean.java vii. This is what you will see. 29

30 2) Open a JSF Navigation diagram on the UserInterface project. Right-click UserInterface in the Application Navigator and click Open JSF Navigation. 3) Add a JSF Page reference to the diagram and name it usersservicerequests.jsp. i. Click JSF Page on the Component Palette and click anywhere on the diagram. ii. Enter the name usersservicerequests.jsp. 4) Create the JSF JSP. i. Double-click the JSF reference on the JSF Navigation diagram. ii. Name it usersservicerequests. iii. Make it a JSP Document (*.jspx) iv. Include an automatic backing bean. v. Accept the default libraries. 5) Add an ADF Read-only Form based on the Users collection. i. Open the Visual Editor for the usersservicerequests.jsp. (Double-click usersservicerequests.jsp in the Applications Navigator or click the usersservicerequests.jsp tab). ii. Drag UsersLocal > findallusers > Users from the Data Control Palette to the JSF diagram. iii. Select Forms ADF Read-only Form from the pop-up menu. iv. In the Edit Form Fields dialog box, select Include Navigation Controls and click OK. v. JDeveloper advises you that it has added the Embedded OC4J Client libraries to your project. Click OK. vi. Save your work. 6) Run the page to see the User data. Right-click anywhere in the Visual Editor and click Run. 7) Your page should look something like: 8) Add a data control for the detail portion of the page. i. In the Data Control Palette, drag ServiceRequestsLocal > findservicerequestsbycreatedby > ServiceRequestsBean to the bottom of the form on your page. ii. Select Tables ADF Read-only Table. 30

31 In the Action Binding Editor, click [ ] button inside Value column. In the Variable dialog box, expand ADF Bindings > Bindings, click userid and click button > to move it to the expression column, then OK and OK (Action Binding Editor). v. Click OK to accept the default Table Columns. iii. iv. 9) Run the page. You have to scroll through some Users to find one with Requests. 10) Your page should look something like: Practice 4-2: Modify the Binding In this section, you modify the binding for the Service Requests (createdby) to display only one row at a time. Displaying only one row is something you would probably not do; however, this helps demonstrate how changing properties on a data binding changes the way a page behaves. 1) Open the page definition for your page. i. Right-click anywhere on your page. ii. Click Go to Page Definition. 2) Select executables > findservicerequestbycreatedbyiter in the Structure window. 3) Change the RangeSize property to 1 in the Properties Inspector. 4) Run the page. 5) Your page now includes controls that allow the user to display to next set of rows when there is more than 1. They can also choose to display all the rows at one time. The controls should look something like: 31

32 Practice 5 In this practice, you use various ADF Faces Layout components to create a template that you use in all the other pages you create. Practice 5-1: Create a Template jspx In this section, you create a template.jspx page and add layout components that help make all your pages look the same. Start this practice with your application from the previous practice. The template uses images from an images directory. The first step is to copy the image directory and the images it contains to the UserInterface project. If you are using your project from a previous practice, copy the image directory to the public_html directory in your project. 1) In Windows Explorer (or the equivalent if you are using another operating system), navigate to the MiscFiles directory, which is in the same directory as the practice workspaces. 2) Copy the images subdirectory and paste it in EJB-JSF > ViewController > public_html. 3) The directory structure should look like: 4) Copy the UIResources.properties file from the MiscFiles directory to your ViewController directory. 5) Click the refresh button on the Applications Navigator to see the properties file. It will be under a Resources node. 6) Open the JSF Navigation diagram in the UserInterface project. 7) Create a JSF page on the diagram named template.jsp. 8) Double-click the new page reference and complete the wizard with the following attributes: Filename: template.jsp Type: JSP Page (*.jsp) Do Not Automatically Expose UI Components in a New Managed Bean 32

33 Accept the default libraries Next, add the components to the template page. 9) Add an ADF Faces Core panelpage component to the page. i. Click the ADF Faces Core page in the Component Palette. ii. Click PanelPage. 10) In the Property Inspector, enter Change Me in the Title property. You modify this title appropriately for the pages you subsequently develop from the template page 11) Expand UserInterface > Web Content > images in the Applications Navigator. 12) Drag SRBranding.gif to the branding facet in the top left corner. A facet is a slot in the panelpage into which you can place a UI component to provide a particular visual effect on the page. Choose GraphicImage as the component type in the pop-up dialog. In the next steps, you add a LoadBundle tag, which is used to help in the translation process when internationalizing applications. The loadbundle tag identifies the resource bundle that is used in the jspx pages of the application. 13) Click anywhere inside the template.jsp. 14) Select the JSF Core Component Palette page. Drag the LoadBundle component to the Structure window, and drop it above <>afh:head template. 15) In the Insert LoadBundle pop-up window, set the Basename to UIResources (or use [ ]) and click the Properties File option button, to browse for the properties file. Set the Var property to res (res is the page-scoped alias for the resource bundle, which can then be used in Expression Language throughout the pages). Click OK. 16) Add copyright information. i. In the Visual Editor (or Structure window), select the appcopyright facet. ii. Right-click the facet and choose Insert inside appcopyright, and then choose OutputText from the shortcut menu. iii. Right-click af:outputtext and choose Properties from the shortcut menu. Click Bind to the right of the Value field. iv. In the Bind to Data dialog box, expand the JSP Objects node and then the res node in the Variables tree. v. Scroll down to locate sr.copyright. Select it and click > to shuttle it into the Expression pane. Click OK, and then click OK again. (Alternatively, you can enter #res['sr.copyright'] directly into the Value property in the Property Inspector.) vi. In the Property Inspector, change the Escape property to false so that the markup in the resource string is printed as a correct copyright symbol. 17) Add an About link to provide information about the application. i. Right-click the appabout facet in the Visual Editor. From the shortcut menu, choose Insert inside appabout and then choose CommandLink. ii. In the Structure window, double-click CommandLink and in the Properties dialog box, click Bind to the right of the Text property. iii. In the Bind to Data dialog box, expand JSP Objects and then res in the Variables tree. iv. Scroll to locate sr.about and click > to shuttle it into the Expression pane. Click OK, and then click OK again. (Alternatively, you can enter #res['sr.about'] in the Text property in the Property Inspector.) v. Set the Immediate property to true. You use the Immediate property to shortcut the JSF life cycle when you do not need the data in the screen to be applied, as with a Help link (or here with the About button). 18) Add contact information. i. Right-click the appprivacy facet in the Structure window and choose Insert inside appprivacy CommandLink from the shortcut menu. ii. In the Property Inspector, enter #res['sr.contact'] in the Text property and dialog:globalcontact in the Action property. Note that this format ( dialog: ) is a feature of ADF Faces and is not provided by the JSF specification. 19) The completed template should look something like the following: 20) You can also run the page. Right-click anywhere on the page and select Run. The running page should look something like: 33

34 Practice 5-2: Create the SREdit Page and Apply the Template In this section, you create the SREdit page and apply the template you just created. 1) Open the JSF Navigation diagram. 2) Create the SREdit.jspx with the following attributes: Type: JSP Document (*.jspx) Select Automatically Expose UI Components in a New Managed Bean Accept the default libraries. i. Double-click /SREdit.jsp on the JSF Navigation diagram. ii. Click Next to skip the Welcome page. iii. Select JSP Document as the Type and click Next. iv. Select Automatically Expose UI Components in a New Managed Bean and click Next. v. Click Next to accept the default libraries. vi. Click Finish to create the page. You can now apply the template you created in the previous section of this practice to the new page. 3) Open the template.jsp file if it is not already open. In the Structure window, right-click the afh:html node and choose Copy from the shortcut menu. 4) Click the tab to return to the SREdit page. In the Structure window, expand the f:view node. 5) Delete the html node. Then right-click f:view and choose Paste from the shortcut menu. 6) Select afh:html afh:body h:form: af:panelpage Change Me and set the Title property to SR Edit. The value of this property becomes the browser title. 7) The Visual Editor now displays the SREdit page with the look and feel of the template which you will use for the other pages in later practices. 8) The page should look something like: 34

35 Practice 5-3: Add Data-Aware Components to the SREdit Page In this section, you add an ADF Form component that will display a service request. 1) Select the ADF Faces Core page in the Component palette. Scroll through the list to find PanelBox and drag it into the panelpage. The panelbox defines the content area for the page. 2) The Structure pane should look like: 35

36 3) Now add the data to the page. Select the Data Control palette and expand ServiceRequestsLocal. Scroll down to select findservicerequestbyid(integer) > ServiceRequests and drag it to the page, inside the panelbox. 4) In the pop-up menu, select Forms > ADF Form. 5) In the Edit Form Fields dialog box, reorder the columns as follows: svrid, requestdate, status, assigneddate, and problemdescription. Do not close the dialog box yet. 6) Still in the dialog box, click the Component to Use field to the right of svrid, and from the drop-down list, select ADF Output Text w/label. Do the same for the requestdate field. Click OK. 7) In the Action Binding Editor dialog box, set the value for findsvrid to 100. This is temporary so that it queries a row when you test the page. Click OK. 8) Select the problemdescription field and, in the Property Inspector, set the Rows property to 4 to make this a multiline item so that a user has space to provide a textual description of the appliance problem. 9) Change the Columns property to ) In the Structure pane, expand af:panelpage > af:panelbox > af:panelform > PanelForm facets. Select panelbuttonbar in the ADF Faces Core Component palette, and drag it to the footer facet of the PanelForm. 11) Drag two CommandButtons from the ADF Faces Core Component palette to the panelbuttonbar. In the Property Inspector, set their properties to the values in the following table: ID Text cancelbutton Cancel commitbutton Save 12) The Structure pane should look like: 13) Right-click anywhere on the page and select Run. The page should run and display Service Request 100 and look something like: 36

37 Practice 6 In this practice, you add a form to the SRSearch page. The form is based on a method in EJB. Practice 6-2: Add Data Components to the Search Page In this section, you create the SRSearch page and add a Parameter Form that uses the searchservicerequests method to the Search page. 1) Open the JSF Navigation diagram. 2) Create the SRSearch.jspx with the following attributes: Type: JSP Document (*.jspx) Select Automatically Expose UI Components in a New Managed Bean. Accept the default libraries. i. Double-click /SRSearch.jsp on the JSF Navigation diagram. ii. Click Next to skip the Welcome page. iii. Select JSP Document as the Type and click Next. iv. Select Automatically Expose UI Components in a New Managed Bean and click Next. v. Click Next to accept the default libraries. vi. Click Finish to create the page. You can now apply the template you created in the previous section of this practice to the new page. 3) Open the template.jsp file if it is not already open. In the Structure window, right-click the afh:html node and choose Copy from the shortcut menu. 4) Click the tab to return to the SRSearch page. In the Structure window, expand the f:view node. 5) Delete the html node. Then right-click f:view and choose Paste from the shortcut menu. 6) Select afh:html > afh:body > h:form: > af:panelpage Change Me and set the Title property to #res['srsearch.pagetitle']. This will use the UIResources.properties file for the value. 7) The Visual Editor now displays the SRSearch page with the look and feel of the template that you will use for the other pages in later practices. 8) The page should look something like: 37

38 Next, add a parameterized form to the page. 9) In the Component palette, open the ADF Faces Core page and drag a PanelBox to the af:panelpage in the Structure window. This action creates a placeholder for the query component of the page. 10) On the Data Control Palette, expand the ServiceRequestsLocal control, and locate searchservicerequests(string, String). 11) Add the searchservicerequests as a Parameter Form. i. Select searchservicerequests(string, String) and drag it to af:panelbox. ii. Select Parameters ADF Parameter Form from the pop-up menu. iii. Click OK in the Edit Form Fields dialog box to accept the defaults. These actions add a form with two fields and a Search button. 12) Change the Label property of the description af:inputtext component to #res['srsearch.detail.description.label']. You can either enter the value or use the Binding Editor. 13) Change the Label property of the status af:inputtext component to #res['srsearch.detail.status.label']. 14) Change the Text property of the Search button to #res['srsearch.searchlabel']. Now that you have a form that executes the query, you need to add a component to display the results. 15) In the Data Control Palette, expand searchservicerequests and drag the subnode ServiceRequests to the af:panelpage. 16) In the pop-up menu, select Tables ADF Read-only Table. This table displays the search results. You see the Edit Table Columns window, where you can change the display label, the binding value, and the type of component used to display it. The default values originate from those defined in the data model. 17) Using the Top, Up, Down, and Bottom buttons, reorder the columns of the table to the following: srvid, problemdescription, status, requestdate, and assigneddate. 18) Select the Enable selection check box and accept the defaults. Click OK to continue. 19) With the af:table selected in the Structure window, change the Id property to srtable. 20) Delete the Submit button. 21) Save the page. 38

39 Practice 6-3: Modify the Default Behavior The default behavior of the parameter form is to simply accept the values the user enters and execute the query. This means the user must put a value or a wildcard in each of the fields for the query to return results. That is probably fine if it is a two-field form, but more than that would present usability issues to users. In this section, you add Expression Language (EL) to the page-definition parameters that insert a wildcard if the user does not enter a value in the field. You add this code to each of the parameters so that the user can enter either or both parameters. 1) Select the page definition for the SRSearch page in the Applications Navigator. You could also right-click anywhere on the SRSearch page and select Go to Page Definition. 2) In the Structure window, expand bindings > searchservicerequests. 3) Double-click the problemdescription property. 4) For the NDValue in the NamedData Properties dialog box, click the ( ) button (browse/edit). The expression is what populates the parameter before it is passed to the query for execution. By default, the parameter is populated from the related field on the parameter form. The code you are about to add checks for a value and returns a wildcard ( % ) if the parameter is either null or blank. 5) Replace the default expression for descr with the following code: $((bindings.searchservicerequests_problemdescription== null) (bindings.searchservicerequests_problemdescription== ''))? '%' : bindings.searchservicerequests_problemdescription The preceding code tests problemdescription for null and for blank (''). If either is true, the expression returns a wildcard ('%'). If problemdescription is not null, the expression returns the value that the user entered. 6) Click OK to accept the changes. Click OK again to close the dialog box. 7) Double-click the status property. 8) For the NDValue in the Named Data Properties dialog box, click the ( ) button (browse/edit). 9) Replace the default expression for status with the following code: $((bindings.searchservicerequests_status== null) (bindings.searchservicerequests_status== ''))? '%' : bindings.searchservicerequests_status 10) Run the page. Right-click SRSearch.jspx in the Applications Navigator and select Run, or right-click anywhere in the SRSearch.jspx Visual Editor and select Run. 11) Click the Search button without entering values in either of the fields. The result should show all the service requests. 12) Enter open in the status field and click Search. The result should be all the open service requests. 13) Enter a value in the description field (for example, %wash% ), and then click Search. You should now see the rows with wash somewhere in the description with a status of open. 14) Clear the status field and click Search. You should now see all the rows with wash somewhere in the description. When you first ran the page, the query was executed when the page was loaded. Because you added the code to substitute wildcards for null values, the initial query returns and displays all rows. In the final few steps, you add a refresh condition that keeps the form from executing the query until the user clicks the Search button. 15) Select the page definition for the SRSearch page in the Applications Navigator. 16) In the Structure pane, expand executables. 17) Click searchservicerequestsiter. 18) In the Properties Inspector, change the RefreshCondition to $adffacescontext.postback. This prevents the Iterator from executing unless the request is a postback. 19) Run the page. Right-click SRSearch.jspx in the Applications Navigator and select Run, or right-click anywhere in the SRSearch.jspx Visual Editor and select Run. 20) Notice that the detail table does not display any rows until you click Search. 39

40 Practice 7 In this practice, you complete the Edit page by adding some lookup fields and adding the commit functionality. Practice 7-1: Complete the Edit Page In this section, you complete the SREdit page. You add a some lookup fields that make the page more user-friendly. You also add a button that will commit any changes you make to the displayed row. In the next few steps, you add a couple of lookup fields that shows the user that created the requests and the technician that is assigned to the request. The and attributes of the ServiceRequest object are actually createdby assignedto child-object accessors. In the following steps, you bind the relevant name attributes from these child objects into the page. Start this practice with your application from the previous practice. 1) Open the SREdit.jspx page in the Visual Editor. 2) The first component you add contains the first and last names of the user who created the service request. Select PanelLabelAndMessage in the ADF Faces Core Component palette, and in the Visual Editor, drag it to the page beneath the svrid field. 3) The second component contains the first and last names of the technician to whom the service request is assigned. Drag and drop a second PanelLabelAndMessage component beneath the requestdate field. 4) Drop a PanelHorizontal inside each af:panellabelandmessage component. This ensures that the and attributes appear side by side instead of firstname lastname vertically. In the next few steps, you add and bind data components for the first and last name of the created by and assigned to users to the user interface. 5) In the Data Control Palette, expand the UsersLocal > findusersbyuserid(int) > UsersBean node, and select firstname the attribute. i. Drag it to the first of the panelhorizontals, and drop it as ADF Output Text. ii. Action Binding Editor dialog box will appear, click [ ] button inside Value field, iii. Inside Variables dialog box, expand ADF Bindings > bindings and select assignedto, click button > to move it to column Expression and click OK and iv. Click OK in Action Binding Editor dialog box 6) Select an ObjectSpacer in the ADF Faces Core Component palette. Drag it to the PanelHorizontal separator facet of the Structure window (expand the PanelHorizontal facets node if necessary). Set its Width property to 4. 7) Repeat the step 5 with the lastname attribute, placing it in the af:panelhorizontal component. 40

41 8) In the Data Control Palette, expand the UsersLocal > findusersbyuserid(int) > UsersBean node, and select the firstname attribute. Drag it into the second of the panelhorizontals, and drop it as ADF Output Text. 9) Add an ObjectSpacer to the separator facet of this PanelHorizontal as you did earlier. Again, set its width to 4. 10) Repeat the previous step with the lastname attribute, placing it in the af:panelhorizontal component. Next, change the labels of the panellabelandmessage components to use UIResources. 11) Select the first panellabelandmessage component and change the Label property to #res['sredit.createdby.label']. 12) Select the second panellabelandmessage component and change the Label property to #res['sredit.assignedto.label']. 13) Save the page. At this point, the page should look something like the following: 14) Run the page to see the results. The page should look something like: The status field should offer the user a drop-down list of the different statuses available. The last few steps in this section change the status field from a plain text field to a drop-down list. 15) Delete both the label and input text for the existing status field from the page. 16) In the Data Control Palette, expand findservicerequestbyid > ServiceRequests, and select the status attribute. Drag it to its old 41

42 position in the page, and drop it as Single Selections > ADF Select One Choice. The selectonechoice component creates a menu-style component that enables the user to select a single value from a list of items. 17) In the List Binding Editor, select the Fixed List option. Set the Base Data Source Attribute to status. 18) In the Set of Values box, enter the following values, each on a new line: Open Pending Closed These values are displayed at run time. 19) Set the No Selection Item field to Selection Required. Click OK. 20) In the Property Inspector, for the new af:selectonechoice, set the ID property of the new list component to statusselection, and save the page. 21) Change the Label property to #res['sredit.status.label'], to use UIResources. 22) Run the page to see the results. The page should look something like the following: 42

43 Practice 7-2: Add the Commit Function The buttons you added are just command buttons that are not linked to any action or method. In this section, you bind the Save button to the action you want to perform when the user clicks Save. When the user clicks the Save button, you need to save the changes to the database. 23) In the Data Control Palette, locate the updateservicerequest(int, String, Date, String, int, int, int, Date) method. Drag it to the Visual Editor and drop it on the Save button that you created earlier. From the pop-up menu, choose Bind Existing CommandButton. 24) In the Action Binding Editor, click in the Value field, and then click the [ ] that appears. In the Variables dialog box, expand the ADF Bindings node and then the bindings node. Enter Value column according to picture below. Click OK, and then click OK again. 25) Save the page. 26) Run the page and change the status value from Closed to Open. 27) Click Save. 28) In JDeveloper, click the Connections tab. 29) Expand Database > srconn > SRDEMO Tables. 30) Double-click SERVICE_REQUESTS to open the database table viewer. 31) Click the Data tab to see that the first row (SVR_ID 100) has a status of Open. 43

44 Practice 8 In this practice, you wire-up the SRSearch page to the SREdit page. When users query rows on the Search page, they can click the Edit button, which directs them to the Edit page. In addition to directing them to the Edit page, the Edit button also stores the current servicerequestid in a managed bean. The Edit page retrieves the row using the stored servicerequestid. You also add a delete function and page to the application. Practice 8-1: Link SRSearch to SREdit In this section, you edit the SRSearch page to add functionality to the Edit button. You need to add code to the backing bean that retrieves the ServiceRequests ID from the currently selected row and stores it in the UserState managed bean. You also add a return statement that specifies which JSF Navigation Case to use. Start this practice with your application from the previous practice. 1) Open SRSearch.jspx in the Visual Editor. 2) In the structure window, expand h:form > af:panelpage > af:table srtable > Table facets > selection. 3) Right-click af:tableselectone Select > Select InsertInside > CommandButton. 4) Repeat the previous step to add a second CommandButton. 5) Select the first CommandButton either in the Visual Editor or the Structure window. 6) In the Properties Inspector, change the ID to editbutton. 7) Change the Text property to #res['srsearch.editbutton']. 8) Select the second CommandButton either in the Visual Editor or the Structure window. 9) In the Properties Inspector, change the ID to deletebutton. 10) Change the Text property to #res['srsearch.deletebutton']. Next, you add code to the Edit button that will store the current servicerequestid in the userstate managed bean and return the navigation case. 11) In the Visual Editor, double-click the Edit button to invoke the backing bean. 12) In the Bind Action Property dialog box, click OK to add the editbutton_action method to the backing bean. 13) In the backing bean file, replace the generated code in the editbuttonaction method with the following code to specify its navigation path. Note: You can use the Structure window to find the editbutton_action() method. setcurrentsvridfromrow(); return "edit"; 14) The setcurrentsvridfromrow method does not yet exist. Click the CodeAssist icon (the light bulb in the left margin) to create it. 15) Implement the setcurrentsvridfromrow method by adding the following code: *** Make sure you have done Practice 2 properly 16) Accept the default import statements: *** Make sure you have done Practice 2 properly FacesContext ctx = FacesContext.getCurrentInstance(); JUCtrlValueBindingRef tablerowref = (JUCtrlValueBindingRef)this.getSrtable().getRowData(); Integer svrid = (Integer)tableRowRef.getRow().getAttribute("svrId"); UserSystemState.storeCurrentSvrID(svrId); oracle.jbo.uicli.binding.juctrlvaluebindingref sr.view.usersystemstate javax.faces.context.facescontext Next, you need to add an action that will refresh the table when the user returns from the Edit page. 17) Open the Page Definition for the SRSearch page. 18) In the Structure window, right-click the executables node, and choose Insert inside executables invokeaction. 19) In the Insert invokeaction dialog box, enter tablerefresh as the id, and in the Binds field, choose searchservicerequests from the drop-down list. Do not exit the dialog box. 20) Click the Advanced Properties tab, and confirm that the Refresh property is set to IfNeeded. This controls whether a refresh should take place. 21) In the RefreshCondition property, enter $!adffacescontext.postback. 22) Click OK. 23) Save the page definition file. 44

45 24) Run the page. Right-click SRSearch.jspx in the Applications Navigator and select Run, or right-click anywhere in the SRSearch.jspx Visual Editor and select Run. 25) Enter values for the query, or just click Search. 26) If you click Edit, you will navigate to the Edit page but because you have not changed the default value in the Edit page query, it will return row 100. Next, you need change the SREdit page to retrieve the svrid from the userstate managed bean. The calling page (SRSearch) sets the svrid value in the userstate bean from the currently selected row. The SREdit page executes a query using the value of that bean property. Earlier, you set it to 100 just for temporary testing. Now you set it to the bean property value. 27) Open the SREdit page definition. 28) Expand bindings > findservicerequestbyid. 29) Select svrid and change the NDValue to $userstate.currentsvrid. You can either enter the value in the Properties Inspector, or use the EL editor. 30) Run the page and test that when you select a row and click Edit, the Edit page displays that row. When a user clicks the Cancel button on the Edit page, you discard the changes by not saving them. You then need to take the user back to the Search page. 31) Open SREdit Page Definition. 32) In the Structure window, right-click the executables node, and choose Insert inside executables > invokeaction. 33) In the Insert invokeaction dialog box, enter explicitrefresh as the id, and in the Binds field, choose findservicerequestbyid from the drop-down list. Do not exit the dialog box. 34) Click the Advanced Properties tab, and confirm that the Refresh property is set to IfNeeded. This controls whether a refresh should take place. 35) In the RefreshCondition property, enter $!adffacescontext.postback. 36) Double-click refresh to add it to the Expression. Click OK to close the editor, then click OK again to close the dialog box. 37) Save the page definition file. Set an actionlistener to fire when the user clicks the Cancel button, and trigger the refresh. 38) On the SREdit page, right-click the Cancel button and, from the shortcut menu, choose Insert inside af:commandbutton - Cancel > ADF Faces Core > SetActionListener. In the Insert SetActionListener dialog box, enter #true in the From* field and #userstate.refresh in the To* field. When fired, this listener populates the user state refresh property with the value of #true. Click OK. 39) In the Property Inspector, for the Cancel button, set the Action property to success. Now repeat the same process for the Save button. 40) In the Property Inspector, for the Save button, set the Action property to success. 41) As in the previous section, set an actionlistener to fire when the user clicks the Save button and trigger a refresh. 42) Right-click the Save button and, from the shortcut menu, choose Insert inside af:commandbutton - Save > ADF Faces Core > SetActionListener. 43) In the Insert SetActionListener dialog box, enter #true in the From* field and #userstate.refresh in the To* field. Click OK. 44) You can now test the page. Right-click anywhere on the SRSearch page and select Run. 45) Enter values for the query, or just click Search. 46) Select any row and click Edit. 47) Change a value and click Save. Notice that you are directed back to the SRSeach page and that your changes are shown. 48) Repeat the testing in any combination you choose. 45

46 Practice 8-2: Add a Delete Page In this section, you create the SRDelete page and apply the template. 1) Open the JSF Navigation diagram. 2) Create the SRDelete.jspx with the following attributes: Type: JSP Document (*.jspx) Select Automatically Expose UI Components in a New Managed Bean. Accept the default libraries. i. Double-click /SRDelete.jsp on the JSF Navigation diagram. ii. Click Next to skip the Welcome page. iii. Select JSP Document as the Type and click Next. iv. Select Automatically Expose UI Components in a New Managed Bean and click Next. v. Click Next to accept the default libraries. vi. Click Finish to create the page. You can now apply the template you created in the previous section of this practice to the new page. 3) Open the template.jsp file if it is not already open. In the Structure window, right-click the afh:html node and choose Copy from the shortcut menu. 4) Click the tab to return to the SRDelete page. In the Structure window, expand the f:view node. 5) Delete the html node. Then right-click f:view and choose Paste from the shortcut menu. 6) Select afh:html afh:body h:form: af:panelpage Change Me and set the Title property to Service Request Delete. The value of this property becomes the browser title. 7) The Visual Editor now displays the SREdit page with the look and feel of the template which you will use for the other pages in later practices. 8) The page should look something like: In this section, you add an ADF Read-only Form component that will display the currently selected Service Request. 9) Select the ADF Faces Core page in the Component palette. Scroll through the list to find PanelBox and drag it into the panelpage. The panelbox defines the content area for the page. 10) The Structure pane should look like: 11) Now add the data to the page. Select the Data Control Palette and expand ServiceRequestsLocal. Scroll down to select findservicerequestbyid(integer) > ServiceRequestsBean and drag it to the page, inside the panelbox.. 12) In the pop-up menu, select Forms > ADF Read-only Form. 13) Accept the defaults in the Edit Form Fields dialog box and click OK. 14) In the Action Binding Editor dialog box, set the value for svrid to $userstate.currentsvrid. You can either enter the value directly or use the Binding Editor. Click OK. 15) In the Structure pane, expand af:panelpage > af:panelbox > af:panelform > PanelForm facets. Select panelbuttonbar in the ADF Faces Core Component palette, and drag it to the footer facet of the PanelForm. 46

47 16) Drag two CommandButtons from the ADF Faces Core Component palette to the panelbuttonbar. 17) Change the Text properties of the first button to Cancel, and the second button to Delete. 18) The page should look something like: 47

48 Practice 8-3: Wire the Buttons In this section, you bind the Delete button to the removeservicerequests(int) method to complete the delete. You also specify the navigation case for the Cancel button. In the last few steps of this section, you edit the Delete button on the Search page to have it store the current service request ID so the Delete page can query the current row. 1) In the Data Control Palette, locate the removeservicerequests(int) method. Drag it to the Visual Editor and drop it on the Delete button. From the pop-up menu, choose Bind Existing CommandButton. 2) In the Action Binding Editor, click in the Value field, and then click the [ ] that appears. In the Variables dialog box, locate and expand the ADF Bindings > bindings > svrid node. Select svrid and shuttle it across to the Expression pane. Click OK, and then click OK again. 3) Select the Delete button and change the Action property to return and the Text property to Delete. 4) Select the Cancel button and change its Action property to cancel. In these last few steps, you add code to the Delete button on the SRSearch page to set the currentsvrid in the userstate bean to the currently selected row and return the navigation case to go to the Delete page. 5) Open the SRSearch page in the Visual Editor. 6) Double-click the Delete button and click OK to accept the proposed method. 7) Replace the default code with the following: setcurrentsvridfromrow(); return "delete"; You can now run and test the application. 8) Run the SRSearch page and search using any criteria you choose. 9) Select a row and click Edit. 10) Change something on the row and click Save. 11) Repeat the test, only this time deletes a row. 48

49 Appendix A Setting up Database for Practice A. Download and install Oracle Database 10g Express Edition (XE) a. Go to : click link : Oracle Database 10g Express Edition for Microsoft Windows b. Click: Accept License Agreement c. Download: Oracle Database 10g Express Edition (Universal) d. Install Oracle XE. Please remember the password. B. Install SRDemo scheme at Oracle 10g Express edition (XE). a. Launch JDeveloper 10g b. Make sure Oracle 10g XE is running. c. Follow steps below: i. If you are using JDeveloper, save your work and close. You will be asked to restart JDeveloper to complete the update. ii. iii. iv. Open JDeveloper and choose Help > Check for Updates. In the wizard, click Next and make sure that Search Update Centers and Internal Automatic Updates are both selected. Click Next. Among the available updates, locate Oracle ADF SRDemo Application and select it. Click Next to initiate the download. Note that the Update Center may display two versions of the SRDemo Sample application. For this guide, you want to choose the one that shows "EJB 3.0 session beans and TopLink persistence" in the description. v. When prompted, restart JDeveloper. vi. vii. When JDeveloper restarts, select Yes to open the SRDemo application workspace in the Application Navigator. JDeveloper displays the SRDemo Application Schema Install dialog to identify the database to use for the sample data. SRDemo Application Schema Dialog If you want to install the sample data and have access to a SYSTEM DBA account, enter the connection information in the Sample Install dialog. Note: The connection information you provide may be for either a local or a remote database, and that database may be installed with or without an existing SRDemo schema. a. Enter the followins:. Password for Database System Account: enter your password. Database host: localhost Database Listener Port: 1521 Database Service name: XE vi. Test the installation from Oracle Jdeveloper 10g a. Go to connections tab. b. Find SRDemo inside Database node and test the connection. 49