commons-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From jbe...@apache.org
Subject svn commit: r958744 - in /commons/sandbox/gsoc/2010/scxml-js/branches/SCXML-141-148/demo/drag-and-drop: drag-and-drop2.xhtml drag-and-drop2.xml
Date Mon, 28 Jun 2010 21:16:13 GMT
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



Mime
View raw message