fix for applying skin after creation and README updates

README

@@ -16,7 +16,35 @@ In Flash Builder (Flex Builder) create a new AS3 Project. After the setup is don
 
 Documentation coming soon.
 
-As of 4/28/2010 only the Label, PushButton, Checkbox, Text, HSlider and VSlider have been refactored to use skinning. 
+Creating new skins
+------------------
+When creating a new skin there are a few things to keep in mind:
+
+1. You need to extend the com.dgrigg.minimalcomps.skins.Skin class
+
+2. If you want the hostComponent to be aware of the skin parts when they are added, you need to give each skin part a name, either in the markup or programmatically: 
+<comp:Label id="label" name="skinLabel"/>
+
+or
+
+var label:Label = new Label(); 
+label.name = "skinLabel";
+
+the name value is how you can differentiate the skin parts in the component as they are added, see the 'skinPartAdded' method in com.bit101.components.Component
+
+3. In the skin you can access the host component via the 'hostComponent' property
+
+4. To apply a skin to a component
+<comp:PushButton skinClass="com.dgrigg.skins.ButtonImageSkin"/>
+
+or
+
+button.skinClass = com.dgrigg.skins.ButtonImageSkin;
+
+
+Releases
+--------
+4/28/2010 Label, PushButton, Checkbox, Text, HSlider and VSlider have been refactored to use skinning. 
 
 Derrick Grigg
 www.dgrigg.com

src/SkinDemo.as

@@ -30,6 +30,7 @@
 package
 {
 	import com.bit101.components.*;
+	import com.dgrigg.skins.ButtonImageSkin;
 
 	import flash.display.Sprite;
 
@@ -49,8 +50,12 @@ package
 
 			label.text = "Hello World";
 
+
 			var button:PushButton = new PushButton(vbox);
-			button.label = "Push me";
+			button.skinClass = com.dgrigg.skins.ButtonImageSkin;
+			button.label = "Push me to";
+			//vbox.addChild(button);
+
 
 			var checkbox:CheckBox = new CheckBox(vbox);
 			checkbox.label = "Check me";

src/SkinMarkupDemo.mxml

@@ -41,7 +41,7 @@ THE SOFTWARE.
 		<bit101:HSlider  height="20" width="100" y="110"/>
 		<bit101:Text height="20" width="100" y="150" text="Hello World"/>
 	</comp:Container>	
-
+	<!--
 	<comp:Container x="150" y="0" height="400">
 		<bit101:Label text="Drawing API Skins"/>
 		<bit101:PushButton label="Test Button" width="100" height="20" y="30" skinClass="com.dgrigg.skins.ButtonSkin"/>
@@ -58,6 +58,7 @@ THE SOFTWARE.
 		<bit101:HSlider height="20" width="100" y="110" skinClass="com.dgrigg.skins.HSliderImageSkin" horzGutter="-5"/>
 		<bit101:Text height="20" width="100" y="150" text="Hello World" skinClass="com.dgrigg.skins.TextImageSkin"/>		
 	</comp:Container>
+	-->
 
 
 </comp:Application>

src/com/bit101/components/Component.as

@@ -35,6 +35,7 @@ package com.bit101.components
 {
 	import com.dgrigg.minimalcomps.events.SkinPartEvent;
 	import com.dgrigg.minimalcomps.skins.Skin;
+	import com.dgrigg.utils.Logger;
 
 	import flash.display.DisplayObject;
 	import flash.display.DisplayObjectContainer;
@@ -44,8 +45,6 @@ package com.bit101.components
 	import flash.display.StageScaleMode;
 	import flash.events.Event;
 	import flash.filters.DropShadowFilter;
-
-	import com.dgrigg.utils.Logger;
 
 	public class Component extends Sprite
 	{
@@ -69,6 +68,7 @@ package com.bit101.components
 		protected var _enabled:Boolean = true;
 
 		protected var _skin:Skin;
+		protected var _added:Boolean = false;
 
 		public static const DRAW:String = "draw";
 
@@ -101,6 +101,12 @@ package com.bit101.components
 		public function set skinClass (cls:Class):void 
 		{
 			_skinClass = cls;
+
+			if (_added)
+			{
+				skin = new skinClass();
+			}
+
 		}
 
 		public function get skinClass():Class
@@ -113,6 +119,7 @@ package com.bit101.components
 			//wait until component is added to stage to skin it
 			if (skinClass)
 			{
+				_added = true;
 				skin = new skinClass();
 			}
 

src/com/dgrigg/components/Application.as

@@ -28,9 +28,12 @@
  */
 package com.dgrigg.components
 {
-	import flash.display.DisplayObjectContainer;
 	import com.bit101.components.Component;
 
+	import flash.display.DisplayObjectContainer;
+	import flash.events.Event;
+
+
 	public class Application extends Container
 	{
 		public function Application()

src/com/dgrigg/skins/TextImageSkin.mxml

@@ -89,7 +89,7 @@ THE SOFTWARE.
 
 	<text:TextField id="tf" x="2" y="2" embedFonts="true">
 		<text:defaultTextFormat>
-			<text:TextFormat size="{Style.fontSize}" color="{Style.LABEL_TEXT}" font="{Style.fontName}" />
+			<text:TextFormat size="8" color="0x666666" font="PF Ronda Seven" />
 
 		</text:defaultTextFormat>
 	</text:TextField>