Wikibooks

XForms/Inline Repeats

< XForms

Motivation

edit

Most computer displays are wider than 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.

Method

edit

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 Image

edit
 
XForms Inline Repeat

Executable XForms Application

edit

Load XForms Application

Source Code

edit 
<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.css

edit 
/* 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;
}

Discussion

edit

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 Nesting

edit

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 Code

edit 
<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>

CSS

edit

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

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

Scoreboard Example

edit

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 CSS

edit 
/* 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 tables

edit

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>


Discussion

edit
Next Page: Insert | Previous Page: Repeat filter
Home: XForms
Retrieved from "https://en.wikibooks.org/w/index.php?title=XForms/Inline_Repeats&oldid=4445551"