Changeset 12482

Timestamp:

02/17/08 05:07:53 (11 months ago)

Author:

doughays

Message:

Fixes #2666. Add reset() method to form widgets.
Changed MultiSelect? get/setValues to get/setValue.
Added field reset call to 1 textbox and 1 checkbox example.
Added reset automated test to Form.html.

Location:

dijit/trunk

Files:

• form/CheckBox.js (modified) (1 diff)
• form/Form.js (modified) (4 diffs)
• form/MultiSelect.js (modified) (4 diffs)
• form/NumberTextBox.js (modified) (1 diff)
• form/ValidationTextBox.js (modified) (1 diff)
• form/_FormWidget.js (modified) (3 diffs)
• tests/form/Form.html (modified) (5 diffs)
• tests/form/test_CheckBox.html (modified) (1 diff)
• tests/form/test_MultiSelect.html (modified) (3 diffs)
• tests/form/test_validate.html (modified) (1 diff)

dijit/trunk/form/CheckBox.js

@@ -44 +44 @@
                 },
 
-                _getValueDeprecated: false, // remove when _FormWidget:getValue is removed
+                _getValueDeprecated: false, // remove when _FormWidget:_getValueDeprecated is removed
                 getValue: function(){
                         // summary: get the value of the widget.
                         return (this.checked ? this.value : false);
+                },
+
+                reset: function(){
+                        this.inherited(arguments);
+                        this.setAttribute('value', this._resetValueAttr);
+                },
+
+                postCreate: function(){
+                        this.inherited(arguments);
+                        this._resetValueAttr = this.value;
                 }
         }

dijit/trunk/form/Form.js

@@ -26 +26 @@
         //      
 
+                reset: function(){
+                        dojo.forEach(this.getDescendants(), function(widget){
+                                if(widget.reset){
+                                        widget.reset();
+                                }
+                        });
+                },
+
                 setValues: function(/*object*/obj){
                         // summary: fill in form values from a JSON structure
@@ -49 +57 @@
                                                 w.setValue(dojo.indexOf(values, w.value) != -1);
                                         });
-                                }else if(widgets[0].setValues){
-                                        // it's a multi-select
-                                        widgets[0].setValues(values);
+                                }else if(widgets[0]._multiValue){
+                                        // it takes an array (e.g. multi-select)
+                                        widgets[0].setValue(values);
                                 }else{
                                         // otherwise, values is a list of values to be assigned sequentially to each widget
@@ -141 +149 @@
                                 if(!name){ return; }
 
-                                if(widget.getValues){
-                                        // A multi-value widget (ex: MultiSelect)
-                                        dojo.setObject(name, widget.getValues(), obj);
+                                // Single value widget (checkbox, radio, or plain <input> type widget
+                                var value = (widget.getValue && !widget._getValueDeprecated) ? widget.getValue() : widget.value;
+
+                                // Store widget's value(s) as a scalar, except for checkboxes which are automatically arrays
+                                if(typeof widget.checked == 'boolean'){
+                                        if(/Radio/.test(widget.declaredClass)){
+                                                // radio button
+                                                if(value !== false){
+                                                        dojo.setObject(name, value, obj);
+                                                }
+                                        }else{
+                                                // checkbox/toggle button
+                                                var ary=dojo.getObject(name, false, obj);
+                                                if(!ary){
+                                                        ary=[];
+                                                        dojo.setObject(name, ary, obj);
+                                                }
+                                                if(value !== false){
+                                                        ary.push(value);
+                                                }
+                                        }
                                 }else{
-                                        // Single value widget (checkbox, radio, or plain <input> type widget
-                                        var value = (widget.getValue && !widget._getValueDeprecated) ? widget.getValue() : widget.value;
-
-                                        // Store widget's value(s) as a scalar, except for checkboxes which are automatically arrays
-                                        if(typeof widget.checked == 'boolean'){
-                                                if(/Radio/.test(widget.declaredClass)){
-                                                        // radio button
-                                                        if(value !== false){
-                                                                dojo.setObject(name, value, obj);
-                                                        }
-                                                }else{
-                                                        // checkbox/toggle button
-                                                        var ary=dojo.getObject(name, false, obj);
-                                                        if(!ary){
-                                                                ary=[];
-                                                                dojo.setObject(name, ary, obj);
-                                                        }
-                                                        if(value !== false){
-                                                                ary.push(value);
-                                                        }
-                                                }
-                                        }else{
-                                                // plain input
-                                                dojo.setObject(name, value, obj);
-                                        }
+                                        // plain input
+                                        dojo.setObject(name, value, obj);
                                 }
                         });
