Subversion Repositories Applications.papyrus

Rev

Details | Last modification | View Log | RSS feed

Rev Author Line No. Line
2150 mathias 1 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
2 
		"http://www.w3.org/TR/html4/strict.dtd">
3 
<html>
4 
<head>
5 
 
6 
	<title>Form unit test</title>
7 
	<style type="text/css">
8 
		@import "../../../dojo/resources/dojo.css";
9 
		@import "../css/dijitTests.css";
10 
	</style>
11 
	<script type="text/javascript" src="../../../dojo/dojo.js"
12 
		djConfig="isDebug: true, parseOnLoad: true"></script>
13 
	<script type="text/javascript" src="../_testCommon.js"></script>
14 
 
15 
	<script type="text/javascript">
16 
		dojo.require("doh.runner");
17 
		dojo.require("dojo.date");
18 
		dojo.require("dijit.form.Form");
19 
		dojo.require("dijit.layout.LayoutContainer");
20 
		dojo.require("dijit.layout.ContentPane");
21 
		dojo.require("dijit.form.ComboBox");
22 
		dojo.require("dijit.form.CheckBox");
23 
		dojo.require("dijit.form.DateTextBox");
24 
		dojo.require("dijit.form.Button");
25 
		dojo.require("dijit.Editor");
26 
 
27 
		var obj;
28 
		function getValues(){
29 
			obj = dijit.byId('myForm').getValues();
30 
			console.log("Object is: " + dojo.toJson(obj, true));
31 
		}
32 
 
33 
		function setValues(){
34 
			if(!obj){
35 
		 		obj = {testF: 'testi'};
36 
			}
37 
			console.log("Object is: " + dojo.toJson(obj, true));
38 
			dijit.byId('myForm').setValues(obj);
39 
		}
40 
 
41 
		// make dojo.toJson() print dates correctly (this feels a bit dirty)
42 
		Date.prototype.json = function(){ return dojo.date.stamp.toISOString(this, {selector: 'date'});};
43 
 
44 
		var d = dojo.date.stamp.fromISOString;
45 
 
46 
		// These are the values assigned to the widgets in the page's HTML
47 
		var original =	{
48 
							foo: {bar: {baz: {quux: d("2007-12-30")} } },
49 
							available: {from: d("2005-01-02"), to: d("2006-01-02")},
50 
							plop: {combo: "one"},
51 
							cb2: ["2", "3"],
52 
							r2: "2",
53 
							richtext: "<h1>original</h1><p>This is the default content</p>"
54 
						};
55 
 
56 
		// we reset the form to these values
57 
		var changed =	{
58 
							foo: {bar: {baz: {quux: d("2005-01-01")} } },
59 
							available: {from: d("2005-11-02"), to: d("2006-11-02")},
60 
							plop: {combo: "three"},
61 
							cb2: ["4"],
62 
							r2: "1",
63 
							richtext: "<h1>changed</h1><p>This is the changed content set by setValues</p>"
64 
						};
65 
 
66 
		dojo.addOnLoad(function(){
67 
			doh.register("dijit.form.Form",
68 
				[
69 
					function getValues(){
70 
						doh.is( dojo.toJson(original), dojo.toJson(dijit.byId("myForm").getValues()) );
71 
					},
72 
					function setValues(){
73 
						dijit.byId("myForm").setValues(changed);
74 
						doh.is( dojo.toJson(changed), dojo.toJson(dijit.byId("myForm").getValues()) );
75 
					},
76 
					function nameAttributeSurvived(){  // ticket:4753
77 
						var radios = dojo.query(".RadioButton", dijit.byId("radio-cells")).forEach(
78 
							function(r) {
79 
								doh.is( r.inputNode.name, "r2" );
80 
							});
81 
 
82 
					}
83 
				]
84 
			);
85 
			doh.run();
86 
		});
87 
 
88 
	</script>
89 
</head>
90 
<body>
91 
<h1>Form Widget Unit Test</h1>
92 
<p>
93 
The form widget takes data in a form and serializes/deserializes it,
94 
so it can be submitted as a JSON string of nested objects.
95 
</p>
96 
<div style="color:red">Currently only widgets are supported, not raw elements.</div>
97 
<form dojoType="dijit.form.Form" id="myForm" action="showPost.php" execute="alert('Execute form w/values:\n'+dojo.toJson(arguments[0],true));">
98 
<p>Just HTML text</p>
99 
<table border=2>
100 
<tr><th>Description</th><th>Name</th><th>Form node/widget</th></tr>
101 
 
102 
<!--
103 
<tr><td>text</td><td>testF</td><td><input type="text" name="testF" value="bar1" /></td></tr>
104 
<tr><td>password</td><td>passwordF</td><td><input type="password" name="passwordF" value="bar4" /></td></tr>
105 
<tr><td>hidden</td><td>hiddenF</td><td><input type="hidden" name="hiddenF" value="bar4" /></td></tr>
106 
<tr><td>select</td><td>plop.noncombo</td><td>
107 
<div class="group">
108 
	<select name="plop.noncombo">
