Не включать размер компонента в меру

Question

У меня есть пользовательский компонент, который в основном представляет собой VBox с Label и TextField.

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

То, что я хочу, в основном, это чтобы два из этих VBox были размещены на HBox, и каждый занял бы ровно 50% - их дети Label и TextField должны просто подчиняться этому.

Если я установил ширину Label и TextField на 100%, а текст Label не помещается, поведение по умолчанию заключается в увеличении ширины VBox - я этого не хочу произойдет. TextField всегда должен занимать 100% ширины, и я бы хотел, чтобы Label был явно установлен на ширину TextField, чтобы текст был обрезан и не увеличивал ширину VBox.

Есть ли какой-нибудь способ указать Метке просто подчиняться ширине VBox (или TextField) и не включаться в измерение ширины VBox?

Не уверен, что со мной все ясно. :) Заранее спасибо.

Answer 1

это было не так просто, как я думал. В начале я хотел предложить maxWidth, но он не работает правильно с меткой. Однако я только что проверил это:

<?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>

Возможно, оно написано не так (просто приписано), как вы ожидали, но оно делает то, что вам нужно Если это не решение, вы можете подумать о расширении ярлыка следующим образом. Крит настраиваемая метка:

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) ? "..." : "");
            }
        }
    }
}

И используйте это так:

<?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>

Это можно использовать просто с привязкой. Как только вы введете очень длинный текст в поле ввода текста и появится надпись ... нажмите на кнопку. Вы заметите, что метод get text () возвращает исходный текст.

Надеюсь, это поможет.