1 
<HTML>
2 
    <HEAD><TITLE>Statechartz Documentation</TITLE></HEAD>
3 
    <BODY>
4 
<H2>Documentation for the Statechartz Javascript Library</H2>
5 
<H3>Overview</H3>
6 
The Statechartz Javascript library is meant to provide heirarchical statechart support for web-sites and web-apps, based on the <a href="http://www.w3.org/TR/scxml/">SCXML standard</a>. It includes most of the basic SCXML features, including state heirarchy, parallel states, final/initial/history pseudo-states, conditional transitions and executable activities.
7 
<br/>
8 
The Statechartz library is meant to help manage the complexity of web-apps, allowing for more dynamic web experience with less lines of code.
9 





10

<H3>Browser Support</H3>





11

Statechartz is currently only tested with webkit browsers (QtWebkit / Arora, Safari, Chrome). Other browser support might be added in time.





12

 





13

<H3>Authoring using SCXML</H3>





14

The standard way to author for Statechartz is with SCXML. By having a separate SCXML file next to the HTML and Javascript assets, the flow can be separated from the graphics and the logic of the application.





15

<br />





16

Note that only a subset of the SCXML standard is supported:





17

The tags scxml, state, parallel, initial, final, history, transition, raise, send, if, else, elseif, script, data, and datamodel are the supported tags.





18

<br/>





19

An SCXML file can be loaded in the 2 following ways:





20

<ul>





21

<LI>Dynamically via the Statechartz.loadScxml(Document) function. This function accepts a DOM XML Document as a parameter, and returns a Statechart object. That statechart can be started with the start() function, and events can be raised to it with the raise() function.</LI>





22

<LI>Statically via a link tag in the HTML head: &lt;link rel="statechart" href="someURL.scxml"/&gt; (See <a href="demo.html">demo.html</a>. When loaded statically, the statechart woulld be kept in document.statechart, and would start once the document is loaded.





23

</LI>





24

</ul>





25






26

<H3>Authoring using agile Javascript syntax</H3>





27

<H3>Connecting with HTML and CSS</H3>





28

<H3>Gotchas</H3>





29

</BODY>





30

</HTML>