1. Chapter 12© copyright Janson Industries 20111 Java Server Faces ▮ Explain the JSF framework ▮ SDO (service data objects) ▮ Facelets ▮ Pagecode classes ▮ Navigation rules ▮ Data connection objects ▮ Scripting variables

2. Chapter 12© copyright Janson Industries 20112 Java Server Faces ▮ Will duplicate the front end of MyWeb PO functions using JSF ▮ Demonstrate JSF advantages re: ▮ Ease of data access ▮ Minimize coding

3. Chapter 12© copyright Janson Industries 20113 Create a new Dynamic Web project and new EAR change the configuration to JSF v2.0 Click Modify

4. Chapter 12© copyright Janson Industries 20114

5. Chapter 12© copyright Janson Industries 20115

6. Chapter 12© copyright Janson Industries 20116 In MyWebJSF, create a Web Page, specify Facelet as the template & SpecifyPOSchool as the name

7. Chapter 12© copyright Janson Industries 20117 Palette has new set of visual components And new set of Data Components

8. Chapter 12© copyright Janson Industries 20118 Relation Record List ▮ An SDO ▮ A GUI component built from a DB table definition ▮ Need to identify a connection (host, DB and table) to base RRL on

9. Chapter 12© copyright Janson Industries 20119 Put in a table, some text, 1 HTML input field (To center had to enter: before the table and after) Need a screen where user can select an existing school or specify a new school

10. Chapter 12© copyright Janson Industries 201110 Expand the Data and Services tray Click on SDO Relational Record List, then click on the first row, second column table cell A RRL will be defined to display all existing schools

11. Chapter 12© copyright Janson Industries 201111 Give the RRL a name

12. Chapter 12© copyright Janson Industries 201112 Must associate the SDO with a JDBC connection Define one by clicking New...

13. Chapter 12© copyright Janson Industries 201113 Click New... again

14. Chapter 12© copyright Janson Industries 201114

15. Chapter 12© copyright Janson Industries 201115 Our Connection ▮ Host: PLEIONE.SEALINC.ORG ▮ Userid: Student99 ▮ PW: pinrut ▮ Test connection, then Next

16. chapter 1016 © copyright Janson Industries 2010 This is how you would define the connection Change the connection name and test

17. Chapter 12© copyright Janson Industries 201117

18. Chapter 12© copyright Janson Industries 201118 New connection appears Finish defining the RRL (this may take a while)

19. Chapter 12© copyright Janson Industries 201119 Scroll down, expand the DB and select the Table

20. Chapter 12© copyright Janson Industries 201120 RRL requires a primary key, if none defined in the table must define one in RRL

21. Chapter 12© copyright Janson Industries 201121 Select School in left pane, click > button, School moved to right pane

22. Chapter 12© copyright Janson Industries 201122 Then deselect all fields except School

23. Chapter 12© copyright Janson Industries 201123 Save and test

24. Chapter 12© copyright Janson Industries 201124 OK not the best but how was that for fast? How many lines of code did you have write? SDO's are good!

25. Chapter 12© copyright Janson Industries 201125 Code the RRL generated, notice "EL"

26. 26 JSF EL ▮ JSF technology has its own EL called Unified Expression Language ▮ Incorporates standard EL plus new expressions that ▮ Follow the #{..} syntax and can ▮ Set values ▮ Invoke methods ▮ Perform dynamic operations Chapter 12© copyright Janson Industries 2008

27. Chapter 12© copyright Janson Industries 201127 You can manipulate the HTML directly The header facet has been commented out

28. Chapter 12© copyright Janson Industries 201128 No header displayed

29. 29 AddPO Facelet ▮ Need a Facelet to insert a new PO ▮ Want SpecifyPOSchool to display first so user specifies the school ▮ Schools listed will be defined as links to AddPO Facelet ▮ If school not listed, student will type into textfield ▮ School name passed to AddPO Chapter 12© copyright Janson Industries 2008

30. 30 Getting to AddPO.jsp ▮ For links need to ▮ Change listed schools to links ▮ Define links to go to AddPO.faces ▮ For the text field need to ▮ Add a command button ▮ Define a navigation rule to go to AddPO.faces Chapter 12© copyright Janson Industries 2008

31. Chapter 12© copyright Janson Industries 201131 CALTAL - First create AddPO

32. Chapter 12© copyright Janson Industries 201132 Put some text on page

33. Chapter 12© copyright Janson Industries 201133 Click Link, then School. In the Properties view, specify AddPO.faces (not xhtml). Save all changes.

34. Chapter 12© copyright Janson Industries 201134 Run and click the Death Valley link...

