sproutcore 1.4.5 → 1.5.0.pre.3

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

@@ -7,13 +7,16 @@
 
 /** @class
 
-  Renders a checkbox button view specifically.
+  Represents a Checkbox Button.
   
-  This view is basically a button view preconfigured to generate the correct
-  HTML and to set to use a TOGGLE_BEHAVIOR for its buttons.
+  The view is an SC.ButtonView put into toggle mode and with the 'theme' property
+  set to "checkbox".
   
-  This view renders a simulated checkbox that can display a mixed state and 
-  has other features not found in platform-native controls.  
+  Rendering
+  ----------------------------
+  SC.ButtonView delegates its rendering to its theme. As the theme is set
+  to "checkbox", the way the checkbox renders (including DOM) will actually
+  be different than SC.ButtonView's.
   
   @extends SC.FieldView
   @since SproutCore 1.0
@@ -21,49 +24,16 @@
 SC.CheckboxView = SC.ButtonView.extend(SC.StaticLayout, SC.Button,
   /** @scope SC.CheckboxView.prototype */ {
 
-  classNames: ['sc-checkbox-view'],
+  classNames: ['sc-checkbox-view', 'sc-checkbox-control'],
   tagName: 'label',
+  ariaRole: 'checkbox',
+
+  // no special theme for Checkbox; button defaults to 'square', so we have to stop that.
+  themeName: null,
+  renderDelegateName: 'checkboxRenderDelegate',
 
   /* Ellipsis is disabled by default to allow multiline text */
   needsEllipsis: NO,
-
-  render: function(context, firstTime) {
-    var dt, elem,
-        value = this.get('value'),
-        ariaValue = value === SC.MIXED_MODE ? 
-                'mixed' : (value === this.get('toggleOnValue') ? 
-                    'true': 'false');
-    
-    // add checkbox -- set name to view guid to separate it from others
-    if (firstTime) {
-      var blank = SC.BLANK_IMAGE_URL,
-          disabled = this.get('isEnabled') ? '' : 'disabled="disabled"',
-          guid = SC.guidFor(this);
-      
-      context.attr('role', 'checkbox');
-      dt = this._field_currentDisplayTitle = this.get('displayTitle');
-
-      if(SC.browser.msie) context.attr('for', guid);
-      context.push('<span class="button" ></span>');
-      if(this.get('needsEllipsis')){
-        context.push('<span class="label ellipsis">', dt, '</span>');
-      }else{
-        context.push('<span class="label">', dt, '</span>');  
-      }
-      context.attr('name', guid);
-
-    // since we don't want to regenerate the contents each time 
-    // actually search for and update the displayTitle.
-    } else {
-      
-      dt = this.get('displayTitle');
-      if (dt !== this._field_currentDisplayTitle) {
-        this._field_currentDisplayTitle = dt;
-        this.$('span.label').text(dt);
-      }
-    }
-    context.attr('aria-checked', ariaValue);
-  },
   
   acceptsFirstResponder: function() {
     if(!SC.SAFARI_FOCUS_BEHAVIOR) return this.get('isEnabled');
@@ -82,21 +52,21 @@ SC.CheckboxView = SC.ButtonView.extend(SC.StaticLayout, SC.Button,
   },
   
   mouseUp: function(evt) {
+    this.set('isActive', NO);
+    this._isMouseDown = NO;
+
     if(!this.get('isEnabled') || 
       (evt && evt.target && !this.$().within(evt.target))) {
       return YES;
     }
     var val = this.get('value');
     if (val === this.get('toggleOnValue')) {
-      this.$().attr('aria-checked', 'false');
+
       this.set('value', this.get('toggleOffValue'));
     }
     else {
-      this.$().attr('aria-checked', 'true');
       this.set('value', this.get('toggleOnValue'));
     }
-    this.set('isActive', NO);
-    this._isMouseDown = NO;
     return YES;
   },
   

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

@@ -1004,19 +1004,7 @@ SC.CollectionView = SC.View.extend(
   },
   
   displayProperties: 'isFirstResponder isEnabled isActive'.w(),
-  
-  /** @private
-    If we're asked to render the receiver view for the first time but the 
-    child views still need to be added, go ahead and add them.
-  */
-  render: function(context, firstTime) {
-    // add classes for other state.
-    context.setClass('focus', this.get('isFirstResponder'));
-    context.setClass('disabled', !this.get('isEnabled'));
-    context.setClass('active', this.get('isActive'));
-
-    return sc_super();
-  },
+  renderDelegateName: 'collectionRenderDelegate',
     
 
   _TMP_ATTRS: {},
@@ -2311,9 +2299,7 @@ SC.CollectionView = SC.View.extend(
   // ..........................................................
   // TOUCH EVENTS
   //
-  
-  touchStart: function(ev) {
-
+  touchStart: function(touch, evt) {
     // When the user presses the mouse down, we don't do much just yet.
     // Instead, we just need to save a bunch of state about the mouse down
     // so we can choose the right thing to do later.
@@ -2324,16 +2310,15 @@ SC.CollectionView = SC.View.extend(
     // find the actual view the mouse was pressed down on.  This will call
     // hitTest() on item views so they can implement non-square detection
     // modes. -- once we have an item view, get its content object as well.
-    var itemView      = this.itemViewForEvent(ev),
+    var itemView      = this.itemViewForEvent(touch),
         content       = this.get('content'),
         contentIndex  = itemView ? itemView.get('contentIndex') : -1,
         info, anchor ;
-
+        
     // become first responder if possible.
     this.becomeFirstResponder() ;
-    this.select(contentIndex, NO);
     
-    this._cv_performSelectAction(this, ev);
+    this.invokeLater("select", 1, contentIndex);
     
     return YES;
   },
@@ -2350,6 +2335,13 @@ SC.CollectionView = SC.View.extend(
     }, this);
 
   },
+  
+  touchEnd: function(touch) {
+    var itemView = this.itemViewForEvent(touch);
+    
+    // If actOnSelect is implemented, the action will be fired.
+    this._cv_performSelectAction(itemView, touch, 0);
+  },
 
   touchCancelled: function(evt) {
     this.select(null, NO);
@@ -2544,11 +2536,12 @@ SC.CollectionView = SC.View.extend(
   */
   _cv_dragViewFor: function(dragContent) {
     // find only the indexes that are in both dragContent and nowShowing.
-    var indexes = this.get('nowShowing').without(dragContent);
+    var indexes = this.get('nowShowing').without(dragContent),
+        dragLayer = this.get('layer').cloneNode(false),
+        view = SC.View.create({ layer: dragLayer, parentView: this }),
+        height=0, layout;
+
     indexes = this.get('nowShowing').without(indexes);
-    
-    var dragLayer = this.get('layer').cloneNode(false); 
-    var view = SC.View.create({ layer: dragLayer, parentView: this });
 
     // cleanup weird stuff that might make the drag look out of place
     SC.$(dragLayer).css('backgroundColor', 'transparent')
@@ -2572,10 +2565,18 @@ SC.CollectionView = SC.View.extend(
         itemView.updateLayerIfNeeded();
       }
 
-      if (layer) dragLayer.appendChild(layer);
+      if (layer) {
+        dragLayer.appendChild(layer);
+        layout = itemView.get('layout');
+        if(layout.height+layout.top>height){
+          height = layout.height+layout.top;
+        }
+      }
       layer = null;
       
     }, this);
+    // we don't want to show the scrollbars, resize the dragview'
+    view.set('layout', {height:height});
 
     dragLayer = null;
     return view ;

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

@@ -22,7 +22,8 @@ SC.DisclosureView = SC.ButtonView.extend(
   
   classNames: ['sc-disclosure-view'],
   
-  theme: 'disclosure',
+  renderDelegateName: 'disclosureRenderDelegate',
+
   buttonBehavior: SC.TOGGLE_BEHAVIOR,
   
   /**
@@ -38,28 +39,10 @@ SC.DisclosureView = SC.ButtonView.extend(
   
   /** @private */
   valueBindingDefault: SC.Binding.bool() ,
-  
-  /** @private */
-  render: function(context, firstTime) {
-    var title = this.get('displayTitle');
-    if(firstTime) {
-      context.push('<img src="', SC.BLANK_IMAGE_URL, '" class="button" alt="" />');
-      if(this.get('needsEllipsis')) {
-        context.push('<span class="ellipsis sc-button-label">',title,'</span>');
-      }
-      else {
-        context.push('<span class="sc-button-label">', title,'</span>');  
-      }
-    }
-    else {
-      this.$('label').text(title);
-    }
-  },
-  
+
   /**
     Allows toggling of the value with the right and left arrow keys. 
     Extends the behavior inherted from SC.ButtonView.
-    
     @param evt
   */
   keyDown: function(evt) {

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

@@ -0,0 +1,112 @@
+// ==========================================================================
+// Project:   SproutCore - JavaScript Application Framework
+// Copyright: ©2006-2011 Strobe Inc. and contributors.
+//            Portions ©2008-2009 Apple Inc. All rights reserved.
+// License:   Licensed under MIT license (see license.js)
+// ==========================================================================
+/** @class
+
+  Implements a customized file input by creating a standard file input in a
+  transparent iframe over top of a SC.ButtonView.
+  
+  // TODO: revisit this to see if these classnames are usable
+  SC.FieldView uses the SC.Control mixin which will apply CSS 
+  classnames when the state of the file view changes:
+    - active     when button is active
+    - sel        when button is toggled to a selected state
+  
+  @extends SC.FieldView
+  @since SproutCore 1.0 
+  @author Tyler Keating
+*/
+SC.FileView = SC.FieldView.extend(
+/** @scope SC.FileView.prototype */
+{
+
+  classNames: 'sc-file-view'.w(),
+
+  autoSubmit: YES,
+
+  /**
+    The name of the action you want triggered when the button is pressed.  
+    
+    This property is used in conjunction with the target property to execute
+    a method when a regular button is pressed.  These properties are not 
+    relevant when the button is used in toggle mode.
+    
+    If you do not set a target, then pressing a button will cause the
+    responder chain to search for a view that implements the action you name
+    here.  If you set a target, then the button will try to call the method
+    on the target itself.
+    
+    For legacy support, you can also set the action property to a function.  
+    Doing so will cause the function itself to be called when the button is
+    clicked.  It is generally better to use the target/action approach and 
+    to implement your code in a controller of some type.
+    
+    @property {String}
+  */
+  action: 'uploadImage',
+  
+  /**
+    The target object to invoke the action on when the button is pressed.
+    
+    If you set this target, the action will be called on the target object
+    directly when the button is clicked.  If you leave this property set to
+    null, then the button will search the responder chain for a view that 
+    implements the action when the button is pressed instead.
+    
+    @property {Object}
+  */
+  target: null,
+  
+  childViews: 'button form'.w(),
+  
+  button: SC.ButtonView.design({
+    title: 'Choose File',
+    theme: 'capsule'
+  }),
+
+  form: SC.View.design({
+    tagName: 'form',
+    
+    render: function(context, firstTime) {
+      context.attr('method', 'post').attr('action', "javascript:;").attr('enctype', 'multipart/form-data');
+      sc_super();
+    },
+    
+    childViews: 'input'.w(),
+    
+    input: SC.View.design({
+      tagName: 'input',
+
+      render: function(context, firstTime) {
+        context.attr('type', 'file').end();
+        sc_super();
+      }
+    })
+  }),
+  
+  /** SC.Button **/
+  title: 'Choose File',
+  
+  /** SC.FieldView **/
+  
+  /**
+    Since it is impossible to set the value of file inputs, don't attempt it.
+    
+  */
+  setFieldValue: function(newValue) {
+    console.log("SC.FileView: setFieldValue: %@ does nothing".fmt(newValue));
+    //if (newValue) throw SC.$error('SC.FileView can not set the value of the file field');
+  },
+  
+  fieldValueDidChange: function(partialChange) {
+    sc_super();
+    if (this.get('autoSubmit')) {
+      //this.form.submit();
+      
+      var resp = SC.Request.postUrl('/proxy/user/update_image').json().async(NO).send({picture: this.get('value')});
+    }
+  }
+});

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

@@ -0,0 +1,74 @@
+// ==========================================================================
+// Project:   SproutCore - JavaScript Application Framework
+// Copyright: ©2006-2011 Strobe Inc. and contributors.
+//            Portions ©2008-2010 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: 'image-button-icon'
+  });
+
+  You could then add some CSS rule for a normal state:
+
+    .sc-image-button-view .image-button-icon {
+      background: sc_static('image-button-image');
+    }
+
+  And an active state:
+
+    .sc-image-button-view.active .image-button-icon {
+      background: sc_static('image-button-image-active');
+    }
+
+  @extends SC.View
+  @extends SC.Control
+  @extends SC.ButtonView
+  @since SproutCore 1.5
+*/
+SC.ImageButtonView = SC.ButtonView.extend(
+/** @scope SC.ImageButtonView.prototype */ {
+
+  /**
+    Class names that will be applied to this view
+
+    @property {Array}
+  */
+  classNames: ['sc-image-button-view'],
+
+  /**
+    Unlike SC.ButtonView, SC.ImageButtonView does not have a default theme
+    that needs to be applied for backwards compatibility.
+
+    @property {String}
+  */
+  themeName: null,
+
+  /**
+    The name of the theme's SC.ImageButtonView render delegate.
+
+    @property {String}
+  */
+  renderDelegateName: 'imageButtonRenderDelegate',
+  
+  displayProperties: ['image'],
+
+  /**
+    A class name that will be applied to the img tag of the button.
+
+    @property {String}
+  */
+  image: null
+}) ;

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

@@ -324,9 +324,11 @@ SC.ListView = SC.CollectionView.extend(
   
   */
   layoutForContentIndex: function(contentIndex) {
+    var del = this.get('rowDelegate');
+    
     return {
       top:    this.rowOffsetForContentIndex(contentIndex),
-      height: this.rowHeightForContentIndex(contentIndex),
+      height: this.rowHeightForContentIndex(contentIndex) - del.get('rowPadding') * 2,
       left:   0, 
       right:  0
     };

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

@@ -32,6 +32,13 @@ SC.ListItemView = SC.View.extend(
   
   classNames: ['sc-list-item-view'],
   
+  displayProperties: ['disclosureState', 'escapeHTML'],
+  
+  
+  init: function() {
+    sc_super();
+  },
+  
   // ..........................................................
   // KEY PROPERTIES
   // 
@@ -76,6 +83,12 @@ SC.ListItemView = SC.View.extend(
   */
   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.
+  */
+  icon: null,
+  
   /**
     (displayDelegate) Property key to use for the icon url
 
@@ -84,6 +97,12 @@ SC.ListItemView = SC.View.extend(
   */
   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.
+  */
+  rightIcon: null,
+  
   /**
     (displayDelegate) Property key to use for the right icon url
 
@@ -174,207 +193,6 @@ SC.ListItemView = SC.View.extend(
     return content && (content.get ? content.get('isEditable')!==NO : NO);
   }.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}
-  */
-  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 ;
-      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);
-
-    // 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();
-  },
-  
-  /**
-    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 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);
-  },
-  
-  /**
-    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 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);
-  },
-  
-  /** 
-    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
@@ -387,46 +205,6 @@ SC.ListItemView = SC.View.extend(
   $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 
@@ -440,23 +218,6 @@ SC.ListItemView = SC.View.extend(
     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.
@@ -491,7 +252,7 @@ SC.ListItemView = SC.View.extend(
   */
   _isInsideDisclosure: function(evt) {
     if (this.get('disclosureState')===SC.LEAF_NODE) return NO;
-    return this._isInsideElementWithClassName('disclosure', evt);
+    return this._isInsideElementWithClassName('sc-disclosure-view', evt);
   },
   
   /** @private 
@@ -601,22 +362,22 @@ SC.ListItemView = SC.View.extend(
       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 ;
   },
   
   touchStart: function(evt){
@@ -637,29 +398,66 @@ SC.ListItemView = SC.View.extend(
   
   
   _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');
+      }
+    }
   },
   
   _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');
+    }
   },
 
   _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');
+      }
+
+    }
   },
   
   _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');
+    }
   },
 
   _addRightIconActiveState: function() {
-    this.$('img.right-icon').setClass('active', YES);
+   this.$('img.right-icon').setClass('active', YES);
   },
   
   _removeRightIconActiveState: function() {
-    this.$('img.right-icon').removeClass('active');
+   this.$('img.right-icon').removeClass('active');
   },
   
   /**
@@ -673,22 +471,22 @@ SC.ListItemView = SC.View.extend(
     @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 ;
-
-    // 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 ;
-    }
-
-    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.
+   
+   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() {
@@ -724,10 +522,10 @@ SC.ListItemView = SC.View.extend(
     // nothing to do...    
     if (!parent || !el || el.get('length')===0) return NO ;
     v = (labelKey && content && content.get) ? content.get(labelKey) : null ;
-    
+
     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');
@@ -784,6 +582,14 @@ SC.ListItemView = SC.View.extend(
    return SC.InlineTextFieldView.discardEditing();
   },
   
+  
+  /** @private
+    Allow editing.
+  */
+  inlineEditorShouldBeginEditing: function(inlineEditor) {
+    return YES ;
+  },
+  
   /** @private
    Set editing to true so edits will no longer be allowed.
   */
@@ -799,20 +605,6 @@ SC.ListItemView = SC.View.extend(
    this._oldOpacity = el.css('opacity');
    el.css('opacity', 0.0) ;
   },
-  
-  /** @private
-   Could check with a validator someday...
-  */
-  inlineEditorShouldBeginEditing: function(inlineEditor) {
-   return YES ;
-  },
-
-  /** @private
-   Could check with a validator someday...
-  */
-  inlineEditorShouldBeginEditing: function(inlineEditor, finalValue) {
-    return YES ;
-  },
 
   inlineEditorShouldEndEditing: function(inlineEditor, finalValue) {
    return YES ;
@@ -830,7 +622,294 @@ SC.ListItemView = SC.View.extend(
     if (labelKey && content && content.set) {
      content.set(labelKey, finalValue) ;
     }
+
+    this.$label().css("opacity", this._oldOpacity);
+
     this.displayDidChange();
+  },
+
+  /** @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
+    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();
+  },
+
+  /** @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}
+  */
+  renderLabel: function(context, label) {
+    context.push('<label>', label || '', '</label>') ;
+  },
+
+  /** @private
+    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();
+  },
+
+  /** @private
+   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>') ;
+  },
+
+  /** @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
+   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();
   }
   
 });
+
+SC.ListItemView._deprecatedRenderWarningHasBeenIssued = false;