myfaces-dev mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From Mario Ivankovits <ma...@ops.co.at>
Subject embedded table
Date Thu, 24 Jan 2008 06:14:44 GMT
Hi!

One thing in JSF which constantly worries me is, that it is not easily 
possible to create a more complicated table layout with 
group/group/detail style.

What I mean is somthing like this:

Name Column1 Column2
Data1HeaderInformation1
Sub1HeaderInformation1
Name1 10 20
Sub1HeaderInformation2
Name2 20 30
Data2HeaderInformation1
Sub2HeaderInformation1
Name3 40 50
Name5 60 70

This reflects a list in a list in a list.

Currently, with JSF there is no chance to nest tables in such a way 
without rendering completely unrelated tables. The problem is, that the 
sub tables then have their own column width and it is hard to make them 
look as just one table.

I thought about a new attribute on the dataTable (embedded="true") which 
avoids rendering the <table></table> attributes so that the rendered 
table nicely nest into the parent table.
For sure, the user has to take care that the numer of columns are the 
same among all tables, probably by using stuff like "t:column colspan=".

Secondly, to make this fully usable, we need another way to define the 
header of a table as the "master" table has to render a very special 
header where one would like to mix in the header of the detail row.
For this, I thought we could use a facet directly on the datatable. In 
the end, it might look like the following:

<t:datable var="group1" value="#{bean.data}">
    <f:facet name="columnHeader1">
        <t:column colspan="2">
            <t:outputText value="header" />
        </t:column>
    </f:facet>
    <f:facet name="columnHeader2">
        <t:column>
            <t:outputText value="detailA" />
        </t:column>
    </f:facet>
    <f:facet name="columnHeader3">
        <t:column>
            <t:outputText value="detailB" />
        </t:column>
    </f:facet>
...
    <t:column colspan="10">
        <t:outputText value="#{group1.headerValue}" />
    </t:column>
    </t:datable var="group2" value="#{group1.groupData}" embedded="true">
        <t:column colspan="2">
            <t:outputText value="#{group2.headerValue2}" />
        </t:column>
        <t:column colspan="8">
            <t:outputText value="#{group2.headerValue2}" />
        </t:column>
        </t:datable var="detail" value="#{group2.detailData}" 
embedded="true">
            <t:column>
                <t:outputText value="#{detail.value1}" />
            </t:column>
....
            <t:column>
                <t:outputText value="#{detail.value10}" />
            </t:column>
        </t:datable>
    </t:datable>
</t:datable>

I know, with facelets I can achive the same using plain html tags and 
dataLists, but I STRONGLY prefer NOT to use such an approach, I'd like 
to use ONLY components.

What do you think?

Ciao,
Mario


Mime
View raw message