35. Chapter 12© copyright Janson Industries 201135 Do it!

36. Chapter 12© copyright Janson Industries 201136 ▮ When a Facelet is created in a JSF project: ▮ A package called PageCode is created in Java Resources/src ▮ PageCodeBase class is imported into the PageCode package ▮ When GUI components added to Facelet ▮ A java source code file is created in the PageCode package that ▮ Has the same name as the Facelet ▮ Extends PageCodeBase How does JSF work

37. Chapter 12© copyright Janson Industries 201137 Since AddPO only has text, the java file was not created

38. Chapter 12© copyright Janson Industries 201138 ▮ When a SDO is added to the Facelet, in the pagecode class ▮ The default visual components and the methods that define the visuals components are added ▮ Methods and variables to perform the data operation(s) are added How does JSF work

39. Chapter 12© copyright Janson Industries 201139

40. Chapter 12© copyright Janson Industries 201140 ▮ When Facelet invoked, ▮ Server instantiates pagecode class as bean with name of pc_FaceletName ▮ Facelet invokes the bean data getter methods ▮ Facelet formats and displays data How does JSF work

41. Chapter 12© copyright Janson Industries 201141

42. Chapter 12© copyright Janson Industries 201142 ▮ Need to pass either: ▮ Clicked school ▮ School name entered in text field ▮ Will pass the two pieces of data differently ▮ For link, will define a parameter ▮ For text field, will define a scripting variable Continuing the App

43. Chapter 12© copyright Janson Industries 201143 Click link & in Properties view click on Parameter tab

44. Chapter 12© copyright Janson Industries 201144 In Select Page Data Object, expand schoolRRL (SDO), schoolRRL(TXTABLE), select SCHOOL Click Add Parameter, specify schoolName. Click in Value area to display Value button, then click it Click OK

45. 45 RRL School value added to the parameter

46. Chapter 1246© copyright Janson Industries 2011 Expression Language ▮ Can retrieve request parameters ▮ ${param.parameter_name} or ▮ #{param.parameter_name} ▮ Or scripting variables ▮ ${page.variable_name} or # ▮ ${request.variable_name} ▮ ${session.variable_name} ▮ If scope not specified, search is done in the following order: page, request, session, app

47. Chapter 12© copyright Janson Industries 201147 To prove that data passed, add EL to retrieve and display parameter schoolName Save all changes, run SpecifyPOSchool

48. Chapter 12© copyright Janson Industries 201148 Click the Death Valley link

49. Chapter 12© copyright Janson Industries 201149

50. Chapter 12© copyright Janson Industries 201150 If you look at the end of the URL you will see the parameter schoolName and it’s value

51. Chapter 12© copyright Janson Industries 201151 To define a scripting variable, go back to SpecifyPOSchool edit session, in Page Data view.. expand Scripting Variables,double click sessionScope

52. Chapter 12© copyright Janson Industries 201152 Click Add button, specify name and type, click OK

53. Chapter 12© copyright Janson Industries 201153

54. Chapter 12© copyright Janson Industries 201154 Been using the text and textfield as placeholders Delete both

55. Chapter 12© copyright Janson Industries 201155 Select cells in row and join them by clicking Table, Join Selected Cells

56. Chapter 12© copyright Janson Industries 201156 Bind the sessionScope variable to a new input text field by dragging variable to the joined cells

57. Chapter 12© copyright Janson Industries 201157 Change the field to allow inputting

58. Chapter 12© copyright Janson Industries 201158 Adds descriptive text, input field, Submit button and a message area Drag text and input field into the original table

59. Chapter 12© copyright Janson Industries 201159 Add another row to the table and drag the button and message area into it

60. Chapter 12© copyright Janson Industries 201160 Click on the Submit button, switch to Properties view, click the Select or code the action button

61. Chapter 12© copyright Janson Industries 201161 Select code an action. This allows you to enter code to execute when button is clicked. Must make a change, so click on pane and change the return as below

62. Chapter 12© copyright Janson Industries 201162 In Properties view, at far right, click Add Rule...

63. Chapter 12© copyright Janson Industries 201163 Select AddPO.xhtml and click OK

64. Chapter 12© copyright Janson Industries 201164 A very simple rule "always go to AddPO" added

65. Chapter 12© copyright Janson Industries 201165 Bind the sessionScope variable to a new text field by dragging the variable onto the AddPO Facelet

66. Chapter 12© copyright Janson Industries 201166 Were adding an output only Text field

67. Chapter 12© copyright Janson Industries 201167 Added some descriptive text, an output field and an error message area

