Setting the border thickness in a Flex Panel container

By Peter deHaan On January 12, 2008 · 7 Comments

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.

<?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 name="Panel_borderThicknessLeft_test"
        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 with: • • •
 
About The Author

Peter deHaan

Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.

Visit Authors Website →

  • Add Widgets (Content Sidebar)

    This is your Content Sidebar. Edit this content that appears here in the widgets panel by adding or removing widgets in the Content Sidebar area.

Share
Facebook Twitter

7 Responses to Setting the border thickness in a Flex Panel container

  1. radek says:
    March 2, 2009 at 10:31 am

    I try to set ‘-’ value, and its work :) for example borderThicknessTop=”-10″ !

    Reply
    • Brian says:
      July 16, 2010 at 11:17 am

      Hi Radek

      There e is a side effect to using negative values.
      As the panels top border is reduced, it overlaps the actual panel itself, and in my case, mouse events at the top
      of the panel stopped being triggered. Took me ages to figure out until I increased the top border value (strange but true!!).

      Brian

      Reply
  2. flexet says:
    March 17, 2010 at 3:01 am

    Thanks for this example. Saved time :)

    Reply
  3. Sankara narayanan says:
    August 26, 2010 at 1:17 am

    Hi Peter,
    I have set borders gor my grid items.
    But when i resize the application, the border also got resized.
    (in some cases the border disappears too ! I thought , the grid items got overlapped !! But it is not actually.)
    How can i avoid this ?
    My code goes like :

    <?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
                layout="vertical" xmlns:Test="Test.*" 
                xmlns:components="components.*" backgroundColor="#FFFFFF">
 
    <mx:Style>
 
        .myGridItem
        {
            background-color : #F1F7F3;
            border-color: #70B794;
            border-sides : right,bottom;
            border-style :solid;
            border-thickness : 1;
            color: #000000;
            vertical-align : middle;
        }
 
    </mx:Style>
 
    <mx:Grid width="100%" horizontalGap="0" verticalGap="0">
        <mx:GridRow width="100%">
            <mx:GridItem width="14%" styleName="myGridItem">
                <mx:Text text="DATE VALUE"/>
            </mx:GridItem>
            <mx:GridItem width="36%" styleName="myGridItem">
                <mx:Text text="DATE VALUE"/>
            </mx:GridItem>
            <mx:GridItem width="14%" styleName="myGridItem">
                <mx:Text text="AMOUNT VALUE"/>
            </mx:GridItem>
            <mx:GridItem width="36%" styleName="myGridItem">
                <mx:Text text="AMOUNT VALUE"/>
            </mx:GridItem>
        </mx:GridRow>
        <mx:GridRow width="100%">
            <mx:GridItem width="14%" styleName="myGridItem">
                <mx:Text text="DATE VALUE"/>
            </mx:GridItem>
            <mx:GridItem width="36%" styleName="myGridItem">
                <mx:Text text="DATE VALUE"/>
            </mx:GridItem>
            <mx:GridItem width="14%" styleName="myGridItem">
                <mx:Text text="AMOUNT VALUE"/>
            </mx:GridItem>
            <mx:GridItem width="36%" styleName="myGridItem">
                <mx:Text text="AMOUNT VALUE"/>
            </mx:GridItem>
        </mx:GridRow>
        <mx:GridRow width="100%">
            <mx:GridItem width="14%" styleName="myGridItem">
                <mx:Text text="DATE VALUE"/>
            </mx:GridItem>
            <mx:GridItem width="36%" styleName="myGridItem">
                <mx:Text text="DATE VALUE"/>
            </mx:GridItem>
            <mx:GridItem width="14%" styleName="myGridItem">
                <mx:Text text="AMOUNT VALUE"/>
            </mx:GridItem>
            <mx:GridItem width="36%" styleName="myGridItem">
                <mx:Text text="AMOUNT VALUE"/>
            </mx:GridItem>
        </mx:GridRow>
        <mx:GridRow width="100%">
            <mx:GridItem width="14%" styleName="myGridItem">
                <mx:Text text="DATE VALUE"/>
            </mx:GridItem>
            <mx:GridItem width="36%" styleName="myGridItem">
                <mx:Text text="DATE VALUE"/>
            </mx:GridItem>
            <mx:GridItem width="14%" styleName="myGridItem">
                <mx:Text text="AMOUNT VALUE"/>
            </mx:GridItem>
            <mx:GridItem width="36%" styleName="myGridItem">
                <mx:Text text="AMOUNT VALUE"/>
            </mx:GridItem>
        </mx:GridRow>
    </mx:Grid>
 
</mx:Application>

    Thanks in advance.
    Reagrds,
    Sankara narayanan Ekambaranathan.

    Reply
  4. Sankara narayanan says:
    August 27, 2010 at 1:59 am

    @Peter,
    Will file a bug soon.
    Thanks.
    Reagrds,
    Sankara narayanan Ekambaranathan.

    Reply
  5. Demmie says:
    October 17, 2011 at 9:37 am

    thanks a ton for this example.

    Reply

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

Anti-Spam Protection by WP-SpamFree