explorers' club

explorations in dev, science, sci-fi, games, and other fun stuff!

Propagating Changes from Spark’s Skinnable Component to Skin

2 Comments

preface

I will not be discussing the pros/cons of a Spark skin containing “awareness” of its host component’s properties.  That falls into a more in-depth “best practices” discussion to be discussed at a later time.

[note to self]

One way to propagate changes from the SkinnableComponent to the Skin and still leverage the Flex framework’s invalidation mechanisms is to simply update your property and then call invalidateDisplayList.  Override your updateDisplayList call in the Skin and fetch the needed values.  For this example the particular skin I was creating needed to create a mask whose width was based on a particular value.  Seeing as this logic was particular to the skin, I decided to move the logic into the skin rather than the component itself.

hostComponent code

public function set volume(value:Number):void
{
	if (value != _volume)
	{
		_volume = value;
		_volValue = _volume < 0 ? 0 : _volume > 1 ? 1 : _volume; //limit betw 0 & 1

		bVolumeChanged = true;

		invalidateProperties();

                if (skin)
                {
                            skin.invalidateProperties();
                            skin.invalidateDisplayList();
                }
	}
}

Advertisements

2 thoughts on “Propagating Changes from Spark’s Skinnable Component to Skin

  1. From what I understand, this won’t work if your hostComponent property new value have no influence on the skin size.

    I’ve already seen this case multiple times and I had to call skin.invalidateDisplayList() in the hostComponent instead of this.invalidateDisplayList()

  2. @florian
    You are correct sir. The setActualSize will only trigger a displayList invalidation if a resize has occurred. I had not learned of the skin API until after I posted. The post has been updated to reflect your comment. Thanks for the input.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s