68. Chapter 12© copyright Janson Industries 201168 Prove it works, run SpecifyPOSchool, enter a school name, click Submit

69. Chapter 12© copyright Janson Industries 201169 Try it.

70. Chapter 12© copyright Janson Industries 201170 ▮ We want AddPO to display text fields to enter the a new PO’s info and allow insert ▮ In addition the school name from SpecifyPOSchool should be used ▮ First we have to delete the text and fields JSF

71. Chapter 12© copyright Janson Industries 201171 Select the fields and delete

72. Chapter 12© copyright Janson Industries 201172 Click on SDO Relational Record and then on AddPO

73. Chapter 12© copyright Janson Industries 201173 Give the RR a name & change the function to create

74. Chapter 12© copyright Janson Industries 201174 Scroll down, expand SALES, select TXTABLE

75. Chapter 12© copyright Janson Industries 201175 Click Modify primary key

76. Chapter 12© copyright Janson Industries 201176 Make PONUM the key

77. Chapter 12© copyright Janson Industries 201177 Deselect the paid fields and click Finish

78. Chapter 12© copyright Janson Industries 201178 Must change the school field to display the parameter schoolName (value set when link clicked)

79. Chapter 12© copyright Janson Industries 201179 To test, run SpecifyPOSchool, click the link

80. Chapter 12© copyright Janson Industries 201180 ▮ New business function to Pay POs ▮ We want a Facelet (SpecifyPOtoPay) to display non-paid PO's as links ▮ If link clicked, go to PayPO.jsp that ▮ Gets PO info and displays ▮ Lets user enter pay date and amt ▮ Updates the info in DB JSF

81. Chapter 12© copyright Janson Industries 201181 Create SpecifyPOtoPay, add a RRL (outstandingPOsRRL) This may take awhile!

82. Chapter 12© copyright Janson Industries 201182 Specify the table

83. Chapter 12© copyright Janson Industries 201183 This time define PONum as key

84. Chapter 12© copyright Janson Industries 201184 Add a filter to get unpaid POs

85. Chapter 12© copyright Janson Industries 201185 Specify PAIDAMT and a value of 0

86. Chapter 12© copyright Janson Industries 201186

87. Chapter 12© copyright Janson Industries 201187 Just display enough info to id the PO

88. Chapter 12© copyright Janson Industries 201188 Kept the paid amount field from being displayed Added a little descriptive text

89. Chapter 12© copyright Janson Industries 201189 Test it

90. Chapter 12© copyright Janson Industries 201190 ▮ Change SpecifyPOtoPay such that: ▮ PO#'s are links to PayPO facelet ▮ Pass the PO# as a parameter ▮ PayPO will ▮ Get PO info for parameter ▮ Allow field updates ▮ Must create PayPO before you can link to it JSF

91. Chapter 12© copyright Janson Industries 201191 Create PayPO

92. Chapter 12© copyright Janson Industries 201192 Click Link, {PONUM}

93. Chapter 12© copyright Janson Industries 201193 Must specify PayPO.faces in outputLink tag

94. Chapter 12© copyright Janson Industries 201194 Define a parameter (PON) and set it's value to the RRL's PONUM with param tag

95. Chapter 12© copyright Janson Industries 201195 In PayPO put EL to test that the value is accessible

96. Chapter 12© copyright Janson Industries 201196 Test and verify the links are there, click T432...

97. Chapter 12© copyright Janson Industries 201197...verify the PO number is displayed

98. Chapter 12© copyright Janson Industries 201198 Change text, delete EL, add a Relation Record to the facelet called (payPORR), define it to Update

99. Chapter 12© copyright Janson Industries 201199 Select the Table

100. © copyright Janson Industries 2011100 Chapter 12 Select fields

101. Chapter 12© copyright Janson Industries 2011101 Define the primary key

102. Chapter 12© copyright Janson Industries 2011102 Define the filter to use the parameter PON

103. Chapter 12© copyright Janson Industries 2011103 Click Close, then Finish

104. Chapter 12© copyright Janson Industries 2011104 Time to test

105. Chapter 12© copyright Janson Industries 2011105 Run SpecifyPOtoPay, click on Bratwurst, should go to PayPO

106. Chapter 12© copyright Janson Industries 2011106 Enter Date and Amount, then click Submit Gotcha Alert: There are blank spaces in some of the input fields. If you click on the field and type, the data and blanks will be in the field. When you click Submit, it may fail because the field value is too big for the table. Erase all extra spaces.

107. Chapter 12© copyright Janson Industries 2011107 Nothing will look like it was done Go back to SpecifyPOtoPay and refresh The paid PO will not appear Try it