Portlet Application Development Webinar exercise using JSF and JPA with Rational Application Developer This exercise demonstrates how to create an end-to-end Java Persistence API (JPA) enabled Java Server Faces (JSF) portlet application using the Portal Toolkit features available in Rational® Application Developer. It also emphasizes how the Portal Toolkit simplifies the portlet development process. You can quickly compose the portlet application via wizards and a few drag and drops of the resulting objects. This exercise is based on an article titled ‘Simplifying development of JSF Portlet Applications using JPA with Rational Application Developer 8.0’ written by Charu Malhotra, Software Engineer, IBM Corporation. Corresponding webinar: https://attendee.gotowebinar.com/register/5964310007830697729 Introduction The Java Persistence API (JPA) was first developed as a part of the EJB 3.0 specification but, it emerged as an independent specification which can be used in any Java EE environment. The JPA API simplifies object relational mapping and data persistence. While developing a JPA application a developer directly deals with the JPA entities which are object representations of database tables. It exposes methods to manage and persist JPA entities which save the developer from writing the backend JDBC code. JPA persistence also ensures application data is in synch with the current state of the database. Product Versions Demonstrated · IBM® Rational® Application Developer (RAD) Version 9.6.1 (plus the Quick Edit View (QEV) Patch for full Rich Page Editor functionality) · IBM WebSphere Portal Server Version 8.5 Exercise Objective Use the Rational Application Developer to achieve the following tasks: · Create a portlet application targeted to a IBM WebSphere Portal server runtime using the Portal Toolkit Portlet Project wizard. · Generate JPA Manager Beans and JPA Entities using the JPA Manager Bean wizard and the JPA Entity Connfiguration wizard. · Create a database connection from the JPA tooling. · Consume the JPA data in portlet xhtml pages to create a simple JSF application. Portlet Project Creation The RAD Portal tooling features allow you to quickly create a sample application Portlet project and portlet strictly using the RAD User Interface. There is no need to write any code.

1. Select File -> New -> Portlet Project 2. The New Portlet Project wizard launches. Enter EmployeePortlet as the Portlet Project Name. In the Portlet settings group, the Create a portlet checkbox is checked by default. This also creates a portlet named EmployeePortlet inside the EmployeePortlet project. You can specify a different name for the portlet in the Portlet name text box, if desired. 3. Select the desired WebSphere Portal version as the Target Runtime, as shown in Figure 1. In this example, we are using a locally installed WebSphere Portal 8.5 Standalone server that was built previously.

Figure 1: New Portlet Project Wizard 4. Click the Modify button beside Configuration and select JSR 286 Portlet as the Portlet API and Faces Portlet as the Portlet Type from the Portlet Project Configuration dialog shown in Figure 2. Click OK.

Figure 2: Create JSR286 Faces portlet project 5. The Portlet Project wizard is back in focus again. Accept the default settings for the remaining fields on the New Portlet Project wizard and click Finish. 6. When prompted, switch to the Web perspective. A portlet project and the corresponding EAR are created and appear in the Enterprise Explorer view. The wizard also creates a portlet named EmployeePortlet in the EmployeePortlet project and finally an xhtml file named EmployeePortletView.xhtml is generated and displayed using the Rich Page editor, as shown in Figure 3.

Figure 3: EmployeePortlet project in the RAD Web perspective NOTE: Starting in RAD 9.6, the Page Designer Editor is no longer available for editing xhtml and jsp files. It has been replaced by the Rich Page Editor. Establishing the database connection NOTE: For demonstration purposes, an Employee table has already been created in the WebSphere Portal 8.5 runtime server’s DB2 database named WPSDB. The Employee table ddl and sample data are included as attachments as well as in an Appendix at the end of this document. The resulting portlet will use the existing wpdbDS datasource that was created during the Portal server installation for database communication purposes. The datasource as displayed by the WebSphere Admin Console is shown in Figure 4.

Figure 4: Portal Server Datasource This is a DB2 Type 4 datasource. The datasource name is wpdbDS, the JNDI Name is jdbc/wpdbDS and the JAAS Alias name is wpdbDSJAASAuth. The properties contained in the database connection need to match these properties or the application will not run after deployment. The portlet application will not be able to establish

