pondělí 13. října 2008

ICEFaces: Multiheader tables with column visibility

We intended to realize a GUI that could configure visibility of table columns. The requirement was a little bit more sophisticated because we wanted to use a two-row header. The first header row defines a column section. The other one defines individual columns.
As we had decided to use ICEFaces on the project it seemed clear that the rendered attribute of ICEFaces elements is perfectly suited to handle this requirement. But after some testing we realized that there is a bug in the ICEFaces and this attribute is not interpreted correctly in the headerRow element, see http://jira.icefaces.org/browse/ICE-3136. A response from the ICEFaces team came fast and the bug is fixed in the 1.7.2 release.
Finally we can come to realize the feature. For better understanding let us see an example:
We can choose all columns to be presented in a table.
This setting leads to the following table.
Then we reconfigure the setting, e.g. we hide the second column.
And we receive a table containing only the first and third column.
Well it is effective and simple to implement it with the bug fix mentioned above.
First we must define the first header row. This means to count a number of visible columns in the section for the colspan attribute (recordConfig.getEventColumnCount()). If this number is higher then zero the section as a whole is visible. This is covered in the recordConfig.isSelectedEvent() method.
Then we have to check the visibility of each column in the second header row and do the same for the individual table rows.
And that is all. See the source code for more details.



<ice:columngroup>
<ice:headerrow>
<ice:column colspan="#{recordConfig.getEventColumnCount()}"
rendered="#{recordConfig.isSelectedEvent()}">
<ice:outputText value="#{i18n.messages['ResultEvent']}"
rendered="#{recordConfig.isSelectedEvent()}"/>
</ice:column>
</ice:headerRow>
<ice:headerrow>
<ice:column rendered="#{recordConfig.selectedEventWhen}">
<ice:outputText value="#{i18n.messages['ResultEventWhen']}"
rendered="#{recordConfig.selectedEventWhen}"/>
</ice:column>
<ice:column rendered="#{recordConfig.selectedEventOperation}">
<ice:outputText value="#{i18n.messages['ResultEventOperation']}"
rendered="#{recordConfig.selectedEventOperation}"/>
</ice:column>
<ice:column rendered="#{recordConfig.selectedEventType}">
<ice:outputText value="#{i18n.messages['ResultEventType']}"
rendered="#{recordConfig.selectedEventType}"/>
</ice:column>
</ice:headerRow>
</ice:columnGroup>

<ice:column rendered="#{recordConfig.selectedEventWhen}">
<ice:outputtext value="#{record.eventWhen}">
</ice:column>
<ice:column rendered="">
<ice:outputtext value="#{record.eventOperation}">
</ice:column>
<ice:column rendered="#{recordConfig.selectedEventType}">
<ice:outputtext value="#{record.eventType}">
</ice:column>

1 komentář:

Visibility řekl(a)...

I have a web page with a "search" button and a table which gets populated according to the search criteria. When a search result is selected, there is another table that gets populated with sub-results. In the second table, the ID of the first one is shown. I also include a date field. There is another button to update data on "table2", but I need the date field to be compulsory. Once I set "required = true" for that date field, the first button stops responding when there are rows selected. What parameters in the first or second button should I change to make it work?