@@ -286 +289 @@
                         }
                         this.inherited(arguments);
+                        dojo.attr(this.domNode, 'onreset', dojo.hitch(this, this._onReset));
+                },
+
+                // onReset: Function
+                //      Callback when user resets the form
+                //      (user can override - return false to cancel the default action)
+                onReset: function(){ 
+                        return true;
+                },
+
+                _onReset: function(){
+                        if(this.onReset()){
+                                this.reset();
+                        }
+                        return false;
                 },
 

dijit/trunk/form/MultiSelect.js

@@ -38 +38 @@
         },
         
-        getValues: function(){
+        _getValueDeprecated: false, // remove when _FormWidget:_getValueDeprecated is removed in 2.0
+        getValue: function(){
                 // summary: Returns an array of the selected options' values
                 return this.getSelected().map(function(n){
@@ -45 +46 @@
         },
         
-        setValues: function(/* Array */values){
+        _multiValue: true, // for Form
+        setValue: function(/* Array */values){
                 // summary: Set the value(s) of this Select based on passed values
                 dojo.query("option",this.domNode).forEach(function(n){
@@ -59 +61 @@
                         n.selected = !n.selected;
                 });
-                if(onChange){ this.onChange(this.getValues()); }
+                this._handleOnChange(this.getValue(), onChange==true);
         },
 
         _onChange: function(/*Event*/ e){
-                this.onChange(this.getValues());
+                this._handleOnChange(this.getValue(), true);
         },
         
@@ -73 +75 @@
         },
         
-        onChange: function(/*String[] */ l){
-                // summary: a stub -- over-ride, or connect
+        postCreate: function(){
+                this._onChange();
         }
 });

dijit/trunk/form/NumberTextBox.js

@@ -33 +33 @@
 
                 format: function(/*Number*/ value, /*Object*/ constraints){
+                        if(typeof value == "string") { return value; }
                         if(isNaN(value)){ return ""; }
                         if(this.editOptions && this._editing){

dijit/trunk/form/ValidationTextBox.js

@@ -136 +136 @@
                 },
 
+                reset: function(){
+                        this.inherited(arguments);
+                        this._hasBeenBlurred = false;
+                },
+
                 //////////// INITIALIZATION METHODS ///////////////////////////////////////
 

dijit/trunk/form/_FormWidget.js

@@ -224 +224 @@
                 // summary: set the value of the widget.
                 this._lastValue = newValue;
-                if(this._lastValueReported == undefined && priorityChange === null){
-                        this._lastValueReported = newValue;
+                if(this._lastValueReported == undefined && (priorityChange === null || !this._onChangeActive)){
+                        this._resetValue = this._lastValueReported = newValue;
                 }
                 if((this.intermediateChanges || priorityChange || priorityChange === undefined) && 
@@ -231 +231 @@
                         this._lastValueReported = newValue;
                         if(this._onChangeActive){ this.onChange(newValue); }
+                }
+        },
+
+        reset: function(){
+                if(this._resetValue !== undefined){
+                        if(this.setValue && !this._getValueDeprecated){
+                                this.setValue(this._resetValue, true);
+                        }else{
+                                this.setAttribute(this._onChangeMonitor, this._resetValue);
+                        }
                 }
         },
@@ -244 +254 @@
                         clearTimeout(this._layoutHackHandle);
                 this.inherited(arguments);
-        },
-
-        postCreate: function(){
-                this._lastValueReported = this[this._onChangeMonitor];
         },
 

dijit/trunk/tests/form/Form.html

@@ -62 +62 @@
                                                 };
 
-                // we reset the form to these values
+                // we change the form to these values
                 var changed =   {
                                                         foo: {bar: {baz: {quux: d("2005-01-01")} } },
@@ -74 +74 @@
                                                         st1: "new simple line 1\nnew simple line 2",
                                                         richtext: "<h1>changed</h1><p>This is the changed content set by setValues</p>",
+                                                        filename: ""
+                                                };
+                // we reset the form to these values
+                var reset =     {
+                                                        foo: {bar: {baz: {quux: d("2007-12-30")} } },
+                                                        available: {from: d("2005-01-02"), to: d("2006-01-02")},
+                                                        plop: {combo: "one"},
+                                                        cb2: ["2", "3"],
+                                                        r2: "2",
+                                                        ms1: ["VA", "WA"],
+                                                        h1: "hidden",
+                                                        t1: "line 1\nline 2",
+                                                        st1: "simple line 1\nsimple line 2",
+                                                        richtext: "<h1>changed</h1><p>This is the changed content set by setValues</p>", // not a form element, so not reset
                                                         filename: ""
                                                 };
@@ -93 +107 @@
                                                         });
                                                 
