Workflow

Editing the Style Sheet

 

The representation of the workflow components is configured in cascading style sheets (CSS). For further information about CSS please refer to http://www.w3.org/Style/CSS.
The described style sheet definitions could deviate from the definitions in the shipped style sheets.

The style sheet includes several sections with configuration parameters for

 

SDM Engine

 

In this section you define the renders used. Activate the link layout renderer, mapping model objects in graphical objects for the links e.g. the property LinkOffset is set to 5. The Link Layout renderer activates a transition display algorithm.

In the standard the style sheet renderer is activated!

Further renders can be defined.

 

/******************************************************************/
/* SDM engine configuration part */
/******************************************************************/

SDM {

LinkLayout : true;
}
LinkLayout {

linkOffset = 5;

}

 

 

Selection Section

 

This section includes:

  • selected activities: foreground color, fillstyle and fillcolor.
  • selected links: foreground color, color of the arrow, mode (representation of the foreground color with/without line and pattern) and the line width.
 

node:selected:selected {

foreground = ‘red’;
fillStyle = ‘SOLID_COLOR’;
fillColor1 : 255,100,0;

}

link:selected:selected {

foreground = ‘255,100,0’;
arrowColor = ‘255,100,0’;
mode = “MODE_NEON”;
lineWidth = 10;

}

 

Node Section

 

The node section defines the nodes display:

 

  General Display
 

In these sections you define the properties of all nodes (activities, resources, process variables).

The first declaration defines the class of the graphic objects that will be created for each activity. For a more specific activity, the declaration can be overwritten.

node {

class=ilog.views.sdm.graphic.IlvGeneralNode;
Anchor = TopLeft;

  In the following declaration the @ fetches the activity label from the model property name:. Then further parameters are defined.
 

label : @Name;
strokeWidth : 3;
strokeLineJoins: JOIN_ROUND
fillAngle : 45;
fillColor1 : white;
fillColor2 : white;
fillEnd : 0.5;
fillStart : 0.25;
fillStyle : SOLID_COLOR;
foreground : 153,0,153;
iconPosition : Top;
labelAlignment : Center;
labelColor : black;
labelPosition : Center;
labelSpacing : 2;
labelZoomable : true;
lineSpacing : 1;
maxLabelZoom : 15;
minLabelZoom : .1;
shapeType : RoundRectangle;
shapeWidth : 100;
wordWrapMode : true;

  The capital letters are properties used for the automatically setting of vertical and horizontal activity extend. (enlarge and downsize)
  horizontalAutoResizeMode : NO_AUTO_RESIZE;
verticalAutoResizeMode : EXPAND_ONLY;
   
  Activities
 

A Workflow activity is defined by the CSS-class activity. Use the attribute Type to differentiate between various types of activities. The following example describes the definition of the start activity.

node.activity[Type="start"]{

icon : url(images/start.png);
iconPosition : Center;
label : "";
ToolTipText : @Name;
shapeType : Ellipse;
shapeWidth : 30;
shapeHeight : 30;
strokeWidth : 3;
foreground : 0,139,0;
fillColor1 : 200,255,200;
fillStyle : SOLID_COLOR;

}

 

Valid activity types are "start" (Start-activity), "end" (End-activity), "activity" (normal activity), "split-or" (Split-OR-Operator), "split-xor" (Split-XOR-Operator), "split-and" (Split-AND-Operator), "join-asyn" (Asynchronous Join), "join-syn" (Synchronous Join) and"join-and" (Join-AND-Operator).

   
  Resources
 

A Workflow-Resource is defined by the CSS-class resource. Use the attribute Type to differentiate between various types of activities. At the beginning of the following example the general display of resources is described. Then follows the definition of type USER resources:

node.resource {

shapeType : Ellipse;
shapeWidth : 80;
shapeHeight : 32;
strokeWidth : 2.0;
fillStyle : SOLID_COLOR
fillColor1 : 255,240,200;
foreground : 200,150,0;
iconPosition : Left;
wordWrapMode : false;
labelScaleFactor : 0.67;
horizontalAutoResizeMode : EXPAND_ONLY;

node.resource[Type="USER"] {

icon : url(images/r_user.png);

}

  VAlid types of resources are "USER", "GROUP", "ROLE", "DISTRIBUTOR" and "AUTOMATIC".
   
 

Process Variables

 

Process variables are defined by the CSS-class processVariable. There are no various types. One definition describes the process variables completely:

node.processVariable {

strokeWidth : 2;
shapeType : Rectangle;
shapeWidth : 80;
shapeHeight : 20;
foreground : 160,160,160;
fillColor1 : 240,240,240;
labelScaleFactor : 0.67;
wordWrapMode : false;
LabelPosition : left;
horizontalAutoResizeMode : EXPAND_ONLY;
verticalAutoResizeMode : NO_AUTO_RESIZE;

}

 
  In the following section a join node with type XOR is defined via attribute matching.
 

node.join[‘join_type’=XOR]{

stroke = ‘stroke DEF stroke_0 {lineWidth 2.0 endCap “Butt”

dashArray [ 4.0 , 4.0 ] miterLimit 3.732051}’;

}

   
  Flow Direction
 

An additional query of the Direction attribute defines various graphic renditions of nodes for the vertical and horizontal flow direction. Definitions without the query of the flow direction apply to vertical Workflow processes. As a general rule it will do to define the special properties of the horizontal display of a node after the general definition.

Example:

node.activity[Type="start"][Direction="horizontal"] {

icon : url(images/hstart.png);

}

   
 

Link Section

 

The link section includes the sections:

  General Link Settings

The General Link Settings define properties of all types of links.

At the beginning of the section the graphic properties of the link layout render are defined, to specify the preferred node sides the link should connect to:

  link {

NodeSideForOrigin = Bottom;
NodeSideForDestination = Top;

}

  Activity Link
 

Links between activities are defined by the CSS-ClassactivityLink. The shipped CSS defines these links as follows:

link.activityLink {

foreground : 0,0,0;
curved : 0.0;
arrowRatio : 2.5;

}

link.activityLink:selected:selected {

foreground : 255,100,0;
arrowColor : 255,100,0;
arrowRatio : 1;
mode : MODE_NEON;
lineWidth : 10;

}

  Resource Links
 

Links between activities and resources are defined by the CSS-class resourceLink. The shipped CSS defines these links as for unselected and selected display:

link.resourceLink {

lineStyle : 2,8;
foreground : 200,150,0;
lineWidth : 2;
maximumLineWidth : 5;
minimumLineWidth : 1;
endCap : CAP_ROUND;
oriented : false;
curved : 0.8;

}

link.resourceLink:selected:selected {

foreground : 255,100,0;
arrowColor : 255,100,0;
mode : MODE_NEON;
lineWidth : 10;

}

  Prozess Variablen Links
 

Links between activities and process variables are defined by the CSS-class prcVarLink. There are various types to be defined with the Type attribute:

Example:

link.prcVarLink {

ToolTipText : @Type;
foreground : 160,160,160;
lineWidth : 1;
maximumLineWidth : 5;
minimumLineWidth : 1;
curved : 0.6;
oriented : false;

}

The following section defines type read only process variables:

link.prcVarLink[Type="r"] {

lineStyle : 5,5;
decorations[0] : @#dot_small;
decorations[1] : @#dot_small;
decorationOptions[0] : DECORATION_OVER;
decorationOptions[1] : DECORATION_OVER;
decorationPositions : 0.0,1.0;

}

Vailid types of process variable links are "r" (read only), "w" (read and write) and "m" (mandatory field).