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 
	<title>Dojo ComboBox Widget Test</title>
6 
	<style>
7 
		@import "../../../dojo/resources/dojo.css";
8 
		@import "../css/dijitTests.css";
9 
	</style>
10 
	<script type="text/javascript" src="../../../dojo/dojo.js"
11 
		djConfig="isDebug: true, parseOnLoad: true"></script>
12 
	<script type="text/javascript" src="../_testCommon.js"></script>
13 
 
14 
	<script type="text/javascript">
15 
		dojo.require("dojo.data.ItemFileReadStore");
16 
		dojo.require("dijit.form.ComboBox");
17 
		dojo.require("dojo.parser");	// scan page for widgets and instantiate them
18 
 
19 
		function setVal1(val){
20 
			dojo.byId('value1').value=val;
21 
		}
22 
		function setVal2(val){
23 
			dojo.byId('value2').value=val;
24 
			console.debug("Value changed to ["+val+"] in second ComboBox (#1652)");
25 
		}
26 
		function setVal3(val){
27 
			dojo.byId('value3').value=val;
28 
		}
29 
		function setVal4(val){
30 
			dojo.byId('value4').value=val;
31 
		}
32 
		var combo;
33 
		function init(){
34 
			var store = new dojo.data.ItemFileReadStore({url: '../_data/states.json'});
35 
			combo = new dijit.form.ComboBox({
36 
				name:"prog",
37 
				autoComplete:false,
38 
				store: store,
39 
				searchAttr:"name"
40 
			}, dojo.byId("progCombo"));
41 
 
42 
			var store2 = new dojo.data.ItemFileReadStore({url: '../../demos/i18n/data.json'});
43 
			combo = new dijit.form.ComboBox({
44 
				name:"prog2",
45 
				autoComplete:false,
46 
				store:store2,
47 
				query:{type:'country'},
48 
				searchAttr:"name"
49 
			}, dojo.byId("progCombo2"));
50 
		}
51 
		dojo.addOnLoad(init);
52 
 
53 
		function toggleDisabled(button, widget){
54 
			widget = dijit.byId(widget);
55 
			button = dojo.byId(button);
56 
			widget.setDisabled(!widget.disabled);
57 
			button.innerHTML= widget.disabled ? "Enable" : "Disable";
58 
		}
59 
	</script>
60 
</head>
61 
 
62 
<body>
63 
<h1>Dojo ComboBox Widget Test</h1>
64 
<p>
65 
A ComboBox is like a text &lt;input&gt; field (ie, you can input any value you want),
66 
but it also has a list of suggested values that you can choose from.
67 
The drop down list is filtered by the data you have already typed in.
68 
</p>
69 
<form action="#" method="GET">
70 
 
71 
	<p>ComboBox #1: inlined data, autoComplete=false, default value of Iowa, pageSize=30</p>
72 
	<label for="setvaluetest">US State test 1: </label>
73 
	<select id="setvaluetest"
74 
			name="state1"
75 
			dojoType="dijit.form.ComboBox"
76 
			class="medium"
77 
			style="width:50%;font-size:15pt;"
78 
			name="foo.bar1"
79 
			autoComplete="false"
80 
			onChange="dojo.byId('oc1').value=arguments[0]"
81 
			pageSize="30"
82 
	>
83 
		<option></option>
84 
		<option>Alabama</option>
85 
		<option>Alaska</option>
86 
		<option>American Samoa</option>
87 
		<option>Arizona</option>
88 
		<option>Arkansas</option>
89 
		<option>Armed Forces Europe</option>
90 
		<option>Armed Forces Pacific</option>
91 
		<option>Armed Forces the Americas</option>
92 
		<option>California</option>
93 
		<option>Colorado</option>
94 
		<option>Connecticut</option>
95 
		<option>Delaware</option>
96 
		<option>District of Columbia</option>
97 
		<option>Federated States of Micronesia</option>
98 
		<option>Florida</option>
99 
		<option>Georgia</option>
100 
		<option>Guam</option>
101 
		<option>Hawaii</option>
102 
		<option>Idaho</option>
103 
		<option>Illinois</option>
104 
		<option>Indiana</option>
105 
		<option selected>Iowa</option>
106 
		<option>Kansas</option>
107 
		<option>Kentucky</option>
108 
		<option>Louisiana</option>
