00001 <?php
00002 require_once( "header.php" )
00003 ?>
00004 <div id="content">
00005 <div class="post">
00006 <h2 class="title"><a href="#Diagrams" name="Diagrams">Diagrams</a></h2>
00007 <p class="meta">
00008 <span class="subtopic">Why Diagrams?</span>
00009 <span class="topic">Diagrams</span>
00010 </p>
00011 <div style="clear: both;"> </div>
00012 <div class="entry">
00013 <p>
00014 The UML - <a href="http://en.wikipedia.org/wiki/Unified_Modelling_Language">Unified Modelling Language</a> -
00015 Diagrams are the most standarts and intuitives ways
00016 to describe the operation of a project.
00017 The <a href="http://en.wikipedia.org/wiki/Sequence_diagram">Sequence Diagram</a>,
00018 for example, it is one excellent way to understand a <strong>code execution</strong>.
00019 The <a href="http://en.wikipedia.org/wiki/Class_Diagram">Class Diagram</a>,
00020 another way, it is a better one to show what classes are related, their attributes and depencency.
00021 </p>
00022 <p>
00023 The <a href="http://en.wikipedia.org/wiki/BPMN">BPMN</a> - despide not be a UML Diagram,
00024 but much like the <a href="http://en.wikipedia.org/wiki/Activity_diagram">UML Activity Diagrams</a>
00025 it become the enterprise
00026 standart one of modeling process. The Database Modeling using the <a href="#">Entity-Relationship Model</a>
00027 </p>
00028 <p>
00029 All this diagrams, used it in the pre-project phase are very common to describe the excepted behavior
00030 from some software. From the sequence diagram it is possible to developer test diagram,
00031 as check if all the features used on it was as described into the planning phase
00032 as the use cases, for example.
00033 </p>
00034 </div>
00035 <p class="meta">
00036 <span class="subtopic">Diagramas Weaknesses</span>
00037 <span class="topic">Diagrams</span>
00038 </p>
00039 <div style="clear: both;"> </div>
00040 <div class="entry">
00041 <p>
00042 When the diagram it is used to describe the features into the code level, as the
00043 interaction of objects, using methods, it is possible to plan how the classes will be. But,
00044 as the code development evolves, been caused by the analysis fail or by requirement change,
00045 the diagrams will losing the link with the reality losing consequently the descriptive function
00046 to one analysis history function.
00047 </p>
00048 <p>
00049 Also, to require the existence of one diagram to each test methods of some project will bring
00050 a huge spent of time, into it's creation as is in the maintenance. This is because <strong>each change
00051 of some method name or attribute name will require a change into all diagrams what involve it</strong>.
00052 </p>
00053 </div>
00054 <p class="meta">
00055 <span class="subtopic">Tools Weaknesses</span>
00056 <span class="topic">Diagrams</span>
00057 </p>
00058 <div style="clear: both;"> </div>
00059 <div class="entry">
00060 <p>
00061 When the Diagram it is created in the planing moment. It should be possible to created it without the
00062 code need. Many tools are able to create sequence diagrams but big part of them are not able to keep on sync all
00063 the diagrams created to the team members, most of then are monoplataform,
00064 not colaborative, without history of changes, close format file, etc.
00065 </p>
00066 <p>
00067 In addition all design changes must be replicated in all the diagrams of the project and for all team members.
00068 Therefore, keep all update subtopic diagrams will become an increasingly expensive activity until it becomes unfeasible.
00069 The diagrams then become mere representations of how the project was originally designed without contemplating
00070 the continuous modifications and losing a lot of utility to enable the understanding of the current version of
00071 the project without the need to consult the source code.
00072 </p>
00073 </div>
00074 </div>
00075 <div class="post" >
00076 <h2 class="title"><a href="#Code to Diagram Propose" name="Code to Diagram Propose" >Code to Diagram Proposal</a></h2>
00077 <p class="meta">
00078 <span class="subtopic">Introduction</span>
00079 <span class="topic">Code to Diagram Proposal</span>
00080 </p>
00081 <div style="clear: both;"> </div>
00082 <div>
00083 <div class="entry">
00084 <p>
00085 This application proposal it is to provide ways to create diagrams based on PHP code execution or by web tools or
00086 based on XML files / API making possible convert the result from each one tool to another.
00087 </p>
00088 </div>
00089 <canvas id="abc">
00090 </canvas>
00091 <div style="float:left; width: 35%; text-align: justify">
00092 <p>
00093 So, external tools can create the XML Files what can be converted into diagrams and edited. The diagram can be created by some API call. PHP Code executions can
00094 create XML files of diagrams what can be export to anothers applications. Diagrams can be created into the web
00095 application exported to XML file what can be be read by some external application what can create code, for example.
00096 </p>
00097 <p >
00098 In addition all design changes will be automatically replicated in all the diagrams of some project and for all team members.
00099 Moreover, each change will be keeped into history, what can provide informations of who, when and why some change had to be done.
00100 </p>
00101 <p>
00102 When the implementation provided in the diagrams, become a reality, a new diagram can be formed from the execution of that code. This new diagram will remain faithful to the reality of running the code, contemplating your changes.
00103 </p>
00104 </div>
00105 <script type="text/javascript" charset="utf-8">
00106 var intWidth = Math.round( document.body.clientWidth / 3 );
00107 var intHeight = Math.round( intWidth * 1.15 );
00108 var dblProportion = intWidth / 400;
00109 var objBox = new window.autoload.newCanvasBoxStateDiagram( "abc" , intWidth , intHeight );
00110 window.box = objBox;
00111 function addStateElement( color )
00112 {
00113 var objStateElement = new window.autoload.newCanvasBoxState();
00114 objStateElement.objBehavior = new window.autoload.newCanvasBoxMagneticBehavior( objStateElement );
00115 objStateElement.x = 0;//Math.random() * window.box.width ;
00116 objStateElement.y = 0;//Math.random() * window.box.height ;
00117 objStateElement.fixed = true;
00118 objStateElement.fillColor = "orange";
00119 objStateElement.fixedColor = "orange";
00120 objStateElement.drawFixed( true );
00121 if( color )
00122 {
00123 objStateElement.fillColor = color;
00124 objStateElement.fixedColor = color;
00125 objStateElement.defaultColor = color;
00126 }
00127 window.box.addElement( objStateElement );
00128 return objStateElement;
00129 }
00130 function addLine( objFrom , objTo , color )
00131 {
00132 var objLine = new window.autoload.newCanvasBoxDependency( objFrom , objTo );
00133 objLine.objBehavior = new window.autoload.newCanvasBoxDefaultConnectorBehavior( objLine );
00134 //objLine.objBehavior = new window.autoload.newCanvasBoxDefaultConnectorBehavior( objLine );
00135 objLine.x = ( objFrom.x + objTo.x ) / 2
00136 objLine.y = ( objFrom.y + objTo.y ) / 2
00137 if( color )
00138 {
00139 objLine.color = color;
00140 }
00141 window.box.addElement( objLine );
00142 return objLine;
00143 }
00144 var objFactoryFromXml = addStateElement( );
00145 objFactoryFromXml.strStateName = "Factory From Xml";
00146 objFactoryFromXml.x = 70 * dblProportion;
00147 objFactoryFromXml.y = 80 * dblProportion;
00148
00149 var objFactoryFromCode = addStateElement( );
00150 objFactoryFromCode.strStateName = "Factory From Code";
00151 objFactoryFromCode.x = 330 * dblProportion;
00152 objFactoryFromCode.y = 80 * dblProportion;
00153
00154 var objDiagram = addStateElement( "rgb(200,200,230)" );
00155 objDiagram.strStateName = "Uml Diagram";
00156 objDiagram.x = 200 * dblProportion;
00157 objDiagram.y = 200 * dblProportion;
00158
00159 var objPrinterHtml = addStateElement( );
00160 objPrinterHtml.strStateName = "Printer Html";
00161 objPrinterHtml.x = 100 * dblProportion;
00162 objPrinterHtml.y = 350 * dblProportion;
00163
00164 var objPrinterXml = addStateElement( );
00165 objPrinterXml.strStateName = "Printer Xml";
00166 objPrinterXml.x = 200 * dblProportion;
00167 objPrinterXml.y = 400 * dblProportion;
00168
00169 var objPrinterPng = addStateElement( );
00170 objPrinterPng.strStateName = "Printer Png";
00171 objPrinterPng.x = 300 * dblProportion;
00172 objPrinterPng.y = 350 * dblProportion;
00173
00174 var objLine;
00175 objLine = addLine( objFactoryFromXml , objDiagram );
00176 objLine = addLine( objFactoryFromCode , objDiagram );
00177 objLine = addLine( objDiagram , objPrinterHtml );
00178 objLine = addLine( objDiagram , objPrinterXml );
00179 objLine = addLine( objDiagram , objPrinterPng );
00180
00181 window.objLine = objLine;
00182 </script>
00183 </div>
00184 <p class="meta">
00185 <span class="subtopic">Code Instrumentation</span>
00186 <span class="topic">Code to Diagram Proposal</span>
00187 </p>
00188 <div style="clear: both;"> </div>
00189 <div class="entry">
00190 <p>
00191 Just appending one line into your PHP bootstrap file(s) the execution will be sniffer by the
00192 <a href="codeInstrumentation.php">Code to Diagram - Code Instrumentation Application</a> what will log each method
00193 call and return, each function call and return and convert this log into a XML what can be
00194 see as a Sequence Diagram or Class Diagram using ours web editors of diagrams.
00195 </p>
00196 </div>
00197 <p class="meta">
00198 <span class="subtopic">Web Diagram Editor</span>
00199 <span class="topic">Code to Diagram Proposal</span>
00200 </p>
00201 <div style="clear: both;"> </div>
00202 <div class="entry">
00203 <p>
00204 A web application to create and edit UML Diagrams what can read the XML files generated by the
00205 code instrumentation application and save the diagrams into others XML files. The diagram can
00206 be export as image. This web tool can be called by some external application what can send the
00207 diagram description into a XML form into the post data.
00208 </p>
00209 </div>
00210 </div>
00211 <div class="post">
00212 <h2 class="title"><a href="#">Code to Diagram Tool Kit</a></h2>
00213 <p class="meta">
00214 <span class="subtopic"><a href="codeInstrumentation.php">Code Instrumentation Tool</a></span>
00215 <span class="topic">Code to Diagram Tool Kit</span>
00216 </p>
00217 <div style="clear: both;"> </div>
00218 <div class="entry">
00219 <p>
00220 This tool provides the creation of the XML of diagrams based on some
00221 code execution using code instrumentation or XDebug
00222 log analisys.
00223 </p>
00224 </div>
00225 <p class="meta">
00226 <span class="subtopic"><a href="sequenceDiagram.php" >Sequence Diagram Web Editor Tool</a></span>
00227 <span class="topic">Code to Diagram Tool Kit</span>
00228 </p>
00229 <div style="clear: both;"> </div>
00230 <div class="entry">
00231 <img src="./images/thumb_mvc_codetodiagram.jpg" class="floatimage" alt="code to diagram sequence diagram thumbnail"/>
00232 <div>
00233 <p>
00234 This tool provides the creation and edition of sequence diagrams
00235 what can read and write the XMLs files generates by the code instrumentation tool.
00236 </p>
00237 <p>
00238 Diagrams can be created based on data received by post from external applications.
00239 The diagrams can be created and changed into a drag drop application created in javascript / php
00240 what can exported the diagrams as images.
00241 </p>
00242 <p>
00243 Future implementations will bring to this web tool the feature of history, web syncronization and
00244 enterprise application using the google wave and google applications.
00245 </p>
00246 </div>
00247 </div>
00248 <p class="meta">
00249 <span class="subtopic"><a href="classDiagram.php">Class Diagram Web Editor Tool</a></span>
00250 <span class="topic">Code to Diagram Tool Kit</span>
00251 </p>
00252 <div style="clear: both;"> </div>
00253 <div class="entry">
00254 <img src="./images/thumb_class_diagram.jpg" class="floatimage" alt="code to diagram class diagram thumbnail"/>
00255 <div>
00256 <p>
00257 This tool provides the creation and edition of class diagrams
00258 what can read and write the XMLs files generates by the code instrumentation tool.
00259 </p>
00260 <p>
00261 Diagrams can be created based on data received by post from external applications.
00262 The diagrams can be created and changed into a drag drop application created in javascript / php
00263 what can exported the diagrams as images.
00264 </p>
00265 <p>
00266 Future implementations will bring to this web tool the feature of history, web syncronization and
00267 enterprise application using the google wave and google applications.
00268 </p>
00269 </div>
00270 </div>
00271 </div>
00272 <div style="clear: both;"> </div>
00273 <div class="post">
00274 <h2 class="title"><a href="#">Limitations</a></h2>
00275 <p class="meta">
00276 <span class="subtopic">Internet Explorer Output</span>
00277 <span class="topic">Limitations</span>
00278 </p>
00279 <div style="clear: both;"> </div>
00280 <div class="entry">
00281 <p>
00282 While still not fully working on Internet Explorer because the
00283 <a href="http://www.findmebyip.com/litmus#target-selector">Internet Explorer Problems</a>,
00284 the generator already makes life easier for those
00285 responsible in maintaining this kind of diagrams.
00286 We welcome anyone with the patience and desire to make the
00287 CSS changes need for it to work on Internet Explorer but the
00288 diagram web tool is been rewrite into canvas tag
00289 can make the Internet Explorer compatibility more hard to do.
00290 </p>
00291 </div>
00292 <p class="meta">
00293 <span class="subtopic">Under Development</span>
00294 <span class="topic">Limitations</span>
00295 </p>
00296 <div style="clear: both;"> </div>
00297 <div class="entry">
00298 <p>
00299 Also, fully compliance with UML 2.0 is still under development.
00300 Anyone interested in working in these fields is more than welcome to join the team.
00301 And if you have a patch on add-on to send, feel free to do so.
00302 Just send an e-mail to me <a href="mailto:thiago.henrique.mata@gmail.com">thiago.henrique.mata@gmail.com</a> .
00303 And remember, this is free software, in development, and as such, I can give you no warranty.
00304 Use it at your own risk. It's not for the faint of heart.
00305 Tag names can and should change. New tags can be add anytime. Stay tunned for more news.
00306 </p>
00307 <p>
00308 The web tools have been rewrited as canvas web tools that should bring some unstable versions
00309 and big changes into application code.
00310 </p>
00311 <p>
00312 The speed of development is slow mainly due to lack of investment in project.
00313 Case you think this project interesting and would like to see new features on it pretty soon,
00314 you can make a donation.
00315 </p>
00316 </div>
00317 </div>
00318 <div style="clear: both;"> </div>
00319 </div>
00320 <?php
00321 require_once( "footer.php" );
00322 ?>
