Process Manager User's Guide

CHAPTER 4

The Process Designer User Interface

This chapter describes the user interface functionality of Composer Process Designer, which is the design-time environment in which you will create your process models.

Main Features

The Process Designer is a visual editing environment for creating process models represented by directed-edge graphs. In this environment, you can quickly create and arrange activities (represented by icons), draw links between activities, and designate data mappings, link conditions, etc., between and among activities. The point-and-click nature of the drawing environment allows for rapid creation of flow graphs.

An important feature of Process Designer is that any process can be run in animation mode at design time, so that process models can be designed, tested, and debugged in a single session. In animation mode, you can step into or over activities, set breakpoints, watch data transformations as they occur, see log messages, observe the behavior of splits and joins, etc., all in real time. You can also drill down on activity implementations, make changes to action models in components, edit message maps or documents, modify link or join logic, and so forth, interactively, without leaving the session. This capability greatly speeds development.

The Process Designer Window

The Process Designer runs inside Composer (along with other component editors), so the overall environment should look familiar to any Composer user. (See graphic, below.)

When Process Designer is the front editor, three new panes are visible:

The Process Model Pane (also called the canvas), where you draw the process model graph. This is the largest pane.
The Object Properties Pane, in which you can specify property values for various elements of the process model (e.g., activities, links, text labels, and shapes).
The Overview Pane, which contains a "bombsight view" of the main canvas. By holding the mouse down and dragging the blue rectangle within this mini-window, you can pan across the main canvas, setting the visual focus to a particular region instantly, without using scrollbars.

Toolbar

Composer Process Designer adds several new tools to the Composer toolbar, as shown below.

3Toolbar

Tool	Icon	Usage
Selection Tool		This pointer allows you to select items by clicking on them. Once selected, an item can be dragged to any spot on the canvas. (You can shift-click to select multiple elements individually.)
Drag		The drag tool allows you to pull the entire canvas around, so that you can "pan across" the canvas and bring any region of interest into view.
Text Box		Click on the canvas with this tool to create a text label inside a rectangle.
Activity		This tool allows you to place new activity elements on the canvas.
Link		This tool lets you connect any two activities with an arrow, representing a control-flow link.
Shape		You can place resizable filled rectangles or ovals on the canvas with this tool.
Magnification		A dropdown menu allows you to choose from several preset viewing magnifications. You can also enter a custom magnification factor into the text field next to the dropdown.
Execute, Animate, Stop Animation, and Reset		These buttons allow you to start or stop a process (for testing purposes) within the design-time environment. The Reset button (lower left) is greyed out until an animation has finished running; pressing it resets the graphic appearance of the flow diagram.

Graph Elements

Graph elements include activities, links, text boxes, and shapes (rect and oval). The creation tools for these elements can be accessed via the Process menu on the main Composer menubar or via tool icons on the main toolbar. They operate in point-and-click fashion.