a connection to the database due to the name, jndi name and authentication alias mismatches. 1. Open Database Development perspective. 2. Right-click Database Connections in Data Source Explorer view and select New. 3. The New Connection wizard opens, select DB2 as database manager. 4. In the Connection identification group, uncheck the ‘Use default naming convention’ box and set the Connection name to wpdbDS so that it matches the datasource name configured in the server. 5. Select IBM Data Server for JDBC and SQLJ (JDBC 4.0) as the JDBC driver. 6. Enter the required database properties including the DB2 user name and password in the New Connection wizard as shown in Figure 5. Select the checkbox to save DB2 password and test the connection. In addition to verifying the database connection, the Test Connection button verifies that the password is correct.

Figure 5: Specify driver properties 7. Click Finish. Now that there is a database connection established between RAD and DB2, in the Data Source Explorer view, expand the wpsdbDS connection, WPSDB database, DEMO schema and Employee table that was created earlier as shown in Figure 6.

Figure 6: Target Employee database table Right click on the Employee table. Select Data -> Return all rows. A query is executed and the result set containing 15 rows of data is displayed in the SQL Results view’s Results tab as shown in Figure 7.

Figure 7: Employee query result set Now that we have demonstrated that the database connection is established, go back to the Web perspective to create the JPA entities. JPA Entity and JPA Manager Bean creation The RAD JPA tooling help you to quickly create JPA entities and manager beans with few clicks on the wizards. Create the JPA entities 1. Right-click the Portlet project created above (EmployeePortlet) in the Enterprise Explorer view, and choose JPA Tools -> Configure JPA Entities as shown in Figure 8.

Figure 8: Launch Configure JPA Entities Wizard 2. If a JPA facet is not already installed, the wizard automatically installs the JPA 1.0 facet as the default. NOTE: The JPA Facet can also be enabled from the project facet page. 3. The Configure JPA Entities wizard appears. Click the Create New JPA Entities button to launch the Generate Custom Entities wizard. Refer to Figure 9.

Figure 9: Create New JPA Entities 4. Select the wpdbDS database connection and the DEMO schema, as shown in Figure 10.

Figure 10: Generate Custom Entities 5. Select the EMPLOYEE table and click Finish. This creates the Employee entity. 6. The Configure JPA Entities wizard is back in focus. Now configure the new entity. Select the Employee Entity and click Next as shown in Figure 11 below.

Figure 11: Configure JPA Entities 7. On the Tasks page the Employee entity is shown in the Primary Key task. The empId column is the primary key. 8. Click the Other task and choose the Add an equals and hash Code method if not present option and press Finish. Refer to Figure 12 below.

Figure 12: Select Primary Key Adding the JPA facet will create JPA configuration xml files (persistence.xml) in the java source META-INF folder. It also creates a top-level JPA Content node that provides quick access to the Persistence XML Editor. In addition to generating JPA entities the above steps also perform database and JPA configuration tasks. They configure the data source in the persistence.xml file as shown in Figure 13. The JPA entities also set the database connection information on the Deployment tab of the EAR's WebSphere Deployment Descriptor for use during runtime.

Figure 13: JPA Configuration persistence.xml files Create JPA Manager Beans JPA Manager Beans are a concept introduced by Rational Application Developer which helps differentiate it from other products. They perform the business logic related to an entity. They also handle the JPA specific persistence tasks, help access the database and manage entities effectively. The JPA manager bean wizard provides several options to auto-generate JPA queries and define relationships in the database. Create the JPA Manager bean (EmployeeManager bean) for the Employee Entity. 1. Right-click the EmployeePortlet project created above in the Enterprise Explorer view, and choose JPA Tools -> Add JPA Manager Beans as shown in Figure 14.

Figure 14: Launch JPA Manager Bean Wizard 2. The JPA Manager Bean wizard appears. Choose the Employee Entity from the Available JPA Entities list and click Next as shown in Figure 15.

Figure 15: Create Employee Manager Bean 3. The task page appears. Click the hyperlink named Launch Entity Configuration Wizard as shown below in Figure 16.

