sproutcore 1.4.5-java → 1.5.0-java

data/lib/frameworks/sproutcore/frameworks/desktop/tests/views/toolbar/method.js

@@ -0,0 +1,33 @@
+// ==========================================================================
+// Project:   SproutCore - JavaScript Application Framework
+// Copyright: ©2006-2010 Sprout Systems, Inc. and contributors.
+//            portions copyright @2011 Apple Inc.
+// License:   Licensed under MIT license (see license.js)
+// ==========================================================================
+
+/*global module test htmlbody ok equals same stop start */
+
+var pane, view;
+module("SC.ToolbarView", {
+  setup: function() {
+    SC.RunLoop.begin();
+    pane = SC.MainPane.create({
+      childViews: [
+        SC.ToolbarView.extend({
+          layout: { left:12, height: 200, right:12, top:12 }
+          
+        })]
+    });
+    pane.append(); // make sure there is a layer...
+    SC.RunLoop.end();
+    
+    view = pane.childViews[0];
+  }, 
+  
+  teardown: function() {
+    pane.remove();
+    pane = view = null ;
+  }
+});
+
+

data/lib/frameworks/sproutcore/frameworks/desktop/tests/views/toolbar/ui.js

@@ -0,0 +1,29 @@
+// ==========================================================================
+// Project:   SproutCore - JavaScript Application Framework
+// Copyright: ©2006-2010 Sprout Systems, Inc. and contributors.
+//            portions copyright @2011 Apple Inc.
+// License:   Licensed under MIT license (see license.js)
+// ==========================================================================
+
+/*global module test htmlbody ok equals same stop start */
+
+
+var pane;
+(function() {
+
+  pane = SC.ControlTestPane.design()
+
+  .add("aria-role_ToolbarView", SC.ToolbarView, {
+    
+  });
+
+  pane.show();
+
+  module('SC.ToolbarView UI', pane.standardSetup());
+
+  test("Check that the toolbar view has role set", function(){
+    var viewElem = pane.view('aria-role_ToolbarView').$();
+
+    equals(viewElem.attr('role'), 'toolbar', "toolbar view has correct role set");
+  });
+})();

data/lib/frameworks/sproutcore/frameworks/desktop/tests/views/web/methods.js

@@ -1,7 +1,7 @@
 // ==========================================================================
 // Project:   SproutCore - JavaScript Application Framework
 // Copyright: ©2006-2011 Strobe Inc. and contributors.
-//            portions copyright @2009 Apple Inc.
+//            portions copyright @2011 Apple Inc.
 // License:   Licensed under MIT license (see license.js)
 // ==========================================================================
 

data/lib/frameworks/sproutcore/frameworks/desktop/tests/views/web/ui.js

@@ -1,7 +1,7 @@
 // ==========================================================================
 // Project:   SproutCore - JavaScript Application Framework
 // Copyright: ©2006-2011 Strobe Inc. and contributors.
-//            portions copyright @2009 Apple Inc.
+//            portions copyright @2011 Apple Inc.
 // License:   Licensed under MIT license (see license.js)
 // ==========================================================================
 /*global module test htmlbody ok equals same stop start v*/

data/lib/frameworks/sproutcore/frameworks/desktop/tests/views/well/ui.js

@@ -1,7 +1,7 @@
 // ==========================================================================
 // Project:   SproutCore - JavaScript Application Framework
 // Copyright: ©2006-2011 Strobe Inc. and contributors.
-//            portions copyright @2009 Apple Inc.
+//            portions copyright @2011 Apple Inc.
 // License:   Licensed under MIT license (see license.js)
 // ==========================================================================
 

data/lib/frameworks/sproutcore/frameworks/desktop/views/button.js

@@ -1,153 +1,369 @@
 // ==========================================================================
 // Project:   SproutCore - JavaScript Application Framework
 // Copyright: ©2006-2011 Strobe Inc. and contributors.
-//            Portions ©2008-2010 Apple Inc. All rights reserved.
+//            Portions ©2008-2011 Apple Inc. All rights reserved.
 // License:   Licensed under MIT license (see license.js)
 // ==========================================================================
 
-/*jslint evil:true */
+/**
+  @static
+  @constant
+  @type String
+*/
+SC.TOGGLE_BEHAVIOR = 'toggle';
+
+/**
+  @static
+  @constant
+  @type String
+*/
+SC.PUSH_BEHAVIOR =   'push';
+
+/**
+  @static
+  @constant
+  @type String
+*/
+SC.TOGGLE_ON_BEHAVIOR = 'on';
+
+/**
+  @static
+  @constant
+  @type String
+*/
+SC.TOGGLE_OFF_BEHAVIOR = 'off';
+
+/**
+  @static
+  @constant
+  @type String
+*/
+SC.HOLD_BEHAVIOR = 'hold';
 
 /** @class
 
-  Implements a push-button-style button.  This class is used to implement 
+  Implements a push-button-style button.  This class is used to implement
   both standard push buttons and tab-style controls.  See also SC.CheckboxView
-  and SC.RadioView which are implemented as field views, but can also be 
+  and SC.RadioView which are implemented as field views, but can also be
   treated as buttons.
-  
-  By default, a button uses the SC.Control mixin which will apply CSS 
+
+  By default, a button uses the SC.Control mixin which will apply CSS
   classnames when the state of the button changes:
     - active     when button is active
     - sel        when button is toggled to a selected state
-  
+
   @extends SC.View
   @extends SC.Control
-  @extends SC.Button
-  @since SproutCore 1.0  
+  @since SproutCore 1.0
 */
