fixes #16594. fix tests to be sure dojox/mvc/at is early in the requi…

…re list since that may be necessary for working with some widgets, like ColorPalette. Also adding some new tests for diff controllers. !strict

git-svn-id: http://svn.dojotoolkit.org/src/dojox/trunk@30396 560b804f-0ae3-0310-86f3-f6aa0a117693

mvc/tests/WidgetList_tests/test_mvc_Menu.html

@@ -43,13 +43,13 @@
 			"dojo/dom",
 			"dojo/parser",	// scan page for widgets and instantiate them
 			"dojo/when",
+			"dojox/mvc/at",
 			"dijit/Menu",
 			"dijit/MenuItem",
 			"dijit/PopupMenuItem",
 			"dijit/PopupMenuBarItem",
 			"dijit/CheckedMenuItem",
 			"dijit/MenuSeparator",
-			"dojox/mvc/at",
 			"dojox/mvc/getStateful",
 			"dojox/mvc/WidgetList",
 			"dijit/MenuBar",
@@ -58,7 +58,7 @@
 			"dijit/form/TextBox",
 			"dijit/dijit", // optimize: load dijit layer
 			"dojo/domReady!"
-		], function(declare, lang, aspect, dom, parser, when, Menu, MenuItem, PopupMenuItem, PopupMenuBarItem, CheckedMenuItem, MenuSeparator, at, getStateful, WidgetList){
+		], function(declare, lang, aspect, dom, parser, when, at, Menu, MenuItem, PopupMenuItem, PopupMenuBarItem, CheckedMenuItem, MenuSeparator, getStateful, WidgetList){
 			var mixin = declare(null, {
 				_getPropertiesAttr: function(){
 					var list = this.inherited(arguments);

mvc/tests/controllers/readme.txt

@@ -0,0 +1,113 @@
+This directory in dojox/mvc/tests/controllers is used to show the differences when using different types of MVC Controllers.
+
+step1_test_mvc.html 
+	Just uses getStateful(), it does not use a controller.
+	The getStateful call will take json data and make it Stateful.
+	In this example a transform (transformAddress2Class) is used to hide the row for AddressLine2 if it is blank.
+	'dojox/mvc/parserExtension' is required for this since the row being hidden is not a widget.
+	The class attribute is bound to AddressLine2 with a direction and a transform.
+
+
+step2_test_mvc.html 
+	Step 2 of tests for Controllers, uses a ModelRefController.
+	To move from getStateful to ModelRefController, the only change other than the call to require and call new ModelRefController, 
+	is to change the binding on the groups to use ctrl instead of model.
+
+	This example also uses the transform (transformAddress2Class) to hide the row for AddressLine2 if it is blank.
+
+	The ModelRefController constructor sets model to the results of the getStateful call which will take json data and make it Stateful
+
+
+step3_test_mvc.html 
+	Step 3 of test for Controllers, uses an EditModelRefController with holdModelUntilCommit: true.
+	To move from ModelRefController to use EditModelRefController, need to require EditModelRefController. 
+	and on the new call use sourceModel instead of model.
+
+	EditModelRefController adds support for reset() and commit(), so buttons were added to show Reset and Save (commit).
+
+	With holdModelUntilCommit set to true, you will want to bind the output address for the group to 
+	"target: at(ctrl,'sourceModel')", if holdModelUntilCommit is false you can stay with model, sourceModel will also work.
+	You can change holdModelUntilCommit to false to see how that works, updates will be reflected into the Verify section 
+	immediately upon focus changes, and Reset will revert back to the last saved model.
+	The EditModelRefController constructor sets sourceModel to the results of the getStateful call which will take json data and create make it Stateful
+
+
+step4_test_mvc.html 
+	Step 4 of test for Controllers, uses a StoreRefController.
+	To move from ModelRefController to use StoreRefController, need to require StoreRefController, Memory (store), and when 
+	Also needed to change the data to be valid for a store query. 
+	Setup StoreRefController and use ctrl.queryStore() to setup the models.
+
+	Because of the queryStore call had to move the call to parser.parse inside the when to wait for it. 
+	The change in the data for queryStore required changes to the bindings, shad to add a group with target: at('rel:','0')
+	for the bindings of fields. 
+
+	An exprchar:'%' was used for an mvc/Output just to show how it is used. 
+
+
+step5_test_mvc.html
+	Step 5 of test for Controllers, uses an EditStoreRefController with holdModelUntilCommit: true.
+	To move from an EditModelRefController to use an EditStoreRefController, need to require EditStoreRefController, 
+	Memory, and when.  Also needed to change the data to be valid for a store query. 
+
+	Because of the queryStore call had to move the call to parser.parse inside the when to wait for it. 
+	The change in the data for queryStore required changes to the bindings. had to add a group with target: at('rel:','0') 
+	for the bindings of fields.  
+
+	With holdModelUntilCommit set to true, you will want to bind the output address for the group to 
+	"target: at(ctrl,'sourceModel')", if holdModelUntilCommit is false you can stay with model, sourceModel will also work.
+	You can change holdModelUntilCommit to false to see how that works, updates will be reflected into the Verify section
+	immediately upon focus changes, and Reset will revert back to the last saved model.
+	The EditStoreRefController constructor sets store to the memory store and uses queryStore() to setup the models.
+
+
+step6_test_mvc.html
+	Step 6 of test for Controllers, uses a ListController.
+	To move from ModelRefController to also use ListController, 
+	Need to require declare, and ListController, I also needed WidgetList and _InlineTemplateMixin.  
+	mvc/parserExtension is still needed to bind to class with data-mvc-bindings for 'AddressLine2'  
+	Decided to setup a ctrlclz with ListController to have the functions as part of the controller. 
+	The data had to be changed to be array data. 
+	The html was updated to use a WidgetList to show a radio button group with the choices, and to use a 
+	"cursor" binding for the selected address.  
+	Added a transform (transformRadioChecked) to change the cursorIndex when a different AddressName radio button is 
+	selected.  Also added an addEmpty function to add a New Address to the list.
+
+
+step7_test_mvc.html
+	Step 7 of test for Controllers, uses an EditModelRefController and ListController.
+	To move from ModelRefController to also use EditModelRefController and a ListController, 
+	Need to require declare, and EditModelRefController, ListController, 
+	I also needed WidgetList and _InlineTemplateMixin.  
+
+	Needed to setup ctrlclz with EditModelRefController and ListController, and the data needs to be array data and the 
+	call to new ctrlclz uses sourceModel instead of model, and sets holdModelUntilCommit
+	The html was updated to use a WidgetList to show a radio button group with the choices, and to use a 
+	"cursor" binding for the selected address.  
+	Added a transform (transformRadioChecked) to change the cursorIndex when a different AddressName radio button is 
+	selected.  Also added an addEmpty function to add a New Address to the list.
+
+
+step8_test_mvc.html
+	Step 8 of test for Controllers, uses an EditStoreRefListController with holdModelUntilCommit: false
+	To move from ModelRefController with EditModelRefController and a ListController to a EditStoreRefListController
+	Need to require the EditStoreRefListController, when, and Memory 
+	I also needed to change the data to be valid for a store query.   
+	Needed to setup ctrlclz with EditStoreRefListController, and use when and ctrl.queryStore() to setup the models. 
+
+	This test uses holdModelUntilCommit: false on the WidgetList, so updates to the address will immediately show-up in 
+	the verify section and in the select an address section, but changes can be "Reset" back to their last saved state.
+
+
+step9_test_mvc.html
+	Step 9 of test for Controllers, uses an EditStoreRefListController with holdModelUntilCommit: true
+	To move from EditStoreRefListController with holdModelUntilCommit: false to use holdModelUntilCommit: true 
+	I had to add the require for dojox/mvc/at and ListController 
+
+	This test uses holdModelUntilCommit: true on the WidgetList, so updates to the address will not show-up in 
+	the "Verify" section and in the "Select an address" section until "Save" is pressed.
+	But using holdModelUntilCommit: true requires use of a second controller (ctrlSource) which is a ListController 
+	and is bound to the sourceModel and cursorIndex of the first controller (ctrl).
+
+	The "Verify" section and the "Select an address" section are bound to at(ctrlSource,'cursor') and at(ctrlSource, 'model') respectively.
+	To set the Radio buttons correctly, "Checked" has to be updated in ctrl.model inside the transformRadioChecked. 

mvc/tests/controllers/step1_test_mvc.html

@@ -0,0 +1,128 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta http-equiv="Content-type" content="text/html; charset=utf-8">
+		<title>Step 1 of test for Controllers, use getStateful() only.</title>
+		<style type="text/css">
+			@import "../css/app-format.css";
+			@import "../../../../dijit/themes/claro/claro.css";
+		</style>
+		<script type="text/javascript" data-dojo-config="parseOnLoad:0,isDebug:1,async:1,mvc:{debugBindings:1}" src="../../../../dojo/dojo.js"></script>
+		<script type="text/javascript">
+		var model;
+
+		require([
+			'dojo/parser',
+			'dojo/ready',
+			'dojox/mvc/getStateful',
+			'dojox/mvc/parserExtension', // required for data-mvc-bindings to bind to non-widgets
+			'dijit/form/TextBox',
+			'dijit/form/Button',
+			'dojox/mvc/Group',
+			'dojox/mvc/Output'
+			], function(parser, ready, getStateful){
+
+				// Initial data
+				var data = {
+					"id" : "360324",
+					"FullName" : "Mr. John Doe",
+					"Email" : "[email protected]",
+					"AddressLine1" : "123 Valley Rd.",
+					"AddressLine2" : "",
+					"City" : "Cary",
+					"State" : "NC",
+					"Zip" : "27513"
+				};
+
+				transformAddress2Class = {
+						format: function(value){
+							if(value && value.trim().length > 0){ 
+								return "row" // if AddressLine2 is set return row for class
+							}
+							return "hiderow"; // if AddressLine2 is not set return hiderow for class
+						}
+
+				};
+
+				// The getStateful call will take json data and make it Stateful
+				//
+				// In this example a transform (transformAddress2Class) is used to hide the row for AddressLine2 if it is blank.
+				// 'dojox/mvc/parserExtension' is required for this since the row being hidden is not a widget.  
+				// The class attribute is bound to AddressLine2 with a direction and a transform.
+				//
+				model = getStateful(data);
+
+				parser.parse();
+			});
+		</script>
+	</head>
+	<body class="claro">
+		<script type="dojo/require">at: "dojox/mvc/at"</script>
+		<div id="wrapper">
+		<div id="main">
+			<div>
+				<h2>Step 1 of test for Controllers, use getStateful() only.</h2>
+				<h2>Enter Shipping Address</h2>
+			</div>
+			<div class="fullrow" data-dojo-type="dojox/mvc/Group" data-dojo-props="target: at(model)">
+				<div class="fullrow">
+					<label class="cell" for="nameInput">Full Name:</label>
+					<input class="cell" id="nameInput" data-dojo-type="dijit/form/TextBox"
+							data-dojo-props="value: at('rel:', 'FullName')">
+				</div>
+				<div class="fullrow">
+					<label class="cell" for="AddressLine1Input">Address Line1:</label>
+					<input class="cell" id="AddressLine1Input" data-dojo-type="dijit/form/TextBox"
+						data-dojo-props="value: at('rel:', 'AddressLine1')">
+				</div>
+				<div class="fullrow">
+					<label class="cell" for="AddressLine2Input">Address Line2:</label>
+					<input class="cell" id="AddressLine2Input" data-dojo-type="dijit/form/TextBox"
+						data-dojo-props="value: at('rel:', 'AddressLine2')">
+				</div>
+				<div class="fullrow">
+					<label class="cell" for="cityInput">City:</label>
+					<input class="cell" id="cityInput" data-dojo-type="dijit/form/TextBox"
+						data-dojo-props="value: at('rel:', 'City')">
+				</div>
+				<div class="fullrow">
+					<label class="cell" for="stateInput">State:</label>
+					<input class="cell" id="stateInput" data-dojo-type="dijit/form/TextBox"
+						data-dojo-props="value: at('rel:', 'State')">
+				</div>
+				<div class="fullrow">
+					<label class="cell" for="zipInput">Zipcode:</label>
+					<input class="cell" id="zipInput" data-dojo-type="dijit/form/TextBox"
+						data-dojo-props="value: at('rel:', 'Zip')">
+				</div>
+			</div>
+			<br/>
+			<div>
+				<h2>Verify the shipping address</h2>
+			</div>
+			<div class="fullrow" data-dojo-type="dojox/mvc/Group" data-dojo-props="target: at(model)">
+				<div class="fullrow">
+					<div class="boldnamecell" data-dojo-type="dojox/mvc/Output"
+							data-dojo-props="value: at('rel:', 'FullName')"></div>
+				</div>
+				<div class="fullrow">
+					<div class="namecell" data-dojo-type="dojox/mvc/Output"
+						data-dojo-props="value: at('rel:', 'AddressLine1')"></div>
+				</div>
+				<div class="hiderow" data-mvc-bindings="class: at('rel:', 'AddressLine2').direction(at.from).transform(transformAddress2Class)">
+					<div class="namecell" data-dojo-type="dojox/mvc/Output"
+						data-dojo-props="value: at('rel:', 'AddressLine2')"></div>
+				</div>
+				<div class="fullrow">
+					<div class="namecell" data-dojo-type="dojox/mvc/Output"
+						data-dojo-props="value: at('rel:', 'City')">${this.value},</div>
+					<div class="namecell" data-dojo-type="dojox/mvc/Output"
+						data-dojo-props="value: at('rel:', 'State')"></div>
+					<div class="namecell" data-dojo-type="dojox/mvc/Output"
+						data-dojo-props="value: at('rel:', 'Zip')"></div>
+				</div>
+			</div>
+		</div>
+		</div>
+	</body>
+</html>