Figure 16: Launch Entity Configuration Wizard 4. Add a Named Query named getEmployee to the EmployeeManager bean. The Configure JPA Entities dialog appears. Select the Named Queries task and click the Add button to open Add Named Query dialog as shown in the Figure 17 below.

Figure 17: Launch Add Named Query Dialog 5. The Add Named Query dialog appears. A getEmployee query is created that is comprised of all columns contained in the Employee table. Making selections on the various tabs in the dialog allows you to select different result attributes, filter the result set and order the results as per your requirements. Refer to Figure 18.

Figure 18: Add Named Query Dialog 6. For this exercise select the empId field on the Order Results tab and press the Order button to order the results by empId in ascending order, as shown in Figure 19 below.

Figure 19: Order Query Results 7. Click OK on the Add Named Query dialog and you return to the Configure JPA Entities Task page. 8. Press Finish on the Configure JPA Entities Task page and you return to the Add JPA Manager Bean Wizard. 9. Press Finish again to complete the creation of the JPA Manager Bean and close the JPA Manager Bean Wizard. The Employee JPA entity and EmployeeManager bean have now been created. The entity is created in the src/entities package and the manager bean in src/entities.controller package, as shown in Figure 20.

Figure 20: New JPA Entites The Employee entity is the class representation of the Employee table with the table columns represented by the class fields. The EmployeeManager contains the getEmployee method that was generated by the JPA Manager bean wizard.

JPA data consumption JPA integrates well with JSF portlet applications and the JPA data can be easily consumed in JavaServer Faces Web pages in a JSF portlet application, without writing any code. We can achieve this by simple drag and drops on the portlet xhtml pages from the Page Data view. 1. Open the EmployeePortletView.xhtml file with Rich Page Editor in split view. Change the string ‘Place content here’ to something more meaningful. For example, ‘Employee Data’. NOTE: Notice the tag at the bottom </div>. You need to be aware of its location when dragging and dropping. I inserted a couple of blank lines to make room.

Figure 21: </div> location 2. If the Page Data view is not open, open it now (Window -> Show View -> Other-> Web -> Page Data). From the Page Data view, expand JPA -> JPA Manager Beans -> entities.controller.EmployeeManager and select the getEmployee() query, as shown in Figure 22 below.

Figure 22: Drag query from Page Data View 3. Drag the getEmployee() query from the Page Data view on to the EmployeePortletView.xhtml opened in the Rich Page Editor. Drop it above the </div> tag. The Add JPA data to page wizard appears, as shown in the Figure 23 below.

Figure 23: Drop query on to xhtml file 4. From the wizard choose the radio button Retrieve a list of data and press Next. 5. Only select the columns to be displayed per your requirements. Uncheck the rest as shown in Figure 24. Click Finish.

Figure 24: Display only the desired fields 6. The code to display an Employee list is auto-generated in the EmployeePortletView.xhtml file as shown in Figure 25. Press Ctrl+S to save.

Figure 25: Display an Employee list Configure JDBC Deployment While the tooling does everything it can based on the information it has available, it isn’t always perfect. You must pay close attention to the server’s datasource name, JNDI Name and JAAS Alias name. In this example, wpdbDS, jdbc/wpdbDS and wpdbDSJAASAuth. 1. Right-click the EmployeePortlet project created above in the Enterprise Explorer view, and choose JPA Tools -> Configure project for JDBC Deployment as shown in Figure 26.

Figure 26: Launch JPA Tools – Configure Project for JDBC Deployment wizard 2. The Set Up Connections for deployment page appears and the connection has the correct datasource name (wpdbDS). The JNDI NAME is also correct (jdbc/wpdbDS). Uncheck the Schema box. We want to use it for all schemas, not just the DEMO schema. Press OK.

Figure 27: Modify the default Connection name The ibm-web-bnd file is generated by the JPA tooling but, it is not complete. From the Enterprise Explorer, navigate to EmployeePortlet -> WebContent -> WEB-INF and open the ibm-web-bnd file with the Web Bindings editor. Open the design tab and drill down to the authentication alias named wpsdbDS. If you recall, the wpsdbDS datasource used an alias named wpdbDSJAASAuth. However, the wizard used the connection name wpdbDS as the default alias name. Change the name in the Details pane to wpdbDSJAASAuth and save it as shown in Figures 28a and 28b.