109 
		<option>Maine</option>
110 
		<option>Marshall Islands</option>
111 
		<option>Maryland</option>
112 
		<option>Massachusetts</option>
113 
		<option>Michigan</option>
114 
		<option>Minnesota</option>
115 
		<option>Mississippi</option>
116 
		<option>Missouri</option>
117 
		<option>Montana</option>
118 
		<option>Nebraska</option>
119 
		<option>Nevada</option>
120 
		<option>New Hampshire</option>
121 
		<option>New Jersey</option>
122 
		<option>New Mexico</option>
123 
		<option>New York</option>
124 
		<option>North Carolina</option>
125 
		<option>North Dakota</option>
126 
		<option>Northern Mariana Islands</option>
127 
		<option>Ohio</option>
128 
		<option>Oklahoma</option>
129 
		<option>Oregon</option>
130 
		<option>Pennsylvania</option>
131 
		<option>Puerto Rico</option>
132 
		<option>Rhode Island</option>
133 
		<option>South Carolina</option>
134 
		<option>South Dakota</option>
135 
		<option>Tennessee</option>
136 
		<option>Texas</option>
137 
		<option>Utah</option>
138 
		<option>Vermont</option>
139 
		<option>Virgin Islands, U.S.</option>
140 
		<option>Virginia</option>
141 
		<option>Washington</option>
142 
		<option>West Virginia</option>
143 
		<option>Wisconsin</option>
144 
		<option>Wyoming</option>
145 
	</select>
146 
	onChange:<input id="oc1" disabled value="not fired yet!" autocomplete="off">
147 
 
148 
	<hr>
149 
 
150 
	<div dojoType="dojo.data.ItemFileReadStore" jsId="stateStore"
151 
		url="../_data/states.json"></div>
152 
 
153 
	<div dojoType="dojo.data.ItemFileReadStore" jsId="dijitStore"
154 
		url="../_data/dijits.json"></div>
155 
 
156 
	<p>ComboBox #2: url, autoComplete=true:</p>
157 
	<label for="datatest">US State test 2: </label>
158 
	<input dojoType="dijit.form.ComboBox"
159 
			value="California"
160 
			class="medium"
161 
			store="stateStore"
162 
			searchAttr="name"
163 
			style="width: 300px;"
164 
			name="state2"
165 
			onChange="setVal2"
166 
			id="datatest"
167 
	>
168 
	<span>Value: <input id="value2" disabled value="California"></span>
169 
	<hr>
170 
	<label for="datatest">Dijit List test #1: </label>
171 
	<input dojoType="dijit.form.ComboBox"
172 
			value="dijit.Editor"
173 
			class="medium"
174 
			store="dijitStore"
175 
			searchAttr="className"
176 
			style="width: 300px;"
177 
			name="dijitList1"
178 
			id="datatestDijit"
179 
	>
180 
	<span>Hey look, this one is kind of useful.</span>
181 
	<hr>
182 
 
183 
	<p>ComboBox #3: initially disabled, url, autoComplete=false:</p>
184 
	<label for="combo3">US State test 3: </label>
185 
 	<input id="combo3"
186 
 			dojoType="dijit.form.ComboBox"
187 
 			value="California"
188 
 			class="medium"
189 
			store="stateStore"
190 
			searchAttr="name"
191 
			style="width: 300px;"
192 
			name="state3"
193 
			autoComplete="false"
194 
			onChange="setVal3"
195 
			disabled
196 
	>
197 
	<span>Value: <input id="value3" disabled></span>
198 
	<div>
199 
		<button id="but" onclick='toggleDisabled("but", "combo3"); return false;'>Enable</button>
200 
	</div>
201 
	<hr>
202 
	<p>ComboBox #4: url, autoComplete=false required=true:</p>
203 
	<label for="combobox4">US State test 4: </label>
204 
	<input dojoType="dijit.form.ComboBox"
205 
			value=""
206 
			class="medium"
207 
			store="stateStore"
208 
			searchAttr="name"
209 
			style="width: 300px;"
210 
			name="state4"
211 
			onChange="setVal4"
212 
			autoComplete="false"
213 
			id="combobox4"
214 
			required="true"
215 
	>
216 
	<span>Value: <input id="value4" disabled></span>
217 
	<hr>
218 
	<p>A ComboBox with no arrow</p>
