Table of contents
- How to skin a container with padding in Flex 4 SDK – Spark
- How to skin a button with icon in Flex 4 SDK – spark
- How to transfer values from a Spark component to a skin part in Flex SDK 4
Sometimes you need to pass values from components to skin, for example having a dynamic layout. Using Flex sdk 4 you can transfer values using content property of the hostComponent ({hostComponent.content}).
I made a small example that use hostComponent.content, changing the values of HSliders the colors of the component will be changed.
So in mxml file you have to set the value for content property, that is an Object:
<fx:Script> <![CDATA[ import com.flexer.skin.ContentButtonSkin; import mx.utils.ObjectProxy; [Bindable] public var colors:ObjectProxy = new ObjectProxy(); ]]> </fx:Script> <s:Button width="380" height="40" label="my custom button" skinClass="com.flexer.skin.ContentButtonSkin" content="{colors}" />
Into skin file you can use it like this:
<s:HGroup left="1" right="1" top="1" bottom="1" gap="0"> <s:Rect width="33%" height="100%"> <s:fill> <s:SolidColor color="{hostComponent.content.leftColor}"/> </s:fill> </s:Rect> <s:Rect width="34%" height="100%"> <s:fill> <s:SolidColor color="{hostComponent.content.centerColor}"/> </s:fill> </s:Rect> <s:Rect width="33%" height="100%"> <s:fill> <s:SolidColor color="{hostComponent.content.rightColor}"/> </s:fill> </s:Rect> </s:HGroup>
Please see attached project for a closer look.
| ||
|
Tags: class, component, flex sdk 4, Skin, Spark
This post was written by Stelian Crisan
Views: 11927
Articles
Thanks!
Now passing value between host and skin component is much easy!
and thanks for introducing ObjectProxy. Never know that Flex has such thing
Unfortunately not all components contain this property. IE Spark Image. Is there a way to define a style in a skin and have the style available to MXML?
For example, in my skin I added:
<code>
<fx:Metadata>
<![CDATA[
[HostComponent("spark.components.Image")]
[Style(name="cornerRadius", inherit="inherit", type="int")]
]]>
</fx:Metadata>
</code>
I would expect that style to exposed in components that use this skin. So I could do something like this:
<code>
<s:Image x=”10″ y=”30″ width=”50″ cornerRadius=”12″ skinClass=”ScaleImageSkin” height=”50″ source=”avatar.png”/>
</code>
However the style “cornerRadius” does not show up in code hinting and in fact throws an error at compile time.
Thank you! Thanks you! Thank you! Sweet 3 wasted hours of my life I’ll never get back thank you!!!