NOTE: The appearance characteristics (colors, borders, text justification, etc.) for each of the different graph-element types discussed below can be adjusted by means of controls located in the UI tab of the Object Properties pane. (You can toggle this pane's visibility by means of the Object Properties command under the View menu.)

Activities

3ActivityIconTypes

Activities can be of five types, as depicted above. The various activity types are briefly described below.

Activity Type	Description
Component Activity	The Component Activity provides for runtime interaction with a Component or Service to interact with one or more external systems using one or more Composer Components (e.g. JDBC, 3270, 5250, CICS RPC, JMS, HTML, Telnet, EDI or XML Map as well as Composer JMS Services or Composer Web Services). One can drill down on a Component Activity to view and edit the Composer Component's action model.
Web Service Receive Activity	The Web Service Receive Activity provides for runtime interaction with a published Web Service and correlates a received message with a current process instance.
Web Service Send -Activity	The Web Service Send Activity provides for runtime interaction with a published Web Service. It enables the Process Manager user to select the Web Service's WSDL Resource, Service Name, Binding, Operation, Endpoint Locator and Connection. This is similar to the WS Interchange Action introduced in Composer 3.0.
Subprocess Activity	A Subprocess Activity represents any process created in Process Designer. This effectively means a process can call another process. It allows for a layered, hierarchical flow architecture. One can doubleclick on a subprocess Activity to view and edit the subprocess graph.
Synchronize Subprocesses	This is a specialized activity type that allows the merging of information returned from a repetitively executed subprocess.

To create an instance of one of these activity types in your graph, simply select the corresponding tool icon from the main toolbar (or the flyout icon list under the icon), then click anywhere on the main canvas.

Links

The Link tool allows you to connect activities with a directed edge (arrow). Its operation is very simple. First, select the tool from the toolbar. Then click on any activity; this becomes the source activity for the link. With the mouse still down, drag out a line to the desired target activity. (Be sure the line extends not just to the activity, but actually over the middle of the activity icon.) When you let go of the mouse, an arrowhead will appear on the "target end" of the link and the two activities will be linked in terms of control flow. At this point, if you use the Selection cursor to drag either activity around the canvas, the link will automatically expand and/or reorient as necessary so that both activities remain connected.

Text Boxes

The Text tool allows you to place text boxes on the canvas. When you click on the canvas, a rectangle will appear with the word "Untitled." You can then change the text in the box, set its background and outline colors, etc., by entering appropriate settings in the UI tab of the Object Properties pane.

Text boxes are simply arbitrary text labels that you can use at various spots around the canvas to document activity characteristics, control-flow intents, etc., or to indicate titles, author info, revision dates, and so on. Text boxes can be repositioned (by dragging) at any time and have no effect on control flow. Their use is optional.

By using the controls in the UI tab of the Object Properties pane, you can change a text box's appearance, not only with regard to colors, resizability, margins and centering, etc., but also involving text size, font, and style.

Shapes

The Shapes tool will let you put rectangles, ovals, or your own .jpg or .gif graphics anywhere on the canvas. These elements are strictly decorative and have no effect on process runtime dynamics.

Menu Commands

In Composer, when the Process Manager is the front editor, a number of process-specific menu commands appear in Composer's menus. The File, View, Process, and Layout menu structures are illustrated and discussed below.

Menu	Submenu	Command	Description
File	Print Graph	Print	This selection allows you to print the complete or selected graph and descriptions
File	Print Graph	Print Setup	This selection allows you to determine what portion of the process should be printed – see dialog below for more information.
File	Print Graph	Print Preview	This selection allows you to preview the selected items before printing.

The only addition to Composer's File menu is the Print Graph command.

Menu	Submenu	Command	Description
View	XML Documents		Brings up submenu allowing you to change visibility, order and view of XML documents
View	Zoom	Many	The Zoom tool lets you to set the view magnification (on a percentage basis) for the canvas. Several preset values are available via pulldown menu. You can also specify any arbitrary percentage by selecting Custom Zoom.
View	Show/Hide Grid		Toggles the grid's visibility (see below).
View	Grid Style	Grid Type	You can choose to either have a blank background or (in conjunction with the Grid Size option) a grid view. The default is None.
View	Grid Style	Grid Size	When in grid view mode, this command sets the spacing between lines or dots.
View	Snap to Grid		Align process objects to grid lines
View	Overview Window		Toggles the visibility of the Overview pane ("bombsight view") while creating or editing a layout.
View	Object Properties		Toggles the visibility of the Object Properties pane while creating or editing a layout. This pane is where data mappings (messages) are specified.
View	Enable Docking		Allows modal windows described above to be docked if they are brought near an edge of the graph. The default is On.

Menu	Submenu	Command	Description
Process	Execute		Runs a process from start to finish.
Process	Clear Execution Status		This menu command duplicates the functionality of the Reset button on the far right side of the toolbar; it resets the graphics state(s) of all icons, links, etc. to the original pre-animation state(s).
Process	Reload XML Documents		Performs the same function as Reload in the Component menu item when in a Component Editor.
Process	Add Watch		Allows you to identify certain data items and examine their data values during the execution of a component as a debugging aid.
Process	Create Activity	Composer Component	Changes the active tool to the Activity tool and configures it so that a click on the canvas will create a new Component Activity.
Process	Create Activity	Subprocess	Changes the active tool to the Activity tool and configures it so that a click on the canvas will create a new Subprocess.
Process	Create Activity	Synchronize Subprocesses	Changes the active tool to the Activity tool and configures it so that a click on the canvas will create a new Synchronize Subprocesses Activity.
Process	Create Activity	Web Service Receive	Changes the active tool to the Activity tool and configures it so that a click on the canvas will create a new Web Service Receive Activity.
Process	Create Activity	Web Service Send	Changes the active tool to the Activity tool and puts the tool in Composer Component mode so that a click on the canvas will create a new Web Service Send Activity.
Process	Create Link		Changes the active tool to the Link tool.
Process	Create Graphic	Rectangle	Changes the active tool to the Graphics tool and configures it so that a click on the canvas will create a resizable rectangle.
Process	Create Graphic	Oval	Changes the active tool to the Graphics tool and configures it so that a click on the canvas will create a resizable oval.
Process	Create Graphic	Rounded Rectangle	Changes the active tool to the Graphics tool and configures it so that a click on the canvas will create a resizable, rounded rectangle.
Process	Create Graphic	Diamond	Changes the active tool to the Graphics tool and configures it so that a click on the canvas will create a resizable diamond shape.
Process	Create Graphic	Picture	Changes the active tool to the Graphics tool and configures it so that a click on the canvas will cause an image file (.jpg or .gif) to be placed. You can specify the actual image file in the UI tab of the canvas's property sheet (see end of this chapter).
Process	Create Text		Changes the active tool to the Text tool.
Process	Select		Changes the current tool to the arrow cursor (for selection of graph items).
Process	Pan		Changes the current tool to the Hand tool to allow canvas panning for fast navigation of large graphs.
Process	Marquee Zoom		This option is useful only when the Overview Window (View > Overview Window) is in view. When this option is active, you can click outside the blue marquee box to zoom the canvas to larger magnification.
Process	Interactive Zoom		Similar to the above, but allows you to drag the corner handles of the marquee box (blue box) to "resize the view."
Process	Navigate Edges		Changes the active tool in such a way that you can click on any activity and see the graph animate (without executing any activities) along link paths. No executables are run.
Process	Sticky Tools		Allows you to select a tool once and have it remain the selected tool. This will allow you to drop multiple activities on the canvas or draw multiple links without selecting the Link tool multiple times.

The Process Menu commands are explained below.

Menu	Command	Description
Layout	Global Layout	Default layout mode: Entire graph is cached in memory at design time.
Layout	Incremental Layout	Optional layout mode that uses memory more efficiently.
Layout	Circular Layout	Arranges nodes in a hub-and-spoke manner. See discussion elsewhere under "Layout Properties".
Layout	Hierarchical Layout	Applies the familiar "organizational chart" style of diagramming, in which top-down relationships are emphasized.
Layout	Orthogonal Layout	Constrains nodes and links to a row-and-column motif.
Layout	Symmetric Layout	Edge crossings are minimized and node distributions are made uniform so that symmetrical relationships are emphasized.
Layout	Tree Layout	Applies the familiar "family tree" layout to a graph, similar to the hierarchical style described above, except that links are not parallel and seldom run perfectly horizontal or vertical.
Layout	Properties	Brings up a preferences dialog for fine-tuning the above settings.

Process Properties

General info for a whole process can be accessed via File > Properties. The dialog that appears has two tabs, Header Info and Messages. The Header Info tab gives Name and comment-type information about the process in question. The Messages tab contains XML Template information for the input and output messages of the process.

3ProcessProperties

Object Properties

Each type of object depicted in a directed edge graph created in Process Designer has its own set of properties. The properties are context-sensitive: they vary according to the type of object that you have selected on the canvas. To see the current properties for any object, simply select an object (by clicking on it using the Pointer tool) and toggle Object Properties under the View menu (if the Object Properties palette is not already visible).

The Object Properties palette (equivalently referred to as the property sheet for an object) is where you can specify such important activity attributes as:

Exit Condition
Join Condition
Timeout
Retry Count
Retry Interval
Map Policy
And more (see below)

The following sections describe what the property sheets for the various process elements look like when the appropriate type of object has focus.

Activity Properties

The Process Manager supports five activity types, each with its own set of object properties: Composer Component, Web Service Send, Web Service Receive, Subprocess, and Synchronize Subprocesses. The property sheets for each are discussed in some detail below.

Composer Component

The Component Activity Object Properties panel has three tabs: Activity; Messages, and UI. Their appearances are illustrated below; their functionality is discussed in the tables that follow.

Note that all Object Properties tabs and panels are context-aware: Their contents update automatically to reflect the attributes of the activity that you have selected on the canvas. Likewise, any changes you make in any of the property settings will take effect in real time, as soon as the field in question loses focus. (You may have to click outside of a property field in order for a change to take effect.)

Activity Tab

3ObjProps1

Property	Control Type	Usage
Activity Name	Text field	This is the name shown under the activity icon on the canvas.
Activity Type	Dropdown	A dropdown list allows you to change the activity type of the currently selected activity. The dropdown shows the five categories of activity type.
Component Type	Dropdown	A dropdown displays a list of available Composer Component types (XML Map, Web Service, JDBC Component, and so on).
Component Name	Dropdown	The dropdown displays a list of Component Names corresponding to any components of the chosen Component Type (above) that you have already built in the current project.
Exit Condition	Text Field	An Exit Condition is a Boolean XPath expression, the purpose of which is to determine whether the Activity has finished normally. The Exit Condition's expression can refer to the output message of the Activity or to output of any activity that ran before the Activity on the same control path. If the Exit Condition evaluates to true, the activity is treated as "Complete." If the Activity is complete, the process resumes normal flow of control; otherwise, the Activity is executed again. The Activity will be executed X number of times where X is the Retry Count defined below. The Retry Interval defines the time between execution retries.
Join Condition (appears only on join targets)	Text Field	A Join Condition is a Boolean expression in simple OR/AND/NOT syntax, the purpose of which is to synchronize parallel work based on the truth values of incoming links. An Activity is called a Join Activity if it has more than one incoming link. The Join Activity will fire if and only if the Join Condition is true. The default, if no condition is explicitly specified, is true.
Join Evaluation (appears only on join targets)	Dropdown	The choices are Deferred and Immediate. For the meaning of these options, see Chapter 1.
Timeout	Text Field	The Timeout attribute defines a time interval in which an Activity must complete its work. Once a time-out occurs, the Retry Count (if any) will apply and the activity will be reexecuted. After a timeout occurs, the Process Server will wait a certain length of time (specified in the Retry Interval) before kicking off the next retry. The Retry Interval, below, defines the wait time before an activity can be retried. Timeout and Retry settings are optional. The default is zero retries and a retry interval of zero.
Retry Count	Text Field	The number of times to retry an Activity.
Retry Interval	Text Field	The length of time to wait between retries, should a retry be necessary.
Map Policy	Text Field	Last Writer Wins, First Writer Wins, or Map Order. Note that this value is important only when there is the potential for two activities to overwrite each other's data (i.e., two source activities contend for the same XPath locations in the target activity's input message).