Figure 28a: Modified ibm-web-bnd.xml fil (Design tab) If you flip from the Design tab to the Source tab, you will see the following resource reference: <resource-ref name="wpdbDS" binding-name="jdbc/wpdbDS"> <authentication-alias name="wpdbDSJAASAuth" /> </resource-ref>

Figure 28b: Modified ibm-web-bnd.xml fil (Source tab)

Publishing to WebSphere Portal Server Up to this point in the exercise, we have created an end-to-end JPA enabled portlet application which displays a list of employees retrieved from the back-end database. All this has been done with the RAD tooling wizards only. We have not written a single line of code. The JSF portlet project is now ready to be published to the Portal server. 1. Right-click the EmployeePortlet project and select Run As -> Run on Server 2. Select the WebSphere Portal server and press Finish. Note: While using the Portal 9.0 runtime, JPA 1.0 is no longer supported. Under Project Properties, change the JPA Project Facet to version 2.0 prior to deploying.

3. The portlet is deployed and registered. You are logged on to the Portal console and you will see that RAD has created a page, installed the portlet on that page and navigated to it automatically. The portlet has executed the getEmployee() query and rendered the result set in the browser.

Figure 29: EmployeePortlet published on the Portal server Application completion We will now see how this application can be very quickly enhanced to turn it into a CRUD application. Note: There can be different ways to navigate between different web pages and store parameter values in a JSF application; we are just showing one of them as an illustration. In this exercise, we will make use of command links, command buttons and request parameters for the same. Create 3 new Portlet xhtml pages: displayEmployee.xhtml, updateEmployee.xhtml, and createEmployee.xhtml. To create an xhtml page, Right Click the portlet project in the Enterprise Explorer view and choose New -> WebPage. The New Web Page wizard appears. Since we are using JSF 2.x instead of 1.x, we want to create an xhtml file instead of a jsp file. Select the Portlet Facelet template, supply a file name and press Finish, as shown in Figure 30.

Figure 30: New Web Page wizard Configure the createEmployee.xhtml file 1. Open the createEmployee.xhtml file using the Rich Page Editor. Replace the ‘Place content here’ string with something meaningful, i.e., Create Employee. I will also move the </div> tag further down the page to make room for drag and drop activity. 2. Drag and drop the createEmployee query from the page data view on to the createEmployee.xhtml file. The Add JPA data to page wizard appears, as shown in the Figure 31 below.

Figure 31: Add JPA Data wizard We require all columns from the Employee table to be displayed on the createEmployee xhtml page. Do not uncheck any of them. Press Finish. A command button named Submit is also auto-generated. This adds the code to create a new Employee row in the Employee table by pressing the Submit button. Refer to Figure 32.

Figure 32: Create Employee xhtml page 3. Select the command button from within the Source tab and open the properties view. Press the Add Rule button to add a navigation rule that will open the EmployeePortletView.xhtml file when the action outcome “display” is triggered from createEmployee.xhtml.

Figure 33: Add Navigation Rule for createEmployee.xhtml 4. A check of the Quick Edit tab shows the code that will be executed when the Submit button is pushed. It is CreateEmployee1.java in the src/pagecode package. Add the command return “display”; to set the outcome. Save the changes.

Figure 33: Set the createEmployee xhtml page return outcome NOTE 1: The Quick Edit View (QEV) is no longer integrated into the Rich Text Editor starting in RAD version 9.5. If you see the following ‘No script to edit’ message, close the xhtml file and re-open it using the Page Designer editor. NOTE 2: The Page Designer editor was removed in version 9.6. If you are running version 9.6, you will have to manually edit the appropriate auto-generated files. There is a patch available for version 9.6.1 (the QEV - Quick Edit View patch) that integrates QEV into the Rich Page Editor.

