Setting the border thickness in a Flex Panel container

The following example shows how you can set the border thickness of each edge (left, right, top, and bottom) separately on a Panel container in Flex by setting the borderThicknessLeft, borderThicknessRight, borderThicknessTop, and borderThicknessBottom styles.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/01/12/setting-the-border-thickness-in-a-flex-panel-container/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        .nakedButton {
            skin: ClassReference(null);
        }
    </mx:Style>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="borderThicknessLeft:"
                    direction="horizontal">
                <mx:HSlider id="sliderLeft"
                        minimum="0"
                        maximum="50"
                        value="10"
                        snapInterval="1"
                        tickInterval="10"
                        liveDragging="true" />
                <mx:Label text="{sliderLeft.value}" />
            </mx:FormItem>
            <mx:FormItem label="borderThicknessRight:"
                    direction="horizontal">
                <mx:HSlider id="sliderRight"
                        minimum="0"
                        maximum="50"
                        value="10"
                        snapInterval="1"
                        tickInterval="10"
                        liveDragging="true" />
                <mx:Label text="{sliderRight.value}" />
            </mx:FormItem>
            <mx:FormItem label="borderThicknessTop:"
                    direction="horizontal">
                <mx:HSlider id="sliderTop"
                        minimum="0"
                        maximum="50"
                        value="0"
                        snapInterval="1"
                        tickInterval="10"
                        liveDragging="true" />
                <mx:Label text="{sliderTop.value}" />
            </mx:FormItem>
            <mx:FormItem label="borderThicknessBottom:"
                    direction="horizontal">
                <mx:HSlider id="sliderBottom"
                        minimum="0"
                        maximum="50"
                        value="10"
                        snapInterval="1"
                        tickInterval="10"
                        liveDragging="true" />
                <mx:Label text="{sliderBottom.value}" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:Panel id="panel"
            title="The quick brown fox jumped over the lazy dog."
            borderThicknessLeft="{sliderLeft.value}"
            borderThicknessRight="{sliderRight.value}"
            borderThicknessTop="{sliderTop.value}"
            borderThicknessBottom="{sliderBottom.value}"
            layout="absolute"
            width="100%" height="100%">

        <mx:Button label="borderThicknessLeft"
                labelPlacement="right"
                icon="@Embed('assets/arrow_left.png')"
                styleName="nakedButton"
                left="0"
                verticalCenter="0"
                toolTip="{sliderLeft.value}"
                errorString="{sliderLeft.value}" />

        <mx:Button label="borderThicknessRight"
                labelPlacement="left"
                icon="@Embed('assets/arrow_right.png')"
                styleName="nakedButton"
                right="0"
                verticalCenter="0" />

        <mx:Button label="borderThicknessTop"
                labelPlacement="bottom"
                icon="@Embed('assets/arrow_up.png')"
                styleName="nakedButton"
                top="0"
                horizontalCenter="0" />

        <mx:Button label="borderThicknessBottom"
                labelPlacement="top"
                icon="@Embed('assets/arrow_down.png')"
                styleName="nakedButton"
                bottom="0"
                horizontalCenter="0" />

    </mx:Panel>

</mx:Application>

View source is enabled in the following example.

Tagged as: borderThicknessBottom, borderThicknessLeft, borderThicknessRight, borderThicknessTop