Adding a border to a group in run time in flex

Question

i am trying to make a group of spark type in flex at runtime.i am making a couple of buttons as children of this group in runtime. i want to add border to all group. however when i use border container it hides all other children and the stuff in group container and only shows the border container screen. How can i add border to group.

Note that i am adding the border container as a child of group container in run time.

best regards

Answer 1

You can add a s:Rect child at particular index acting as a border.

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
           xmlns:s="library://ns.adobe.com/flex/spark" 
           xmlns:mx="library://ns.adobe.com/flex/mx">

<fx:Script>
    <![CDATA[
        import mx.graphics.SolidColorStroke;

        import spark.primitives.Rect;

        protected function addNewBorderButtonClick(event:MouseEvent):void
        {
            var borderRect:Rect = new Rect();
            var solidStroke:SolidColorStroke = new SolidColorStroke(0, 3);
            borderRect.stroke = solidStroke;
            borderRect.percentWidth = borderRect.percentHeight = 100;

            targetGroup.addElementAt(borderRect, 0);
        }
    ]]>
</fx:Script>

<fx:Declarations>
</fx:Declarations>

<s:Group id="targetGroup" 
         width="100" height="100"
         horizontalCenter="0" verticalCenter="0">
    <!-- some visual elements here -->
    <s:Button id="addNewBorderButton" 
              label="Add Border"
              horizontalCenter="0" verticalCenter="0"
              click="addNewBorderButtonClick(event)" />
</s:Group>
</s:Application>

Hope this helps,

Blaze