XForms, Inline Repeats

Motivation

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

CSS has two "display" options:

• display:block adds new elements vertically so the left edge is aligned.
• 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

XForms Inline Repeat (Image: CC BY-SA 3.0)

Executable XForms Application

Load XForms Application

Source Code

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

Inline Repeat
rel="stylesheet" type="text/css" href="local.css" />

xmlns="" id="grid">

Cell Label 1
A really long label here
Short
Last

Inline Repeat
nodeset="cell-label">
class="cell">
ref="." />

Local CSS File local.css

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

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

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 (Image: CC BY-SA 3.0)

Source Code

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">;

Inline Repeat
rel="stylesheet" type="text/css" href="inline-repeat.css" />

xmlns="" id="grid">

Row 1
A really long label here
Short
Last

The first cell is the second row has a long label
Row 2 Cell 2
Short
Last Cell

Row 3
A really long label here
Short
Last

Cell 1
Row 4
Short
The Last Cell of the Last Row

Inline Repeat
nodeset="row" class="row">
nodeset="cell-label">
class="cell">
ref="." />

CSS

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

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

Scoreboard Example

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

Scoreboard Example (Image: CC BY-SA 3.0)

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">;

XForms Scoreboard
rel="stylesheet" type="text/css" href="scoreboard.css" />

xmlns="" id="grid">

Tigers
1
2
3
4
2
3

Dolphins
3
2
1
3
2
1

Bears
2
2
2
2
2
2

Cubs
1
3
2
1
3
2

nodeset="row/total" calculate="sum(../score)"/>

XForms Scoreboard
nodeset="row" class="row">
ref="team-name" class="team-name"/>
nodeset="score">
ref="." class="score"/>

ref="total" class="total"/>

Scoreboard CSS

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

Get the table to align using CSS.

Here is an example:

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

compact repeat testcase

@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;
}

id="instdata" xmlns="">

New York Giants
3
0
0
14

New England Patriots
0
7
0
7

Should show a line of data like a NFL box score
Uses repeat element

class="outer" nodeset="team">
ref="name" class="name"/>
class="inner" nodeset="quarter" appearance="compact">
value="."/>

value="sum(quarter)" class="final"/>

Where this page came from

This page was imported from Wikibooks. From “XForms” on Wikibooks, by its contributors, under CC BY-SA 4.0. Changed here: set as a page; navigation and edit links left out; each image under its own licence, credited in its caption.

Nobody has written it yet — it is the source material at a new address, which is why search engines are asked to skip it and why no one earns from it. It is up for grabs: take it on, and it is yours to rewrite and to earn from.