You will notice that we now have a compile error. A ‘Void methods cannot return a value’ error. The auto-generated CreateEmployee1.java code located in the pagecode package contains a void method named createEmployeeAction(). Change it to a String method and save it. public void createEmployeeAction() { EmployeeManager employeeManager = (EmployeeManager) getManagedBean("EmployeeManager"); try { employeeManager.createEmployee(employee); } catch (Exception e) { logException(e); } return "display"; } 5. Now open the EmployeePortletView.xhtml file. Using the Palette view, drag and drop a Command button to the bottom of the xhtml file. Place it above the </div> tag. Change the value of the button to “Create Employee”. You will notice that a form tag was automatically generated. 6. Add a navigation rule to open createEmployee.xhtml when an action outcome “create” is triggered from EmployeePortletView.xhtml.

Figure 34: Add Navigation Rule for EmployeePortletView.xhtml 7. Open the Quick Edit tab and click on the white space. The command button action code is generated automatically. Add the return “create”; command so that createEmployee.xhtml returns a “create” outcome following the invocation of the commandButton action. Note: Just as before, if running version 9.6, manually edit EmployeePortletview.java, adding the doButton1Action. If running version 9.6.1, install the (QEV) Quick Edit View patch. The EmployeePortletView.xhtml file’s commandButton code should look like this: <h:commandButton type="submit" value="Create Employee" id="button1" styleClass="commandButton" action="#{pc_EmployeePortletView.doButton1Action}">

