Create customizable components

Question

I am new to JSF. We are building a web application using JSF with primefaces. We have lot of places where we need to display table. The table should have paging, column resizeable, in some places we need context menu on right click, etc.

I am able to implement this with dataTable component provided by primefaces. But I would like to create it as more customizable component. Some thing like reusable javascript/jquery (Jqgrid) plugin where we just set few property values which should be should be enough.

I would also want to do the similar way instead of writing the whole code for all the functionality, if a component is created which can be reused in all places and set parameters (Eg: columnResizable='true', columnSortable='true') which saves development time.

I am not getting any picture of how to accomplish it. If some one can guide that will be great. I am not expecting entire code, any idea of implementing this using JSF will be really appreciated.

Answer 1

You should use a composite component, you can pass as many parameters as you want and customize it accordingly using #{cc.attrs.param1} syntax. Here's a sample XHTML.

Composite component

<ui:component xmlns="http://www.w3.org/1999/xhtml" xmlns:c="http://java.sun.com/jsp/jstl/core" xmlns:u="http://java.sun.com/jsf/composite/ui" xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html" xmlns:s="http://jboss.org/seam/faces" xmlns:p="http://primefaces.org/ui" xmlns:cc="http://java.sun.com/jsf/composite">
    <cc:interface>
        <cc:attribute name="tableId" />
        <cc:attribute name="param1" />
        <cc:attribute name="param2" default="false" />
        <cc:attribute name="param3" required="true" />
    </cc:interface>
    <cc:implementation>
        <p:dataTable id="#{cc.attrs.tableId}" rendered="#{cc.attrs.param2}" value="#{cc.attrs.param1}" var="result" emptyMessage="#{messages['global.noItemsFound']}">
                            <ui:include src="#{cc.attrs.param3}" />
        </p:dataTable>
    </cc:implementation>
</ui:component>

Using <c:if test="#{not empty cc.attrs.param4}"> or rendered attributes you can further customize your component

View

Let's call your composite myList.xhtml, then you could call it:

<u:myList param1="#{backingbean.results}" param2="true" id="list1" param3="/items/columns.xhtml" />

and don't forget to put a header in your view:

xmlns:u="http://java.sun.com/jsf/composite/ui"

columns.xhtml

<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:s="http://jboss.org/seam/faces" xmlns:u="http://java.sun.com/jsf/composite/ui"
    xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html"
    xmlns:p="http://primefaces.org/ui">
    <p:column  headerText="Name">
        <h:outputText value="#{result.name}" />
    </p:column>
    <p:column  headerText="Salary">
        <h:outputText value="#{result.salary}" />
    </p:column>
    <p:column  headerText="Age">
        <h:outputText value="#{result.age}" />
    </p:column>
</ui:composition>

An alternative to including a separate view for columns would be using <p:columns> in composite component and passing another list containing columns data as a parameter. Dynamic Columns