Changeset 12189

Timestamp:

01/28/08 22:28:52 (12 months ago)

Author:

bill

Message:

"Hidden" widget, copied over from dojox.
The "Hidden" widget is basically equivalent to <input dojoType="dijit.form.TextBox?" type="hidden"> but with less overhead; not sure if it's worth having a separate widget for hidden input fields but adding for now.
Fixes #5700.

Also checking in forgotten updates to Form test for MultiSelect?. Refs #5359.

Location:

dijit/trunk

Files:

• form/Hidden.js (copied) (copied from dojox/trunk/widget/FormWidgets.js) (2 diffs)
• tests/form/Form.html (modified) (4 diffs)

dijit/trunk/form/Hidden.js

@@ -1 @@
-dojo.provide("dojox.widget.FormWidgets");
-dojo.experimental("dojox.widget.FormWidgets");
+dojo.provide("dijit.form.Hidden");
 
 dojo.require("dijit._Widget");
 
-dojo.declare("dojox.widget.Select",dijit._Widget,{
-        // summary: Wrapper for a native select multiple="true" element to
-        //              interact with dijit.form.Form
-        //
-        // name: String
-        //              The name of this form element
-        name: "",
-        
-        postCreate: function(){
-                this.inherited(arguments);
-                this._selected = [];
-                this.connect(this.domNode,"onchange","_setSelected");
-        },
-        
-        addSelected: function(/* dojox.widget.Select */select){
-                // summary: Appends the selected nodes af an passed Select widget
-                //                      instance to this Select widget.
-                //
-                // example:
-                // |    // move all the selected values from "bar" to "foo"
-                // |    dijit.byId("foo").addSelected(dijit.byId("bar"));
-                
-                select._selected.forEach(function(n){
-                        this.domNode.appendChild(n);
-                },this);
-                dojo.hitch(select,"_setSelected");
-                this._setSelected();
-
-        },
-                                        
-        getSelected: function(){
-                // summary: Access the NodeList of the selected options directly
-                return this._setSelected(); // dojo.NodeList
-        },
-        
-        getValues: function(){
-                // summary: Returns an array of the selected options value's
-                var vals = [];
-                this._setSelected().forEach(function(n){
-                        vals.push(n.value);
-                });
-                return vals; // Array
-        },
-        
-        getValue: function(){
-                // summary: serialize the values of the selected nodes
-                return this.getValues(); // Array
-        },
-        
-        setValue: function(/* Array */values){
-                // summary: Set the value(s) of this Select based on passed values
-                dojo.query("option",this.domNode).forEach(function(n){
-                        n.selected = (dojo.indexOf(values,n.value) === 0);
-                });
-        },
-                
-        invertSelection: function(onChange){
-                // summary: Invert the selection
-                // onChange: Boolean
-                //              If null, onChange is not fired.
-                this._selected = dojo.query("option",this.domNode).filter(function(n){
-                        n.selected = !n.selected;
-                        return n.selected; // Boolean
-                });
-                if(onChange){ this.onChange(); }
-        },
-
-        _setSelected: function(e){
-                // summary: Re-populate the selected NodeList
-                this._selected = dojo.query("option",this.domNode).filter(function(n){
-                        return n.selected; // Boolean
-                });
-                if(e && e.type){ this.onChange(this._selected); }
-                return this._selected; // dojo.NodeList
-        },
-        
-        // for layout widgets:
-        resize: function(/* Object */size){
-                dojo.style(this.domNode,"width",size.w+"px");
-                dojo.style(this.domNode,"height",size.h+"px");
-        },
-        
-        onChange: function(e){
-                // summary: a stub -- over-ride, or connect
-        }
-        
-});
-
-dojo.declare("dojox.widget.Hidden",
-        dijit._Widget,
+dojo.declare("dijit.form.Hidden",
+        [dijit._Widget, dijit._Templated],
         {
-        // summary: A widget corosponding to a native input type="hidden" element,
+        // summary:
+        //              A widget corresponding to a native input type="hidden" element,
         //              which responds to dijit.form.Form, and degrades.
         //
         // example:
-        //      |       <input type="hidden" dojoType="dojox.widget.Hidden" name="foo" value="bar" />
+        //      |       <input type="hidden" dojoType="dijit.form.Hidden" name="foo" value="bar" />
         //
+
+        // name: String
+        //              Name used when submitting form; same as "name" attribute or plain HTML elements
         name: "",
-        
-        postCreate: function(){
-                this.inherited(arguments);
-                this.connect(this.domNode,"onchange","onChange");
-        },
-        
+
+        // value: String
+        //              Corresponds to the native HTML <input> element's attribute.
+        value: "",
+
+        templateString: "<input type='hidden' dojoAttachEvent='onchange: onChange'>",
+        attributeMap: {value:"domNode", name:"domNode", id:"domNode"},
+
         getValue: function(){
                 // summary: Normalized getter for this input
@@ -123 +40 @@
         }
 });
-
-dojo.declare("dojox.widget.TextArea",dojox.widget.Hidden,{
-        // summary: A Simple textarea that degrades, and responds to
-        //              minimal LayoutContiner usage, and works with dijit.form.Form
-        
-        resize: function(/* Object */size){
-                dojo.style(this.domNode,"width",size.w+"px");
-                dojo.style(this.domNode,"height",size.h+"px");
-        }
-        
-});

dijit/trunk/tests/form/Form.html

@@ -23 +23 @@
                 dojo.require("dijit.form.DateTextBox");
                 dojo.require("dijit.form.Button");
+                dojo.require("dijit.form.MultiSelect");
+                dojo.require("dijit.form.Hidden");
                 dojo.require("dijit.Editor");
 
@@ -51 +53 @@
                                                         cb2: ["2", "3"],
                                                         r2: "2",
+                                                        ms1: ["VA", "WA"],
+                                                        h1: "hidden",
                                                         richtext: "<h1>original</h1><p>This is the default content</p>"
                                                 };
@@ -61 +65 @@
                                                         cb2: ["4"],
                                                         r2: "1",
+                                                        ms1: ["FL", "CA"],
+                                                        h1: "still hidden",
                                                         richtext: "<h1>changed</h1><p>This is the changed content set by setValues</p>"
                                                 };
@@ -201 +207 @@
 </td>
 </tr>
+
+<tr>
+        <td>Multi-select</td><td>ms1</td>
+        <td>
+                <select id="ms1" multiple="true" name="ms1"
+                        dojoType="dijit.form.MultiSelect"
+                        style="height:100px; width:175px; border:5px solid #ededed;">
+
+                        <option value="TN">Tennessee</option>
+                        <option value="VA" selected="true">Virginia</option>
+                        <option value="WA" selected="true">Washington</option>
+                        <option value="FL">Florida</option>
+                        <option value="CA">California</option>
+
+                </select>
+        </td>
+</tr>
+
+<tr>
+        <td>Hidden input</td>
+        <td>h1</td>
+        <td><input id="h1" name="h1" dojoType="dijit.form.Hidden" value="hidden"></td>
+</tr>
+
 <tr>
 <td>Editor widget</td><td>richtext</td>