You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@myfaces.apache.org by Mario Ivankovits <ma...@ops.co.at> on 2008/01/24 07:14:44 UTC

embedded table

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


Re: embedded table

Posted by Martin Marinschek <ma...@gmail.com>.
Sounds good!

regards,

Martin

On 2/6/08, Mario Ivankovits <ma...@ops.co.at> wrote:
> Hi!
> > Sounds good - can you send your example again utilizing the
> > detailStamp approach if that fits?
> So, not it is getting "stressy" again. I have a bad need for it now.
>
> So, using the detailStamp approach it might look like:
>
> <t:datable var="group1" value="#{bean.data}">
> ...
>    <t:column colspan="10">
>        <t:outputText value="#{group1.headerValue}" />
>    </t:column>
>    <f:facet name="detailStamp">
>      <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>
>          <f:facet name="detailStamp">
>            <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>
>        </f:facet>
>     </t:datable>
>   </f:facet>
> </t:datable>
>
> Additionally I'd like to introduce a headerStamp and footerStamp which
> renders into the head/foot of the table (if possible) and thus allows
> you to have multi-row header/footer.
> Effectively these new stamps might work with an embedded datatable only
> (for now).
>
> I'll start doing so now, ok?
>
> Ciao,
> Mario
>
>


-- 

http://www.irian.at

Your JSF powerhouse -
JSF Consulting, Development and
Courses in English and German

Professional Support for Apache MyFaces

Re: embedded table

Posted by Mike cornell <mc...@gmail.com>.


Mario Ivankovits wrote:
> 
> Hi!
>> It so happens, I have been looking for this sort of a solution.  
>>   
> :-) Yea, I wonder why no one else have had a need for this too. It is a
> common use-case in our application.
> 
>> In my case, I have a table with three columns, with three headings.
>>   
> <snip />
> 
> Do you mean something like this:
> A table with, say 10 columns. First column is a description and then 3x3
> columns with some values.
> As header you'd like to have:
> 1) 4 columns where the first column is a spacer for the description
> columns and then 3 columns where each spans 3 detail columns to describe
> the group of the spanned columns
> 2) another header with 10 column to describe exactly each column of the
> column
> 
> I am working on a solution for this too as I need exactly this kind of
> thing too.
> 
> Header 2 should be possible with the current solution, just use f:facet
> name=header on either the master table or detail table depending on if
> you'd like to have the header repeated each time.
> Header 1 requires some additional thoughts, but I think I'll introduce
> someting like a facet name="headerStamp" where you'll be able to define
> a header which a complete different set of columns.
> You just have to ensure that the number of columns (including all the
> callspan) match with all used tables.
> 
> Ciao,
> Mario
> 
> 
> 

Actually, i think i may have made it more confusing with my description, so
I'll simplify it.

You've got a three column table on an invoice.  The header describes each
column:

LineItem Description UnitCost



Then below that you have, to make it simple, an Image that spans all three
columns.

Then below the image you have 5 transactions relating to the Image above it.

Then you get another image, followed by 3 transactions.

etc. etc.  Each of these "groupings" are logical, but the data is described
by the heading for the overall table.

I believe this can be solved simply by nesting tables, but it would be
better to have the logical line items have the logical table headers applied
to the columns.  Otherwise, the only other way I can think of solving this
is to use a rendered attribute on each "row".  So depending upon the
contents of that row either render the image (or panel group, etc.) or a
usual data item.  

The problem is, the data source doesn't lend as well to that structure.  But
it's the only other option I can think of.
-- 
View this message in context: http://www.nabble.com/embedded-table-tp15059361p15343801.html
Sent from the My Faces - Dev mailing list archive at Nabble.com.


Re: embedded table

Posted by Mario Ivankovits <ma...@ops.co.at>.
Hi!
> It so happens, I have been looking for this sort of a solution.  
>   
:-) Yea, I wonder why no one else have had a need for this too. It is a
common use-case in our application.

> In my case, I have a table with three columns, with three headings.
>   
<snip />

Do you mean something like this:
A table with, say 10 columns. First column is a description and then 3x3
columns with some values.
As header you'd like to have:
1) 4 columns where the first column is a spacer for the description
columns and then 3 columns where each spans 3 detail columns to describe
the group of the spanned columns
2) another header with 10 column to describe exactly each column of the
column

I am working on a solution for this too as I need exactly this kind of
thing too.

Header 2 should be possible with the current solution, just use f:facet
name=header on either the master table or detail table depending on if
you'd like to have the header repeated each time.
Header 1 requires some additional thoughts, but I think I'll introduce
someting like a facet name="headerStamp" where you'll be able to define
a header which a complete different set of columns.
You just have to ensure that the number of columns (including all the
callspan) match with all used tables.