-SC.ButtonView = SC.View.extend(SC.Control, SC.Button, SC.StaticLayout,
+SC.ButtonView = SC.View.extend(SC.Control,
 /** @scope SC.ButtonView.prototype */ {
+
+  /**
+    Tied to the isEnabled state
+    
+    @type Boolean
+    @default YES
+  */
+  acceptsFirstResponder: function() {
+    if (SC.FOCUS_ALL_CONTROLS) { return this.get('isEnabled'); }
+    return NO;
+  }.property('isEnabled'),
+
+  /**
+    @type Array
+    @default ['sc-button-view']
+    @see SC.View#classNames
+  */
+  classNames: ['sc-button-view'],
+
+  /**
+    The theme to apply to the button. By default, a subtheme with the name of
+    'square' is created for backwards-compatibility.
+
+    @type String
+    @default 'square'
+  */
+  themeName: 'square',
+
+
+  // ..........................................................
+  // Value Handling
+  // 
+  
+  /**
+    Used to automatically update the state of the button view for toggle style
+    buttons.
+
+    for toggle style buttons, you can set the value and it will be used to
+    update the isSelected state of the button view.  The value will also
+    change as the user selects or deselects.  You can control which values
+    the button will treat as isSelected by setting the toggleOnValue and 
+    toggleOffValue.  Alternatively, if you leave these properties set to
+    YES or NO, the button will do its best to convert a value to an 
+    appropriate state:
   
+      - null, false, 0  -> isSelected = false
+      - any other single value -> isSelected = true
+      - array -> if all values are the same state: that state.  otherwise MIXED.
+    
+    @type Object
+    @default null
+  */  
+  value: null,
+
   /**
-    What type of element this view is represented as
+    Value of a selected toggle button.
+    
+    For a toggle button, set this to any object value you want. The button
+    will be selected if the value property equals the targetValue. If the
+    value is an array of multiple items that contains the targetValue, then
+    the button will be set to a mixed state.
+    
+    default is YES
     
-    @property {String}
+    @type Boolean|Object
+    @default YES
   */
-  tagName: 'div',
+  toggleOnValue: YES,
 
   /**
-    Class names that will be applied to this view
+    Value of an unselected toggle button.
     
-    @property {Array}
+    For a toggle button, set this to any object value you want.  When the
+    user toggle's the button off, the value of the button will be set to this
+    value.
+    
+    @type Boolean|Object
+    @default NO
   */
-  classNames: ['sc-button-view'],
+  toggleOffValue: NO,
+
+
+  // ..........................................................
+  // Title Handling
+  // 
   
   /**
-    optionally set this to the theme you want this button to have.  
+    If YES, then the title will be localized.
     
-    This is used to determine the type of button this is.  You generally 
-    should set a class name on the HTML with the same value to allow CSS 
-    styling.
+    @type Boolean
+    @default NO
+  */
+  localize: NO,
+  
+  /** @private */
+  localizeBindingDefault: SC.Binding.bool(),
+
+  /**
+    The button title.  If localize is YES, then this should be the localization key to display.  Otherwise, this will be the actual string displayed in the title.  This property is observable and bindable.
+    
+    @type String
+    @default ""
+  */
+  title: "",
+
+  /**
+    If set, the title property will be updated automatically
+    from the content using the key you specify.
     
-    The default SproutCore theme supports "regular", "capsule", "checkbox", 
-    and "radio"
+    @type String
+    @default null
+  */
+  contentTitleKey: null,
+  
+  /**
+    The button icon. Set this to either a URL or a CSS class name (for
+    spriting). Note that if you pass a URL, it must contain at
+    least one slash to be detected as such.
+    
+    @type String
+    @default null
+  */
+  icon: null,
+
+  /**
+    If you set this property, the icon will be updated automatically from the
+    content using the key you specify.
+    
+    @type String
+    @default null
+  */
+  contentIconKey: null,
+
+  /**
+    If YES, button will attempt to display an ellipsis if the title cannot
+    fit inside of the visible area. This feature is not available on all
+    browsers.
     
-    @property {String}
+    @type Boolean
+    @default YES
   */
-  theme: 'square',
+  needsEllipsis: YES,
   
   /**
-    Optionally set the behavioral mode of this button.  
+    This is generated by localizing the title property if necessary.
+    
+    @type String
+    @observes 'title'
+    @observes 'localize'
+  */
+  displayTitle: function() {
+    var ret = this.get('title');
+    return (ret && this.get('localize')) ? SC.String.loc(ret) : (ret || '');
+  }.property('title','localize').cacheable(),
   
+  /**
+    The key equivalent that should trigger this button on the page.
+    
+    @type String
+    @default null
+  */
+  keyEquivalent: null,
+
+
+  // ..........................................................
+  // BEHAVIOR
+  // 
+
+  /**
+    The behavioral mode of this button.
+
     Possible values are:
-    - *SC.PUSH_BEHAVIOR* Pressing the button will trigger an action tied to the 
-      button. Does not change the value of the button.
-    - *SC.TOGGLE_BEHAVIOR* Pressing the button will invert the current value of 
-      the button. If the button has a mixed value, it will be set to true.
-    - *SC.TOGGLE_ON_BEHAVIOR* Pressing the button will set the current state to 
-      true no matter the previous value.
-    - *SC.TOGGLE_OFF_BEHAVIOR* Pressing the button will set the current state to 
-      false no matter the previous value.
-      
-    @property {String}
+
+      - *SC.PUSH_BEHAVIOR* Pressing the button will trigger an action tied to the
+        button. Does not change the value of the button.
+      - *SC.TOGGLE_BEHAVIOR* Pressing the button will invert the current value of
+        the button. If the button has a mixed value, it will be set to true.
+      - *SC.TOGGLE_ON_BEHAVIOR* Pressing the button will set the current state to
+        true no matter the previous value.
+      - *SC.TOGGLE_OFF_BEHAVIOR* Pressing the button will set the current state to
+        false no matter the previous value.
+      - *SC.HOLD_BEHAVIOR* Pressing the button will cause the action to repeat at a
+        regular interval specifed by 'holdInterval'
+
+    @type String
+    @default SC.PUSH_BEHAVIOR
   */
   buttonBehavior: SC.PUSH_BEHAVIOR,
 
   /*
-    If buttonBehavior is SC.HOLD_BEHAVIOR, this specifies, in miliseconds, how 
-    often to trigger the action. Ignored for other behaviors.
-    
-    @property {Number}
+    If buttonBehavior is SC.HOLD_BEHAVIOR, this specifies, in milliseconds,
+    how often to trigger the action. Ignored for other behaviors.
+
+    @type Number
+    @default 100
   */
   holdInterval: 100,
 
   /**
     If YES, then this button will be triggered when you hit return.
-    
+
     This is the same as setting the keyEquivalent to 'return'.  This will also
     apply the "def" classname to the button.
-    
-    @property {Boolean}
+
+    @type Boolean
+    @default NO
   */
   isDefault: NO,
   isDefaultBindingDefault: SC.Binding.oneWay().bool(),
-  
+
   /**
     If YES, then this button will be triggered when you hit escape.
     This is the same as setting the keyEquivalent to 'escape'.
-    
-    @property {Boolean}
-  */  
+
+    @type Boolean
+    @default NO
+  */
   isCancel: NO,
   isCancelBindingDefault: SC.Binding.oneWay().bool(),
 
   /**
-    The button href value.  This can be used to create localized button href 
-    values.  Setting an empty or null href will set it to javascript:;
-    
-    @property {String}
-  */
-  href: '',
+    The name of the action you want triggered when the button is pressed.
 
-  /**
-    The name of the action you want triggered when the button is pressed.  
-    
     This property is used in conjunction with the target property to execute
-    a method when a regular button is pressed.  These properties are not 
+    a method when a regular button is pressed.  These properties are not
     relevant when the button is used in toggle mode.
-    
+
     If you do not set a target, then pressing a button will cause the
     responder chain to search for a view that implements the action you name
     here.  If you set a target, then the button will try to call the method
     on the target itself.
-    
-    For legacy support, you can also set the action property to a function.  
+
+    For legacy support, you can also set the action property to a function.
     Doing so will cause the function itself to be called when the button is
-    clicked.  It is generally better to use the target/action approach and 
+    clicked.  It is generally better to use the target/action approach and
     to implement your code in a controller of some type.
-    
-    @property {String}
+
+    @type String
+    @default null
   */
   action: null,
-  
+
   /**
     The target object to invoke the action on when the button is pressed.
-    
+
     If you set this target, the action will be called on the target object
     directly when the button is clicked.  If you leave this property set to
-    null, then the button will search the responder chain for a view that 
+    null, then the button will search the responder chain for a view that
     implements the action when the button is pressed instead.
-    
-    @property {Object}
+
+    @type Object
+    @default null
   */
   target: null,
-  
-  /** 
+
+  /*
+    TODO When is this property ever changed? Is this redundant with
+    render delegates since it can now be turned on on a theme-by-theme
+    basis? --TD
+  */
+  /**
     If YES, use a focus ring.
-    
-    @property {Boolean}
+
+    @type Boolean
+    @default NO
   */
   supportFocusRing: NO,
-  
+
+  // ..........................................................
+  // Auto Resize Support
+  // 
+  //
+  // These properties are provided so that SC.AutoResize can be mixed in
+  // to enable automatic resizing of the button.
+  //
+
+  /** @private */
+  supportsAutoResize: YES,
+
+  /*
+    TODO get this from the render delegate so other elements may be used.
+  */
+  /** @private */
+  autoResizeLayer: function() {
+    return this.get('layer');
+  }.property('layer').cacheable(),
+
+  /** @private */
+  autoResizeText: function() {
+    return this.get('displayTitle');
+  }.property('displayTitle').cacheable(),
+
+  /**
+    The padding to add to the measured size of the text to arrive at the measured
+    size for the view.
+
+    SC.ButtonView gets this from its render delegate, but if not supplied, defaults
+    to 10.
+
+    @default 10
+    @type Number
+  */
+  autoResizePadding: SC.propertyFromRenderDelegate('autoResizePadding', 10),
+
+
+  // TODO: What the hell is this? --TD
   _labelMinWidthIE7: 0,
 
   /**
@@ -160,9 +376,9 @@ SC.ButtonView = SC.View.extend(SC.Control, SC.Button, SC.StaticLayout,
     Does nothing if the button is disabled.
 
     @param {Event} evt
-    @returns {Boolean} success/failure of the request
+    @returns {Boolean} YES if successful, NO otherwise
   */
-  triggerAction: function(evt) {
+  triggerActionAfterDelay: function(evt) {
     // If this button is disabled, we have nothing to do
     if (!this.get('isEnabled')) return NO;
 
@@ -172,167 +388,276 @@ SC.ButtonView = SC.View.extend(SC.Control, SC.Button, SC.StaticLayout,
     // Invoke the actual action method after a small delay to give the user a
     // chance to see the highlight. This is especially important if the button
     // closes a pane, for example.
-    this.invokeLater('_triggerActionAfterDelay', 200, evt);
+    this.invokeLater('triggerAction', 200, evt);
     return YES;
   },
 
   /** @private
-    Called by triggerAction after a delay; this method actually
+    Called by triggerActionAfterDelay; this method actually
     performs the action and restores the button's state.
 
     @param {Event} evt
   */
-  _triggerActionAfterDelay: function(evt) {
+  triggerAction: function(evt) {
     this._action(evt, YES);
     this.didTriggerAction();
     this.set('isActive', NO);
   },
 
   /**
-    This method is called anytime the button's action is triggered.  You can 
-    implement this method in your own subclass to perform any cleanup needed 
+    Callback called anytime the button's action is triggered.  You can
+    implement this method in your own subclass to perform any cleanup needed
     after an action is performed.
-    
-    @property {function}
   */
   didTriggerAction: function() {},
 
+  /*
+    TODO Why is this not set by the theme? --TD
+  */
   /**
     The minimum width the button title should consume.  This property is used
-    when generating the HTML styling for the title itself.  The default 
+    when generating the HTML styling for the title itself.  The default
     width of 80 usually provides a nice looking style, but you can set it to 0
     if you want to disable minimum title width.
-    
+
     Note that the title width does not exactly match the width of the button
     itself.  Extra padding added by the theme can impact the final total
     size.
-    
-    @property {Number}
+
+    @type Number
+    @default 80
   */
   titleMinWidth: 80,
-  
+
+
   // ................................................................
   // INTERNAL SUPPORT
+  //
 
   /** @private - save keyEquivalent for later use */
   init: function() {
     sc_super();
-    
-    //cache the key equivalent
-    if(this.get("keyEquivalent")) this._defaultKeyEquivalent = this.get("keyEquivalent"); 
+
+    var keyEquivalent = this.get('keyEquivalent');
+    // Cache the key equivalent. The key equivalent is saved so that if,
+    // for example, isDefault is changed from YES to NO, the old key
+    // equivalent can be restored.
+    if (keyEquivalent) {
+      this._defaultKeyEquivalent = keyEquivalent;
+    }
+
+    // if value is not null, update isSelected to match value.  If value is
+    // null, we assume you may be using isSelected only.  
+    if (!SC.none(this.get('value'))) this._button_valueDidChange();
   },
 
-  _TEMPORARY_CLASS_HASH: {},
-  
+  /**
+    The WAI-ARIA role of the button.
+    
+    @type String
+    @default 'button'
+    @readOnly
+  */
+  ariaRole: 'button',
+
   // display properties that should automatically cause a refresh.
-  // isCancel and isDefault also cause a refresh but this is implemented as 
+  // isCancel and isDefault also cause a refresh but this is implemented as
   // a separate observer (see below)
-  displayProperties: ['href', 'icon', 'title', 'value', 'toolTip'],
-  
-  
+
   /**
-    This property is used to call the right render style for the button.
-    * This might be a future way to start implementing the render method
-    as part of the theme
-  */ 
-  
-  renderStyle: 'renderDefault', //SUPPORTED DEFAULT, IMAGE
-
-  render: function(context, firstTime) {
-    // add href attr if tagName is anchor...
-    var href, toolTip, classes, theme;
-    if (this.get('tagName') === 'a') {
-      href = this.get('href');
-      if (!href || (href.length === 0)) href = "javascript:;";
-      context.attr('href', href);
+    The following properties affect how SC.ButtonView is rendered, and will
+    cause the view to be rerendered if they change.
+    
+    @type Array
+    @default [
+      'icon', 'displayTitle', 'value', 'displayToolTip', 'isDefault', 'isCancel', 
+      'escapeHTML', 'needsEllipsis', 'hint', 'titleMinWidth', 'supportFocusRing'
+    ]
+  */
+  displayProperties: [
+    'icon', 'displayTitle', 'value', 'displayToolTip', 'isDefault', 'isCancel', 
+    'escapeHTML', 'needsEllipsis', 'hint', 'titleMinWidth', 'supportFocusRing'
+  ],
+
+  /**
+    The name of the render delegate in the theme that should be used to
+    render the button.
+    
+    In this case, the 'button' property will be retrieved from the theme and
+    set to the render delegate of this view.
+    
+    @type String
+    @default 'buttonRenderDelegate'
+  */
+  renderDelegateName: 'buttonRenderDelegate',
+
+  /**
+    Updates the value, title, and icon keys based on the content object, if
+    set.
+    
+    @type {Object} target the target of the object that changed
+    @type {String} key name of property that changed
+    @returns {SC.ButtonView} receiver
+  */
+  contentPropertyDidChange: function(target, key) {
+    var del = this.get('displayDelegate'), 
+        content = this.get('content'), value ;
+
+    var valueKey = this.getDelegateProperty('contentValueKey', del) ;
+    if (valueKey && (key === valueKey || key === '*')) {
+      this.set('value', content ? (content.get ? content.get(valueKey) : content[valueKey]) : null) ;
     }
 
-    // If there is a toolTip set, grab it and localize if necessary.
-    toolTip = this.get('toolTip') ;
-    if (SC.typeOf(toolTip) === SC.T_STRING) {
-      if (this.get('localize')) toolTip = toolTip.loc() ;
-      context.attr('title', toolTip) ;
-      context.attr('alt', toolTip) ;
+    var titleKey = this.getDelegateProperty('contentTitleKey', del) ;
+    if (titleKey && (key === titleKey || key === '*')) {
+      this.set('title', content ? (content.get ? content.get(titleKey) : content[titleKey]) : null) ;
+    }
+
+    var iconKey = this.getDelegateProperty('contentIconKey', del);
+    if (iconKey && (key === iconKey || key === '*')) {
+      this.set('icon', content ? (content.get ? content.get(iconKey) : content[iconKey]) : null) ;
     }
     
-    // add some standard attributes & classes.
-    classes = this._TEMPORARY_CLASS_HASH;
-    classes.def = this.get('isDefault');
-    classes.cancel = this.get('isCancel');
-    classes.icon = !!this.get('icon');
-    context.attr('role', 'button').setClass(classes);
-    theme = this.get('theme');
-    if (theme && !context.hasClass(theme)) context.addClass(theme);
-    
-    // render inner html 
-    this[this.get('renderStyle')](context, firstTime);
+    return this ;
   },
-   
-   
+
+  /** @private - when title changes, dirty display. */
+  _button_displayObserver: function() {
+    this.displayDidChange();
+  }.observes('title', 'icon', 'value'),
+
   /**
-    Render the button with the default render style.
-  */
-  renderDefault: function(context, firstTime){
-    if(firstTime) {
-      context = context.push("<span class='sc-button-inner' style = 'min-width:"
-        ,this.get('titleMinWidth'),
-        "px'>");
+    Handle a key equivalent if set.  Trigger the default action for the 
+    button.  Depending on the implementation this may vary.
     
-      this.renderTitle(context, firstTime) ; // from button mixin
-      context.push("</span>") ;
+    @param {String} keystring
+    @param {SC.Event} evt
+    @returns {Boolean}  YES if handled, NO otherwise
+  */
+  performKeyEquivalent: function(keystring, evt) {
+    //If this is not visible
+    if (!this.get('isVisibleInWindow')) return NO;
+
+    if (!this.get('isEnabled')) return NO;
+    var equiv = this.get('keyEquivalent');
+
+    // button has defined a keyEquivalent and it matches!
+    // if triggering succeeded, true will be returned and the operation will 
+    // be handeled (i.e performKeyEquivalent will cease crawling the view 
+    // tree)
+    if (equiv) {
+      if (equiv === keystring) return this.triggerAction(evt);
     
-      if(this.get('supportFocusRing')) {
-        context.push('<div class="focus-ring">',
-                      '<div class="focus-left"></div>',
-                      '<div class="focus-middle"></div>',
-                      '<div class="focus-right"></div></div>');
-      }
-    }
-    else {
-      this.renderTitle(context, firstTime) ;
+    // should fire if isDefault OR isCancel.  This way if isDefault AND 
+    // isCancel, responds to both return and escape
+    } else if ((this.get('isDefault') && (keystring === 'return')) ||
+        (this.get('isCancel') && (keystring === 'escape'))) {
+          return this.triggerAction(evt);
     }
+
+    return NO; // did not handle it; keep searching
   },
-  
+
+  // ..........................................................
+  // VALUE <-> isSelected STATE MANAGEMNT
+  // 
+
   /**
-    Render the button with the image render style. To set image 
-    set the icon property with the classname that has the style with the image
-  */
-  renderImage: function(context, firstTime){
-    var icon = this.get('icon');
-    context.addClass('no-min-width');
-    if(icon) context.push("<div class='img "+icon+"'></div>");
-    else context.push("<div class='img'></div>");
+    This is the standard logic to compute a proposed isSelected state for a
+    new value.  This takes into account the toggleOnValue/toggleOffValue 
+    properties, among other things.  It may return YES, NO, or SC.MIXED_STATE.
+    
+    @param {Object} value
+    @returns {Boolean} return state
+  */
+  computeIsSelectedForValue: function(value) {
+    var targetValue = this.get('toggleOnValue'), state, next ;
+    
+    if (SC.typeOf(value) === SC.T_ARRAY) {
+
+      // treat a single item array like a single value
+      if (value.length === 1) {
+        state = (value[0] == targetValue) ;
+        
+      // for a multiple item array, check the states of all items.
+      } else {
+        state = null;
+        value.find(function(x) {
+          next = (x == targetValue) ;
+          if (state === null) {
+            state = next ;
+          } else if (next !== state) state = SC.MIXED_STATE ;
+          return state === SC.MIXED_STATE ; // stop when we hit a mixed state.
+        });
+      }
+      
+    // for single values, just compare to the toggleOnValue...use truthiness
+    } else {
+      if(value === SC.MIXED_STATE) state = SC.MIXED_STATE;
+      else state = (value === targetValue) ;
+    }
+    return state ;
   },
+
+  /** @private
+    Whenever the button value changes, update the selected state to match.
+  */
+  _button_valueDidChange: function() {
+    var value = this.get('value'),
+        state = this.computeIsSelectedForValue(value);
+    this.set('isSelected', state) ; // set new state...
+  }.observes('value'),
   
-  /** @private {String} used to store a previously defined key equiv */
+  /** @private
+    Whenever the selected state is changed, make sure the button value is also updated.  Note that this may be called because the value has just changed.  In that case this should do nothing.
+  */
+  _button_isSelectedDidChange: function() {
+    var newState = this.get('isSelected'),
+        curState = this.computeIsSelectedForValue(this.get('value'));
+    
+    // fix up the value, but only if computed state does not match.
+    // never fix up value if isSelected is set to MIXED_STATE since this can
+    // only come from the value.
+    if ((newState !== SC.MIXED_STATE) && (curState !== newState)) {
+      var valueKey = (newState) ? 'toggleOnValue' : 'toggleOffValue' ;
+      this.set('value', this.get(valueKey));
+    }
+  }.observes('isSelected'),
+
+
+  /** @private
+    Used to store the keyboard equivalent.
+    
+    Setting the isDefault property to YES, for example, will cause the
+    keyEquivalent property to 'return'. This cached value is used to restore
+    the keyEquivalent property if isDefault is set back to NO.
+    
+    @type String
+  */
   _defaultKeyEquivalent: null,
-  
+
   /** @private
-    Whenever the isDefault or isCancel property changes, update the display and change the keyEquivalent.
-  */  
+
+    Whenever the isDefault or isCancel property changes, re-render and change
+    the keyEquivalent property so that we respond to the return or escape key.
+  */
   _isDefaultOrCancelDidChange: function() {
-    var isDef = !!this.get('isDefault'),
-        isCancel = !isDef && this.get('isCancel') ;
-    
-    if(this.didChangeFor('defaultCancelChanged','isDefault','isCancel')) {
-      this.displayDidChange() ; // make sure to update the UI
-      if (isDef) {
-        this.set('keyEquivalent', 'return'); // change the key equivalent
-      } else if (isCancel) {
-        this.setIfChanged('keyEquivalent', 'escape') ;
-      } else {
-        //restore the default key equivalent
-        this.set("keyEquivalent",this._defaultKeyEquivalent);
-      }
+    var isDefault = !!this.get('isDefault'),
+        isCancel = !isDefault && this.get('isCancel') ;
+
+    if (isDefault) {
+      this.set('keyEquivalent', 'return'); // change the key equivalent
+    } else if (isCancel) {
+      this.set('keyEquivalent', 'escape') ;
+    } else {
+      // Restore the default key equivalent
+      this.set('keyEquivalent', this._defaultKeyEquivalent);
     }
-      
   }.observes('isDefault', 'isCancel'),
-    
-  isMouseDown: false, 
 
-  /** @private 
+  /** @private
     On mouse down, set active only if enabled.
-  */    
+  */
   mouseDown: function(evt) {
     var buttonBehavior = this.get('buttonBehavior');
 
@@ -346,11 +671,11 @@ SC.ButtonView = SC.View.extend(SC.Control, SC.Button, SC.StaticLayout,
       this._isFocused = YES ;
       this.becomeFirstResponder();
       if (this.get('isVisibleInWindow')) {
-        this.$()[0].focus();
+        this.get('layer').focus();
       }
     }
 
-    return YES ;
+    return YES;
   },
 
   /** @private
@@ -365,7 +690,7 @@ SC.ButtonView = SC.View.extend(SC.Control, SC.Button, SC.StaticLayout,
 
   /** @private
     If mouse was down and we renter the button area, set the active state again.
-  */  
+  */
   mouseEntered: function(evt) {
     if (this._isMouseDown) {
       this.set('isActive', YES);
@@ -375,19 +700,20 @@ SC.ButtonView = SC.View.extend(SC.Control, SC.Button, SC.StaticLayout,
 
   /** @private
     ON mouse up, trigger the action only if we are enabled and the mouse was released inside of the view.
-  */  
+  */
   mouseUp: function(evt) {
     if (this._isMouseDown) this.set('isActive', NO); // track independently in case isEnabled has changed
     this._isMouseDown = false;
 
     if (this.get('buttonBehavior') !== SC.HOLD_BEHAVIOR) {
-      var inside = this.$().within(evt.target) ;
+      var inside = this.$().within(evt.target);
       if (inside && this.get('isEnabled')) this._action(evt) ;
     }
 
     return YES ;
   },
-  
+
+  /** @private */
   touchStart: function(touch){
     var buttonBehavior = this.get('buttonBehavior');
 
@@ -409,7 +735,8 @@ SC.ButtonView = SC.View.extend(SC.Control, SC.Button, SC.StaticLayout,
 
     return YES;
   },
-  
+
+  /** @private */
   touchesDragged: function(evt, touches) {
     if (!this.touchIsInBoundary(evt)) {
       if (!this._touch_exited) this.set('isActive', NO);
@@ -418,50 +745,53 @@ SC.ButtonView = SC.View.extend(SC.Control, SC.Button, SC.StaticLayout,
       if (this._touch_exited) this.set('isActive', YES);
       this._touch_exited = NO;
     }
-    
+
     evt.preventDefault();
     return YES;
   },
-  
+
+  /** @private */
   touchEnd: function(touch){
     this._touch_exited = NO;
     this.set('isActive', NO); // track independently in case isEnabled has changed
 
     if (this.get('buttonBehavior') !== SC.HOLD_BEHAVIOR) {
-      if (this.touchIsInBoundary(touch)) this._action();
+      if (this.touchIsInBoundary(touch) && this.get('isEnabled')) {
+        this._action();
+      }
     }
-    
+
     touch.preventDefault();
     return YES ;
   },
-  
-  
+
   /** @private */
   keyDown: function(evt) {
     // handle tab key
-    if (evt.which === 9) {
+    if (evt.which === 9 || evt.keyCode === 9) {
       var view = evt.shiftKey ? this.get('previousValidKeyView') : this.get('nextValidKeyView');
       if(view) view.becomeFirstResponder();
       else evt.allowDefault();
       return YES ; // handled
-    }    
+    }
     if (evt.which === 13) {
-      this.triggerAction(evt);
+      this.triggerActionAfterDelay(evt);
       return YES ; // handled
     }
-    return NO; 
+    return NO;
   },
 
-  /** @private  Perform an action based on the behavior of the button.
-  
-   - toggle behavior: switch to on/off state
-   - on behavior: turn on.
-   - off behavior: turn off.
-   - otherwise: invoke target/action
+  /** @private
+    Perform an action based on the behavior of the button.
+
+     - toggle behavior: switch to on/off state
+     - on behavior: turn on.
+     - off behavior: turn off.
+     - otherwise: invoke target/action
   */
   _action: function(evt, skipHoldRepeat) {
     switch(this.get('buttonBehavior')) {
-      
+
     // When toggling, try to invert like values. i.e. 1 => 0, etc.
     case SC.TOGGLE_BEHAVIOR:
       var sel = this.get('isSelected') ;
@@ -471,12 +801,12 @@ SC.ButtonView = SC.View.extend(SC.Control, SC.Button, SC.StaticLayout,
         this.set('value', this.get('toggleOnValue')) ;
       }
       break ;
-      
+
     // set value to on.  change 0 => 1.
     case SC.TOGGLE_ON_BEHAVIOR:
       this.set('value', this.get('toggleOnValue')) ;
       break ;
-      
+
     // set the value to false. change 1 => 0
     case SC.TOGGLE_OFF_BEHAVIOR:
       this.set('value', this.get('toggleOffValue')) ;
@@ -498,7 +828,7 @@ SC.ButtonView = SC.View.extend(SC.Control, SC.Button, SC.StaticLayout,
     var action = this.get('action'),
         target = this.get('target') || null,
         rootResponder = this.getPath('pane.rootResponder');
-
+    
     if (action) {
       if (this._hasLegacyActionHandler()) {
         // old school... V
@@ -506,7 +836,7 @@ SC.ButtonView = SC.View.extend(SC.Control, SC.Button, SC.StaticLayout,
       } else {
         if (rootResponder) {
           // newer action method + optional target syntax...
-          rootResponder.sendAction(action, target, this, this.get('pane'));
+          rootResponder.sendAction(action, target, this, this.get('pane'), null, this);
         }
       }
     }
@@ -525,10 +855,9 @@ SC.ButtonView = SC.View.extend(SC.Control, SC.Button, SC.StaticLayout,
       }
     }
   },
-  
+
   /** @private */
-  _hasLegacyActionHandler: function()
-  {
+  _hasLegacyActionHandler: function() {
     var action = this.get('action');
     if (action && (SC.typeOf(action) === SC.T_FUNCTION)) return true;
     if (action && (SC.typeOf(action) === SC.T_STRING) && (action.indexOf('.') != -1)) return true;
@@ -539,7 +868,7 @@ SC.ButtonView = SC.View.extend(SC.Control, SC.Button, SC.StaticLayout,
   _triggerLegacyActionHandler: function( evt )
   {
     if (!this._hasLegacyActionHandler()) return false;
-    
+
     var action = this.get('action');
     if (SC.typeOf(action) === SC.T_FUNCTION) this.action(evt);
     if (SC.typeOf(action) === SC.T_STRING) {
@@ -547,29 +876,25 @@ SC.ButtonView = SC.View.extend(SC.Control, SC.Button, SC.StaticLayout,
       this.action(evt);
     }
   },
-  
-  /** tied to the isEnabled state */
-  acceptsFirstResponder: function() {
-    if(!SC.SAFARI_FOCUS_BEHAVIOR) return this.get('isEnabled');
-    else return NO;
-  }.property('isEnabled'),
-  
+
+  /** @private */
   willBecomeKeyResponderFrom: function(keyView) {
     // focus the text field.
     if (!this._isFocused) {
       this._isFocused = YES ;
       this.becomeFirstResponder();
       if (this.get('isVisibleInWindow')) {
-        var elem=this.$()[0];
-        if (elem) elem.focus();
+        this.$().focus();
       }
     }
   },
-  
+
+  /** @private */
   willLoseKeyResponderTo: function(responder) {
     if (this._isFocused) this._isFocused = NO ;
   },
-  
+
+  /** @private */
   didAppendToDocument: function() {
     if(parseInt(SC.browser.msie, 0)===7 && this.get('useStaticLayout')){
       var layout = this.get('layout'),
@@ -580,12 +905,12 @@ SC.ButtonView = SC.View.extend(SC.Control, SC.Button, SC.StaticLayout,
             paddingLeft = parseInt(label.css('paddingLeft'),0),
             marginRight = parseInt(label.css('marginRight'),0),
             marginLeft = parseInt(label.css('marginLeft'),0);
-        if(marginRight=='auto') console.log(marginRight+","+marginLeft+","+paddingRight+","+paddingLeft);
+        if(marginRight=='auto') SC.Logger.log(marginRight+","+marginLeft+","+paddingRight+","+paddingLeft);
         if(!paddingRight && isNaN(paddingRight)) paddingRight = 0;
         if(!paddingLeft && isNaN(paddingLeft)) paddingLeft = 0;
         if(!marginRight && isNaN(marginRight)) marginRight = 0;
         if(!marginLeft && isNaN(marginLeft)) marginLeft = 0;
-        
+
         this._labelMinWidthIE7 = w-(paddingRight + paddingLeft)-(marginRight + marginLeft);
         label.css('minWidth', this._labelMinWidthIE7+'px');
       }else{
@@ -593,17 +918,10 @@ SC.ButtonView = SC.View.extend(SC.Control, SC.Button, SC.StaticLayout,
       }
     }
   }
-  
+
 }) ;
 
-// ..........................................................
-// CONSTANTS
-//
-SC.TOGGLE_BEHAVIOR = 'toggle';
-SC.PUSH_BEHAVIOR =   'push';
-SC.TOGGLE_ON_BEHAVIOR = 'on';
-SC.TOGGLE_OFF_BEHAVIOR = 'off';
-SC.HOLD_BEHAVIOR = 'hold';
+
 
 /**
   The delay after which "click" behavior should transition to "click and hold"
@@ -617,3 +935,4 @@ SC.ButtonView.CLICK_AND_HOLD_DELAY = SC.browser.msie ? 600 : 300;
 
 SC.REGULAR_BUTTON_HEIGHT=24;
 
+