0
@@ -19,12 +19,16 @@
0
       private function onCreationComplete():void
0
       {
0
         addEventListener(ZoomCardEvent.ZOOM, onZoomCard);
0
+        var homeCard:Card = new Card('Home');
0
+        var homeCanvas:CardCanvas = homeCard.createCanvas();
0
+        canvasNavigator.addChild(homeCanvas);
0
+        canvasNavigator.selectedChild = homeCanvas;
0
       }
0
       
0
       private function onNewCardBtnClick():void
0
       {
0
         var card:Card = new Card('New Card');
0
-        CardCanvas(canvasNavigator.selectedChild).addCard(card);
0
+        CardCanvas(canvasNavigator.selectedChild).addCard(card.createReference());
0
       }
0
       
0
       private function onZoomCard(event:ZoomCardEvent):void
0
@@ -52,8 +56,6 @@
0
   </mx:ApplicationControlBar>
0
   <code:SuperTabNavigator id="canvasNavigator" width="100%" height="100%"
0
     horizontalScrollPolicy="on" verticalScrollPolicy="on"
0
-    horizontalGap="3" backgroundAlpha="0.5" paddingLeft="10">
0
-    <components:CardCanvas label="Home" width="100%" height="100%"/>
0
-  </code:SuperTabNavigator>
0
+    horizontalGap="3" backgroundAlpha="0.5" paddingLeft="10"/>
0
 </mx:Application>

0
@@ -1 +1,92 @@
0
+package com.cardwall.components
0
+{
0
+  import flash.display.DisplayObject;
0
+  
0
+  import mx.binding.utils.BindingUtils;
0
+  import mx.containers.Canvas;
0
+
0
+  [Bindable]
0
+  public class CardCanvas extends Canvas
0
+  {
0
+    import com.cardwall.model.CardReference;
0
+    import com.cardwall.model.Card;
0
+    import mx.events.CloseEvent;
0
+    import com.cardwall.events.DragPanelEvent;
0
+    
0
+    private var _card:Card;
0
+    
0
+    public var innerCanvas:Canvas;
0
+    override public var label:String;
0
+    
0
+    public function get card():Card
0
+    {
0
+      return _card;
0
+    }
0
+    
0
+    public function set card(newCard:Card):void
0
+    {
0
+      _card = newCard;
0
+      BindingUtils.bindSetter(createLabel, _card, 'id');
0
+      BindingUtils.bindSetter(createLabel, _card, 'title');
0
+      innerCanvas.removeAllChildren();
0
+      for (var i:int = 0; i < _card.children.length; i++) {
0
+        this.addCard(CardReference(_card.children.getItemAt(i)));
0
+      }
0
+    }
0
+    
0
+    private function createLabel(x:* = null):void
0
+    {
0
+      this.label = _card.id + ': ' + _card.title;
0
+    }
0
+    
0
+    public function CardCanvas()
0
+    {
0
+      innerCanvas = new Canvas();
0
+      innerCanvas.percentHeight = 100;
0
+      innerCanvas.percentWidth = 100;
0
+      innerCanvas.horizontalScrollPolicy = 'false';
0
+      innerCanvas.verticalScrollPolicy = 'false';
0
+      this.addChild(innerCanvas);
0
+    }
0
+    
0
+    public function addCard(card:CardReference):void
0
+    {
0
+      var cardView:SmallCardView = card.createSmallView();
0
+      innerCanvas.addChild(cardView);
0
+      cardView.addEventListener(DragPanelEvent.MOVED, onCardMove);
0
+      cardView.addEventListener(CloseEvent.CLOSE,
0
+        function(event:CloseEvent):void
0
+        {
0
+          innerCanvas.removeChild(cardView);
0
+          cardView = null;
0
+        });
0
+      if (!this.card.children.contains(card)) {
0
+        this.card.children.addItem(card);
0
+      }
0
+    }
0
+    
0
+    private function onCardMove(event:DragPanelEvent):void
0
+    {
0
+      var maxX:int = 0;
0
+      var maxY:int = 0;
0
+      var child:DisplayObject;
0
+      var childMaxX:int;
0
+      var childMaxY:int;
0
+      var i:int;
0
+    
0
+      for (i = 0; i < innerCanvas.numChildren; i++) {
0
+        child = innerCanvas.getChildAt(i);
0
+        childMaxX = child.x + child.width;
0
+        childMaxY = child.y + child.height;
0
+        if (childMaxX > maxX) maxX = childMaxX;
0
+        if (childMaxY > maxY) maxY = childMaxY;
0
+      }
0
+    
0
+      innerCanvas.width = maxX;
0
+      innerCanvas.height = maxY;
0
+      if (innerCanvas.width < width) innerCanvas.width = width;
0
+      if (innerCanvas.height < height) innerCanvas.height = height;
0
+    }
0
+  }
0
+}

