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

sproutcore 0.9.1 → 0.9.2

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')
+};