<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
		>
<channel>
	<title>Comments on: Building Custom Components in Flex 4: SkinParts</title>
	<atom:link href="http://blog.digitalbackcountry.com/2009/07/building-custom-components-in-flex-4-skinparts/feed/" rel="self" type="application/rss+xml" />
	<link>http://blog.digitalbackcountry.com/2009/07/building-custom-components-in-flex-4-skinparts/</link>
	<description>Ryan Stewart on the Flash Platform</description>
	<lastBuildDate>Sat, 13 Mar 2010 23:53:09 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.2</generator>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
		<item>
		<title>By: Lee Probert</title>
		<link>http://blog.digitalbackcountry.com/2009/07/building-custom-components-in-flex-4-skinparts/comment-page-1/#comment-111160</link>
		<dc:creator>Lee Probert</dc:creator>
		<pubDate>Wed, 29 Jul 2009 11:36:04 +0000</pubDate>
		<guid isPermaLink="false">http://blog.digitalbackcountry.com/?p=1984#comment-111160</guid>
		<description>Hi again Ryan. I&#039;ve been trying to make a custom HSlider for a volume control and hacking into the Spark VideoScrubBar component gave me the code I need to add the extra Skin part for displaying the volume bar in the same way as the Scrub displays the played area. Unfortunately when I add the metadata ... [SkinPart(required=&quot;false&quot;)] ... to allow the box to be rendered in the skin and override all the methods it suddenly stops my thumb and track from being clickable/draggable. If I comment out the metadata it&#039;s fine.

Here&#039;s the class ...

