Last modified on 9 July 2009, at 20:24

XForms/Inline Repeats

MotivationEdit

Most computer displays are wider then they are high. So to take advantage of this you sometimes want to grow form data to the right, not down. To do this you must add CSS instructions to use an "inline" display for items within a repeat.

MethodEdit

CSS has two "display" options:

  1. display:block adds new elements vertically so the left edge is aligned.
  2. display:inline is horizontal placement where new divs gets added to the right just like new text is added to an input field.

The new elements get added to the current row. By default XForms used a block repeat. But this can be easily changed with a two stylesheet command.

In FireFox the class to modify the attributes of the repeated item is .xf-repeat-item. Other XForms players may use a different CSS element.

/* Makes the repeated items get added to the right. */
.xf-repeat-item {display:inline;}
/* We MUST put this in to limit the width of the repeated item */
.xf-repeat-item .xf-value {width: 70px;}

Screen ImageEdit

XForms Inline Repeat

Executable XForms ApplicationEdit

Load XForms Application

Source CodeEdit

<html xmlns="http://www.w3.org/1999/xhtml"
   xmlns:xf="http://www.w3.org/2002/xforms"
   xmlns:xs="http://www.w3.org/2001/XMLSchema"
   xmlns:ev="http://www.w3.org/2001/xml-events" >
   <head>
      <title>Inline Repeat</title>
      <link rel="stylesheet" type="text/css" href="local.css" />
      <xf:model>
         <xf:instance xmlns="" id="grid">
            <data>
               <cell-label>Cell Label 1</cell-label>
               <cell-label>A really long label here</cell-label>
               <cell-label>Short</cell-label>
               <cell-label>Last</cell-label>
            </data>
         </xf:instance>
      </xf:model>
   </head>
   <body>
      <h1>Inline Repeat</h1>
      <xf:repeat nodeset="cell-label">
         <div class="cell">
            <xf:output ref="." />
         </div>
      </xf:repeat>
   </body>
</html>

Local CSS File local.cssEdit

/* CSS file for inline repeat */
@namespace xf url("http://www.w3.org/2002/xforms");
body {
   font-family: Helvetica, sans-serif;
}
.cell {
  display:inline;
  height: 30px;
  padding: 8px; margin: 4px;
  border: 2px solid blue;
  background-color: lightblue;
  /* the following only works under FireFox */
  -moz-border-radius: 1em;
}
xf|output {
   text-align: center;
   vertical-align: middle;
   font-weight: bold;
}
.xf-repeat-item {
   display:inline;
}

DiscussionEdit

In the example above we note that the widths of each cell is determined by the size of the label. Each cell can have a different label. Note that we create a wrapper for each cell using a div. Both the cell wrapper and the .xf-fepeat-item must be set to be display:inline.

Adding Two Dimensional NestingEdit

You can nest repeat groups to create grids of cells. Just make the outer repeat have class attribute to adjust the line height.

XForms 2D Inline Repeats

Source CodeEdit

<html 
   xmlns:xf="http://www.w3.org/2002/xforms" 
   xmlns:xs="http://www.w3.org/2001/XMLSchema" 
   xmlns:ev="http://www.w3.org/2001/xml-events" 
   xmlns="http://www.w3.org/1999/xhtml">
   <head>
      <title>Inline Repeat</title>
      <link rel="stylesheet" type="text/css" href="inline-repeat.css" />
      <xf:model>
         <xf:instance xmlns="" id="grid">
            <data>
               <row>
                  <cell-label>Row 1</cell-label>
                  <cell-label>A really long label here</cell-label>
                  <cell-label>Short</cell-label>
                  <cell-label>Last</cell-label>
               </row>
               <row>
                  <cell-label>The first cell is the second row has a long label</cell-label>
                  <cell-label>Row 2 Cell 2</cell-label>
                  <cell-label>Short</cell-label>
                  <cell-label>Last Cell</cell-label>
               </row>
               <row>
                  <cell-label>Row 3</cell-label>
                  <cell-label>A really long label here</cell-label>
                  <cell-label>Short</cell-label>
                  <cell-label>Last</cell-label>
               </row>
                <row>
                  <cell-label>Cell 1</cell-label>
                  <cell-label>Row 4</cell-label>
                  <cell-label>Short</cell-label>
                  <cell-label>The Last Cell of the Last Row</cell-label>
               </row>
            </data>
         </xf:instance>
      </xf:model>
   </head>
   <body>
      <h1>Inline Repeat</h1>
      <xf:repeat nodeset="row" class="row">
         <xf:repeat nodeset="cell-label">
            <div class="cell">
               <xf:output ref="." />
            </div>
         </xf:repeat>
      </xf:repeat>
   </body>
</html>

CSSEdit

The following CSS will be needed to display a each row on a new line:

.row {
   display:block;
   line-height: 50px;
}

Scoreboard ExampleEdit

The following example shows how you can put text in before and after the inner repeat.

