XForms/Process Step Editor

MotivationEdit

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.

ProcessEdit

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 ImageEdit

XForms-process-step-editor.jpg

Working XForms ApplicationEdit

Load XForms Application

Source CodeEdit

<?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>
                   <!--  &lt;xf:group ref="instance('views')/ruleset-view"&gt;&lt;/xf:group&gt; -->
                <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 FileEdit

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


DiscussionEdit

Next Page: Application Builder | Previous Page: Replace Tester

Home: XForms

Last modified on 9 July 2009, at 20:47