Messages Tab

3ObjProps2

Property	Control Type	Usage
Messages	Three columns: · Type (non-editable) · Name · Message (non-editable)	If WSDL exists, "Type" and "Message" are pulled from the WSDL's Port Type Operations Input and Output elements. "Name" defaults to the default Activity Name appended by the type (e.g. Activity2Output).
Maps:	+ and - icons	Add and Delete mappings from last activity's output to current input.
Source	Button	The Source XPath expression (applies to output from previous activity in the graph)
Target	Button	The Target XPath expression (applies to currently selected activity's input)

UI Tab

3ObjProps3

Property	Control Type	Usage
Show Label	Checkbox	Determines whether a text label (name) appears below the currently selected activity object.
Picture	Text Field	The path to the image (Gif or JPEG) that will be used for the display of the currently selected activity object. Use this to point to custom icon art, if desired. (This is for design time only. Your art will not be deployed in any jar files.)
Font	Dialog appears	Clicking on the Value field causes the "Choose Font" dialog to be displayed. This dialog has three dropdowns which allow for the selection of a font, style (Plain, Bold, Italic, Bold Italic) and point size.
Text Color	Color picker	Displays the color to be used for text associated with the current object. Clicking on this bar causes a color picker dialog to appear.
Text Justification	Dropdown menu	Left Center (default) Right
Color	Color picker	This is the background color for the selected object. Clicking on this bar causes a color picker dialog to appear.
Transparent	Checkbox	Checked = Transparent object, Unchecked = Opaque
Border Color	Color picker	Border color for the selected object. Clicking on this bar causes a color picker dialog to appear.
Show Border	Checkbox	Checked = Border Displayed; Unchecked = Border not displayed.
Resizability	Dropdown:	Choices are: No Fit Tight Fit Tight Width Tight Height Tight Fit Preserve Aspect Preserve Aspect
Width	Text Field	Item width. 40.0 (Default)
Height	Text Field	Item height. 32.0 (Default)
X Center	Text Field	Position X coordinate
Y Center	Text Field	Position Y coordinate

Web Service Send

The Web Service Send activity has its own unique object properties, which are reflected in the Activity tab on the Object Properties panel.

NOTE: The Messages and UI tabs for this activity are the same as for the Component activity described above. Only the Activity tab will be described below.

Web Service Send Activity Tab

3ObjPropsWSSend

Property	Control Type	Usage
Activity Type	Dropdown	A dropdown list of Activity Types
Activity Name	Activity 1...n (default)	The name of the Activity.
WSDL Resource	Dropdown	A dropdown list of the available WSDL Resources within the Composer project.
Service Name	Dropdown	A dropdown list of the available Web Services within the WSDL Resource.
Service Port or Binding	Dropdown	A dropdown list of the Binding Names within the WSDL Resource.
Operation	Dropdown	A dropdown list of the Operation Names within the WSDL Resource.
Endpoint Locator	XPath Expression	Enter the Endpoint Location (usually a URL pointing at a servlet) for the Web Service you wish to use, wrapped in quotation marks. (Alternatively, enter an XPath expression that will evaluate to an Endpoint Location at runtime.)
Connection	Connection	A dropdown list of Connections.
HTTP Params	Pushbutton	This displays the `HTTP Header Parameters' dialog, where you can specify content-length and other common HTTP parameters.
Exit Condition	Text Field	See discussion under "Exit Condition", page 124.
Join Condition (as applicable)	Text Field	See discussion under "Join Condition", page 124.
Join Evaluation	Dropdown	Like the Join Condition field, this field will only appear when the target activity is a join activity. The dropdown choices (Immediate, Deferred) determine the join's evaluation mode.
Timeout	Text Field	See discussion under "Exit Condition" on page 124.
Retry Count	Numeric Field	See discussion under "Retry Count", page 125.
Retry Interval	Text Field	See discussion under "Retry Interval", page 125.
Map Policy	Text Field	See discussion under "Map Policy", page 125.

Messages and UI Tabs for Web Service Send

The settings on these tabs work the same as described for the Component Activity (already discussed).

Web Service Receive

3ObjPropsWSReceive

Web Service Receive Activity Tab

Property

Control Type

Usage

Activity Type

Dropdown

A dropdown list of available Activity Types

Activity Name

Activity 1...n (default)

The name of the Activity.

Implementation Type

Dropdown

One of: Web Service, JMS Service, or External.

WSDL Resource

Dropdown

A dropdown list of the available WSDL Resources within the Composer project.

WSDL Port Type

Dropdown

The port type for this service.

WSDL Operation

Dropdown

A dropdown list of the Operation Names within the WSDL Resource.

Correlation ID

Text Field

Arbitrary user-defined value, used to uniquely identify a transaction

Addressee

Text Field

Arbitrary string label, typically to define the "owner" (name of an individual) associated with this particular transaction or activity

Priority

Text Field

Some arbitrary numeric value relating, typically, to the importance of this activity or work item

Exit Condition

Text Field

See discussion under "Exit Condition", page 124.

Join Condition (as applicable)

Text Field

See discussion under "Join Condition", page 124.

Timeout

Text Field

See discussion under "Exit Condition" on page 124.

Retry Count

Numeric Field

See discussion under "Retry Count", page 125.

Retry Interval

Text Field

See discussion under "Retry Interval", page 125.

Map Policy

Text Field

See discussion under "Map Policy", page 125.

Messages and UI Tabs for Web Service Receive

The settings on these tabs operate the same as described earlier for the Component Activity (see above).

Subprocess

3ObjPropsSubprocess

All properties on all tabs of the Object Properties panel for Subprocess have exactly the same names (and operate the same way) as for the Composer Component properties, except for the Create Operation property, which is one of spawn or call, to reflect whether the subprocess should be invoked asynchronously ("fire and forget") or synchronously (poll until response comes).

Synchronize Subprocesses

3SynchSubprProperties

The Synchronize Subprocesses activity type is a specialized activity that coordinates the "fan-in" of multiple results from fanned-out subprocesses. See the discussion of "Synchronize Subprocesses Activity" in a later chapter.

Property	Control Type	Usage
Activity Type	Dropdown	A dropdown list of available Activity Types
Activity Name	Activity 1...n (default)	The name of this Activity.
Component Type	Dropdown	A list of available components in this Composer project.
Fault Handling	Dropdown	Two choices: Fail on Any Fault, or Fail If All Fail.
Subprocess List	Text Field (XPath)	XPath locations of the ProcessInfo data for fanned out subprocesses.
Exit Condition	Text Field	See discussion under "Exit Condition", page 124.
Join Condition (as applicable)	Text Field	See discussion under "Join Condition", page 124.
Timeout	Text Field	See discussion under "Exit Condition" on page 124.
Retry Count	Numeric Field	See discussion under "Retry Count", page 125.
Retry Interval	Text Field	See discussion under "Retry Interval", page 125.
Map Policy	Text Field	See discussion under "Map Policy", page 125.

Link

The Link Object Properties has two tabs: Link and UI.

Link Tab

3LinkProps1

Property	Control	Usage
Link Name	Text Field	The link's name. This name is also used in join-condition expressions.
Source Result	Dropdown	Designates the source activity of the link.
Condition	Text Field	Specifies the XPath condition for the link.

UI Tab for Links

3LinkUI

Property	Control	Usage
Show Label	Checkbox	Toggles the visibility of the link name.
Font	Text Field	Clicking this field will cause a dialog to appear. In the dialog, you can set various font properties.
Text Color	Color Picker	Allows you to set the color of the text (link name) associated with a link.
Text Justification	Dropdown Menu	Center, Left Justify, Right Justify.
Transparent	Checkbox	Toggles the link's transparency on/off.
Border Color	Color Picker	Allows you to select the color of the outline of the link.
Show Border	Checkbox	Toggles the border (draw/no-draw).
Resizability	Dropdown Menu	Allows you to specify various link drawing policies.
Width	Text Field	Allows you to specify the overall width of the link.
Height	Text Field	Allows you to specify the overall height of the link.

Graph Object Properties

The Process Object (or graph) property sheet has a Messages tab and a UI tab. To see the graph's properties, click anywhere on the bare canvas, then bring the Object Properties palette into view (use the View menu's Object Properties command). You will use this window to set overall process input, output, and fault message mappings, and customize the appearance of the graph.

Process Messages Tab

The Messages tab is where you will typically specify the end-activity-to-process-output data mapping(s). For example, if Activity4 on your graph is the end activity for the process (the final activity to execute), and you want the process to return a message containing Activity4's output, this is where you would specify the ProcessOutput mapping. See example below.

3MappingToProcessOutput

In the above example, the activity Return_Ack is the end activity for the process. Its output is mapped to $ProcessOutput/Output, as shown at the bottom of the Object Properties pane. The first step in setting up this pane was to click on the bare canvas (thus deselecting all activities, links, and other graphic elements). This makes the Object Properties pane reflect the properties of the process-as-a-whole. (Notice the input and output messages are simply ProcessInput and ProcessOutput.)

Graph UI Tab

The graph lUI tab has two purposes: It allows you to define custom appearance-related settings for the overall graph, and it provides summary information about the number of nodes on the graph, the number of links, labels, etc.

3GraphUIProps

Remember that this set of properties is reachable only when you click on bare canvas.

NOTE: For additional information about how to customize the appearance of a graph, see the section "Layout Properties" further below.

The following table describes the properties available in the UI tab of the process Object Properties panel.

Attribute	Value	Description
Nodes	0—n	This field is not editable. It provides a numeric count of the graph's Nodes.
Edges	0—n	This field is not editable. It provides a numeric count of the graph's Edges.
Labels	0—n	This field is not editable. It provides a numeric count of the graph's Labels.
Subgraphs	0—n	This field is not editable. It provides a numeric count of the graph's Subgraphs.
Background Color	Displays the color itself. The default is white.	This is the background color.
Picture	Check Box	Checked = display a picture on the graph, Not Checked = don't display a picture on the graph.
Picture Filename	The filename of the Picture.	The full path name of the picture file which may be a JPEG or a Gif.
Picture Style	World Offset or Device Offset	World Offset displays the picture in the middle of the diagram. Device Offset displays the picture at the offset defined by the Picture X Offset and the Picture Y Offset.
Tile Picture	Check Box	Checked = tile the picture, Not Checked = display the picture at the offset.
Picture X Offset	0.0	Used to change the onscreen x-offset.
Picture Y Offset	0.0	Used to change the onscreen y-offset.

Selected Node Properties on UI Tab

The Selected Node Properties UI tab is for inspecting or setting appearance attributes on objects shown on the graph. Single-click an object to select it, then select the UI tab from the Object Properties pane; then choose Selected Node Properties from the dropdown menu control at the top of the tab. See below.

3PictureProps

UI Tab (Selected Node Properties)

Attribute

Value

Description

Name

Activity1...n (Default)

This is the name of the Activity. It defaults to Activity1...n.

Font

Dialog

· SanSerif (default)

· Serif

· MonoSpaced

· DialogInput

Clicking on the Value field causes the `Choose Font' dialog to be displayed. This dialog has three dropdowns which allow for the selection of a font, font style (Plain, Bold, Italic, Bold Italic) and Font Size.

Text Color

Displays the color itself. The default is black.

Click on the Value field causes the `Choose Color' dialog to be displayed.

Text Justification

Left

Center (default)

Right

This is a dropdown.

Color

Displays the color itself. The default is yellow.

This is the background color. Click on the Value field causes the `Choose Color' dialog to be displayed.

Transparent

Checkbox

Checked = Transparent, Unchecked = Opaque

Border Color

Displays the color itself. The default is black.

Click on the Value field causes the `Choose Color' dialog to be displayed.

Show Border

Checkbox

Checked = Border Displayed; Unchecked = Border not displayed.

Resizability

Dropdown:

· No Fit

· Tight Fit

· Tight Width

· Tight Height

· Tight Fit Preserve Aspect

· Preserve Aspect

Width

Text Field

40.0 (Default)

Height

Text Field

40.0 (Default)

X Center

Text Field

X coordinate

Y Center

Text Field

Y coordinate

Text Object Properties

The UI tab for Text objects, Shapes, etc., has a Selected Node Properties pane with attributes similar to those described above. The table below describes the properties in detail.

UI Tab

Attribute

Value

Description

Name

Untitled

This is the Name of the text object as well as the Text/Caption/Label itself.

Margin Width

3.0 (default)

This is the width of the margin to the left and right of the text.

Margin Height

1.0 (default)

This is the height of the margin to the top and bottom of the text.

Font

Dialog

· SanSerif (default)

· Serif

· MonoSpaced

· DialogInput

Clicking on the Value field causes the `Choose Font' dialog to be displayed. This dialog has three dropdowns, which allow for the selection of a font, font style (Plain, Bold, Italic, Bold Italic) and Font Size.

Text Color

Displays the color itself. The default is black.

Click on the Value field causes the `Choose Color' dialog to be displayed.

Text Justification

Left

Center (default)

Right

This is a dropdown.

Color

Displays the color itself. The default is white.

This is the background color. Click on the Value field causes the `Choose Color' dialog to be displayed.

Transparent

Checkbox

Checked = Transparent, Unchecked = Opaque

Border Color

Displays the color itself. The default is black.

Click on the Value field causes the `Choose Color' dialog to be displayed.

Show Border

Checkbox

Checked = Border Displayed; Unchecked = Border not displayed.

Resizability

Dropdown:

No Fit

Tight Fit

Tight Width

Tight Height

Tight Fit & Preserve Aspect

Preserve Aspect

Width

Text Field

48.0 (Default) This field is not enabled. The width will change as the text is changed from the default `untitled' and as the margin widths and fonts are changed.

Height

Text Field

19.0 (Default) This field is not enabled. The height will change as the margin height and fonts are changed.

X Center

Text Field

X coordinate

Y Center

Text Field

Y coordinate

Layout Properties

Process Designer will (if you wish) automatically reformat your graph according to any of five flow-diagramming algorithms:

Circular—Arranges nodes in a hub-and-spoke manner whenever possible, with spokes having identical lengths. This type of layout is appropriate when clustering is the predominant architectural feature (e.g., as in depicting a LAN or WAN layout).
Hierarchical—This is the familiar "organizational chart" style of diagramming, in which top-down relationships are emphasized. (You can, however, configure this layout option to show left-to-right or other flow polarities.) This layout option is appropriate for graphs in which hierarchical relationships need to be emphasized.
Orthogonal—This style constrains nodes and links to a row-and-column motif. Links are constrained to run parallel to x- and y-axes. Also note that nodes with more than one incoming link may be magnified in appearance relative to other nodes. This layout strategy is appropriate for situations where a grid or lattice relationship between elements needs to be emphasized, as opposed to hierarchical relationships.
Symmetric—In this style of graphing, edge crossings are minimized and node distributions are made uniform so that symmetrical relationships can be emphasized.
Tree—This diagram style is appropriate when the predominant need is to show parent/child relationships. It uses the familiar "family tree" type of layout, very similar to the hierarchical style described above, except that links are not parallel and seldom run perfectly horizontal or vertical.

All of the above diagramming styles can be extensively customized by means of preferences exposed in the Layout > Properties dialog. To bring up this dialog, go to Composer's main menubar and choose Properties from the Layout menu.

3LayoutPropsGeneralTab

The dialog has six tabs: a General Preferences tab, and five tabs corresponding to the five autolayout styles just described. Each tab contains a wealth of controls and settings to allow you to exercise fine control over the many constraints that characterize a particular style of graphing.

General Layout Tips

The following tips are aimed at helping you achieve maximum productivity with Process Designer.

Snap and Grid Behavior

By default, everything you draw or position snaps to an invisible 5-pixel-by-5-pixel grid. But you can override this behavior at any time by holding the Alt key down. (You can override it permanently by setting Grid Size to one, using View > Grid Style > Grid Size > Custom Size.)
You can toggle the visibility of the grid by using the View menu's Hide Grid or Show Grid commands. (There is actually only one command; its name changes dynamically depending on which mode you just entered.) Grid Size and Style (dots versus lines) can also be set at any time through View menu commands .
You can instantly align graph nodes to the grid, at any time, by using View > Snap to Grid. You will see graph items suddenly "jump" to the closest grid lines.

Multiple Undo

Multiple Undo/Redo is available for all layout gestures.

Sticky Tools

Normally, a tool reverts to the arrow cursor after one use. For example, if you select the Activity Tool, then click on the canvas to put down a new activity icon, the tool will immediately revert to the arrow (or Selection Tool) when you let go of the mouse. You can override this behavior and make the tool mode persist across mouse clicks by turning on the Sticky Tools option. Look under the Process menu for Sticky Tools.

Overview Window

Exceptional control over pan and zoom can be had by using the Overview Window (see below). Toggle this pane's visibility by using View > Overview Window.

Two behaviors are available from the overview window:

You can drag the blue "viewport rect" around the overview pane to pan the canvas in real time.
You can click-drag just outside the viewport rect to interactrively zoom the canvas to a bigger or smaller size.

Notice that the cursor changes appearance depending on the position of the mouse (inside or outside the viewport rect).

Customizing the Canvas

Note that you can customize the canvas in various ways. For example, you can specify a background image; change the appearance of any activity to use a custom image; and/or add any number of decorative images or logos to the canvas, and use Send to Back or Bring to Front to "stack" images in any order. These features allow you to build presentation-quality process graphs for use in meetings, demonstrations, etc.

NOTE: To access canvas properties, click anywhere on bare canvas, then choose the UI Tab in the Object Properties panel.

Using Custom Backgrounds

One way in which the canvas can be customized is to add a custom background, consisting of a .gif or .jpg image. The following illustration shows a canvas that contains a .jpg background.

3Auction

Procedure To add a picture to a canvas:

Click anywhere on bare canvas.
Toggle the Object Properties panel into view.
Choose the UI Tab.
Click the white area to the right of Picture Filename. A navigation dialog will appear.
Navigate your hard disk or network and find a .jpg or .gif file that you wish to use as a graph background picture.
In the UI Tab, check the Picture checkbox to apply the image to the canvas.
Optionally check the Tile Picture checkbox if you wish to tile the canvas with the image.
Next to Picture Style you will find a dropdown menu. Select one of the two choices available on this menu:
- World Offset—Choosing this option means that the image will shrink or grow with the canvas as you choose different zoom settings and maintain its relative position to other objects on-canvas. This is the normal behavior for all Process Designer graphics.
- Device Offset—Choosing this option means that the image will not shrink, grow, nor change position as you pan or zoom.
Optionally adjust Picture X-Offset and/or Picture Y-Offset values to place the picture exactly where you want it on the graph. (You may enter positive or negative values here as required.)

Autolayout Options

As explained earlier, Process Designer will reformat your graph according to various diagramming algorithms, if you desire. The auto-diagramming option you are most likely to use is the Hierarchical layout option. This option (Layout > Hierarchical Layout) will reformat a graph to a top-down (or left--to-right, or other) hierarchy view, with or without X/Y alignment of links, and with or without merging of parallel links.

3freehandVersusHier

Various constraint options are available for Hierarchical Layout (as for the other autolayout modes). To access the settings, use the Layout menu's Properties command, which brings up the Layout Properties dialog:

3LayoutPropsDialog

Take special note of the Edge Routing control group at the lower right. You must check the Orthogonal Routing checkbox if you want links to be X/Y-axis aligned. If you want stems of parallel links (coming into or out of a common node) to be depicted as a single stem, you should check the Merge Edge Channels checkbox.