Flex 4, Set variable in component skin from component

Question

Given a custom component based on SkinnableContainer, how can I set values in the skin at runtime? Specifically, it is a whiteboard component with maxWidth and maxHeight values that indicate the smallest shared width/height of all the whiteboards in the conversation.

[Bindable]
public var maxWhiteBoardWidth:Number;
[Bindable]
public var maxWhiteBoardHeight:Number;

These values are used to draw guidelines on the surface of all the larger whiteboards in the conversation using stroke lines in the skin:

<!-- smallest common denominator boundaries -->
<s:Line left="300" top="0" bottom="0">
    <s:stroke>
        <s:SolidColorStroke weight="1" color="0xFFFFFF" />
    </s:stroke>
</s:Line>

<s:Line top="300" left="0"  right="0">
    <s:stroke>
        <s:SolidColorStroke weight="1" color="0xFFFFFF" />
    </s:stroke>
</s:Line>

The value of 300 in the top and left attributes of s:Line should not be hard-coded into the skin. They should reflect the changing values of maxWhiteBoardWidth/maxWhiteBoardHeight from the component.

I am setting the skin using the skinClass attribute in MXML. Do I need to dynamically load the skin? If so when/how in the lifecycle?

I'm recently coming from Flex 3 so the Spark skinning architecture is still a bit murky. Thanks.

Answer 1

Try:

<s:Line left="{hostComponent.maxWhiteBoardWidth}" top="0" bottom="0">
  ...
</s:Line>
<s:Line top="{hostComponent.maxWhiteBoardHeight}" left="0"  right="0">
  ...
</s:Line>

and make sure you have the metadata directive:

<fx:Metadata>
      <!-- Specify the component that uses this skin class. -->
      [HostComponent("my.component.MyComponent")]
</fx:Metadata>

otherwise your custom properties on the component will not be exposed to the skin properly.