html/dia_guide.php

   1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
   2 <html>
   3 <head>
   4   <title>PsN :: PsN Developer's Guide to Dia :: 1</title>
   5 <!--Adobe(R) LiveMotion(TM) 1.0 Generated JavaScript. Please do not edit. -->
   6   <script>
   7 <!--
   8 function newImage(arg) {
   9 if (document.images) {
  10 rslt = new Image();
  11 rslt.src = arg;
  12 return rslt;
  13 }
  14 }
  15 ImageArray = new Array;
  16 var preloadFlag = false;
  17 function preloadImages() {
  18 if (document.images) {
  19 ImageArray[ImageArray.length++] = newImage(/* OWNER('object', 'dflt') *//*URL*/'images/indexhome.jpg');
  20 ImageArray[ImageArray.length++] = newImage(/* OWNER('object', 'movr') *//*URL*/'images/indexhomeov.jpg');
  21 ImageArray[ImageArray.length++] = newImage(/* OWNER('object1', 'dflt') *//*URL*/'images/indexdocumentation.jpg');
  22 ImageArray[ImageArray.length++] = newImage(/* OWNER('object1', 'movr') *//*URL*/'images/indexdocumentationov.jpg');
  23 ImageArray[ImageArray.length++] = newImage(/* OWNER('object2', 'dflt') *//*URL*/'images/indexdownload.jpg');
  24 ImageArray[ImageArray.length++] = newImage(/* OWNER('object2', 'movr') *//*URL*/'images/indexdownloadov.jpg');
  25 ImageArray[ImageArray.length++] = newImage(/* OWNER('object3', 'dflt') *//*URL*/'images/indexbuglist.jpg');
  26 ImageArray[ImageArray.length++] = newImage(/* OWNER('object3', 'movr') *//*URL*/'images/indexbuglistov.jpg');
  27 ImageArray[ImageArray.length++] = newImage(/* OWNER('object4', 'dflt') *//*URL*/'images/indexmailing_list.jpg');
  28 ImageArray[ImageArray.length++] = newImage(/* OWNER('object4', 'movr') *//*URL*/'images/indexmailing_listov.jpg');
  29 preloadFlag = true;
  30 }
  31 }
  32 function changeImages() {
  33 if (document.images && (preloadFlag == true)) {
  34 for (var i=0; i<changeImages.arguments.length; i+=2) {
  35 document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
  36 }
  37 }
  38 }
  39 // -->
  40   </script><!-- End generated JavaScript. -->
  41   <meta http-equiv="Content-Type"
  42  content="text/html; charset=ISO-8859-1">
  43   <style type="text/css">
  44 <!--
  45 body,td,th {
  46 font-family: Helvetica, Arial, serif;
  47 font-size: 12px;
  48 color: #000000;
  49 }
  50 body {
  51 margin-left: 6px;
  52 margin-top: 0px;
  53 margin-right: 0px;
  54 margin-bottom: 0px;
  55 background-image: url(gfx/bg.jpg);
  56 }
  57 .style1 {
  58 font-size: 36px;
  59 font-weight: bold;
  60 }
  61 .heading1 {
  62 font-size: 16px;
  63 font-weight: bold;
  64 color: #333399;
  65 margin-left: 40px;
  66 }
  67 a:link {
  68 color: #656D9C;
  69 text-decoration: none;
  70 }
  71 a:visited {
  72 color: #656D9C;
  73 text-decoration: none;
  74 }
  75 a:hover {
  76 color: #AF9D49;
  77 text-decoration: none;
  78 }
  79 a:active {
  80 color: #656D9C;
  81 text-decoration: none;
  82 }
  83 -->
  84   </style>
  85   <script language="JavaScript" type="text/JavaScript">
  86 <!--
  87 function MM_reloadPage(init) { //reloads the window if Nav4 resized
  88 if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
  89 document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  90 else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
  91 }
  92 MM_reloadPage(true);
  93 //-->
  94   </script>
  95   <meta content="Pontus Pihlgren" name="author">
  96 </head>
  97 <body onload="preloadImages();"
  98  style="background-color: rgb(255, 255, 255);">
  99 <!-- The table is not formatted nicely because some browsers cannot join images in table cells if there are any hard carriage returns in a TD. -->
 100 <div id="Layer1"
 101  style="position: absolute; left: 335px; top: 42px; width: 388px; height: 43px; z-index: 1; font-size: x-small;">
 102 <div class="style1" align="right">PsN
 103 Developer's Guide to Dia<br>
 104 </div>
 105 </div>
 106 <div id="Layer2"
 107  style="position: absolute; left: 226px; width: 497px; z-index: 2; top: 188px; height: 1536px;">
 108 <div style="text-align: center;"></div>
 109 <div align="justify">
 110 <div style="text-align: center;">
 111 <table style="text-align: left; width: 100%;" border="0" cellpadding="2"
 112  cellspacing="2">
 113   <tbody>
 114     <tr>
 115       <td style="vertical-align: top; width: 33%; text-align: center;"></td>
 116       <td style="vertical-align: top; width: 33%; text-align: center;"><a
 117  href="dia_index.php">Dia
 118 Guide Index</a></td>
 119       <td style="vertical-align: top; width: 33%; text-align: center;"><a
 120  href="dia_guide_part2.php">Page
 121 2 &gt;&gt;</a></td>
 122     </tr>
 123   </tbody>
 124 </table>
 125 </div>
 126 <h3><span class="heading1">Introduction</span>
 127 <br>
 128 </h3>
 129 <p>Dia is a program for drawing
 130 diagrams. What makes it interesting is its support for UML diagrams.
 131 This is a quick guide to define a class in UML, add some members and
 132 methods to it. It will also explains some quirks that we use to ease
 133 working with Dia and Dia2Code. This guide is illustrated so that you
 134 easily can follow the steps and create your own files. But wherever we
 135 ask you to create a file, we also provide a link to where you can
 136 download that file so you can comfortably read the guide without having
 137 to do much work.</p>
 138 <h3><span class="heading1">Creating a Dia diagram</span></h3>
 139 <table style="text-align: left; width: 100%;" border="0" cellpadding="2"
 140  cellspacing="2">
 141   <tbody>
 142     <tr>
 143       <td style="vertical-align: top; width: 50%;">
 144       <p> When you first start Dia
 145 you will see a welcome screen and then the main window. Possibly you
 146 will also have an empty diagram window, otherwise create one with the
 147 "new" option under the file menu. </p>
 148       <p> Next you should select
 149 the UML shape library from the drop down list labeled "UML" in the
 150 image to the right.</p>
 151       </td>
 152       <td><img src="gfx/dia_main.jpg" alt="Dia toolbar" width="300" height="420"></td>
 153     </tr>
 154   </tbody>
 155 </table>
 156 <h3><span class="heading1">Creating and Modifying a Class</span></h3>
 157 <br>
 158 <table style="text-align: left; width: 100%; top: 445px; height: 994px;"
 159  border="0" cellpadding="2" cellspacing="2">
 160   <tbody>
 161     <tr>
 162       <td style="vertical-align: top;"><div align="center"><img src="gfx/dia_class_fresh.jpg" alt="Creating a class" width="450" height="409" vspace="10"></div></td>
 163       </tr>
 164     <tr>
 165       <td style="vertical-align: top;"><p>Then select the class shape from
 166   the shape library and place it
 167   somewhere in the diagram window, as you se here on the left.
 168   Double click on the class, or right click and select "objects &gt;"
 169   and then "properties..." .</p></td>
 170       </tr>
 171     <tr>
 172       <td style="vertical-align: top;"><div align="center"><img src="gfx/dia_class_prop.jpg" alt="Class tab" width="450" height="514" vspace="10"></div></td>
 173       </tr>
 174     <tr>
 175       <td style="vertical-align: top;">You will now see this property window. Under the first tab you can enter the name of the class and change some options that affect how the class will look in the diagram. Nothing but the name affects the code generated by Dia2Code. Set the name to "Example"(without the quotes) and go to the attributes tab.</td>
 176       </tr>
 177     <tr>
 178       <td style="vertical-align: top;"><div align="center"><img src="gfx/dia_attr_prop.jpg" alt="Attributes tab" width="450" height="514" vspace="10"></div></td>
 179       </tr>
 180     <tr>
 181       <td style="vertical-align: top;">In this tab you can add
 182 attributes, or members, to the class. Click on
 183 new to add a member, write "member_one" in the name field, give "scalar
 184 integer" as type and set "1" as default value. (Also here, write
 185 everything without quotes). You can also specify the scope of the
 186 member (private, public, etc.), but it not affect the code generated.
 187 (This might change in a new version of Dia2Code). Now go to the
 188 operations tab.</td>
 189       </tr>
 190     <tr>
 191       <td style="vertical-align: top;"><div align="center"><img src="gfx/dia_oper_prop.jpg" alt="Operations tab" width="450" height="514" vspace="10"></div></td>
 192       </tr>
 193     <tr>
 194       <td style="vertical-align: top;"><div align="justify">
 195         <p>In the operations tab you add
 196     methods to the class. Click on new a
 197     method, type "method_one" as its name and click new next to the
 198     parameters field to add an argument to the method. Call the argument
 199 "parm_one" with type "scalar integer", default value "1" and, this is
 200     important, set its direction to "in". Create another argument, call it
 201 "return_value" with type "array of integers" and set its direction to
 202     out. </p>
 203         <p>You are now done with your first class, the "templates" tab is ignored,
 204         so you can use it, but it has no meaning to Dia2Code. Click Ok.</p>
 205       </div>        </td>
 206       </tr>
 207     <tr>
 208       <td style="vertical-align: top;"><div align="center"><img src="gfx/dia_class_fin.jpg" alt="Finished class" width="450" height="409" vspace="10"></div></td>
 209       </tr>
 210     <tr>
 211       <td style="vertical-align: top;">Above you see the
 212 finished class. You can now save this as a
 213 Dia file and run Dia2Code on it. Select save under the file menu and
 214 call the file <a href="examples/example.dia">example.dia</a>.
 215 Go to the next part and read how to make code out of it.</td>
 216       </tr>
 217   </tbody>
 218 </table>
 219 </div>
 220 <div style="text-align: center;">
 221 <p align="justify">&nbsp;
 222 </p>
 223 </div>
 224 <table style="text-align: left; width: 100%;" border="0" cellpadding="2"
 225  cellspacing="2">
 226   <tbody>
 227     <tr>
 228       <td style="vertical-align: top; width: 33%; text-align: center;"></td>
 229       <td style="vertical-align: top; width: 33%; text-align: center;"><a
 230  href="dia_index.php">Dia
 231 Guide Index</a></td>
 232       <td style="vertical-align: top; width: 33%; text-align: center;"><a
 233  href="dia_guide_part2.php">Page
 234 2 &gt;&gt;</a></td>
 235     </tr>
 236   </tbody>
 237 </table>
 238 </div>
 239 <table border="0" cellpadding="0" cellspacing="0" width="780">
 240   <tbody>
 241     <tr>
 242       <td height="600" width="780">
 243       <table border="0" cellpadding="0" cellspacing="0" width="780">
 244         <tbody>
 245           <tr>
 246             <td colspan="7" height="201" width="780"><img
 247  src="images/indexpane1_1_.jpg" name="" alt="" border="0" height="201"
 248  width="780"></td>
 249           </tr>
 250           <tr>
 251             <td height="46" width="26"><img
 252  src="images/indexpane1_2_.jpg" name="" alt="" border="0" height="46"
 253  width="26"></td>
 254             <td height="46" width="73"><a href="index.php"
 255  onmouseover="changeImages(/*CMP*/ 'object', /*URL*/ 'images/indexhomeov.jpg'); return true;"
 256  onmouseout="changeImages(/*CMP*/ 'object', /*URL*/ 'images/indexhome.jpg'); return true;"><img
 257  src="images/indexhome.jpg" name="object" alt="Home" border="0"
 258  height="46" width="73"></a></td>
 259             <td height="46" width="11"><img
 260  src="images/indexpane3_2_.jpg" name="" alt="" border="0" height="46"
 261  width="11"></td>
 262             <td height="46" width="25"><img
 263  src="images/indexpane4_2_.jpg" name="" alt="" border="0" height="46"
 264  width="25"></td>
 265             <td height="46" width="15"><img
 266  src="images/indexpane5_2_.jpg" name="" alt="" border="0" height="46"
 267  width="15"></td>
 268             <td height="46" width="40"><img
 269  src="images/indexpane6_2_.jpg" name="" alt="" border="0" height="46"
 270  width="40"></td>
 271             <td height="46" width="590"><img
 272  src="images/indexpane7_2_.jpg" name="" alt="" border="0" height="46"
 273  width="590"></td>
 274           </tr>
 275           <tr>
 276             <td colspan="7" height="7" width="780"><img
 277  src="images/indexpane1_3_.jpg" name="" alt="" border="0" height="7"
 278  width="780"></td>
 279           </tr>
 280           <tr>
 281             <td height="46" width="26"><img
 282  src="images/indexpane1_4_.jpg" name="" alt="" border="0" height="46"
 283  width="26"></td>
 284             <td colspan="5" height="46" width="164"><a href="docs.php"
 285  onmouseover="changeImages(/*CMP*/ 'object1', /*URL*/ 'images/indexdocumentationov.jpg'); return true;"
 286  onmouseout="changeImages(/*CMP*/ 'object1', /*URL*/ 'images/indexdocumentation.jpg'); return true;"><img
 287  src="images/indexdocumentation.jpg" name="object1" alt="Documentation"
 288  border="0" height="46" width="164"></a></td>
 289             <td height="46" width="590"><img
 290  src="images/indexpane7_4_.jpg" name="" alt="" border="0" height="46"
 291  width="590"></td>
 292           </tr>
 293           <tr>
 294             <td colspan="7" height="7" width="780"><img
 295  src="images/indexpane1_5_.jpg" name="" alt="" border="0" height="7"
 296  width="780"></td>
 297           </tr>
 298           <tr>
 299             <td height="46" width="26"><img
 300  src="images/indexpane1_6_.jpg" name="" alt="" border="0" height="46"
 301  width="26"></td>
 302             <td colspan="3" height="46" width="109"><a
 303  href="download.php"
 304  onmouseover="changeImages(/*CMP*/ 'object2', /*URL*/ 'images/indexdownloadov.jpg'); return true;"
 305  onmouseout="changeImages(/*CMP*/ 'object2', /*URL*/ 'images/indexdownload.jpg'); return true;"><img
 306  src="images/indexdownload.jpg" name="object2" alt="Download" border="0"
 307  height="46" width="109"></a></td>
 308             <td colspan="3" height="46" width="645"><img
 309  src="images/indexpane5_6_.jpg" name="" alt="" border="0" height="46"
 310  width="645"></td>
 311           </tr>
 312           <tr>
 313             <td colspan="7" height="7" width="780"><img
 314  src="images/indexpane1_7_.jpg" name="" alt="" border="0" height="7"
 315  width="780"></td>
 316           </tr>
 317           <tr>
 318             <td height="46" width="26"><img
 319  src="images/indexpane1_8_.jpg" name="" alt="" border="0" height="46"
 320  width="26"></td>
 321             <td colspan="2" height="46" width="84"><a href="buglist.php"
 322  onmouseover="changeImages(/*CMP*/ 'object3', /*URL*/ 'images/indexbuglistov.jpg'); return true;"
 323  onmouseout="changeImages(/*CMP*/ 'object3', /*URL*/ 'images/indexbuglist.jpg'); return true;"><img
 324  src="images/indexbuglist.jpg" name="object3" alt="Buglist" border="0"
 325  height="46" width="84"></a></td>
 326             <td colspan="4" height="46" width="670"><img
 327  src="images/indexpane4_8_.jpg" name="" alt="" border="0" height="46"
 328  width="670"></td>
 329           </tr>
 330           <tr>
 331             <td colspan="7" height="7" width="780"><img
 332  src="images/indexpane1_9_.jpg" name="" alt="" border="0" height="7"
 333  width="780"></td>
 334           </tr>
 335           <tr>
 336             <td height="46" width="26"><img
 337  src="images/indexpane1_10_.jpg" name="" alt="" border="0" height="46"
 338  width="26"></td>
 339             <td colspan="4" height="46" width="124"><a href="list.php"
 340  onmouseover="changeImages(/*CMP*/ 'object4', /*URL*/ 'images/indexmailing_listov.jpg'); return true;"
 341  onmouseout="changeImages(/*CMP*/ 'object4', /*URL*/ 'images/indexmailing_list.jpg'); return true;"><img
 342  src="images/indexmailing_list.jpg" name="object4" alt="Mailing List"
 343  border="0" height="46" width="124"></a></td>
 344             <td colspan="2" height="46" width="630"><img
 345  src="images/indexpane6_10_.jpg" name="" alt="" border="0" height="46"
 346  width="630"></td>
 347           </tr>
 348           <tr>
 349             <td colspan="7" height="141" width="780"><img
 350  src="images/indexpane1_11_.jpg" name="" alt="" border="0" height="141"
 351  width="780"></td>
 352           </tr>
 353         </tbody>
 354       </table>
 355       </td>
 356     </tr>
 357     <tr>
 358       <td><img src="images/is_single_pixel_gif.gif" alt="" height="1"
 359  width="780"></td>
 360     </tr>
 361   </tbody>
 362 </table>
 363 <!--Adobe(R) LiveMotion(TM) DataMap1.0 DO NOT EDIT
 364 end DataMap -->
 365 </body>
 366 </html>