CSCI 6962: Server-side Design and Programming
JSF DataTables and Shopping Carts
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
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.)
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
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
DataTable Syntax
• Syntax similar to <c:while loop:<dataTable value = “${somebean.data}” var = “loopvar” other html table attributes > …</dataTable>
DataTable Syntax
• Link columns of table to member variables of objects• Syntax:<h:column #loopvar.membervariable />– Inside <dataTable tag– One for each field to display
DataTable Syntax
• Can display header and footer for columns• Syntax (inside <h:column tag):– <f:facet name=“header”>display</f:facet>– <f:facet name=“footer”>display</f:facet>
• Common example: Labels at top of each column
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
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
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
Adding to Cart
Construct new widget object and add to cart
Return next page to go to (probably cart page)
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
Displaying Cart
• Link DataTable to cart ArrayList in bean• Display relevant fields in columns
Displaying Cart
• Can display totals as column footers• Link to bean methods that computes totals
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)
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)
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
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
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