blob: 48d082dbc939c97cbcd90405ed3e56d173b7e975 [file] [log] [blame]
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=windows-1252">
<meta name=Generator content="Microsoft Word 12 (filtered)">
<title>Graphics Framework introduction</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: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:"Überschrift 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:"Überschrift 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:"Überschrift 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:"Überschrift 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:"Überschrift 5 Zchn";
margin-right:0cm;
margin-left:0cm;
font-size:10.0pt;
font-family:"Times New Roman","serif";
font-weight:bold;}
p.MsoCaption, li.MsoCaption, div.MsoCaption
{margin-top:6.0pt;
margin-right:0cm;
margin-bottom:24.0pt;
margin-left:0cm;
text-align:justify;
font-size:10.0pt;
font-family:"Times New Roman","serif";
font-weight:bold;}
a:link, span.MsoHyperlink
{color:blue;
text-decoration:underline;}
a:visited, span.MsoHyperlinkFollowed
{color:blue;
text-decoration:underline;}
p.MsoDocumentMap, li.MsoDocumentMap, div.MsoDocumentMap
{mso-style-link:"Dokumentstruktur Zchn";
margin:0cm;
margin-bottom:.0001pt;
background:navy;
font-size:10.0pt;
font-family:"Tahoma","sans-serif";}
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:"Überschrift 1 Zchn";
mso-style-link:"Überschrift 1";
font-family:"Cambria","serif";
color:#365F91;
font-weight:bold;}
span.berschrift2Zchn
{mso-style-name:"Überschrift 2 Zchn";
mso-style-link:"Überschrift 2";
font-family:"Cambria","serif";
color:#4F81BD;
font-weight:bold;}
span.berschrift3Zchn
{mso-style-name:"Überschrift 3 Zchn";
mso-style-link:"Überschrift 3";
font-family:"Cambria","serif";
color:#4F81BD;
font-weight:bold;}
span.berschrift4Zchn
{mso-style-name:"Überschrift 4 Zchn";
mso-style-link:"Überschrift 4";
font-family:"Cambria","serif";
color:#4F81BD;
font-weight:bold;
font-style:italic;}
span.berschrift5Zchn
{mso-style-name:"Überschrift 5 Zchn";
mso-style-link:"Überschrift 5";
font-family:"Cambria","serif";
color:#243F60;}
span.HTMLVorformatiertZchn
{mso-style-name:"HTML Vorformatiert Zchn";
mso-style-link:"HTML Vorformatiert";
font-family:Consolas;}
span.DokumentstrukturZchn
{mso-style-name:"Dokumentstruktur Zchn";
mso-style-link:Dokumentstruktur;
font-family:"Tahoma","sans-serif";}
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.comment, li.comment, div.comment
{mso-style-name:comment;
margin-top:5.65pt;
margin-right:0cm;
margin-bottom:5.65pt;
margin-left:0cm;
font-size:12.0pt;
font-family:"Times New Roman","serif";
font-weight:bold;}
.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;}
-->
</style>
</head>
<body bgcolor=white lang=DE link=blue vlink=blue style='margin-bottom:12.0pt'>
<div class=Section1>
<h1><span lang=EN-GB>Graphiti Introduction</span></h1>
<p class=MsoNormal><span lang=EN-GB>&nbsp;</span></p>
<h2><span lang=EN-GB>Goal</span></h2>
<p class=MsoNormal><span lang=EN-GB style='color:black'>&nbsp;</span></p>
<p class=MsoNormal><b><span lang=EN-GB style='color:black'>The goal of Graphiti
is to support the fast and easy creation of unified graphical editors, which
can display and edit an underlying domain model using a defined graphical
notation.</span></b></p>
<p class=MsoNormal><span lang=EN-GB style='color:black'>Typical examples are
class diagram editors (using the UML notation) or process flow editors (using
the BPMN notation).</span></p>
<p class=MsoNormal><span lang=EN-GB style='color:black'>&nbsp;</span></p>
<p class=MsoNormal><span style='color:black'><img width=810 height=379
src="visio/class-editor.gif"></span></p>
<p class=MsoCaption><span lang=EN-US>Figure: Example screenshot of a class
diagram editor</span></p>
<p class=MsoNormal><span style='color:black'><img width=739 height=576
src="visio/process-editor.gif"></span></p>
<p class=MsoCaption><span lang=EN-US>Figure: Example screenshot of a process
flow editor</span></p>
<p class=MsoNormal><span lang=EN-US style='color:black'>&nbsp;</span></p>
<h2><span lang=EN-US>Architecture</span></h2>
<p class=MsoNormal><span lang=EN-US style='color:black'>&nbsp;</span></p>
<p class=MsoNormal><span lang=EN-US style='color:black'>The graphical
representation of the domain model itself is also a model, which contains
model-elements like “rectangle”, “text” and “connection”. This allows
separating each graphical editor into the following parts:</span></p>
<p class=MsoNormal style='margin-left:42.05pt;text-indent:-18.0pt'><span
lang=EN-US style='color:black'>1.</span><span lang=EN-US style='font-size:7.0pt;
color:black'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span lang=EN-US
style='color:black'>The transformation from the domain model to the graphical
model (for viewing) and vice versa (for editing). This includes the definition
of a visualization-platform independent interaction behavior for the graphical
model, e.g. the definition how to create and resize the figures and which
context-menus and toolbars are available. </span></p>
<p class=MsoNormal style='margin-left:78.05pt;text-indent:-18.0pt'><span
lang=EN-US style='font-family:"Courier New";color:black'>o</span><span
lang=EN-US style='font-size:7.0pt;color:black'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</span><span lang=EN-US style='color:black'>This part is dependent on the
specific domain model and graphical notation, so it has to be implemented by
the customers of the Graphiti for each graphical editor. On the other hand,
this part is independent from the visualization-platform, where the rendering
of the graphical model is done.</span></p>
<p class=MsoNormal style='margin-left:78.05pt;text-indent:-18.0pt'><span
lang=EN-US style='font-family:"Courier New";color:black'>o</span><span
lang=EN-US style='font-size:7.0pt;color:black'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</span><span lang=EN-US style='color:black'>Note, that the graphical model is based on EMF. Currently it works best, if the domain model is based on
EMF, too, but it can also be based on other modeling technologies.</span></p>
<p class=MsoNormal style='margin-left:42.05pt;text-indent:-18.0pt'><span
lang=EN-US style='color:black'>2.</span><span lang=EN-US style='font-size:7.0pt;
color:black'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span lang=EN-US
style='color:black'>The rendering of the graphical model on a specific
visualization-platform and the mapping between the visualization-platform
specific interaction (e.g. mouse-events) and the defined platform independent
interaction.</span></p>
<p class=MsoNormal style='margin-left:78.05pt;text-indent:-18.0pt'><span
lang=EN-US style='font-family:"Courier New";color:black'>o</span><span
lang=EN-US style='font-size:7.0pt;color:black'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</span><span lang=EN-US style='color:black'>This part is dependent on the visualization-platform,
but it is independent of the specific domain model and graphical notation.
Therefore it can be completely provided by the Graphiti. The customers have the
possibility to also add visualization-platform specific implementations at a few
places, but this is not recommended, because it prevents the rendering of the
same diagram on different platforms.</span></p>
<p class=MsoNormal style='margin-left:78.05pt;text-indent:-18.0pt'><span
lang=EN-US style='font-family:"Courier New";color:black'>o</span><span
lang=EN-US style='font-size:7.0pt;color:black'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</span>Note, that currently only the
rendering for one visualization-platform is implemented by the Graphiti:
Eclipse using Draw2D and GEF.</p>
<p class=MsoNormal><span lang=EN-US style='color:black'>&nbsp;</span></p>
<p class=MsoNormal><span lang=EN-US style='color:black'>&nbsp;</span></p>
<p class=MsoNormal><span lang=EN-US style='color:black'>&nbsp;</span></p>
</div>
<hr>
<a href="http://www.eclipse.org/legal/epl-v10.html" shape="rect">Copyright (c) SAP AG 2005, 2010.</a>
</body>
</html>