1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
<HTML>
<HEAD><TITLE>Statechartz Documentation</TITLE></HEAD>
<BODY>
<H2>Documentation for the Statechartz Javascript Library</H2>
<H3>Overview</H3>
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.
<br/>
The Statechartz library is meant to help manage the complexity of web-apps, allowing for more dynamic web experience with less lines of code.
<H3>Browser Support</H3>
Statechartz is currently only tested with webkit browsers (QtWebkit / Arora, Safari, Chrome). Other browser support might be added in time.
<H3>Authoring using SCXML</H3>
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.
<br />
Note that only a subset of the SCXML standard is supported:
The tags scxml, state, parallel, initial, final, history, transition, raise, send, if, else, elseif, script, data, and datamodel are the supported tags.
<br/>
An SCXML file can be loaded in the 2 following ways:
<ul>
<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>
<LI>Statically via a link tag in the HTML head: <link rel="statechart" href="someURL.scxml"/> (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.
</LI>
</ul>
<H3>Authoring using agile Javascript syntax</H3>
<H3>Connecting with HTML and CSS</H3>
<H3>Gotchas</H3>
</BODY>
</HTML>
|
