Author: jbeard
Date: Mon Jun 28 21:16:11 2010
New Revision: 958744
URL: http://svn.apache.org/viewvc?rev=958744&view=rev
Log:
Created a second demo to illustrate the use of statechart API for dynamically
creating DOM elements with behaviour.
Added:
commons/sandbox/gsoc/2010/scxml-js/branches/SCXML-141-148/demo/drag-and-drop/drag-and-drop2.xhtml
- copied, changed from r958721,
commons/sandbox/gsoc/2010/scxml-js/branches/SCXML-141-148/demo/drag-and-drop/drag-and-drop.xhtml
commons/sandbox/gsoc/2010/scxml-js/branches/SCXML-141-148/demo/drag-and-drop/drag-and-drop2.xml
(with props)
Copied:
commons/sandbox/gsoc/2010/scxml-js/branches/SCXML-141-148/demo/drag-and-drop/drag-and-drop2.xhtml
(from r958721,
commons/sandbox/gsoc/2010/scxml-js/branches/SCXML-141-148/demo/drag-and-drop/drag-and-drop.xhtml)
URL:
http://svn.apache.org/viewvc/commons/sandbox/gsoc/2010/scxml-js/branches/SCXML-141-148/demo/drag-and-drop/drag-and-drop2.xhtml?p2=commons/sandbox/gsoc/2010/scxml-js/branches/SCXML-141-148/demo/drag-and-drop/drag-and-drop2.xhtml&p1=commons/sandbox/gsoc/2010/scxml-js/branches/SCXML-141-148/demo/drag-and-drop/drag-and-drop.xhtml&r1=958721&r2=958744&rev=958744&view=diff
==============================================================================
---
commons/sandbox/gsoc/2010/scxml-js/branches/SCXML-141-148/demo/drag-and-drop/drag-and-drop.xhtml
(original)
+++
commons/sandbox/gsoc/2010/scxml-js/branches/SCXML-141-148/demo/drag-and-drop/drag-and-drop2.xhtml
Mon Jun 28 21:16:11 2010
@@ -16,16 +16,11 @@
* limitations under the License.
-->
<!--
-This demo illustrates mixing HTML, SVG, and SCXML content in a single compound
-XML document.
-
-It also illustrates a fairly general technique, which would
-allow authoring of SVG content with inline, declarative behavioural
descriptions
-using SCXML:
-* the document is searched for scxml elements
-* it compiles them locally to JavaScript, and then hooks up event listeners on
the parent DOM node,
- so that DOM events are sent to the state machine for processing
-* the state machine is able to manipulate the DOM directly through executable
content nodes
+This demo is like drag-and-drop.xhtml demo, except that it illustrates how one
+may create state machines and DOM elements dynamically and procedurally, as
+opposed to declaratively, as was done in the previous example. In this example,
+each dynamically-created element will have its own state machine, hence its
+own state.
-->
<html xmlns="http://www.w3.org/1999/xhtml";
xmlns:svg="http://www.w3.org/2000/svg";>
@@ -42,71 +37,8 @@ using SCXML:
<script src="../../lib/js/requirejs/require/xml.js"
type="text/javascript"></script>
</head>
<body>
- <svg xmlns="http://www.w3.org/2000/svg";
xmlns:xlink="http://www.w3.org/1999/xlink"; width="100%" height="99%" >
-
- <rect width="100" height="100" stroke="black"
fill="red" id="rectToTranslate" >
- <scxml
- xmlns="http://www.w3.org/2005/07/scxml";
- version="1.0"
- profile="ecmascript"
- id="scxmlRoot"
- initial="initial_default">
-
- <script>
- function
computeTDelta(oldEvent,newEvent){
- //summary:computes the
offset between two events; to be later used with this.translate
- var dx =
newEvent.clientX - oldEvent.clientX;
- var dy =
newEvent.clientY - oldEvent.clientY;
-
- return
{'dx':dx,'dy':dy};
- }
-
- function
translate(rawNode,tDelta){
- var tl =
rawNode.transform.baseVal;
- var t =
tl.numberOfItems ? tl.getItem(0) : rawNode.ownerSVGElement.createSVGTransform();
- var m = t.matrix;
- var newM =
rawNode.ownerSVGElement.createSVGMatrix().translate(tDelta.dx,tDelta.dy).multiply(m);
- t.setMatrix(newM);
- tl.initialize(t);
- return newM;
- }
- </script>
-
- <datamodel>
- <data id="firstEvent"/>
- <data id="eventStamp"/>
- <data id="tDelta"/>
- <data id="rawNode"/>
- </datamodel>
-
- <state id="initial_default">
- <transition event="init"
target="idle">
- <assign
location="rawNode" expr="_event.data.rawNode"/>
- </transition>
- </state>
-
- <state id="idle">
- <transition event="mousedown"
target="dragging">
- <assign
location="firstEvent" expr="_event.data"/>
- <assign
location="eventStamp" expr="_event.data"/>
- </transition>
- </state>
-
- <state id="dragging">
- <transition event="mouseup"
target="idle"/>
-
- <transition event="mousemove"
target="dragging">
- <assign
location="tDelta" expr="computeTDelta(eventStamp,_event.data)"/>
- <script>
-
translate(rawNode,tDelta);
- </script>
- <assign
location="eventStamp" expr="_event.data"/>
- </transition>
- </state>
-
- </scxml>
- </rect>
- </svg>
+ <svg xmlns="http://www.w3.org/2000/svg";
xmlns:xlink="http://www.w3.org/1999/xlink"; width="100%" height="99%"
id="canvas"/>
+ <button id="elementButton"
style="position:absolute;bottom:0px;left:0px;">Make draggable SVG
Element</button>
<div id="statusDiv"
style="position:absolute;bottom:0px;right:0px;"/>
<script><![CDATA[
var resultText;
@@ -115,59 +47,77 @@ using SCXML:
{
"baseUrl":"/"
},
- ["src/javascript/scxml/cgf/SCXMLCompiler"],
+ ["src/javascript/scxml/cgf/SCXMLCompiler",
+
"xml!demo/drag-and-drop/drag-and-drop2.xml"],
- function(compiler){
+ function(compiler,scxml_input){
+
+ var SVG_NS =
"http://www.w3.org/2000/svg";;
var statusDiv =
document.getElementById("statusDiv");
+ var elementButton =
document.getElementById("elementButton");
+ var svgCanvas =
document.getElementById("canvas");
- statusDiv.textContent="Compiling SCXML
elements...";
+ statusDiv.textContent="Compiling
SCXML...";
- //pull SCXML nodes from DOM
- var scxmlElements =
document.getElementsByTagName("scxml");
- for(var i = 0; i <
scxmlElements.length; i++){
- var scxml_input =
scxmlElements[i];
- var domNodeToHookUp =
scxml_input.parentNode;
-
- //prep scxml document to
transform by pulling the scxml node into its own document
- var scxmlns =
"http://www.w3.org/2005/07/scxml";;
- var scxmlToTransform =
document.implementation.createDocument (scxmlns , "scxml", null);
- var newNode =
scxmlToTransform.importNode(scxml_input.cloneNode(true),true);
-
scxmlToTransform.replaceChild(newNode,scxmlToTransform.documentElement);
-
- var
compiledStatechartConstructor, compiledStatechartInstance;
-
- compiler.compile({
-
inFiles:[scxmlToTransform],
- //debug:true,
- backend:"state",
- beautify:true,
- verbose:false,
- log:false,
- ie:false
- }, function(scArr){
- var transformedJs =
scArr[0];
-
- //eval
-
console.log(transformedJs);
- eval(transformedJs);
-
compiledStatechartConstructor = StatechartExecutionContext;
-
compiledStatechartInstance = new compiledStatechartConstructor();
-
- //initialize
-
compiledStatechartInstance.initialize();
-
- //pass in reference to
rect
-
compiledStatechartInstance.init({rawNode:domNodeToHookUp});
-
- //hook up DOM events
-
["mousedown","mouseup","mousemove"].forEach(function(eventName){
-
domNodeToHookUp.addEventListener(eventName,compiledStatechartInstance[eventName],false);
- });
- });
- }
+ var compiledStatechartConstructor;
+
+ //compile statechart
+ compiler.compile({
+ inFiles:[scxml_input],
+ //debug:true,
+ backend:"state",
+ beautify:true,
+ verbose:false,
+ log:false,
+ ie:false
+ }, function(scArr){
+ var transformedJs = scArr[0];
+
+ //eval
+ console.log(transformedJs);
+ eval(transformedJs);
+ compiledStatechartConstructor =
StatechartExecutionContext;
+ });
statusDiv.textContent+=" Done!";
+
+ //just for fun, random color generator,
courtesy of
http://stackoverflow.com/questions/1484506/random-color-generator-in-javascript
+ function get_random_color() {
+ var letters =
'0123456789ABCDEF'.split('');
+ var color = '#';
+ for (var i = 0; i < 6; i++ ) {
+ color +=
letters[Math.round(Math.random() * 15)];
+ }
+ return color;
+ }
+
+ //hook up button UI control
+
elementButton.addEventListener("click",function(e){
+
+ //do DOM stuff- create new blue
circle
+ var newNode =
document.createElementNS(SVG_NS,"circle");
+
newNode.setAttributeNS(null,"cx",50);
+
newNode.setAttributeNS(null,"cy",50);
+
newNode.setAttributeNS(null,"r",50);
+
newNode.setAttributeNS(null,"fill",get_random_color());
+
newNode.setAttributeNS(null,"stroke","black");
+
+ var compiledStatechartInstance
= new compiledStatechartConstructor();
+
+ //initialize
+
compiledStatechartInstance.initialize();
+
+ //pass in reference to rect
+
compiledStatechartInstance.init({rawNode:newNode});
+
+ //hook up DOM events
+
["mousedown","mouseup","mousemove"].forEach(function(eventName){
+
newNode.addEventListener(eventName,compiledStatechartInstance[eventName],false);
+ });
+
+ svgCanvas.appendChild(newNode);
+ },false);
}
);
]]></script>
Added:
commons/sandbox/gsoc/2010/scxml-js/branches/SCXML-141-148/demo/drag-and-drop/drag-and-drop2.xml
URL:
http://svn.apache.org/viewvc/commons/sandbox/gsoc/2010/scxml-js/branches/SCXML-141-148/demo/drag-and-drop/drag-and-drop2.xml?rev=958744&view=auto
==============================================================================
---
commons/sandbox/gsoc/2010/scxml-js/branches/SCXML-141-148/demo/drag-and-drop/drag-and-drop2.xml
(added)
+++
commons/sandbox/gsoc/2010/scxml-js/branches/SCXML-141-148/demo/drag-and-drop/drag-and-drop2.xml
Mon Jun 28 21:16:11 2010
@@ -0,0 +1,60 @@
+<scxml
+ xmlns="http://www.w3.org/2005/07/scxml";
+ version="1.0"
+ profile="ecmascript"
+ id="scxmlRoot"
+ initial="initial_default">
+
+ <script>
+ function computeTDelta(oldEvent,newEvent){
+ //summary:computes the offset between two events; to be
later used with this.translate
+ var dx = newEvent.clientX - oldEvent.clientX;
+ var dy = newEvent.clientY - oldEvent.clientY;
+
+ return {'dx':dx,'dy':dy};
+ }
+
+ function translate(rawNode,tDelta){
+ var tl = rawNode.transform.baseVal;
+ var t = tl.numberOfItems ? tl.getItem(0) :
rawNode.ownerSVGElement.createSVGTransform();
+ var m = t.matrix;
+ var newM =
rawNode.ownerSVGElement.createSVGMatrix().translate(tDelta.dx,tDelta.dy).multiply(m);
+ t.setMatrix(newM);
+ tl.initialize(t);
+ return newM;
+ }
+ </script>
+
+ <datamodel>
+ <data id="firstEvent"/>
+ <data id="eventStamp"/>
+ <data id="tDelta"/>
+ <data id="rawNode"/>
+ </datamodel>
+
+ <state id="initial_default">
+ <transition event="init" target="idle">
+ <assign location="rawNode" expr="_event.data.rawNode"/>
+ </transition>
+ </state>
+
+ <state id="idle">
+ <transition event="mousedown" target="dragging">
+ <assign location="firstEvent" expr="_event.data"/>
+ <assign location="eventStamp" expr="_event.data"/>
+ </transition>
+ </state>
+
+ <state id="dragging">
+ <transition event="mouseup" target="idle"/>
+
+ <transition event="mousemove" target="dragging">
+ <assign location="tDelta"
expr="computeTDelta(eventStamp,_event.data)"/>
+ <script>
+ translate(rawNode,tDelta);
+ </script>
+ <assign location="eventStamp" expr="_event.data"/>
+ </transition>
+ </state>
+
+</scxml>
Propchange:
commons/sandbox/gsoc/2010/scxml-js/branches/SCXML-141-148/demo/drag-and-drop/drag-and-drop2.xml
------------------------------------------------------------------------------
svn:eol-style = native
