Changeset 12572

Timestamp:

02/20/08 17:25:50 (11 months ago)

Author:

doughays

Message:

Fixes #5327 #5907 !strict. Add onFocus and onBlur hooks to all widgets inheriting from dijit._Widget. Refactored existing _onBlur and _onFocus methods to call this.inherited. Added example user-defined onfocus/onblur methods to a sampling of widget unit tests. Renamed widget event methods like onfocus and onkeyup that will collide with user-defined event handlers.

Location:

dijit/trunk

Files:

• form/Button.js (modified) (2 diffs)
• form/ComboBox.js (modified) (12 diffs)
• form/FilteringSelect.js (modified) (2 diffs)
• form/NumberTextBox.js (modified) (2 diffs)
• form/Slider.js (modified) (1 diff)
• form/templates/ComboBox.html (modified) (1 diff)
• form/templates/Spinner.html (modified) (1 diff)
• form/templates/TextBox.html (modified) (1 diff)
• form/templates/ValidationTextBox.html (modified) (1 diff)
• form/TextBox.js (modified) (1 diff)
• form/ValidationTextBox.js (modified) (3 diffs)
• form/_DateTimeTextBox.js (modified) (1 diff)
• form/_FormWidget.js (modified) (1 diff)
• InlineEditBox.js (modified) (1 diff)
• Menu.js (modified) (1 diff)
• tests/form/test_ComboBox.html (modified) (1 diff)
• tests/form/test_FilteringSelect.html (modified) (1 diff)
• tests/form/test_SimpleTextarea.html (modified) (2 diffs)
• tests/form/test_Textarea.html (modified) (1 diff)
• tests/form/test_validate.html (modified) (1 diff)
• tests/layout/test_TabContainer.html (modified) (1 diff)
• tests/test_Dialog.html (modified) (1 diff)
• tests/test_Editor.html (modified) (1 diff)
• tests/tree/test_Tree_v1.html (modified) (1 diff)
• Tooltip.js (modified) (2 diffs)
• Tree.js (modified) (1 diff)
• _editor/plugins/FontChoice.js (modified) (1 diff)
• _editor/RichText.js (modified) (2 diffs)
• _Widget.js (modified) (1 diff)

dijit/trunk/form/Button.js

@@ -195 +195 @@
                 this._closeDropDown();
                 // don't focus on button.  the user has explicitly focused on something else.
+                this.inherited(arguments);
         },
 
@@ -357 +358 @@
         },
 