</h:commandButton> Additionally, the EmployeePortletView.java file in the pagecode package should contain the corresponding doButton1Action command button action code. It should appear as follows: public String doButton1Action() { // This is java code that runs when this action method is invoked // TODO: Return an outcome that corresponds to a navigation rule // return "create"; return "create"; } Create it manually if it does not exist. The xhtml file now looks as shown in Figure 35.

Figure 35: Create button added to EmployeePortletView xhtml page Configure the displayEmployee.xhtml file 1. Open the displayEmployee.xhtml using the Page Designer editor. Replace the ‘Place content here’ string with the following: Display Employee. Click the Employee Id to Update or delete. I will also move the </div> tag further down the page to make room for drag and drop activity. 2. Next, from the Page Data view expand JPA -> JPA Manager Beans. Drag and drop findEmployeeByEmpId query from Page Data view on displayEmployee.xhtml. The Add JPA data to page wizard Set filter values page appears, as shown in Figure 36. It has defaulted to retrieve a single Employee record using the empId primary key.

Figure 36: Display Employee - Set Filter values page Press Next. The Add JPA data to page wizard’s Configure Data Controls page appears, as shown in Figure 37. Use all the Employee table columns. Press Finish.

Figure 37: Display Employee – Configure data controls page 3. The code to display the details of a particular employee specified by the parameter “empId” is auto-generated in the displayEmployee.xhtml file. Save the changes made to displayEmployee.xhtml file.

4. Next, we need to be able to open an Employee item in edit mode when it’s selected in displayEmployee.xhtml. Now we are going to finally write a tiny bit of code. Open the Palette view and drag and drop a Command Link on to displayEmployee.xhtlm for the empId. You will have to insert some blank lines first. Add the command Link around the empId column. Additionally, add a request param to store the empId value as shown by the code snippet below: <p>Display Employee. Click on the Employee Id to Update or Delete.</p> <h:form id="form1" styleClass="form"> <table> <tbody> <tr> <td align="left">EmpId:</td> <td style="width: 5px">&#160;</td> <td> <h:commandLink id="link1" styleClass="commandLink"> <h:outputText styleClass="outputText" id="empId1" value="#{pc_DisplayEmployee1.employee.empId}"> </h:outputText> <f:param name="empId" value="#{pc_DisplayEmployee1.employee.empId}"> </f:param> </h:commandLink> </td> </tr> Note: Make sure the command link is enclosed in a form. <h:form id=”form1” styleClass=”form”> … </h:form> 5. Select the command link from the Source tab and open the properties view. Add a navigation rule to open updateEmployee.xhtml when an action outcome “update” is triggered from displayEmployee.xhtml.

Figure 38: Add Navigation Rule for displayEmployee.xhtml 6. Open the Quick Edit view and code an action for the command button. 7. Add the below code to the generated action: ActionResponse response = (ActionResponse)getFacesContext().getExternalContext().getResponse(); response.setRenderParameter("empId",(String)getRequestParam().get("empId")); return "update";

You will notice that we now have a compile error. An ‘ActionResponse cannot be resolved to a type’ error. The auto-generated DisplayEmployee1.java code needs the following import command: import javax.portlet.*; Add the import command and save it. Note: Just as before, if running version 9.6, manually edit DisplayEmployee1.java. If running 9.6.1, install the QEV (Quick Edit View) patch. The xhtml file now looks as shown in Figure 39.

Figure 39: Display Employee xhtml page Complete the EmployeePortletView.xhtml file configuration In the first half of this exercise, we dragged and dropped the getEmployee() query on to this xhtml file and deployed it to the Portal Server. Now let’s complete the configuration and integrate it with the other xhtml pages. 1. Open EmployeePortletView.xhtml using the Page Designer editor. We will update this xhtml file so that when a particular empId is clicked on EmployeePortletView.xhtml, its details are shown on displayEmployee.xhtml. Add a command Link around the empId column of the auto generated EmployeeList table and also add a request param to store the empId value as shown by the code snippet below: <h:form id="form1" styleClass="form"> <h:dataTable id="employeeList1" value="#{pc_EmployeePortletView.employeeList}"var="varemployeeList" styleClass="dataTable" headerClass="headerClass" footerClass="footerClass" rowClasses="rowClass1, rowClass2" columnClasses="columnClass1" border="0" cellpadding="2"

cellspacing="0"> <h:column id="empId1column"> <f:facet name="header"> <h:outputText styleClass="outputText" value="EmpId" id="empId1text"> </h:outputText> </f:facet> <h:commandLink id="link1" styleClass="commandLink"> <h:outputText styleClass="outputText" id="empId1" value="#{varemployeeList.empId}"> </h:outputText> <f:param name=”empId” value="#{varemployeeList.empId}"> </f:param> </h:commandLink> </h:column> ……… Note: Make sure the command link is enclosed in a form. There should be one there as part of adding the Create Employee command button. <h:form id=”form1” styleClass=”form”> … </h:form>

Figure 40: Addition of EmployeePortletView Command Link 2. Select the above command link and open the properties view. From the properties view, add a navigation rule to open displayEmployee.xhtml when action outcome “display” is triggered from EmployeePortletView.xhtml.

Figure 41: Add Navigation Rule for EmployeePortletView.xhtml 3. Open the Quick Edit view and code an action for the command link. 4. Add the below code to the generated action: ActionResponse response = (ActionResponse)getFacesContext().getExternalContext().getResponse(); response.setRenderParameter("empId",(String)getRequestParam().get("empId")); return "display"; You will notice that we now have a compile error. An ‘ActionResponse cannot be resolved to a type’ error. The auto-generated EmployeePortletView.java code needs the following import command: import javax.portlet.*;

Add the import command and save it. Note: Just as before, if running version 9.6, manually edit EmployeePortletView.java. If running 9.6.1, install the (QEV) Quick Edit View patch. Configure the updateEmployee.xhtml file 1. Open updateEmployee.xhtml. Replace the ‘Place content here’ string with something meaningful, i.e., Update Employee. I will also move the </div> tag further down the page to make room for drag and drop activity. 2. Next, from the Page Data view expand JPA -> JPA Manager Beans. Drag and drop the query updateEmployee from page data view on the updateEmployee.xhtml opened in Rich Page Editor. The Add JPA data to page wizard’s Set filter values page appears, as shown in Figure 42. It has defaulted to query the Employee table using the empId primary key.

Figure 42: Update Employee - Set Filter values page Press Next. The Add JPA data to page wizard’s Configure Data Controls page appears, as shown in Figure 43. Use all the Employee table columns. Press Finish.

Figure 43: Update Employee – Configure data controls page 3. The code to add two auto-generated actions (updateEmployeeAction and deleteEmployeeAction) to the updateEmployee.xhtml file is auto-generated. Two new command buttons Submit (for updateEmployeeAction) and Delete (for deleteEmployeeAction) are added to the updateEmployee.xhtml along with the code to update or delete the displayed Employee item, as shown in Figure 44. Change the value of the Submit button to Update Employee. Change the value of the Delete button to Delete Employee. Save the changes made to updateEmployee.xhtml file.

Figure 44: Update Employee xhtml page

4. You can define the navigation rules and return the appropriate outcomes from these two auto generated actions. From the properties view (highlight the Update Employee commandButton first), add a navigation rule to open displayEmployee.xhtml when action outcome “display” is triggered from updateEmployee.xhtml. The Quick Edit tab will show the update code as well as the outcome returned as “display”. Next, add a second rule to open the original EmployeePortletView.xhtml when the action outcome “view” is triggered by the Delete Employee commandButton as shown in Figure 45 below.

Figure 45: Add Navigation Rule for updateEmployee.xhtml 5. Finally, for the Update Employee and Delete Employee command buttons, Click on the quick Edit tab and add the return “display”; command for the Update button, return “view”; for the Delete button, as shown in Figure 46.

Figure 46: Add display command to the Submit commandButton Note: You will get a compile error here because the generated methods are void methods. Click on the error and the UpdateEmployee1.java source code will display. Change the 2 methods to String methods, as shown in Figure 47.

Figure 47: Change void methods to String methods Note: Just as before, if running version 9.6, manually edit UpdateEmployee1.java. If running 9.6.1, install the (QEV) Quick Edit View patch. Publishing the complete application to WebSphere Portal server Publish the final version of the application on the server. 1. Right-click the EmployeePortlet project and select Run As -> Run on Server.

2. Select the WebSphere Portal server from the list and click Finish.

The Employee Portlet is presented in the Portal Console. Let us step through it.

Press the Create Employee button. The Create Employee command button executes code to display the createEmployee.xhtml file.

Populate the employee fields and Press Submit. The Submit command button executes code to add the employee to the Employee table. A new Employee query is performed and the Employee Portlets original screen appears with the new result set. The new employee is listed.

Click the new employee’s id (200). The command link executes code to display the displayEmployee.xhtml file. A query is run to retrieve that employee’s data and is displayed.

Click the Employee Id link. The command link executes code to display the updateEmployee.xhtml file. You have a choice of updating the employee information or deleting the employee data.

All of the fields are rendered in edit mode. You can make a change and press the Update Employee button to save it or, press the Delete Employee button to delete the employee. Press Delete Employee.

The Employee row is gone. Select another employee id. The employee appears in displayEmployee.xhtml.

Click on the Employee Id. The Employee data appears in the updateEmployee.xhtml.

Change his First Name from JOHN to JAMES. Press the Update Button.

A new qmployee query is run and the result set is displayed. Employee Id 50 now has a First Name of JAMES. Figure 48: Execute the Application What have we demonstrated in this exercise We saw how Rational Application Developer makes it easy to build JPA JSF portlet applications. We reviewed JPA concepts and saw how it makes database management easy for the developer and frees him from database persistence tasks. The exercise also introduced us to JPA configuration and database configuration tasks which are automatically handled for us in Rational Application Developer along with autogenerated JPA entities and manager beans. We also used the query builder which autogenerates JPA queries for us. Finally, the Portal Toolkit and JPA tools helped us easily build a JPA portlet application with few clicks on the wizards and simple drag and drops, without writing a lot of code. Misc Debugging Issues: 1. javax.faces.PROJECT_STAGE I ran into an issue while running the app on the Portal Server where I would see some NPE errors along with the following in SystemOut: [10/12/17 14:00:58:450 UTC] 00000146 webapp W com.ibm.ws.webcontainer.webapp.WebApp getResource CWSRV0238E: Resource paths should have a leading slash [10/12/17 14:00:58:451 UTC] 00000146 webapp W com.ibm.ws.webcontainer.webapp.WebApp getResource CWSRV0238E: Resource paths should have a leading slash

The fix is to edit the web.xml file and change the javax.faces.PROJECT_STAGE param from ‘Development’ to its default value ‘Production’. <context-param> <description> A human readable string describing where this particular JSF application is in the software development lifecycle. Valid

values are 'Development', 'UnitTest', 'SystemTest' and 'Production'. Default is 'Production'. This parameter is not available in JSF 1.x. </description> <param-name>javax.faces.PROJECT_STAGE</param-name> <param-value>Production</param-value> </context-param>

2. Set the Portal Server prependSlashToResource property = true. Older versions of WebSphere accept URLs that do not contain a leading ‘/’. I ran into some runtime errors during my testing indicating that I did not have a leading ‘/’. Setting the prependSlashToResource property to a value of true suppresses the error. Log on to the WebShere Admin console. Navigate to Servers -> Server Types -> WebSphere Application Servers -> <Your Portal Server>. Under the Container Settings group, navigate to Web Container Settings -> Web Container -> Custom Properties. Add a new property named prependSlashToResource. Set the value to true.

Figure 49: WebSphere prependSlashToResource property setting Appendix Here are the DB2 ddl commands used to create the Employee table and populate it with 15 rows of data. Employee table DB2 ddl --<ScriptOptions statementTerminator=";"/> CREATE SCHEMA "DEMO" AUTHORIZATION "DB2ADMIN"; CREATE TABLE "DEMO"."EMPLOYEE" ( "EMP_ID" SMALLINT NOT NULL, "EMP_FIRST_NAME" VARCHAR(15 OCTETS), "EMP_LAST_NAME" VARCHAR(25 OCTETS), "EMP_TITLE" VARCHAR(25 OCTETS), "EMP_MOBILE_PHONE" VARCHAR(11 OCTETS), "EMP_EMAIL" VARCHAR(25 OCTETS) )

ORGANIZE BY ROW DATA CAPTURE NONE COMPRESS NO; ALTER TABLE "DEMO"."EMPLOYEE" ADD CONSTRAINT "PK_EMPLOYEE" PRIMARY KEY ("EMP_ID"); GRANT ALTER ON TABLE "DEMO"."EMPLOYEE" TO USER "DB2ADMIN" WITH GRANT OPTION; GRANT CONTROL ON TABLE "DEMO"."EMPLOYEE" TO USER "DB2ADMIN"; GRANT DELETE ON TABLE "DEMO"."EMPLOYEE" TO USER "DB2ADMIN" WITH GRANT OPTION; GRANT INDEX ON TABLE "DEMO"."EMPLOYEE" TO USER "DB2ADMIN" WITH GRANT OPTION; GRANT INSERT ON TABLE "DEMO"."EMPLOYEE" TO USER "DB2ADMIN" WITH GRANT OPTION; GRANT REFERENCES ON TABLE "DEMO"."EMPLOYEE" TO USER "DB2ADMIN" WITH GRANT OPTION; GRANT SELECT ON TABLE "DEMO"."EMPLOYEE" TO USER "DB2ADMIN" WITH GRANT OPTION; GRANT UPDATE ON TABLE "DEMO"."EMPLOYEE" TO USER "DB2ADMIN" WITH GRANT OPTION; Employee table data 000010,"CHRISTINE","HAAS","PRESIDENT","18196308124","chass@gmail.com" 000020,"MICHAEL","THOMPSON","MANAGER","14016831102","mthompson@gmail.com" 000030,"SALLY","KWAN","MANAGER","12019710511","skwan@gmail.com" 000050,"JOHN","GEYER","MANAGER","16195509152","jgeyer@gmail.com" 000060,"IRVING","STERN","TEST","16197507073","istern@gmail.com" 000070,"EVA","PULASKI","SUPPORT","16200305264","epulaski@gmail.com" 000090,"EILEEN","HENDERSON","SUPPORT","16197105155","ehenderson@gmail.com" 000100,"THEODORE","SPENSER","SALES","14198012186","tspenser@gmail.com" 000110,"VINCENZO","LUCCHESSI","SALES","19195911057","vlucchessi@gmail.com" 000130,"DELORES","QUINTANA","ANALYST","16195509158","dquintana@gmail.com" 000140,"HEATHER","NICHOLLS","ANALYST","18197601199","hnicolls@gmail.com" 000150,"BRUCE","ADAMSON","TEST","16197705170","badamson@gmail.com" 000160,"ELIZABETH","PIANKA","DEVELOPER","17198004121","epianka@gmail.com" 000170,"MASATOSHI","YOSHIMURA","DEVELOPER","16198101052","myoshimura@gmail.com" 000180,"MARILYN","SCOUTTEN","DEVELOPER","17197902215","mscoutten@gmail.com"