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.

Kuba · Accepted Answer · 2014-01-21T10:37:32.560

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

Thanks for your time. I have a question, in this case the count of column and data can differ to different tables. For Eg: One table can have 3 columns with Employee's data and another page might have a table with 5 columns with Department's data. Is it possible to send the column details (header, size, etc) and data to be shown as parameters ? Will this design accommodate this requirement? — Lolly, Jan 16 '14 at 07:20
It already is designed like that in my example. You simply pass a link to a separate view and include it in the composite component. In `param3="/items/columns.xhtml"` you include only columns and can have as many of them as you want. — Kuba, Jan 16 '14 at 07:59
Hi Kuba, I need more suggestion pls help me out. How can add context menu to it. In my case one table can have 3 menus and another menu can have 2 menu with submenus. How can I generalize and accommodate in composite component. — Lolly, Jan 19 '14 at 13:42
Which means a new xhtml page should be created for context menu alone and this page has to be passed a parameter to the composite component? — Lolly, Jan 20 '14 at 10:27
i'm afraid so, but you could always try some customizing with `` — Kuba, Jan 20 '14 at 10:36

Create customizable components

1 Answers1