JSON Interactions Between Server-Side Java and Client-Side YUI : Page 3

YUI DataTable Widget

The YUI DataTable widget is used for listing the certificate deposits associated to the Bank account holder. This widget provides out-of-the box support for both client- and server-side paging and sorting. Very minimal code is required to get this working. You need to define a placeholder in the HTML for the DataTable to appear.

<div id="cdDiv">
   <div id="dt-container"></div>
</div>

The table is initialized when the user selects a bank from the list, and the method createCDTable in BankDetails gets called (see Listing 2). The definition of the table columns is defined, and the datasource is initialized and passed to the DataTable. The response schema indicates how the client should parse the response. The server implementation for this function call looks like Listing 3.

Sorting

The function arguments sort and dir are used for sorting. When the user clicks the column headers, the DataTable generates these arguments and passes them to the DataSource. They are then appended to the initial request and sent to the server.

The sorting is done on the server side for the account number column.

private List<CDAccount> sort(List<CDAccount> accounts, String dir) {
   if("asc".equals(dir)) {
      CDAccount.SORT_ASC = true;
   } else {
      CDAccount.SORT_ASC = false;
   }
      
   Collections.sort(accounts);
      
   return accounts;
}

Figure 3. Paging- and Sorting-enabled DataTable: The paging- and sorting-enabled DataTable looks like this.

Paging

At the point of initialization, the Paginator widget instance is passed to the DataTable. The Paginator widget generates arguments like startIndex and sends them to the server. The response should contain the meta-field totalRecords to make the widget render pagination links appropriately. The arguments recordsReturned, startIndex, pageSize, and totalRecords are all mandatory because the Paginator widget uses them.

The paging- and sorting-enabled DataTable looks like Figure 3.

A Complete Introduction to YUI

In this last article of a three-part series on the YUI library, you got a demonstration of the server-side interaction for fetching and persisting data back to the server using JSON. The first two covered JavaScript object-oriented programming and a few YUI widgets, respectively. Taken together, the series offers a good introduction.

The YUI documentation is a wealth of information for exploring the library further, particularly the API documentation. You will find the YUI library to be a feature-rich framework for developing rich user interfaces for your web applications.

Previous Page