1. CSCI 6962: Server-side Design and Programming JSF DataTables and Shopping Carts

2. DataTables Database query results usually displayed as table Manually build table using table and <c:while tags Use built-in <h:datatable tag to automatically build – Automatically generates rows for all values – Links to array or ArrayList generated by bean Similar to <f:selectItems

3. Shopping Carts as DataTables Usual abilities: – Add to shopping cart from some product page – View items in cart Also total, etc. – Edit cart (remove from cart, update quantities, etc.)

4. Support Classes Array must contain objects Idea: Table columns display member variables of objects – Must provide getters and setters for those member variables Example: Widget class

5. Creating List of Items Bean must provide getter for array or ArrayList of objects to be listed in table – Example: Construct Widget objects and return as array – Will read from database in reality In bean In Widget class

6. DataTable Syntax Syntax similar to …

7. DataTable Syntax Link columns of table to member variables of objects Syntax: – Inside <dataTable tag – One for each field to display

8. DataTable Syntax Can display header and footer for columns Syntax (inside <h:column tag): – display Common example: Labels at top of each column

9. Shopping Cart in Bean Store current cart in bean as ArrayList of products – Member variable constructed with bean – Getter method used to display cart by DataTable

10. Passing Information to Bean If multiple buttons, bean needs to know which pressed Example: When widget added to cart, ID must be passed to add method in bean Pass 1111 to bean Pass 2222 to bean Pass 3333 to bean

11. Passing Information to Bean Each element must have some unique ID Can extract using #loopvar.IDfield syntax Must pass as parameter to method in bean called when form submitted ID field of this widget Passed to this method of bean

12. Adding to Cart Construct new widget object and add to cart Return next page to go to (probably cart page)

13. Adding to Cart May need to check whether item already in cart – Increment quantity instead of adding separate object – Error message if not legal (adding same course twice) Utility method to search cart for item with this ID Get old quantity, add 1, and set as new quantity

14. Displaying Cart Link DataTable to cart ArrayList in bean Display relevant fields in columns

15. Displaying Cart Can display totals as column footers Link to bean methods that computes totals

16. Form Elements and DataTables Columns in dataTable can contain form elements – Buttons/links to cause update to cart – Elements for additional user input (such as new quantity)

17. Updating Object Values May require calling method in bean – Example: removing object from cart – Like adding, must pass ID of affected object – Returns null so redirects back to current page (redisplaying cart)

18. Updating Object Values Example: Editing “quantity” of widgets Item class must have a quantity member variable – Set to “1” in constructor Must have a set method Works best if getters and setters take/ return Strings – Convert to/from int

19. Updating Object Values Changing dataTable value changes linked value in object – Value displayed in editable field – When form submitted value changed (just like any other linked value in a bean) Widget ID name price quantity

20. Validating Updates Can add validators to editable fields – Place <h:message tags inside column – More reliable for data type check if edited field is String