Apply new css styles and other conventions
diff --git a/examples/org.eclipse.graphiti.doc/resources/docu/gfw/user-defined-properties.htm b/examples/org.eclipse.graphiti.doc/resources/docu/gfw/user-defined-properties.htm
index e54e303..c117852 100644
--- a/examples/org.eclipse.graphiti.doc/resources/docu/gfw/user-defined-properties.htm
+++ b/examples/org.eclipse.graphiti.doc/resources/docu/gfw/user-defined-properties.htm
@@ -1,617 +1,130 @@
-<html>
+<html>
<head>
-<meta http-equiv=Content-Type content="text/html; charset=us-ascii">
-<meta name=Generator content="Microsoft Word 12 (filtered)">
+<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Using user-defined properties</title>
-<link rel=Stylesheet type="text/css" media=all href="../book.css">
-<style>
-<!--
- /* Font Definitions */
- @font-face
- {font-family:"Cambria Math";
- panose-1:2 4 5 3 5 4 6 3 2 4;}
-@font-face
- {font-family:Cambria;
- panose-1:2 4 5 3 5 4 6 3 2 4;}
-@font-face
- {font-family:Tahoma;
- panose-1:2 11 6 4 3 5 4 4 2 4;}
-@font-face
- {font-family:Consolas;
- panose-1:2 11 6 9 2 2 4 3 2 4;}
- /* Style Definitions */
- p.MsoNormal, li.MsoNormal, div.MsoNormal
- {margin:0cm;
- margin-bottom:.0001pt;
- font-size:12.0pt;
- font-family:"Times New Roman","serif";}
-h1
- {mso-style-link:"\00DCberschrift 1 Zchn";
- margin-top:12.0pt;
- margin-right:0cm;
- margin-bottom:3.0pt;
- margin-left:0cm;
- page-break-after:avoid;
- font-size:16.0pt;
- font-family:"Times New Roman","serif";
- font-weight:bold;}
-h2
- {mso-style-link:"\00DCberschrift 2 Zchn";
- margin-top:12.0pt;
- margin-right:0cm;
- margin-bottom:3.0pt;
- margin-left:0cm;
- page-break-after:avoid;
- font-size:14.0pt;
- font-family:"Times New Roman","serif";
- font-weight:bold;
- font-style:italic;}
-h3
- {mso-style-link:"\00DCberschrift 3 Zchn";
- margin-top:12.0pt;
- margin-right:0cm;
- margin-bottom:3.0pt;
- margin-left:0cm;
- page-break-after:avoid;
- font-size:13.0pt;
- font-family:"Times New Roman","serif";
- font-weight:bold;}
-h4
- {mso-style-link:"\00DCberschrift 4 Zchn";
- margin-top:11.25pt;
- margin-right:0cm;
- margin-bottom:1.7pt;
- margin-left:0cm;
- font-size:12.0pt;
- font-family:"Times New Roman","serif";
- font-weight:bold;
- font-style:italic;}
-h5
- {mso-style-link:"\00DCberschrift 5 Zchn";
- margin-right:0cm;
- margin-left:0cm;
- font-size:10.0pt;
- font-family:"Times New Roman","serif";
- font-weight:bold;}
-h6
- {mso-style-link:"\00DCberschrift 6 Zchn";
- margin-right:0cm;
- margin-left:0cm;
- font-size:7.5pt;
- font-family:"Times New Roman","serif";
- font-weight:bold;}
-a:link, span.MsoHyperlink
- {color:blue;
- text-decoration:underline;}
-a:visited, span.MsoHyperlinkFollowed
- {color:purple;
- text-decoration:underline;}
-p
- {margin-top:5.65pt;
- margin-right:0cm;
- margin-bottom:5.65pt;
- margin-left:0cm;
- font-size:12.0pt;
- font-family:"Times New Roman","serif";}
-pre
- {mso-style-link:"HTML Vorformatiert Zchn";
- margin-top:0cm;
- margin-right:0cm;
- margin-bottom:0cm;
- margin-left:3.4pt;
- margin-bottom:.0001pt;
- font-size:11.0pt;
- font-family:"Courier New";}
-p.MsoAcetate, li.MsoAcetate, div.MsoAcetate
- {mso-style-link:"Sprechblasentext Zchn";
- margin:0cm;
- margin-bottom:.0001pt;
- font-size:8.0pt;
- font-family:"Tahoma","sans-serif";}
-span.berschrift1Zchn
- {mso-style-name:"\00DCberschrift 1 Zchn";
- mso-style-link:"\00DCberschrift 1";
- font-family:"Cambria","serif";
- color:#365F91;
- font-weight:bold;}
-span.berschrift2Zchn
- {mso-style-name:"\00DCberschrift 2 Zchn";
- mso-style-link:"\00DCberschrift 2";
- font-family:"Cambria","serif";
- color:#4F81BD;
- font-weight:bold;}
-span.berschrift3Zchn
- {mso-style-name:"\00DCberschrift 3 Zchn";
- mso-style-link:"\00DCberschrift 3";
- font-family:"Cambria","serif";
- color:#4F81BD;
- font-weight:bold;}
-span.berschrift4Zchn
- {mso-style-name:"\00DCberschrift 4 Zchn";
- mso-style-link:"\00DCberschrift 4";
- font-family:"Cambria","serif";
- color:#4F81BD;
- font-weight:bold;
- font-style:italic;}
-span.berschrift5Zchn
- {mso-style-name:"\00DCberschrift 5 Zchn";
- mso-style-link:"\00DCberschrift 5";
- font-family:"Cambria","serif";
- color:#243F60;}
-span.berschrift6Zchn
- {mso-style-name:"\00DCberschrift 6 Zchn";
- mso-style-link:"\00DCberschrift 6";
- font-family:"Cambria","serif";
- color:#243F60;
- font-style:italic;}
-span.HTMLVorformatiertZchn
- {mso-style-name:"HTML Vorformatiert Zchn";
- mso-style-link:"HTML Vorformatiert";
- font-family:Consolas;}
-span.SprechblasentextZchn
- {mso-style-name:"Sprechblasentext Zchn";
- mso-style-link:Sprechblasentext;
- font-family:"Tahoma","sans-serif";}
-p.code, li.code, div.code
- {mso-style-name:code;
- margin-top:0cm;
- margin-right:0cm;
- margin-bottom:0cm;
- margin-left:15.0pt;
- margin-bottom:.0001pt;
- font-size:12.0pt;
- font-family:"Times New Roman","serif";}
-p.note, li.note, div.note
- {mso-style-name:note;
- margin-top:19.5pt;
- margin-right:0cm;
- margin-bottom:19.5pt;
- margin-left:30.0pt;
- font-size:13.0pt;
- font-family:"Times New Roman","serif";
- font-style:italic;}
-p.msochpdefault, li.msochpdefault, div.msochpdefault
- {mso-style-name:msochpdefault;
- margin-top:5.65pt;
- margin-right:0cm;
- margin-bottom:5.65pt;
- margin-left:0cm;
- font-size:10.0pt;
- font-family:"Times New Roman","serif";}
-p.Uuml, li.Uuml, div.Uuml
- {mso-style-name:"Ü\,berschrift 1";
- mso-style-link:"Ü6\,berschrift 6 Zchn1";
- margin:0cm;
- margin-bottom:.0001pt;
- font-size:12.0pt;
- font-family:"Times New Roman","serif";}
-span.Uuml1
- {mso-style-name:"Ü1\,berschrift 1 Zchn1";
- mso-style-link:"Ü\,berschrift 1";
- font-family:"Cambria","serif";
- color:#365F91;
- font-weight:bold;}
-span.Uuml2
- {mso-style-name:"Ü2\,berschrift 2 Zchn1";
- mso-style-link:"Ü\,berschrift 1";
- font-family:"Cambria","serif";
- color:#4F81BD;
- font-weight:bold;}
-span.Uuml3
- {mso-style-name:"Ü3\,berschrift 3 Zchn1";
- mso-style-link:"Ü\,berschrift 1";
- font-family:"Cambria","serif";
- color:#4F81BD;
- font-weight:bold;}
-span.Uuml4
- {mso-style-name:"Ü4\,berschrift 4 Zchn1";
- mso-style-link:"Ü\,berschrift 1";
- font-family:"Cambria","serif";
- color:#4F81BD;
- font-weight:bold;
- font-style:italic;}
-span.Uuml5
- {mso-style-name:"Ü5\,berschrift 5 Zchn1";
- mso-style-link:"Ü\,berschrift 1";
- font-family:"Cambria","serif";
- color:#243F60;}
-span.Uuml6
- {mso-style-name:"Ü6\,berschrift 6 Zchn1";
- mso-style-link:"Ü\,berschrift 1";
- font-family:"Cambria","serif";
- color:#243F60;
- font-style:italic;}
-span.heading2char
- {mso-style-name:heading2char;
- font-family:"Arial","sans-serif";
- color:black;
- font-weight:bold;
- font-style:italic;}
-span.code1
- {mso-style-name:code1;
- font-style:italic;}
-span.code0
- {mso-style-name:code0;
- font-style:italic;}
-.MsoChpDefault
- {font-size:10.0pt;}
-@page Section1
- {size:595.45pt 841.7pt;
- margin:72.0pt 89.85pt 72.0pt 89.85pt;}
-div.Section1
- {page:Section1;}
- /* List Definitions */
- ol
- {margin-bottom:0cm;}
-ul
- {margin-bottom:0cm;}
--->
-</style>
-
+<link href="../book.css" rel="Stylesheet" type="text/css">
+<link href="../code.css" rel="Stylesheet" type="text/css">
</head>
-<body bgcolor=white lang=DE link=blue vlink=purple style='margin-bottom:12.0pt'>
+<body>
-<div class=Section1>
-
-<h1><span lang=EN-GB>Using User-Defined Properties</span></h1>
-
-<p class=MsoNormal><span lang=EN-GB style='color:black'> </span></p>
-
-<p class=MsoNormal><span lang=EN-US>You may have already noticed that in
-Graphiti it is sometimes difficult to unambiguously identify a pictogram
-element.</span></p>
-
-<p class=MsoNormal><span lang=EN-US>For example many features of this tutorial
-work on the shapes depicting EClasses. In the <i>canExecute()</i> methods of
-those features we always received the current pictogram element and checked, if
-the associated business object is a EClass. In that case we assumed that this
-is the container shape, which was created in the <a href="add-feature.htm">add
-feature</a>.</span></p>
-
-<p class=MsoNormal><span lang=EN-US> </span></p>
-
-<p class=MsoNormal><span lang=EN-US>But what happens, if there are several
-pictogram elements which have a EClass as associated business object? This
-might happen, because there are several graphical representations for a EClass.
-In that case we need a means to distinguish the shapes independent from the
-associated business object.</span></p>
-
-<p class=MsoNormal><span lang=EN-US> </span></p>
-
-<p class=MsoNormal><span lang=EN-US>All pictogram elements provide the
-possibility to attach user-defined properties to them (key-value pairs).</span></p>
-
-<p class=MsoNormal><span lang=EN-US>In our example we want to use this, to
-attach an identifier to the shapes we create, e.g. “shape-id =
-e-class”. Using this identifier the shapes can later be clearly
-identified.</span></p>
-
-<p class=MsoNormal><span lang=EN-US>You can imagine another example if we would
-enhance the tutorial and show the attributes of a EClass in the shape below the
-class name. Each attribute might be displayed as an own shape, but all
-attribute shapes would associate the same business object: the EClass. So to
-differentiate the attribute shapes, it would be useful to add the attribute
-name as a property, e.g. "attribute-name = city".</span></p>
-
-<p class=MsoNormal><span lang=EN-US> </span></p>
-
-<h2><span lang=EN-GB>Creating a Property Utility Class</span></h2>
-
-<p class=MsoNormal><span lang=EN-GB style='color:black'> </span></p>
-
-<p class=MsoNormal><span lang=EN-GB style='color:black'>In this example we want
-to set a user-defined property to the shape of a EClass, which we create in our
-<a href="add-feature.htm">add feature</a>. Later in the <a
-href="layout-feature.htm">layout feature</a> we check this user-defined
-property to find out, if this is the shape the layout feature expects to
-(remember, that the layout feature very strongly depends on the shape structure
-created in the add feature. For simplicity reasons we only change the layout
-feature and not all the other features.</span></p>
-
-<p class=MsoNormal><span lang=EN-GB style='color:black'> </span></p>
-
-<p class=MsoNormal><span lang=EN-GB style='color:black'>Note, that sometimes it
-is still correct to only check the business object. For example in our <i>TutorialRenameEClassFeature</i>
-the shape doesn’t really matter, only the associated EClass.</span></p>
-
-<p class=MsoNormal><span lang=EN-GB style='color:black'> </span></p>
-
-<p class=MsoNormal><span lang=EN-GB style='color:black'>We start by
-implementing a utility class for the handling of the user-defined properties of
-our tool.</span></p>
-
-<p class=MsoNormal><span lang=EN-GB style='color:black'>Note the helper-methods
-<a
-href="../../../javadoc/org/eclipse/graphiti/services/IPeService.html#setPropertyValue(org.eclipse.graphiti.mm.PropertyContainer, java.lang.String, java.lang.String)">setPropertyValue</a>
-and <a
-href="../../../javadoc/org/eclipse/graphiti/services/IPeService.html#getPropertyValue(org.eclipse.graphiti.mm.PropertyContainer, java.lang.String)">getPropertyValue</a>,
-which allow to easily access the property values.</span></p>
-
-<p class=MsoNormal><span lang=EN-GB style='color:black'> </span></p>
-
-<p class=MsoNormal><span lang=EN-GB style='color:black'>You can see the complete
-implementation of the user-defined property utility class here:</span></p>
-
-<p class=MsoNormal><span lang=EN-US> </span></p>
-
-<table class=MsoNormalTable border=0 cellspacing=0 cellpadding=0 width=851
- style='width:18.0cm;border-collapse:collapse'>
- <tr>
- <td width=851 valign=top style='width:18.0cm;border:solid windowtext 1.0pt;
- padding:0cm 5.4pt 0cm 5.4pt'>
- <p class=MsoNormal style='text-autospace:none'><span lang=EN-GB
- style='color:black'> </span></p>
- <p class=MsoNormal style='text-autospace:none'><b><span lang=EN-US
- style='font-size:10.0pt;font-family:"Courier New";color:#7F0055'>package</span></b><span
- lang=EN-US> </span><span lang=EN-US style='font-size:10.0pt;font-family:"Courier New";
- color:black'>org.eclipse.graphiti.examples.tutorial;</span></p>
- <p class=MsoNormal style='text-autospace:none'><span lang=EN-US
- style='font-size:10.0pt;font-family:"Courier New"'> </span></p>
- <p class=MsoNormal style='text-autospace:none'><span lang=EN-US
- style='font-size:10.0pt;font-family:"Courier New"'> </span></p>
- <p class=MsoNormal style='text-autospace:none'><b><span lang=EN-US
- style='font-size:10.0pt;font-family:"Courier New";color:#7F0055'>public</span></b><span
- lang=EN-US> </span><b><span lang=EN-US style='font-size:10.0pt;font-family:
- "Courier New";color:#7F0055'>class</span></b><span lang=EN-US> </span><span
- lang=EN-US style='font-size:10.0pt;font-family:"Courier New";color:black'>PropertyUtil
- {</span></p>
- <p class=MsoNormal style='text-autospace:none'><span lang=EN-US
- style='font-size:10.0pt;font-family:"Courier New"'> </span></p>
- <p class=MsoNormal style='text-autospace:none'><span lang=EN-US
- style='font-size:10.0pt;font-family:"Courier New";color:black'> </span><span
- lang=EN-US> </span><b><span lang=EN-US style='font-size:10.0pt;font-family:
- "Courier New";color:#7F0055'>public</span></b><span lang=EN-US> </span><b><span
- lang=EN-US style='font-size:10.0pt;font-family:"Courier New";color:#7F0055'>static</span></b><span
- lang=EN-US> </span><b><span lang=EN-US style='font-size:10.0pt;font-family:
- "Courier New";color:#7F0055'>final</span></b><span lang=EN-US> </span><span
- lang=EN-US style='font-size:10.0pt;font-family:"Courier New";color:black'>String</span><span
- lang=EN-US> </span><i><span lang=EN-US style='font-size:10.0pt;font-family:
- "Courier New";color:#0000C0'>SHAPE_KEY</span></i><span lang=EN-US> </span><span
- lang=EN-US style='font-size:10.0pt;font-family:"Courier New";color:black'>=</span><span
- lang=EN-US> </span><span lang=EN-US style='font-size:10.0pt;font-family:"Courier New";
- color:#2A00FF'>"shape-id"</span><span lang=EN-US style='font-size:
- 10.0pt;font-family:"Courier New";color:black'>;</span></p>
- <p class=MsoNormal style='text-autospace:none'><span lang=EN-US
- style='font-size:10.0pt;font-family:"Courier New"'> </span></p>
- <p class=MsoNormal style='text-autospace:none'><span lang=EN-US
- style='font-size:10.0pt;font-family:"Courier New";color:black'> </span><span
- lang=EN-US> </span><b><span lang=EN-US style='font-size:10.0pt;font-family:
- "Courier New";color:#7F0055'>public</span></b><span lang=EN-US> </span><b><span
- lang=EN-US style='font-size:10.0pt;font-family:"Courier New";color:#7F0055'>static</span></b><span
- lang=EN-US> </span><b><span lang=EN-US style='font-size:10.0pt;font-family:
- "Courier New";color:#7F0055'>final</span></b><span lang=EN-US> </span><span
- lang=EN-US style='font-size:10.0pt;font-family:"Courier New";color:black'>String</span><span
- lang=EN-US> </span><i><span lang=EN-US style='font-size:10.0pt;font-family:
- "Courier New";color:#0000C0'>SHAPE_VALUE_E_CLASS</span></i><span lang=EN-US> </span><span
- lang=EN-US style='font-size:10.0pt;font-family:"Courier New";color:black'>=</span><span
- lang=EN-US> </span><span lang=EN-US style='font-size:10.0pt;font-family:"Courier New";
- color:#2A00FF'>"e-class"</span><span lang=EN-US style='font-size:
- 10.0pt;font-family:"Courier New";color:black'>;</span></p>
- <p class=MsoNormal style='text-autospace:none'><span lang=EN-US
- style='font-size:10.0pt;font-family:"Courier New"'> </span></p>
- <p class=MsoNormal style='text-autospace:none'><span lang=EN-US
- style='font-size:10.0pt;font-family:"Courier New";color:black'> </span><span
- lang=EN-US> </span><b><span lang=EN-US style='font-size:10.0pt;font-family:
- "Courier New";color:#7F0055'>public</span></b><span lang=EN-US> </span><b><span
- lang=EN-US style='font-size:10.0pt;font-family:"Courier New";color:#7F0055'>static</span></b><span
- lang=EN-US> </span><b><span lang=EN-US style='font-size:10.0pt;font-family:
- "Courier New";color:#7F0055'>final</span></b><span lang=EN-US> </span><b><span
- lang=EN-US style='font-size:10.0pt;font-family:"Courier New";color:#7F0055'>void</span></b><span
- lang=EN-US> </span><span lang=EN-US style='font-size:10.0pt;font-family:"Courier New";
- color:black'>setEClassShape(PictogramElement pe) {</span></p>
- <p class=MsoNormal style='text-autospace:none'><span lang=EN-US
- style='font-size:10.0pt;font-family:"Courier New";color:black'>
- Graphiti.getPeService().setPropertyValue(pe,</span><span lang=EN-US> </span><i><span
- lang=EN-US style='font-size:10.0pt;font-family:"Courier New";color:#0000C0'>SHAPE_KEY</span></i><span
- lang=EN-US style='font-size:10.0pt;font-family:"Courier New";color:black'>,<br>
- </span><span lang=EN-US> </span><i><span
- lang=EN-US style='font-size:10.0pt;font-family:"Courier New";color:#0000C0'>
- SHAPE_VALUE_E_CLASS</span></i><span lang=EN-US style='font-size:10.0pt;
- font-family:"Courier New";color:black'>);</span></p>
- <p class=MsoNormal style='text-autospace:none'><span lang=EN-US
- style='font-size:10.0pt;font-family:"Courier New";color:black'>
- }</span></p>
- <p class=MsoNormal style='text-autospace:none'><span lang=EN-US
- style='font-size:10.0pt;font-family:"Courier New"'> </span></p>
- <p class=MsoNormal style='text-autospace:none'><span lang=EN-US
- style='font-size:10.0pt;font-family:"Courier New";color:black'> </span><span
- lang=EN-US> </span><b><span lang=EN-US style='font-size:10.0pt;font-family:
- "Courier New";color:#7F0055'>public</span></b><span lang=EN-US> </span><b><span
- lang=EN-US style='font-size:10.0pt;font-family:"Courier New";color:#7F0055'>static</span></b><span
- lang=EN-US> </span><b><span lang=EN-US style='font-size:10.0pt;font-family:
- "Courier New";color:#7F0055'>boolean</span></b><span lang=EN-US> </span><span
- lang=EN-US style='font-size:10.0pt;font-family:"Courier New";color:black'>isEClassShape(PictogramElement
- pe) {</span></p>
- <p class=MsoNormal style='text-autospace:none'><span lang=EN-US
- style='font-size:10.0pt;font-family:"Courier New";color:black'> </span><span
- lang=EN-US> </span><b><span lang=EN-US style='font-size:10.0pt;font-family:
- "Courier New";color:#7F0055'>return</span></b><span lang=EN-US> </span><i><span
- lang=EN-US style='font-size:10.0pt;font-family:"Courier New";color:#0000C0'>SHAPE_VALUE_E_CLASS</span></i><span
- lang=EN-US style='font-size:10.0pt;font-family:"Courier New";color:black'>.equals(Graphiti.getPeService()<br>
-
- .getPropertyValue(pe,</span><span lang=EN-US> </span><i><span lang=EN-US
- style='font-size:10.0pt;font-family:"Courier New";color:#0000C0'>SHAPE_KEY</span></i><span
- lang=EN-US style='font-size:10.0pt;font-family:"Courier New";color:black'>));</span></p>
- <p class=MsoNormal style='text-autospace:none'><span lang=EN-US
- style='font-size:10.0pt;font-family:"Courier New";color:black'> </span><span
- lang=EN-US> </span><span style='font-size:10.0pt;font-family:"Courier New";
- color:black'>}</span></p>
- <p class=MsoNormal style='text-autospace:none'><span style='font-size:10.0pt;
- font-family:"Courier New";color:black'>}</span></p>
- <p class=MsoNormal> </p>
- </td>
- </tr>
-</table>
-
-<p class=MsoNormal><span lang=EN-GB style='color:black'> </span></p>
-
-<p class=MsoNormal><span lang=EN-GB style='color:black'>Next we have to set the
-user-defined property to the shape of the EClass in the add method of the</span><span
-lang=EN-GB> </span><span class=code1><span lang=EN-US>TutorialAddEClassFeature</span></span><span
-class=code1><span lang=EN-US style='font-style:normal'>.</span></span></p>
-
-<p class=MsoNormal><span lang=EN-GB style='color:black'> </span></p>
-
-<p class=MsoNormal><span lang=EN-GB style='color:black'>You can see</span><span
-lang=EN-GB> </span><span class=code1><span lang=EN-US style='font-style:normal'>the
-changed add method in the following code snippet</span></span><span lang=EN-GB
-style='color:black'>:</span></p>
-
-<p class=MsoNormal><span lang=EN-US> </span></p>
-
-<table class=MsoNormalTable border=0 cellspacing=0 cellpadding=0 width=851
- style='width:18.0cm;border-collapse:collapse'>
- <tr>
- <td width=851 valign=top style='width:18.0cm;border:solid windowtext 1.0pt;
- padding:0cm 5.4pt 0cm 5.4pt'>
- <p class=MsoNormal style='text-autospace:none'><span lang=EN-GB
- style='color:black'> </span></p>
- <p class=MsoNormal style='text-autospace:none'><span lang=EN-US
- style='font-size:10.0pt;font-family:"Courier New";color:black'> </span><span
- lang=EN-US> </span><b><span lang=EN-US style='font-size:10.0pt;font-family:
- "Courier New";color:#7F0055'>public</span></b><span lang=EN-US> </span><span
- lang=EN-US style='font-size:10.0pt;font-family:"Courier New";color:black'>PictogramElement
- add(IAddContext context) {</span></p>
- <p class=MsoNormal style='text-autospace:none'><span lang=EN-US
- style='font-size:10.0pt;font-family:"Courier New";color:black'>
- EClass addedClass = (EClass) context.getNewObject();</span></p>
- <p class=MsoNormal style='text-autospace:none'><span lang=EN-US
- style='font-size:10.0pt;font-family:"Courier New";color:black'>
- Diagram targetDiagram = (Diagram) context.getTargetContainer();</span></p>
- <p class=MsoNormal style='text-autospace:none'><span lang=EN-US
- style='font-size:10.0pt;font-family:"Courier New"'> </span></p>
- <p class=MsoNormal style='text-autospace:none'><span lang=EN-US
- style='font-size:10.0pt;font-family:"Courier New";color:black'> </span><span
- lang=EN-US> </span><span lang=EN-US style='font-size:10.0pt;font-family:"Courier New";
- color:#3F7F5F'>// CONTAINER SHAPE WITH ROUNDED RECTANGLE</span></p>
- <p class=MsoNormal style='text-autospace:none'><span lang=EN-US
- style='font-size:10.0pt;font-family:"Courier New";color:#3F7F5F'> </span><span
- lang=EN-US> </span><span lang=EN-US style='font-size:10.0pt;font-family:"Courier New"'> IPeCreateService
- peCreateService = Graphiti.getPeCreateService();</span></p>
- <p class=MsoNormal style='text-autospace:none'><span lang=EN-US
- style='font-size:10.0pt;font-family:"Courier New";color:black'>
- ContainerShape containerShape =</span></p>
- <p class=MsoNormal style='text-autospace:none'><span lang=EN-US
- style='font-size:10.0pt;font-family:"Courier New";color:black'> </span><span
- lang=EN-US> </span><span lang=EN-US style='font-size:10.0pt;font-family:"Courier New"'>peCreateService<span
- style='color:black'>.createContainerShape(targetDiagram,</span> <b><span
- style='color:#7F0055'>true</span></b><span style='color:black'>);</span></span></p>
- <p class=MsoNormal style='text-autospace:none'><span lang=EN-US
- style='font-size:10.0pt;font-family:"Courier New";color:black'>
- PropertyUtil.setEClassShape(containerShape);</span></p>
- <p class=MsoNormal style='text-autospace:none'><span lang=EN-US
- style='font-size:10.0pt;font-family:"Courier New"'> </span></p>
- <p class=MsoNormal style='text-autospace:none'><span lang=EN-US
- style='font-size:10.0pt;font-family:"Courier New"'> </span></p>
- <p class=MsoNormal style='text-autospace:none'><span lang=EN-US
- style='font-size:10.0pt;font-family:"Courier New";color:black'> </span><span
- lang=EN-US> </span><span lang=EN-US style='font-size:10.0pt;font-family:"Courier New";
- color:#3F7F5F'>// ... EXISTING CODING ...</span></p>
- <p class=MsoNormal style='text-autospace:none'><span lang=EN-US
- style='font-size:10.0pt;font-family:"Courier New";color:black'> </span></p>
- <p class=MsoNormal style='text-autospace:none'><span lang=EN-US
- style='font-size:10.0pt;font-family:"Courier New";color:#3F7F5F'> </span></p>
- <p class=MsoNormal style='text-autospace:none'><span lang=EN-US
- style='font-size:10.0pt;font-family:"Courier New";color:black'> </span><span
- lang=EN-US> </span><b><span style='font-size:10.0pt;font-family:"Courier New";
- color:#7F0055'>return</span></b> <span style='font-size:10.0pt;font-family:
- "Courier New";color:black'>containerShape;</span></p>
- <p class=MsoNormal><span style='font-size:10.0pt;font-family:"Courier New";
- color:black'> }</span></p>
- <p class=MsoNormal> </p>
- </td>
- </tr>
-</table>
-
-<p class=MsoNormal><span lang=EN-GB style='color:black'> </span></p>
-
-<p class=MsoNormal><span lang=EN-GB style='color:black'> </span></p>
-
-<p class=MsoNormal><span lang=EN-GB style='color:black'>Finally we change the <i>canLayout</i>
-method of the <i>TutorialLayoutEClassFeature</i>, so that it now compares the
-user-defined property of the shape and no longer the business object associated
-with the shape.</span></p>
-
-<p class=MsoNormal><span lang=EN-US> </span></p>
-
-<p class=MsoNormal><span lang=EN-GB style='color:black'>This implementation can
-be seen here:</span></p>
-
-<p class=MsoNormal><span lang=EN-GB style='color:black'> </span></p>
-
-<table class=MsoNormalTable border=0 cellspacing=0 cellpadding=0 width=851
- style='width:18.0cm;border-collapse:collapse'>
- <tr>
- <td width=851 valign=top style='width:18.0cm;border:solid windowtext 1.0pt;
- padding:0cm 5.4pt 0cm 5.4pt'>
- <p class=MsoNormal style='text-autospace:none'><span lang=EN-GB
- style='font-size:10.0pt;font-family:"Courier New";color:#3F7F5F'> </span></p>
- <p class=MsoNormal style='text-autospace:none'><span lang=EN-US
- style='font-size:10.0pt;font-family:"Courier New";color:black'> </span><span
- lang=EN-US> </span><b><span lang=EN-US style='font-size:10.0pt;font-family:
- "Courier New";color:#7F0055'>public</span></b><span lang=EN-US> </span><b><span
- lang=EN-US style='font-size:10.0pt;font-family:"Courier New";color:#7F0055'>boolean</span></b><span
- lang=EN-US> </span><span lang=EN-US style='font-size:10.0pt;font-family:"Courier New";
- color:black'>canLayout(ILayoutContext context) {</span></p>
- <p class=MsoNormal style='text-autospace:none'><span lang=EN-US
- style='font-size:10.0pt;font-family:"Courier New";color:black'> </span><span
- lang=EN-US> </span><span lang=EN-US style='font-size:10.0pt;font-family:"Courier New";
- color:#3F7F5F'>// return true, if pictogram element is a EClass shape</span></p>
- <p class=MsoNormal style='text-autospace:none'><span lang=EN-US
- style='font-size:10.0pt;font-family:"Courier New";color:black'>
- PictogramElement pe = context.getPictogramElement();</span></p>
- <p class=MsoNormal style='text-autospace:none'><span lang=EN-US
- style='font-size:10.0pt;font-family:"Courier New";color:black'> </span><span
- lang=EN-US> </span><b><span lang=EN-US style='font-size:10.0pt;font-family:
- "Courier New";color:#7F0055'>return</span></b><span lang=EN-US> </span><span
- lang=EN-US style='font-size:10.0pt;font-family:"Courier New";color:black'>PropertyUtil.<i>isEClassShape</i>(pe);</span></p>
- <p class=MsoNormal style='text-autospace:none'><span lang=EN-US
- style='font-size:10.0pt;font-family:"Courier New";color:black'> </span><span
- lang=EN-US> </span><span style='font-size:10.0pt;font-family:"Courier New";
- color:black'>}</span></p>
- <p class=MsoNormal style='text-autospace:none'><span style='font-size:10.0pt;
- font-family:"Courier New"'> </span></p>
- <p class=MsoNormal><span lang=EN-GB style='color:black'> </span></p>
- </td>
- </tr>
-</table>
-
-<p class=MsoNormal><span lang=EN-GB style='color:black'> </span></p>
-
-<p class=MsoNormal><span lang=EN-GB style='color:black'> </span></p>
-
-<h2><span lang=EN-GB>Test: Verify Layout of EClass</span></h2>
-
-<p class=MsoNormal><span lang=EN-GB style='color:black'> </span></p>
-
-<p class=MsoNormal><span lang=EN-GB style='color:black'>Now start the editor
-and test that the layout feature still works correctly:</span></p>
-
-<ol style='margin-top:0cm' start=1 type=1>
- <li class=MsoNormal style='color:black;text-align:justify'><span lang=EN-GB>create
- or open a new diagram</span></li>
- <li class=MsoNormal style='color:black;text-align:justify'><span lang=EN-GB>create
- a new EClass</span></li>
- <li class=MsoNormal style='color:black;text-align:justify'><span lang=EN-GB>resize
- the EClass, and verify that the layout still works correctly (size of all
- graphics algorithms changes)</span></li>
+<h1>Using User-Defined Properties</h1>
+<p>You may have already noticed that in Graphiti it is sometimes difficult to unambiguously
+identify a pictogram element.</p>
+<p>For example many features of this tutorial work on the shapes depicting EClasses.
+In the <span class="inlinecode">canExecute()</span> methods of those features we
+always received the current pictogram element and checked, if the associated business
+object is a EClass. In that case we assumed that this is the container shape, which
+was created in the <a href="add-feature.htm">add feature</a>.</p>
+<p>But what happens, if there are several pictogram elements which have a EClass
+as associated business object? This might happen, because there are several graphical
+representations for a EClass. In that case we need a means to distinguish the shapes
+independent from the associated business object.</p>
+<p>All pictogram elements provide the possibility to attach user-defined properties
+to them (key-value pairs).</p>
+<p>In our example we want to use this, to attach an identifier to the shapes we
+create, e.g. "shape-id = e-class". Using this identifier the shapes can later be
+clearly identified.</p>
+<p>You can imagine another example if we would enhance the tutorial and show the
+attributes of a EClass in the shape below the class name. Each attribute might be
+displayed as an own shape, but all attribute shapes would associate the same business
+object: the EClass. So to differentiate the attribute shapes, it would be useful
+to add the attribute name as a property, e.g. "attribute-name = city".</p>
+<h2>Creating a Property Utility Class</h2>
+<p>In this example we want to set a user-defined property to the shape of a EClass,
+which we create in our <a href="add-feature.htm">add feature</a>. Later in the
+<a href="layout-feature.htm">layout feature</a> we check this user-defined property
+to find out, if this is the shape the layout feature expects to (remember, that
+the layout feature very strongly depends on the shape structure created in the add
+feature. For simplicity reasons we only change the layout feature and not all the
+other features.</p>
+<p>Note, that sometimes it is still correct to only check the business object. For
+example in our <i>TutorialRenameEClassFeature</i> the shape doesn’t really matter,
+only the associated EClass.</p>
+<p>We start by implementing a utility class for the handling of the user-defined
+properties of our tool.</p>
+<p>Note the helper-methods
+<a href="../../../javadoc/org/eclipse/graphiti/services/IPeService.html#setPropertyValue(org.eclipse.graphiti.mm.PropertyContainer, java.lang.String, java.lang.String)">
+setPropertyValue</a> and
+<a href="../../../javadoc/org/eclipse/graphiti/services/IPeService.html#getPropertyValue(org.eclipse.graphiti.mm.PropertyContainer, java.lang.String)">
+getPropertyValue</a>, which allow to easily access the property values.</p>
+<p>You can see the complete implementation of the user-defined property utility
+class here:</p>
+<!-- Begin code ------------------------------------------------------------------------------- -->
+<p> </p>
+<div class="literallayout">
+ <div class="incode">
+ <p class="code"><span class="keyword">package</span> org.eclipse.graphiti.examples.tutorial;<br> <br>
+ <span class="keyword">public class</span> PropertyUtil {<br> <br>
+ <span class="keyword">public static final</span> String
+ <span class="string"><em>SHAPE_KEY</em></span> = <span class="string">"shape-id"</span>;<br> <br>
+ <span class="keyword">public static final</span> String
+ <span class="string"><em>SHAPE_VALUE_E_CLASS</em></span> =
+ <span class="string">"e-class"</span>;<br> <br>
+ <span class="keyword"> public static final void</span> setEClassShape(PictogramElement
+ pe) {<br> Graphiti.getPeService().setPropertyValue(pe,
+ <span class="string"><em>SHAPE_KEY</em></span>,<br>
+ <span class="string"><em>SHAPE_VALUE_E_CLASS</em></span>);<br>
+ }<br> <br> <span class="keyword">public static boolean</span>
+ isEClassShape(PictogramElement pe) {<br>
+ return <span class="string"><em>SHAPE_VALUE_E_CLASS</em></span>.equals(Graphiti.getPeService()<br>
+ .getPropertyValue(pe, <span class="string"><em>SHAPE_KEY</em></span>));<br>
+ }<br>}<br></p>
+ </div>
+</div>
+<p> </p>
+<!-- End code ------------------------------------------------------------------------------- -->
+<p>Next we have to set the user-defined property to the shape of the EClass in the
+add method of the<span class="inlinecode">TutorialAddEClassFeature</span>.</p>
+<p>You can see<span class="inlinecode">add</span> method in the following code snippet:</p>
+<!-- Begin code ------------------------------------------------------------------------------- -->
+<p> </p>
+<div class="literallayout">
+ <div class="incode">
+ <p class="code"><span class="keyword">public</span> PictogramElement add(IAddContext
+ context) {<br> EClass addedClass = (EClass) context.getNewObject();<br>
+ Diagram targetDiagram = (Diagram) context.getTargetContainer();<br> <br>
+ <span class="comment">// CONTAINER SHAPE WITH ROUNDED RECTANGLE</span><br>
+ IPeCreateService peCreateService = Graphiti.getPeCreateService();<br>
+ ContainerShape containerShape =<br>
+ peCreateService.createContainerShape(targetDiagram,
+ <span class="keyword">true</span>);<br> PropertyUtil.setEClassShape(containerShape);<br> <br>
+ <span class="comment">// ... EXISTING CODING ...</span><br>
+ <br> <span class="keyword">return</span> containerShape;<br>
+ } </p>
+ </div>
+</div>
+<p> </p>
+<!-- End code ------------------------------------------------------------------------------- -->
+<p>Finally we change the <span class="inlinecode">canLayout</span> method of the
+<span class="inlinecode">TutorialLayoutEClassFeature</span>, so that it now compares
+the user-defined property of the shape and no longer the business object associated
+with the shape.</p>
+<p>This implementation can be seen here:</p>
+<!-- Begin code ------------------------------------------------------------------------------- -->
+<p> </p>
+<div class="literallayout">
+ <div class="incode">
+ <p class="code"><span class="keyword">public boolean</span> canLayout(ILayoutContext
+ context) {<br> <span class="comment">// return true, if
+ pictogram element is a EClass shape</span><br> PictogramElement
+ pe = context.getPictogramElement();<br>
+ <span class="keyword">return</span> PropertyUtil.isEClassShape(pe);<br>}
+ </p>
+ </div>
+</div>
+<p> </p>
+<!-- End code ------------------------------------------------------------------------------- -->
+<h2>Test: Verify Layout of EClass</h2>
+<p>Now start the editor and test that the layout feature still works correctly:</p>
+<ol>
+ <li>create or open a new diagram</li>
+ <li>create a new EClass</li>
+ <li>resize the EClass, and verify that the layout still works correctly (size
+ of all graphics algorithms changes)</li>
</ol>
-<p class=MsoNormal><span lang=EN-US style='color:black'> </span></p>
-
-<div class=MsoNormal align=center style='text-align:center'>
-
-<hr size=3 width="100%" align=center>
-
-</div>
-
-<p class=MsoNormal><a href="http://www.eclipse.org/legal/epl-v10.html"
-shape=rect>Copyright (c) SAP AG 2005, 2010.</a> </p>
-
-</div>
-
</body>
</html>