sproutcore 1.4.5-java → 1.5.0-java

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

@@ -1,27 +1,44 @@
 // ==========================================================================
-// SC.GridView
+// Project:   SproutCore - JavaScript Application Framework
+// Copyright: ©2006-2011 Strobe Inc. and contributors.
+//            Portions ©2008-2011 Apple Inc. All rights reserved.
+// License:   Licensed under MIT license (see license.js)
 // ==========================================================================
 
-require('views/list') ;
+sc_require('views/list') ;
 
 /** @class
 
   A grid view renders a collection of items in a grid of rows and columns.
 
-  @extends SC.CollectionView
-  @author    Charles Jolley  
+  @extends SC.ListView
+  @author Charles Jolley
   @version 1.0
 */
 SC.GridView = SC.ListView.extend(
 /** @scope SC.GridView.prototype */ {
-    classNames: ['sc-grid-view'],
+
+  /**
+    @type Array
+    @default ['sc-grid-view']
+    @see SC.View#classNames
+  */
+  classNames: ['sc-grid-view'],
   
+  /**
+    @type Hash
+    @default { left:0, right:0, top:0, bottom:0 }
+    @see SC.View#layout
+  */
   layout: { left:0, right:0, top:0, bottom:0 },
 
   /** 
     The common row height for grid items.
     
     The value should be an integer expressed in pixels.
+    
+    @type Number
+    @default 48
   */
   rowHeight: 48,
   
@@ -29,6 +46,9 @@ SC.GridView = SC.ListView.extend(
     The minimum column width for grid items.  Items will actually
     be laid out as needed to completely fill the space, but the minimum
     width of each item will be this value.
+    
+    @type Number
+    @default 64
   */
   columnWidth: 64,
 
@@ -36,9 +56,21 @@ SC.GridView = SC.ListView.extend(
     The default example item view will render text-based items.
     
     You can override this as you wish.
+    
+    @type SC.View
+    @default SC.LabelView
   */
   exampleView: SC.LabelView,
   
+  /**
+    Possible values:
+    
+      - SC.HORIZONTAL_ORIENTATION
+      - SC.VERTICAL_ORIENTATION
+    
+    @type String
+    @default SC.HORIZONTAL_ORIENTATION
+  */
   insertionOrientation: SC.HORIZONTAL_ORIENTATION,
   
   /** @private */
@@ -99,15 +131,18 @@ SC.GridView = SC.ListView.extend(
     return ret; 
   },
   
+  /**
+    @type SC.View
+  */
   insertionPointClass: SC.View.extend({
     classNames: ['grid-insertion-point'],
     
     render: function(context, firstTime) {
       if (firstTime) context.push('<span class="anchor"></span>') ;
     }
-
   }),
   
+  /** @private */
   showInsertionPoint: function(itemView, dropOperation) {
     if (!itemView) return ;
     
@@ -149,6 +184,7 @@ SC.GridView = SC.ListView.extend(
     
   },
     
+  /** @private */
   hideInsertionPoint: function() {
     var insertionPoint = this._insertionPointView ;
     if (insertionPoint) insertionPoint.removeFromParent() ;
@@ -159,7 +195,7 @@ SC.GridView = SC.ListView.extend(
     }
   },
   
-  // // We can do this much faster programatically using the rowHeight
+  /** @private */
   insertionIndexForLocation: function(loc, dropOperation) {  
     var f = this.get('frame'),
         sf = this.get('clippingFrame'),

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

@@ -0,0 +1,82 @@
+// ==========================================================================
+// Project:   SproutCore - JavaScript Application Framework
+// Copyright: ©2006-2011 Strobe Inc. and contributors.
+//            Portions ©2008-2011 Apple Inc. All rights reserved.
+// License:   Licensed under MIT license (see license.js)
+// ==========================================================================
+
+/** @class
+
+  Provides a button that displays an image instead of the standard button
+  user interface.
+
+  It behaves the same as an SC.ButtonView, but has an image property that
+  should be set to a unique class name.
+
+  For example:
+
+      SC.ImageButtonView.create({
+        action: 'imageButtonWasClicked',
+
+        image: 'my-image-button-icon'
+      });
+
+  You could then add some CSS rule for a normal state:
+
+      $theme.image-button .my-image-button-icon {
+        @include slice('my-image-button-image.png');
+
+        // and an active state:
+        &.active {
+          @include slice('my-image-button-image-active.png');
+        }
+      }
+
+  Note: in addition to using SCSS and the Chance directives shown above, you
+  can use normal CSS syntax and sc_static.
+
+  @extends SC.View
+  @extends SC.Control
+  @extends SC.ButtonView
+  @since SproutCore 1.5
+*/
+SC.ImageButtonView = SC.ButtonView.extend(
+/** @scope SC.ImageButtonView.prototype */ {
+
+  /**
+    @type Array
+    @default ['sc-image-button-view']
+    @see SC.View#classNames
+  */
+  classNames: ['sc-image-button-view'],
+
+  /**
+    Unlike SC.ButtonView, SC.ImageButtonView does not have a default theme
+    that needs to be applied for backwards compatibility.
+
+    @type String
+    @default null
+  */
+  themeName: null,
+
+  /**
+    @type String
+    @default 'imageButtonRenderDelegate'
+  */
+  renderDelegateName: 'imageButtonRenderDelegate',
+  
+  /**
+    @type Array
+    @default ['image']
+  */
+  displayProperties: ['image'],
+
+  /**
+    A class name that will be applied to the img tag of the button.
+    
+    @type String
+    @default null
+  */
+  image: null
+
+}) ;

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

@@ -1,7 +1,7 @@
 // ==========================================================================
 // 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)
 // ==========================================================================
 
@@ -18,13 +18,13 @@ sc_require('mixins/collection_row_delegate');
   also should provide a default rowHeight.  Setting this value will allow 
   the ListView to optimize its rendering.
   
-  h2. Variable Row Heights
+  ## Variable Row Heights
 
   Normally you set the row height through the rowHeight property.  You can 
   also support custom row heights by implementing the 
   contentCustomRowHeightIndexes property to return an index set.
   
-  h2. Using ListView with Very Large Data Sets
+  ## Using ListView with Very Large Data Sets
   
   ListView implements incremental rendering, which means it will only render
   HTML for the items that are current visible on the screen.  You can use it
@@ -54,44 +54,58 @@ sc_require('mixins/collection_row_delegate');
   @extends SC.CollectionRowDelegate
   @since SproutCore 1.0
 */
-SC.ListView = SC.CollectionView.extend(
-  SC.CollectionRowDelegate,
+SC.ListView = SC.CollectionView.extend(SC.CollectionRowDelegate,
 /** @scope SC.ListView.prototype */ {
-  
+
+  /**
+    @type Array
+    @default ['sc-list-view']
+    @see SC.View#classNames
+  */
   classNames: ['sc-list-view'],
 
+  /**
+    @type Boolean
+    @default YES
+  */
   acceptsFirstResponder: YES,
   
   /**
-  * If set to YES, the default theme will show alternating rows
-  * for the views this ListView created through exampleView property.
-  *
-  * @property {Boolean} 
+    If set to YES, the default theme will show alternating rows
+    for the views this ListView created through exampleView property.
+    
+    @type Boolean
+    @default NO
   */
   showAlternatingRows: NO,
   
+  
   // ..........................................................
   // METHODS
   //
   
+  /** @private */
   render: function(context, firstTime) {
     context.setClass('alternating', this.get('showAlternatingRows'));
     
     return sc_super();
   },
 
+
   // ..........................................................
   // COLLECTION ROW DELEGATE SUPPORT
   // 
   
-  
   /**
-    Returns the current collectionRowDelegate.  This property will recompute
-    everytime the content changes.
+    @field
+    @type Object
+    @observes 'delegate'
+    @observes 'content'
   */
   rowDelegate: function() {
-    var del     = this.delegate,
+    var del = this.delegate,
         content = this.get('content');
+
     return this.delegateFor('isCollectionRowDelegate', del, content);
   }.property('delegate', 'content').cacheable(),
   
@@ -187,6 +201,7 @@ SC.ListView = SC.CollectionView.extend(
     return this ;
   },
   
+  
   // ..........................................................
   // ROW PROPERTIES
   // 
@@ -289,7 +304,7 @@ SC.ListView = SC.CollectionView.extend(
     @returns {SC.ListView} receiver
   */  
   rowHeightDidChangeForIndexes: function(indexes) {
-    var len     = this.get('length');
+    var len = this.get('length');
 
     // clear any cached offsets
     this._sclv_heightCache = this._sclv_offsetCache = null;
@@ -318,17 +333,20 @@ SC.ListView = SC.CollectionView.extend(
   },
   
   /**
-  
     Computes the layout for a specific content index by combining the current
     row heights.
-  
+    
+    @param {Number} contentIndex
+    @returns {Hash} layout hash for the index provided
   */
   layoutForContentIndex: function(contentIndex) {
+    var del = this.get('rowDelegate');
+    
     return {
-      top:    this.rowOffsetForContentIndex(contentIndex),
-      height: this.rowHeightForContentIndex(contentIndex),
-      left:   0, 
-      right:  0
+      top: this.rowOffsetForContentIndex(contentIndex),
+      height: this.rowHeightForContentIndex(contentIndex) - del.get('rowPadding') * 2,
+      left: 0,
+      right: 0
     };
   },
   
@@ -410,31 +428,32 @@ SC.ListView = SC.CollectionView.extend(
     return SC.IndexSet.create(start, end-start);
   },
   
+  
   // ..........................................................
   // DRAG AND ROP SUPPORT
   // 
   
-  
   /**
     Default view class used to draw an insertion point.  The default 
     view will show a vertical line.  Any view you create
     should expect an outlineLevel property set, which should impact your left
     offset.
     
-    @property 
-    @type {SC.View}
+    @field
+    @type SC.View
   */
   insertionPointView: SC.View.extend({
     classNames: 'sc-list-insertion-point',
     
+    /** @private */
     render: function(context, firstTime) {
       if (firstTime) context.push('<div class="anchor"></div>');
     }
-    
   }),
 
   /**
     Default implementation will show an insertion point
+    @see SC.CollectionView#showInsertionPoint
   */
   showInsertionPoint: function(itemView, dropOperation) {
     var view = this._insertionPointView;
@@ -486,6 +505,9 @@ SC.ListView = SC.CollectionView.extend(
     }
   },
   
+  /**
+    @see SC.CollectionView#hideInsertionPoint
+  */
   hideInsertionPoint: function() {
     if (this._lastDropOnView) {
       this._lastDropOnView.set('isSelected', NO);
@@ -502,15 +524,15 @@ SC.ListView = SC.CollectionView.extend(
     a point, relative to the top/left corner of the receiver view.  The return
     value is an index plus a dropOperation, which is computed as such:
     
-    - if outlining is not used and you are within 5px of an edge, DROP_BEFORE
-      the item after the edge.
-      
-    - if outlining is used and you are within 5px of an edge and the previous
-      item has a different outline level then the next item, then DROP_AFTER
-      the previous item if you are closer to that outline level.
-      
-    - if dropOperation = SC.DROP_ON and you are over the middle of a row, then
-      use DROP_ON.
+      - if outlining is not used and you are within 5px of an edge, DROP_BEFORE
+        the item after the edge.
+      - if outlining is used and you are within 5px of an edge and the previous
+        item has a different outline level then the next item, then DROP_AFTER
+        the previous item if you are closer to that outline level.
+      - if dropOperation = SC.DROP_ON and you are over the middle of a row, then
+        use DROP_ON.
+    
+    @see SC.CollectionView.insertionIndexForLocation
   */
   insertionIndexForLocation: function(loc, dropOperation) {
     var locRect = {x:loc.x, y:loc.y, width:1, height:1},
@@ -544,8 +566,6 @@ SC.ListView = SC.CollectionView.extend(
       }
     }
     
-    
-    
     // ok, now if we are in last 10px, go to next item.
     if ((index<len) && (loc.y >= max-10)) index++;
     
@@ -611,6 +631,7 @@ SC.ListView = SC.CollectionView.extend(
     return [index, dropOperation];
   },
   
+  /** @private */
   mouseWheel: function(evt) {
     // The following commits changes in a list item that is being edited,
     // if the list is scrolled.
@@ -627,6 +648,7 @@ SC.ListView = SC.CollectionView.extend(
   // INTERNAL SUPPORT
   // 
 
+  /** @private */
   init: function() {
     sc_super();
     this._sclv_rowDelegateDidChange();

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

@@ -1,152 +1,246 @@
 // ==========================================================================
 // Project:   SproutCore - JavaScript Application Framework
 // Copyright: ©2006-2011 Strobe Inc. and contributors.
-//            portions copyright @2009 Apple Inc.
+//            Portions ©2008-2011 Apple Inc. All rights reserved.
 // License:   Licensed under MIT license (see license.js)
 // ==========================================================================
 
+
+/**
+  @static
+  @constant
+*/
 SC.LIST_ITEM_ACTION_CANCEL = 'sc-list-item-cancel-action';
+
+/**
+  @static
+  @constant
+*/
 SC.LIST_ITEM_ACTION_REFRESH = 'sc-list-item-cancel-refresh';
+
+/**
+  @static
+  @constant
+*/
 SC.LIST_ITEM_ACTION_EJECT = 'sc-list-item-cancel-eject';
 
 /**
   @class
-  
+
   Many times list items need to display a lot more than just a label of text.
-  You often need to include checkboxes, icons, right icons, extra counts and 
-  an action or warning icon to the far right. 
-  
-  A ListItemView can implement all of this for you in a more efficient way 
+  You often need to include checkboxes, icons, right icons, extra counts and
+  an action or warning icon to the far right.
+
+  A ListItemView can implement all of this for you in a more efficient way
   than you might get if you simply put together a list item on your own using
   views.
-  
+
   @extends SC.View
   @extends SC.Control
-  @extends SC.Editable
+  @extends SC.InlineEditable
   @extends SC.StaticLayout
   @since SproutCore 1.0
 */
-SC.ListItemView = SC.View.extend(
-    SC.Control,
+SC.ListItemView = SC.View.extend(SC.InlineEditable, SC.Control,
 /** @scope SC.ListItemView.prototype */ {
-  
+
+  /**
+    @type Array
+    @default ['sc-list-item-view']
+    @see SC.View#classNames
+  */
   classNames: ['sc-list-item-view'],
-  
+
+  /**
+    @type Array
+    @default ['disclosureState', 'escapeHTML']
+    @see SC.View#displayProperties
+  */
+  displayProperties: ['disclosureState', 'escapeHTML'],
+
+
   // ..........................................................
   // KEY PROPERTIES
-  // 
-  
+  //
+
   /**
     The content object the list item will display.
-    
+
     @type SC.Object
+    @default null
   */
   content: null,
-  
+
+  /**
+    The index of the content object in the ListView to which this
+    ListItemView belongs.
+
+    For example, if this ListItemView represents the first object
+    in a ListView, this property would be 0.
+
+    @type Number
+    @default null
+    @readOnly
+  */
+  contentIndex: null,
+
   /**
     (displayDelegate) True if you want the item view to display an icon.
-    
+
     If false, the icon on the list item view will be hidden.  Otherwise,
     space will be left for the icon next to the list item view.
+    
+    @type Boolean
+    @default NO
   */
   hasContentIcon: NO,
 
   /**
     (displayDelegate) True if you want the item view to display a right icon.
-    
+
     If false, the icon on the list item view will be hidden.  Otherwise,
     space will be left for the icon next to the list item view.
+    
+    @type Boolean
+    @default NO
   */
   hasContentRightIcon: NO,
-  
+
   /**
-    (displayDelegate) True if you want space to be allocated for a branch 
+    (displayDelegate) True if you want space to be allocated for a branch
     arrow.
-    
+
     If false, the space for the branch arrow will be collapsed.
+    
+    @type Boolean
+    @default NO
   */
   hasContentBranch: NO,
-  
+
   /**
     (displayDelegate) The name of the property used for the checkbox value.
-    
+
     The checkbox will only be visible if this key is not null.
-    
-    @type {String}
+
+    @type String
+    @default null
   */
   contentCheckboxKey: null,
-  
+
+  /**
+    The URL or CSS class name to use for the icon. This is only used if
+    contentIconKey is null, or returns null from the delegate.
+    
+    @type String
+    @default null
+  */
+  icon: null,
+
   /**
     (displayDelegate) Property key to use for the icon url
 
-    This property will be checked on the content object to determine the 
+    This property will be checked on the content object to determine the
     icon to display.  It must return either a URL or a CSS class name.
+    
+    @type String
+    @default NO
   */
   contentIconKey: null,
- 
+
+  /**
+    The URL or CSS class name to use for the right icon. This is only used if
+    contentRightIconKey is null, or returns null from the delegate.
+    
+    @type String
+    @default null
+  */
+  rightIcon: null,
+
   /**
     (displayDelegate) Property key to use for the right icon url
 
-    This property will be checked on the content object to determine the 
+    This property will be checked on the content object to determine the
     icon to display.  It must return either a URL or a CSS class name.
+    
+    @type String
+    @default null
   */
   contentRightIconKey: null,
-  
+
   /**
     (displayDelegate) The name of the property used for label itself
-    
+
     If null, then the content object itself will be used..
+    
+    @type String
+    @default null
   */
   contentValueKey: null,
-  
+
   /**
     IF true, the label value will be escaped to avoid HTML injection attacks.
-    You should only disable this option if you are sure you will only 
-    display content that is already escaped and you need the added 
+    You should only disable this option if you are sure you will only
+    display content that is already escaped and you need the added
     performance gain.
+    
+    @type Boolean
+    @default YES
   */
   escapeHTML: YES,
-  
+
   /**
-    (displayDelegate) The name of the property used to find the count of 
-    unread items. 
-    
-    The count will only be visible if this property is not null and the 
+    (displayDelegate) The name of the property used to find the count of
+    unread items.
+
+    The count will only be visible if this property is not null and the
     returned value is not 0.
+    
+    @type String
+    @default null
   */
   contentUnreadCountKey: null,
-  
+
   /**
     (displayDelegate) The name of the property used to determine if the item
     is a branch or leaf (i.e. if the branch icon should be displayed to the
     right edge.)
-    
+
     If this is null, then the branch view will be completely hidden.
     Otherwise space will be allocated for it.
+    
+    @type String
+    @default null
   */
   contentIsBranchKey: null,
   
-
-  /**
-    YES if the item view is currently editing.
-  */
-  isEditing: NO,
-  
   /**
     Indent to use when rendering a list item with an outline level > 0.  The
-    left edge of the list item will be indented by this amount for each 
+    left edge of the list item will be indented by this amount for each
     outline level.
+    
+    @type Number
+    @default 16
   */
   outlineIndent: 16,
-  
+
   /**
     Outline level for this list item.  Usually set by the collection view.
+    
+    @type Number
+    @default 0
   */
   outlineLevel: 0,
-  
+
   /**
     Disclosure state for this list item.  Usually set by the collection view
-    when the list item is created.
+    when the list item is created. Possible values:
+    
+      - SC.LEAF_NODE
+      - SC.BRANCH_OPEN
+      - SC.BRANCH_CLOSED
+    
+    @type String
+    @default SC.LEAF_NODE
   */
   disclosureState: SC.LEAF_NODE,
 
@@ -156,18 +250,23 @@ SC.ListItemView = SC.View.extend(
   */
   validator: null,
 
+  /** @private */
   contentPropertyDidChange: function() {
     //if (this.get('isEditing')) this.discardEditing() ;
     if (this.get('contentIsEditable') !== this.contentIsEditable()) {
       this.notifyPropertyChange('contentIsEditable');
     }
-    
+
     this.displayDidChange();
   },
-  
+
   /**
-    Determines if content is editable or not.  Checkboxes and other related
+    Determines if content is editable or not. Checkboxes and other related
     components will render disabled if an item is not editable.
+    
+    @field
+    @type Boolean
+    @observes content
   */
   contentIsEditable: function() {
     var content = this.get('content');
@@ -175,345 +274,79 @@ SC.ListItemView = SC.View.extend(
   }.property('content').cacheable(),
   
   /**
-    Fills the passed html-array with strings that can be joined to form the
-    innerHTML of the receiver element.  Also populates an array of classNames
-    to set on the outer element.
-    
-    @param {SC.RenderContext} context
-    @param {Boolean} firstTime
-    @returns {void}
+    @type Object
+    @default SC.InlineTextFieldDelegate
   */
-  render: function(context, firstTime) {
-    var content = this.get('content'),
-        del     = this.displayDelegate,
-        level   = this.get('outlineLevel'),
-        indent  = this.get('outlineIndent'),
-        key, value, working, classArray = [];
-    
-    // add alternating row classes
-    classArray.push((this.get('contentIndex')%2 === 0) ? 'even' : 'odd');
-    context.setClass('disabled', !this.get('isEnabled'));
+  inlineEditorDelegate: SC.InlineTextFieldDelegate,
+  
+  /**
+    Finds and retrieves the element containing the label.  This is used
+    for inline editing.  The default implementation returns a CoreQuery
+    selecting any label elements.   If you override renderLabel() you
+    probably need to override this as well.
 
-    // outline level wrapper
-    working = context.begin("div").addClass("sc-outline");
-    if (level>=0 && indent>0) working.addStyle("left", indent*(level+1));
+    @returns {jQuery} jQuery object selecting label elements
+  */
+  $label: function() {
+    return this.$('label');
+  },
 
-    // handle disclosure triangle
-    value = this.get('disclosureState');
-    if (value !== SC.LEAF_NODE) {
-      this.renderDisclosure(working, value);
-      classArray.push('has-disclosure');
-    }
-    
-    
-    // handle checkbox
-    key = this.getDelegateProperty('contentCheckboxKey', del) ;
-    if (key) {
-      value = content ? (content.get ? content.get(key) : content[key]) : NO ;
-      this.renderCheckbox(working, value);
-      classArray.push('has-checkbox');
-    }
-    
-    // handle icon
-    if (this.getDelegateProperty('hasContentIcon', del)) {
-      key = this.getDelegateProperty('contentIconKey', del) ;
-      value = (key && content) ? (content.get ? content.get(key) : content[key]) : null ;
-      
-      this.renderIcon(working, value);
-      classArray.push('has-icon');      
-    }
-    
-    // handle label -- always invoke
-    key = this.getDelegateProperty('contentValueKey', del) ;
-    value = (key && content) ? (content.get ? content.get(key) : content[key]) : content ;
-    if (value && SC.typeOf(value) !== SC.T_STRING) value = value.toString();
-    if (this.get('escapeHTML')) value = SC.RenderContext.escapeHTML(value);
-    this.renderLabel(working, value);
+  /** @private
+    Determines if the event occured inside an element with the specified
+    classname or not.
+  */
+  _isInsideElementWithClassName: function(className, evt) {
+    var layer = this.get('layer');
+    if (!layer) return NO ; // no layer yet -- nothing to do
 
-    // handle right icon
-    if (this.getDelegateProperty('hasContentRightIcon', del)) {
-      key = this.getDelegateProperty('contentRightIconKey', del) ;
-      value = (key && content) ? (content.get ? content.get(key) : content[key]) : null ;
-      
-      this.renderRightIcon(working, value);
-      classArray.push('has-right-icon');
-    }
-    
-    // handle unread count
-    key = this.getDelegateProperty('contentUnreadCountKey', del) ;
-    value = (key && content) ? (content.get ? content.get(key) : content[key]) : null ;
-    if (!SC.none(value) && (value !== 0)) {
-      this.renderCount(working, value) ;
-      var digits = ['zero', 'one', 'two', 'three', 'four', 'five'];
-      var valueLength = value.toString().length;
-      var digitsLength = digits.length;
-      var digit = (valueLength < digitsLength) ? digits[valueLength] : digits[digitsLength-1];
-      classArray.push('has-count '+digit+'-digit');
-    }
-    
-    // handle action 
-    key = this.getDelegateProperty('listItemActionProperty', del) ;
-    value = (key && content) ? (content.get ? content.get(key) : content[key]) : null ;
-    if (value) {
-      this.renderAction(working, value);
-      classArray.push('has-action');
-    }
-    
-    // handle branch
-    if (this.getDelegateProperty('hasContentBranch', del)) {
-      key = this.getDelegateProperty('contentIsBranchKey', del);
-      value = (key && content) ? (content.get ? content.get(key) : content[key]) : NO ;
-      this.renderBranch(working, value);
-      classArray.push('has-branch');
+    var el = SC.$(evt.target) ;
+    var ret = NO, classNames ;
+    while(!ret && el.length>0 && (el[0] !== layer)) {
+      if (el.hasClass(className)) ret = YES ;
+      el = el.parent() ;
     }
-    context.addClass(classArray);
-    context = working.end();
+    el = layer = null; //avoid memory leaks
+    return ret ;
   },
-  
-  /**
-    Adds a disclosure triangle with the appropriate display to the content.
-    This method will only be called if the disclosure state of the view is
-    something other than SC.LEAF_NODE.
 
-    @param {SC.RenderContext} context the render context
-    @param {Boolean} state YES, NO or SC.MIXED_STATE
-    @returns {void}
+  /** @private
+    Returns YES if the list item has a checkbox and the event occurred
+    inside of it.
   */
-  renderDisclosure: function(context, state) {
-    var key = (state === SC.BRANCH_OPEN) ? "open" : "closed",
-        cache = this._scli_disclosureHtml,
-        html, tmp;
-        
-    if (!cache) cache = this.constructor.prototype._scli_disclosureHtml = {};
-    html = cache[key];
-
-    if (!html) {
-      html = cache[key] = '<img src="'+SC.BLANK_IMAGE_URL+'" class="disclosure button '+key+'" />';
-    }
-    
-    context.push(html);
+  _isInsideCheckbox: function(evt) {
+    var del = this.displayDelegate ;
+    var checkboxKey = this.getDelegateProperty('contentCheckboxKey', del) ;
+    return checkboxKey && this._isInsideElementWithClassName('sc-checkbox-view', evt);
   },
-  
-  /**
-    Adds a checkbox with the appropriate state to the content.  This method
-    will only be called if the list item view is supposed to have a 
-    checkbox.
-    
-    @param {SC.RenderContext} context the render context
-    @param {Boolean} state YES, NO or SC.MIXED_STATE
-    @returns {void}
+
+  /** @private
+    Returns YES if the list item has a disclosure triangle and the event
+    occurred inside of it.
   */
-  renderCheckbox: function(context, state) {
-    
-    var key = (state === SC.MIXED_STATE) ? "mixed" : state ? "sel" : "nosel",
-        cache = this._scli_checkboxHtml,
-        isEnabled = this.get('contentIsEditable') && this.get('isEnabled'),
-        html, tmp, classArray=[];
-        
-    if (!isEnabled) key = SC.keyFor('disabled', key);
-    if (!cache) cache = this.constructor.prototype._scli_checkboxHtml = {};
-    html = cache[key];
-    
-    if (!html) {
-      tmp = SC.RenderContext('div').attr('role', 'button')
-        .classNames(SC.clone(SC.CheckboxView.prototype.classNames));
-
-      // set state on html
-      if (state === SC.MIXED_STATE) classArray.push('mixed');
-      else if(state) classArray.push('sel');
-      
-      // disabled
-      if(!isEnabled) classArray.push('disabled');
-      
-      tmp.addClass(classArray);
-
-      // now add inner content.  note we do not add a real checkbox because
-      // we don't want to have to setup a change observer on it.
-      tmp.push('<span class="button"></span>');
-
-      // apply edit
-      html = cache[key] = tmp.join();
-    }
-    
-    context.push(html);
+  _isInsideDisclosure: function(evt) {
+    if (this.get('disclosureState')===SC.LEAF_NODE) return NO;
+    return this._isInsideElementWithClassName('sc-disclosure-view', evt);
   },
-  
-  /** 
-    Generates an icon for the label based on the content.  This method will
-    only be called if the list item view has icons enabled.  You can override
-    this method to display your own type of icon if desired.
-    
-    @param {SC.RenderContext} context the render context
-    @param {String} icon a URL or class name.
-    @returns {void}
-  */
-  renderIcon: function(context, icon){
-    // get a class name and url to include if relevant
-    var url = null, className = null , classArray=[];
-    if (icon && SC.ImageView.valueIsUrl(icon)) {
-      url = icon; className = '' ;
-    } else {
-      className = icon; url = SC.BLANK_IMAGE_URL ;
-    }
-    
-    // generate the img element...
-    classArray.push(className,'icon');
-    context.begin('img')
-            .addClass(classArray)
-            .attr('src', url)
-            .end();
-  },
-  
-  /** 
-   Generates a label based on the content.  You can override this method to 
-   render your own label if desired.
-
-   @param {SC.RenderContext} context the render context
-   @param {String} label the label to display, already HTML escaped.
-   @returns {void}
-  */
-  renderLabel: function(context, label) {
-    context.push('<label>', label || '', '</label>') ;
-  },
-  
-  /**
-    Finds and retrieves the element containing the label.  This is used
-    for inline editing.  The default implementation returns a CoreQuery
-    selecting any label elements.   If you override renderLabel() you 
-    probably need to override this as well.
-  
-    @returns {SC.CoreQuery} CQ object selecting label elements
-  */
-  $label: function() {
-    return this.$('label') ;
-  },
-
-  /** 
-    Generates a right icon for the label based on the content. This method
-    will only be called if the list item view has icons enabled. You can
-    override this method to display your own type of icon if desired.
-    
-    @param {SC.RenderContext} context the render context
-    @param {String} icon a URL or class name.
-    @returns {void}
-  */
-  renderRightIcon: function(context, icon){
-    // get a class name and url to include if relevant
-    var url = null, className = null, classArray=[];
-    if (icon && SC.ImageView.valueIsUrl(icon)) {
-      url = icon; className = '' ;
-    } else {
-      className = icon; url = SC.BLANK_IMAGE_URL ;
-    }
-    
-    // generate the img element...
-    classArray.push('right-icon',className);
-    context.begin('img')
-      .addClass(classArray)
-      .attr('src', url)
-    .end();
-  },
-  
-  /** 
-   Generates an unread or other count for the list item.  This method will
-   only be called if the list item view has counts enabled.  You can 
-   override this method to display your own type of counts if desired.
-   
-   @param {SC.RenderContext} context the render context
-   @param {Number} count the count
-   @returns {void}
-  */
-  renderCount: function(context, count) {
-    context.push('<span class="count"><span class="inner">',
-                  count.toString(),'</span></span>') ;
-  },
-  
-  /**
-    Generates the html string used to represent the action item for your 
-    list item.  override this to return your own custom HTML
-    
-    @param {SC.RenderContext} context the render context
-    @param {String} actionClassName the name of the action item
-    @returns {void}
-  */
-  renderAction: function(context, actionClassName){
-    context.push('<img src="',SC.BLANK_IMAGE_URL,'" class="action" />');
-  },
-  
-  /**
-   Generates the string used to represent the branch arrow. override this to 
-   return your own custom HTML
-   
-   @param {SC.RenderContext} context the render context
-   @param {Boolean} hasBranch YES if the item has a branch
-   @returns {void}
-  */
-  renderBranch: function(context, hasBranch) {
-    var classArray=[];
-    classArray.push('branch',hasBranch ? 'branch-visible' : 'branch-hidden');
-    context.begin('span')
-          .addClass(classArray)
-          .push('&nbsp;')
-          .end();
-  },
-  
-  /** 
-    Determines if the event occured inside an element with the specified
-    classname or not.
-  */
-  _isInsideElementWithClassName: function(className, evt) {
-    var layer = this.get('layer');
-    if (!layer) return NO ; // no layer yet -- nothing to do
-    
-    var el = SC.$(evt.target) ;
-    var ret = NO, classNames ;
-    while(!ret && el.length>0 && (el[0] !== layer)) {
-      if (el.hasClass(className)) ret = YES ;
-      el = el.parent() ;
-    }
-    el = layer = null; //avoid memory leaks
-    return ret ;
-  },
-  
-  /** @private
-    Returns YES if the list item has a checkbox and the event occurred 
-    inside of it.
-  */
-  _isInsideCheckbox: function(evt) {
-    var del = this.displayDelegate ;
-    var checkboxKey = this.getDelegateProperty('contentCheckboxKey', del) ;
-    return checkboxKey && this._isInsideElementWithClassName('sc-checkbox-view', evt);
-  },
-  
-  /** @private 
-    Returns YES if the list item has a disclosure triangle and the event 
-    occurred inside of it.
-  */
-  _isInsideDisclosure: function(evt) {
-    if (this.get('disclosureState')===SC.LEAF_NODE) return NO;
-    return this._isInsideElementWithClassName('disclosure', evt);
-  },
-  
-  /** @private 
-    Returns YES if the list item has a right icon and the event 
-    occurred inside of it.
+
+  /** @private
+    Returns YES if the list item has a right icon and the event
+    occurred inside of it.
   */
   _isInsideRightIcon: function(evt) {
     var del = this.displayDelegate ;
     var rightIconKey = this.getDelegateProperty('hasContentRightIcon', del) || !SC.none(this.rightIcon);
     return rightIconKey && this._isInsideElementWithClassName('right-icon', evt);
   },
-  
-  /** @private 
-  mouseDown is handled only for clicks on the checkbox view or or action
-  button.
+
+  /** @private
+    mouseDown is handled only for clicks on the checkbox view or or action
+    button.
   */
   mouseDown: function(evt) {
-    
     // if content is not editable, then always let collection view handle the
     // event.
-    if (!this.get('contentIsEditable')) return NO ; 
-    
+    if (!this.get('contentIsEditable')) return NO ;
+
     // if occurred inside checkbox, item view should handle the event.
     if (this._isInsideCheckbox(evt)) {
       this._addCheckboxActiveState() ;
@@ -532,17 +365,18 @@ SC.ListItemView = SC.View.extend(
       this._isMouseInsideRightIcon = YES ;
       return YES;
     }
-    
+
     return NO ; // let the collection view handle this event
   },
-  
+
+  /** @private */
   mouseUp: function(evt) {
     var ret= NO, del, checkboxKey, content, state, idx, set;
 
-    // if mouse was down in checkbox -- then handle mouse up, otherwise 
+    // if mouse was down in checkbox -- then handle mouse up, otherwise
     // allow parent view to handle event.
     if (this._isMouseDownOnCheckbox) {
-   
+
       // update only if mouse inside on mouse up...
       if (this._isInsideCheckbox(evt)) {
         del = this.displayDelegate ;
@@ -555,10 +389,10 @@ SC.ListItemView = SC.View.extend(
           this.displayDidChange(); // repaint view...
         }
       }
- 
+
       this._removeCheckboxActiveState() ;
       ret = YES ;
-    
+
     // if mouse as down on disclosure -- handle mosue up.  otherwise pass on
     // to parent.
     } else if (this._isMouseDownOnDisclosure) {
@@ -567,146 +401,189 @@ SC.ListItemView = SC.View.extend(
         idx   = this.get('contentIndex');
         set   = (!SC.none(idx)) ? SC.IndexSet.create(idx) : null;
         del = this.get('displayDelegate');
-        
+
         if (state === SC.BRANCH_OPEN) {
           if (set && del && del.collapse) del.collapse(set);
           else this.set('disclosureState', SC.BRANCH_CLOSED);
           this.displayDidChange();
-          
+
         } else if (state === SC.BRANCH_CLOSED) {
           if (set && del && del.expand) del.expand(set);
           else this.set('disclosureState', SC.BRANCH_OPEN);
           this.displayDidChange();
         }
       }
-     
+
       this._removeDisclosureActiveState();
       ret = YES ;
-    // if mouse was down in right icon -- then handle mouse up, otherwise 
+    // if mouse was down in right icon -- then handle mouse up, otherwise
     // allow parent view to handle event.
     } else if (this._isMouseDownOnRightIcon) {
       this._removeRightIconActiveState() ;
       ret = YES ;
-    } 
-   
+    }
+
     // clear cached info
     this._isMouseInsideCheckbox = this._isMouseDownOnCheckbox = NO ;
     this._isMouseDownOnDisclosure = this._isMouseInsideDisclosure = NO ;
     this._isMouseInsideRightIcon = this._isMouseDownOnRightIcon = NO ;
     return ret ;
   },
-  
+
+  /** @private */
   mouseMoved: function(evt) {
     if (this._isMouseDownOnCheckbox && this._isInsideCheckbox(evt)) {
       this._addCheckboxActiveState() ;
       this._isMouseInsideCheckbox = YES ;
     } else if (this._isMouseDownOnCheckbox) {
-      this._removeCheckboxActiveState() ;
-      this._isMouseInsideCheckbox = NO ;
+     this._removeCheckboxActiveState() ;
+     this._isMouseInsideCheckbox = NO ;
     } else if (this._isMouseDownOnDisclosure && this._isInsideDisclosure(evt)) {
       this._addDisclosureActiveState();
       this._isMouseInsideDisclosure = YES;
-    } else if (this._isMouseDownOnDisclosure) {
-      this._removeDisclosureActiveState();
-      this._isMouseInsideDisclosure = NO ;
+   } else if (this._isMouseDownOnDisclosure) {
+     this._removeDisclosureActiveState();
+     this._isMouseInsideDisclosure = NO ;
     } else if (this._isMouseDownOnRightIcon && this._isInsideRightIcon(evt)) {
       this._addRightIconActiveState();
       this._isMouseInsideRightIcon = YES;
-    } else if (this._isMouseDownOnRightIcon) {
-      this._removeRightIconActiveState();
-      this._isMouseInsideRightIcon = NO ;
-    }
-    return NO ;
+   } else if (this._isMouseDownOnRightIcon) {
+     this._removeRightIconActiveState();
+     this._isMouseInsideRightIcon = NO ;
+   }
+   return NO ;
   },
-  
+
+  /** @private */
   touchStart: function(evt){
     return this.mouseDown(evt);
   },
-  
+
+  /** @private */
   touchEnd: function(evt){
     return this.mouseUp(evt);
   },
-  
+
+  /** @private */
   touchEntered: function(evt){
     return this.mouseEntered(evt);
   },
-  
+
+  /** @private */
   touchExited: function(evt){
     return this.mouseExited(evt);
   },
-  
-  
+
+
+  /** @private */
   _addCheckboxActiveState: function() {
-    var enabled = this.get('isEnabled');
-    this.$('.sc-checkbox-view').setClass('active', enabled);
+    if (this.get('isEnabled')) {
+      if (this._checkboxRenderDelegate) {
+        var source = this._checkboxRenderSource;
+
+        source.set('isActive', YES);
+
+        this._checkboxRenderDelegate.update(source, this.$('.sc-checkbox-view'));
+      } else {
+        // for backwards-compatibility.
+        this.$('.sc-checkbox-view').addClass('active');
+      }
+    }
   },
-  
+
+  /** @private */
   _removeCheckboxActiveState: function() {
-    this.$('.sc-checkbox-view').removeClass('active');
+    if (this._checkboxRenderer) {
+      var source = this._checkboxRenderSource;
+
+      source.set('isActive', NO);
+
+      this._checkboxRenderDelegate.update(source, this.$('.sc-checkbox-view'));
+    } else {
+      // for backwards-compatibility.
+      this.$('.sc-checkbox-view').removeClass('active');
+    }
   },
 
+  /** @private */
   _addDisclosureActiveState: function() {
-    var enabled = this.get('isEnabled');
-    this.$('img.disclosure').setClass('active', enabled);
+    if (this.get('isEnabled')) {
+      if (this._disclosureRenderDelegate) {
+        var source = this._disclosureRenderSource;
+        source.set('isActive', YES);
+
+        this._disclosureRenderDelegate.update(source, this.$('.sc-disclosure-view'));
+      } else {
+        // for backwards-compatibility.
+        this.$('.sc-disclosure-view').addClass('active');
+      }
+
+    }
   },
-  
+
+  /** @private */
   _removeDisclosureActiveState: function() {
-    this.$('img.disclosure').removeClass('active');
+    if (this._disclosureRenderer) {
+      var source = this._disclosureRenderSource;
+      source.set('isActive', NO);
+
+      this._disclosureRenderDelegate.update(source, this.$('.sc-disclosure-view'));
+    } else {
+      // for backwards-compatibility.
+      this.$('.sc-disclosure-view').addClass('active');
+    }
   },
 
+  /** @private */
   _addRightIconActiveState: function() {
-    this.$('img.right-icon').setClass('active', YES);
+   this.$('img.right-icon').setClass('active', YES);
   },
-  
+
+  /** @private */
   _removeRightIconActiveState: function() {
-    this.$('img.right-icon').removeClass('active');
+   this.$('img.right-icon').removeClass('active');
   },
-  
-  /**
+
+  /** @private
     Returns true if a click is on the label text itself to enable editing.
-  
-    Note that if you override renderLabel(), you probably need to override 
+
+    Note that if you override renderLabel(), you probably need to override
     this as well, or just $label() if you only want to control the element
     returned.
-  
+
     @param evt {Event} the mouseUp event.
     @returns {Boolean} YES if the mouse was on the content element itself.
   */
   contentHitTest: function(evt) {
-    // if not content value is returned, not much to do.
-    var del = this.displayDelegate ;
-    var labelKey = this.getDelegateProperty('contentValueKey', del) ;
-    if (!labelKey) return NO ;
+   // if not content value is returned, not much to do.
+   var del = this.displayDelegate ;
+   var labelKey = this.getDelegateProperty('contentValueKey', del) ;
+   if (!labelKey) return NO ;
 
-    // get the element to check for.
-    var el = this.$label()[0] ;
-    if (!el) return NO ; // no label to check for.
+   // get the element to check for.
+   var el = this.$label()[0] ;
+   if (!el) return NO ; // no label to check for.
 
-    var cur = evt.target, layer = this.get('layer') ;
-    while(cur && (cur !== layer) && (cur !== window)) {
-      if (cur === el) return YES ;
-      cur = cur.parentNode ;
-    }
+   var cur = evt.target, layer = this.get('layer') ;
+   while(cur && (cur !== layer) && (cur !== window)) {
+     if (cur === el) return YES ;
+     cur = cur.parentNode ;
+   }
 
-    return NO;
-  },
-  
-  beginEditing: function() {
-    if (this.get('isEditing')) return YES ;
-    //if (!this.get('contentIsEditable')) return NO ;
-    return this._beginEditing(YES);
+   return NO;
   },
-  
-  _beginEditing: function(scrollIfNeeded) {
-    var content   = this.get('content'),
-        del       = this.get('displayDelegate'),
-        labelKey  = this.getDelegateProperty('contentValueKey', del),
-        parent    = this.get('parentView'),
-        pf        = parent ? parent.get('frame') : null,
-        el        = this.$label(),
-        validator = this.get('validator'),
-        f, v, offset, oldLineHeight, fontSize, top, lineHeight, escapeHTML,
-        lineHeightShift, targetLineHeight, ret ;
+
+  /*
+    Edits the label portion of the list item. If scrollIfNeeded is YES, will
+    scroll to the item before editing it.
+    
+    @params {Boolean} if the parent scroll view should be scrolled to this item
+      before editing begins
+    @returns {Boolean} YES if successful
+  */
+  beginEditing: function(original, scrollIfNeeded) {
+    var el        = this.$label(),
+        parent    = this.get('parentView');
 
     // if possible, find a nearby scroll view and scroll into view.
     // HACK: if we scrolled, then wait for a loop and get the item view again
@@ -716,121 +593,403 @@ SC.ListItemView = SC.View.extend(
       var collectionView = this.get('owner'), idx = this.get('contentIndex');
       this.invokeLast(function() {
         var item = collectionView.itemViewForContentIndex(idx);
-        if (item && item._beginEditing) item._beginEditing(NO);
+        if (item && item.beginEditing) item.beginEditing(NO);
       });
       return YES; // let the scroll happen then begin editing...
     }
-    
-    // nothing to do...    
-    if (!parent || !el || el.get('length')===0) return NO ;
-    v = (labelKey && content && content.get) ? content.get(labelKey) : null ;
-    
+
+    else if (!parent || !el || el.get('length')===0) return NO ;
+
+    else return original();
+  }.enhance(),
+
+  /*
+    Configures the editor to overlay the label properly.
+  */
+  inlineEditorWillBeginEditing: function(editor, editable, value) {
+    var content   = this.get('content'),
+        del       = this.get('displayDelegate'),
+        labelKey  = this.getDelegateProperty('contentValueKey', del),
+        parent    = this.get('parentView'),
+        el        = this.$label(),
+        validator = this.get('validator'),
+        f, v, offset, fontSize, top, lineHeight, escapeHTML,
+        lineHeightShift, targetLineHeight, ret ;
+
+    v = (labelKey && content) ? (content.get ? content.get(labelKey) : content[labelKey]) : content;
+
     f = this.computeFrameWithParentFrame(null);
-    offset = SC.viewportOffset(el[0]);
-    
+
     // if the label has a large line height, try to adjust it to something
     // more reasonable so that it looks right when we show the popup editor.
-    oldLineHeight = el.css('lineHeight');
+    lineHeight = this._oldLineHeight = el.css('lineHeight');
     fontSize = el.css('fontSize');
     top = this.$().css('top');
 
     if (top) top = parseInt(top.substring(0,top.length-2),0);
     else top =0;
 
-    lineHeight = oldLineHeight;
     lineHeightShift = 0;
 
     if (fontSize && lineHeight) {
       targetLineHeight = fontSize * 1.5 ;
       if (targetLineHeight < lineHeight) {
         el.css({ lineHeight: '1.5' });
-        lineHeightShift = (lineHeight - targetLineHeight) / 2; 
+        lineHeightShift = (lineHeight - targetLineHeight) / 2;
       } else oldLineHeight = null ;
     }
 
+    el = el[0];
+    offset = SC.offset(el);
+
     f.x = offset.x;
     f.y = offset.y+top + lineHeightShift ;
-    f.height = el[0].offsetHeight ;
-    f.width = el[0].offsetWidth ;
+    f.height = el.offsetHeight ;
+    f.width = el.offsetWidth ;
 
     escapeHTML = this.get('escapeHTML');
 
-    ret = SC.InlineTextFieldView.beginEditing({
-      frame: f, 
-      exampleElement: el, 
-      delegate: this, 
+    editor.set({
       value: v,
+      exampleFrame: f,
+      exampleElement: el,
       multiline: NO,
       isCollection: YES,
       validator: validator,
       escapeHTML: escapeHTML
     }) ;
+  },
+
+  /** @private
+    Allow editing.
+  */
+  inlineEditorShouldBeginEditing: function(inlineEditor) {
+    return YES;
+  },
+
+  /** @private
+   Hide the label view while the inline editor covers it.
+  */
+  inlineEditorDidBeginEditing: function(original, inlineEditor, value, editable) {
+    original(inlineEditor, value, editable);
+
+    var el = this.$label() ;
+    this._oldOpacity = el.css('opacity');
+    el.css('opacity', 0.0) ;
 
     // restore old line height for original item if the old line height 
     // was saved.
-    if (oldLineHeight) el.css({ lineHeight: oldLineHeight }) ;
+    if (this._oldLineHeight) el.css({ lineHeight: this._oldLineHeight }) ;
+  }.enhance(),
 
-    // Done!  If this failed, then set editing back to no.
-    return ret ;
-  },
-  
-  commitEditing: function() {
-   if (!this.get('isEditing')) return YES ;
-   return SC.InlineTextFieldView.commitEditing();
+  /** @private
+   Update the field value and make it visible again.
+  */
+  inlineEditorDidCommitEditing: function(editor, finalValue, editable) {
+    var content = this.get('content') ;
+    var del = this.displayDelegate ;
+    var labelKey = this.getDelegateProperty('contentValueKey', del) ;
+
+    if(labelKey && content) {
+      if(content.set) content.set(labelKey, finalValue);
+      else content[labelKey] = finalValue;
+    }
+
+    else this.set('content', finalValue);
+
+    this.displayDidChange();
+
+    this._endEditing();
   },
-  
-  discardEditing: function() {
-   if (!this.get('isEditing')) return YES ;
-   return SC.InlineTextFieldView.discardEditing();
+
+  _endEditing: function(original) {
+    this.$label().css('opacity', this._oldOpacity);
+
+    original();
+  }.enhance(),
+
+  /** @private
+    Fills the passed html-array with strings that can be joined to form the
+    innerHTML of the receiver element.  Also populates an array of classNames
+    to set on the outer element.
+
+    @param {SC.RenderContext} context
+    @param {Boolean} firstTime
+    @returns {void}
+  */
+  render: function(context, firstTime) {
+    var content = this.get('content'),
+        del     = this.displayDelegate,
+        level   = this.get('outlineLevel'),
+        indent  = this.get('outlineIndent'),
+        key, value, working, classArray = [];
+
+    // add alternating row classes
+    classArray.push((this.get('contentIndex')%2 === 0) ? 'even' : 'odd');
+    context.setClass('disabled', !this.get('isEnabled'));
+
+    // outline level wrapper
+    working = context.begin("div").addClass("sc-outline");
+    if (level>=0 && indent>0) working.addStyle("left", indent*(level+1));
+
+    // handle disclosure triangle
+    value = this.get('disclosureState');
+    if (value !== SC.LEAF_NODE) {
+      this.renderDisclosure(working, value);
+      classArray.push('has-disclosure');
+    }
+
+
+    // handle checkbox
+    key = this.getDelegateProperty('contentCheckboxKey', del) ;
+    if (key) {
+      value = content ? (content.get ? content.get(key) : content[key]) : NO ;
+      if (value !== null) {
+        this.renderCheckbox(working, value);
+        classArray.push('has-checkbox');
+      }
+    }
+
+    // handle icon
+    if (this.getDelegateProperty('hasContentIcon', del)) {
+      key = this.getDelegateProperty('contentIconKey', del) ;
+      value = (key && content) ? (content.get ? content.get(key) : content[key]) : null ;
+
+      this.renderIcon(working, value);
+      classArray.push('has-icon');
+    } else if (this.get('icon')) {
+      value = this.get('icon');
+      this.renderIcon(working, value);
+      classArray.push('has-icon');
+    }
+
+    // handle label -- always invoke
+    key = this.getDelegateProperty('contentValueKey', del) ;
+    value = (key && content) ? (content.get ? content.get(key) : content[key]) : content ;
+    if (value && SC.typeOf(value) !== SC.T_STRING) value = value.toString();
+    if (this.get('escapeHTML')) value = SC.RenderContext.escapeHTML(value);
+    this.renderLabel(working, value);
+
+    // handle right icon
+    if (this.getDelegateProperty('hasContentRightIcon', del)) {
+      key = this.getDelegateProperty('contentRightIconKey', del) ;
+      value = (key && content) ? (content.get ? content.get(key) : content[key]) : null ;
+
+      this.renderRightIcon(working, value);
+      classArray.push('has-right-icon');
+    }
+
+    // handle unread count
+    key = this.getDelegateProperty('contentUnreadCountKey', del) ;
+    value = (key && content) ? (content.get ? content.get(key) : content[key]) : null ;
+    if (!SC.none(value) && (value !== 0)) {
+      this.renderCount(working, value) ;
+      var digits = ['zero', 'one', 'two', 'three', 'four', 'five'];
+      var valueLength = value.toString().length;
+      var digitsLength = digits.length;
+      var digit = (valueLength < digitsLength) ? digits[valueLength] : digits[digitsLength-1];
+      classArray.push('has-count '+digit+'-digit');
+    }
+
+    // handle action
+    key = this.getDelegateProperty('listItemActionProperty', del) ;
+    value = (key && content) ? (content.get ? content.get(key) : content[key]) : null ;
+    if (value) {
+      this.renderAction(working, value);
+      classArray.push('has-action');
+    }
+
+    // handle branch
+    if (this.getDelegateProperty('hasContentBranch', del)) {
+      key = this.getDelegateProperty('contentIsBranchKey', del);
+      value = (key && content) ? (content.get ? content.get(key) : content[key]) : NO ;
+      this.renderBranch(working, value);
+      classArray.push('has-branch');
+    }
+    context.addClass(classArray);
+    context = working.end();
   },
-  
+
+  /** @private
+    Adds a disclosure triangle with the appropriate display to the content.
+    This method will only be called if the disclosure state of the view is
+    something other than SC.LEAF_NODE.
+
+    @param {SC.RenderContext} context the render context
+    @param {Boolean} state YES, NO or SC.MIXED_STATE
+    @returns {void}
+  */
+  renderDisclosure: function(context, state) {
+    var renderer = this.get('theme').disclosureRenderDelegate;
+
+    context = context.begin('div')
+      .addClass('sc-disclosure-view')
+      .addClass('sc-regular-size')
+      .addClass(this.get('theme').classNames)
+      .addClass(renderer.get('name'));
+
+    var source = this._disclosureRenderSource;
+    if (!source) {
+      this._disclosureRenderSource = source =
+      SC.Object.create({ renderState: {}, theme: this.get('theme') });
+    }
+
+    source
+      .set('isSelected', state === SC.BRANCH_OPEN)
+      .set('isEnabled', this.get('isEnabled'))
+      .set('title', '');
+
+    renderer.render(source, context);
+
+    context = context.end();
+    this._disclosureRenderDelegate = renderer;
+ },
+
+  /** @private
+    Adds a checkbox with the appropriate state to the content.  This method
+    will only be called if the list item view is supposed to have a
+    checkbox.
+
+    @param {SC.RenderContext} context the render context
+    @param {Boolean} state YES, NO or SC.MIXED_STATE
+    @returns {void}
+  */
+  renderCheckbox: function(context, state) {
+    var renderer = this.get('theme').checkboxRenderDelegate;
+
+    // note: checkbox-view is really not the best thing to do here; we should do
+    // sc-list-item-checkbox; however, themes expect something different, unfortunately.
+    context = context.begin('div')
+      .addClass('sc-checkbox-view')
+      .addClass('sc-regular-size')
+      .addClass(this.get('theme').classNames)
+      .addClass(renderer.get('name'));
+
+    var source = this._checkboxRenderSource;
+    if (!source) {
+      source = this._checkboxRenderSource =
+      SC.Object.create({ renderState: {}, theme: this.get('theme') });
+    }
+
+    source
+      .set('isSelected', state && (state !== SC.MIXED_STATE))
+      .set('isEnabled', this.get('isEnabled') && this.get('contentIsEditable'))
+      .set('isActive', this._checkboxIsActive)
+      .set('title', '');
+
+    renderer.render(source, context);
+    context = context.end();
+
+    this._checkboxRenderDelegate = renderer;
+ },
+
   /** @private
-   Set editing to true so edits will no longer be allowed.
+    Generates an icon for the label based on the content.  This method will
+    only be called if the list item view has icons enabled.  You can override
+    this method to display your own type of icon if desired.
+
+    @param {SC.RenderContext} context the render context
+    @param {String} icon a URL or class name.
+    @returns {void}
   */
-  inlineEditorWillBeginEditing: function(inlineEditor) {
-   this.set('isEditing', YES);
+  renderIcon: function(context, icon) {
+    // get a class name and url to include if relevant
+    var url = null, className = null , classArray=[];
+    if (icon && SC.ImageView.valueIsUrl(icon)) {
+      url = icon; className = '' ;
+    } else {
+      className = icon; url = SC.BLANK_IMAGE_URL ;
+    }
+
+    // generate the img element...
+    classArray.push(className,'icon');
+    context.begin('img')
+            .addClass(classArray)
+            .attr('src', url)
+            .end();
   },
-  
-  /** @private 
-   Hide the label view while the inline editor covers it.
+
+  /** @private
+   Generates a label based on the content.  You can override this method to
+   display your own type of icon if desired.
+
+   @param {SC.RenderContext} context the render context
+   @param {String} label the label to display, already HTML escaped.
+   @returns {void}
   */
-  inlineEditorDidBeginEditing: function(inlineEditor) {
-   var el = this.$label() ;
-   this._oldOpacity = el.css('opacity');
-   el.css('opacity', 0.0) ;
+  renderLabel: function(context, label) {
+    context.push('<label>', label || '', '</label>') ;
   },
-  
+
   /** @private
-   Could check with a validator someday...
+    Generates a right icon for the label based on the content.  This method will
+    only be called if the list item view has icons enabled.  You can override
+    this method to display your own type of icon if desired.
+
+    @param {SC.RenderContext} context the render context
+    @param {String} icon a URL or class name.
+    @returns {void}
   */
-  inlineEditorShouldBeginEditing: function(inlineEditor) {
-   return YES ;
+  renderRightIcon: function(context, icon) {
+    // get a class name and url to include if relevant
+    var url = null, className = null, classArray=[];
+    if (icon && SC.ImageView.valueIsUrl(icon)) {
+      url = icon; className = '' ;
+    } else {
+      className = icon; url = SC.BLANK_IMAGE_URL ;
+    }
+
+    // generate the img element...
+    classArray.push('right-icon',className);
+    context.begin('img')
+      .addClass(classArray)
+      .attr('src', url)
+    .end();
   },
 
   /** @private
-   Could check with a validator someday...
+   Generates an unread or other count for the list item.  This method will
+   only be called if the list item view has counts enabled.  You can
+   override this method to display your own type of counts if desired.
+
+   @param {SC.RenderContext} context the render context
+   @param {Number} count the count
+   @returns {void}
   */
-  inlineEditorShouldBeginEditing: function(inlineEditor, finalValue) {
-    return YES ;
+  renderCount: function(context, count) {
+    context.push('<span class="count"><span class="inner">',
+                  count.toString(),'</span></span>') ;
   },
 
-  inlineEditorShouldEndEditing: function(inlineEditor, finalValue) {
-   return YES ;
+  /** @private
+    Generates the html string used to represent the action item for your
+    list item.  override this to return your own custom HTML
+
+    @param {SC.RenderContext} context the render context
+    @param {String} actionClassName the name of the action item
+    @returns {void}
+  */
+  renderAction: function(context, actionClassName) {
+    context.push('<img src="',SC.BLANK_IMAGE_URL,'" class="action" />');
   },
-  
+
   /** @private
-   Update the field value and make it visible again.
+   Generates the string used to represent the branch arrow. override this to
+   return your own custom HTML
+
+   @param {SC.RenderContext} context the render context
+   @param {Boolean} hasBranch YES if the item has a branch
+   @returns {void}
   */
-  inlineEditorDidEndEditing: function(inlineEditor, finalValue) {
-    this.set('isEditing', NO) ;
-    
-    var content = this.get('content') ;
-    var del = this.displayDelegate ;
-    var labelKey = this.getDelegateProperty('contentValueKey', del) ;
-    if (labelKey && content && content.set) {
-     content.set(labelKey, finalValue) ;
-    }
-    this.displayDidChange();
+  renderBranch: function(context, hasBranch) {
+    var classArray=[];
+    classArray.push('branch',hasBranch ? 'branch-visible' : 'branch-hidden');
+    context.begin('span')
+          .addClass(classArray)
+          .push('&nbsp;')
+          .end();
   }
-  
+
 });
+
+SC.ListItemView._deprecatedRenderWarningHasBeenIssued = false;