Bordure Flex VBox

Question

Comment ajouter une bordure à un Flex VBox? Mon VBox est le moteur de rendu d'un List. Je l'ai essayé ce qui suit sans succès (en particulier 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

Il n'y a pas de style borderVisible ou bien sur les classes Container Flex. Pour voir une bordure, vous devez définir les styles borderStyle, borderColor et borderThickness.

Essayez les styles suivants pour votre 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 est rien dans Flex, utilisez borderStyle = solide, borderThickness et borderColor attribue à montrer frontière

Answer 3

Et en actionscript 3:

private var _vbox:VBox; 

... 

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