Changeset 4162

Timestamp:

05/23/06 19:48:06 (3 years ago)

Author:

bill

Message:

add setDisabled() and setCaption() methods to button
(fixes #582)

Location:

trunk

Files:

• src/widget/Button.js (modified) (3 diffs)
• tests/widget/test_Button.html (modified) (4 diffs)

trunk/src/widget/Button.js

@@ -40 +40 @@
                         }
                         dojo.html.disableSelection(this.containerNode);
-                        if ( this.disabled ) {
-                                dojo.html.prependClass(this.domNode, "dojoButtonDisabled");
-                        }
                         
                         // after the browser has had a little time to calculate the size needed
@@ -61 +58 @@
                         this.centerImage.style.left=endWidth+"px";
                         this._setImage(this.disabled ? this.disabledImg : this.inactiveImg);
+
+                        if ( this.disabled ) {
+                                dojo.html.prependClass(this.domNode, "dojoButtonDisabled");
+                        } else {
+                                dojo.html.removeClass(this.domNode, "dojoButtonDisabled");
+                        }
                                 
                         this.domNode.style.height=this.height + "px";
@@ -120 +123 @@
                         // Not sure why this is necessary; but if button is inside a hidden floating
                         // pane (see Mail.html demo).  Revisit when buttons are redesigned
+                        this.sizeMyself();
+                },
+                
+                setCaption: function(content){
+                        this.caption=content;
+                        this.containerNode.innerHTML=content;
+                        this.sizeMyself();
+                },
+                
+                setDisabled: function(disabled){
+                        this.disabled=disabled;
                         this.sizeMyself();
                 }

trunk/tests/widget/test_Button.html

@@ -12 +12 @@
         dojo.require("dojo.widget.Button");
         dojo.require("dojo.widget.Menu2");
+        dojo.require("dojo.widget.Manager");
         dojo.hostenv.writeIncludes();
 </script>
@@ -99 +100 @@
 </div>
 <br clear=both>
-And disabled:
-<div class="box">
-        <button dojoType="Button" disabled="true" onclick='dojo.debug("clicked simple")'>
-                <img src="images/plus.gif"> Create
-        </button>
-        <button dojoType="Button" disabled="true" onclick='dojo.debug("clicked simple")'>
-                <img src="images/plus.gif"><br>Create
-        </button>
-        <button dojoType="dropdownButton" menuId='editMenu' disabled="true">
-                <img src="images/note.gif"> Edit
-        </button>
-        <button dojoType="dropdownButton" menuId='editMenu' disabled="true">
-                <img src="images/note.gif"><br>Edit
-        </button>
-        <button dojoType="comboButton" menuId='saveMenu' onClick='dojo.debug("clicked combo save");' disabled="true">
-                <img src="images/save.gif"> Save
-        </button>
-        <button dojoType="comboButton" menuId='saveMenu' onClick='dojo.debug("clicked combo save");' disabled="true">
-                <img src="images/save.gif"><br>Save
-        </button>
-        <div style="clear: both;"></div>
-</div>
 
 <h2>Sizing</h2>
@@ -146 +125 @@
         <div style="clear: both;"></div>
 </div>
-<p>Disabled:</p>
-<div class="box">
-        <button dojoType="Button" onclick='dojo.debug("big");' disabled="true">
-                <img src="images/flatScreen.gif">
-                <span style="font-size:xx-large">big</span>
-        </button>
-        <button id="smallButton1dis" dojoType="Button" onclick='dojo.debug("small");' disabled="true">
-                <img src="images/arrowSmall.gif">
-                <span style="font-size:x-small">small</span>
-        </button>
-        <button dojoType="Button" onclick='dojo.debug("long");' disabled="true">
-                <img src="images/tube.gif" height=16>
-                long
-        </button>
-        <button dojoType="Button" onclick='dojo.debug("tall");' width2height="0.1" disabled="true">
-           <div>
-                <img src="images/tubeTall.gif" height=75px width=35px><br>
-                <span style="font-size:medium">tall</span>
-           </div>
-        </button>
-        <div style="clear: both;"></div>
-</div>
-
-
+<br clear=both>
 
 <h2>User defined button</h2>
@@ -194 +150 @@
 </div>
 
+<h2>Programatically changing buttons</h2>
+<p>clicking the buttons below will change the buttons above</p>
+<script>
+        function forEachButton(func){
+                dojo.lang.forEach(
+                        dojo.lang.unnest(
+                                dojo.widget.manager.getWidgetsByType("Button"),
+                                dojo.widget.manager.getWidgetsByType("DropDownButton"),
+                                dojo.widget.manager.getWidgetsByType("ComboButton"),
+                                dojo.widget.manager.getWidgetsByType("UserButton")
+                        ),
+                        func
+                );
+        }
+
+        var disabled=false;
+        function toggleDisabled(){      
+                disabled=!disabled;
+                forEachButton(function(widget){ widget.setDisabled(disabled); });
+                dojo.byId("toggle").innerHTML= disabled ? "Enable all" : "Disable all";
+        }
+        var captions=["<img src='images/note.gif'>All", "<i>work</i>", "and", "no", "<h1>play</h1>",
+                                 "<span style='color: red'>makes</span>", "Jack", "<h3>a</h3>", "dull",
+                                 "<img src='images/plus.gif'>boy"];
+        var idx=0;
+        function changeCaptions(){      
+                forEachButton(function(widget){ widget.setCaption( captions[idx++ % captions.length]); });
+        }
+</script>
+<div>
+        <button id="toggle" onclick='toggleDisabled()'>Disable all</button>
+        <button onclick='changeCaptions()'>Change caption</button>
+        <button onclick='location.reload()'>Revert</button>
+</div>
+
 <div dojoType="PopupMenu2" id="editMenu" toggle="wipe">
         <div dojoType="MenuItem2" iconSrc="images/cut.gif" caption="Cut" accelKey="Ctrl+C"