-        _onBlur: function(evt){
+        _onBlur: function(){
                 this.inherited(arguments);
                 this._focusedNode = null;

dijit/trunk/form/ComboBox.js

@@ -73 +73 @@
                 hasDownArrow:true,
 
-                // _hasFocus: Boolean
-                //              Represents focus state of the textbox
-                // TODO: get rid of this; it's unnecessary (but currently referenced in FilteringSelect)
-                _hasFocus:false,
-
                 templatePath: dojo.moduleUrl("dijit.form", "templates/ComboBox.html"),
 
@@ -83 +78 @@
 
                 _lastDisplayedValue: "",
-
-                getValue:function(){
-                        // don't get the textbox value but rather the previously set hidden value
-                        return dijit.form.TextBox.superclass.getValue.apply(this, arguments);
-                },
 
                 setDisplayedValue:function(/*String*/ value){
@@ -168 +158 @@
                 },      
                 
-                onkeypress: function(/*Event*/ evt){
+                _onKeyPress: function(/*Event*/ evt){
                         // summary: handles keyboard events
 
@@ -238 +228 @@
                                         //              _onBlur handler
                                         if(pw && (
-                                                        newvalue == pw._messages["previousMessage"] ||
-                                                        newvalue == pw._messages["nextMessage"])
+                                                newvalue == pw._messages["previousMessage"] ||
+                                                newvalue == pw._messages["nextMessage"])
                                         ){
                                                 break;
@@ -444 +434 @@
                 },
 
-                _onBlur: function(){
-                        // summary: called magically when focus has shifted away from this widget and it's dropdown
-                        this._hasFocus=false;
-                        this._hasBeenBlurred = true;
-                        this._hideResultList();
-                        this._arrowIdle();
+                _setBlurValue: function(){
                         // if the user clicks away from the textbox OR tabs away, set the
                         // value to the textbox value
-
                         // #4617: 
                         //              if value is now more choices or previous choices, revert
@@ -458 +442 @@
                         var newvalue=this.getDisplayedValue();
                         var pw = this._popupWidget;
-                        if(     pw && (
-                                        newvalue == pw._messages["previousMessage"] ||
-                                        newvalue == pw._messages["nextMessage"]
+                        if(pw && (
+                                newvalue == pw._messages["previousMessage"] ||
+                                newvalue == pw._messages["nextMessage"]
                                 )
                         ){
@@ -469 +453 @@
                 },
 
-                onfocus:function(/*Event*/ evt){
-                        this._hasFocus=true;
-                        
-                        // update styling to reflect that we are focused
-                        this._onMouse(evt);
+                _onBlur: function(){
+                        // summary: called magically when focus has shifted away from this widget and it's dropdown
+                        this._hideResultList();
+                        this._arrowIdle();
+                        this.inherited(arguments);
                 },
 
@@ -702 +686 @@
                 //              Focus-less div based menu for internal use in ComboBox
 
-                templateString: "<ul class='dijitMenu' dojoAttachEvent='onmousedown,onmouseup,onmouseover,onmouseout' tabIndex='-1' style='overflow:\"auto\";'>"
+                templateString: "<ul class='dijitMenu' dojoAttachEvent='onmousedown:_onMouseDown,onmouseup:_onMouseUp,onmouseover:_onMouseOver,onmouseout:_onMouseOut' tabIndex='-1' style='overflow:\"auto\";'>"
                                 +"<li class='dijitMenuItem dijitMenuPreviousButton' dojoAttachPoint='previousButton'></li>"
                                 +"<li class='dijitMenuItem dijitMenuNextButton' dojoAttachPoint='nextButton'></li>"
@@ -789 +773 @@
                 },
 
-                onmousedown: function(/*Event*/ evt){
+                _onMouseDown: function(/*Event*/ evt){
                         dojo.stopEvent(evt);
                 },
 
-                onmouseup: function(/*Event*/ evt){
+                _onMouseUp: function(/*Event*/ evt){
                         if(evt.target === this.domNode){
                                 return;
@@ -811 +795 @@
                 },
 
-                onmouseover: function(/*Event*/ evt){
+                _onMouseOver: function(/*Event*/ evt){
                         if(evt.target === this.domNode){ return; }
                         var tgt = evt.target;
@@ -824 +808 @@
                 },
 
-                onmouseout:function(/*Event*/ evt){
+                _onMouseOut:function(/*Event*/ evt){
                         if(evt.target === this.domNode){ return; }
                         this._blurOptionNode();
@@ -1069 +1053 @@
 });
 
+

dijit/trunk/form/FilteringSelect.js

@@ -61 +61 @@
                                 //this._setValue("", "");
                                 //#3285: change CSS to indicate error
-                                if(!this._hasFocus){ this.valueNode.value=""; }
-                                dijit.form.TextBox.superclass.setValue.call(this, undefined, !this._hasFocus);
+                                if(!this._focused){ this.valueNode.value=""; }
+                                dijit.form.TextBox.superclass.setValue.call(this, undefined, !this._focused);
                                 this._isvalid=false;
-                                this.validate(this._hasFocus);
+                                this.validate(this._focused);
                         }else{
                                 this._setValueFromItem(result[0], priorityChange);
@@ -148 +148 @@
                         // return: the label that the ComboBox should display
                         return store.getValue(item, this.searchAttr);
-                },
-
-                onkeyup: function(/*Event*/ evt){
-                        // summary: internal function
-
-                        // FilteringSelect needs to wait for the complete label before
-                        // committing to a reverse lookup
-
-                        //this.setDisplayedValue(this.textbox.value);
                 },
 

dijit/trunk/form/NumberTextBox.js

@@ -17 +17 @@
                 editOptions: { pattern: '#.######' },
 
-                _editing: false,
-
-                onfocus: function(evt){
-                        this._editing = true;
-//                      this.inherited(arguments);
-                        this.setValue(this.getValue()); 
-                },
-
-                _onBlur: function(evt){
-                        this._editing = false;
-                        this.inherited(arguments);
+                _refreshState: function(){
+                        this.setValue(this.getValue(), false);  
                 },
 
@@ -35 +26 @@
                         if(typeof value == "string") { return value; }
                         if(isNaN(value)){ return ""; }
-                        if(this.editOptions && this._editing){
+                        if(this.editOptions && this._focused){
                                 constraints = dojo.mixin(dojo.mixin({}, this.editOptions), this.constraints);
                         }

dijit/trunk/form/Slider.js

@@ -200 +200 @@
         },
 
-        _onBlur: function(){
-                dijit.form.HorizontalSlider.superclass.setValue.call(this, this.value, true);
-        },
-
         postCreate: function(){
                 if(this.showButtons){

dijit/trunk/form/templates/ComboBox.html

@@ -13 +13 @@
                 ><div class="dijitReset dijitInputField"
                         ><input type="text" autocomplete="off" name="${name}" class='dijitReset'
-                        dojoAttachEvent="onkeypress, onkeyup, onfocus, compositionend"
+                        dojoAttachEvent="onkeypress:_onKeyPress, onfocus:_update, compositionend"
                         dojoAttachPoint="textbox,focusNode" waiRole="textbox" waiState="haspopup-true,autocomplete-list"
                 /></div

dijit/trunk/form/templates/Spinner.html

@@ -22 +22 @@
                 ><div class="dijitReset dijitValidationIconText">&Chi;</div
                 ><div class="dijitReset dijitInputField"
-                        ><input class='dijitReset' dojoAttachPoint="textbox,focusNode" type="${type}" dojoAttachEvent="onfocus,onkeyup,onkeypress:_onKeyPress"
+                        ><input class='dijitReset' dojoAttachPoint="textbox,focusNode" type="${type}" dojoAttachEvent="onfocus:_update,onkeyup:_update,onkeypress:_onKeyPress"
                                 waiRole="spinbutton" autocomplete="off" name="${name}"
                 /></div

dijit/trunk/form/templates/TextBox.html

@@ -1 +1 @@
 <input class="dijit dijitReset dijitLeft" dojoAttachPoint='textbox,focusNode' name="${name}"
-        dojoAttachEvent='onmouseenter:_onMouse,onmouseleave:_onMouse,onfocus:_onMouse,onblur:_onMouse,onkeyup,onkeypress:_onKeyPress'
+        dojoAttachEvent='onmouseenter:_onMouse,onmouseleave:_onMouse,onfocus:_onMouse,onblur:_onMouse,onkeypress:_onKeyPress'
         autocomplete="off" type="${type}"
         />

dijit/trunk/form/templates/ValidationTextBox.html

@@ -6 +6 @@
                 ><div class="dijitReset dijitValidationIconText">&Chi;</div
                 ><div class="dijitReset dijitInputField"
-                        ><input class="dijitReset" dojoAttachPoint='textbox,focusNode' dojoAttachEvent='onfocus,onblur:_onMouse,onkeyup,onkeypress:_onKeyPress' autocomplete="off"
+                        ><input class="dijitReset" dojoAttachPoint='textbox,focusNode' dojoAttachEvent='onfocus:_update,onkeyup:_update,onblur:_onMouse,onkeypress:_onKeyPress' autocomplete="off"
                         type='${type}' name='${name}'
                 /></div

dijit/trunk/form/TextBox.js

@@ -105 +105 @@
                 },
 
-                // event handlers, you can over-ride these in your own subclasses
-                _onBlur: function(){
+                _setBlurValue: function(){
                         this.setValue(this.getValue(), (this.isValid ? this.isValid() : true));
                 },
 
-                onkeyup: function(){
-                        // TODO: it would be nice to massage the value (ie: automatic uppercase, etc) as the user types
-                        // but this messes up the cursor position if you are typing into the middle of a word, and
-                        // also trimming doesn't work correctly (it prevents spaces between words too!)
-                        // this.setValue(this.getValue());
+                _onBlur: function(){
+                        this._setBlurValue();
+                        this.inherited(arguments);
                 }
         }

dijit/trunk/form/ValidationTextBox.js

@@ -56 +56 @@
                 setValue: function(){
                         this.inherited(arguments);
-                        this.validate(false);
+                        this.validate(this._focused);
                 },
 
@@ -123 +123 @@
                 },
 
-                _hasBeenBlurred: false,
-
-                _onBlur: function(){
-                        this._hasBeenBlurred = true;
-                        this.validate(false);
-                        this.inherited(arguments);
+                _refreshState: function(){
+                        this.validate(this._focused);
                 },
 
                 _update: function(/*Event*/e){
-                        this.validate(true);
+                        this._refreshState();
                         this._onMouse(e);       // update CSS classes
-                },
-
-                reset: function(){
-                        this.inherited(arguments);
-                        this._hasBeenBlurred = false;
                 },
 
@@ -154 +145 @@
                         var p = this.regExpGen(this.constraints);
                         this.regExp = p;
-                        // make value a string for all types so that form reset works well
-
-                        this.connect(this, "onfocus", this._update);
-                        this.connect(this, "onkeyup", this._update);
                 }
         }

dijit/trunk/form/_DateTimeTextBox.js

@@ -119 +119 @@
                         // summary: called magically when focus has shifted away from this widget and it's dropdown
                         this._close();
-                        this.inherited('_onBlur', arguments);
+                        this.inherited(arguments);
                         // don't focus on <input>.  the user has explicitly focused on something else.
                 },

dijit/trunk/form/_FormWidget.js

@@ -235 +235 @@
 
         reset: function(){
+                this._hasBeenBlurred = false;
                 if(this._resetValue !== undefined){
                         if(this.setValue && !this._getValueDeprecated){

dijit/trunk/InlineEditBox.js

@@ -349 +349 @@
                 // summary:
                 //      Called when focus moves outside the editor
+                this.inherited(arguments);
                 if(this._exitInProgress){
                         // when user clicks the "save" button, focus is shifted back to display text, causing this

dijit/trunk/Menu.js

@@ -265 +265 @@
 
                 this._onBlur = function(){
+                        this.inherited(arguments);
                         // Usually the parent closes the child widget but if this is a context
                         // menu then there is no parent

dijit/trunk/tests/form/test_ComboBox.html

@@ -144 +144 @@
                 <option>Wyoming</option>
         </select>
-        onChange:<input id="oc1" disabled value="not fired yet!" autocomplete="off">
+        <br>onChange:<input id="oc1" disabled value="not fired yet!" autocomplete="off">
+        <input type="button" value="Set displayed value to Kentucky" onClick="dijit.byId('setvaluetest').setDisplayedValue('Kentucky')">
+        <input type="button" value="Set displayed value to Canada" onClick="dijit.byId('setvaluetest').setDisplayedValue('Canada')">
 
         <hr>

dijit/trunk/tests/form/test_FilteringSelect.html

@@ -67 +67 @@
                                 invalidMessage="Invalid state name"
                                 onChange="dojo.byId('oc1').value=arguments[0]"
+                                onFocus="console.log('user focus handler')"
+                                onBlur="console.log('user blur handler')"
                 >
                         <option value="blank"></option>

dijit/trunk/tests/form/test_SimpleTextarea.html

@@ -12 +12 @@
         </style>
         
-        <script type="text/javascript" djConfig="isDebug:false, parseOnLoad: true"
+        <script type="text/javascript" djConfig="isDebug:true, parseOnLoad: true"
                 src="../../../dojo/dojo.js"></script>
 
@@ -33 +33 @@
 
                 <h2>Plain textarea (rows=5, cols=50)</h2>
-                <textarea dojoType="dijit.form.SimpleTextarea" name="ta2" rows=5 cols=50>
+                <textarea dojoType="dijit.form.SimpleTextarea" name="ta2" rows=5 cols=50
+                        onFocus="console.log('user focus handler')"
+                        onBlur="console.log('user blur handler')"
+                >
                         shichashaw, textarea text baw.                          
                 </textarea>

dijit/trunk/tests/form/test_Textarea.html

@@ -42 +42 @@
                 <br><label for="simple">Inline:</label><div name="simpleTextArea" dojoType="dijit.form.Textarea" id="simple" style="width:33%;border:20px solid red;"
                         onChange="dojo.byId('ocSimple').value=arguments[0]"
+                        onFocus="console.log('user focus handler')"
+                        onBlur="console.log('user blur handler')"
                         >this is a very simple resizable text area</div>
                 onChange:<textarea id="ocSimple" readOnly>not fired yet!</textarea>

dijit/trunk/tests/form/test_validate.html

@@ -68 +68 @@
                                         dojoType="dijit.form.TextBox"
                                         trim="true"
+                                        onfocus="console.log('user onfocus handler')"
+                                        onblur="console.log('user onblur handler')"
                                         onChange="dojo.byId('oc1').value=arguments[0]"
                                         propercase="true" />

dijit/trunk/tests/layout/test_TabContainer.html

@@ -117 +117 @@
         </p>
 
-        <div id="ttabs" dojoType="dijit.layout.TabContainer" tabPosition="top" style="width: 100%; height: 10em;">
+        <div id="ttabs" dojoType="dijit.layout.TabContainer" tabPosition="top" style="width: 100%; height: 10em;"
+                onfocus="console.log('user focus handler')"
+                onblur="console.log('user blur handler')"
+        >
                 <div id="ttab1" dojoType="dijit.layout.ContentPane" href="tab1.html" title="First" closable="true"></div>
                 <div id="ttab2" dojoType="dijit.layout.ContentPane" href="tab2.html" refreshOnShow="true" title="Second"></div>

dijit/trunk/tests/test_Dialog.html

@@ -60 +60 @@
 
 <div dojoType="dijit.Dialog" id="dialog1" title="First Dialog"
+                onfocus="console.log('user focus handler')"
+                onblur="console.log('user blur handler')"
                 execute="alert('submitted w/args:\n' + dojo.toJson(arguments[0], true));">
         <table>

dijit/trunk/tests/test_Editor.html

@@ -41 +41 @@
                 <textarea dojoType="dijit.Editor" height=""
                         extraPlugins="['dijit._editor.plugins.AlwaysShowToolbar']"
+                        onfocus="console.log('user focus handler')"
+                        onblur="console.log('user blur handler')"
                         styleSheets="../../dojo/resources/dojo.css" id="thud">
                         <p>

dijit/trunk/tests/tree/test_Tree_v1.html

@@ -33 +33 @@
         <p>Clicking a folder node will open/close it (openOnclick==true), and clicking a leaf node will popup an alert.</p>
         <div dojoType="dijit.Tree" id="mytree" store="continentStore" query="{type:'continent'}"
+                onfocus="console.log('user focus handler')"
+                onblur="console.log('user blur handler')"
                 labelAttr="name" label="Continents" openOnClick="true">
                 <script type="dojo/method" event="onClick" args="item">