RubyGems - sproutcore - Versions diffs - 0.9.1 → 0.9.2 - Mend

sproutcore 0.9.1 → 0.9.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (208) hide show

data/History.txt +233 -0
data/Manifest.txt +67 -34
data/bin/sc-build +12 -1
data/bin/sc-gen +1 -1
data/bin/sproutcore +14 -0
data/clients/sc_docs/controllers/docs.js +38 -8
data/clients/sc_docs/english.lproj/body.css +80 -127
data/clients/sc_docs/english.lproj/body.rhtml +43 -23
data/clients/sc_docs/english.lproj/no_docs.rhtml +2 -1
data/clients/sc_docs/english.lproj/tabs.rhtml +16 -0
data/clients/sc_docs/main.js +14 -9
data/clients/sc_docs/models/doc.js +1 -1
data/clients/sc_docs/tests/controllers/docs.rhtml +1 -2
data/clients/sc_docs/tests/models/doc.rhtml +1 -2
data/clients/sc_docs/tests/views/doc_frame.rhtml +1 -2
data/clients/sc_docs/tests/views/doc_label_view.rhtml +1 -2
data/clients/sc_docs/views/doc_frame.js +1 -1
data/clients/sc_test_runner/controllers/runner.js +31 -8
data/clients/sc_test_runner/english.lproj/body.css +62 -122
data/clients/sc_test_runner/english.lproj/body.rhtml +62 -26
data/clients/sc_test_runner/main.js +1 -6
data/clients/sc_test_runner/models/test.js +14 -1
data/clients/sc_test_runner/views/runner_frame.js +4 -2
data/clients/view_builder/builders/builder.js +339 -0
data/clients/view_builder/builders/button.js +81 -0
data/clients/view_builder/controllers/document.js +21 -0
data/clients/view_builder/core.js +19 -0
data/clients/view_builder/english.lproj/body.css +77 -0
data/clients/view_builder/english.lproj/body.rhtml +41 -0
data/clients/{sc_docs → view_builder}/english.lproj/controls.css +0 -0
data/clients/view_builder/english.lproj/strings.js +14 -0
data/clients/view_builder/main.js +38 -0
data/clients/view_builder/tests/controllers/document.rhtml +20 -0
data/clients/view_builder/tests/views/builder.rhtml +20 -0
data/clients/view_builder/views/builder.js +23 -0
data/frameworks/prototype/prototype.js +1 -1
data/frameworks/sproutcore/Core.js +32 -7
data/frameworks/sproutcore/README +1 -1
data/frameworks/sproutcore/animation/animation.js +411 -0
data/frameworks/sproutcore/controllers/array.js +17 -9
data/frameworks/sproutcore/controllers/collection.js +9 -110
data/frameworks/sproutcore/controllers/controller.js +1 -1
data/frameworks/sproutcore/controllers/object.js +2 -1
data/frameworks/sproutcore/drag/drag.js +267 -56
data/frameworks/sproutcore/drag/drag_data_source.js +24 -16
data/frameworks/sproutcore/drag/drag_source.js +53 -42
data/frameworks/sproutcore/drag/drop_target.js +2 -2
data/frameworks/sproutcore/english.lproj/buttons.css +337 -236
data/frameworks/sproutcore/english.lproj/core.css +115 -0
data/frameworks/sproutcore/english.lproj/icons.css +227 -0
data/{clients/sc_docs → frameworks/sproutcore}/english.lproj/images/indicator.gif +0 -0
data/frameworks/sproutcore/english.lproj/images/sc-theme-sprite.png +0 -0
data/frameworks/sproutcore/english.lproj/images/sc-theme-ysprite.png +0 -0
data/frameworks/sproutcore/english.lproj/images/shared-icons.png +0 -0
data/frameworks/sproutcore/english.lproj/menu.css +1 -1
data/frameworks/sproutcore/english.lproj/strings.js +1 -1
data/frameworks/sproutcore/english.lproj/theme.css +405 -31
data/frameworks/sproutcore/foundation/application.js +15 -11
data/frameworks/sproutcore/foundation/benchmark.js +1 -1
data/frameworks/sproutcore/foundation/binding.js +2 -2
data/frameworks/sproutcore/foundation/date.js +1 -1
data/frameworks/sproutcore/foundation/error.js +1 -1
data/frameworks/sproutcore/foundation/input_manager.js +32 -21
data/frameworks/sproutcore/foundation/mock.js +1 -1
data/frameworks/sproutcore/foundation/node_descriptor.js +9 -6
data/frameworks/sproutcore/foundation/object.js +249 -177
data/frameworks/sproutcore/foundation/page.js +5 -2
data/frameworks/sproutcore/foundation/path_module.js +11 -10
data/frameworks/sproutcore/foundation/responder.js +5 -2
data/frameworks/sproutcore/foundation/routes.js +17 -13
data/frameworks/sproutcore/foundation/run_loop.js +249 -11
data/frameworks/sproutcore/foundation/server.js +1 -1
data/frameworks/sproutcore/foundation/set.js +3 -3
data/frameworks/sproutcore/foundation/string.js +5 -3
data/frameworks/sproutcore/foundation/timer.js +371 -0
data/frameworks/sproutcore/foundation/undo_manager.js +1 -1
data/frameworks/sproutcore/foundation/unittest.js +3 -3
data/frameworks/sproutcore/foundation/utils.js +161 -2
data/frameworks/sproutcore/globals/panels.js +1 -1
data/frameworks/sproutcore/globals/popups.js +4 -3
data/frameworks/sproutcore/globals/window.js +44 -4
data/frameworks/sproutcore/lib/button_views.rb +328 -0
data/frameworks/sproutcore/lib/collection_view.rb +80 -0
data/frameworks/sproutcore/lib/core_views.rb +281 -0
data/frameworks/sproutcore/lib/form_views.rb +253 -0
data/frameworks/sproutcore/lib/index.rhtml +2 -0
data/frameworks/sproutcore/lib/menu_views.rb +88 -0
data/frameworks/sproutcore/{foundation → mixins}/array.js +60 -29
data/frameworks/sproutcore/mixins/control.js +265 -0
data/frameworks/sproutcore/mixins/delegate_support.js +66 -0
data/frameworks/sproutcore/{foundation → mixins}/observable.js +176 -6
data/frameworks/sproutcore/mixins/scrollable.js +245 -0
data/frameworks/sproutcore/mixins/selection_support.js +148 -0
data/frameworks/sproutcore/mixins/validatable.js +152 -0
data/frameworks/sproutcore/models/collection.js +5 -5
data/frameworks/sproutcore/models/record.js +1 -1
data/frameworks/sproutcore/models/store.js +1 -1
data/frameworks/sproutcore/panes/dialog.js +1 -1
data/frameworks/sproutcore/panes/manager.js +1 -1
data/frameworks/sproutcore/panes/menu.js +1 -1
data/frameworks/sproutcore/panes/overlay.js +2 -2
data/frameworks/sproutcore/panes/panel.js +1 -1
data/frameworks/sproutcore/panes/picker.js +1 -1
data/frameworks/sproutcore/tests/controllers/array.rhtml +44 -4
data/frameworks/sproutcore/tests/foundation/timer/invalidate.rhtml +33 -0
data/frameworks/sproutcore/tests/foundation/timer/invokeLater.rhtml +145 -0
data/frameworks/sproutcore/tests/foundation/timer/isPaused.rhtml +70 -0
data/frameworks/sproutcore/tests/foundation/timer/schedule.rhtml +145 -0
data/frameworks/sproutcore/tests/views/{scroll.rhtml → checkbox.rhtml} +3 -3
data/frameworks/sproutcore/tests/views/{collection.rhtml → collection/base.rhtml} +33 -32
data/frameworks/sproutcore/tests/views/collection/incremental_rendering.rhtml +260 -0
data/frameworks/sproutcore/tests/views/image_cell.rhtml +19 -0
data/frameworks/sproutcore/tests/views/label_item.rhtml +2 -4
data/frameworks/sproutcore/tests/views/list.rhtml +2 -3
data/frameworks/sproutcore/tests/views/list_item.rhtml +20 -0
data/frameworks/sproutcore/tests/views/slider.rhtml +20 -0
data/frameworks/sproutcore/tests/views/text_cell.rhtml +19 -0
data/frameworks/sproutcore/tests/views/view/clippingFrame.rhtml +395 -0
data/frameworks/sproutcore/tests/views/view/frame.rhtml +353 -0
data/frameworks/sproutcore/tests/views/view/innerFrame.rhtml +347 -0
data/frameworks/sproutcore/tests/views/view/isVisibleInWindow.rhtml +148 -0
data/frameworks/sproutcore/tests/views/view/scrollFrame.rhtml +468 -0
data/frameworks/sproutcore/validators/credit_card.js +33 -13
data/frameworks/sproutcore/validators/date.js +26 -6
data/frameworks/sproutcore/validators/email.js +21 -3
data/frameworks/sproutcore/validators/not_empty.js +11 -1
data/frameworks/sproutcore/validators/number.js +18 -4
data/frameworks/sproutcore/validators/password.js +12 -1
data/frameworks/sproutcore/validators/validator.js +204 -194
data/frameworks/sproutcore/views/{button.js → button/button.js} +96 -94
data/frameworks/sproutcore/views/button/checkbox.js +29 -0
data/frameworks/sproutcore/views/button/disclosure.js +42 -0
data/frameworks/sproutcore/views/button/radio.js +29 -0
data/frameworks/sproutcore/views/{collection.js → collection/collection.js} +1373 -1024
data/frameworks/sproutcore/views/collection/grid.js +124 -46
data/frameworks/sproutcore/views/collection/image_cell.js +17 -46
data/frameworks/sproutcore/views/collection/list.js +45 -35
data/frameworks/sproutcore/views/collection/source_list.js +386 -0
data/frameworks/sproutcore/views/collection/table.js +118 -0
data/frameworks/sproutcore/views/container.js +7 -2
data/frameworks/sproutcore/views/error_explanation.js +23 -10
data/frameworks/sproutcore/views/{checkbox_field.js → field/checkbox_field.js} +16 -6
data/frameworks/sproutcore/views/field/field.js +219 -0
data/frameworks/sproutcore/views/{radio_field.js → field/radio_field.js} +27 -12
data/frameworks/sproutcore/views/{select_field.js → field/select_field.js} +116 -90
data/frameworks/sproutcore/views/{text_field.js → field/text_field.js} +57 -8
data/frameworks/sproutcore/views/{textarea_field.js → field/textarea_field.js} +13 -3
data/frameworks/sproutcore/views/filter_button.js +2 -2
data/frameworks/sproutcore/views/form.js +3 -3
data/frameworks/sproutcore/views/image.js +128 -21
data/frameworks/sproutcore/views/inline_text_editor.js +1 -1
data/frameworks/sproutcore/views/label.js +149 -92
data/frameworks/sproutcore/views/list_item.js +225 -0
data/frameworks/sproutcore/views/menu_item.js +10 -4
data/frameworks/sproutcore/views/pagination.js +11 -4
data/frameworks/sproutcore/views/popup_button.js +25 -21
data/frameworks/sproutcore/views/popup_menu.js +10 -4
data/frameworks/sproutcore/views/progress.js +29 -16
data/frameworks/sproutcore/views/radio_group.js +1 -1
data/frameworks/sproutcore/views/scroll.js +60 -20
data/frameworks/sproutcore/views/segmented.js +1 -1
data/frameworks/sproutcore/views/slider.js +132 -0
data/frameworks/sproutcore/views/source_list_group.js +130 -0
data/frameworks/sproutcore/views/spinner.js +1 -1
data/frameworks/sproutcore/views/split.js +292 -0
data/frameworks/sproutcore/views/split_divider.js +109 -0
data/frameworks/sproutcore/views/tab.js +1 -1
data/frameworks/sproutcore/views/toolbar.js +1 -1
data/frameworks/sproutcore/views/view.js +1272 -591
data/generators/client/templates/english.lproj/body.css +1 -1
data/generators/controller/controller_generator.rb +1 -1
data/generators/controller/templates/test.rhtml +2 -1
data/generators/model/templates/test.rhtml +1 -1
data/generators/test/templates/test.rhtml +1 -1
data/generators/view/templates/test.rhtml +1 -1
data/jsdoc/templates/sproutcore/class.tmpl +241 -338
data/jsdoc/templates/sproutcore/default.css +105 -155
data/jsdoc/templates/sproutcore/index.tmpl +43 -8
data/jsdoc/templates/sproutcore/publish.js +9 -4
data/lib/sproutcore/build_tools/html_builder.rb +29 -13
data/lib/sproutcore/build_tools/resource_builder.rb +1 -1
data/lib/sproutcore/bundle.rb +86 -25
data/lib/sproutcore/jsdoc.rb +2 -0
data/lib/sproutcore/version.rb +1 -1
data/lib/sproutcore/view_helpers.rb +36 -3
data/tasks/deployment.rake +1 -1
metadata +69 -36
data/clients/sc_docs/english.lproj/icons/small/next.png +0 -0
data/clients/sc_docs/english.lproj/icons/small/reset.png +0 -0
data/clients/sc_docs/english.lproj/images/gradients.png +0 -0
data/clients/sc_docs/english.lproj/images/toolbar.png +0 -0
data/clients/sc_docs/english.lproj/warning.rhtml +0 -6
data/clients/sc_test_runner/english.lproj/warning.rhtml +0 -6
data/frameworks/sproutcore/english.lproj/buttons.png +0 -0
data/frameworks/sproutcore/english.lproj/collections.css +0 -82
data/frameworks/sproutcore/english.lproj/images/buttons-sprite.png +0 -0
data/frameworks/sproutcore/views/collection/collection_item.js +0 -36
data/frameworks/sproutcore/views/collection/text_cell.js +0 -128
data/frameworks/sproutcore/views/field.js +0 -214
data/frameworks/sproutcore/views/workspace.js +0 -170
data/generators/client/templates/english.lproj/controls.css +0 -0
data/generators/framework/templates/english.lproj/body.css +0 -0
data/generators/framework/templates/english.lproj/body.rhtml +0 -3
data/generators/framework/templates/english.lproj/controls.css +0 -0
data/lib/sproutcore/view_helpers/button_views.rb +0 -302
data/lib/sproutcore/view_helpers/core_views.rb +0 -292
data/lib/sproutcore/view_helpers/form_views.rb +0 -258
data/lib/sproutcore/view_helpers/menu_views.rb +0 -94

