Ne pas inclure la taille du composant dans la mesure

Question

J'ai un composant personnalisé qui est fondamentalement un VBox avec un Label et un TextField.

<mx:VBox width="50%"> 
    <mx:Label width="100%"/> 
    <mx:TextField width="100%"/> 
</mx:VBox> 

Ce que je veux, au fond, est d'avoir deux de ces VBox es aménagé sur une HBox et chacun prendrait exactement 50% - leurs enfants Label et TextField doivent simplement obéir à cela.

Si je mets à la fois Label et la largeur de TextField-100%, et le texte Label ne correspond pas, le comportement par défaut est de la largeur VBox étend - Je ne veux pas que cela se produise. Le TextField devrait toujours prendre 100% de la largeur, et je voudrais que le Label soit explicitement fixé à la largeur du TextField, donc le texte serait tronqué et ne pas développer la largeur de la VBox.

Existe-t-il un moyen d'indiquer à l'étiquette d'obéir à la largeur VBox (ou TextField) et de ne pas être inclus dans la mesure de la largeur VBox?

Je ne sais pas si j'étais clair. :) Merci d'avance.

Answer 1

ce n'était pas si simple que je le pensais. Au début, je voulais suggérer maxWidth mais cela ne fonctionne pas correctement avec l'étiquette. Cependant, je viens de tester ceci:

<?xml version="1.0" encoding="utf-8"?> 
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml"> 
    <mx:Script> 
     <![CDATA[ 
      import mx.controls.TextInput; 
      import mx.controls.Label; 
      private function onTextChanged(event:Event):void { 
       var currentText:String = TextInput(event.target).text; 
       var shortened:Boolean = false; 
       // adding 30 to leave some space for ... 
       while (lbl.measureText(currentText).width > (lbl.width-30)) { 
        currentText = currentText.substr(0,currentText.length-1); 
        shortened = true; 
       } 
       lbl.text = currentText + ((shortened) ? "..." : ""); 
      } 
     ]]> 
    </mx:Script> 
    <mx:VBox width="50%"> 
     <mx:Label id="lbl" width="100%" /> 
     <mx:TextInput width="100%" change="onTextChanged(event);" /> 
    </mx:VBox> 
</mx:WindowedApplication> 

Il est sans doute pas écrit d'une manière (juste attribué) que vous attendiez, mais il fait ce que vous avez besoin. Si ce n'est pas une solution, vous pouvez envisager d'étendre l'étiquette de la manière suivante. Crete custom Label:

radekg/MyLabel.as

package radekg { 
    import mx.controls.Label; 

    public class MyLabel extends Label { 
     public function MyLabel() { 
      super(); 
     } 

     private var _myText:String; 

     override public function get text():String { 
      return _myText; 
     } 

     override public function set text(value:String):void { 
      if (value != null && initialized) { 
       // store the copy so the getter returns original text 
       _myText = value; 
       // shorten: 
       var shortened:Boolean = false; 
       while (measureText(value).width > (width-30)) { 
        value = value.substr(0,value.length-1); 
        shortened = true; 
       } 
       super.text = value + ((shortened) ? "..." : ""); 
      } 
     } 
    } 
} 

et de l'utiliser comme ça:

<?xml version="1.0" encoding="utf-8"?> 
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" 
    xmlns:controls="radekg.*"> 
    <mx:VBox width="50%"> 
     <controls:MyLabel width="100%" id="lbl" text="{ti.text}" /> 
     <mx:TextInput width="100%" id="ti" /> 
     <mx:Button label="Display label text" click="mx.controls.Alert.show(lbl.text)" /> 
    </mx:VBox> 
</mx:WindowedApplication> 

Cela peut être utilisé simplement avec une liaison. Une fois que vous avez tapé du texte très long dans la saisie de texte et que l'étiquette s'affiche ... cliquez sur le bouton. Vous remarquerez que getter text() renvoie le texte original.

Espérons que cela aide.