Helix SwarmHelix Swarm
Loading...

tutorial.html

  • //
  • guest/
  • christiane_renck/
  • mergequestjs/
  • main/
  • demos/
  • JointJS/
  • www/
  • tutorial.html #1
  • View
  • Commits
  • Open Download .zip Download (9 KB) 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  5. <meta property="fb:page_id" content="197406883610725" />
  6.  
  7. <script src="js/jquery.min.js" type="text/javascript"></script>
  8. <script src="build/joint.all.min.js" type="text/javascript"></script>
  9. <script src="http://yandex.st/highlightjs/5.16/highlight.min.js"></script>
  10. <script src="js/setup.js" type="text/javascript"></script>
  11.  
  12.  
  13. <link href="css/reset.css" type="text/css" rel="stylesheet" />
  14. <link href="css/grids.css" type="text/css" rel="stylesheet" />
  15. <link href="css/styles.css" media="screen, projection" type="text/css" rel="stylesheet" />
  16. <link rel="stylesheet" href="http://yandex.st/highlightjs/5.16/styles/sunburst.min.css" />
  17.  
  18. <title>Joint - JavaScript diagramming library.</title>
  19. </head>
  20.  
  21. <body>
  22.  
  23. <div id="header">
  24.   <a href="http://www.jointjs.com"><img class="logo" src="img/logo/logo_standalone.png" alt="JointJS logo"/></a>
  25.   <h1>JavaScript diagramming library</h1>
  26.   <div class="version"><span>0.4</span><img class="tag" src="img/tag.png" alt="JointJS"/></div>
  27.   <ul id="menu">
  28.     <li><a class="current" href="about.html">About</a></li>
  29.     <li><a href="download.html">Download</a></li>
  30.     <li><a href="demos.html">Demos</a></li>    
  31.     <li><a href="license.html">License</a></li>
  32.     <li><a href="tutorial.html">Quick tutorial</a></li>
  33.     <li><a href="api.html"><b>API Reference</b></a>
  34.     <li><a href="http://groups.google.com/group/jointjs">Discussion</a></li>
  35.   </ul>
  36.  
  37. </div>
  38.  
  39. <div class="main">
  40.   <div id="content">
  41.     <h1 class="subpage-header">Quick tutorial</h1>
  42. <hr/>
  43.  
  44. <p>
  45. This tutorial is probably your first touch with <em>JointJS</em> library. It shows you
  46. how to create a simple Finite State Machine diagram. At the end of this tutorial
  47. you can also find a popular "Hello world" program.
  48. </p>
  49. <h3>Getting started</h3>
  50.  
  51. <h4>Scripts:</h4>
  52. <ul>
  53.   <li><tt>raphael-min.js</tt>: <a href="http://raphaeljs.com">Raphaël</a> library,
  54.   provides cross browser abstract layer for rendering vector objects.</li>
  55.   <li><tt>joint.js</tt>: Joint library core.</li>
  56.   <li><tt>joint.dia.js</tt>: Joint diagramming library core, provides abstraction
  57.   for diagrams elements.
  58.   (necessary for diagram plugins, see below)</li>
  59.   <li><tt>joint.dia.fsa.js</tt>: Finite state machine diagram plugin.</li>
  60. </ul>
  61. <p><em>Example: </em>To create a Finite state machine diagram, put these scripts into your document's header:</p>
  62. <pre>
  63.     <code>
  64. &lt;script src="raphael-min.js" type="text/javascript"&gt;&lt;/script&gt;
  65. &lt;script src="joint.min.js" type="text/javascript"&gt;&lt;/script&gt;
  66. &lt;script src="joint.dia.min.js" type="text/javascript"&gt;&lt;/script&gt;
  67. &lt;script src="joint.dia.fsa.min.js" type="text/javascript"&gt;&lt;/script&gt;
  68.     </code>
  69. </pre>
  70. Or alternatively you can use the standalone package provided which includes both
  71. <tt>Joint</tt> and <tt>Joint.dia</tt> libraries, all plugins and Raphaël library, all in one file.
  72. <pre>
  73.     <code>
  74. &lt;script src="joint.all-min.js" type="text/javascript"&gt;&lt;/script&gt;
  75.     </code>
  76. </pre>
  77. <p>
  78. Then you have to create a holder for your diagram.
  79. </p>
  80. <pre>
  81.     <code>
  82. &lt;div id="myfsa"&gt;&lt;/div&gt;
  83.     </code>
  84. </pre>
  85.  
  86. <p>
  87. Once you have the holder created, you have to initialize diagram paper.
  88. </p>
  89. <pre>
  90.     <code>
  91. Joint.paper("myfsa", 1000, 200);  /*(id or HTMLElement, width, height)*/
  92.     </code>
  93. </pre>
  94.  
  95. <h4>Creating your first Finite State Machine diagram</h4>
  96. <p>Each kind of diagram is implemented as a separate plugin. 
  97. FSA plugin contains elements such as <tt>State</tt>, <tt>StartState</tt>, <tt>EndState</tt>
  98. and definition of the arrow suitable for FSA diagrams <tt>Joint.dia.fsa.arrow</tt>.
  99. Concrete elements are created using <tt>create</tt> method. This method takes as an argument object containing
  100. all necessary parameters for the element. (for list of all options, see FSA plugin API)</p>
  101. <pre>
  102.     <code>
  103. var s0 = fsa.StartState.create({ position: {x: 50, y: 50} });
  104. var se = fsa.EndState.create({ position: {x: 450, y: 150} });
  105. var s1 = fsa.State.create({ position: {x: 120, y: 120}, label: "state 1" });
  106. var s2 = fsa.State.create({ position: {x: 300, y: 50}, label: "state 2" });
  107.     </code>
  108. </pre>
  109.  
  110. <p>
  111. Joint library provides API for creating your own arrows which reside both connection
  112. ends. Usually, diagram plugins should provide arrows specific for diagrams they implement.
  113. Connections can register objects to which they can stick. You can also refine what
  114. connection end you want to stick to what object. For normal purposes (especially FSA
  115. diagrams) it is a good practice to create an array which holds all
  116. the diagram elements. Note the usage of <tt>registerForever()</tt> method. The difference
  117. between <tt>register()</tt> and <tt>registerForever</tt> is that the latter stores
  118. a reference to the array object provided as the only argument. That means that
  119. all elements added later to the array are registered as well.
  120. </p>
  121.  
  122. <pre>
  123.     <code>
  124. var all = [s0, s1, s2, se];
  125. s0.joint(s1, fsa.arrow).registerForever(all);
  126. s1.joint(s2, fsa.arrow).registerForever(all);
  127. s2.joint(se, fsa.arrow).registerForever(all);
  128.     </code>
  129. </pre>
  130.  
  131. <p>
  132. The final diagram is by default interactive. You can drag arrows, break connections and move states:
  133. </p>
  134.  
  135. <div style="border: 1px solid gray; background-color: white;" id="myfsa"></div>
  136. <script type="text/javascript">
  137. Joint.paper("myfsa", 1000, 200);  /*(id or HTMLElement, width, height)*/
  138. var fsa = Joint.dia.fsa;
  139.  
  140. var s0 = fsa.StartState.create({ position: {x: 50, y: 50} });
  141. var se = fsa.EndState.create({ position: {x: 450, y: 150} });
  142. var s1 = fsa.State.create({ position: {x: 120, y: 120}, label: "state 1" });
  143. var s2 = fsa.State.create({ position: {x: 300, y: 50}, label: "state 2" });
  144.  
  145. var all = [s0, s1, s2, se];
  146. s0.joint(s1, fsa.arrow).registerForever(all);
  147. s1.joint(s2, fsa.arrow).registerForever(all);
  148. s2.joint(se, fsa.arrow).registerForever(all);
  149. </script>
  150.  
  151. <h4>Hello world!</h4>
  152. <p>
  153. <em>Joint</em> library is independent of diagram plugins. It means that
  154. it can be used on its own for connecting vector objects created by
  155. Raphaël library. This is useful if you just want a functionality
  156. of connecting vector objects together. Connections as well as arrows
  157. and behavior is fully customizable. For more details, see Joint library
  158. API.
  159. </p>
  160. <pre>
  161.     <code>
  162. &lt;html&gt;
  163. &lt;head&gt;
  164. &lt;script type="text/javascript" src="raphael-min.js"&gt;&lt;/script&gt;
  165. &lt;script type="text/javascript" src="joint.min.js"&gt;&lt;/script&gt;
  166. &lt;/head&gt;
  167. &lt;body&gt;
  168. &lt;div id="hello_world"&gt;&lt;/&gt;
  169. &lt;script type="text/javascript"&gt;
  170. var r = Raphael("hello_world", 1000, 50),
  171.     c1 = r.circle(50, 20, 10),
  172.     c2 = r.circle(250, 25, 10);
  173. c1.joint(c2);
  174. &lt;/script&gt;
  175. &lt;/body&gt;
  176. &lt;/html&gt;
  177.     </code>
  178. </pre>
  179.  
  180. <div style="border: 1px solid gray; background-color: white;" id="hello_world"></div>
  181. <script type="text/javascript">
  182. var
  183. r = Raphael("hello_world", 1000, 50),
  184. c1 = r.circle(50, 20, 10),
  185. c2 = r.circle(250, 25, 10);
  186.  
  187. c1.joint(c2);
  188. </script>
  189.  
  190.  
  191.  
  192.  
  193.   </div>
  194. </div>
  195.  
  196. <div id="foot">
  197.   <div class="gradient-strip"></div>
  198.   <div class="pledgie">
  199.     <a href='http://www.pledgie.com/campaigns/14101'><img alt='Click here to lend your support to: JointJS and make a donation at www.pledgie.com !' src='http://www.pledgie.com/campaigns/14101.png?skin_name=chrome' border='0' /></a>
  200.   </div>
  201.   <div class="diasketch">
  202.     <a href="http://www.diasketch.com">DiaSketch</a><br/><b>Online diagramming solution.</b>
  203.   </div>
  204.   <div class="twitter">
  205.       <a href="http://twitter.com/share" class="twitter-share-button" data-url="http://www.jointjs.com" data-count="horizontal" data-via="jointjs">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
  206.   </div>
  207.   <div class="facebook">
  208.       <iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.jointjs.com&amp;layout=standard&amp;show_faces=false&amp;width=450&amp;action=like&amp;colorscheme=dark&amp;height=35" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:35px;" allowTransparency="true"></iframe>
  209.   </div>
  210.   <em class="copyright">Copyright &copy; 2009 - 2011 David Durman</em>
  211.   <p class="notes">
  212.       <span>About the author</span><br/>
  213.       Author is a Software Developer
  214.       based in Amsterdam, the Netherlands. 
  215.       He is currently most interested in JavaScript on both
  216.       client and server side.
  217.   </p>
  218.   <p class="notes">
  219.       <span>How to contribute</span><br/>
  220.       For criticism, feature proposals and other useful
  221.       information please use
  222.       the discussion forum. For code contribution: fork
  223.       the joint project on github and use the pull requests.
  224.   </p>
  225.   <p class="notes">
  226.       <span>Bug reporting</span><br/>
  227.       All bug reports are welcome! Please use the 
  228.       <a href="https://github.com/DavidDurman/joint/issues">github issue tracker</a>.
  229.   </p>
  230. </div>
  231.  
  232. <script type="text/javascript">
  233. var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
  234. document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
  235. </script>
  236. <script type="text/javascript">
  237. try {
  238. var pageTracker = _gat._getTracker("UA-5029684-2");
  239. pageTracker._trackPageview();
  240. } catch(err) {}</script>
  241. </body>
  242. </html>
# Change User Description Committed
#1 16445 christiane_renck Rename/move file(s) 9 years ago
//guest/christiane_renck/MergeQuestJS/main/demos/JointJS/www/tutorial.html
#1 16444 christiane_renck Adding MergeQuestJS to the Workshop. 9 years ago