sproutcore 1.4.5 → 1.5.0.pre.3

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

@@ -134,15 +134,13 @@ SC.ScrollView = SC.View.extend(SC.Border, {
     @property {Number}
   */
   maximumHorizontalScrollOffset: function() {
-    var view = this.get('contentView'),
-        contentWidth = 0, calculatedWidth = 0;
-        
-    if (view && view.get('frame')) contentWidth = view.get('frame').width;
-    if (view) calculatedWidth = view.calculatedWidth || 0;
+    var view = this.get('contentView') ;
+    var contentWidth = view ? view.get('frame').width : 0,
+        calculatedWidth = view ? view.get('calculatedWidth') : 0;
     
     // The following code checks if there is a calculatedWidth (collections)
     // to avoid looking at the incorrect value calculated by frame.
-    if(view && view.calculatedWidth && view.calculatedWidth!==0){
+    if (calculatedWidth) {
       contentWidth = view.calculatedWidth; 
     }
     contentWidth *= this._scale;
@@ -164,15 +162,13 @@ SC.ScrollView = SC.View.extend(SC.Border, {
   */
   maximumVerticalScrollOffset: function() {
     var view = this.get('contentView'),
-        contentHeight = 0, calculatedHeight = 0;
-        
-    if (view && view.get('frame')) contentHeight = view.get('frame').height;
-    if (view) calculatedHeight = view.calculatedHeight || 0;
+        contentHeight = (view && view.get('frame')) ? view.get('frame').height : 0,
+        calculatedHeight = view ? view.get('calculatedHeight') : 0;
     
     // The following code checks if there is a calculatedWidth (collections)
     // to avoid looking at the incorrect value calculated by frame.
-    if(view && view.calculatedHeight && view.calculatedHeight!==0){
-      contentHeight = view.calculatedHeight; 
+    if(calculatedHeight){
+      contentHeight = calculatedHeight; 
     }
     contentHeight *= this._scale;
     
@@ -194,12 +190,12 @@ SC.ScrollView = SC.View.extend(SC.Border, {
   */
   minimumHorizontalScrollOffset: function() {
     var view = this.get('contentView') ;
-    var contentWidth = view ? view.get('frame').width : 0 ;
-    
+    var contentWidth = view ? view.get('frame').width : 0,
+        calculatedWidth = view ? view.get('calculatedWidth') : 0;
     // The following code checks if there is a calculatedWidth (collections)
     // to avoid looking at the incorrect value calculated by frame.
-    if(view && view.calculatedWidth && view.calculatedWidth!==0){
-      contentWidth = view.calculatedWidth; 
+    if(calculatedWidth){
+      contentWidth = calculatedWidth; 
     }
     contentWidth *= this._scale;
     
@@ -220,11 +216,12 @@ SC.ScrollView = SC.View.extend(SC.Border, {
   */
   minimumVerticalScrollOffset: function() {
     var view = this.get('contentView') ;
-    var contentHeight = (view && view.get('frame')) ? view.get('frame').height : 0 ;
+    var contentHeight = (view && view.get('frame')) ? view.get('frame').height : 0,
+        calculatedHeight = view ? view.get('calculatedHeight') : 0;
     
     // The following code checks if there is a calculatedWidth (collections)
     // to avoid looking at the incorrect value calculated by frame.
-    if(view && view.calculatedHeight && view.calculatedHeight!==0){
+    if(calculatedHeight){
       contentHeight = view.calculatedHeight; 
     }
     contentHeight *= this._scale;
@@ -924,8 +921,10 @@ SC.ScrollView = SC.View.extend(SC.Border, {
     this.updateScale(this._scale);
     transform += 'translate3d('+ -this._scroll_horizontalScrollOffset +'px, '+ -Math.round(this._scroll_verticalScrollOffset)+'px,0) ';
     transform += this._scale_css;
-    layer.style.webkitTransform = transform;
-    layer.style.webkitTransformOrigin = "top left";
+    if (layer) {
+      layer.style.webkitTransform = transform;
+      layer.style.webkitTransformOrigin = "top left";
+    }
   },
   
   captureTouch: function(touch) {
@@ -1011,16 +1010,19 @@ SC.ScrollView = SC.View.extend(SC.Border, {
     var globalFrame = this.convertFrameToView(this.get("frame"), null),
         positionInContentX = (horizontalScrollOffset + (avg.x - globalFrame.x)) / this._scale,
         positionInContentY = (verticalScrollOffset + (avg.y - globalFrame.y)) / this._scale;
-    
+
     this.touch = {
       startTime: touch.timeStamp,
       notCalculated: YES,
       
       enableScrolling: { 
         x: contentWidth * this._scale > containerWidth || this.get("alwaysBounceHorizontal"), 
-        y: contentHeight * this._scale > containerHeight || this.get("alwaysBounceVertical") }, // TODO: get from class properties
+        y: contentHeight * this._scale > containerHeight || this.get("alwaysBounceVertical") 
+      },
       scrolling: { x: NO, y: NO },
       
+      enableBouncing: SC.platform.bounceOnScroll,
+      
       // offsets and velocities
       startClipOffset: { x: startClipOffsetX, y: startClipOffsetY },
       lastScrollOffset: { x: horizontalScrollOffset, y: verticalScrollOffset },
@@ -1034,7 +1036,7 @@ SC.ScrollView = SC.View.extend(SC.Border, {
       
       startScale: this._scale,
       startDistance: avg.d,
-      canScale: this.get("canScale"),
+      canScale: this.get("canScale") && SC.platform.pinchToZoom,
       minimumScale: this.get("minimumScale"),
       maximumScale: this.get("maximumScale"),
       
@@ -1160,7 +1162,7 @@ SC.ScrollView = SC.View.extend(SC.Border, {
       if (deltaY > touch.scrollLock && !touch.scrolling.x) touch.enableScrolling.x = NO;
     }
     
-    // handle scaling
+    // handle scaling through pinch gesture
     if (touch.canScale) {
       
       var startDistance = touch.startDistance, dd = distance - startDistance;
@@ -1180,30 +1182,46 @@ SC.ScrollView = SC.View.extend(SC.Border, {
       }
     }
     
-
+    // these do exactly what they sound like. So, this comment is just to
+    // block off the code a bit
+    // In english, these calculate the minimum X/Y offsets
     minOffsetX = this.minimumScrollOffset(touch.contentSize.width * this._scale, touch.containerSize.width, this.get("horizontalAlign"));
     minOffsetY = this.minimumScrollOffset(touch.contentSize.height * this._scale, touch.containerSize.height, this.get("verticalAlign"));
     
+    // and now, maximum...
     maxOffsetX = this.maximumScrollOffset(touch.contentSize.width * this._scale, touch.containerSize.width, this.get("horizontalAlign"));
     maxOffsetY = this.maximumScrollOffset(touch.contentSize.height * this._scale, touch.containerSize.height, this.get("verticalAlign"));
     
+    
+    // So, the following is the completely written out algebra:
     // (offsetY + touchYInFrame) / this._scale = touch.startTouchOffsetInContent.y
     // offsetY + touchYInFrame = touch.startTouchOffsetInContent.y * this._scale;
     // offsetY = touch.startTouchOffset * this._scale - touchYInFrame
+    
+    // and the result applied:
     offsetX = touch.startTouchOffsetInContent.x * this._scale - touchXInFrame;
     offsetY = touch.startTouchOffsetInContent.y * this._scale - touchYInFrame;
     
     
-    // update immediately, without consulting anyone else.
-    offsetX = this._adjustForEdgeResistance(offsetX, minOffsetX, maxOffsetX, touch.resistanceCoefficient, touch.resistanceAsymptote);
-    offsetY = this._adjustForEdgeResistance(offsetY, minOffsetY, maxOffsetY, touch.resistanceCoefficient, touch.resistanceAsymptote);
+    // we need to adjust for edge resistance, or, if bouncing is disabled, just stop flat.
+    if (touch.enableBouncing) {
+      offsetX = this._adjustForEdgeResistance(offsetX, minOffsetX, maxOffsetX, touch.resistanceCoefficient, touch.resistanceAsymptote);
+      offsetY = this._adjustForEdgeResistance(offsetY, minOffsetY, maxOffsetY, touch.resistanceCoefficient, touch.resistanceAsymptote);
+    } else {
+      offsetX = Math.max(minOffsetX, Math.min(maxOffsetX, offsetX));
+      offsetY = Math.max(minOffsetY, Math.min(maxOffsetY, offsetY));
+    }
     
+    // and now, _if_ scrolling is enabled, set the new coordinates
     if (touch.scrolling.x) this._scroll_horizontalScrollOffset = offsetX;
     if (touch.scrolling.y) this._scroll_verticalScrollOffset = offsetY;
     
+    // and apply the CSS transforms.
     this._applyCSSTransforms(touch.layer);
     this._touchScrollDidChange();
     
+    
+    // now we must prepare for momentum scrolling by calculating the momentum.
     if (timeStamp - touch.lastEventTime >= 1 || touch.notCalculated) {
       touch.notCalculated = NO;
       var horizontalOffset = this._scroll_horizontalScrollOffset;
@@ -1354,6 +1372,11 @@ SC.ScrollView = SC.View.extend(SC.Border, {
     
     var de = touch.decelerationFromEdge, ac = touch.accelerationToEdge;
     
+    // under a few circumstances, we may want to force a valid X/Y position.
+    // For instance, if bouncing is disabled, or if position was okay before
+    // adjusting scale.
+    var forceValidXPosition = !touch.enableBouncing, forceValidYPosition = !touch.enableBouncing;
+    
     // determine if position was okay before adjusting scale (which we do, in
     // a lovely, animated way, for the scaled out/in too far bounce-back).
     // if the position was okay, then we are going to make sure that we keep the
@@ -1361,8 +1384,8 @@ SC.ScrollView = SC.View.extend(SC.Border, {
     //
     // Position OKness, here, referring to if the position is valid (within
     // minimum and maximum scroll offsets)
-    var validXPosition = newX >= minOffsetX && newX <= maxOffsetX;
-    var validYPosition = newY >= minOffsetY && newY <= maxOffsetY;
+    if (newX >= minOffsetX && newX <= maxOffsetX) forceValidXPosition = YES;
+    if (newY >= minOffsetY && newY <= maxOffsetY) forceValidYPosition = YES;
     
     // We are going to change scale in a moment, but the position should stay the
     // same, if possible (unless it would be more jarring, as described above, in
@@ -1410,15 +1433,21 @@ SC.ScrollView = SC.View.extend(SC.Border, {
     maxOffsetY = this.maximumScrollOffset(touch.contentSize.height * this._scale, touch.containerSize.height, this.get("verticalAlign"));
     
     // see if scaling messed up the X position (but ignore if 'tweren't right to begin with).
-    if (validXPosition && (newX < minOffsetX || newX > maxOffsetX)) {
+    if (forceValidXPosition && (newX < minOffsetX || newX > maxOffsetX)) {
       // Correct the position
       newX = Math.max(minOffsetX, Math.min(newX, maxOffsetX));
+      
+      // also, make the velocity be ZERO; it is obviously not needed...
+      touch.decelerationVelocity.x = 0;
     }
     
     // now the y
-    if (validYPosition && (newY < minOffsetY || newY > maxOffsetY)) {
+    if (forceValidYPosition && (newY < minOffsetY || newY > maxOffsetY)) {
       // again, correct it...
       newY = Math.max(minOffsetY, Math.min(newY, maxOffsetY));
+      
+      // also, make the velocity be ZERO; it is obviously not needed...
+      touch.decelerationVelocity.y = 0;
     }
     
     
@@ -1428,9 +1457,7 @@ SC.ScrollView = SC.View.extend(SC.Border, {
     
     this._applyCSSTransforms(touch.layer); // <- Does what it sounds like.
 
-    SC.RunLoop.begin();
     this._touchScrollDidChange();
-    SC.RunLoop.end();
     
     // Now we have to adjust the velocities. The velocities are simple x and y numbers that
     // get added to the scroll X/Y positions each frame.
@@ -1460,15 +1487,11 @@ SC.ScrollView = SC.View.extend(SC.Border, {
     // as well.
     var absXVelocity = Math.abs(touch.decelerationVelocity.x);
     var absYVelocity = Math.abs(touch.decelerationVelocity.y);
-    if (absYVelocity < 0.01 && absXVelocity < 0.01 && Math.abs(sv) < 0.01) {
+    if (absYVelocity < 0.05 && absXVelocity < 0.05 && Math.abs(sv) < 0.05) {
       // we can reset the timeout, as it will no longer be required, and we don't want to re-cancel it later.
       touch.timeout = null;
       this.touch = null;
       
-      // we aren't in a run loop right now (see below, where we trigger the timer)
-      // so, we must start one.
-      SC.RunLoop.begin();
-      
       // trigger scroll end
       this._touchScrollDidEnd();
       
@@ -1480,8 +1503,6 @@ SC.ScrollView = SC.View.extend(SC.Border, {
       this.set("horizontalScrollOffset", this._scroll_horizontalScrollOffset);
       this.endPropertyChanges();
       
-      // and now we're done, so just end the run loop and return.
-      SC.RunLoop.end();
       return;
     }
     
@@ -1493,7 +1514,7 @@ SC.ScrollView = SC.View.extend(SC.Border, {
     var self = this;
     touch.lastEventTime = Date.now();
     this.touch.timeout = setTimeout(function(){
-      self.decelerateAnimation();
+      SC.run(self.decelerateAnimation(), self);
     }, 10);
   },
   
@@ -1561,7 +1582,9 @@ SC.ScrollView = SC.View.extend(SC.Border, {
     var contentView = this._scroll_contentView ;
 
     if (contentView) {
-      contentView.addObserver('frame', this, this.contentViewFrameDidChange) ;
+      contentView.addObserver('frame', this, this.contentViewFrameDidChange);
+      contentView.addObserver('calculatedWidth', this, this.contentViewFrameDidChange);
+      contentView.addObserver('calculatedHeight', this, this.contentViewFrameDidChange);
     }
 
     if (this.get('isVisibleInWindow')) this._scsv_registerAutoscroll() ;
@@ -1587,6 +1610,8 @@ SC.ScrollView = SC.View.extend(SC.Border, {
       
       // stop observing old content view
       if (oldView) {
+        oldView.removeObserver('calculatedWidth', this, this.contentViewFrameDidChange);
+        oldView.removeObserver('calculatedHeight', this, this.contentViewFrameDidChange);
         oldView.removeObserver('frame', this, frameObserver);
         oldView.removeObserver('layer', this, layerObserver);
       }
@@ -1595,6 +1620,8 @@ SC.ScrollView = SC.View.extend(SC.Border, {
       this._scroll_contentView = newView;
       if (newView) {
         newView.addObserver('frame', this, frameObserver);
+        newView.addObserver('calculatedWidth', this, this.contentViewFrameDidChange);
+        newView.addObserver('calculatedHeight', this, this.contentViewFrameDidChange);
         newView.addObserver('layer', this, layerObserver);
       }
       
@@ -1635,10 +1662,18 @@ SC.ScrollView = SC.View.extend(SC.Border, {
     var view   = this.get('contentView'), 
         f      = (view) ? view.get('frame') : null,
         scale  = this._scale,
-        width  = (f) ? f.width  * scale : 0,
-        height = (f) ? f.height * scale : 0,
+        width  = 0,
+        height = 0,
         dim, dimWidth, dimHeight;
     
+    if (view) {
+      width = view.get('calculatedWidth') || f.width || 0;
+      height = view.get('calculatedHeight') || f.height || 0;
+    }
+    
+    width *= scale;
+    height *= scale;
+    
     // cache out scroll settings...
     if (!force && (width === this._scroll_contentWidth) && (height === this._scroll_contentHeight)) return ;
     this._scroll_contentWidth  = width;
@@ -1742,9 +1777,7 @@ SC.ScrollView = SC.View.extend(SC.Border, {
     // This gives views that use incremental rendering a chance to render
     // newly-appearing elements before they come into view.
     if (content) {
-      SC.RunLoop.begin();
       content._viewFrameDidChange();
-      SC.RunLoop.end();
 
       // Use accelerated drawing if the browser supports it
       if (SC.platform.touch) {

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

@@ -0,0 +1,84 @@
+// ==========================================================================
+// 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
+
+  SegmentViews are the views used and arranged by SC.SegmentedView and are very similar to a SC.ButtonView
+  without any event handling.  The event handling is done by the parent view.
+
+  @extends SC.View
+  @since SproutCore 1.5
+*/
+SC.SegmentView = SC.View.extend(SC.Control, {
+  /* SC.Control (note: this brings its own display properties: 'isEnabled', 'isSelected', 'isActive', 'controlSize') */
+  isEnabled: YES,
+  
+  isActive: NO,
+  
+  isSelected: NO,
+  
+  controlSize: null,
+  
+  /* SC.Button (note: we don't actually mix this in, because it doesn't define displayProperties or renderMixin) */
+  title: '',
+  
+  value: null,
+  
+  icon: null,
+  
+  localize: NO,
+  
+  keyEquivalent: null,
+  
+  // TODO: Modification currently unsupported in SegmentedView
+  escapeHTML: YES,        
+  
+  // TODO: Modification currently unsupported in SegmentedView
+  needsEllipsis: YES,     
+  
+  /* SC.ButtonView */
+  // TODO: Modification currently unsupported in SegmentedView (this may be deprecated in SC.ButtonView and should also be so here)
+  supportFocusRing: NO,
+  
+  /* SC.View */
+  renderDelegateName: 'segmentRenderDelegate',
+  
+  useStaticLayout: YES,
+  
+  // TODO: isDefault, isCancel, value not really used by render delegate
+  displayProperties: ['icon', 'title', 'value', 'displayToolTip', 'isDefault', 'isCancel', 'width', 'isFirstSegment', 'isMiddleSegment', 'isLastSegment', 'index'],
+  
+  /* SC.SegmentView */
+  
+  width: null,
+
+  /**
+    Whenever the width property changes, adjust our layout accordingly.
+    */
+  widthDidChange: function() {
+    this.adjust('width', this.get('width'));
+  }.observes('width'),
+  
+  /**
+    Update our properties according to our matching item.
+  */
+  updateItem: function(parentView, item) {
+    var itemKeys = parentView.get('itemKeys'),
+        itemKey,
+        viewKeys = parentView.get('viewKeys'),
+        viewKey,
+        i;
+    
+    for (i = itemKeys.get('length') - 1; i >= 0; i--) {
+      itemKey = parentView.get(itemKeys.objectAt(i)); 
+      viewKey = viewKeys.objectAt(i);
+
+      // Don't overwrite the default value if none exists in the item
+      if (!SC.none(item.get(itemKey))) this.set(viewKey, item.get(itemKey));
+    }
+  }
+});

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

@@ -92,14 +92,20 @@ SC.SegmentedView = SC.View.extend(SC.Control,
   //
    
   /**
-    The array of items to display.  This can be a simple array of strings,
-    objects or hashes.  If you pass objects or hashes, you must also set the
+    The array of items to display.  This may be a simple array of strings, objects
+    or SC.Objects.  If you pass objects or SC.Objects, you must also set the
     various itemKey properties to tell the SegmentedView how to extract the
     information it needs.
     
+    Note: only SC.Object items support key-value coding and therefore can be 
+    observered by the view for changes to titles, values, icons, widths, 
+    isEnabled values & tooltips.
+    
+    TODO: explain how to notify the view of changes to String & Object items
+    
     @property {Array}
   */
-  items: [],
+  items: null,
 
   /** 
     The key that contains the title for each item.
@@ -164,212 +170,165 @@ SC.SegmentedView = SC.View.extend(SC.Control,
     equivalent in the tab.
   */
   itemKeyEquivalentKey: null,
-
-  /**
-    The array of itemKeys that will be searched to build the displayItems
-    array.  This is used internally by the class.  You will not generally
-    need to access or edit this array.
+  
+  /** @private
+    The following properties are used to map items to child views. Item keys
+    are looked up on the item based on this view's value for each 'itemKey'.  
+    If a value in the item is found, then that value is mapped to a child
+    view using the matching viewKey.
     
     @property {Array}
   */
-  itemKeys: 'itemTitleKey itemValueKey itemIsEnabledKey itemIconKey itemWidthKey itemToolTipKey'.w(),
+  itemKeys: 'itemTitleKey itemValueKey itemIsEnabledKey itemIconKey itemWidthKey itemToolTipKey itemKeyEquivalentKey'.w(),
+  viewKeys: 'title value isEnabled icon width toolTip keyEquivalent'.w(),
   
   /**
-    This computed property is generated from the items array based on the 
-    itemKey properties that you set.  The return value is an array of arrays
-    that contain private information used by the SegmentedView to render. 
-    
-    You will not generally need to access or edit this property.
-    
-    @property {Array}
+    Call itemsDidChange once to initialize segment child views for the items that exist at
+    creation time.
   */
-  displayItems: function() {
-    var items = this.get('items'), loc = this.get('localize'),
-      keys=null, itemType, cur, ret = [], max = items.get('length'), idx, 
-      item, fetchKeys = SC._segmented_fetchKeys, fetchItem = SC._segmented_fetchItem;
-    
-    // loop through items and collect data
-    for(idx=0;idx<max;idx++) {
-      item = items.objectAt(idx) ;
-      if (SC.none(item)) continue; //skip is null or undefined
+  init: function() {
+    sc_super();
+    
+    this.itemsDidChange();
+  },
+  
+  /**
+    Called whenever the number of items changes.  This method populates SegmentedView's childViews, taking
+    care to re-use existing childViews if possible.
+    
+    */
+  itemsDidChange: function() {
+    var items = this.get('items') || [],
+        item,
+        localItem,                        // Used to avoid altering the original items
+        childViews = this.get('childViews'),
+        childView,
+        value = this.get('value'),        // The value can change if items that were once selected are removed
+        isSelected,
+        itemKeys = this.get('itemKeys'),
+        itemKey, 
+        viewKeys = this.get('viewKeys'),
+        viewKey,
+        i, j;
+  
+    // Update childViews 
+    if (childViews.get('length') > items.get('length')) {   // We've lost segments (ie. childViews)
       
-      // if the item is a string, build the array using defaults...
-      itemType = SC.typeOf(item);
-      if (itemType === SC.T_STRING) {
-        cur = [item.humanize().titleize(), item, YES, null, null,  null, idx] ;
+      // Remove unneeded segments from the end back
+      for (i = childViews.get('length') - 1; i >= items.get('length'); i--) {
+        childView = childViews.objectAt(i);
         
-      // if the item is not an array, try to use the itemKeys.
-      } else if (itemType !== SC.T_ARRAY) {
-        // get the itemKeys the first time
-        if (keys===null) {
-          keys = this.itemKeys.map(fetchKeys,this);
+        // If a selected childView has been removed then update our value
+        if (SC.isArray(value)) {
+          value.removeObject(childView.get('value'));
+        } else if (value === childView.get('value')) {
+          value = null;
         }
+
+        this.removeChild(childView);
+      }
+      
+      // Update our value which may have changed
+      this.set('value', value);
+      
+    } else if (childViews.get('length') < items.get('length')) {  // We've gained segments
+
+      // Create the new segments
+      for (i = childViews.get('length'); i < items.get('length'); i++) {
+    
+        // We create a default SC.ButtonView-like object for each segment
+        childView = SC.SegmentView.create({
+          controlSize: this.get('controlSize'),
+          localize: this.get('localize')
+        });
+        
+        // Attach the child
+        this.appendChild(childView);
+      }  
+    }
+    
+    // Because the items array can be altered with insertAt or removeAt, we can't be sure that the items 
+    // continue to match 1-to-1 the existing views, so once we have the correct number of childViews, 
+    // simply update them all
+    childViews = this.get('childViews');
+    
+    for (i = 0; i < items.get('length'); i++) {
+      localItem = items.objectAt(i);
+      childView = childViews.objectAt(i);
+      
+      // Skip null/undefined items (but don't skip empty strings)
+      if (SC.none(localItem)) continue;
+        
+      // Normalize the item (may be a String, Object or SC.Object)
+      if (SC.typeOf(localItem) === SC.T_STRING) {
         
-        // now loop through the keys and try to get the values on the item
-        cur = keys.map(fetchItem, item);
-        cur[cur.length] = idx; // save current index
+        localItem = SC.Object.create({
+          'title': localItem.humanize().titleize(),
+          'value': localItem
+        });
         
-        // special case 1...if title key is null, try to make into string
-        if (!keys[0] && item.toString) cur[0] = item.toString(); 
+        // Update our keys accordingly
+        this.set('itemTitleKey', 'title');
+        this.set('itemValueKey', 'value');
+      } else if (SC.typeOf(localItem) === SC.T_HASH) {
         
-        // special case 2...if value key is null, use item itself
-        if (!keys[1]) cur[1] = item;
+        localItem = SC.Object.create(localItem);
+      } else if (localItem instanceof SC.Object)  {
+          
+        // We don't need to make any changes to SC.Object items, but we can observe them
+        for (j = itemKeys.get('length') - 1; j >= 0; j--) {
+          itemKey = this.get(itemKeys.objectAt(j));
         
-        // special case 3...if isEnabled is null, default to yes.
-        if (!keys[2]) cur[2] = YES ; 
+          if (itemKey) {
+            localItem.removeObserver(itemKey, this, this.itemContentDidChange);
+            localItem.addObserver(itemKey, this, this.itemContentDidChange, i);
+          }
+        }
+      } else {
+        SC.Logger.error('SC.SegmentedView items may be Strings, Objects (ie. Hashes) or SC.Objects only');
       }
       
-      // finally, be sure to loc the title if needed
-      if (loc && cur[0]) cur[0] = cur[0].loc();
-
-      // finally, be sure to loc the toolTip if needed
-      if (loc && cur[5] && SC.typeOf(cur[5]) === SC.T_STRING) cur[5] = cur[5].loc();
+      // Determine whether this segment is selected based on the view's existing value(s)
+      isSelected = NO;
+      if (SC.isArray(value) ? value.indexOf(localItem.get(this.get('itemValueKey'))) >= 0 : value === localItem.get(this.get('itemValueKey'))) {
+        isSelected = YES;
+      }
+      childView.set('isSelected', isSelected);
+        
+      // Assign segment specific properties based on position
+      childView.set('index', i);
+      childView.set('isFirstSegment', i === 0);
+      childView.set('isMiddleSegment',  i < items.get('length') - 1 && i > 0);
+      childView.set('isLastSegment', i === items.get('length') - 1);
       
-      // add to return array
-      ret[ret.length] = cur;
-    }
-    
-    // all done, return!
-    return ret ;
-  }.property('items', 'itemTitleKey', 'itemValueKey', 'itemIsEnabledKey', 'localize', 'itemIconKey', 'itemWidthKey', 'itemToolTipKey'),
-  
-  /** If the items array itself changes, add/remove observer on item... */
-  itemsDidChange: function() { 
-    if (this._items) {
-      this._items.removeObserver('[]',this,this.itemContentDidChange) ;
-    } 
-    this._items = this.get('items') ;
-    if (this._items) {
-      this._items.addObserver('[]', this, this.itemContentDidChange) ;
+      // Be sure to update the view's properties for the (possibly new) matched item
+      childView.updateItem(this, localItem);
     }
     
-    this.itemContentDidChange();
-  }.observes('items'),
-  
-  /** 
-    Invoked whenever the item array or an item in the array is changed.  This method will reginerate the list of items.
-  */
-  itemContentDidChange: function() {
-    this.set('renderLikeFirstTime', YES);
-    this.notifyPropertyChange('displayItems');
-  },
+  }.observes('*items.[]'),
   
-  init: function() {
-    sc_super();
-    this.itemsDidChange() ;
-  },
+  itemContentDidChange: function(item, key, alwaysNull, index) {
+    var items = this.get('items'),
+        childViews = this.get('childViews'),
+        childView;
 
+    childView = childViews.objectAt(index);
+    if (childView) {
+      
+      // Update the childView
+      childView.updateItem(this, item);
+    } else {
+      SC.Logger.warn("Item content change was observed on item without matching segment child view.");
+    }
+  },
   
   // ..........................................................
   // RENDERING/DISPLAY SUPPORT
   // 
   
-  displayProperties: ['displayItems', 'value', 'activeIndex'],
+  displayProperties: ['align'],
   
-  
-  render: function(context, firstTime) { 
-    
-    // collect some data 
-    var items = this.get('displayItems');
-    
-    var theme = this.get('theme');
-    if (theme) context.addClass(theme);
-    if (firstTime || this.get('renderLikeFirstTime')) {
-      this._seg_displayItems = items; // save for future
-      this.renderDisplayItems(context, items) ;
-      context.addStyle('text-align', this.get('align'));
-      this.set('renderLikeFirstTime',NO);
-    }else{
-    // update selection and active state
-      var activeIndex = this.get('activeIndex'),
-          value = this.get('value'),
-          isArray = SC.isArray(value);
-      if (isArray && value.get('length')===1) {
-        value = value.objectAt(0); isArray = NO ;
-      }
-      var names = {}, // reuse  
-          loc = items.length, cq = this.$('.sc-segment'), item;
-      while(--loc>=0) {
-        item = items[loc];
-        names.sel = isArray ? (value.indexOf(item[1])>=0) : (item[1]===value);
-        names.active = (activeIndex === loc);
-        names.disabled = !item[2];
-        SC.$(cq[loc]).setClass(names);
-      }
-      names = items = value = items = null; // cleanup
-    }
-  },
-  
-  /**
-    Actually generates the segment HTML for the display items.  This method 
-    is called the first time a view is constructed and any time the display
-    items change thereafter.  This will construct the HTML but will not set
-    any "transient" states such as the global isEnabled property or selection.
-  */
-  renderDisplayItems: function(context, items) {
-    var value       = this.get('value'),
-        isArray     = SC.isArray(value),
-        activeIndex = this.get('activeIndex'),
-        len         = items.length,
-        title, icon, url, className, ic, item, toolTip, width, i, stylesHash,
-        classArray;
-
-    for(i=0; i< len; i++){
-      ic = context.begin('a').attr('role', 'button');
-      item=items[i];
-      title = item[0]; 
-      icon = item[3];
-      toolTip = item[5];
-      
-      stylesHash = {};
-      classArray = [];
-
-      if (this.get('layoutDirection') == SC.LAYOUT_HORIZONTAL) {
-        stylesHash['display'] = 'inline-block' ;
-      }
-
-      classArray.push('sc-segment');
-      
-      if(!item[2]){
-        classArray.push('disabled');
-      }
-      if(i===0){
-        classArray.push('sc-first-segment');
-      }
-      if(i===(len-1)){
-        classArray.push('sc-last-segment');
-      }
-      if(i!==0 && i!==(len-1)){
-        classArray.push('sc-middle-segment');
-      }      
-      if( isArray ? (value.indexOf(item[1])>=0) : (item[1]===value)){
-        classArray.push('sel');
-      }
-      if(activeIndex === i) {
-        classArray.push('active') ;
-      }
-      if(item[4]){
-        width=item[4];
-        stylesHash['width'] = width+'px';
-      }
-      ic.addClass(classArray);
-      ic.addStyle(stylesHash);
-      if(toolTip) {
-        ic.attr('title', toolTip) ;
-      }
-
-      if (icon) {
-        url = (icon.indexOf('/')>=0) ? icon : SC.BLANK_IMAGE_URL;
-        className = (url === icon) ? '' : icon ;
-        icon = '<img src="'+url+'" alt="" class="icon '+className+'" />';
-      } else {
-        icon = '';
-      }
-      ic.push('<span class="sc-button-inner"><label class="sc-button-label">',
-              icon+title, '</label></span>');
-      ic.end();
-    }   
-  },  
+  renderDelegateName: 'segmentedRenderDelegate',
   
   // ..........................................................
   // EVENT HANDLING
@@ -380,60 +339,32 @@ SC.SegmentedView = SC.View.extend(SC.Control,
     event occurred.
   */
   displayItemIndexForEvent: function(evt) {
-    return this.displayItemIndexForPosition(evt.pageX, evt.pageY);
-  },
-  
-  /**
-    Determines an item index based on a position. The position does not have to be within the view's
-    bounding rectangle. If no item is at that position, this will return -1.
-    
-    NOTE: Eventually, this sort of function should be implemented in a renderer.
-  */
-  displayItemIndexForPosition: function(pageX, pageY) {
-    // find the segments
-    var segments = this.$('.sc-segment'), len = segments.length, idx, segment, r;
-    
-    // loop through them (yes, this comment is mostly because it looks nice in TextMate)
-    for (idx = 0; idx < len; idx++) {
-      // get the segment
-      segment = segments[idx];
-      
-      // get its rectangle
-      r = segment.getBoundingClientRect();
-      
-      // based on orientation, check the position left-to-right or up-to-down.
-      if (this.get('layoutDirection') == SC.LAYOUT_VERTICAL) {
-        // if it fits, return it right away
-        if (pageY > r.top && pageY < r.bottom) return idx;
-      }
-      else {
-        // if it fits, return it right away.
-        if (pageX > r.left && pageX < r.right) return idx;
-      }
+    var renderDelegate = this.get('renderDelegate');
+
+    if (renderDelegate && renderDelegate.indexForClientPosition) {
+      return renderDelegate.indexForClientPosition(this, evt.clientX, evt.clientY);
     }
-    
-    // if we didn't find anything, return the old standard -1 for "not found."
-    return -1;
   },
   
   keyDown: function(evt) {
     // handle tab key
     var i, item, items, len, value, isArray;
-    if (evt.which === 9) {
+    if (evt.which === 9 || evt.keyCode === 9) {
       var view = evt.shiftKey ? this.get('previousValidKeyView') : this.get('nextValidKeyView');
       if(view) view.becomeFirstResponder();
       else evt.allowDefault();
       return YES ; // handled
     }    
     if (!this.get('allowsMultipleSelection') && !this.get('allowsEmptySelection')){
-      items = this.get('displayItems');
-      len = items.length;
+      items = this.get('displayItems').slice(0);
+      
+      len = items.get('length');
       value = this.get('value');
       isArray = SC.isArray(value);
       if (evt.which === 39 || evt.which === 40) {  
         for(i=0; i< len-1; i++){
-          item=items[i];
-          if( isArray ? (value.indexOf(item[1])>=0) : (item[1]===value)){
+          item=items.objectAt(i);
+          if( isArray ? (value.indexOf(item.get('value'))>=0) : (item.get('value')===value)){
             this.triggerItemAtIndex(i+1);
           }
         }
@@ -441,8 +372,8 @@ SC.SegmentedView = SC.View.extend(SC.Control,
       }
       else if (evt.which === 37 || evt.which === 38) {
         for(i=1; i< len; i++){
-          item=items[i];
-          if( isArray ? (value.indexOf(item[1])>=0) : (item[1]===value)){
+          item=items.objectAt(i);
+          if( isArray ? (value.indexOf(item.get('value'))>=0) : (item.get('value')===value)){
             this.triggerItemAtIndex(i-1);
           }
         }
@@ -453,92 +384,167 @@ SC.SegmentedView = SC.View.extend(SC.Control,
   },
   
   mouseDown: function(evt) {
+    var childViews = this.get('childViews'),
+        childView,
+        index;
+        
     if (!this.get('isEnabled')) return YES; // nothing to do
-    var idx = this.displayItemIndexForEvent(evt);
     
-    // if mouse was pressed on a button, then start detecting pressed events
-    if (idx>=0) {
-      this._isMouseDown = YES ;
-      this.set('activeIndex', idx);
+    index = this.displayItemIndexForEvent(evt);
+    if (index >= 0) {                          
+      
+      childView = childViews[index];
+      childView.set('isActive', YES);
+      
+      this.activeChildView = childView;
+      
+      // if mouse was pressed on a button, then start detecting pressed events
+      this._isMouseDown = YES;
     }
     
     return YES ;
   },
   
   mouseUp: function(evt) {
-    var idx = this.displayItemIndexForEvent(evt);
-    // if mouse was pressed on a button then detect where we where when we
-    // release and use that one.
-    if (this._isMouseDown && (idx>=0)) this.triggerItemAtIndex(idx);
+    var activeChildView,
+        index;
+        
+    index = this.displayItemIndexForEvent(evt);
     
-    // cleanup
-    this._isMouseDown = NO ;
-    this.set('activeIndex', -1);
+    if (this._isMouseDown && (index >= 0)) {
+    
+      // Clean up
+      this.triggerItemAtIndex(index);
+    
+      activeChildView = this.activeChildView;
+      activeChildView.set('isActive', NO);
+      this.activeChildView = null;
+      
+      this._isMouseDown = NO;
+    }
+      
     return YES ;
   },
   
   mouseMoved: function(evt) {
+    var childViews = this.get('childViews'),
+        activeChildView,
+        childView,
+        index;
+        
     if (this._isMouseDown) {
-      var idx = this.displayItemIndexForEvent(evt);
-      this.set('activeIndex', idx);
+      // Update the last segment
+      index = this.displayItemIndexForEvent(evt);
+      
+      activeChildView = this.activeChildView;
+      childView = childViews[index];
+      
+      if (childView && childView !== activeChildView) {
+        // Changed
+        if (activeChildView) activeChildView.set('isActive', NO);
+        childView.set('isActive', YES);
+        
+        this.activeChildView = childView;
+      }
     }
     return YES;
   },
   
-  mouseExited: function(evt) {
+  mouseEntered: function(evt) {
+    var childViews = this.get('childViews'),
+        childView,
+        index;
+        
     // if mouse was pressed down initially, start detection again
     if (this._isMouseDown) {
-      var idx = this.displayItemIndexForEvent(evt);
-      this.set('activeIndex', idx);
+      index = this.displayItemIndexForEvent(evt);
+      
+      if (index >= 0) {
+        childView = childViews[index];
+        childView.set('isActive', YES);
+        
+        this.activeChildView = childView;
+      }
     }
     return YES;
   },
   
-  mouseEntered: function(evt) {
+  mouseExited: function(evt) {
+    var activeChildView;
+        
     // if mouse was down, hide active index
     if (this._isMouseDown) {
-      var idx = this.displayItemIndexForEvent(evt);
-      this.set('activeIndex', -1);
+      activeChildView = this.activeChildView;
+      if (activeChildView) activeChildView.set('isActive', NO);
+        
+      this.activeChildView = null;
     }
-    return YES ;
+    
+    return YES;
   },
   
-  
-  
   touchStart: function(touch) {
+    var childViews = this.get('childViews'),
+        childView,
+        index;
+    
     if (!this.get('isEnabled')) return YES; // nothing to do
-    var idx = this.displayItemIndexForEvent(touch);
     
-    // if mouse was pressed on a button, then start detecting pressed events
-    if (idx>=0) {
-      this._isTouching = YES ;
-      this.set('activeIndex', idx);
+    index = this.displayItemIndexForEvent(touch);
+    
+    if (index >= 0) {   
+      childView = childViews[index];
+      childView.set('isActive', YES);
+      this.activeChildView = childView;
+      
+      this._isTouching = YES;
     }
     
     return YES ;
   },
   
   touchEnd: function(touch) {
-    var idx = this.displayItemIndexForEvent(touch);
+    var activeChildView,
+        index;
+        
+    index = this.displayItemIndexForEvent(touch);
     // if mouse was pressed on a button then detect where we where when we
     // release and use that one.
-    if (this._isTouching && (idx>=0)) this.triggerItemAtIndex(idx);
+    if (this._isTouching && (index >= 0)) this.triggerItemAtIndex(index);
     
     // cleanup
-    this._isTouching = NO ;
-    this.set('activeIndex', -1);
+    activeChildView = this.activeChildView;
+    activeChildView.set('isActive', NO);
+    this.activeChildView = null;
+    
+    this._isTouching = NO;
+      
     return YES ;
   },
   
   touchesDragged: function(evt, touches) {
-    var isTouching = this.touchIsInBoundary(evt);
+    var isTouching = this.touchIsInBoundary(evt),
+        childViews = this.get('childViews'),
+        activeChildView,
+        childView,
+        index;
 
     if (isTouching) {
       if (!this._isTouching) {
         this._touchDidEnter(evt);
       }
-      var idx = this.displayItemIndexForEvent(evt);
-      this.set('activeIndex', idx);
+      index = this.displayItemIndexForEvent(evt);
+      
+      activeChildView = this.activeChildView;
+      childView = childViews[index];
+      
+      if (childView && childView !== activeChildView) {
+        // Changed
+        if (activeChildView) activeChildView.set('isActive', NO);
+        childView.set('isActive', YES);
+        
+        this.activeChildView = childView;
+      }
     } else {
       if (this._isTouching) this._touchDidExit(evt);
     }
@@ -549,53 +555,70 @@ SC.SegmentedView = SC.View.extend(SC.Control,
   },
   
   _touchDidExit: function(evt) {
-    var idx = this.displayItemIndexForEvent(evt);
-    this.set('activeIndex', -1);
+    var activeChildView;
+    
+    activeChildView = this.activeChildView;
+    activeChildView.set('isActive', NO);
+    this.activeChildView = null;
 
     return YES;
   },
   
   _touchDidEnter: function(evt) {
-    // if mouse was down, hide active index
-    var idx = this.displayItemIndexForEvent(evt);
-    this.set('activeIndex', idx);
-
-    return YES ;
+    var childViews = this.get('childViews'),
+        childView,
+        index;
+    
+    index = this.displayItemIndexForEvent(evt);
+    
+    if (index >= 0) {
+      childView = childViews[index];
+      childView.set('isActive', YES);
+      this.activeChildView = childView;
+    }
+      
+    return YES;
   },
 
   /** 
     Simulates the user clicking on the segment at the specified index. This
     will update the value if possible and fire the action.
   */
-  triggerItemAtIndex: function(idx) {
-    var items = this.get('displayItems'),
-        item  = items.objectAt(idx),
+  triggerItemAtIndex: function(index) {
+    var childViews = this.get('childViews'),
+        childView,
         sel, value, val, empty, mult;
-        
-    if (!item[2]) return this; // nothing to do!
+    
+    childView = childViews[index];
+    
+    if (!childView.get('isEnabled')) return this; // nothing to do!
 
     empty = this.get('allowsEmptySelection');
     mult = this.get('allowsMultipleSelection');
     
     
     // get new value... bail if not enabled. Also save original for later.
-    sel = item[1];
+    sel = childView.get('value');
     value = val = this.get('value') ;
-    if (!SC.isArray(value)) value = [value]; // force to array
+      
+    if (SC.empty(value)) {
+      value = [];
+    } else if (!SC.isArray(value)) {
+      value = [value]; // force to array
+    }
     
     // if we do not allow multiple selection, either replace the current
     // selection or deselect it
     if (!mult) {
       // if we allow empty selection and the current value is the same as
       // the selected value, then deselect it.
-      if (empty && (value.get('length')===1) && (value.objectAt(0)===sel)){
+      if (empty && (value.get('length')===1) && (value.objectAt(0)===sel)) {
         value = [];
       
       // otherwise, simply replace the value.
       } else value = [sel] ;
       
-    // if we do allow multiple selection, then add or remove item to the
-    // array.
+    // if we do allow multiple selection, then add or remove item to the array.
     } else {
       if (value.indexOf(sel) >= 0) {
         if (value.get('length')>1 || (value.objectAt(0)!==sel) || empty) {
@@ -620,9 +643,10 @@ SC.SegmentedView = SC.View.extend(SC.Control,
     var actionKey = this.get('itemActionKey'),
         targetKey = this.get('itemTargetKey'),
         action, target = null,
-        resp = this.getPath('pane.rootResponder');
+        resp = this.getPath('pane.rootResponder'),
+        item;
 
-    if (actionKey && (item = this.get('items').objectAt(item[6]))) {
+    if (actionKey && (item = this.get('items').objectAt(item.index))) {
       // get the source item from the item array.  use the index stored...
       action = item.get ? item.get(actionKey) : item[actionKey];
       if (targetKey) {
@@ -643,6 +667,24 @@ SC.SegmentedView = SC.View.extend(SC.Control,
     }
   },
   
+  /** @private
+    Whenever the value changes, update the segments accordingly.
+  */
+  valueDidChange: function() {
+    var value = this.get('value'),
+        childViews = this.get('childViews'),
+        childView;
+    
+    for (var i = childViews.get('length') - 1; i >= 0; i--) {
+      childView = childViews.objectAt(i);
+      if (SC.isArray(value) ? value.indexOf(childView.get('value')) >= 0 : value === childView.get('value')) {
+        childView.set('isSelected', YES);
+      } else {
+        childView.set('isSelected', NO);
+      }
+    }
+  }.observes('value'),
+  
   /** tied to the isEnabled state */
    acceptsFirstResponder: function() {
      if(!SC.SAFARI_FOCUS_BEHAVIOR) return this.get('isEnabled');
@@ -664,15 +706,4 @@ SC.SegmentedView = SC.View.extend(SC.Control,
      if (this._isFocused) this._isFocused = NO ;
    }
     
-}) ;
-
-// Helpers defined here to avoid creating lots of closures...
-SC._segmented_fetchKeys = function(k) { return this.get(k); };
-SC._segmented_fetchItem = function(k) { 
-  if (!k) return null;
-  return this.get ? this.get(k) : this[k]; 
-};
-
-
-
-
+});