Changeset 11982

Timestamp:

01/09/08 14:20:14 (18 months ago)

Author:

doughays

Message:

Fixes #5222 !strict. Split out the special value processing in _FormWidget and subclassed it into _FormValueWidget so that Button and TextBox? could inherit from different classes, allowing value to be treated like a simple string attribute for Buttons/checkboxes and as complex objects for input widgets (dates/times/currency/etc). Deprecated setChecked and setValue for Button widgets (and subclasses) for the new setAttribute method for all simple attributes.
Removed onChange(string) that was being called for Buttons/checkboxes when the value attribute was changed. Only onChange(boolean) should be called for checkboxes.

Location:

dijit/trunk

Files:

• form/Button.js (modified) (2 diffs)
• form/CheckBox.js (modified) (2 diffs)
• form/Form.js (modified) (3 diffs)
• form/Slider.js (modified) (1 diff)
• form/templates/CheckBox.html (modified) (1 diff)
• form/Textarea.js (modified) (2 diffs)
• form/TextBox.js (modified) (2 diffs)
• form/_FormWidget.js (modified) (4 diffs)
• layout/StackContainer.js (modified) (2 diffs)
• tests/form/test_Button.html (modified) (1 diff)
• tests/form/test_CheckBox.html (modified) (2 diffs)
• tests/form/test_Slider.html (modified) (3 diffs)
• _editor/plugins/LinkDialog.js (modified) (2 diffs)
• _editor/_Plugin.js (modified) (1 diff)

dijit/trunk/form/Button.js

@@ -77 +77 @@
                         dojo.addClass(this.containerNode,"dijitDisplayNone");
                 }
+                dojo.setSelectable(this.focusNode, false);
                 this.inherited(arguments);
         },
@@ -390 +391 @@
         checked: false,
 
+        _onChangeMonitor: 'checked',
+
+        attributeMap: dojo.mixin(dojo.clone(dijit.form.Button.prototype.attributeMap),
+                {checked:"focusNode"}),
+
         _clicked: function(/*Event*/ evt){
-                this.setChecked(!this.checked);
-        },
+                this.setAttribute('checked', !this.checked);
+        },
+
+        setAttribute: function(/*String*/ attr, /*anything*/ value){
+                this.inherited(arguments);
+                switch(attr){
+                        case "checked":
+                                dijit.setWaiState(this.focusNode || this.domNode, "pressed", this.checked);
+                                this._setStateClass();          
+                                this._handleOnChange(this.checked, true);
+                }
+        },
+
 
         setChecked: function(/*Boolean*/ checked){
                 // summary:
                 //      Programatically deselect the button
-                this.checked = checked;
-                dijit.setWaiState(this.focusNode || this.domNode, "pressed", this.checked);
-                this._setStateClass();          
-                this.onChange(checked);
+                dojo.deprecated("setChecked("+checked+") is deprecated. Use setAttribute('checked',"+checked+") instead.", "", "2.0");
+                this.setAttribute('checked', checked);
         }
 });

dijit/trunk/form/CheckBox.js

@@ -33 +33 @@
                 //      equivalent to value field on normal checkbox (if checked, the value is passed as
                 //      the value when form is submitted)
-                value: "on",
-
-                postCreate: function(){
-                        dojo.setSelectable(this.inputNode, false);
-                        this.setChecked(this.checked);
-                        this.inherited(arguments);
-                },
-
-                setChecked: function(/*Boolean*/ checked){
-                        if(dojo.isIE){
-                                if(checked){ this.inputNode.setAttribute('checked', 'checked'); }
-                                else{ this.inputNode.removeAttribute('checked'); }
-                        }else{ this.inputNode.checked = checked; }
-                        this.inherited(arguments);
-                },
-
-                setValue: function(/*String*/ value){
-                        if(value == null){ value = ""; }
-                        this.inputNode.value = value;
-                        dijit.form.CheckBox.superclass.setValue.call(this,value);
-                }
+                value: "on"
         }
 );
@@ -95 +75 @@
                 },
 
