XForms, Process Step Editor

Motivation

You want to create a process editor where a process is a series of steps that grow horizontally as you add steps to a process. You want to override the default behavior of items in an repeat to be added horizontally, not vertically.

Process

Use a repeat but add the following to your css file

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

(Image: The original uploader was Dmccreary at English Wikibooks ., CC BY-SA 3.0)

Working XForms Application

Load XForms Application

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

Process Steps
rel="stylesheet" type="text/css" href="local.css"/>

xmlns="" id="process">

Step 1
enrich
ws111
r111
s111

Step 2
validate
ws222
r222
s222

Step 3
check-ruleset
ws333
r333
schema333

Step 4
check-ruleset
ws444
r444
s444

Process Step Editor
class="process-steps">
class="group-label">Process:
nodeset="instance('process')/activity" id="activity-repeat">

class="activity" style="display:inline;">
class="activity-label">
ref="activity-name" id="activity-name"/>

+
ev:event="DOMActivate">
nodeset="instance('process')/activity" at="index('activity-repeat')" position="after"/>
ref="instance('process')/activity[index('activity-repeat')]/activity-name" value="''"/>

control="activity-name"/>

nodeset="instance('process')/activity[index('activity-repeat')]" ev:event="DOMActivate"/>

class="inspector">
class="group-label">Activity Inspector:
nodeset="instance('process')/activity[index('activity-repeat')=position()]" style="display:inline">
ref="activity-name">
Step Name:

ref="activity-type-code">
Activity Type:

Enrich
enrich

Validate
validate

Check Ruleset
check-ruleset

ref="webservice-id">
Enrichment Service ID:

ref="ruleset-id">
Ruleset ID:

ref="schema-id">
Validate with Schema ID:

CSS File

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

body {
font-family: Helvetica, sans-serif;
}

.process-steps {
border: black 1px solid;
color: black; background-color: lightgreen;
padding: 18px 10px 14px 15px;
}

xf|label {
font-weight: bold;
}

.group-label {
position:relative;
text-align:left;
font-weight:bold;
font-size:12pt;
background-color: #D6D6DA;
top: -9px;
left: -9px;
-moz-border-radius: .3em;
padding: 3px;
border: solid black 1px;
}

.activity {
position: relative;
width: 250px;
padding: 8px; margin: 2px;
border: 1px solid blue;
background: PowderBlue;
/* the following only works under FireFox */
-moz-border-radius: 1em;
}

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

.activity-label {
display: inline;
text-align: center;
}

/* the label in the center of an activity box */
.activity .xf-value {
background-color: white;
text-align: center;
}

/* make the plus/minus buttons larger */
.activity xf|trigger xf|label {font-weight: bold; font-size: 12pt;}

.inspector {
border: black 1px solid;
color: black; background-color: pink;
padding: 15px;
width: 400px;
}

/* Makes the labels right aligned in a 200px wide column that floats to the left of the input controls. */
.inspector xf|input > xf|label,
.inspector xf|select > xf|label,
.inspector xf|select1 > xf|label,
.inspector xf|textarea > xf|label
{text-align:right; padding-right:10px; width:200px; float:left; text-align:right;}

/* This line ensures all the separate label controls in the inspector appear on their own lines */
.inspector xf|input,
.inspector xf|select,
.inspector xf|select1,
.inspector xf|textarea
{display:block; margin:5px 0;}

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.