XForms repeat and html tables

classic Classic list List threaded Threaded
6 messages Options
Reply | Threaded
Open this post in threaded view
|

XForms repeat and html tables

FraserHore-2
I'd be grateful for any advice on getting an html table to render
using the xforms repeat attribute.  Data renders ok but the <td> cells
within the repeat all end up rendering vertically in the first row.
Here is sample code:

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:xf="http://www.w3.org/
2002/xforms">
    <head>
        <xf:model>
            <xf:instance id="tableTest" xmlns="">
                <data>
                    <row>
                        <cell>Row One Cell One</cell>
                        <cell>Row One Cell Two</cell>
                        <cell>Row One Cell Three</cell>
                    </row>
                    <row>
                        <cell>Row Two Cell One</cell>
                        <cell>Row Two Cell Two</cell>
                        <cell>Row Two Cell Three</cell>
                    </row>
                    <row>
                        <cell>Row Three Cell One</cell>
                        <cell>Row Three Cell Two</cell>
                        <cell>Row Three Cell Three</cell>
                    </row>
                </data>
            </xf:instance>
        </xf:model>
    </head>
    <body>
        <table border="1px">
            <thead>
                <tr>
                    <th>Heading One</th>
                    <th>Heading Two</th>
                    <th>Heading Three</th>
                </tr>
            </thead>
            <tbody xf:repeat-nodeset="instance('tableTest')/row">
                <tr xf:repeat-nodeset="cell">
                    <td>
                        <xf:output ref="."/>
                    </td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

Thanks!
_______________________________________________
dev-tech-xforms mailing list
[hidden email]
https://lists.mozilla.org/listinfo/dev-tech-xforms
Reply | Threaded
Open this post in threaded view
|

Re: XForms repeat and html tables

Dion Sole
On Oct 28, 2:13 am, Fraser <[hidden email]> wrote:
> I'd be grateful for any advice on getting an html table to render
> using the xforms repeat attribute.  Data renders ok but the <td> cells
> within the repeat all end up rendering vertically in the first row.
> Here is sample code:
.....

>     <body>
>         <table border="1px">
>             <thead>
>                 <tr>
>                     <th>Heading One</th>
>                     <th>Heading Two</th>
>                     <th>Heading Three</th>
>                 </tr>
>             </thead>
>             <tbody xf:repeat-nodeset="instance('tableTest')/row">
>                 <tr xf:repeat-nodeset="cell">
>                     <td>
>                         <xf:output ref="."/>
>                     </td>
>                 </tr>
>             </tbody>
>         </table>
>     </body>
> </html>
>
> Thanks!

repeat-nodeset doesn't quite work properly atm. The problem is that
because the repeat-* attributes are implemented using XBL (via -moz-
binding), the original element needs to be recreated with its original
binding, since the xforms binding overrides whatever was originally
there.
The end result is that the actual element ends up being inserted as a
child of itself and then cloned for each repeat item, instead of its
content being cloned for each item. So you end up with something like
the following:

<tbody repeat-nodeset="*">
  <tbody> <!-- A new copy of the original element is inserted as its
own first child -->
  ... all tbody children ...
  </tbody>
  <tbody>
  ... all tbody children ...
  </tbody>
</tbody>

This of course results in the renderer creating new anonymous tables
to contain each of the tbodys, which causes the vertical issue you
see.
I'm not sure if it's possible to fix this with the way the attributes
are currently implemented, but there's a patch for adding XTF support
for attributes, which would allow it to be implemented properly.

If you're only really interested in the grid layout a table gives you
(instead of the actual table semantics), I've written some CSS that we
use to format the actual <xf:repeat/> as a table which I could post.
_______________________________________________
dev-tech-xforms mailing list
[hidden email]
https://lists.mozilla.org/listinfo/dev-tech-xforms
Reply | Threaded
Open this post in threaded view
|

Re: XForms repeat and html tables

FraserHore-2
Thank you for the explanation! Could you please clarify what you mean
by XTF support and indicate where the patch can be found?  I'd also be
very interested to try out your css for formatting a repeat as a
table!

Regards,

Fraser



On Oct 27, 9:43 pm, Dion <[hidden email]> wrote:

