XForms/Process Step Editor
Motivation
You want to create a process editor where a process is a 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;}
Source Code
<?xml version="1.0" encoding="UTF-8"?> <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>Process Steps</title> <link rel="stylesheet" type="text/css" href="local.css"/> <xf:model> <xf:instance xmlns="" id="process"> <data> <activity> <activity-name>Step 1</activity-name> <activity-type-code>enrich</activity-type-code> <webservice-id>ws111</webservice-id> <ruleset-id>r111</ruleset-id> <schema-id>s111</schema-id> </activity> <activity> <activity-name>Step 2</activity-name> <activity-type-code>validate</activity-type-code> <webservice-id>ws222</webservice-id> <ruleset-id>r222</ruleset-id> <schema-id>s222</schema-id> </activity> <activity> <activity-name>Step 3</activity-name> <activity-type-code>check-ruleset</activity-type-code> <webservice-id>ws333</webservice-id> <ruleset-id>r333</ruleset-id> <schema-id>schema333</schema-id> </activity> <activity> <activity-name>Step 4</activity-name> <activity-type-code>check-ruleset</activity-type-code> <webservice-id>ws444</webservice-id> <ruleset-id>r444</ruleset-id> <schema-id>s444</schema-id> </activity> </data> </xf:instance> </xf:model> </head> <body> <h1>Process Step Editor</h1> <div class="process-steps"> <xf:label class="group-label">Process:</xf:label> <xf:repeat nodeset="instance('process')/activity" id="activity-repeat"> <div class="activity" style="display:inline;"> <div class="activity-label"> <xf:input ref="activity-name" id="activity-name"/> </div> <xf:trigger> <xf:label>+</xf:label> <xf:action ev:event="DOMActivate"> <xf:insert nodeset="instance('process')/activity" at="index('activity-repeat')" position="after"/> <xf:setvalue ref="instance('process')/activity[index('activity-repeat')]/activity-name" value="''"/> <!-- should insert on the new row --> <xf:setfocus control="activity-name"/> </xf:action> </xf:trigger> <xf:trigger> <xf:label>-</xf:label> <xf:delete nodeset="instance('process')/activity[index('activity-repeat')]" ev:event="DOMActivate"/> </xf:trigger> </div> </xf:repeat> </div> <!-- this is always showing the selected activity--> <div class="inspector"> <xf:label class="group-label">Activity Inspector:</xf:label> <xf:repeat nodeset="instance('process')/activity[index('activity-repeat')=position()]" style="display:inline"> <xf:input ref="activity-name"> <xf:label>Step Name:</xf:label> </xf:input> <xf:select1 ref="activity-type-code"> <xf:label>Activity Type:</xf:label> <xf:item> <xf:label>Enrich</xf:label> <xf:value>enrich</xf:value> </xf:item> <xf:item> <xf:label>Validate</xf:label> <xf:value>validate</xf:value> </xf:item> <xf:item> <xf:label>Check Ruleset</xf:label> <xf:value>check-ruleset</xf:value> </xf:item> </xf:select1> <!-- <xf:group ref="instance('views')/ruleset-view"></xf:group> --> <xf:input ref="webservice-id"> <xf:label>Enrichment Service ID:</xf:label> </xf:input> <xf:input ref="ruleset-id"> <xf:label>Ruleset ID:</xf:label> </xf:input> <xf:input ref="schema-id"> <xf:label>Validate with Schema ID:</xf:label> </xf:input> </xf:repeat> </div> </body> </html>
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;}