0
@@ -1,56 +1 @@
0
-<?xml version="1.0" encoding="utf-8"?>
0
-<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"
0
-  label="{card.title}"
0
-  width="400" height="300">
0
-  <mx:Script>
0
-    <![CDATA[
0
-      import com.cardwall.model.Card;
0
-      import mx.events.CloseEvent;
0
-      import com.cardwall.events.DragPanelEvent;
0
-      
0
-      [Bindable]
0
-      public var card:Card;
0
-      
0
-      public function addCard(card:Card):void
0
-      {
0
-        var cardView:SmallCardView = card.createSmallView();
0
-        innerCanvas.addChild(cardView);
0
-        cardView.addEventListener(DragPanelEvent.MOVED, onCardMove);
0
-        cardView.addEventListener(CloseEvent.CLOSE,
0
-          function(event:CloseEvent):void
0
-          {
0
-            innerCanvas.removeChild(cardView);
0
-            cardView = null;
0
-          });
0
-      }
0
-      
0
-      private function onCardMove(event:DragPanelEvent):void
0
-      {
0
-        var maxX:int = 0;
0
-        var maxY:int = 0;
0
-        var child:DisplayObject;
0
-        var childMaxX:int;
0
-        var childMaxY:int;
0
-        var i:int;
0
-        
0
-        for (i = 0; i < innerCanvas.numChildren; i++) {
0
-          child = innerCanvas.getChildAt(i);
0
-          childMaxX = child.x + child.width;
0
-          childMaxY = child.y + child.height;
0
-          if (childMaxX > maxX) maxX = childMaxX;
0
-          if (childMaxY > maxY) maxY = childMaxY;
0
-        }
0
-        
0
-        innerCanvas.width = maxX;
0
-        innerCanvas.height = maxY;
0
-        if (innerCanvas.width < width) innerCanvas.width = width;
0
-        if (innerCanvas.height < height) innerCanvas.height = height;
0
-      }
0
-    ]]>
0
-  </mx:Script>
0
-  
0
-  <mx:Canvas id="innerCanvas"
0
-    width="100%" height="100%"
0
-    horizontalScrollPolicy="off" verticalScrollPolicy="off"/>
0
-</mx:Canvas>

0
@@ -60,7 +60,7 @@
0
       dispatchEvent(evt);
0
     }
0
     
0
-    private function tbMouseUpHandler(event:MouseEvent):void
0
+    protected function tbMouseUpHandler(event:MouseEvent):void
0
     {
0
       parent.removeEventListener(MouseEvent.MOUSE_MOVE, tbMouseMoveHandler);
0
       Application.application.removeEventListener(MouseEvent.MOUSE_UP, tbMouseUpHandler);
0
@@ -128,7 +128,7 @@
0
       }
0
     }
0
     
0
-    private function stopResizePanel(event:MouseEvent):void
0
+    protected function stopResizePanel(event:MouseEvent):void
0
     {
0
       parent.removeEventListener(MouseEvent.MOUSE_MOVE, resizePanel);
0
     }

0
@@ -2,7 +2,7 @@
0
 <DragPanel xmlns="com.cardwall.components.*" xmlns:mx="http://www.adobe.com/2006/mxml"
0
   width="250" height="250"
0
   showCloseButton="true"
0
-  title="{card.title}">
0
+  title="{card.id}: {card.title}">
0
   <states>
0
     <mx:State name="Editing" enterState="onEditingStateEntry()">
0
       <mx:RemoveChild target="{editBtn}"/>
0
0
0
@@ -26,14 +26,29 @@
0
   
