Flex 4 Panel Border Skin

Question

I'm trying to create a skin for a Flex 4 spark Panel that will create a border on the left/right side of the panel that matches the header of the Panel. Basically a silver frame all the way around the edge of the Panel similar to the old Flex 3 mx:Panel. I've been experimenting with a skin file all day and can't get anything to work. Any ideas?

Answer 1

I threw something together real fast. Create a Skin based on the existing PanelSkin. Then go find the group with id="contentGroup". Change it to something like this:

        <s:Group  width="100%" height="100%" minWidth="0" minHeight="0">
            <s:Line stroke="{wrapperStroke}" top="0" left="0" bottom="{0}" yFrom="0" yTo="{this.height}" xFrom="0" xTo="0"/>
            <s:Line stroke="{wrapperStroke}" top="0" right="0" bottom="{0}" yFrom="0" yTo="{this.height}" xFrom="0" xTo="0"/>
            <s:Group id="contentGroup">
            </s:Group>
        </s:Group>

Then all you need to do is move your contentGroup away from the edges and give the stroke a color and weight. So, head to the updateDisplayList in the skin and add some code like:

        wrapperStroke.color = 0xD9D9D9;
        wrapperStroke.alpha = 1.0;
        wrapperStroke.caps = CapsStyle.SQUARE;

        wrapperStroke.weight = 3;
        contentGroup.top = 3;
        contentGroup.bottom = 3;
        contentGroup.left = 3;
        contentGroup.right = 3;

Also just put your wrapperStroke in a Declarations area like so:

<fx:Declarations>
    <s:SolidColorStroke id="wrapperStroke" />
</fx:Declarations> 

I hardcoded everything but you should be able to easily get them as Styles. Your PanelSkin should now look like this. I increased the weight of the stroke so it's easier to see.