package com.gower.amway.components
{
	import mx.core.IVisualElement;
	import flash.display.DisplayObject;
	import flash.display.DisplayObjectContainer;
	import flash.display.InteractiveObject;
	import flash.events.Event;
	
	import spark.components.HSlider;

	public class VolumeHSlider extends HSlider
	{
		[SkinPart(required=&quot;false&quot;)]
	    public var volumeArea:IVisualElement;
	    
	    private var tempTrackSize:Number = NaN;
	    
	    
		public function VolumeHSlider()
		{
			super();
		}
	    
	   	override protected function partAdded(partName:String, instance:Object):void
	    {
	        super.partAdded(partName, instance);
	        
	        if (instance == volumeArea)
	        {
	            if (volumeArea is InteractiveObject)
	                InteractiveObject(volumeArea).mouseEnabled = false;
	            if (volumeArea is DisplayObjectContainer)
	                DisplayObjectContainer(volumeArea).mouseChildren = false;
	            
	            invalidateDisplayList();
	        }
	        else if (instance == track)
        	{
            	tempTrackSize = NaN;                                      
        	}
    	}
    	
	    override protected function updateDisplayList(unscaledWidth:Number, 
	                                                  unscaledHeight:Number):void
	    {
	        super.updateDisplayList(unscaledWidth, unscaledHeight);
	
	        sizeVolumeArea(valueToPosition(value) + thumbSize);
	    }
	    
	    override protected function track_updateCompleteHandler(event:Event):void
	    {
	        super.track_updateCompleteHandler(event);
	        
	        if (trackSize != tempTrackSize)
	        {
	            sizeVolumeArea(valueToPosition(value) + thumbSize);
	            tempTrackSize = trackSize;
	        }
	    }
	    
	    protected function sizeVolumeArea(volumeAreaSize:Number):void
	    {
	        if (volumeArea)
	            DisplayObject(volumeArea).width = Math.round(volumeAreaSize);
	    }
	}
}</description>
		<content:encoded><![CDATA[<p>Hi again Ryan. I&#8217;ve been trying to make a custom HSlider for a volume control and hacking into the Spark VideoScrubBar component gave me the code I need to add the extra Skin part for displaying the volume bar in the same way as the Scrub displays the played area. Unfortunately when I add the metadata &#8230; [SkinPart(required="false")] &#8230; to allow the box to be rendered in the skin and override all the methods it suddenly stops my thumb and track from being clickable/draggable. If I comment out the metadata it&#8217;s fine.</p>
<p>Here&#8217;s the class &#8230;</p>
<p>package com.gower.amway.components<br />
{<br />
	import mx.core.IVisualElement;<br />
	import flash.display.DisplayObject;<br />
	import flash.display.DisplayObjectContainer;<br />
	import flash.display.InteractiveObject;<br />
	import flash.events.Event;</p>
<p>	import spark.components.HSlider;</p>
<p>	public class VolumeHSlider extends HSlider<br />
	{<br />
		[SkinPart(required="false")]<br />
	    public var volumeArea:IVisualElement;</p>
<p>	    private var tempTrackSize:Number = NaN;</p>
<p>		public function VolumeHSlider()<br />
		{<br />
			super();<br />
		}</p>
<p>	   	override protected function partAdded(partName:String, instance:Object):void<br />
	    {<br />
	        super.partAdded(partName, instance);</p>
<p>	        if (instance == volumeArea)<br />
	        {<br />
	            if (volumeArea is InteractiveObject)<br />
	                InteractiveObject(volumeArea).mouseEnabled = false;<br />
	            if (volumeArea is DisplayObjectContainer)<br />
	                DisplayObjectContainer(volumeArea).mouseChildren = false;</p>
<p>	            invalidateDisplayList();<br />
	        }<br />
	        else if (instance == track)<br />
        	{<br />
            	tempTrackSize = NaN;<br />
        	}<br />
    	}</p>
<p>	    override protected function updateDisplayList(unscaledWidth:Number,<br />
	                                                  unscaledHeight:Number):void<br />
	    {<br />
	        super.updateDisplayList(unscaledWidth, unscaledHeight);</p>
<p>	        sizeVolumeArea(valueToPosition(value) + thumbSize);<br />
	    }</p>
<p>	    override protected function track_updateCompleteHandler(event:Event):void<br />
	    {<br />
	        super.track_updateCompleteHandler(event);</p>
<p>	        if (trackSize != tempTrackSize)<br />
	        {<br />
	            sizeVolumeArea(valueToPosition(value) + thumbSize);<br />
	            tempTrackSize = trackSize;<br />
	        }<br />
	    }</p>
<p>	    protected function sizeVolumeArea(volumeAreaSize:Number):void<br />
	    {<br />
	        if (volumeArea)<br />
	            DisplayObject(volumeArea).width = Math.round(volumeAreaSize);<br />
	    }<br />
	}<br />
}</p>
]]></content:encoded>
	</item>
	<item>
		<title>By: thivy</title>
		<link>http://blog.digitalbackcountry.com/2009/07/building-custom-components-in-flex-4-skinparts/comment-page-1/#comment-110333</link>
		<dc:creator>thivy</dc:creator>
		<pubDate>Sun, 26 Jul 2009 21:20:40 +0000</pubDate>
		<guid isPermaLink="false">http://blog.digitalbackcountry.com/?p=1984#comment-110333</guid>
		<description>yeh i made a skin for the same reason.. let me know what u think 
http://www.thivy.com/blog/index.php/archive/flash-builder-iphone-skin/</description>
		<content:encoded><![CDATA[<p>yeh i made a skin for the same reason.. let me know what u think<br />
<a href="http://www.thivy.com/blog/index.php/archive/flash-builder-iphone-skin/" rel="nofollow">http://www.thivy.com/blog/index.php/archive/flash-builder-iphone-skin/</a></p>
]]></content:encoded>
	</item>
	<item>
		<title>By: Lee Probert</title>
		<link>http://blog.digitalbackcountry.com/2009/07/building-custom-components-in-flex-4-skinparts/comment-page-1/#comment-110291</link>
		<dc:creator>Lee Probert</dc:creator>
		<pubDate>Sun, 26 Jul 2009 15:11:00 +0000</pubDate>
		<guid isPermaLink="false">http://blog.digitalbackcountry.com/?p=1984#comment-110291</guid>
		<description>Hey Ryan. I want to build a &#039;PagedList&#039; component but am unsure whether to control the paging aspect of it within the skin in a custom Layout class. What do you think?</description>
		<content:encoded><![CDATA[<p>Hey Ryan. I want to build a &#8216;PagedList&#8217; component but am unsure whether to control the paging aspect of it within the skin in a custom Layout class. What do you think?</p>
]]></content:encoded>
	</item>
</channel>
</rss>
