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