-                setChecked: function(/*Boolean*/ checked){
+                setAttribute: function(/*String*/ attr, /*anything*/ value){
                         // If I am being checked then have to deselect currently checked radio button
-                        if(checked){
-                                dojo.forEach(this._groups[this.name], function(widget){
-                                        if(widget != this && widget.checked){
-                                                widget.setChecked(false);
+                        this.inherited(arguments);
+                        switch(attr){
+                                case "checked":
+                                        if(this.checked){
+                                                dojo.forEach(this._groups[this.name], function(widget){
+                                                        if(widget != this && widget.checked){
+                                                                widget.setAttribute('checked', false);
+                                                        }
+                                                }, this);
                                         }
-                                }, this);
                         }
-                        this.inherited(arguments);                      
                 },
 
                 _clicked: function(/*Event*/ e){
                         if(!this.checked){
-                                this.setChecked(true);
+                                this.setAttribute('checked', true);
                         }
                 }

dijit/trunk/form/Form.js

@@ -78 +78 @@
                         });
 
-                        // call setValue() or setChecked() for each widget, according to obj
+                        // call setValue() or setAttribute('checked') for each widget, according to obj
                         for(var name in map){
                                 var widgets = map[name],                                                // array of widgets w/this name
@@ -85 +85 @@
                                         values = [ values ];
                                 }
-                                if(widgets[0].setChecked){
+                                if(typeof widgets[0].checked == 'boolean'){
                                         // for checkbox/radio, values is a list of which widgets should be checked
                                         dojo.forEach(widgets, function(w, i){
-                                                w.setChecked(dojo.indexOf(values, w.value) != -1);
+                                                w.setAttribute('checked', (dojo.indexOf(values, w.value) != -1));
                                         });
                                 }else{
@@ -176 +176 @@
                         var obj = {};
                         dojo.forEach(this.getDescendants(), function(widget){
-                                var value = widget.getValue ? widget.getValue() : widget.value;
+                                var value = (widget.getValue && !widget._getValueDeprecated) ? widget.getValue() : widget.value;
                                 var name = widget.name;
                                 if(!name){ return; }
 
                                 // Store widget's value(s) as a scalar, except for checkboxes which are automatically arrays
-                                if(widget.setChecked){
+                                if(typeof widget.checked == 'boolean'){
                                         if(/Radio/.test(widget.declaredClass)){
                                                 // radio button

dijit/trunk/form/Slider.js

@@ -10 +10 @@
 dojo.declare(
         "dijit.form.HorizontalSlider",
-        [dijit.form._FormWidget, dijit._Container],
+        [dijit.form._FormValueWidget, dijit._Container],
 {
         // summary

dijit/trunk/form/templates/CheckBox.html

@@ -3 +3 @@
                 type="${type}" name="${name}"
                 class="dijitReset dijitCheckBoxInput"
-                dojoAttachPoint="inputNode,focusNode"
+                dojoAttachPoint="focusNode"
                 dojoAttachEvent="onmouseover:_onMouse,onmouseout:_onMouse,onclick:_onClick"
 /></div>

dijit/trunk/form/Textarea.js

@@ -7 +7 @@
 dojo.declare(
         "dijit.form.Textarea",
-        dijit.form._FormWidget,
+        dijit.form._FormValueWidget,
         {
         // summary: A resizing textarea widget
@@ -21 +21 @@
         //
 
-        attributeMap: dojo.mixin(dojo.clone(dijit.form._FormWidget.prototype.attributeMap),
+        attributeMap: dojo.mixin(dojo.clone(dijit.form._FormValueWidget.prototype.attributeMap),
                 {style:"styleNode", 'class':"styleNode"}),
 

dijit/trunk/form/TextBox.js

@@ -5 +5 @@
 dojo.declare(
         "dijit.form.TextBox",
-        dijit.form._FormWidget,
+        dijit.form._FormValueWidget,
         {
                 // summary:
@@ -34 +34 @@
                 baseClass: "dijitTextBox",
 
-                attributeMap: dojo.mixin(dojo.clone(dijit.form._FormWidget.prototype.attributeMap),
+                attributeMap: dojo.mixin(dojo.clone(dijit.form._FormValueWidget.prototype.attributeMap),
                         {maxLength:"focusNode"}),
 

dijit/trunk/form/_FormWidget.js

@@ -8 +8 @@
         /*
         Summary:
-                FormElement widgets correspond to native HTML elements such as <input> or <button> or <select>.
-                Each FormElement represents a single input value, and has a (possibly hidden) <input> element,
-                to which it serializes its input value, so that form submission (either normal submission or via FormBind?)
-                works as expected.
+                _FormWidget's correspond to native HTML elements such as <checkbox> or <button>.
+                Each _FormWidget represents a single HTML element.
 
                 All these widgets should have these attributes just like native HTML input elements.
-                You can set them during widget construction, but after that they are read only.
+                You can set them during widget construction.
 
                 They also share some common methods.
@@ -25 +23 @@
         baseClass: "",
 
+        // name: String
+        //              Name used when submitting form; same as "name" attribute or plain HTML elements
+        name: "",
+
+        // alt: String
+        //              Corresponds to the native HTML <input> element's attribute.
+        alt: "",
+
         // value: String
         //              Corresponds to the native HTML <input> element's attribute.
         value: "",
-
-        // name: String
-        //              Name used when submitting form; same as "name" attribute or plain HTML elements
-        name: "",
-
-        // alt: String
-        //              Corresponds to the native HTML <input> element's attribute.
-        alt: "",
 
         // type: String
@@ -65 +63 @@
         // require the 'name' attribute at element creation time.
         attributeMap: dojo.mixin(dojo.clone(dijit._Widget.prototype.attributeMap),
-                {disabled:"focusNode", readOnly:"focusNode", id:"focusNode", tabIndex:"focusNode", alt:"focusNode"}),
+                {value:"focusNode", disabled:"focusNode", readOnly:"focusNode", id:"focusNode", tabIndex:"focusNode", alt:"focusNode"}),
 
         setAttribute: function(/*String*/ attr, /*anything*/ value){
@@ -218 +216 @@
         },
 
+        _onChangeMonitor: 'value',
+        _onChangeActive: false,
+
+        _handleOnChange: function(/*anything*/ newValue, /*Boolean, optional*/ priorityChange){
+                // summary: set the value of the widget.
+                this._lastValue = newValue;
+                if(this._lastValueReported == undefined && priorityChange === null){
+                        this._lastValueReported = newValue;
+                }
+                if((this.intermediateChanges || priorityChange || priorityChange === undefined) && 
+                        ((newValue && newValue.toString)?newValue.toString():newValue) !== ((this._lastValueReported && this._lastValueReported.toString)?this._lastValueReported.toString():this._lastValueReported)){
+                        this._lastValueReported = newValue;
+                        if(this._onChangeActive){ this.onChange(newValue); }
+                }
+        },
+
+        create: function(){
+                this.inherited(arguments);
+                this._onChangeActive = true;
+                this._setStateClass();
+        },
+
         postCreate: function(){
-                this.setValue(this.value, null); // null reserved for initial value
-                this._setStateClass();
+                this._lastValueReported = this[this._onChangeMonitor];
+        },
+
+        setValue: function(/*String*/ value){
+                dojo.deprecated("dijit.form._FormWidget:setValue("+value+") is deprecated.  Use setAttribute('value',"+value+") instead.", "", "2.0");
+                this.setAttribute('value', value);
+        },
+
+        _getValueDeprecated: true, // Form uses this, remove when getValue is removed
+        getValue: function(){
+                dojo.deprecated("dijit.form._FormWidget:getValue() is deprecated.  Use widget.value instead.", "", "2.0");
+                return this.value;
+        }
+});
+
+dojo.declare("dijit.form._FormValueWidget", dijit.form._FormWidget,
+{
+        /*
+        Summary:
+                _FormValueWidget's correspond to native HTML elements such as <input> or <select> that have user changeable values.
+                Each _ValueWidget represents a single input value, and has a (possibly hidden) <input> element,
+                to which it serializes its input value, so that form submission (either normal submission or via FormBind?)
+                works as expected.
+        */
+
+        attributeMap: dojo.mixin(dojo.clone(dijit.form._FormWidget.prototype.attributeMap),
+                {value:""}),
+
+        postCreate: function(){
+                this.setValue(this.value, null);
         },
 
         setValue: function(/*anything*/ newValue, /*Boolean, optional*/ priorityChange){
                 // summary: set the value of the widget.
-                this._lastValue = newValue;
+                this._handleOnChange(newValue, priorityChange);
                 dijit.setWaiState(this.focusNode || this.domNode, "valuenow", this.forWaiValuenow());
-                if(priorityChange === undefined){ priorityChange = true; } // setValue with value only should fire onChange
-                if(this._lastValueReported == undefined && priorityChange === null){ // don't report the initial value
-                        this._lastValueReported = newValue;
-                }
-                if((this.intermediateChanges || priorityChange) && 
-                        ((newValue && newValue.toString)?newValue.toString():newValue) !== ((this._lastValueReported && this._lastValueReported.toString)?this._lastValueReported.toString():this._lastValueReported)){
-                        this._lastValueReported = newValue;
-                        this.onChange(newValue);
-                }
-        },
-
+        },
+
+        _getValueDeprecated: false, // remove when _FormWidget:getValue is removed
         getValue: function(){
                 // summary: get the value of the widget.

dijit/trunk/layout/StackContainer.js

@@ -315 +315 @@
                         if(this._currentChild){
                                 var oldButton=this.pane2button[this._currentChild];
-                                oldButton.setChecked(false);
+                                oldButton.setAttribute('checked', false);
                                 oldButton.focusNode.setAttribute("tabIndex", "-1");
                         }
 
                         var newButton=this.pane2button[page];
-                        newButton.setChecked(true);
+                        newButton.setAttribute('checked', true);
                         this._currentChild = page;
                         newButton.focusNode.setAttribute("tabIndex", "0");
@@ -345 +345 @@
                 // TODO: this is a bit redundant with forward, back api in StackContainer
                 adjacent: function(/*Boolean*/ forward){
-                        var forward = this.isLeftToRight()? forward : !forward;
+                        forward = this.isLeftToRight()? forward : !forward;
                         // find currently focused button in children array
                         var children = this.getChildren();

dijit/trunk/tests/form/test_Button.html

@@ -129 +129 @@
         <p>The button CSS as well as the icon CSS can change on toggle </p>
         <div class="box">
-                <button dojoType="dijit.form.ToggleButton" onChange="console.log('toggled button checked='+arguments[0]);" iconClass="dijitCheckBoxIcon">
+                <button dojoType="dijit.form.ToggleButton" checked onChange="console.log('toggled button checked='+arguments[0]);" iconClass="dijitCheckBoxIcon">
                         Toggle me
                 </button>

dijit/trunk/tests/form/test_CheckBox.html

@@ -37 +37 @@
                         var params = {id: "cb6", name: "cb6"};
                         var widget = new dijit.form.CheckBox(params, dojo.byId("checkboxContainer"));
-                        widget.setChecked(true);
+                        widget.setAttribute('checked', true);
                 });
         </script>
@@ -53 +53 @@
         </p>
         <!--  <form onSubmit="return outputValues(this);"> -->
+        <!--    to test form submission, you'll need to create an action handler similar to
+                http://www.utexas.edu/teamweb/cgi-bin/generic.cgi -->
         <form>
                 <input type="checkbox" name="cb0" id="cb0" />

dijit/trunk/tests/form/test_Slider.html

@@ -35 +35 @@
                                                     console.log(arguments);
                                                 },
+                                                name:"programaticSlider",
                                                 style:"height:165px",
                                                 minimum:1000,
@@ -71 +72 @@
                 Also try using the arrow keys, buttons, or clicking on the progress bar to move the slider.
                 <br>
+                <!--    to test form submission, you'll need to create an action handler similar to
+                        http://www.utexas.edu/teamweb/cgi-bin/generic.cgi -->
+                <form id="form1" action="" name="example" method="post">
                 <br>initial value=10, min=0, max=100, pageIncrement=100, onChange event triggers input box value change immediately<br>
 
@@ -176 +180 @@
                 <div id="programaticSlider"></div>
 
+                        <script>
+                                function displayData() {
+                                        var f = document.getElementById("form1");
+                                        var s = "";
+                                        for (var i = 0; i < f.elements.length; i++) {
+                                                var elem = f.elements[i];
+                                                if (elem.name == "button")  { continue; }
+                                                s += elem.name + ": " + elem.value + "\n";
+                                        }
+                                        alert(s);
+                                }
+                        </script>
+
+                        <div>
+                                <button name="button" onclick="displayData(); return false;">view data</button>
+                                <input type="submit" name="submit" />
+                        </div>
+
+                </form>
         </body>
 </html>

dijit/trunk/_editor/plugins/LinkDialog.js

@@ -15 +15 @@
         {
                 // summary: a DropDownButton but button can be displayed in two states (checked or unchecked)
-                setChecked: dijit.form.ToggleButton.prototype.setChecked
+                checked: false,
+                setAttribute: dijit.form.ToggleButton.prototype.setAttribute
         }
 );
@@ -143 +144 @@
                                         // display button differently if there is an existing link associated with the current selection
                                         var hasA = dojo.withGlobal(this.editor.window, "hasAncestorElement",dijit._editor.selection, ['a']);
-                                        this.button.setChecked(hasA);
+                                        this.button.setAttribute('checked', hasA);
                                 }catch(e){
                                         console.debug(e); //FIXME: probably shouldn't squelch an exception here

dijit/trunk/_editor/_Plugin.js

@@ -54 +54 @@
                                 var enabled = _e.queryCommandEnabled(_c);
                                 this.button.setAttribute('disabled',!enabled);
-                                if(this.button.setChecked){
-                                        this.button.setChecked(_e.queryCommandState(_c));
+                                if(typeof this.button.checked == 'boolean'){
+                                        this.button.setAttribute('checked', _e.queryCommandState(_c));
                                 }
                         }catch(e){