sproutcore 1.9.2 → 1.10.0.rc.1

data/lib/frameworks/sproutcore/frameworks/core_foundation/views/view/manipulation.js

@@ -4,14 +4,22 @@ SC.View.reopen(
   /** @scope SC.View.prototype */{
 
   /**
-    This code exists to make it possible to pool SC.Views. We are not going to pool SC.Views in Amber
+    This code exists to make it possible to pool SC.Views.
     */
   _lastLayerId: null,
 
+  /** @private */
+  init: function (original) {
+    original();
+
+    // Set up the cached layerId if it has been set on create.
+    this._lastLayerId = this.get('layerId');
+  }.enhance(),
+
   /**
     Handles changes in the layer id.
   */
-  layerIdDidChange: function() {
+  layerIdDidChange: function () {
     var layer  = this.get('layer'),
         lid    = this.get('layerId'),
         lastId = this._lastLayerId;
@@ -33,59 +41,7 @@ SC.View.reopen(
     }
   }.observes("layerId"),
 
-  /**
-    This method is called whenever the receiver's parentView has changed.
-    The default implementation of this method marks the view's display
-    location as dirty so that it will update at the end of the run loop.
-
-    You will not usually need to override or call this method yourself, though
-    if you manually patch the parentView hierarchy for some reason, you should
-    call this method to notify the view that it's parentView has changed.
-
-    @returns {SC.View} receiver
-  */
-  parentViewDidChange: function() {
-    this.recomputeIsVisibleInWindow() ;
-
-    this.resetBuildState();
-    this.set('layerLocationNeedsUpdate', YES) ;
-    this.invokeOnce(this.updateLayerLocationIfNeeded) ;
-
-    // We also need to iterate down through the view hierarchy and invalidate
-    // all our child view's caches for 'pane', since it could have changed.
-    //
-    // Note:  In theory we could try to avoid this invalidation if we
-    //        do this only in cases where we "know" the 'pane' value might
-    //        have changed, but those cases are few and far between.
-
-    this._invalidatePaneCacheForSelfAndAllChildViews();
-
-    return this ;
-  },
-
-  /** @private
-    We want to cache the 'pane' property, but it's impossible for us to
-    declare a dependence on all properties that can affect the value.  (For
-    example, if our grandparent gets attached to a new pane, our pane will
-    have changed.)  So when there's the potential for the pane changing, we
-    need to invalidate the caches for all our child views, and their child
-    views, and so on.
-  */
-  _invalidatePaneCacheForSelfAndAllChildViews: function () {
-    var childView, childViews = this.get('childViews'),
-        len = childViews.length, idx ;
-
-    this.notifyPropertyChange('pane');
-
-    for (idx=0; idx<len; ++idx) {
-      childView = childViews[idx];
-      if (childView._invalidatePaneCacheForSelfAndAllChildViews) {
-        childView._invalidatePaneCacheForSelfAndAllChildViews();
-      }
-    }
-  },
-
-  // ..........................................................
+  // ------------------------------------------------------------------------
   // LAYER LOCATION
   //
 
@@ -104,27 +60,12 @@ SC.View.reopen(
     @param {SC.View} beforeView
     @returns {SC.View} the receiver
   */
-  insertBefore: function(view, beforeView) {
+  insertBefore: function (view, beforeView) {
     view.beginPropertyChanges(); // limit notifications
 
-    // remove view from old parent if needed.  Also notify views.
-    if (view.get('parentView')) { view.removeFromParent() ; }
-    if (this.willAddChild) { this.willAddChild(view, beforeView) ; }
-    if (view.willAddToParent) { view.willAddToParent(this, beforeView) ; }
-
-    // set parentView of child
-    view.set('parentView', this);
-
-    // add to childView's array.
-    var idx, childViews = this.get('childViews') ;
-    if (childViews.needsClone) { this.set(childViews = []); }
-    idx = (beforeView) ? childViews.indexOf(beforeView) : childViews.length;
-    if (idx<0) { idx = childViews.length ; }
-    childViews.insertAt(idx, view) ;
-
-    // The DOM will need some fixing up, note this on the view.
-    if(view.parentViewDidChange) view.parentViewDidChange();
-    if(view.layoutDidChange) view.layoutDidChange();
+    // Reset any views that are already building in or out.
+    if (view.resetBuildState) { view.resetBuildState(); }
+    view._doAdopt(this, beforeView);
 
     view.endPropertyChanges();
 
@@ -132,39 +73,29 @@ SC.View.reopen(
     // doesn't complete until the end of the RunLoop
     // There may be better ways to do this than with invokeLast,
     // but it's the best I can do for now - PDW
-    this.invokeLast(function(){
-      var pane = view.get('pane');
-      if(pane && pane.get('isPaneAttached')) {
-        view._notifyDidAppendToDocument();
-      }
-    });
+    // this.invokeLast(function () {
+    //   var pane = view.get('pane');
+    //   if (pane && pane.get('isPaneAttached')) {
+    //     view._notifyDidAppendToDocument();
+    //   }
+    // });
 
-    // Even though its layer has not necessarily been created, the child views
-    // are added immediately. Hence notify views immediately.
-    if (this.didAddChild) { this.didAddChild(view, beforeView) ; }
-    if (view.didAddToParent) { view.didAddToParent(this, beforeView) ; }
-
-    return this ;
+    return this;
   },
 
-  removeChild: function(original, view) {
+  removeChild: function (original, view) {
     if (!view) { return this; } // nothing to do
     if (view.parentView !== this) {
-      throw "%@.removeChild(%@) must belong to parent".fmt(this,view);
+      throw new Error("%@.removeChild(%@) must belong to parent".fmt(this, view));
     }
+
     // notify views
-    if (view.willRemoveFromParent) { view.willRemoveFromParent() ; }
-    if (this.willRemoveChild) { this.willRemoveChild(view) ; }
+    // TODO: Deprecate these notifications.
+    if (view.willRemoveFromParent) { view.willRemoveFromParent(); }
+    if (this.willRemoveChild) { this.willRemoveChild(view); }
 
     original(view);
 
-    // The DOM will need some fixing up, note this on the view.
-    if(view.parentViewDidChange) view.parentViewDidChange() ;
-
-    // notify views
-    if (this.didRemoveChild) { this.didRemoveChild(view); }
-    if (view.didRemoveFromParent) { view.didRemoveFromParent(this) ; }
-
     return this;
   }.enhance(),
 
@@ -180,13 +111,13 @@ SC.View.reopen(
     @param view {SC.View} the view to remove from the DOM.
     @returns {SC.View} the receiver
   */
-  replaceChild: function(view, oldView) {
+  replaceChild: function (view, oldView) {
     // suspend notifications
     view.beginPropertyChanges();
     oldView.beginPropertyChanges();
     this.beginPropertyChanges();
 
-    this.insertBefore(view,oldView).removeChild(oldView) ;
+    this.insertBefore(view, oldView).removeChild(oldView);
 
     // resume notifications
     this.endPropertyChanges();
@@ -200,19 +131,52 @@ SC.View.reopen(
     Replaces the current array of child views with the new array of child
     views.
 
-    @param {Array} views views you want to add
+    This will remove *and* destroy all of the existing child views and their
+    layers.
+
+    Warning: The new array must be made of *child* views (i.e. created using
+    this.createChildView() on the parent).
+
+    @param {Array} newChildViews Child views you want to add
     @returns {SC.View} receiver
   */
-  replaceAllChildren: function(views) {
-    var len = views.get('length'), idx;
-
+  replaceAllChildren: function (newChildViews) {
     this.beginPropertyChanges();
-    this.destroyLayer().removeAllChildren();
-    for(idx=0;idx<len;idx++) { this.appendChild(views.objectAt(idx)); }
-    this.replaceLayer();
+
+    // If rendered, destroy our layer so we can re-render.
+    // if (this.get('_isRendered')) {
+    //   var layer = this.get('layer');
+
+    //   // If attached, detach and track our parent node so we can re-attach.
+    //   if (this.get('isAttached')) {
+    //     // We don't allow for transitioning out at this time.
+    //     // TODO: support transition out of child views.
+    //     this._doDetach(true);
+    //   }
+
+    //   // Destroy our layer in one move.
+    //   this.destroyLayer();
+    // }
+
+    // Remove the current child views.
+    // We aren't rendered at this point so it bypasses the optimization in
+    // removeAllChildren that would recreate the layer.  We would rather add the
+    // new childViews before recreating the layer.
+    this.removeAllChildren(true);
+
+    // Add the new children.
+    for (var i = 0, len = newChildViews.get('length'); i < len; i++) {
+      this.appendChild(newChildViews.objectAt(i));
+    }
+
+    // We were rendered previously.
+    // if (layer) {
+    //   // Recreate our layer (now empty).
+    //   this.createLayer();
+    // }
     this.endPropertyChanges();
 
-    return this ;
+    return this;
   },
 
   /**
@@ -222,19 +186,21 @@ SC.View.reopen(
     @param view {SC.View} the view to insert
     @returns {SC.View} the receiver
   */
-  appendChild: function(view) {
+  appendChild: function (view) {
     return this.insertBefore(view, null);
   },
 
-  ///
-  /// BUILDING IN/OUT
-  ///
+  // ------------------------------------------------------------------------
+  // BUILDING IN/OUT
+  //
 
   /**
     Call this to append a child while building it in. If the child is not
     buildable, this is the same as calling appendChild.
+
+    @deprecated Version 1.10
   */
-  buildInChild: function(view) {
+  buildInChild: function (view) {
     view.willBuildInToView(this);
     this.appendChild(view);
     view.buildInToView(this);
@@ -243,47 +209,64 @@ SC.View.reopen(
   /**
     Call to remove a child after building it out. If the child is not buildable,
     this will simply call removeChild.
+
+    @deprecated Version 1.10
   */
-  buildOutChild: function(view) {
+  buildOutChild: function (view) {
     view.buildOutFromView(this);
   },
 
   /**
     Called by child view when build in finishes. By default, does nothing.
 
+    @deprecated Version 1.10
   */
-  buildInDidFinishFor: function(child) {
+  buildInDidFinishFor: function (child) {
   },
 
   /**
     @private
     Called by child view when build out finishes. By default removes the child view.
   */
-  buildOutDidFinishFor: function(child) {
+  buildOutDidFinishFor: function (child) {
     this.removeChild(child);
   },
 
   /**
     Whether the view is currently building in.
+
+    @deprecated Version 1.10
   */
   isBuildingIn: NO,
 
   /**
     Whether the view is currently building out.
+
+    @deprecated Version 1.10
   */
   isBuildingOut: NO,
 
   /**
     Implement this, and call didFinishBuildIn when you are done.
+
+    @deprecated Version 1.10
   */
-  buildIn: function() {
+  buildIn: function () {
+    //@if(debug)
+    SC.warn("The SC.View build methods have been deprecated in favor of the transition plugins.  To build in a view, please provide a transitionIn plugin (many are pre-built in SproutCore) and to build out a view, please provide a transitionOut plugin.");
+    //@endif
     this.buildInDidFinish();
   },
 
   /**
     Implement this, and call didFinishBuildOut when you are done.
+
+    @deprecated Version 1.10
   */
-  buildOut: function() {
+  buildOut: function () {
+    //@if(debug)
+    SC.warn("The SC.View build methods have been deprecated in favor of the transition plugins.  To build in a view, please provide a transitionIn plugin (many are pre-built in SproutCore) and to build out a view, please provide a transitionOut plugin.");
+    //@endif
     this.buildOutDidFinish();
   },
 
@@ -291,8 +274,9 @@ SC.View.reopen(
     This should reset (without animation) any internal states; sometimes called before.
 
     It is usually called before a build in, by the parent view.
+    @deprecated Version 1.10
   */
-  resetBuild: function() {
+  resetBuild: function () {
 
   },
 
@@ -302,8 +286,10 @@ SC.View.reopen(
     anything.
 
     This is basically called whenever build in happens.
+
+    @deprecated Version 1.10
   */
-  buildOutDidCancel: function() {
+  buildOutDidCancel: function () {
 
   },
 
@@ -314,15 +300,19 @@ SC.View.reopen(
     If build in was cancelled, it means build out is probably happening.
     So, any timers or anything you had going, you can cancel.
     Then buildOut will happen.
+
+    @deprecated Version 1.10
   */
-  buildInDidCancel: function() {
+  buildInDidCancel: function () {
 
   },
 
   /**
     Call this when you have built in.
+
+    @deprecated Version 1.10
   */
-  buildInDidFinish: function() {
+  buildInDidFinish: function () {
     this.isBuildingIn = NO;
     this._buildingInTo.buildInDidFinishFor(this);
     this._buildingInTo = null;
@@ -330,8 +320,10 @@ SC.View.reopen(
 
   /**
     Call this when you have finished building out.
+
+    @deprecated Version 1.10
   */
-  buildOutDidFinish: function() {
+  buildOutDidFinish: function () {
     this.isBuildingOut = NO;
     this._buildingOutFrom.buildOutDidFinishFor(this);
     this._buildingOutFrom = null;
@@ -339,8 +331,10 @@ SC.View.reopen(
 
   /**
     Usually called by parentViewDidChange, this resets the build state (calling resetBuild in the process).
+
+    @deprecated Version 1.10
   */
-  resetBuildState: function() {
+  resetBuildState: function () {
     if (this.isBuildingIn) {
       this.buildInDidCancel();
       this.isBuildingIn = NO;
@@ -365,7 +359,7 @@ SC.View.reopen(
 
     Mostly, this cancels any build out _before_ the view is removed through parent change.
   */
-  willBuildInToView: function(view) {
+  willBuildInToView: function (view) {
     // stop any current build outs (and if we need to, we also need to build in again)
     if (this.isBuildingOut) {
       this.buildOutDidCancel();
@@ -376,7 +370,7 @@ SC.View.reopen(
     @private (semi)
     Called by building parent view's buildInChild method.
   */
-  buildInToView: function(view) {
+  buildInToView: function (view) {
     // if we are already building in, do nothing.
     if (this.isBuildingIn) { return; }
 
@@ -392,7 +386,7 @@ SC.View.reopen(
 
     The supplied view should always be the parent view.
   */
-  buildOutFromView: function(view) {
+  buildOutFromView: function (view) {
     // if we are already building out, do nothing.
     if (this.isBuildingOut) { return; }
 

data/lib/frameworks/sproutcore/frameworks/core_foundation/views/view/statechart.js

@@ -0,0 +1,1526 @@
+sc_require("views/view/base");
+
+
+SC.CoreView.mixin(
+  /** @scope SC.CoreView */ {
+
+  /**
+    The view has been rendered.
+
+    Use a logical AND (single `&`) to test rendered status.  For example,
+
+        view.get('viewState') & SC.CoreView.IS_RENDERED
+
+    @static
+    @constant
+  */
+  IS_RENDERED: 0x0100, // 256
+
+  /**
+    The view has been attached.
+
+    Use a logical AND (single `&`) to test attached status.  For example,
+
+        view.get('viewState') & SC.CoreView.IS_ATTACHED
+
+    @static
+    @constant
+  */
+  IS_ATTACHED: 0x0080, // 128
+
+  /**
+    The view is visible in the display.
+
+    Use a logical AND (single `&`) to test shown status.  For example,
+
+        view.get('viewState') & SC.CoreView.IS_SHOWN
+
+    @static
+    @constant
+  */
+  IS_SHOWN: 0x0040, // 64
+
+  /**
+    The view is invisible in the display.
+
+    Use a logical AND (single `&`) to test hidden status.  For example,
+
+        view.get('viewState') & SC.CoreView.IS_HIDDEN
+
+    @static
+    @constant
+  */
+  IS_HIDDEN: 0x0020, // 32
+
+  /**
+    The view has been created, but has not been rendered or attached.
+
+    @static
+    @constant
+  */
+  UNRENDERED: 0x0200, // 512
+
+  /**
+    The view has been created and rendered, but has not been attached
+    (i.e. appended to the document).
+
+    @static
+    @constant
+  */
+  UNATTACHED: 0x0300, // 768
+
+  /**
+    The view has been created and rendered, but an ancestor is not attached.
+
+    @static
+    @constant
+  */
+  UNATTACHED_BY_PARENT: 0x0301, // 769
+
+  /**
+    The view has been created, rendered and attached and is visible in the
+    display.
+
+    @static
+    @constant
+  */
+  ATTACHED_SHOWN: 0x03C0, // 960
+
+  /**
+    The view has been created, rendered and attached, but is not visible in the
+    display.
+
+    Test with & SC.CoreView.IS_HIDDEN
+    @static
+    @constant
+  */
+  ATTACHED_HIDDEN: 0x03A0, // 928
+
+  /**
+    The view has been created, rendered and attached, but is not visible in the
+    display due to being hidden by a parent view.
+
+    @static
+    @constant
+  */
+  ATTACHED_HIDDEN_BY_PARENT: 0x03A1, // 929
+
+  /**
+    The view has been created, rendered and attached and is visible in the
+    display.  It is currently transitioning according to the transitionIn
+    property before being fully shown (i.e ATTACHED_SHOWN).
+
+    @static
+    @constant
+  */
+  ATTACHED_BUILDING_IN: 0x03C1, // 961
+
+  /**
+    The view has been created, rendered and attached.  It is currently
+    transitioning according to the transitionOut property before being
+    detached (i.e. removed from the document).
+
+    @static
+    @constant
+  */
+  ATTACHED_BUILDING_OUT: 0x0381, // 897
+
+  /**
+    The view has been created, rendered and attached.  It is currently
+    transitioning according to the transitionOut property before being
+    detached (i.e. removed from the document) because a parent view is
+    being detached.
+
+    @static
+    @constant
+  */
+  ATTACHED_BUILDING_OUT_BY_PARENT: 0x0382, // 898
+
+  /**
+    The view has been created, rendered and attached and is visible in the
+    display.  It is currently transitioning according to the transitionShow
+    property before being fully shown (i.e ATTACHED_SHOWN).
+
+    @static
+    @constant
+  */
+  ATTACHED_SHOWING: 0x03C2, // 962
+
+  /**
+    The view has been created, rendered and attached.  It is currently
+    transitioning according to the transitionHide property before being fully
+    hidden.
+
+    @static
+    @constant
+  */
+  ATTACHED_HIDING: 0x03A2 // 930
+
+});
+
+
+SC.CoreView.reopen(
+  /** @scope SC.CoreView.prototype */ {
+
+  // ------------------------------------------------------------------------
+  // Properties
+  //
+
+  /**
+    The current state of the view as managed by its internal statechart.
+
+    In order to optimize the behavior of SC.View, such as only observing display
+    properties when in a rendered state or queueing updates when in a non-shown
+    state, SC.View includes a simple internal statechart that maintains the
+    current state of the view.
+
+    Views have several possible states:
+
+    * SC.CoreView.UNRENDERED
+    * SC.CoreView.UNATTACHED
+    * SC.CoreView.UNATTACHED_BY_PARENT
+    * SC.CoreView.ATTACHED_SHOWING
+    * SC.CoreView.ATTACHED_SHOWN
+    * SC.CoreView.ATTACHED_HIDING
+    * SC.CoreView.ATTACHED_HIDDEN
+    * SC.CoreView.ATTACHED_HIDDEN_BY_PARENT
+    * SC.CoreView.ATTACHED_BUILDING_IN
+    * SC.CoreView.ATTACHED_BUILDING_OUT
+    * SC.CoreView.ATTACHED_BUILDING_OUT_BY_PARENT
+
+    @type String
+    @default SC.CoreView.UNRENDERED
+    @readonly
+  */
+  viewState: SC.CoreView.UNRENDERED,
+
+  /**
+    Whether the view's layer is attached to the document or not.
+
+    When the view's layer is attached to the document, this value will be true.
+
+    @field
+    @type Boolean
+    @default false
+    @readonly
+  */
+  isAttached: function () {
+    var state = this.get('viewState');
+    return state & SC.CoreView.IS_ATTACHED;
+  }.property('viewState').cacheable(),
+
+  /** @private
+    Whether the view's layer exists or not.
+
+    When the view's layer is created, this value will be true.  This includes
+    the unattached view state and all of the attached states.
+
+    @field
+    @type Boolean
+    @default false
+    @readonly
+  */
+  // NOTE: This property is of little value, so it's private in case we decide to toss it.
+  _isRendered: function () {
+    return this.get('viewState') !== SC.CoreView.UNRENDERED;
+  }.property('viewState').cacheable(),
+
+  /**
+    Whether the view is fully or becoming shown or not.
+
+    When the view is shown in the window, this value will be true.  Note that
+    if the view is transitioning out or hiding, this value will still be true.
+
+    This is not necessarily the same as `isVisible` although the two properties
+    are related.  For instance, it's possible to set `isVisible` to `true` and
+    still have `isVisibleInWindow` be `false` or vice versa due to the
+    `isVisibleInWindow` state of the view's parent view.  Therefore,
+    `isVisibleInWindow` represents the actual visible state of the view and
+    `isVisible` is used to attempt to alter that state.
+
+    @field
+    @type Boolean
+    @default false
+    @readonly
+  */
+  isVisibleInWindow: function () {
+    var state = this.get('viewState');
+    return state & SC.CoreView.IS_ATTACHED &&
+      state !== SC.CoreView.ATTACHED_HIDDEN &&
+      state !== SC.CoreView.ATTACHED_HIDDEN_BY_PARENT;
+  }.property('viewState').cacheable(),
+
+  // ------------------------------------------------------------------------
+  // Actions (Locked down to the proper state)
+  //
+
+
+  /** @private Adopt this view action. */
+  _doAdopt: function (parentView, beforeView) {
+    var curParentView = this.get('parentView'),
+      handled = true;
+
+    if (curParentView && curParentView !== parentView) {
+      //@if(debug)
+      // This should be avoided, because using the same view instance without explicitly orphaning it first is a dangerous practice.
+      SC.warn("Developer Warning: You should not adopt the view, %@, to a new parent without removing it from its old parent first.".fmt(this));
+      //@endif
+
+      // Force orphaning the view.
+      this._doOrphan();
+      curParentView = false;
+    }
+
+    // You can adopt childViews that have you set as their parent (i.e. created
+    // with createChildView()), but have not yet been fully adopted.
+    if (!curParentView || this.get('childViews').indexOf(this) < 0) {
+      var idx,
+        childViews = parentView.get('childViews'),
+        parentViewState = parentView.get('viewState'),
+        parentNode, nextNode, nextView, siblings;
+
+      // Send notifications.
+      if (parentView.willAddChild) { parentView.willAddChild(this, beforeView); }
+      if (this.willAddToParent) { this.willAddToParent(parentView, beforeView); }
+
+      // Set parentView.
+      this.set('parentView', parentView);
+
+      // Add to the new parent's childViews array.
+      if (childViews.needsClone) { parentView.set(childViews = []); }
+      idx = (beforeView) ? childViews.indexOf(beforeView) : childViews.length;
+      if (idx < 0) { idx = childViews.length; }
+      childViews.insertAt(idx, this);
+
+      // Notify adopted (on self and all child views).
+      this._adopted();
+
+
+      switch (this.get('viewState')) {
+      case SC.CoreView.UNRENDERED:
+        switch (parentViewState) {
+        case SC.CoreView.UNRENDERED:
+          break;
+        default:
+          // Bypass the unrendered state for adopted views.
+          this._doRender();
+        }
+        break;
+      case SC.CoreView.UNATTACHED:
+        switch (parentViewState) {
+        case SC.CoreView.UNRENDERED:
+          // Bring the child view down to the state of the parent.
+          this._doDestroyLayer();
+          break;
+        default:
+          parentNode = parentView.get('containerLayer');
+          siblings = parentView.get('childViews');
+          nextView = siblings.objectAt(siblings.indexOf(this) + 1);
+          nextNode = (nextView) ? nextView.get('layer') : null;
+
+          this._doAttach(parentNode, nextNode);
+        }
+        break;
+      default: // ATTACHED_X
+        switch (parentViewState) {
+        case SC.CoreView.UNRENDERED:
+          // Bring the child view down to the state of the parent.
+          this._doDestroyLayer();
+          break;
+        default:
+          parentNode = parentView.get('containerLayer');
+          siblings = parentView.get('childViews');
+          nextView = siblings.objectAt(siblings.indexOf(this) + 1);
+          nextNode = (nextView) ? nextView.get('layer') : null;
+
+          this._doAttach(parentNode, nextNode);
+        }
+      }
+
+      // Notify.
+      if (parentView.didAddChild) { parentView.didAddChild(this, beforeView); }
+      if (this.didAddToParent) { this.didAddToParent(parentView, beforeView); }
+    } else {
+      handled = false;
+    }
+
+    return handled;
+  },
+
+  /** @private Attach this view action. */
+  _doAttach: function (parentNode, nextNode) {
+    var state = this.get('viewState'),
+      transitionIn = this.get('transitionIn'),
+      parentView;
+
+    switch (state) {
+    case SC.CoreView.ATTACHED_HIDING: // FAST PATH!
+    case SC.CoreView.ATTACHED_HIDDEN: // FAST PATH!
+    case SC.CoreView.ATTACHED_HIDDEN_BY_PARENT: // FAST PATH!
+    case SC.CoreView.ATTACHED_BUILDING_IN: // FAST PATH!
+    case SC.CoreView.ATTACHED_BUILDING_OUT_BY_PARENT: // FAST PATH!
+    case SC.CoreView.ATTACHED_SHOWING: // FAST PATH!
+    case SC.CoreView.ATTACHED_SHOWN: // FAST PATH!
+      //@if(debug)
+      // This should be avoided, because moving the view layer without explicitly removing it first is a dangerous practice.
+      SC.warn("Developer Warning: You can not attach the view, %@, to a new node without properly detaching it first.".fmt(this));
+      //@endif
+      return false;
+    case SC.CoreView.UNATTACHED_BY_PARENT:
+      //@if(debug)
+      SC.warn("Developer Warning: You can not attach the child view, %@, directly.".fmt(this));
+      //@endif
+      return false;
+    case SC.CoreView.UNRENDERED: // FAST PATH!
+      return false;
+    case SC.CoreView.ATTACHED_BUILDING_OUT:
+      // If already building out, we need to cancel and possibly build in.
+      this._callOnChildViews('_parentDidCancelBuildOut');
+
+      // Remove the shared building out count if it exists.
+      delete this._buildingOutCount;
+
+      // Note: We can be in ATTACHED_BUILDING_OUT state without a transition out while we wait for child views.
+      if (this.get('transitionOut')) {
+        if (transitionIn) {
+          this._transitionIn();
+
+          // Route.
+          this._gotoAttachedBuildingInState();
+        } else {
+          // Route first!
+          this._gotoAttachedShownState();
+
+          this._cancelTransition();
+        }
+      } else {
+
+        // Route.
+        this._gotoAttachedShownState();
+      }
+
+      break;
+    case SC.CoreView.UNATTACHED:
+      var node = this.get('layer');
+
+      this._executeQueuedUpdates();
+
+      // Attach to parentNode
+      // IE doesn't support insertBefore(blah, undefined) in version IE9.
+      parentNode.insertBefore(node, nextNode || null);
+
+      parentView = this.get('parentView');
+      if (!parentView || (parentView && parentView.get('isAttached'))) {
+        // Notify.
+        this._notifyAttached();
+
+        // Route.
+        this._routeOnAttached();
+
+        // Give child views a chance to notify and update state.
+        this._callOnChildViews('_parentDidAppendToDocument');
+      } else {
+        // Route.
+        this._gotoUnattachedByParentState();
+      }
+      break;
+    default:
+    }
+
+    return true;
+  },
+
+  /** @private Destroy the layer of this view action. */
+  _doDestroyLayer: function () {
+    var handled = true;
+
+    if (this.get('_isRendered') && !this.get('isAttached')) {
+      // Remove our reference to the layer (our self and all our child views).
+      this._executeDoDestroyLayer();
+      this._callOnChildViews('_executeDoDestroyLayer');
+    } else {
+      handled = false;
+    }
+
+    return handled;
+  },
+
+  /** @private Detach this view action. */
+  _doDetach: function (immediately) {
+    var state = this.get('viewState'),
+      transitionOut = this.get('transitionOut');
+
+    switch (state) {
+    case SC.CoreView.UNRENDERED: // FAST PATH!
+    case SC.CoreView.UNATTACHED: // FAST PATH!
+      return false;
+    case SC.CoreView.ATTACHED_BUILDING_OUT_BY_PARENT: // FAST PATH!
+      if (immediately) {
+        // Don't wait for the build out to complete.
+        this._cancelTransition();
+
+        // Detach immediately.
+        this._executeDoDetach();
+      } else {
+        // TODO: take ownership of the building out of self and all childviews.  Super edge case stuff here..
+        this._gotoAttachedBuildingOutState();
+      }
+
+      // Don't try to notify or run transition out code again.
+      return true;
+    case SC.CoreView.ATTACHED_BUILDING_OUT: // FAST PATH!
+      // If already building out, only cancel if immediately is set.
+      if (immediately) {
+        this._cancelTransition();
+
+        // Detach immediately.
+        this._executeDoDetach();
+      }
+
+      // Don't try to notify or run transition out code again.
+      return true;
+    case SC.CoreView.UNATTACHED_BY_PARENT:
+    case SC.CoreView.ATTACHED_HIDDEN:
+    case SC.CoreView.ATTACHED_HIDDEN_BY_PARENT:
+      // No need to transition out, since we're hidden.
+      immediately = true;
+      break;
+    case SC.CoreView.ATTACHED_HIDING:
+      if (immediately || !transitionOut) {
+        this._cancelTransition();
+      }
+      break;
+    case SC.CoreView.ATTACHED_BUILDING_IN:
+      if (immediately || !transitionOut) {
+        this._cancelTransition();
+      }
+      break;
+    case SC.CoreView.ATTACHED_SHOWING:
+    case SC.CoreView.ATTACHED_SHOWN:
+      break;
+    default:
+    }
+
+    // Notify.
+    this._notifyDetaching();
+
+    if (immediately) {
+      // Detach immediately.
+      this._executeDoDetach();
+    } else {
+      // In order to allow the removal of a parent to be delayed by children's
+      // transitions, we track which views are building out and finish
+      // only when they're all done.
+      this._buildingOutCount = 0;
+
+      // Tell all the child views so that any with a transitionOut may run it.
+      this._callOnChildViews('_parentWillBuildOutFromDocument', this);
+
+      if (transitionOut) {
+        this._transitionOut(this);
+
+        // Route.
+        this._gotoAttachedBuildingOutState();
+      } else if (this._buildingOutCount > 0) {
+      // Some children are building out, we will have to wait for them.
+        this._gotoAttachedBuildingOutState();
+      } else {
+        delete this._buildingOutCount;
+
+        // Detach immediately.
+        this._executeDoDetach();
+      }
+    }
+
+    return true;
+  },
+
+  /** @private Hide this view action. */
+  _doHide: function () {
+    var state = this.get('viewState'),
+      transitionHide = this.get('transitionHide');
+
+    switch (state) {
+    case SC.CoreView.UNRENDERED: // FAST PATH!
+    case SC.CoreView.ATTACHED_HIDDEN: // FAST PATH!
+    case SC.CoreView.ATTACHED_HIDING: // FAST PATH!
+      return false;
+    case SC.CoreView.UNATTACHED: // FAST PATH!
+    case SC.CoreView.UNATTACHED_BY_PARENT: // FAST PATH!
+    case SC.CoreView.ATTACHED_BUILDING_OUT_BY_PARENT: // FAST PATH!
+    case SC.CoreView.ATTACHED_BUILDING_OUT: // FAST PATH!
+      // Queue the visibility update for the next time we display.
+      this._visibleStyleNeedsUpdate = true;
+
+      return true;
+    case SC.CoreView.ATTACHED_HIDDEN_BY_PARENT: // FAST PATH!
+      // Note that visibility update is NOT conditional for this state.
+      this._doUpdateVisibleStyle();
+
+      this._gotoAttachedHiddenState();
+
+      return true;
+    case SC.CoreView.ATTACHED_BUILDING_IN:
+    case SC.CoreView.ATTACHED_SHOWING:
+      if (!transitionHide) {
+        this._cancelTransition();
+      }
+      break;
+    case SC.CoreView.ATTACHED_SHOWN:
+      break;
+    default:
+    }
+
+    // Notify will hide.
+    if (this.willHideInDocument) { this.willHideInDocument(); }
+
+    if (transitionHide) {
+      this._transitionHide();
+
+      // Route.
+      this._gotoAttachedHidingState();
+    } else {
+      // Clear out any child views that are still transitioning before we hide.
+      this._callOnChildViews('_parentWillHideInDocument');
+
+      // Note that visibility update is NOT conditional for this state.
+      this.invokeOnce(this._doUpdateVisibleStyle);
+
+      // Notify.
+      if (this.didHideInDocument) { this.didHideInDocument(); }
+
+      this._callOnChildViews('_parentDidHideInDocument');
+
+      // Route.
+      this._gotoAttachedHiddenState();
+    }
+
+    return true;
+  },
+
+  /** @private Orphan this view action. */
+  _doOrphan: function () {
+    var parentView = this.get('parentView'),
+      handled = true;
+
+    if (parentView) {
+      var childViews = parentView.get('childViews'),
+        idx = childViews.indexOf(this);
+
+      // Completely remove the view from its parent.
+      this.set('parentView', null);
+
+      // Remove view from old parent's childViews array.
+      if (idx >= 0) { childViews.removeAt(idx); }
+
+      // Notify orphaned.
+      this._orphaned(parentView);
+    } else {
+      handled = false;
+    }
+
+    return handled;
+  },
+
+  /** @private Render this view action. */
+
+  _doRender: function () {
+    var state = this.get('viewState');
+
+    switch (state) {
+    case SC.CoreView.ATTACHED_SHOWING: // FAST PATHS!
+    case SC.CoreView.ATTACHED_SHOWN:
+    case SC.CoreView.ATTACHED_HIDING:
+    case SC.CoreView.ATTACHED_HIDDEN:
+    case SC.CoreView.ATTACHED_HIDDEN_BY_PARENT:
+    case SC.CoreView.ATTACHED_BUILDING_IN:
+    case SC.CoreView.ATTACHED_BUILDING_OUT:
+    case SC.CoreView.ATTACHED_BUILDING_OUT_BY_PARENT:
+    case SC.CoreView.UNATTACHED:
+    case SC.CoreView.UNATTACHED_BY_PARENT:
+      return false;
+    case SC.CoreView.UNRENDERED:
+      // Render the layer.
+      var context = this.renderContext(this.get('tagName'));
+
+      this.renderToContext(context);
+      this.set('layer', context.element());
+
+      // Route.
+      this._gotoUnattachedState();
+
+      // Notify rendered (on self and all child views).
+      this._rendered();
+      this._callOnChildViews('_parentDidRender');
+
+      // Bypass the unattached state for adopted views.
+      var parentView = this.get('parentView');
+      if (parentView && parentView.get('_isRendered')) {
+        var parentNode = parentView.get('containerLayer'),
+          siblings = parentView.get('childViews'),
+          nextView = siblings.objectAt(siblings.indexOf(this) + 1),
+          nextNode = (nextView) ? nextView.get('layer') : null;
+
+        // Attach to parentNode
+        // IE doesn't support insertBefore(blah, undefined) in version IE9.
+        // parentNode.insertBefore(node, nextNode || null);
+        this._doAttach(parentNode, nextNode);
+      }
+
+      return true;
+    }
+  },
+
+  /** @private Show this view action. */
+  _doShow: function () {
+    var state = this.get('viewState'),
+      parentView = this.get('parentView'),
+      // Views without a parent are not limited by a parent's current state.
+      isParentShown = parentView ? parentView.get('viewState') & SC.CoreView.IS_SHOWN : true,
+      transitionShow = this.get('transitionShow');
+
+    switch (state) {
+    case SC.CoreView.ATTACHED_SHOWN: // FAST PATH!
+    case SC.CoreView.ATTACHED_SHOWING: // FAST PATH!
+    case SC.CoreView.ATTACHED_HIDDEN_BY_PARENT: // FAST PATH!
+    case SC.CoreView.ATTACHED_BUILDING_IN: // FAST PATH!
+    case SC.CoreView.ATTACHED_BUILDING_OUT_BY_PARENT: // FAST PATH!
+    case SC.CoreView.ATTACHED_BUILDING_OUT: // FAST PATH!
+      return false;
+    case SC.CoreView.UNRENDERED: // FAST PATH!
+    case SC.CoreView.UNATTACHED: // FAST PATH!
+    case SC.CoreView.UNATTACHED_BY_PARENT: // FAST PATH!
+      // Queue the visibility update for the next time we display.
+      this._visibleStyleNeedsUpdate = true;
+      return true;
+    case SC.CoreView.ATTACHED_HIDDEN:
+      if (isParentShown) {
+        // Update before showing (note that visibility update is NOT conditional for this state).
+        this._doUpdateVisibleStyle();
+
+        // Notify will show.
+        this._callOnChildViews('_parentWillShowInDocument');
+
+        if (this.willShowInDocument) { this.willShowInDocument(); }
+      } else {
+        // Queue the visibility update for the next time we display.
+        this._visibleStyleNeedsUpdate = true;
+
+        // Route.
+        this._gotoAttachedHiddenByParentState();
+
+        return true;
+      }
+      break;
+    case SC.CoreView.ATTACHED_HIDING:
+      if (!transitionShow) {
+        this._cancelTransition();
+      }
+      break;
+    default:
+    }
+
+    this._executeQueuedUpdates();
+
+    if (transitionShow) {
+      this._transitionShow();
+
+      // Route.
+      this._gotoAttachedShowingState();
+    } else {
+      // Notify.
+      if (this.didShowInDocument) { this.didShowInDocument(); }
+      this._callOnChildViews('_parentDidShowInDocument');
+
+    // Route.
+      this._gotoAttachedShownState();
+    }
+
+    return true;
+  },
+
+  /** @private Update this view's contents action. */
+  _doUpdateContent: function (force) {
+    var isVisibleInWindow = this.get('isVisibleInWindow'),
+      handled = true;
+
+    // Legacy.
+    this.set('layerNeedsUpdate', true);
+
+    if (this.get('_isRendered')) {
+      if (isVisibleInWindow || force) {
+        // Only in the visible states do we allow updates without being forced.
+        this._executeDoUpdateContent();
+      } else {
+        // Otherwise mark the view as needing an update when we enter a shown state again.
+        this._contentNeedsUpdate = true;
+      }
+    } else {
+      handled = false;
+    }
+
+    return handled;
+  },
+
+  // ------------------------------------------------------------------------
+  // Events
+  //
+
+  /**
+    This method is called by transition plugins when the incoming or showing
+    transition completes.  You should only use this method if implementing a
+    custom transition plugin.
+
+    @param {SC.ViewTransitionProtocol} transition The transition plugin used.
+    @param {Object} options The original options used.  One of transitionShowOptions or transitionInOptions.
+  */
+  didTransitionIn: function () {
+    var state = this.get('viewState');
+
+    if (state === SC.CoreView.ATTACHED_SHOWING ||
+      state === SC.CoreView.ATTACHED_BUILDING_IN) {
+      this._teardownTransition();
+
+      // Notify.
+      if (this.didShowInDocument) { this.didShowInDocument(); }
+
+      if (state === SC.CoreView.ATTACHED_SHOWING) {
+        this._callOnChildViews('_parentDidShowInDocument');
+      }
+
+      // Route.
+      this._gotoAttachedShownState();
+    }
+  },
+
+  /**
+    This method is called by transition plugins when the outgoing or hiding
+    transition completes.  You should only use this method if implementing a
+    custom transition plugin.
+
+    @param {SC.ViewTransitionProtocol} transition The transition plugin used.
+    @param {Object} options The original options used.  One of transitionHideOptions or transitionOutOptions.
+  */
+  didTransitionOut: function () {
+    var state = this.get('viewState');
+
+    if (state === SC.CoreView.ATTACHED_BUILDING_OUT) {
+      this._teardownTransition();
+
+      this._executeDoDetach();
+    } else if (state === SC.CoreView.ATTACHED_BUILDING_OUT_BY_PARENT) {
+      var owningView = this._owningView;
+      // We can't clean up the transition until the parent is done.  For
+      // example, a fast child build out inside of a slow parent build out.
+      owningView._buildingOutCount--;
+
+      if (owningView._buildingOutCount === 0) {
+        owningView._executeDoDetach();
+
+        // Clean up.
+        delete this._owningView;
+      }
+    } else if (state === SC.CoreView.ATTACHED_HIDING) {
+      this._teardownTransition();
+
+      // Clear out any child views that are transitioning before we hide.
+      this._callOnChildViews('_parentWillHideInDocument');
+
+      // Note that visibility update is NOT conditional for this state.
+      this._doUpdateVisibleStyle();
+
+      // Notify.
+      if (this.didHideInDocument) { this.didHideInDocument(); }
+
+      this._callOnChildViews('_parentDidHideInDocument');
+
+      // Route.
+      this._gotoAttachedHiddenState();
+    }
+  },
+
+  /** @private The 'adopted' event. */
+  _adopted: function () {
+    // This has been moved to the _notifyAttached event.
+    // this.notifyPropertyChange('frame');
+  },
+
+  /** @private The 'orphaned' event. */
+  _orphaned: function (oldParentView) {
+    // Notify.
+    if (oldParentView.didRemoveChild) { oldParentView.didRemoveChild(this); }
+    if (this.didRemoveFromParent) { this.didRemoveFromParent(oldParentView); }
+  },
+
+  /** @private The 'rendered' event. */
+  _rendered: function () {
+    var displayProperties,
+      len, idx,
+      mixins = this.didCreateLayerMixin;
+
+    // Register display property observers.
+    displayProperties = this.get('displayProperties');
+    for (idx = 0, len = displayProperties.length; idx < len; idx++) {
+      this.addObserver(displayProperties[idx], this, this.displayDidChange);
+    }
+
+    // TODO: we should be able to fix this with states
+    // if (this.get('useStaticLayout')) this.viewDidResize();
+
+    // Send notice that the layer was created.
+    if (this.didCreateLayer) { this.didCreateLayer(); }
+    if (mixins) {
+      len = mixins.length;
+      for (idx = 0; idx < len; ++idx) {
+        mixins[idx].call(this);
+      }
+    }
+
+    // var childView, childViews = this.get('childViews');
+    // for (var i = childViews.length - 1; i >= 0; i--) {
+    //   childView = childViews[i];
+
+    //   // We allow missing childViews in the array so ignore them.
+    //   if (!childView) { continue; }
+
+      // A parent view creating a layer might result in the creation of a
+      // child view's DOM node being created via a render context without
+      // createLayer() being invoked on the child.  In such cases, if anyone
+      // had requested 'layer' and it was cached as null, we need to
+      // invalidate it.
+      // TODO: we should be able to fix this with states
+      // childView.notifyPropertyChange('layer');
+
+      // A strange case, that a childView's frame won't be correct before
+      // we have a layer, if the childView doesn't have a fixed layout
+      // and we are using static layout.
+      // TODO: we should be able to fix this with states
+      // if (this.get('useStaticLayout')) {
+      //   if (!childView.get('isFixedLayout')) { childView.viewDidResize(); }
+      // }
+
+    //   childView._rendered();
+    // }
+
+    // Begin observing isVisible & isFirstResponder.
+    this.addObserver('isVisible', this, this._isVisibleDidChange);
+    this.addObserver('isFirstResponder', this, this._isFirstResponderDidChange);
+  },
+
+  // ------------------------------------------------------------------------
+  // States
+  //
+
+  /** @private */
+  _gotoAttachedBuildingInState: function () {
+    // Update the state.
+    this.set('viewState', SC.CoreView.ATTACHED_BUILDING_IN);
+  },
+
+  /** @private */
+  _gotoAttachedBuildingOutState: function () {
+    // Update the state.
+    this.set('viewState', SC.CoreView.ATTACHED_BUILDING_OUT);
+  },
+
+  /** @private */
+  _gotoAttachedBuildingOutByParentState: function () {
+    // Update the state.
+    this.set('viewState', SC.CoreView.ATTACHED_BUILDING_OUT_BY_PARENT);
+  },
+
+  /** @private */
+  _gotoAttachedHiddenState: function () {
+    // Update the state.
+    this.set('viewState', SC.CoreView.ATTACHED_HIDDEN);
+  },
+
+  /** @private */
+  _gotoAttachedHiddenByParentState: function () {
+    // Update the state.
+    this.set('viewState', SC.CoreView.ATTACHED_HIDDEN_BY_PARENT);
+  },
+
+  /** @private */
+  _gotoAttachedHidingState: function () {
+    // Update the state.
+    this.set('viewState', SC.CoreView.ATTACHED_HIDING);
+  },
+
+  /** @private */
+  _gotoAttachedShowingState: function () {
+    // Update the state.
+    this.set('viewState', SC.CoreView.ATTACHED_SHOWING);
+  },
+
+  /** @private */
+  _gotoAttachedShownState: function () {
+    // Update the state.
+    this.set('viewState', SC.CoreView.ATTACHED_SHOWN);
+  },
+
+  /** @private */
+  _gotoUnattachedState: function () {
+    // Update the state.
+    this.set('viewState', SC.CoreView.UNATTACHED);
+  },
+
+  /** @private */
+  _gotoUnattachedByParentState: function () {
+    // Update the state.
+    this.set('viewState', SC.CoreView.UNATTACHED_BY_PARENT);
+  },
+
+  /** @private */
+  _gotoUnrenderedState: function () {
+    // Update the state.
+    this.set('viewState', SC.CoreView.UNRENDERED);
+  },
+
+  // ------------------------------------------------------------------------
+  // Methods
+  //
+
+  /** @private Clear building in transition. */
+  _cancelTransition: function () {
+    // Cancel conflicting transitions.
+    this.cancelAnimation();
+    this._teardownTransition();
+  },
+
+  /** @private */
+  _doUpdateVisibleStyle: function () {
+    var isVisible = this.get('isVisible');
+
+    this.$().toggleClass('sc-hidden', !isVisible);
+    this.$().attr('aria-hidden', isVisible ? null : true);
+
+    // Reset that an update is required.
+    this._visibleStyleNeedsUpdate = false;
+  },
+
+  /** @private */
+  _executeDoDestroyLayer: function () {
+    var displayProperties,
+      idx, len,
+      mixins;
+
+    // Notify.
+    if (this.willDestroyLayer) { this.willDestroyLayer(); }
+
+    mixins = this.willDestroyLayerMixin;
+    if (mixins) {
+      len = mixins.length;
+      for (idx = 0; idx < len; ++idx) {
+        mixins[idx].call(this);
+      }
+    }
+
+    // Remove the layer reference.
+    this.set('layer', null);
+
+    // Unregister display property observers.
+    displayProperties = this.get('displayProperties');
+    for (idx = 0, len = displayProperties.length; idx < len; idx++) {
+      this.removeObserver(displayProperties[idx], this, this.displayDidChange);
+    }
+
+    // Stop observing isVisible & isFirstResponder.
+    this.removeObserver('isVisible', this, this._isVisibleDidChange);
+    this.removeObserver('isFirstResponder', this, this._isFirstResponderDidChange);
+
+    // Route.
+    this._gotoUnrenderedState();
+  },
+
+  /** @private Detach the view. */
+  _executeDoDetach: function () {
+    // Give child views a chance to clean up any transitions and to notify.
+    this._callOnChildViews('_parentWillRemoveFromDocument');
+
+    // Detach the layer.
+    var node = this.get('layer');
+    node.parentNode.removeChild(node);
+
+    // Notify.
+    this._notifyDetached();
+
+    // Give child views a chance to clean up any transitions and to notify.
+    this._callOnChildViews('_parentDidRemoveFromDocument');
+
+    // Route.
+    this._gotoUnattachedState();
+  },
+
+  /** @private */
+  _executeDoUpdateContent: function () {
+    var mixins = this.renderMixin,
+      context = this.renderContext(this.get('layer'));
+
+    // If there is no update method, fallback to calling render with extra
+    // firstTime argument set to false.
+    if (!this.update) {
+      this.render(context, false);
+    } else {
+      this.update(context.$());
+    }
+
+    // Call renderMixin methods.
+    if (mixins) {
+      var len = mixins.length;
+      for (var idx = 0; idx < len; ++idx) {
+        mixins[idx].call(this, context, false);
+      }
+    }
+
+    // Call applyAttributesToContext so that subclasses that override it can
+    // insert further attributes.
+    this.applyAttributesToContext(context);
+
+    context.update();
+
+    // Legacy.
+    this.set('layerNeedsUpdate', false);
+
+    // Reset that an update is required.
+    this._contentNeedsUpdate = false;
+
+    // Notify.
+    this.notifyPropertyChange('layer');
+    if (this.didUpdateLayer) { this.didUpdateLayer(); }
+
+    if (this.designer && this.designer.viewDidUpdateLayer) {
+      this.designer.viewDidUpdateLayer(); //let the designer know
+    }
+  },
+
+  /** @private */
+  _executeQueuedUpdates: function () {
+
+    // Update visibility style if necessary.
+    if (this._visibleStyleNeedsUpdate) {
+      this._doUpdateVisibleStyle();
+    }
+
+    // Update the content of the layer if necessary.
+    if (this._contentNeedsUpdate) {
+      this._executeDoUpdateContent();
+    }
+  },
+
+  /** @private
+    Marks the view as needing a visibility update if the isVisible property
+    changes.
+
+    This observer is connected when the view is attached and is disconnected
+    when the view is detached.
+  */
+  _isVisibleDidChange: function () {
+    if (this.get('isVisible')) {
+      this._doShow();
+    } else {
+      this._doHide();
+    }
+  },
+
+  /** @private
+    Adds the 'focus' class to the view.
+
+    This observer is connected when the view is attached and is disconnected
+    when the view is detached.
+  */
+  _isFirstResponderDidChange: function () {
+    var isFirstResponder = this.get('isFirstResponder');
+
+    this.$().toggleClass('focus', isFirstResponder);
+  },
+
+  /** @private Notify on attached. */
+  _notifyAttached: function () {
+    // If we don't have the layout module then we don't know the frame until appended to the document.
+    this.notifyPropertyChange('frame');
+
+    // Notify.
+    if (this.didAppendToDocument) { this.didAppendToDocument(); }
+  },
+
+  /** @private Notify on detaching. */
+  _notifyDetaching: function () {
+    if (this.willRemoveFromDocument) { this.willRemoveFromDocument(); }
+  },
+
+  /** @private Notify on detached. */
+  _notifyDetached: function () {
+  },
+
+  /** @private Routes according to parent did append. */
+  _parentDidAppendToDocument: function () {
+    // Run any queued updates.
+    this._executeQueuedUpdates();
+
+    this._notifyAttached();
+    this._routeOnAttached();
+  },
+
+  /** @private Updates according to parent did cancel build out. */
+  _parentDidCancelBuildOut: function () {
+    var state = this.get('viewState'),
+      transitionIn = this.get('transitionIn');
+
+    if (state === SC.CoreView.ATTACHED_BUILDING_OUT_BY_PARENT) {
+      if (transitionIn) {
+        this._transitionIn();
+
+        // Route.
+        this._gotoAttachedBuildingInState();
+      } else {
+        this._cancelTransition();
+
+        // Route.
+        this._gotoAttachedShownState();
+      }
+    } else if (state === SC.CoreView.ATTACHED_BUILDING_OUT || state &
+      SC.CoreView.IS_HIDDEN) {
+      // There's no need to continue to further child views.
+      return false;
+    }
+  },
+
+  /** @private Updates according to parent did render. */
+  _parentDidRender: function () {
+    // Notify rendered.
+    this._rendered();
+
+    // Route
+    this._gotoUnattachedByParentState();
+  },
+
+  /** @private Starts building out view if appropriate. */
+  _parentWillBuildOutFromDocument: function (owningView) {
+    var state = this.get('viewState'),
+      transitionOut = this.get('transitionOut');
+
+    switch (state) {
+    case SC.CoreView.UNRENDERED:
+    case SC.CoreView.UNATTACHED:
+    case SC.CoreView.UNATTACHED_BY_PARENT:
+    case SC.CoreView.ATTACHED_BUILDING_OUT:
+    case SC.CoreView.ATTACHED_BUILDING_OUT_BY_PARENT:
+      // There's no need to continue to further child views.
+      return false;
+    case SC.CoreView.ATTACHED_HIDDEN:
+    case SC.CoreView.ATTACHED_HIDDEN_BY_PARENT:
+    case SC.CoreView.ATTACHED_HIDING:
+      // Notify.
+      this._notifyDetaching();
+
+      return false;
+    case SC.CoreView.ATTACHED_SHOWING:
+    case SC.CoreView.ATTACHED_BUILDING_IN:
+    case SC.CoreView.ATTACHED_SHOWN:
+      // Notify.
+      this._notifyDetaching();
+
+      if (transitionOut) {
+        this._owningView = owningView;
+        this._transitionOut(owningView);
+
+        // Route.
+        this._gotoAttachedBuildingOutByParentState();
+      }
+      return true;
+    default:
+    }
+  },
+
+  /** @private Clean up before parent is detached. */
+  _parentWillRemoveFromDocument: function () {
+    var state = this.get('viewState');
+
+    switch (state) {
+    case SC.CoreView.UNRENDERED:
+    case SC.CoreView.UNATTACHED:
+    case SC.CoreView.UNATTACHED_BY_PARENT:
+      // There's no need to continue to further child views.
+      return false;
+    case SC.CoreView.ATTACHED_BUILDING_IN:
+    case SC.CoreView.ATTACHED_SHOWING:
+    case SC.CoreView.ATTACHED_HIDING:
+    case SC.CoreView.ATTACHED_BUILDING_OUT:
+    case SC.CoreView.ATTACHED_BUILDING_OUT_BY_PARENT:
+      this._cancelTransition();
+      break;
+    case SC.CoreView.ATTACHED_HIDDEN:
+    case SC.CoreView.ATTACHED_HIDDEN_BY_PARENT:
+    case SC.CoreView.ATTACHED_SHOWN:
+      break;
+    default:
+      // Attached and not in a transitionary state.
+    }
+  },
+
+  /** @private Routes according to parent did detach. */
+  _parentDidRemoveFromDocument: function () {
+    var state = this.get('viewState');
+
+    if (state & SC.CoreView.IS_ATTACHED) {
+      this._notifyDetached();
+      this._gotoUnattachedByParentState();
+    } else {
+      // There's no need to continue to further child views.
+      return false;
+    }
+  },
+
+  /** @private Routes according to parent did hide. */
+  _parentDidHideInDocument: function () {
+    var state = this.get('viewState');
+
+    switch (state) {
+    case SC.CoreView.UNRENDERED: // FAST PATH!
+    case SC.CoreView.UNATTACHED: // FAST PATH!
+    case SC.CoreView.UNATTACHED_BY_PARENT:
+    case SC.CoreView.ATTACHED_HIDING:
+    case SC.CoreView.ATTACHED_BUILDING_OUT:
+    case SC.CoreView.ATTACHED_BUILDING_OUT_BY_PARENT:
+    case SC.CoreView.ATTACHED_HIDDEN: // FAST PATH!
+    case SC.CoreView.ATTACHED_HIDDEN_BY_PARENT:
+      // There's no need to continue to further child views.
+      return false;
+    case SC.CoreView.ATTACHED_BUILDING_IN:
+    case SC.CoreView.ATTACHED_SHOWING:
+    case SC.CoreView.ATTACHED_SHOWN:
+      break;
+    default:
+    }
+
+    // Notify.
+    if (this.didHideInDocument) { this.didHideInDocument(); }
+
+    // Route.
+    this._gotoAttachedHiddenByParentState();
+  },
+
+  /** @private Routes according to parent will hide. */
+  _parentWillHideInDocument: function () {
+    var state = this.get('viewState');
+
+    switch (state) {
+    case SC.CoreView.UNRENDERED: // FAST PATH!
+    case SC.CoreView.UNATTACHED: // FAST PATH!
+    // case SC.CoreView.UNATTACHED_BY_PARENT:
+    case SC.CoreView.ATTACHED_HIDDEN: // FAST PATH!
+    // case SC.CoreView.ATTACHED_HIDDEN_BY_PARENT:
+      // There's no need to continue to further child views.
+      return false;
+    case SC.CoreView.ATTACHED_HIDING: // FAST PATH!
+      // Clear out any child views that are transitioning before we hide.
+      this._callOnChildViews('_parentWillHideInDocument');
+
+      this._cancelTransition();
+
+      // We didn't quite hide in time so indicate that visibility needs update next time we display.
+      this._visibleStyleNeedsUpdate = true;
+
+      // Route.
+      this._gotoAttachedHiddenState();
+
+      return false;
+    case SC.CoreView.ATTACHED_BUILDING_IN: // FAST PATH!
+    case SC.CoreView.ATTACHED_SHOWING: // FAST PATH!
+      this._cancelTransition();
+      break;
+    // case SC.CoreView.ATTACHED_BUILDING_OUT:
+    case SC.CoreView.ATTACHED_BUILDING_OUT_BY_PARENT:
+      this._cancelTransition();
+      break;
+    case SC.CoreView.ATTACHED_SHOWN:
+      break;
+    default:
+      // Attached and not in a transitionary state.
+    }
+
+    // Notify.
+    if (this.willHideInDocument) { this.willHideInDocument(); }
+  },
+
+  /** @private Routes according to parent did show. */
+  _parentDidShowInDocument: function () {
+    var state = this.get('viewState');
+
+    if (state === SC.CoreView.ATTACHED_HIDDEN_BY_PARENT) {
+      // Route.
+      this._gotoAttachedShownState();
+
+      // Notify.
+      if (this.didShowInDocument) { this.didShowInDocument(); }
+    } else {
+      // There's no need to continue to further child views.
+      return false;
+    }
+  },
+
+  /** @private Prepares according to parent will show. */
+  _parentWillShowInDocument: function () {
+    var state = this.get('viewState');
+
+    if (state === SC.CoreView.ATTACHED_HIDDEN_BY_PARENT) {
+      this._executeQueuedUpdates();
+
+      // Notify.
+      if (this.willShowInDocument) { this.willShowInDocument(); }
+    } else {
+      // There's no need to continue to further child views.
+      return false;
+    }
+  },
+
+  /** @private */
+  _setupTransition: function () {
+    // Prepare for a transition.
+    this._preTransitionLayout = SC.clone(this.get('layout'));
+    this._preTransitionFrame = this.get('borderFrame');
+  },
+
+  /** @private */
+  _teardownTransition: function () {
+    // Reset the layout to its original value.
+    this.set('layout', this._preTransitionLayout);
+
+    // Clean up.
+    delete this._preTransitionLayout;
+    delete this._preTransitionFrame;
+  },
+
+  /** @private Attempts to run a transition hide, ensuring any incoming transitions are stopped in place. */
+  _transitionHide: function () {
+    var state = this.get('viewState'),
+      transitionHide = this.get('transitionHide'),
+      options = this.get('transitionHideOptions') || {},
+      inPlace = false;
+
+    switch (state) {
+    case SC.CoreView.ATTACHED_SHOWING:
+    case SC.CoreView.ATTACHED_BUILDING_IN:
+      this.cancelAnimation(SC.LayoutState.CURRENT);
+      inPlace = true;
+      break;
+    default:
+      this._setupTransition();
+    }
+
+    // Set up the hiding transition.
+    if (transitionHide.setup) {
+      transitionHide.setup(this, options, inPlace);
+    }
+
+    // Execute the hiding transition.
+    transitionHide.run(this, options, this._preTransitionLayout, this._preTransitionFrame);
+  },
+
+  /** @private Attempts to run a transition in, ensuring any outgoing transitions are stopped in place. */
+  _transitionIn: function () {
+    var state = this.get('viewState'),
+      transitionIn = this.get('transitionIn'),
+      options = this.get('transitionInOptions') || {},
+      inPlace = false;
+
+    switch (state) {
+    case SC.CoreView.ATTACHED_BUILDING_OUT_BY_PARENT:
+    case SC.CoreView.ATTACHED_BUILDING_OUT:
+      this.cancelAnimation(SC.LayoutState.CURRENT);
+      inPlace = true;
+      break;
+    default:
+      this._setupTransition();
+    }
+
+    // Set up the incoming transition.
+    if (transitionIn.setup) {
+      transitionIn.setup(this, options, inPlace);
+    }
+
+    // Execute the incoming transition.
+    transitionIn.run(this, options, this._preTransitionLayout, this._preTransitionFrame);
+  },
+
+  /** @private Attempts to run a transition out, ensuring any incoming transitions are stopped in place. */
+  _transitionOut: function (owningView) {
+    var state = this.get('viewState'),
+      transitionOut = this.get('transitionOut'),
+      options = this.get('transitionOutOptions') || {},
+      inPlace = false;
+
+    switch (state) {
+    case SC.CoreView.ATTACHED_SHOWING:
+    case SC.CoreView.ATTACHED_HIDING:
+    case SC.CoreView.ATTACHED_BUILDING_IN:
+      this.cancelAnimation(SC.LayoutState.CURRENT);
+      inPlace = true;
+      break;
+    default:
+      this._setupTransition();
+    }
+
+    // Increment the shared building out count.
+    owningView._buildingOutCount++;
+
+    // Set up the outgoing transition.
+    if (transitionOut.setup) {
+      transitionOut.setup(this, options, inPlace);
+    }
+
+    // Execute the outgoing transition.
+    transitionOut.run(this, options, this._preTransitionLayout, this._preTransitionFrame);
+  },
+
+  /** @private Attempts to run a transition show, ensuring any hiding transitions are stopped in place. */
+  _transitionShow: function () {
+    var state = this.get('viewState'),
+      transitionShow = this.get('transitionShow'),
+      options = this.get('transitionShowOptions') || {},
+      inPlace = false;
+
+    if (state === SC.CoreView.ATTACHED_HIDING) {
+      this.cancelAnimation(SC.LayoutState.CURRENT);
+      inPlace = true;
+    } else {
+      this._setupTransition();
+    }
+
+    // Set up the showing transition.
+    if (transitionShow.setup) {
+      transitionShow.setup(this, options, inPlace);
+    }
+
+    // Execute the showing transition.
+    transitionShow.run(this, options, this._preTransitionLayout, this._preTransitionFrame);
+  },
+
+  /** @private */
+  _routeOnAttached: function () {
+    var parentView = this.get('parentView'),
+      // Views without a parent are not limited by a parent's current state.
+      isParentShown = parentView ? parentView.get('viewState') & SC.CoreView.IS_SHOWN : true;
+
+    // Route.
+    if (this.get('isVisible')) {
+      if (isParentShown) {
+        // Route.
+        var transitionIn = this.get('transitionIn');
+        if (transitionIn) {
+          this._transitionIn();
+
+          this._gotoAttachedBuildingInState();
+        } else {
+          this._gotoAttachedShownState();
+        }
+      } else {
+        this._gotoAttachedHiddenByParentState();
+      }
+    } else {
+      this._gotoAttachedHiddenState();
+    }
+  }
+
+});