> On Oct 28, 2:13 am, Fraser <[hidden email]> wrote:
>
>
>
> > I'd be grateful for any advice on getting an html table to render
> > using the xforms repeat attribute.  Data renders ok but the <td> cells
> > within the repeat all end up rendering vertically in the first row.
> > Here is sample code:
> .....
> >     <body>
> >         <table border="1px">
> >             <thead>
> >                 <tr>
> >                     <th>Heading One</th>
> >                     <th>Heading Two</th>
> >                     <th>Heading Three</th>
> >                 </tr>
> >             </thead>
> >             <tbody xf:repeat-nodeset="instance('tableTest')/row">
> >                 <tr xf:repeat-nodeset="cell">
> >                     <td>
> >                         <xf:output ref="."/>
> >                     </td>
> >                 </tr>
> >             </tbody>
> >         </table>
> >     </body>
> > </html>
>
> > Thanks!
>
> repeat-nodeset doesn't quite work properly atm. The problem is that
> because the repeat-* attributes are implemented using XBL (via -moz-
> binding), the original element needs to be recreated with its original
> binding, since the xforms binding overrides whatever was originally
> there.
> The end result is that the actual element ends up being inserted as a
> child of itself and then cloned for each repeat item, instead of its
> content being cloned for each item. So you end up with something like
> the following:
>
> <tbody repeat-nodeset="*">
>   <tbody> <!-- A new copy of the original element is inserted as its
> own first child -->
>   ... all tbody children ...
>   </tbody>
>   <tbody>
>   ... all tbody children ...
>   </tbody>
> </tbody>
>
> This of course results in the renderer creating new anonymous tables
> to contain each of the tbodys, which causes the vertical issue you
> see.
> I'm not sure if it's possible to fix this with the way the attributes
> are currently implemented, but there's a patch for adding XTF support
> for attributes, which would allow it to be implemented properly.
>
> If you're only really interested in the grid layout a table gives you
> (instead of the actual table semantics), I've written some CSS that we
> use to format the actual <xf:repeat/> as a table which I could post.

_______________________________________________
dev-tech-xforms mailing list
[hidden email]
https://lists.mozilla.org/listinfo/dev-tech-xforms
Reply | Threaded
Open this post in threaded view
|

Re: XForms repeat and html tables

Gary-138
IMHO, there is so much benefit in supporting <xf:repeat> inside
<table> that it would be worth it to try a new approach.
_______________________________________________
dev-tech-xforms mailing list
[hidden email]
https://lists.mozilla.org/listinfo/dev-tech-xforms
Reply | Threaded
Open this post in threaded view
|

Re: XForms repeat and html tables

Dion Sole
In reply to this post by FraserHore-2
On Oct 28, 9:48 pm, Fraser <[hidden email]> wrote:
> Thank you for the explanation! Could you please clarify what you mean
> by XTF support and indicate where the patch can be found?  I'd also be
> very interested to try out your css for formatting a repeat as a
> table!
>
> Regards,
>
> Fraser

XTF is the 'extensible tag framework". It allows for extending the
markup dialects mozilla understands without actually having to add
them to the overall browser, by registering for the namespace of the
dialect you're interested in. So the plugin registers for the XForms
namespace, and thus any elements in that namespace are handled by the
plugin instead of the generic XML handler.

However, XTF has one fairly large limitation in that it can only
register for namespaces on elements, and not on attributes. So
<xf:repeat/> could be handled, but <foo xf:repeat-nodeset="*"/>
couldn't. https://bugzilla.mozilla.org/show_bug.cgi?id=358257 is the
bug report to try to add this functionality.


The CSS we use is for markup like the following:

<div class="table-container">
  <div class="caption">Table caption goes here</div>
  <xf:repeat nodeset="foo">
    <xf:output ref="bar">
      <xf:label>Bar</xf:label>
    </xf:output>
    .....
    Other "table cells" as needed
    .....
  </xf:repeat>
</div>

The "table-container" div is there to allow for having a properly-
positioned caption. The overall appearance is that the repeat is a
table-body, even though it's actually set to display: table;
And the CSS for that is as follows:

---------------------------------------------------------------------------------------------------------

@namespace url('http://www.w3.org/1999/xhtml');
@namespace xf url('http://www.w3.org/2002/xforms');

