<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://xmlns.jcp.org/jsf/html" xmlns:f="http://xmlns.jcp.org/jsf/core" xmlns:b="http://butterfaces.org/components"> <h:head> <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"> </h:head> <body> <h:form id="formId"> <h:panelGroup id="numberOfRefreshes" layout="block" styleClass="alert alert-success"> Number of refresh clicks: #{myBean.numberOfRefreshes} </h:panelGroup> <b:tableToolbar tableId="table" ajaxDisableRenderRegionsOnRequest="true" refreshListener="#{myBean.toolbarRefreshListener}" rendered="true"> <!-- add refresh ajax event to enable refresh button --> <f:ajax event="refresh" render="formId:numberOfRefreshes" /> <!-- add toggle ajax event to enable toggle column buttons --> <f:ajax event="toggle" /> <!-- add order ajax event to enable order column buttons --> <f:ajax event="order" /> <b:text value="#{myBean.filterValue}" placeholder="Enter text..." autoFocus="true" hideLabel="true"> <f:ajax event="keyup" render="table"/> </b:text> </b:tableToolbar> <b:table id="table" var="rowItem" value="#{myBean.value}" model="#{myBean.tableModel}" singleSelectionListener="#{myBean}" tableBordered="false" tableCondensed="false" tableStriped="true" ajaxDisableRenderRegionsOnRequest="true" rendered="true"> <!-- at this time you have to put an ajax tag to activate some features--> <f:ajax render="formId:selectedRow"/> <b:column id="column1" label="Readonly text"> /* text */ <b:tooltip placement="top"> /* tooltip text */ </b:tooltip> </b:column> <b:column id="column2" sortColumnEnabled="false" label="Action"> /* action */ </b:column> <b:column id="column3" label="Creation date"> /* date */ </b:column> <b:column id="column4" sortColumnEnabled="false" hideColumn="true" label="Readonly text (default hide)"> /* disabled input with text */ </b:column> </b:table> <h:panelGroup id="selectedRow"> <h:output value="#{myBean.selectedRow.a}" rendered="#{not empty myBean.selectedRow}"/> <h:panelGroup/> </h:form> </body> </html>
package org.butterfaces.table.demo; import org.butterfaces.event.TableSingleSelectionListener; import org.butterfaces.model.table.TableModel; import org.butterfaces.model.table.DefaultTableModel; import org.butterfaces.model.table.TableToolbarRefreshListener; import javax.faces.view.ViewScoped; import javax.inject.Named; @ViewScoped @Named public class MyBean implements Serializable, TableSingleSelectionListener, TableToolbarRefreshListener { private TableModel tableModel = new DefaultTableModel(); private String filterValue; private int numberOfRefreshes; @PostConstruct public init() { // initial table ordering by first column tableModel.getTableRowSortingModel() .sortColumn("table", "column1", null, SortType.ASCENDING); } public List<DemoPojo> getValue() { final List<DemoPojo> pairs = new ArrayList<>(); pairs.add(new DemoPojo(1L, "r1c1", "r1c2")); pairs.add(new DemoPojo(2L, "r2c1", "r2c2")); pairs.add(new DemoPojo(3L, "r3c1", "r3c2")); pairs.add(new DemoPojo(4L, "r4c1", "r4c2")); pairs.add(new DemoPojo(5L, "r5c1", "r5c2")); pairs.add(new DemoPojo(6L, "r6c1", "r6c2")); pairs.add(new DemoPojo(7L, "r7c1", "r7c2")); // TODO sort by table model return this.filterByValue(pairs, this.filterValue); } private DemoPojo selectedRow; @Override public void processTableSelection(final DemoPojo data) { this.selectedRow = data; } @Override public boolean isValueSelected(DemoPojo data) { return selectedRow != null ? data.getId() == selectedRow.getId() : false; } @Override public void onPreRefresh() { numberOfRefreshes++; } public int getNumberOfRefreshes() { return numberOfRefreshes; } public List<DemoPojo> filterByValue(final List<DemoPojo> pairs, final String filterValue) { // TODO implement me return pairs; } public String getFilterValue() { return this.filterValue; } public void setFilterValue(final String filterValue) { this.filterValue = filterValue; } public DemoPojo getSelectedRow() { return selectedRow; } public TableModel getTableModel() { return this.tableModel; } }
package org.butterfaces.table.demo; public class DemoPojo { private final long id; private final String a; private final String b; private final String date; public DemoPojo(final long id, final String a, final String b) { this.id = id; this.a = a; this.b = b; this.date = new java.util.Date(); } // getter }
<?xml version="1.0" encoding="UTF-8"?> <web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" version="3.0"> <!-- override table and toolbar glyphicons by context param --> <!-- custom glyphicons (i.e. font-awesome) --> <!-- showcase shows default glyphicons --> <context-param> <param-name>org.butterfaces.glyhicon.refresh</param-name> <param-value>fa fa-refresh</param-value> </context-param> <context-param> <param-name>org.butterfaces.glyhicon.options</param-name> <param-value>fa fa-th</param-value> </context-param> <context-param> <param-name>org.butterfaces.glyhicon.sort.none</param-name> <param-value>fa fa-sort</param-value> </context-param> <context-param> <param-name>org.butterfaces.glyhicon.sort.ascending</param-name> <param-value>fa fa-sort-down</param-value> </context-param> <context-param> <param-name>org.butterfaces.glyhicon.sort.descending</param-name> <param-value>fa fa-sort-up</param-value> </context-param> <!-- Shows waiting panel over regions that will be renderer by ajax request --> <!-- Could be overridden by ajaxDisableRenderRegionsOnRequest component attribute --> <!-- default is true --> <context-param> <param-name>org.butterfaces.ajaxDisableRenderRegionsOnRequest</param-name> <param-value>true</param-value> </context-param> </web-app>