0
   <mx:Script>
0
     <![CDATA[
0
+      import com.cardwall.model.CardReference;
0
       import com.cardwall.events.ZoomCardEvent;
0
       import mx.core.Application;
0
       import com.cardwall.model.Card;
0
       import mx.controls.Alert;
0
       
0
       [Bindable]
0
-      public var card:Card;
0
+      public var card:CardReference;
0
       
0
+      override protected function tbMouseUpHandler(event:MouseEvent):void
0
+      {
0
+        super.tbMouseUpHandler(event);
0
+        card.x = this.x;
0
+        card.y = this.y;
0
+      }
0
+      
0
+      override protected function stopResizePanel(event:MouseEvent):void
0
+      {
0
+        super.stopResizePanel(event);
0
+        card.width = this.width;
0
+        card.height = this.height;
0
+      }
0
+      
0
       private function onEditBtnClick():void
0
       {
0
         currentState = 'Editing';
0
@@ -41,7 +56,7 @@
0
       
0
       private function onZoomBtnClick():void
0
       {
0
-        dispatchEvent(new ZoomCardEvent(ZoomCardEvent.ZOOM, this.card));
0
+        dispatchEvent(new ZoomCardEvent(ZoomCardEvent.ZOOM, this.card.card));
0
       }
0
       
0
       private function onCancelBtnClick():void

0
@@ -3,26 +3,25 @@
0
   import com.cardwall.components.CardCanvas;
0
   import com.cardwall.components.SmallCardView;
0
   
0
+  import mx.collections.ArrayCollection;
0
+  
0
   [Bindable]
0
   public class Card
0
   {
0
+    private static var lastId:int = 0;
0
+    
0
+    public var id:int;
0
     public var title:String;
0
     public var bodyText:String;
0
+    public var children:ArrayCollection = new ArrayCollection();
0
     
0
     public function Card(title:String = '', bodyText:String = '')
0
     {
0
+      this.id = ++Card.lastId;
0
       this.title = title;
0
       this.bodyText = bodyText;
0
     }
0
     
0
-    public function createSmallView(initialState:String = ''):SmallCardView
0
-    {
0
-      var view:SmallCardView = new SmallCardView();
0
-      view.card = this;
0
-      view.currentState = initialState;
0
-      return view;
0
-    }
0
-    
0
     public function createCanvas():CardCanvas
0
     {
0
       var canvas:CardCanvas = new CardCanvas;
0
@@ -30,6 +29,11 @@
0
       canvas.percentHeight = 100;
0
       canvas.percentWidth = 100;
0
       return canvas;
0
+    }
0
+    
0
+    public function createReference():CardReference
0
+    {
0
+      return new CardReference(this);
0
     }
0
   }
0
 }

0
@@ -1 +1,58 @@
0
+package com.cardwall.model
0
+{
0
+  import com.cardwall.components.SmallCardView;
0
+  
0
+  [Bindable]
0
+  public class CardReference
0
+  {
0
+    public var card:Card;
0
+    public var x:int;
0
+    public var y:int;
0
+    public var width:int;
0
+    public var height:int;
0
+    
0
+    public function CardReference(card:Card)
0
+    {
0
+      this.card = card;
0
+    }
0
+    
0
+    public function get id():int
0
+    {
0
+      return card.id;
0
+    }
0
+    
0
+    public function set id(newId:int):void
0
+    {
0
+      card.id = newId;
0
+    }
0
+    
0
+    public function get title():String
0
+    {
0
+      return card.title;
0
+    }
0
+    
0
+    public function set title(newTitle:String):void
0
+    {
0
+      card.title = newTitle;
0
+    }
0
+    
0
+    public function get bodyText():String
0
+    {
0
+      return card.bodyText;
0
+    }
0
+    
0
+    public function set bodyText(newBodyText:String):void
0
+    {
0
+      card.bodyText = newBodyText;
0
+    }
0
+    
0
+    public function createSmallView(initialState:String = ''):SmallCardView
0
+    {
0
+      var view:SmallCardView = new SmallCardView();
0
+      view.card = this;
0
+      view.currentState = initialState;
0
+      return view;
0
+    }
0
+  }
0
+}