You are viewing a plain text version of this content. The canonical link for it is here.
Posted to user@commons.apache.org by Gerald McCobb <mc...@openstream.com> on 2011/01/18 19:10:03 UTC
[scxml-js] How to hook up Browser DOM events without SVG
Hello,
I currently work on developing multimodal applications for mobile
phones. I've been evaluating the Apache scxml-js project and find it
very interesting. However, I've been having a little trouble getting
it to work separately from SVG.
Is there any documentation, examples, or other help material available
on how I can hook up DOM events generally to compiled SCXML without
requiring SVG? Or, if SVG is a hard and fast requirement, how may I
use scxml-js without having to display SVG in the browser? Is there a
way?
Thanks in advance!
Regards,
Jerry McCobb
mccobb@openstream.com
Ph: (732) 507-7030 ext 109
Fax: (732) 507-7035
--
NOTICE TO RECIPIENT:
THIS E-MAIL IS MEANT FOR ONLY THE INTENDED RECIPIENT OF THE TRANSMISSION, AND MAY BE A COMMUNICATION PRIVILEGED BY LAW. IF YOU RECEIVED THIS E-MAIL IN ERROR, ANY REVIEW, USE, DISSEMINATION, DISTRIBUTION, OR COPYING OF THIS E-MAIL IS STRICTLY PROHIBITED. PLEASE NOTIFY US IMMEDIATELY OF THE ERROR BY RETURN E-MAIL AND PLEASE DELETE THIS MESSAGE FROM YOUR SYSTEM. THANK YOU IN ADVANCE FOR YOUR COOPERATION.
Reply to : legal@openstream.com
---------------------------------------------------------------------
To unsubscribe, e-mail: user-unsubscribe@commons.apache.org
For additional commands, e-mail: user-help@commons.apache.org
Re: [scxml-js] How to hook up Browser DOM events without SVG
Posted by Jacob Beard <jb...@cs.mcgill.ca>.
Hi Jerry,
SVG is definitely not a requirement to use scxml-js. It should be
possible to use the generated statechart artifacts in the context of
HTML documents, or even outside of the Web browser (I've had success
running the generated JavaScript code under Mozilla Rhino, and even
embedded into Python using the python-spidermonkey language bindings).
Basically, scxml-js will compile your SCXML document to a JavaScript
constructor function which has the name <SCXML document
name>StatechartExecutionContext. You can then use the following code to
instantiate and initialize a new statechart instance:
compiledStatechartInstance = new StatechartExecutionContext();
compiledStatechartInstance.initialize()
You can then hook up DOM events as follows:
["mousedown","mouseup","mousemove"].forEach(function(eventName){
domNodeToHookUp.addEventListener(eventName,function(e){
compiledStatechartInstance[eventName](e)
},false);
});
This will dispatch DOM events on the statechart instance. Note that this
assumes that your statechart has transitions triggered by events named
"mousedown", "mouseup", and "mousemove". The statechart can then be made
to control the DOM in response to state changes by passing in an object
that acts as a controller.
An extremely lean example that illustrates this process can be found
here:
http://commons.apache.org/sandbox/gsoc/2010/scxml-js/demo/drag-and-drop/drag-and-drop3.html
It uses SVG, but the code can be applied virtually without modification
to HTML as well. The only thing that would need to be changed would be
the functions in the SCXML document which manipulate the SVG DOM.
The source for this example can be found in SVN here:
https://svn.apache.org/repos/asf/commons/sandbox/gsoc/2010/scxml-js/trunk/demo/drag-and-drop/
One note on scxml-js's suitability for general web usage: at the moment,
the code that scxml-js generates can be quite heavy, especially for
complex models. This is something that I will be optimizing in the
coming months, but for now it can be mitigated by using scxml-js as a
just-in-time compiler, in which case it downloads the SCXML document to
the browser and compiles it to JavaScript on the fly:
http://commons.apache.org/sandbox/gsoc/2010/scxml-js/demo/drag-and-drop/drag-and-drop2.html
If you have any further questions, please don't hesitate to ask. Thanks,
Jake
On 11-01-18 01:10 PM, Gerald McCobb wrote:
> Hello,
>
> I currently work on developing multimodal applications for mobile
> phones. I've been evaluating the Apache scxml-js project and find it
> very interesting. However, I've been having a little trouble getting
> it to work separately from SVG.
>
> Is there any documentation, examples, or other help material available
> on how I can hook up DOM events generally to compiled SCXML without
> requiring SVG? Or, if SVG is a hard and fast requirement, how may I
> use scxml-js without having to display SVG in the browser? Is there a
> way?
>
> Thanks in advance!
>
> Regards,
>
> Jerry McCobb
> mccobb@openstream.com
> Ph: (732) 507-7030 ext 109
> Fax: (732) 507-7035
> --
> NOTICE TO RECIPIENT: THIS E-MAIL IS MEANT FOR ONLY THE INTENDED
> RECIPIENT OF THE TRANSMISSION, AND MAY BE A COMMUNICATION PRIVILEGED
> BY LAW. IF YOU RECEIVED THIS E-MAIL IN ERROR, ANY REVIEW, USE,
> DISSEMINATION, DISTRIBUTION, OR COPYING OF THIS E-MAIL IS STRICTLY
> PROHIBITED. PLEASE NOTIFY US IMMEDIATELY OF THE ERROR BY RETURN
> E-MAIL AND PLEASE DELETE THIS MESSAGE FROM YOUR SYSTEM. THANK YOU IN
> ADVANCE FOR YOUR COOPERATION. Reply to : legal@openstream.com
>
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: user-unsubscribe@commons.apache.org
> For additional commands, e-mail: user-help@commons.apache.org
>
---------------------------------------------------------------------
To unsubscribe, e-mail: user-unsubscribe@commons.apache.org
For additional commands, e-mail: user-help@commons.apache.org