Flex-контейнер с плавающим HTML-стилем - PullRequest
0 голосов
/ 20 июля 2011

Я использую Flex 4 с компонентами Spark для создания мобильного приложения, и у меня есть HGroup, которую я использую для хранения всех своих элементов.Когда экран загружается, он вытягивает небольшое количество текста, который будет отображаться, и просматривает все слова, чтобы увидеть, является ли какое-либо из них ключевым словом.Пока он зацикливается, я помещаю каждое слово в отдельный элемент метки, и если слово является ключевым словом, оно меняет несколько стилей и добавляет событие щелчка, чтобы отобразить описание слова.

Все работает нормально, но когдавсе добавляется в HGroup, в итоге получается только одна строка, и большая часть текста полностью обрезается, потому что это не будет переносить содержимое.

Мой вопрос: есть ли способ установить или расширить HGroup?разрешить перенос содержимого на его дочерние элементы?

Ниже приведены некоторые фрагменты кода того, что у меня есть:

Контейнеры MXML:

<s:VGroup id="answerData" width="580" height="700" horizontalAlign="center" paddingTop="5">
<s:HGroup id="theLabel" color="white" width="580" fontSize="25" paddingBottom="20" />
<s:HGroup id="theText" color="white" width="580" fontSize="25" maxWidth="580" />
</s:VGroup>

КАК создавать метки:

public static function setKeyWords(someText:String, theGroup:Group, theDictionary:Array, theView:Object):void {
        theGroup.removeAllElements();
        var textArray:Array = someText.split(' ');
        for(var i:int = 0, l:int = textArray.length; i < l; i++) {
            if(checkForWord(theDictionary, textArray[i].toString())) {
                var theLink:Label = new Label();
                theLink.text = textArray[i].toString();
                theLink.setStyle("color", "0xFFFF00");
                theLink.setStyle("fontWeight", "bold");
                theLink.maxWidth = 580;
                var tmpDescrip:String = theDescription;
                theLink.addEventListener(MouseEvent.CLICK, function(evt:MouseEvent):void {
                    showToolTip(tmpDescrip, theView);
                });
                theGroup.addElement(theLink);
            } else {
                var someLabel:Label = new Label();
                someLabel.maxWidth = 580;
                someLabel.text = textArray[i].toString();
                theGroup.addElement(someLabel);
            }
        }
    }

Ответы [ 3 ]

2 голосов
/ 05 августа 2011

Проблема, с которой я столкнулся, заключалась в том, что у меня было несколько ярлыков в VGroup, и мне нужно было их обернуть вместо того, чтобы простираться за ширину набора контейнеров. Я пытался интегрировать ключевые слова в динамический абзац текста. Я не мог использовать mx: Text, потому что мне нужно, чтобы каждое слово было отдельным компонентом, который позволял настраивать стили, плюс щелчок мышью, даже если слово было ключевым словом. Также решение для меток max lines не будет работать, потому что я имею дело с несколькими метками в VGroup, и VGroup нужно было обернуть его дочерние элементы, а не теги меток. Я также не мог использовать TileGroup, потому что он выглядит неправильно, разбивая абзац на компонент, выглядящий как таблица, где каждое слово находится в своем собственном столбце / строке.

Решение, которое я использовал, заключалось в подсчете каждого символа в генерируемой метке и добавлении его в переменную, чтобы определить, когда мне нужно создать новую HGroup, которая содержит метки и находится в VGroup. Я должен был сделать это, потому что я не могу определить ширину надписей, пока она не отобразится, потому что она генерируется динамически. Это не может быть сделано, потому что его точка рендеринга слишком поздняя, ​​чтобы я мог переместить все, потому что пользователь может видеть все это, что определенно не является желаемым эффектом.

Ниже приведен код, который я использовал для решения этой проблемы, если кто-то еще сталкивается с этой проблемой:

public static function setKeyWords(someText:String, theGroup:Group, theDictionary:Array, theView:Object):void {
        theGroup.removeAllElements();
        var textArray:Array = someText.split(' ');
        var theCount:int = 0;
        var theHGroup:HGroup = new HGroup();
        var breakNum:int = 40;
        theHGroup.percentWidth = 100;
        for(var i:int = 0, l:int = textArray.length; i < l; i++) {
            theCount += textArray[i].toString().length;
            if(theCount >= breakNum) {
                theGroup.addElement(theHGroup);
                theHGroup = new HGroup();
                theHGroup.percentWidth = 100;
                theCount = 0;
            }
            if(checkForWord(theDictionary, textArray[i].toString())) {
                theCount += 1;
                var theLink:Label = new Label();
                theLink.text = textArray[i].toString();
                theLink.setStyle("color", "0xFFFF00");
                theLink.setStyle("fontWeight", "bold");
                theLink.maxWidth = 580;
                //theLink.includeInLayout = false;
                var tmpDescrip:String = theDescription;
                theLink.addEventListener(MouseEvent.CLICK, function(evt:MouseEvent):void {
                    showToolTip(tmpDescrip, theView, 'keywords');
                });
                theHGroup.addElement(theLink);
            } else {
                theCount += 1;
                var someLabel:Label = new Label();
                someLabel.maxWidth = 580;
                someLabel.text = textArray[i].toString();
                //someLabel.includeInLayout = false;
                theHGroup.addElement(someLabel);
            }
        }
        if(theCount > 0)
            theGroup.addElement(theHGroup);
    }

Возможно, это не самый эффективный способ сделать это, но он работает и занимает мало времени для выполнения на Iphone, к чему я стремился.

0 голосов
/ 20 июля 2011

Если вы хотите, чтобы текст отображался в блоке из нескольких строк, используйте mx: Text с установленной шириной.
Чтобы отобразить что-то выше HGroup, проще всего оставить HGroup в покое и просто сделать прозрачный контейнер (Canvas) над ним.Там вы сможете отобразить что угодно (просто сделайте математические расчеты, чтобы правильно расположить).

0 голосов
/ 20 июля 2011

Не совсем уверен, что понимаю ваш вопрос.

Если вы имеете в виду, что метки усечены, вы можете установить процентную ширину и обернуть метки с помощью maxDisplayedLines:

someLabel.maxDisplayedLines = 10;

Если вы хотите, чтобы столбцы и строки отображались в макете вашей группы, используйте TileGroup / TileLayout.

Если дочерние элементы вашей группы содержат составное содержимое, которое должно быть плавающим, может помочь какой-то тип includeInLayout = false.

...