Scoreboard Example
<html xmlns:xf="http://www.w3.org/2002/xforms" 
   xmlns:xs="http://www.w3.org/2001/XMLSchema" 
   xmlns:ev="http://www.w3.org/2001/xml-events" 
   xmlns="http://www.w3.org/1999/xhtml">
   <head>
      <title>XForms Scoreboard</title>
      <link rel="stylesheet" type="text/css" href="scoreboard.css" />
      <xf:model>
         <xf:instance xmlns="" id="grid">
            <data>
               <row>
                  <team-name>Tigers</team-name>
                  <score>1</score>
                  <score>2</score>
                  <score>3</score>
                  <score>4</score>
                  <score>2</score>
                  <score>3</score>
                  <total/>
               </row>
               <row>
                  <team-name>Dolphins</team-name>
                  <score>3</score>
                  <score>2</score>
                  <score>1</score>
                  <score>3</score>
                  <score>2</score>
                  <score>1</score>
                  <total/>
               </row>
               <row>
                  <team-name>Bears</team-name>
                  <score>2</score>
                  <score>2</score>
                  <score>2</score>
                  <score>2</score>
                  <score>2</score>
                  <score>2</score>
                  <total/>
               </row>
                <row>
                  <team-name>Cubs</team-name>
                  <score>1</score>
                  <score>3</score>
                  <score>2</score>
                  <score>1</score>
                  <score>3</score>
                  <score>2</score>
                  <total/>
               </row>
            </data>
         </xf:instance>
         <xf:bind nodeset="row/total" calculate="sum(../score)"/>
      </xf:model>
   </head>
   <body>
      <h1>XForms Scoreboard</h1>
      <xf:repeat nodeset="row" class="row">
        <xf:output ref="team-name" class="team-name"/>
         <xf:repeat nodeset="score">
               <xf:output ref="." class="score"/>
         </xf:repeat>
         <xf:output ref="total" class="total"/>
         <br/>
      </xf:repeat>
   </body>
</html>

Scoreboard CSSEdit

/* CSS file for a scoreboard */
@namespace xf url("http://www.w3.org/2002/xforms");
 
body {
   font-family: Helvetica, sans-serif;
}
 
.row {
   line-height: 45px;
}
 
/* make everything in a row in a line */
.row * {
   display:inline;
}
 
xf|output {
   text-align: center;
   vertical-align: middle;
   font-weight: bold;
   height: 30px;
   padding: 6px; margin: 4px;
   border: 2px solid black;
   color: white;
  /* the following only works under FireFox */
   -moz-border-radius: .2em;
}
 
.team-name{background-color: blue;}
.total {background-color: green;}
.score {background-color: black;}

Repeats into CSS display tablesEdit

Get the table to align using CSS.

Here is an example:

<html xmlns="http://www.w3.org/1999/xhtml"
     xmlns:xforms="http://www.w3.org/2002/xforms"
     xmlns:ev="http://www.w3.org/2001/xml-events"
     xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
     xmlns:xsd="http://www.w3.org/2001/XMLSchema" >
     <head>
          <title>compact repeat testcase</title>
          <style>
               @namespace xf url("http://www.w3.org/2002/xforms");
 
               xf|repeat {
               display: inline;
               }
 
               xf|repeat div {
               display: inline;
               }
 
               xf|repeat.outer > .xf-repeat-item {
               display: table-row;
               height: 50px;
               padding: 2px; margin 2px;
               }
 
               xf|repeat.outer > div > .xf-repeat-item > xf|output > .xf-value {
               display: table-cell;
               width: 200px;
               text-align: center;
               padding: 2px; margin 2px;
               }
 
               xf|repeat.inner .xf-repeat-item {
               display: table-cell;
               width: 50px;
               background-color: lightblue;
               text-align: center;
               }
 
               .name {
               background-color: pink;
               text-align: center;
               width: 70px;
               height: 35px;
               }
 
               .final {
               background-color: yellow;
               text-align: center;
               width: 70px;
               }
          </style>
          <xforms:model>
               <xforms:instance id="instdata" xmlns="">
                    <scores>
                         <team>
                              <name>New York Giants</name>
                              <quarter>3</quarter>
                              <quarter>0</quarter>
                              <quarter>0</quarter>
                              <quarter>14</quarter>
                         </team>
                         <team>
                              <name>New England Patriots</name>
                              <quarter>0</quarter>
                              <quarter>7</quarter>
                              <quarter>0</quarter>
                              <quarter>7</quarter>
                         </team>
                    </scores>
               </xforms:instance>
          </xforms:model>
     </head>
     <body>
          <h2>Should show a line of data like a NFL box score</h2>
          <h3>Uses repeat element</h3>
          <br/>
 
          <xforms:repeat class="outer" nodeset="team">
               <xforms:output ref="name" class="name"/>
               <xforms:repeat class="inner" nodeset="quarter" appearance="compact">
                    <xforms:output value="."/>
               </xforms:repeat>
               <xforms:output value="sum(quarter)" class="final"/>
          </xforms:repeat>
     </body>
</html>


DiscussionEdit

Next Page: Insert | Previous Page: Repeat filter

Home: XForms