Ciao,
Mario


Re: embedded table

Posted by Mike cornell <mc...@gmail.com>.
It so happens, I have been looking for this sort of a solution.  

In my case, I have a table with three columns, with three headings.

I also have many line items that relate to these columns, however...I have
additional information to place above a group of line items.  The additional
information doesn't fit the 3 column layout (and would be better to
implement as a panelgroup or another custom component).  It describes what
business unit the line items that follow relate to. 

So What I'm looking for is an overall parent table with three "main"
columns, with child tables whose line items relate to the parent's three
columns.  The trick is that child table needs to have that spanning table
header with content that doesn't mesh with the three parent columns.  

It looks like your idea with the embedded attribute would help me to solve
this problem and have the solution be more elegant than simply nesting a
table inside a table.

I look forward to more information on this.  I'm a bit new to this, so
perhaps there is a better solution that I haven't found yet.

Thanks

Mike
-- 
View this message in context: http://www.nabble.com/embedded-table-tp15059361p15340775.html
Sent from the My Faces - Dev mailing list archive at Nabble.com.


Re: embedded table

Posted by Mario Ivankovits <ma...@ops.co.at>.
Hi!
> Sounds good - can you send your example again utilizing the
> detailStamp approach if that fits?
So, not it is getting "stressy" again. I have a bad need for it now.

So, using the detailStamp approach it might look like:

<t:datable var="group1" value="#{bean.data}">
...
   <t:column colspan="10">
       <t:outputText value="#{group1.headerValue}" />
   </t:column>
   <f:facet name="detailStamp">
     <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>
         <f:facet name="detailStamp">
           <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>
       </f:facet>
    </t:datable>
  </f:facet>
</t:datable>

Additionally I'd like to introduce a headerStamp and footerStamp which
renders into the head/foot of the table (if possible) and thus allows
you to have multi-row header/footer.
Effectively these new stamps might work with an embedded datatable only
(for now).

I'll start doing so now, ok?

Ciao,
Mario


Re: embedded table

Posted by Martin Marinschek <ma...@gmail.com>.
Sounds good - can you send your example again utilizing the detailStamp
approach if that fits?

regards,

Martin

On Jan 24, 2008 2:54 PM, Mario Ivankovits <ma...@ops.co.at> wrote:

> Hi!
> > Shouldn't this work somewhat
> > similar to how the detailStamp in t:dataTable works now?
> >
> Yep, why not, should work that way too. The real magic will be the
> "embedded=true" attribute to the datatable, and a different way how to
> define the column header for the "master" table.
>
> Ciao,
> Mario
>
>


-- 

http://www.irian.at

Your JSF powerhouse -
JSF Consulting, Development and
Courses in English and German

Professional Support for Apache MyFaces

Re: embedded table

Posted by Mario Ivankovits <ma...@ops.co.at>.
Hi!
> Shouldn't this work somewhat
> similar to how the detailStamp in t:dataTable works now?
>   
Yep, why not, should work that way too. The real magic will be the
"embedded=true" attribute to the datatable, and a different way how to
define the column header for the "master" table.

Ciao,
Mario


Re: embedded table

Posted by Martin Marinschek <ma...@gmail.com>.
Hi Mario,

ok, now I completely understand the use-case - I still don't
understand the source-code, though. Shouldn't this work somewhat
similar to how the detailStamp in t:dataTable works now?

regards,

Martin

On 1/24/08, Mario Ivankovits <ma...@ops.co.at> wrote:
> Martin Marinschek schrieb:
> > I don't get through to this server, sorry :(
> >
> Sorry, try this one: http://www.ops.co.at/~opsj/table.html
>
> Ciao,
> Mario
>
>


-- 

http://www.irian.at

Your JSF powerhouse -
JSF Consulting, Development and
Courses in English and German

Professional Support for Apache MyFaces

Re: embedded table

Posted by Mario Ivankovits <ma...@ops.co.at>.
Martin Marinschek schrieb:
> I don't get through to this server, sorry :(
>   
Sorry, try this one: http://www.ops.co.at/~opsj/table.html

Ciao,
Mario


Re: embedded table

Posted by Martin Marinschek <ma...@gmail.com>.
I don't get through to this server, sorry :(

regards,

Martin

