New feature: basic Ajax suggestion for tags and implementation of Dojo toolkit

git-svn-id: https://semanticscuttle.svn.sourceforge.net/svnroot/semanticscuttle/trunk@151 b3834d28-1941-0410-a4f8-b48e95affb8f
author: mensonge 2008-11-13 09:49:11 +0000
committer: mensonge 2008-11-13 09:49:11 +0000
commit: e44a7e37b6c7b5961adaffc62b9042b8d442938e (patch)
tree: 95b67c356e93163467db2451f2b8cce84ed5d582 /includes/js/dojox/wire/demos/markup/demo_ActionWiring.html
parent: a62b9742ee5e28bcec6872d88f50f25b820914f6 (diff)
download: scuttle-e44a7e37b6c7b5961adaffc62b9042b8d442938e.tar.gz
scuttle-e44a7e37b6c7b5961adaffc62b9042b8d442938e.zip
1 files changed, 142 insertions, 0 deletions
diff --git a/includes/js/dojox/wire/demos/markup/demo_ActionWiring.html b/includes/js/dojox/wire/demos/markup/demo_ActionWiring.html
new file mode 100644
index 0000000..995b67f
--- /dev/null
+++ b/includes/js/dojox/wire/demos/markup/demo_ActionWiring.html
@@ -0,0 +1,142 @@
+<!--
+  This file demonstrates how the dojox.wire code can be used to do declarative
+  wiring of events on one item to trigger event on other widgets.  It also shows
+  how you can use the Transfer object to morph data values from one format to 
+  another.  In this specific case, it maps the values from a dojo.data Datastore
+  item into values stored in a JavaScript Array, which is the format required for
+  the addRow method of the demonstration TableContainer.
+
+  Note that this demo expects dojo, digit, and dojox to all be peers in the same directory
+  in order for it to execute.
+-->
+<html>
+<head>
+	<title>Sample declarative data binding</title>
+	<style type="text/css">
+
+		@import "../../../../dijit/themes/tundra/tundra.css";
+		@import "../../../../dojo/resources/dojo.css";
+		@import "../../../../dijit/tests/css/dijitTests.css";
+		@import "../TableContainer.css";
+
+		.splitView {
+			width: 90%;
+			height: 90%;
+			border: 1px solid #bfbfbf;
+			border-collapse: separate;
+		}
+	</style>
+
+	<script type="text/javascript" src="../../../../dojo/dojo.js" djConfig="isDebug: true, parseOnLoad: true"></script>
+	<script type="text/javascript">
+		dojo.require("dojo.parser");
+		dojo.require("dojox.wire.ml.Invocation");
+		dojo.require("dojox.wire.ml.DataStore");
+		dojo.require("dojox.wire.ml.Transfer");
+
+		dojo.require("dijit.layout.SplitContainer");
+		dojo.require("dijit.layout.LayoutContainer");
+		dojo.require("dijit.layout.ContentPane");
+		dojo.require("dijit.form.Button");
+		dojo.require("dijit.form.TextBox");
+
+		dojo.require("dojo.data.ItemFileReadStore");
+		dojo.require("dojox.wire");
+		dojo.require("dojox.wire.demos.TableContainer");
+
+		//Toplevel JS Object to contain a few basics for us, such as the request to pass to the store and a stub onItem function
+		// to trap on for triggering other events.
+		dataHolder = {
+			//Simple object definition to get all items and sort it by the attribute 'type'.
+			request: {query: {name: "*"}, onItem: function(item, req){}, sort: [{attribute: "type"}]},
+			//Spot to store off data values as they're generated by the declarative binding.
+			result: null
+		};
+
+	</script>
+</head>
+
+<body class="tundra">
+
+	<!-- The following is the basic layout.  A split container with a button and a text field.  Data will be displayed on the right. -->
+	<div dojoType="dijit.layout.SplitContainer"
+		orientation="horizontal"
+		sizerWidth="7"
+		activeSizing="true"
+		class="splitView">
+		<div dojoType="dijit.layout.ContentPane" sizeMin="50" sizeShare="50">
+			<font size="3"><b>Demo Searcher (Searches on Attribute 'name'):</b></font><br/><br/>
+			<b>Usage:</b><br/>
+			Enter the name you want to search the store for.  Wildcards * (multiple character), and ? (single character), are allowed.
+			<br/>
+			<br/>
+			<table style="width: 90%;">
+				<tr>
+					<td align="left">
+						<div dojoType="dijit.form.Button" jsId="searchButton">Search Datastore</div>
+					</td>
+					<td align="right">
+						<div dojoType="dijit.form.TextBox" jsId="inputField" value="*"></div>
+					</td>
+				</tr>
+			</table>
+		</div>
+		<div dojoType="dijit.layout.ContentPane" sizeMin="50" sizeShare="50">
+			<div class="dataTable" dojoType="dojox.wire.demos.TableContainer" jsId="dataTable" headers="Name,Location Type"></div>
+		</div>
+	</div>
+
+
+	<!-------------------------------- Using dojox.wire, declaratively wire up the widgets. --------------------------->
+
+	<!-- The store that is queried in this demo -->    
+	<div dojoType="dojo.data.ItemFileReadStore"
+		jsId="DataStore1"
+		url="countries.json">
+	</div>
+
+	<!-- 
+		When the search button is clicked, clear existing rows from table, 
+		Then invoke the fetch to repopulate the table.
+	-->
+	<div dojoType="dojox.wire.ml.Action"
+		trigger="searchButton"
+		triggerEvent="onClick">
+		<div dojoType="dojox.wire.ml.Invocation" object="dataTable"  method="clearTable"></div>
+		<div dojoType="dojox.wire.ml.Invocation" object="DataStore1" method="fetch" parameters="dataHolder.request"></div>
+	</div>    
+
+	<!-- 
+		Link existing of the text box to transfering the search string to the query param.
+		We are wiring the value of TextBox value of the widget to the name property of our request
+		object.  The copy of values to the search should occur on each keyup event (each keypress)
+	 -->
+	<div dojoType="dojox.wire.ml.Transfer"
+		trigger="inputField" triggerEvent="onkeyup"
+		source="inputField.textbox.value" 
+		target="dataHolder.request.query.name">
+	</div>
+
+	<!-- 
+	  On the call of the onItem function of 'dataHolder', trigger a binding/mapping of the
+	  item's attribute 'name' and 'type' attributes to specific columns in an array.  Note here that since
+	  sourceStore is set, it treats the arguments as items from that store and accesses the attributes
+	  appropriately.  In this case 'name' becomes array entry 0, type, array entry 1, and so on.
+
+	  Then take the result of the data mapping and pass it into the invoke of the addRow function on the
+	  TableContainer widget.
+	-->  
+	<div dojoType="dojox.wire.ml.Action"
+		trigger="dataHolder.request" triggerEvent="onItem">
+		<div dojoType="dojox.wire.ml.Transfer"
+			source="arguments[0]" sourceStore="DataStore1"
+			target="dataHolder.result">
+			<div dojoType="dojox.wire.ml.ColumnWire" attribute="name"></div>
+			<div dojoType="dojox.wire.ml.ColumnWire" attribute="type"></div>
+		</div>
+		<div dojoType="dojox.wire.ml.Invocation"
+			object="dataTable" method="addRow" parameters='dataHolder.result'>
+		</div>
+	</div>         
+</body>
+</html>
author	mensonge	2008-11-13 09:49:11 +0000
committer	mensonge	2008-11-13 09:49:11 +0000
commit	e44a7e37b6c7b5961adaffc62b9042b8d442938e (patch)
tree	95b67c356e93163467db2451f2b8cce84ed5d582 /includes/js/dojox/wire/demos/markup/demo_ActionWiring.html
parent	a62b9742ee5e28bcec6872d88f50f25b820914f6 (diff)
download	scuttle-e44a7e37b6c7b5961adaffc62b9042b8d442938e.tar.gz scuttle-e44a7e37b6c7b5961adaffc62b9042b8d442938e.zip