org.eclipse.bpmn2.modeler.help/html/ANATOMY OF THE BPMN2 MODELER.htm - bpmn2-modeler/org.eclipse.bpmn2-modeler - Git at Google

 <html>

 <head>
 <meta http-equiv=Content-Type content="text/html; charset=windows-1252">
 <meta name=Generator content="Microsoft Word 14 (filtered)">
 <title>Eclipse BPMN2 Modeler User Guide (Version 1.0.1)</title>

 <link rel="stylesheet" type="text/css" href="MsoStyles-modified.css">

 </head>

 <body lang=EN-US link=blue vlink=purple>

 	<div class=WordSection1>

 		<div class="h1">

 			<h1>
 				<a name="_Toc371905847"></a><a name="_Anatomy_of_the"></a>Anatomy of the BPMN2 Modeler
 			</h1>

 		</div>

 		<p class=MsoNormal style='page-break-after: avoid'>As shown in the screenshot below, BPMN2 Modeler has all of the features of a well-behaved Graphiti editor: the Drawing Canvas in the main area
 			of the editor window, collapsible Tool Palette on the right, tabbed Property sheets, and an Outline Viewer with both tree and thumbnail views.</p>

 		<div class="h2">

 			<h2>
 				<a name="_Toc371905848">Editor Tabs</a>
 			</h2>

 		</div>

 		<p class=MsoNormal style='page-break-after: avoid'>The BPMN2 Modeler has multiple pages, or tabs; each tab is used to display a separate BPMN Diagram.</p>

 		<p class=MsoNormal style='page-break-after: avoid'>
 			<img width=512 height=384 id="Picture 14" src="ANATOMY%20OF%20THE%20BPMN2%20MODELER_files/image003.jpg">
 		</p>

 		<p class=MsoCaption>
 			<a name="_Toc372182399">Figure </a>2: BPMN2 Modeler Overview
 		</p>

 		<p class=MsoNormal>Note that there are two sets of tabs: one set at the top of the editor window and another set at the bottom. The tabs at the top are used to flip between different diagrams,
 			while the ones at the bottom are the contents of collapsed Sub-Processes contained within the same diagram. Procedures for managing diagram and Sub-Process tabs will be discussed in a later
 			section.</p>

 		<p class=MsoNormal style='page-break-after: avoid'>A special tab is available for an XML source view of the BPMN diagram, as shown in the following screenshot.</p>

 		<p class=MsoNormal style='page-break-after: avoid'>
 			<img width=512 height=384 id="Picture 15" src="ANATOMY%20OF%20THE%20BPMN2%20MODELER_files/image004.jpg">
 		</p>

 		<p class=MsoCaption>
 			<a name="_Toc372182400">Figure </a>3: XML Source View
 		</p>

 		<div style='border: solid #4F81BD 1.0pt; padding: 2.0pt 4.0pt 1.0pt 10.0pt; margin-left: .2in; margin-right: 1.0in'>

 			<p class=Hint style='margin-top: .25in; margin-right: 0in; margin-bottom: .25in; margin-left: .25in'>
 				<span style='font-family: Symbol; color: windowtext'><img width=11 height=11 src="ANATOMY%20OF%20THE%20BPMN2%20MODELER_files/image001.gif" alt="*"><span
 					style='font: 7.0pt "Times New Roman"'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span></span>The XML view is read-only as of this version, however fully synchronized text and graphical editing is planned
 				for a future release.
 			</p>

 		</div>

 		<div class="h2">

 			<h2>
 				<a name="_Toc371905849"></a><a name="_Drawing_Canvas"></a>Drawing Canvas
 			</h2>

 		</div>

 		<p class=MsoNormal>
 			The Drawing Canvas occupies the majority of the editing window and behaves as you would expect: BPMN process elements can be placed on the canvas by selecting them from the Tool Palette and
 			clicking anywhere on the canvas; elements can be moved by clicking and dragging; elements can be connected (with, e.g. <span class=MsoSubtleReference>Sequence Flows</span>, <span
 				class=MsoSubtleReference>Associations</span>, <span class=MsoSubtleReference>Data Flows</span>, etc.) by selecting a connection tool from the palette and then first clicking the source element,
 			then the target element.
 		</p>

 		<p class=MsoNormal>The canvas also has its own context menu, which includes the following actions:</p>

 		<p class=MsoListParagraphCxSpFirst style='text-indent: -.25in'>
 			<span style='font-family: Symbol'>·<span style='font: 7.0pt "Times New Roman"'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span></span><b>Re-route all connections</b>  forces all
 			connections to be laid out according to their currently selected layout algorithm. See the <a href="GRAPHICAL EDITING.htm#_Connections">Connection Routing</a> section for more information.
 		</p>

 		<p class=MsoListParagraphCxSpMiddle style='text-indent: -.25in'>
 			<span style='font-family: Symbol'>·<span style='font: 7.0pt "Times New Roman"'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span></span><b>Validate</b>  checks the file for
 			missing/incorrectly configured elements and reports these in the Problems view. Problems are also highlighted on the canvas with a warning (<img border=0 width=12 height=12 id="Picture 16"
 				src="ANATOMY%20OF%20THE%20BPMN2%20MODELER_files/image005.jpg">) or error (<img border=0 width=12 height=12 id="Picture 17" src="ANATOMY%20OF%20THE%20BPMN2%20MODELER_files/image006.jpg">)
 			decorator on the problem element.
 		</p>

 		<p class=MsoListParagraphCxSpMiddle style='text-indent: -.25in'>
 			<span style='font-family: Symbol'>·<span style='font: 7.0pt "Times New Roman"'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span></span><b>Show/hide Source View</b>  is used to show or hide
 			the XML source tab.
 		</p>

 		<p class=MsoListParagraphCxSpMiddle style='text-indent: -.25in'>
 			<span style='font-family: Symbol'>·<span style='font: 7.0pt "Times New Roman"'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span></span><b>Delete Diagram</b>  deletes the currently active
 			diagram tab.
 		</p>

 		<p class=MsoListParagraphCxSpLast style='text-indent: -.25in'>
 			<span style='font-family: Symbol'>·<span style='font: 7.0pt "Times New Roman"'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span></span><b>Export Diagram</b>  is used to save a snapshot
 			image of the entire diagram, in various selectable image formats and sizes. See the <a href="POPUP DIALOGS.htm#_Export_Diagram_Dialog">Export Diagram Dialog</a> section.
 		</p>

 		<div class="h2">

 			<h2>
 				<a name="_Toc371905850"></a><a name="_Tool_Palette_1"></a>Tool Palette
 			</h2>

 		</div>

 		<p class=MsoNormal>
 			The <a href="GRAPHICAL EDITING.htm#_Tool_Palette">Tool Palette</a> is, by default, located along the right edge of the Drawing Canvas. It consists of several tool drawers which contain the tools that are dragged
 			onto the Drawing Canvas to create BPMN2 elements.
 		</p>

 		<div class="h2">

 			<h2>
 				<a name="_Toc371905851"></a><a name="_Outline_View_1"></a>Outline View
 			</h2>

 		</div>

 		<p class=MsoNormal>
 			The <a href="USER PREFERENCES.htm#_Outline_View">Outline View</a> is separate from the editor and is intended to show a hierarchical, tree oriented view of the file. This view is synchronized with the Drawing Canvas;
 			when an element is selected on the canvas, it is highlighted in the Outline View. Conversely when an item in the Outline is selected, it is also highlighted on the Drawing Canvas.
 		</p>

 		<div class="h2">

 			<h2>
 				<a name="_Toc371905852">Property View</a>
 			</h2>

 		</div>

 		<p class=MsoNormal>
 			The <a href="PROPERTY VIEW.htm#_Property_View">Property View</a> is used to edit the attributes of the currently selected element. This view is also synchronized with the Outline View such that when a tree element
 			is selected in the Outline, its attributes are displayed in the Property View.
 		</p>

 		<div class="h2">

 			<h2>
 				<a name="_Toc371905853"></a><a name="_Menu_&amp;_Toolbar"></a>Menu &amp; Toolbar
 			</h2>

 		</div>

 		<p class=MsoNormal>
 			<b>Diagram</b> Main Menu Action  This Main Menu bar item allows you to create a new Process, Choreography or Collaboration diagram. The new diagram will be initially empty and appear as a new tab
 			at the top of the editor window. See the section on <a href="APPENDIX_ BPMN 2.0 REFERENCE.htm#_Diagram_Types">BPMN 2.0 Diagram Types</a> for more information.
 		</p>

 		<p class=MsoNormal>
 			<img border=0 width=28 height=20 id="Picture 43" src="ANATOMY%20OF%20THE%20BPMN2%20MODELER_files/image007.jpg"> <b>Undo/Redo</b>  These Toolbar actions undo or redo the last editing
 			operation performed. If the operation changed some attribute of an element (for example, its name) the undo/redo affects only that attribute.
 		</p>

 		<p class=MsoNormal>
 			<img border=0 width=70 height=20 id="Picture 38" src="ANATOMY%20OF%20THE%20BPMN2%20MODELER_files/image008.jpg"> <b>Zoom</b>  This Toolbar action are used to magnify or reduce the diagram.
 		</p>

 		<p class=MsoNormal>
 			<img border=0 width=125 height=20 id="Picture 39" src="ANATOMY%20OF%20THE%20BPMN2%20MODELER_files/image009.jpg"> <b>Alignment Tools</b>  These Toolbar actions are used to align multiple
 			shapes with each other either horizontally, vertically, or normalize their widths or heights.
 		</p>

 		<p class=MsoNormal>
 			<img border=0 width=19 height=20 id="Picture 40" src="ANATOMY%20OF%20THE%20BPMN2%20MODELER_files/image010.jpg"> <b>Hide Context Buttons</b>  This Toolbar action disables the Context Button
 			Pad. When the mouse is hovered over an element, an irregularly shaped pad pops up and surrounds the element. This pad contains a number of editing buttons which affect the element. The <b>Hide
 				Context Buttons</b> Toolbar toggle button disables the display of this Button Pad. See the <a href="GRAPHICAL EDITING.htm#_Context_Button_Pad">Context Button Pad</a> section for more information.
 		</p>

 	</div>

 </body>

 </html>
	<html>

	<head>
	<meta http-equiv=Content-Type content="text/html; charset=windows-1252">
	<meta name=Generator content="Microsoft Word 14 (filtered)">
	<title>Eclipse BPMN2 Modeler User Guide (Version 1.0.1)</title>

	<link rel="stylesheet" type="text/css" href="MsoStyles-modified.css">

	</head>

	<body lang=EN-US link=blue vlink=purple>

	<div class=WordSection1>

	<div class="h1">

	<h1>
	<a name="_Toc371905847"></a><a name="_Anatomy_of_the"></a>Anatomy of the BPMN2 Modeler
	</h1>

	</div>

	<p class=MsoNormal style='page-break-after: avoid'>As shown in the screenshot below, BPMN2 Modeler has all of the features of a well-behaved Graphiti editor: the Drawing Canvas in the main area
	of the editor window, collapsible Tool Palette on the right, tabbed Property sheets, and an Outline Viewer with both tree and thumbnail views.</p>

	<div class="h2">

	<h2>
	<a name="_Toc371905848">Editor Tabs</a>
	</h2>

	</div>

	<p class=MsoNormal style='page-break-after: avoid'>The BPMN2 Modeler has multiple pages, or tabs; each tab is used to display a separate BPMN Diagram.</p>

	<p class=MsoNormal style='page-break-after: avoid'>
	<img width=512 height=384 id="Picture 14" src="ANATOMY%20OF%20THE%20BPMN2%20MODELER_files/image003.jpg">
	</p>

	<p class=MsoCaption>
	<a name="_Toc372182399">Figure </a>2: BPMN2 Modeler Overview
	</p>

	<p class=MsoNormal>Note that there are two sets of tabs: one set at the top of the editor window and another set at the bottom. The tabs at the top are used to flip between different diagrams,
	while the ones at the bottom are the contents of collapsed Sub-Processes contained within the same diagram. Procedures for managing diagram and Sub-Process tabs will be discussed in a later
	section.</p>

	<p class=MsoNormal style='page-break-after: avoid'>A special tab is available for an XML source view of the BPMN diagram, as shown in the following screenshot.</p>

	<p class=MsoNormal style='page-break-after: avoid'>
	<img width=512 height=384 id="Picture 15" src="ANATOMY%20OF%20THE%20BPMN2%20MODELER_files/image004.jpg">
	</p>

	<p class=MsoCaption>
	<a name="_Toc372182400">Figure </a>3: XML Source View
	</p>

	<div style='border: solid #4F81BD 1.0pt; padding: 2.0pt 4.0pt 1.0pt 10.0pt; margin-left: .2in; margin-right: 1.0in'>

	<p class=Hint style='margin-top: .25in; margin-right: 0in; margin-bottom: .25in; margin-left: .25in'>
	<span style='font-family: Symbol; color: windowtext'><img width=11 height=11 src="ANATOMY%20OF%20THE%20BPMN2%20MODELER_files/image001.gif" alt="*"><span
	style='font: 7.0pt "Times New Roman"'>       </span></span>The XML view is read-only as of this version, however fully synchronized text and graphical editing is planned
	for a future release.
	</p>

	</div>

	<div class="h2">

	<h2>
	<a name="_Toc371905849"></a><a name="_Drawing_Canvas"></a>Drawing Canvas
	</h2>

	</div>

	<p class=MsoNormal>
	The Drawing Canvas occupies the majority of the editing window and behaves as you would expect: BPMN process elements can be placed on the canvas by selecting them from the Tool Palette and
	clicking anywhere on the canvas; elements can be moved by clicking and dragging; elements can be connected (with, e.g. <span class=MsoSubtleReference>Sequence Flows</span>, <span
	class=MsoSubtleReference>Associations</span>, <span class=MsoSubtleReference>Data Flows</span>, etc.) by selecting a connection tool from the palette and then first clicking the source element,
	then the target element.
	</p>

	<p class=MsoNormal>The canvas also has its own context menu, which includes the following actions:</p>

	<p class=MsoListParagraphCxSpFirst style='text-indent: -.25in'>
	<span style='font-family: Symbol'>·<span style='font: 7.0pt "Times New Roman"'>         </span></span><b>Re-route all connections</b> forces all
	connections to be laid out according to their currently selected layout algorithm. See the <a href="GRAPHICAL EDITING.htm#_Connections">Connection Routing</a> section for more information.
	</p>

	<p class=MsoListParagraphCxSpMiddle style='text-indent: -.25in'>
	<span style='font-family: Symbol'>·<span style='font: 7.0pt "Times New Roman"'>         </span></span><b>Validate</b> checks the file for
	missing/incorrectly configured elements and reports these in the Problems view. Problems are also highlighted on the canvas with a warning (<img border=0 width=12 height=12 id="Picture 16"
	src="ANATOMY%20OF%20THE%20BPMN2%20MODELER_files/image005.jpg">) or error (<img border=0 width=12 height=12 id="Picture 17" src="ANATOMY%20OF%20THE%20BPMN2%20MODELER_files/image006.jpg">)
	decorator on the problem element.
	</p>

	<p class=MsoListParagraphCxSpMiddle style='text-indent: -.25in'>
	<span style='font-family: Symbol'>·<span style='font: 7.0pt "Times New Roman"'>         </span></span><b>Show/hide Source View</b> is used to show or hide
	the XML source tab.
	</p>

	<p class=MsoListParagraphCxSpMiddle style='text-indent: -.25in'>
	<span style='font-family: Symbol'>·<span style='font: 7.0pt "Times New Roman"'>         </span></span><b>Delete Diagram</b> deletes the currently active
	diagram tab.
	</p>

	<p class=MsoListParagraphCxSpLast style='text-indent: -.25in'>
	<span style='font-family: Symbol'>·<span style='font: 7.0pt "Times New Roman"'>         </span></span><b>Export Diagram</b> is used to save a snapshot
	image of the entire diagram, in various selectable image formats and sizes. See the <a href="POPUP DIALOGS.htm#_Export_Diagram_Dialog">Export Diagram Dialog</a> section.
	</p>

	<div class="h2">

	<h2>
	<a name="_Toc371905850"></a><a name="_Tool_Palette_1"></a>Tool Palette
	</h2>

	</div>

	<p class=MsoNormal>
	The <a href="GRAPHICAL EDITING.htm#_Tool_Palette">Tool Palette</a> is, by default, located along the right edge of the Drawing Canvas. It consists of several tool drawers which contain the tools that are dragged
	onto the Drawing Canvas to create BPMN2 elements.
	</p>

	<div class="h2">

	<h2>
	<a name="_Toc371905851"></a><a name="_Outline_View_1"></a>Outline View
	</h2>

	</div>

	<p class=MsoNormal>
	The <a href="USER PREFERENCES.htm#_Outline_View">Outline View</a> is separate from the editor and is intended to show a hierarchical, tree oriented view of the file. This view is synchronized with the Drawing Canvas;
	when an element is selected on the canvas, it is highlighted in the Outline View. Conversely when an item in the Outline is selected, it is also highlighted on the Drawing Canvas.
	</p>

	<div class="h2">

	<h2>
	<a name="_Toc371905852">Property View</a>
	</h2>

	</div>

	<p class=MsoNormal>
	The <a href="PROPERTY VIEW.htm#_Property_View">Property View</a> is used to edit the attributes of the currently selected element. This view is also synchronized with the Outline View such that when a tree element
	is selected in the Outline, its attributes are displayed in the Property View.
	</p>

	<div class="h2">

	<h2>
	<a name="_Toc371905853"></a><a name="_Menu_&_Toolbar"></a>Menu & Toolbar
	</h2>

	</div>

	<p class=MsoNormal>
	<b>Diagram</b> Main Menu Action This Main Menu bar item allows you to create a new Process, Choreography or Collaboration diagram. The new diagram will be initially empty and appear as a new tab
	at the top of the editor window. See the section on <a href="APPENDIX_ BPMN 2.0 REFERENCE.htm#_Diagram_Types">BPMN 2.0 Diagram Types</a> for more information.
	</p>

	<p class=MsoNormal>
	<img border=0 width=28 height=20 id="Picture 43" src="ANATOMY%20OF%20THE%20BPMN2%20MODELER_files/image007.jpg"> <b>Undo/Redo</b> These Toolbar actions undo or redo the last editing
	operation performed. If the operation changed some attribute of an element (for example, its name) the undo/redo affects only that attribute.
	</p>

	<p class=MsoNormal>
	<img border=0 width=70 height=20 id="Picture 38" src="ANATOMY%20OF%20THE%20BPMN2%20MODELER_files/image008.jpg"> <b>Zoom</b> This Toolbar action are used to magnify or reduce the diagram.
	</p>

	<p class=MsoNormal>
	<img border=0 width=125 height=20 id="Picture 39" src="ANATOMY%20OF%20THE%20BPMN2%20MODELER_files/image009.jpg"> <b>Alignment Tools</b> These Toolbar actions are used to align multiple
	shapes with each other either horizontally, vertically, or normalize their widths or heights.
	</p>

	<p class=MsoNormal>
	<img border=0 width=19 height=20 id="Picture 40" src="ANATOMY%20OF%20THE%20BPMN2%20MODELER_files/image010.jpg"> <b>Hide Context Buttons</b> This Toolbar action disables the Context Button
	Pad. When the mouse is hovered over an element, an irregularly shaped pad pops up and surrounds the element. This pad contains a number of editing buttons which affect the element. The <b>Hide
	Context Buttons</b> Toolbar toggle button disables the display of this Button Pad. See the <a href="GRAPHICAL EDITING.htm#_Context_Button_Pad">Context Button Pad</a> section for more information.
	</p>

	</div>

	</body>

	</html>