Flex VBox border

Question

How do I add a border to a Flex VBox? My VBox is the renderer of a List. I've tried the following without success (in particular VBox's borderVisible="true" borderStyle="solid" borderColor="0x888888"):

 <mx:List id="myList" dataProvider="{myData}"
     width="100%" height="100%"
     variableRowHeight="true"
     verticalScrollPolicy="auto" horizontalScrollPolicy="auto">
     <mx:itemRenderer>
         <mx:Component>
             <mx:VBox
                 width="100%" height="100%"
                 verticalScrollPolicy="off" horizontalScrollPolicy="off"
                 borderVisible="true" borderStyle="solid" borderColor="0x888888">
                 <mx:HBox width="100%">
                     <mx:Label id="firstNameLabel" text="{data.firstName}"/>
                     <mx:Label id="lastNameLabel" text="{data.lastName}"/>
                 </mx:HBox>
                 <mx:Text id="descriptionLabel" text="{data.description}"/>
             </mx:VBox>
         </mx:Component>
     </mx:itemRenderer>
 </mx:List>

Answer 1

There is no borderVisible style or property on the Flex Container classes.

To see a border you need to set the borderStyle, borderColor and borderThickness styles.

Try the following styles for your VBox:

         <mx:VBox
             borderThickness="1" borderStyle="solid" borderColor="0x888888" ...>

             ...

         </mx:VBox>

Answer 2

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
    <![CDATA[
        import mx.collections.ArrayCollection;
        private var myData:ArrayCollection = new ArrayCollection([
            {label:'a11',url: '../dol/assets/images/lalign.png', side:'left'},
            {label:'a323',url: '../dol/assets/images/calign.png', side:'center'},
            {label:'asdf45',url: '../dol/assets/images/ralign.png', side:'right'}]);
        ]]>
</mx:Script>
    <mx:List id="myList" dataProvider="{myData}"
     width="100%" height="100%"
     variableRowHeight="true"
     verticalScrollPolicy="auto" horizontalScrollPolicy="auto">
     <mx:itemRenderer>
         <mx:Component>
             <mx:VBox width="100%" height="100%"
                 verticalScrollPolicy="off" horizontalScrollPolicy="off"
                 borderStyle="solid" borderColor="0x888888" borderThickness="3">
                 <mx:HBox width="100%">
                     <mx:Label id="firstNameLabel" text="{data.label}"/>
                     <mx:Label id="lastNameLabel" text="{data.url}"/>
                 </mx:HBox>
                 <mx:Text id="descriptionLabel" text="{data.side}"/>
             </mx:VBox>
         </mx:Component>
     </mx:itemRenderer>
 </mx:List>
</mx:Application>

borderVisible is nothing in flex, use borderStyle=solid, borderThickness, and borderColor attributes to show border

Answer 3

And in actionscript 3:

private var _vbox:VBox;

...

this._vbox.setStyle("borderThickness", "1");
this._vbox.setStyle("borderStyle", "solid");
this._vbox.setStyle("borderColor", "0x888888");