On 1/24/08, Mario Ivankovits <ma...@ops.co.at> wrote:
> Hi Martin,
> > I think I understood it now - you
> > have a header per row for the details in this row, and also allow each
> > main-row to have a header now?
> >
> I am not sure if this describes it exactly - it is not about having headers.
> Or lets say, one header for three nested tables.
>
> Have a look at [1].
> This demonstrates the table I have in mind. I've enabled the border for
> a better visual representation of what I mean.
>
> First of all, the whole table has a header (the first row) - This is
> also the "first" table.
> This first table points to a list with two entries (the two red rows).
> Each entry of this list also points to another list (the three yellow rows).
> Each entry of the yellow list also points to another list (the details)
>
> So we have three tables, the inner two with embedded="true" to have the
> columns nicely aligned.
>
> Ciao,
> Mario
>
>
> [1] http://www2.ops.co.at/~im/table.html
>
>


-- 

http://www.irian.at

Your JSF powerhouse -
JSF Consulting, Development and
Courses in English and German

Professional Support for Apache MyFaces

Re: embedded table

Posted by Mario Ivankovits <ma...@ops.co.at>.
Hi Martin,
> I think I understood it now - you
> have a header per row for the details in this row, and also allow each
> main-row to have a header now?
>   
I am not sure if this describes it exactly - it is not about having headers.
Or lets say, one header for three nested tables.

Have a look at [1].
This demonstrates the table I have in mind. I've enabled the border for
a better visual representation of what I mean.

First of all, the whole table has a header (the first row) - This is
also the "first" table.
This first table points to a list with two entries (the two red rows).
Each entry of this list also points to another list (the three yellow rows).
Each entry of the yellow list also points to another list (the details)

So we have three tables, the inner two with embedded="true" to have the
columns nicely aligned.

Ciao,
Mario


[1] http://www2.ops.co.at/~im/table.html


Re: embedded table

Posted by Martin Marinschek <ma...@gmail.com>.
Hi Mario,

thanks - but that part I understood. I was just wondering about the
header part of your first example. I think I understood it now - you
have a header per row for the details in this row, and also allow each
main-row to have a header now?

regards,

Martin

On 1/24/08, Mario Ivankovits <ma...@ops.co.at> wrote:
> Hi!
> > can you give us a more concrete example? I don't understand all this
> > Datax/SubxHeaderxInformation stuff..
> >
> I'll try:
>
> Well, think about a typical Master/Detail scenario. You have a list of
> master records each holding a list of detail records.
>
> Now, you'd like to output this stuff in one data table where the detail
> records are not rendered using an independent datatable but within the
> same datatable to being able to have the columns nicely rendered as ONE
> column with all the same width.
>
> With the embedded datatable idea you will be able to unify this even
> more to process a more complicated datastructure where e.g you have two
> groupgs and the the detail records.
> List of GroupA holds a list of GroupB holds a list of detail records.
>
> Now, you can render this datastructure in a datatable with these group
> breaks spanning e.g. the whole number of columns but still have the
> columns connected between the various detail blocks. Resulting in a
> clean rendererd table as it is only one table and not a number of nested
> tables each with their own width of columns.
>
>
> Ciao,
> Mario
>
>


-- 

http://www.irian.at

Your JSF powerhouse -
JSF Consulting, Development and
Courses in English and German

Professional Support for Apache MyFaces

Re: embedded table

Posted by Mario Ivankovits <ma...@ops.co.at>.
Hi!
> can you give us a more concrete example? I don't understand all this
> Datax/SubxHeaderxInformation stuff..
>   
I'll try:

Well, think about a typical Master/Detail scenario. You have a list of
master records each holding a list of detail records.

Now, you'd like to output this stuff in one data table where the detail
records are not rendered using an independent datatable but within the
same datatable to being able to have the columns nicely rendered as ONE
column with all the same width.

With the embedded datatable idea you will be able to unify this even
more to process a more complicated datastructure where e.g you have two
groupgs and the the detail records.
List of GroupA holds a list of GroupB holds a list of detail records.

Now, you can render this datastructure in a datatable with these group
breaks spanning e.g. the whole number of columns but still have the
columns connected between the various detail blocks. Resulting in a
clean rendererd table as it is only one table and not a number of nested
tables each with their own width of columns.


Ciao,
Mario


Re: embedded table

Posted by Martin Marinschek <ma...@gmail.com>.
Hi Mario,

can you give us a more concrete example? I don't understand all this
Datax/SubxHeaderxInformation stuff..

regards,

Martin

On 1/24/08, Mario Ivankovits <ma...@ops.co.at> wrote:
> 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
>
>


-- 

http://www.irian.at

Your JSF powerhouse -
JSF Consulting, Development and
Courses in English and German

Professional Support for Apache MyFaces