XForms/Inline Repeats
< XForms
Motivation edit
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.
Method edit
CSS has two "display" options:
display:blockadds new elements vertically so the left edge is aligned.display:inlineis 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
Executable XForms Application edit
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.
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.
<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>