<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta name="generator" content="pdf2htmlEX">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link rel="stylesheet" href="https://static.pudn.com/base/css/base.min.css">
<link rel="stylesheet" href="https://static.pudn.com/base/css/fancy.min.css">
<link rel="stylesheet" href="https://static.pudn.com/prod/directory_preview_static/626db5f140256a40ce6b1b50/raw.css">
<script src="https://static.pudn.com/base/js/compatibility.min.js"></script>
<script src="https://static.pudn.com/base/js/pdf2htmlEX.min.js"></script>
<script>
try{
pdf2htmlEX.defaultViewer = new pdf2htmlEX.Viewer({});
}catch(e){}
</script>
<title></title>
</head>
<body>
<div id="sidebar" style="display: none">
<div id="outline">
</div>
</div>
<div id="pf1" class="pf w0 h0" data-page-no="1"><div class="pc pc1 w0 h0"><img class="bi x0 y0 w1 h1" alt="" src="https://static.pudn.com/prod/directory_preview_static/626db5f140256a40ce6b1b50/bg1.jpg"><div class="t m0 x1 h2 y1 ff1 fs0 fc0 sc0 ls0 ws0">Diagramming for dummies </div><div class="t m0 x2 h3 y2 ff2 fs1 fc1 sc0 ls1 ws1"> </div><div class="t m0 x2 h3 y3 ff2 fs1 fc1 sc0 ls1 ws1"> </div><div class="t m0 x2 h3 y4 ff2 fs1 fc1 sc0 ls1 ws1"> </div><div class="t m0 x2 h3 y5 ff2 fs1 fc1 sc0 ls1 ws1"> </div><div class="t m0 x2 h3 y6 ff2 fs1 fc1 sc0 ls1 ws1"> </div><div class="t m0 x2 h4 y7 ff1 fs1 fc2 sc0 ls2 ws1">Abstract: </div><div class="t m0 x2 h3 y8 ff2 fs1 fc1 sc0 ls1 ws1"> </div><div class="t m0 x2 h3 y9 ff2 fs1 fc1 sc0 ls3 ws2">The structure of a simple diagramming control, called <span class="ff1 ls4 ws3">Netron Light</span><span class="ls5 ws4">, is </span></div><div class="t m0 x2 h3 ya ff2 fs1 fc1 sc0 ls6 ws3">explained in some details. The control <span class="ls3 ws5">is a simplified version of the Netron </span></div><div class="t m0 x2 h3 yb ff2 fs1 fc1 sc0 ls6 ws6">graph control which has many more fe<span class="ls1 ws7">atures and with an overall more </span></div><div class="t m0 x2 h3 yc ff2 fs1 fc1 sc0 ls7 ws8">complex architecture. This lightweight version contains however all the </div><div class="t m0 x2 h3 yd ff2 fs1 fc1 sc0 ls8 ws9">core code to make graphs<span class="ls6 wsa"> and flow-charts and can be used as a toy-model </span></div><div class="t m0 x2 h3 ye ff2 fs1 fc1 sc0 ls7 wsb">for a more elaborate control or, if <span class="ls6 ws6">you wish, to help you understand the </span></div><div class="t m0 x2 h3 yf ff2 fs1 fc1 sc0 ls6 wsa">full version. </div><div class="t m0 x2 h3 y10 ff2 fs1 fc1 sc0 ls1 ws1"> </div><div class="t m0 x2 h3 y11 ff2 fs1 fc1 sc0 ls1 ws1"> </div><div class="t m0 x2 h3 y12 ff2 fs1 fc1 sc0 ls1 ws1"> </div><div class="t m0 x2 h5 y13 ff1 fs2 fc1 sc0 ls9 wsc">Author: </div><div class="t m0 x2 h6 y14 ff2 fs2 fc1 sc0 lsa wsd">Francois M.Vanderseypen, </div><div class="t m0 x3 h6 y15 ff2 fs2 fc3 sc0 lsb ws1">Illumineo@users.sourceforge.net</div><div class="t m0 x2 h6 y16 ff2 fs2 fc1 sc0 lsc wse">The Netron Project, <span class="fc3 ws1">http://netron.sf.net</span></div><div class="t m0 x2 h3 y17 ff2 fs1 fc1 sc0 ls1 ws1"> </div><div class="t m0 x2 h3 y18 ff2 fs1 fc1 sc0 ls1 ws1"> </div><div class="t m0 x2 h6 y19 ff2 fs2 fc1 sc0 lsd wsf">Monday, 10 January 2005 </div><a class="l" rel='nofollow' onclick='return false;'><div class="d m1"></div></a><a class="l" rel='nofollow' onclick='return false;'><div class="d m1"></div></a></div><div class="pi" data-data='{"ctm":[1.611639,0.000000,0.000000,1.611639,0.000000,0.000000]}'></div></div>
</body>
</html>
<div id="pf2" class="pf w0 h0" data-page-no="2"><div class="pc pc2 w0 h0"><img class="bi x0 y0 w1 h1" alt="" src="https://static.pudn.com/prod/directory_preview_static/626db5f140256a40ce6b1b50/bg2.jpg"><div class="t m0 x2 h3 y1a ff2 fs1 fc1 sc0 lse ws10">Diagramming for dummies </div><div class="t m0 x2 h3 y1b ff2 fs1 fc1 sc0 lsf ws11"> <span class="_ _0"> </span>- 2 - </div></div><div class="pi" data-data='{"ctm":[1.611639,0.000000,0.000000,1.611639,0.000000,0.000000]}'></div></div>
<div id="pf3" class="pf w0 h0" data-page-no="3"><div class="pc pc3 w0 h0"><img class="bi x0 y0 w1 h1" alt="" src="https://static.pudn.com/prod/directory_preview_static/626db5f140256a40ce6b1b50/bg3.jpg"><div class="t m0 x2 h3 y1a ff2 fs1 fc1 sc0 lse ws10">Diagramming for dummies </div><div class="t m0 x2 h4 y1c ff1 fs1 fc2 sc0 ls10 ws1">Introduction </div><div class="t m0 x2 h3 y1d ff2 fs1 fc1 sc0 ls1 ws1"> </div><div class="t m0 x2 h3 y1e ff2 fs1 fc1 sc0 ls1 ws1"> </div><div class="t m0 x2 h3 y1f ff2 fs1 fc1 sc0 ls5 ws12">Diagramming data can help you underst<span class="lsf ws11">and this data, look at it from a </span></div><div class="t m0 x2 h3 y20 ff2 fs1 fc1 sc0 ls8 ws13">different perspective and gain insight.<span class="ls11 ws14"> Think of Microsoft’s BizTalk, Query </span></div><div class="t m0 x2 h3 y21 ff2 fs1 fc1 sc0 ls12 ws15">Analyzer, Data Transformation Service<span class="ls8 ws3">s Designer and so on. Diagrams are </span></div><div class="t m0 x2 h3 y22 ff2 fs1 fc1 sc0 lsf ws11">being used in many ways and for many things, from flow-charting to </div><div class="t m0 x2 h3 y23 ff2 fs1 fc1 sc0 lsf wsa">programming, from network charting to<span class="ws11"> real-time non-linear programming </span></div><div class="t m0 x2 h3 y24 ff2 fs1 fc1 sc0 ls8 ws13">in animations, from GSM technology <span class="ls7 ws8">to GPRS positioning, from simple </span></div><div class="t m0 x2 h3 y25 ff2 fs1 fc1 sc0 ls2 ws16">hierarchies to highly complex academ<span class="ls8 ws13">ic problems, graphs and diagrams </span></div><div class="t m0 x2 h3 y26 ff2 fs1 fc1 sc0 ls2 ws16">are everywhere. Over the past ye<span class="ls13 ws3">ars topics like mind-mapping ([9]), </span></div><div class="t m0 x2 h3 y27 ff2 fs1 fc1 sc0 ls8 ws17">small-world phenomena (six degrees of<span class="ls3 ws18"> freedom [10]) or ontologies (the </span></div><div class="t m0 x2 h3 y28 ff2 fs1 fc1 sc0 ls6 wsa">semantic web [8]) have become popu<span class="ws6">lar and are related to diagramming </span></div><div class="t m0 x2 h3 y29 ff2 fs1 fc1 sc0 ls2 ws16">and presenting data in effective, clea<span class="ws19">r ways. On another level graphs are </span></div><div class="t m0 x2 h3 y2a ff2 fs1 fc1 sc0 ls13 ws1a">being used to program and track bugs, <span class="ls1 ws1b">either to clip away technicalities, </span></div><div class="t m0 x2 h3 y2b ff2 fs1 fc1 sc0 ls6 wsa">to maintain complexity to a certain <span class="ls1 ws1c">level or because it simply allows a </span></div><div class="t m0 x2 h3 y2c ff2 fs1 fc1 sc0 ls8 ws13">bigger audience to develop things (c<span class="ls12 ws15">fr. The DTS designer in SQL Server, </span></div><div class="t m0 x2 h3 y2d ff2 fs1 fc1 sc0 ls1 ws1c">for example). </div><div class="t m0 x2 h3 y2e ff2 fs1 fc1 sc0 ls1 ws1"> </div><div class="t m0 x2 h3 y2f ff2 fs1 fc1 sc0 ls7 ws8">Before .Net came along diagramming was solely reserved to the C++ </div><div class="t m0 x2 h3 y30 ff2 fs1 fc1 sc0 lsf ws11">community, it’s hard to imagine a <span class="ls8 ws5">simple way to write a diagramming </span></div><div class="t m0 x2 h3 y31 ff2 fs1 fc1 sc0 ls1 ws5">control in Visual Basic 6. In this .Net<span class="ls12 ws1d"> era it has become (almost) a piece of </span></div><div class="t m0 x2 h3 y32 ff2 fs1 fc1 sc0 ls7 ws1e">cake to write a diagramming control.<span class="ls1 ws1c"> To demonstrate this statement the </span></div><div class="t m0 x2 h3 y33 ff2 fs1 fc1 sc0 ls8 ws13">following article introduces a simple <span class="lsf ws11">control which allows you to create </span></div><div class="t m0 x2 h3 y34 ff2 fs1 fc1 sc0 ls1 ws1c">interactive flow-charts and graphs. More precisely, it allows you to: </div><div class="t m0 x4 h3 y35 ff3 fs1 fc1 sc0 ls1 ws1">•<span class="ff4"> <span class="_ _1"> </span><span class="ff2 ls7 ws8">create flow-charts; adding shapes<span class="ls6 wsa"> and interactively connect them </span></span></span></div><div class="t m0 x5 h3 y36 ff2 fs1 fc1 sc0 ls14 ws16">(though it’s allowed to have fr<span class="lsf ws11">eely floating conne<span class="_ _2"></span>ction, i.e. </span></div><div class="t m0 x5 h3 y37 ff2 fs1 fc1 sc0 lsf ws11">unattached to a shape) </div><div class="t m0 x4 h3 y38 ff3 fs1 fc1 sc0 ls1 ws1">•<span class="ff4"> <span class="_ _1"> </span><span class="ff2 ls3 ws18">extend with ease the collection of<span class="lsf ws11"> available shapes and connections </span></span></span></div><div class="t m0 x4 h3 y39 ff3 fs1 fc1 sc0 ls1 ws1">•<span class="ff4"> <span class="_ _1"> </span><span class="ff2 ls8 ws13">change properties of the graph ca<span class="ls13 ws10">nvas and diagram object at run-</span></span></span></div><div class="t m0 x5 h3 y3a ff2 fs1 fc1 sc0 ls8 ws13">time by means of the usual proper<span class="ls12 ws1f">ty grid (aka ‘property browser’) </span></div><div class="t m0 x4 h3 y3b ff3 fs1 fc1 sc0 ls1 ws1">•<span class="ff4"> <span class="_ _1"> </span><span class="ff2 ls3 ws18">learn how easy it is to develop GDI+ user-controls </span></span></div><div class="t m0 x2 h3 y3c ff2 fs1 fc1 sc0 ls1 ws1"> </div><div class="t m0 x2 h3 y3d ff2 fs1 fc1 sc0 lsf ws11">The control does not contain, ho<span class="ls1 ws1c">wever, advanced features like: </span></div><div class="t m0 x4 h3 y3e ff3 fs1 fc1 sc0 ls1 ws1">•<span class="ff4"> <span class="_ _1"> </span><span class="ff2 ls8 ws13">printing and saving diagrams (serialization) </span></span></div><div class="t m0 x4 h3 y3f ff3 fs1 fc1 sc0 ls1 ws1">•<span class="ff4"> <span class="_ _1"> </span><span class="ff2 ls5 ws4">graph layout </span></span></div><div class="t m0 x4 h3 y40 ff3 fs1 fc1 sc0 ls1 ws1">•<span class="ff4"> <span class="_ _1"> </span><span class="ff2 ls5">drag-and-drop </span></span></div><div class="t m0 x4 h3 y41 ff3 fs1 fc1 sc0 ls1 ws1">•<span class="ff4"> <span class="_ _1"> </span><span class="ff2 ls6 wsa">scrolling or constraining diagrams </span></span></div><div class="t m0 x4 h3 y42 ff3 fs1 fc1 sc0 ls1 ws1">•<span class="ff4"> <span class="_ _1"> </span><span class="ff2 ls14 ws20">grid and grid-snapping </span></span></div><div class="t m0 x4 h3 y43 ff3 fs1 fc1 sc0 ls1 ws1">•<span class="ff4"> <span class="_ _1"> </span><span class="ff2 ls7 ws8">zoom-unzoom diagrams </span></span></div><div class="t m0 x4 h3 y44 ff3 fs1 fc1 sc0 ls1 ws1">•<span class="ff4"> <span class="_ _1"> </span><span class="ff2 lsf ws21">a document object model of the diagram </span></span></div><div class="t m0 x4 h3 y45 ff3 fs1 fc1 sc0 ls1 ws1">•<span class="ff4"> <span class="_ _1"> </span><span class="ff2 ls8 ws13">selecting multiple diagram objects (the so-called ‘marching ants’ </span></span></div><div class="t m0 x5 h3 y46 ff2 fs1 fc1 sc0 ls1 ws1b">rectangle to select multiple objects) </div><div class="t m0 x2 h3 y47 ff2 fs1 fc1 sc0 ls1 ws1"> </div><div class="t m0 x2 h3 y48 ff2 fs1 fc1 sc0 ls2 ws1b">Some of these features, like drag-a<span class="ls8 ws13">nd-drop or printing, are easy to </span></div><div class="t m0 x2 h3 y49 ff2 fs1 fc1 sc0 ls8 ws13">implement and you are encouraged to find out for yourself. Serialization </div><div class="t m0 x2 h3 y4a ff2 fs1 fc1 sc0 ls7 ws8">or graph layout algorithms are less <span class="ls6 wsa">evident. This control is, in fact, a </span></div><div class="t m0 x2 h3 y4b ff2 fs1 fc1 sc0 ls2 ws16">lightweight version of the <span class="ff1 ls10 ws17">Netron g<span class="_ _3"></span>raph library </span><span class="ls3 ws18">([1]). The Netron library </span></div><div class="t m0 x2 h3 y1b ff2 fs1 fc1 sc0 lsf ws11"> <span class="_ _0"> </span>- 3 - </div></div><div class="pi" data-data='{"ctm":[1.611639,0.000000,0.000000,1.611639,0.000000,0.000000]}'></div></div>
LightUI