+                                        },
+                                        function resetTest(){
+                                                dijit.byId("myForm").reset();
+                                                doh.is( dojo.toJson(reset), dojo.toJson(dijit.byId("myForm").getValues()) );
                                         }
                                 ]
@@ -111 +129 @@
         http://www.utexas.edu/teamweb/cgi-bin/generic.cgi 
         http://www.tipjar.com/cgi-bin/test -->
-<form dojoType="dijit.form.Form" id="myForm" encType="multipart/form-data" action="" method="" onsubmit="alert('Attempting to submit form w/values:\n'+dojo.toJson(this.getValues(),true));if(this.isValid()){return confirm('Form is valid, press OK to submit');}else{alert('Form contains invalid data.  Please correct first');return false;}">
+<form dojoType="dijit.form.Form" id="myForm" encType="multipart/form-data" action="" method="" 
+        onreset="return confirm('Press OK to reset widget values')"
+        onsubmit="alert('Attempting to submit form w/values:\n'+dojo.toJson(this.getValues(),true));if(this.isValid()){return confirm('Form is valid, press OK to submit');}else{alert('Form contains invalid data.  Please correct first');return false;}"
+>
 <p>Just HTML text</p>
 <table border=2>
@@ -273 +294 @@
 <button dojoType=dijit.form.Button onClick="setValues();">Set Values to form!</button>
 <button dojoType=dijit.form.Button type="submit">Submit</button>
+<button dojoType=dijit.form.Button type="reset">Reset</button>
 </form>
 

dijit/trunk/tests/form/test_CheckBox.html

@@ -83 +83 @@
                         <input type="button" onclick='dijit.byId("cb7").setAttribute("disabled",false);' value="enable" />
                         <input type="button" onclick='dijit.byId("cb7").setValue("fish");' value='set value to "fish"' />
+                        <input type="button" onclick='dijit.byId("cb7").reset();' value='Reset value+checked' />
                         <span>"onChange" handler updates: [<span id="onvaluechangedoutput"></span>]</span>
                 <br>

dijit/trunk/tests/form/test_MultiSelect.html

@@ -73 +73 @@
                         // there is only one debug button
                         dojo.query(".debug").connect("onclick",function(e){
-                                console.log('select getValues:',dijit.byId("select").getValues());      
-                                console.log('select2 getValues:',dijit.byId("select2").getValues());
-                                console.log('select3 getValues:',dijit.byId("select3").getValues());
+                                console.log('select getValue:',dijit.byId("select").getValue());
+                                console.log('select2 getValue:',dijit.byId("select2").getValue());
+                                console.log('select3 getValue:',dijit.byId("select3").getValue());
                         });
                                 
@@ -116 +116 @@
                 </form>
 
-                <button class="debug">call getValues()</button>
+                <button class="debug">call getValue()</button>
 
                 <h3>markup:</h3>
@@ -134 +134 @@
                 <br><br>
                 <button class='invert' id="i3">invert markup list</button>
-                <button class='set' id="s1" onclick="dijit.byId('select3').setValues(['VA', 'WA']);">set markup list to [VA, WA]</button>
+                <button class='set' id="s1" onclick="dijit.byId('select3').setValue(['VA', 'WA']);">set markup list to [VA, WA]</button>
 </body>
 </html>

dijit/trunk/tests/form/test_validate.html

@@ -220 +220 @@
                                 <button onclick="dijit.byId('q08eur').setAttribute('disabled',true);return false">Disable</button>
                                 <button onclick="dijit.byId('q08eur').setAttribute('disabled',false);return false">Enable</button>
+                                <button onclick="dijit.byId('q08eur').reset();return false">Reset</button>
                         </div>