219 
 	<input dojoType="dijit.form.ComboBox"
220 
 			value="California"
221 
			store="stateStore"
222 
			searchAttr="name"
223 
			name="state5"
224 
			autoComplete="false"
225 
			hasDownArrow="false"
226 
	>
227 
	<hr>
228 
	<p>A combo created by createWidget</p>
229 
	<input id="progCombo">
230 
	<hr>
231 
	<p>A ComboBox with an initial query.  (Limits list to items with type = country.)</p>
232 
	<input id="progCombo2">
233 
	<hr>
234 
	<input type="button" value="Create one in a window" onclick="var win=window.open(window.location);"></input>
235 
	<input type="submit">
236 
 
237 
</form>
238 
<p>
239 
This is some text below the ComboBoxes. It shouldn't get pushed out of the way when search results get returned.
240 
also: adding a simple combo box to test IE bleed through problem:
241 
</p>
242 
 
243 
<select>
244 
  <option>test for</option>
245 
  <option>IE bleed through</option>
246 
  <option>problem</option>
247 
</select>
248 
<h3>Some tests:</h3>
249 
<ol>
250 
<li>Type in D - dropdown shows Delaware and District of columbia. [Would be nice if it bolded the D's in the dropdown list!]</li>
251 
<li>Type in DX - input box shows DX and no dropdown.</li>
252 
<li>Open dropdown, click an item, it selects and closes dropdown.</li>
253 
<li>Click triangle icon - dropdown shows. Click it again - dropdown goes.</li>
254 
<li>Check that you can type in more than required (e.g. alaba for alabama) and it still correctly shows alabama</li>
255 
<li>Tab into the combo works, list should not apear.</li>
256 
<li>Tab out of the combo works - closes dropdown and goes to next control (focus should not go to the dropdown because tabindex="-1").</li>
257 
<li>Do the dropdown and click outside of it - the dropdown disappears.</li>
258 
<li>Javascript disabled -&gt; fallback to old style combo?</li>
259 
<li>Can you paste in the start of a match? [no]</li>
260 
<li>Backspace to start - dropdown shows all all items</li>
261 
<li>Backspace deselects last character [Borked: currently you have to backspace twice]</li>
262 
<li>Press down key to open dropdown</li>
263 
<li>Down and up keys select previous/next in dropdown.</li>
264 
<li>Non-alpha keys (F12, ctrl-c, whatever) should not affect dropdown.</li>
265 
<li>Press down arrow to highlight an item, pressing enter selects it and closes dropdown.</li>
266 
<li>Press down arrow to highlight an item, pressing space selects it and closes dropdown.</li>
267 
<li>Check that pressing escape undoes the previous action and closes the dropdown</li>
268 
<li>Check that pressing escape again clears the input box.</li>
269 
<li>In IE, mouse scroll wheel scrolls through the list. Scrolls by 1 item per click even if user has set mouse to scroll more than 1 in mouse settings. Only scrolls if text input has focus (page scrolling works as normal otherwise)</li>
270 
<li>In IE, dropdown list does not go behind the second combo (special code to manage this).</li>
271 
<li>Check dropdown is aligned correctly with bottom of the text input</li>
272 
<li>Probably should try the combo in a relative div or absolute div and see where the dropdown ends up. (Strongly suspect problems in this area in IE - boo)</li>
273 
<li>Try repeatably droppingdown and closing the dropdown. Shouldnt get hung [sometimes flicks closed just after opening due to timers, but not a biggie]</li>
274 
<li>Check that default selection of the text makes sense. e.g. text is selected after picking an item, on tabbing in to text input etc)</li>
275 
<li>Check that dropdown is smooth [looks uggy on second keypress in FF - hides then shows]</li>
276 
<li>Clear the field. Type in A and then tab *very quickly* and see if the results make sense (the dropdown is on a timer - searchTimer)</li>
277 
<li>Clear the field and enter an invalid entry and tab out e.g. Qualude. Does that make sense given the combobox setup options?</li>
278 
<li>(Add any other tests here)</li>
279 
</ol>
280 
<div id="debugbox"></div>
281 
<!-- maintain state of combo box if user presses back/forward button -->
282 
<form name="_dojo_form" style="display:none" disabled="true"><textarea name="stabile" cols="80" rows="10"></textarea></form>
283 
</body>
284 
</html>