HTMLスタイルのフレックスコンテナ

Question

私は、モバイルアプリケーションを構築するためにSparkコンポーネントとFlex 4を使用しています。私はすべての要素を含めるために使用しているHGroupを持っています。画面が読み込まれると、表示される少量のテキストが読み込まれ、すべての単語がループされてキーワードのどれかが表示されます。ループしている間、私は各単語を独自のラベル要素に入れています。単語がキーワードであれば、それはいくつかのスタイルを変更し、単語に関する説明を表示するクリックイベントを追加します。

すべてが正常に動作しますが、すべてがHGroupに追加されると、1行しか終了せず、ほとんどのテキストがコンテンツをラップしないため完全に切断されます。

私の質問です - HGroupを設定または拡張して、子要素のコンテンツの折り返しを許可する方法はありますか？

MXMLコンテナ：ラベルを作成するAS

<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); 
      } 
     } 
    } 

Answer 1

問題は私がVGroupで複数のlablesを持っていて、コンテナを越えて幅を設定します。私はテキストを動的な段落に統合しようとしていました。 mx：Textは使用できませんでした。なぜなら、単語がキーワードであってもカスタムスタイルとマウスクリックが可能な独自のコンポーネントを各単語に追加する必要があったからです。私はVGroup内の複数のlableを扱っているので、ラベルのmax linesソリューションは機能しませんでした。そして、VGroupはラベルタグではなくその子をラップする必要がありました。また、TileGroupを使用することもできませんでした。なぜなら、各単語がそれぞれの列/行にあるテーブルを探すテーブルに段落を壊すように見えるからです。

私が使用したソリューションは、生成されるラベル内の各文字をカウントし、それを変数に追加して、ラベルを保持し、VGroup内に座る新しいHGroupを作成する必要があるときを判断することでした。動的に生成されるのでレンダリングするまでラベルの幅を判断できないため、これを行う必要がありました。これはできませんでした。なぜなら、レンダリングポイントがすべてのものを移動するには遅すぎるからです。なぜなら、ユーザは、このようなすべてのことが明らかに望ましい効果ではないことを見ることができるからです。

以下

は、私は他の誰がこの問題に走る包み、この問題を解決するために使用するコードです：

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); 
    } 

これは、これを行うための最もeffecientな方法ではないかもしれないが、それは仕事をし、実行には少し時間がかかります私が目指していたものです。

Answer 2

がない完全に確認してください、私はあなたの質問を理解して

以下は、私が持っているもののいくつかのコードスニペットです。

あなたはラベルの切り捨てであることを意味する場合は、percentWidthを設定し、maxDisplayedLinesでラベルをラップすることがありますが：あなたがあなたのグループのレイアウトに列と行をしたいわけ場合

 
someLabel.maxDisplayedLines = 10; 

、TileGroup/TileLayoutを使用しています。

グループの子供が浮動しなければならない複合コンテンツを含んでいる場合、何らかの種類のincludeInLayout = falseが役立つかもしれません。

Answer 3

テキストを複数の行でブロックして表示するには、幅が設定されたmx：Textを使用します。
HGroupの上に何かを表示するには、HGroupをそのままにして、その上に透明なコンテナ（キャンバス）を作成するのが最も簡単な方法です。そこに何かを自由に表示できます（正しく配置する数学をしてください）。