data/frameworks/sproutcore/lib/index.rhtml CHANGED Viewed

@@ -22,6 +22,7 @@
 	 # :requires option in routes.rb.
 -%>
     <%= stylesheets_for_client %>
+<%= @content_for_page_styles %>
   </head>
   <body class="<%= @theme || 'sc-theme' %>">
 <% #
@@ -50,6 +51,7 @@
 -%>
     <!-- Include Site Javascript -->
     <%= javascripts_for_client %>
+<%= @content_for_page_javascript %>
 <% #
    # The following lines to the closing body tag must be included at the

data/frameworks/sproutcore/lib/menu_views.rb ADDED Viewed

@@ -0,0 +1,88 @@
+############################################################
+# MENU VIEW HELPERS
+#
+# The view helpers defined in this file help you create popup menus.  You can
+# define a menu in your RHTML helper to be used somewhere else with code like
+# this:
+#
+# This is the quick way to define a menu item.  Use this approach if you just
+# want to create a menu with item names and perform an action:
+#
+# <% menu_view :action_menu, :validate=>'My.controller.validate' do |m| %>
+#   <%= m.item :item_1, 'Item 1', :action => 'doSomething' %>
+#   <%= m.separator_item %>
+#   <%= m.item :item_2, 'Item 2', :action => 'doAnother Thing' %>
+# <% end %>
+#
+require_helpers 'core_views'
+require_helpers 'button_views'
+# This will create a popup menu.  You should define internal outlets
+# for the menu items.  More options to follow.
+view_helper :popup_menu_view do
+  var :tag, 'ul'
+  view 'SC.PopupMenuView'
+end
+# Creates a menu item view.  Normally you don't want to create these
+# directly.  Instead use the menu_view helpers.
+#
+# OPTIONS:
+# :action =>
+#   The action to invoke when the menu item is selected.
+#
+# :label =>
+#   The label for the menu item.
+#
+# :icon =>
+#   The icon for the menu item.  No icon will show if this is not set.
+#
+# :shortcut =>
+#   The shortcut key for this menu item.  Shortcuts are only active when
+#   the anchorview the popup menu is attached to is part of the in-focus
+#   pane.  Shortcuts should be named in the standard input manager
+#   syntax like this: alt_ctrl_shift_k (for Alt-Ctrl-Shift-K)
+#
+#   Note that on the web, Cmd (on the Mac) and Ctrl are equivalent.
+#   Always use ctrl when defining shortcuts.
+#
+# :enabled (bindable) =>
+#   Determines if the menu item will be enabled or not.  This is generally
+#   handled by your validate method or through bindings.
+#
+# :selected (bindable) =>
+#   Determines if the menu item is selected or not.  May also be a mixed
+#   state.  This is generally handled by your validate method or through
+#   bindings.
+#
+# :alt =>
+#   name another item in this menu that is the alternate form of the
+#   receiver.  If the alt item is enabled, this one will be hidden and
+#   visa versa.
+#
+view_helper :menu_item_view, :extends => :button_view do
+  # JavaScript
+  view 'SC.MenuItemView'
+  # HTML
+  var :tag, 'li'
+  var(:shortcut) { |sc| sc.split('_').map { |x| x.capitalize } * '-' }
+  css_class_names << 'menu-item'
+  @my_href = @href || 'javascript:;'
+  @href = nil
+  @inner_html = [
+    %(<a href="#{@my_href}">),
+      '<span class="sel">&#x2713;</span>',
+      '<span class="mixed">-</span>',
+      '<span class="inner">',
+        @image,
+        %(<span class="label">#{@label}</span>),
+      '</span>',
+      %(<span class="shortcut">#{@shortcut}</span>),
+    '</a>'
+  ] * ''
+end

data/frameworks/sproutcore/{foundation → mixins}/array.js RENAMED Viewed

@@ -1,9 +1,9 @@
 // ==========================================================================
 // SproutCore -- JavaScript Application Framework
-// copyright 2006-2007, Sprout Systems, Inc. and contributors.
+// copyright 2006-2008, Sprout Systems, Inc. and contributors.
 // ==========================================================================
-require('foundation/observable');
+require('mixins/observable');
 // Make Arrays observable
 Object.extend(Array.prototype, SC.Observable) ;
@@ -11,7 +11,7 @@ Object.extend(Array.prototype, SC.Observable) ;
 SC.OUT_OF_RANGE_EXCEPTION = "Index out of range" ;
 /**
-  @namespace SC.Array
+  @namespace
   This module implements Observer-friendly Array-like behavior.  This mixin is
   picked up by the Array class as well as other controllers, etc. that want to
@@ -125,8 +125,9 @@ SC.Array = {
   */
   removeAt: function(idx) {
     if ((idx < 0) || (idx >= this.get('length'))) throw SC.OUT_OF_RANGE_EXCEPTION;
+    var ret = this.objectAt(idx) ;
     this.replace(idx,1,[]);
-    return this ;
+    return ret ;
   },
   /**
@@ -198,8 +199,35 @@ SC.Array = {
       if (ary.objectAt(loc) != this.objectAt(loc)) return false ;
     }
     return true ;
+  },
+  /**
+    Invoke the passed method and arguments on the member elements as long as
+    the value returned is the first argument.
+    @param {Object} retValue the expected return value
+    @param {String} methodName the method to call
+    @returns {Object} the return value of the last time the method was
+     invoked.
+  */
+  invokeWhile: function(retValue, methodName) {
+    var ret ;
+    var args = $A(arguments) ;
+    retValue = args.shift() ;
+    methodName = args.shift() ;
+    try {
+      this._each(function(item) {
+        var func = (item) ? item[methodName] : null ;
+        ret = func.apply(item, args) ;
+        if (ret != retValue) throw $break ;
+      });
+    } catch (e) {
+      if (e != $break) throw e ;
+    }
+    return ret ;
   }
 } ;
 // All arrays have the SC.Array mixin.  Do this before we add the
@@ -279,21 +307,15 @@ Object.extend(Array.prototype, {
     return ret ;
   },
-  map: function(iterator) {
-    var ret = [] ;
-    try {
-      for(var index=0;index<this.length;index++) {
-        var item = this[index] ;
-        ret.push((iterator || Prototype.K).call(item,item,index))  ;
-      } ;
-    } catch (e) {
-      if (e != $break) throw e ;
-    }
-    return ret ;
-  },
-  // This will invoke the passed method and arguments on the member elements
-  // as long as the value returned is the first argument.
+  /*
+    Invoke the passed method and arguments on the member elements as long as
+    the value returned is the first argument.
+    @param {Object} retValue the expected return value
+    @param {String} methodName the method to call
+    @returns {Object} the return value of the last time the method was
+     invoked.
+  */
   invokeWhile: function(retValue, methodName) {
     var ret ;
     var args = $A(arguments) ;
@@ -313,6 +335,20 @@ Object.extend(Array.prototype, {
     return ret ;
   },
+  map: function(iterator) {
+    var ret = [] ;
+    try {
+      for(var index=0;index<this.length;index++) {
+        var item = this[index] ;
+        ret.push((iterator || Prototype.K).call(item,item,index))  ;
+      } ;
+    } catch (e) {
+      if (e != $break) throw e ;
+    }
+    return ret ;
+  },
   // If you ask for an unknown property, then try to collect the value
   // from member items.
   unknownProperty: function(key, value) {
@@ -328,17 +364,12 @@ Array.prototype.collect = Array.prototype.map ;
 // Returns the passed item as an array.  If the item is already an array,
 // it is returned as is.  If it is not an array, it is placed into one.  If
 // it is null, an empty array is returned.
-Array.asArray = function (array)
-{
-  if(array && !(array instanceof Array))
-  {
+Array.asArray = function (array) {
+  if(array &&
+      ((array.length === undefined) || ($type(array) == T_FUNCTION))) {
     return [array];
   }
-  if(array)
-  {
-    return array;
-  }
-  return [];
+  return (array) ? array : [] ;
 };
 // Alias for asArray

data/frameworks/sproutcore/mixins/control.js ADDED Viewed

@@ -0,0 +1,265 @@
+// ========================================================================
+// SproutCore
+// copyright 2006-2008 Sprout Systems, Inc.
+// ========================================================================
+/**
+  Indicates a value has a mixed state of both on and off.
+*/
+SC.MIXED_STATE = '__MIXED__' ;
+/**
+  @namespace
+  A Control is a view that also implements some basic state functionality.
+  Apply this mixin to any view that you want to have standard control
+  functionality including showing a selected state, enabled state, focus
+  state, etc.
+  h2. About Values and Content
+  Controls typically are used to represent a single value, such as a number,
+  boolean or string.  The value a control is managing is typically stored in
+  a "value" property.  You will typically use the value property when working
+  with controls such as buttons and text fields in a form.
+  An alternative way of working with a control is to use it to manage some
+  specific aspect of a content object.  For example, you might use a label
+  view control to display the "name" property of a Contact record.  This
+  approach is often necessary when using the control as part of a collection
+  view.
+  You can use the content-approach to work with a control by setting the
+  "content" and "contentValueKey" properties of the control.  The
+  "content" property is the content object you want to manage, while the
+  "contentValueKey" is the name of the property on the content object
+  you want the control to display.
+  The default implementation of the Control mixin will essentially map the
+  contentValueKey of a content object to the value property of the
+  control.  Thus if you are writing a custom control yourself, you can simply
+  work with the value property and the content object support will come for
+  free.  Just write an observer for the value property and update your
+  view accordingly.
+  If you are working with a control that needs to display multiple aspects
+  of a single content object (for example showing an icon and label), then
+  you can override the contentValueDidChange() method instead of observing
+  the value property.  This method will be called anytime _any_ property
+  on the content object changes.  You should use this method to check the
+  properties you care about on the content object and update your view if
+  anything you care about has changed.
+  h2. Delegate Support
+  Controls can optionally get the contentDisplayProperty from a
+  displayDelegate, if it is set.  The displayDelegate is often used to
+  delegate common display-related configurations such as which content value
+  to show.  Anytime your control is shown as part of a collection view, the
+  collection view will be automatically set as its displayDelegate.
+*/
+SC.Control = {
+  initMixin: function() {
+    this._contentObserver(); // setup content observing if needed.
+    this.isSelectedObserver() ;
+    this.isEnabledObserver() ;
+    this.isFocusedObserver();
+  },
+  /**
+    Set to true when the item is selected.
+    This property is observable and bindable.
+  */
+  isSelected: false,
+  isSelectedBindingDefault: SC.Binding.OneWayBool,
+  /**
+    Set to true when the item is enabled.
+    This property is observable and bindable.
+  */
+  isEnabled: true,
+  isEnabledBindingDefault: SC.Binding.OneWayBool,
+  /**
+    The value represented by this control.
+    Most controls represent a value of some type, such as a number, string
+    or image URL.  This property should hold that value.  It is bindable
+    and observable.  Changing this value will immediately change the
+    appearance of the control.  Likewise, editing the control
+    will immediately change this value.
+    If instead of setting a single value on a control, you would like to
+    set a content object and have the control display a single property
+    of that control, then you should use the content property instead.
+  */
+  value: null,
+  /**
+    The content object represented by this control.
+    Often you need to use a control to display some single aspect of an
+    object, especially if you are using the control as an item view in a
+    collection view.
+    In those cases, you can set the content and contentValueKey for the
+    control.  This will cause the control to observe the content object for
+    changes to the value property and then set the value of that property
+    on the "value" property of this object.
+    Note that unless you are using this control as part of a form or
+    collection view, then it would be better to instead bind the value of
+    the control directly to a controller property.
+  */
+  content: null,
+  /**
+    The property on the content object that would want to represent the
+    value of this control.  This property should only be set before the
+    content object is first set.  If you have a displayDelegate, then
+    you can also use the contentValueKey of the displayDelegate.
+  */
+  contentValueKey: null,
+  /**
+    Invoked whenever any property on the content object changes.
+    The default implementation will update the value property of the view
+    if the contentValueKey property has changed.  You can override this
+    method to implement whatever additional changes you would like.
+    The key will typically contain the name of the property that changed or
+    '*' if the content object itself has changed.  You should generally do
+    a total reset of '*' is changed.
+    @param {Object} target the content object
+    @param {String} key the property that changes
+  */
+  contentPropertyDidChange: function(target, key) {
+    if (!!this._contentValueKey && ((key == this._contentValueKey) || (key == '*'))) {
+      var content = this.get('content') ;
+      var value = (content) ? content.get(this._contentValueKey) : null;
+      if (value != this._contentValue) {
+        this._contentValue = value ;
+        this.set('value', value) ;
+      }
+    }
+  },
+  /**
+    Relays changes to the value back to the content object if you are using
+    a content object.
+    This observer is triggered whenever the value changes.  It will only do
+    something if it finds you are using the content property and
+    contentValueKey and the new value does not match the old value of the
+    content object.
+    If you are using contentValueKey in some other way than typically
+    implemented by this mixin, then you may want to override this method as
+    well.
+  */
+  updateContentWithValueObserver: function() {
+    if (!this._contentValueKey) return; // do nothing if disabled
+    // get value.  return if value matches current content value.
+    // this avoids infinite loops where setting the value from the content
+    // in turns sets the content and so on.
+    var value = this.get('value') ;
+    if (value == this._contentValue) return ;
+    var content = this.get('content') ;
+    if (!content) return; // do nothing if no content.
+    // passed all of our checks, update the content (and the _contentValue
+    // to avoid infinite loops)
+    this._contentValue = value ;
+    content.set(this._contentValueKey, value) ;
+  }.observes('value'),
+  /**
+    Default observer for selected state changes
+    The default will simply add either a "mixed" or "sel" class name to the
+    root element of your view based on the state. You can override this with
+    your own behavior if you prefer.
+  */
+  isSelectedObserver: function() {
+    var sel = this.get('isSelected') ;
+    this.setClassName('mixed', sel == SC.MIXED_STATE) ;
+    this.setClassName('sel', sel && (sel != SC.MIXED_STATE)) ;
+  }.observes('isSelected'),
+  /**
+    Default observer for the isEnabled state.
+    The default will simply add or remove a "disabled" class name to the root
+    element of your view based on the state.  You can override this with your
+    own behavior if you prefer.
+  */
+  isEnabledObserver: function() {
+    var disabled = !this.get('isEnabled') ;
+    this.setClassName('disabled', disabled);
+    // set disabled attr as well if relevant
+    if (this.rootElement && (this.rootElement.disabled !== undefined) && (this.rootElement.disabled != disabled)) {
+      this.rootElement.disabled = disabled ;
+    }
+  }.observes('isEnabled'),
+  /**
+    Default observer for the isFirstResponder state.
+    The default will add or remove a "focus" class name ot the root element
+    of your view based on the state.  You can override this with your own
+    behavior if you prefer.
+  */
+  isFocusedObserver: function() {
+    this.setClassName('focus', !!this.get('isFirstResponder')) ;
+  }.observes('isFirstResponder'),
+  // This should be null so that if content is also null, the
+  // _contentObserver won't do anything on init.
+  _content: null,
+  /** @private
+    Observes when a content object has changed and handles notifying
+    changes to the value of the content object.
+  */
+  _contentObserver: function() {
+    var content = this.get('content') ;
+    if (this._content == content) return; // nothing changed
+    // create bound observer function
+    if (!this._boundContentPropertyDidChangeObserver) {
+      this._boundContentPropertyDidChangeObserver = this.contentPropertyDidChange.bind(this) ;
+    }
+    var f = this._boundContentPropertyDidChangeObserver ;
+    // remove an observer from the old content if necessary
+    if (this._content && this._content.removeObserver) {
+      this._content.removeObserver('*', f) ;
+    }
+    // cache for future use
+    var del = this.displayDelegate ;
+    this._contentValueKey = this.getDelegateProperty(del, 'contentValueKey');
+    // add observer to new content if necessary.
+    this._content = content ;
+    if (this._content && this._content.addObserver) {
+      this._content.addObserver('*', f) ;
+    }
+    // notify that value did change.
+    this.contentPropertyDidChange(this._content, '*') ;
+  }.observes('content')
+};