Flex VBox бордюр

Question

Как добавить рамку в Flex VBox?Мой VBox является рендерером List.Я пробовал следующее безуспешно (в частности VBox 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

В классах контейнера Flex нет стиля или свойства borderVisible.

Чтобы увидеть рамку, вам нужно установить стили borderStyle, borderColor и borderThickness.

Попробуйте следующие стили для своего VBox:

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

             ...

         </mx:VBox>

Answer 2

А в actionScript 3:

private var _vbox:VBox;

...

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

Answer 3

<?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 - это ничто во flex, используйте атрибуты borderStyle = solid, borderThickness и borderColor для отображения границы