/* This div wraps the repeat, and allows for having a table caption */
.table-container
{
  display: table !important;
}

.caption
{
  display: table-caption !important;
}

/* <html:table> */
.table-container > xf|repeat
{
  display: table !important;
}

/* <html:thead>, <html:tbody> */
.table-container > xf|repeat > div
{
  display: table-row-group !important;
}

/* <html:thead> */
.table-container > xf|repeat > div:not([anonid])
{
  display: table-header-group !important;
  font-weight: bold;
}

/* <html:tr> */
.table-container > xf|repeat > div > contextcontainer
{
  display: table-row !important;
}

/* <html:th>, <html:td> */
.table-container > xf|repeat xf|output,
.table-container > xf|repeat xf|trigger
{
  display: table-cell !important;
}

/* output labels are used for column headers, so they should be
 * hidden in the body of the table */
.table-container > xf|repeat > div[anonid] > contextcontainer > xf|
output > xf|label
{
  display: none !important;
}

/* triggers need to show no text in the header row */
.table-container > xf|repeat xf|trigger
{
  visibility: hidden !important;
}

/* but do need to show text in the body */
.table-container > xf|repeat > div[anonid] > contextcontainer > xf|
trigger
{
  visibility: visible !important;
}

---------------------------------------------------------------------------------------------------------

It's not perfect; In particular you're forced to use the label text as
header text (the bottom 3 rules are for that), but it works for what
we need. You can add extra elements to the list of table-cells. We
only use triggers and outputs, so that's all that's in there.
_______________________________________________
dev-tech-xforms mailing list
[hidden email]
https://lists.mozilla.org/listinfo/dev-tech-xforms
Reply | Threaded
Open this post in threaded view
|

Re: XForms repeat and html tables

FraserHore-2
Hi Dion,

Thanks so much for sharing your code.  An issue I have is that I'm
creating a template so I don't know in advance what the instance nodes
will be.  For this reason I'm using a nested repeat.  The first repeat
iterates through the entries and then the second repeat iterates
through the elements within each entry.  I modified your code to the
following but everything still displays vertically, rather than in a
table:

<div class="table-container">
    <div class="caption">Table caption goes here</div>
    <xf:repeat nodeset="instance('childObjectsCurrentVersionsFeed')/
atom:entry" class="xf-table">
        <div class="xf-table-header-group">
            <xf:repeat nodeset="atom:content//*[count(./*) = 0]"
class="xf-table-row">
               <xf:output ref="name(.)" class="xf-table-cell"/>
            </xf:repeat>
        </div>
        <div class="xf-table-row-group">
            <xf:repeat nodeset="atom:content//*[count(./*) = 0]"
class="xf-table-row">
               <xf:output ref="." class="xf-table-cell"/>
            </xf:repeat>
        </div>
        <div class="xf-table-footer-group">
            <xf:repeat nodeset="atom:content//*[count(./*) = 0]"
class="xf-table-row">
               <xf:output value="" class="xf-table-cell"/>
            </xf:repeat>
        </div>
    </xf:repeat>
</div>

CSS

@namespace url('http://www.w3.org/1999/xhtml');
@namespace xf url('http://www.w3.org/2002/xforms');

/* This div wraps the repeat, and allows for having a table caption */
.table-container {
    display: table !important;
    clear: both;
}
.caption {
    display: table-caption !important;
}

/* <html:table> */
.table-container > xf|repeat {
    display: table !important;
}

/* <html:thead>, <html:tbody> */
.table-container > xf|repeat > div {
    display: table-row-group !important;
}

/* <html:thead> */
.table-container > xf|repeat > div.xf-table-header-group {
    display: table-header-group !important;
    font-weight: bold;
}

/* <html:tr> */
.table-container > xf|repeat > div > xf|repeat {
    display: table-row !important;
}

/* <html:th>, <html:td> */
.table-container > xf|repeat > div > xf|repeat > xf|output,
.table-container > xf|repeat > div > xf|repeat > xf|trigger {
    display: table-cell !important;
}

Any suggestions?

Thanks!!

Fraser
_______________________________________________
dev-tech-xforms mailing list
[hidden email]
https://lists.mozilla.org/listinfo/dev-tech-xforms