Tabele na stronach aplikacji JSF

W artykule "Tabele o dynamicznej ilości kolumn w aplikacji JSF" opisałem, w jaki sposób prezentować na stronach JSF tabele o nieustalonej ilości kolumn z użyciem komponentów dataTable i columns z biblioteki Tomahawk. Miał to być jeden z elementów większej układanki, której ostatecznym celem jest zbudowanie komponentu JSF – w formie kompozycji Facelets – adresującego problem, o którym pisałem z kolej w artykule "Prezentacja dużych tabel na stronach HTML". A problemem jest to, że – jak tam napisałem – "chciałbym mieć komponent, który umożliwi prezentację dużej tabeli na stronie HTML, przy czym tabela ta, jest zarówno bardzo długa, jak i bardzo szeroka". Dobrą wiadomością jest, że problem jest już niemalże rozwiązany, tzn. komponent ten powstał i działa niemalże tak jakbym sobie tego życzył, tyle że nie dało się go zaimplementować stosując podejście z użyciem wspomnianych komponentów Tomahawk. W sukurs przyszedł inny komponent, również z biblioteki Tomahawk, a mianowicie dataList. Dzisiaj napiszę więc o innym podejściu do implementacji tabel "o dynamicznej ilości kolumn w aplikacji JSF". Podejściu bazującym na komponencie dataList.

Zacznijmy od modelu danych. Żeby nie utrudniać, załóżmy że nagłówki – tj. nagłówek górny i boczny – oraz treść prezentowana w tabeli to będą zwykłe napisy, a więc nasz model danych może się opierać na obiektach klasy String. Poniżej interfejsy oraz przykładowe implementacje modelu danych potrzebnego dla naszej tabeli.

public interface TableDataModel {
   public List<String> getColsHeaders();
 
   public List<RowDataModel> getRowsDataModel();
}
 
public interface RowDataModel {
   public String getRowHeader();
 
   public List<String> getCellsList();
}
 
public class BasicTableDataModel implements TableDataModel {
   private List<String> colsHeaders;
 
   private List<RowDataModel> rowsDataModel;
 
   public BasicTableDataModel(String[] colsHeaders) {
      this.colsHeaders =
         new ArrayList<String>(Arrays.asList(colsHeaders));
   }
 
   public List<String> getColsHeaders() {
      return colsHeaders;
   }
 
   public List<RowDataModel> getRowsDataModel() {
      if (rowsDataModel == null)
         rowsDataModel = new ArrayList<RowDataModel>();
 
      return rowsDataModel;
   }
 
   public void addRow(RowDataModel rowDataModel) {
      getRowsDataModel().add(rowDataModel);
   }
}
 
public class BasicRowDataModel implements RowDataModel {
   private String rowName;
 
   private List<String> cellsList;
 
   public BasicRowDataModel(String rowName, String[] cellsArray) {
      this.rowName = rowName;
      this.cellsList =
         new ArrayList<String>(Arrays.asList(cellsArray));
   }
 
   public List<String> getCellsList() {
      return cellsList;
   }
 
   public String getRowHeader() {
      return rowName;
   }
}

Implementacje modelu danych pokazane powyżej zostały skonstruowane pod kątem łatwości użycia w kodzie przykładowym, więc ziarno zarządzane JSF, którego użyjemy do budowy strony jest niezwykle proste. Oto jego kod, w całości poświęcony inicjalizacji danych:

public class TableBackingBean {
   private BasicTableDataModel dataModel;
 
   public BasicTableDataModel getDataModel() {
      if (dataModel == null) {
         dataModel = new BasicTableDataModel(
            new String[] { "Ford", "Opel", "BMW" });
 
         dataModel.addRow(new BasicRowDataModel(
            "2005", new String[] {"12", "8", "10" }));
 
         dataModel.addRow(new BasicRowDataModel(
            "2006", new String[] {"-6", "2", "12" }));
 
         dataModel.addRow(new BasicRowDataModel(
            "2007", new String[] {"16", "18", "-2" }));
      }
 
      return dataModel;
   }
}

O komponencie dataList możemy myśleć, nieco upraszczając, jak o implementacji pętli "for each". Użyjemy go więc jako iteratora po elementach kolekcji modelu danych i w ten sposób zbudujemy tabelę HTML. Oto, jak wygląda nasza strona:

<table>
   <tr>
      <td> </td>
      <t:dataList var="headerCell"
         value="#{tableBackingBean.dataModel.colsHeaders}">
 
         <td>#{headerCell}</td>
      </t:dataList>
   </tr>
 
   <t:dataList var="bodyRow"
      value="#{tableBackingBean.dataModel.rowsDataModel}">
 
      <tr>
         <td>#{bodyRow.rowHeader}</td>
 
         <t:dataList var="cell" value="#{bodyRow.cellsList}">
            <td>#{cell} %</td>
         </t:dataList>
      </tr>
   </t:dataList>
</table>

Ziarno zarządzane o nazwie tableBackingBean to naturalnie instancja klasy TableBackingBean. Efektem końcowym jest tabela prezentująca procentowy wzrost, lub spadek, ilości sprzedawanych aut przez poszczególnych producentach w poszczególnych latach.