109 
	 <option value="1">one</option>
110 
	 <option value="2">two</option>
111 
	 <option value="3">three</option>
112 
	</select>
113 
</div>
114 
 
115 
</td></tr>
116 
-->
117 
 
118 
<tr><td>DateTextBox inside contentpane</td><td>foo.bar.baz.quux</td><td>
119 
<div dojoType="dijit.layout.ContentPane">
120 
<input type="text" name="foo.bar.baz.quux" dojoType="dijit.form.DateTextBox" value="2007-12-30" />
121 
</div>
122 
</td></tr>
123 
<tr><td>Layoutcontainer</td><td>
124 
<div dojoType="dijit.layout.LayoutContainer">
125 
</div>
126 
</td></tr>
127 
<tr>
128 
<td>DateTextBox 1</td><td>available.from</td><td>
129 
<input type="text" name="available.from" dojoType="dijit.form.DateTextBox" value="2005-01-02" />
130 
</td>
131 
</tr>
132 
<tr>
133 
<td>DateTextBox 2</td><td>available.to</td><td>
134 
<input type="text" name="available.to" dojoType="dijit.form.DateTextBox" value="2006-01-02" />
135 
</td>
136 
</tr>
137 
 
138 
<tr><td>ComboBox</td><td>plop.combo</td>
139 
<td>
140 
<select name="plop.combo" dojoType="dijit.form.ComboBox">
141 
 <option value="one">one</option>
142 
 <option value="two">two</option>
143 
 <option value="three">three</option>
144 
</select>
145 
</td></tr>
146 
 
147 
<!--
148 
<tr>
149 
<td>textarea</td><td>myTextArea</td>
150 
<td>
151 
<textarea name="myTextArea">
152 
text text text """ \\\/
153 
</textarea>
154 
</td>
155 
</tr>
156 
-->
157 
 
158 
<!--
159 
<tr>
160 
<td>CheckBox</td><td>cb1</td>
161 
<td>
162 
<input type="checkbox" name="cb1" value="1" /> 1
163 
<input type="checkbox" name="cb1" value="2" checked="checked" /> 2
164 
<input type="checkbox" name="cb1" value="3" checked="checked" /> 3
165 
<input type="checkbox" name="cb1" value="4" /> 4
166 
</td>
167 
</tr>
168 
-->
169 
 
170 
<tr>
171 
<td>CheckBox widget</td><td>cb2</td>
172 
<td>
173 
<input dojoType="dijit.form.CheckBox" type="checkbox" name="cb2" value="1" /> 1
174 
<input dojoType="dijit.form.CheckBox" type="checkbox" name="cb2" value="2" checked="checked" /> 2
175 
<input dojoType="dijit.form.CheckBox" type="checkbox" name="cb2" value="3" checked="checked" /> 3
176 
<input dojoType="dijit.form.CheckBox" type="checkbox" name="cb2" value="4" /> 4
177 
</td>
178 
</tr>
179 
 
180 
<!--
181 
<tr>
182 
<td>radio</td><td>r1</td>
183 
<td>
184 
<input type="radio" name="r1" value="1" /> 1
185 
<input type="radio" name="r1" value="2" /> 2
186 
<input type="radio" name="r1" value="3" /> 3
187 
<input type="radio" name="r1" value="4" /> 4
188 
</td>
189 
</tr>
190 
-->
191 
 
192 
<tr>
193 
<td>Radio widget</td><td>r2</td>
194 
<td id="radio-cells">
195 
<input dojoType="dijit.form.RadioButton" type="radio" name="r2" value="1" /> 1
196 
<input dojoType="dijit.form.RadioButton" type="radio" name="r2" value="2" checked="checked" /> 2
197 
<input dojoType="dijit.form.RadioButton" type="radio" name="r2" value="3"/> 3
198 
<input dojoType="dijit.form.RadioButton" type="radio" name="r2" value="4" /> 4
199 
</td>
200 
</tr>
201 
<tr>
202 
<td>Editor widget</td><td>richtext</td>
203 
<td>
204 
<textarea dojoType="dijit.Editor" name="richtext" pluginsConfig="[{items:['bold','italic']}]"/><h1>original</h1><p>This is the default content</p></textarea>
205 
</td>
206 
</tr>
207 
 
208 
</table>
209 
 
210 
<button dojoType=dijit.form.Button onClick="getValues();">Get Values from form!</button>
211 
<button dojoType=dijit.form.Button onClick="setValues();">Set Values to form!</button>
212 
<button dojoType=dijit.form.Button type=submit>Submit</button>
213 
</form>
214 
 
215 
 
216 
</body>
217 
</html>