Mise en page fluide du texte dans Flex3

Question

Dans mon application Flex3, j'ai des fenêtres flottantes qui contiennent des quantités variables de texte. Les fenêtres sont destinées à être redimensionnables par l'utilisateur. Actuellement, bien que je puisse redimensionner les fenêtres correctement, je ne peux pas obtenir le texte dans un TextArea dans la fenêtre pour redistribuer lorsque la fenêtre est redimensionnée. J'ai trouvé des publications de blog qu'il y a un bug de taille dans TextArea qui signifie que le réglage du contenu du texte ne redimensionne pas le TextArea correctement, ainsi que des solutions de contournement suggérées. Dans mon cas, le contenu reste le même mais la géométrie du conteneur change. Ce qui semble se produire est que TextArea adopte une taille fixe lors de son premier rendu, et aucune quantité de redimensionnement du conteneur ne change cela. Quelqu'un peut-il suggérer un moyen de créer une zone de texte fluide dans Flex?

Ian

Answer 1

En liant la largeur de textArea à son conteneur, vous pouvez conserver les marges et les bordures et ne pas avoir à gérer les pourcentages.
De plus, votre textArea sera redimensionnée chaque fois que sa taille de parent change.
Je pense à quelque chose comme ceci:

<fx:Script> 
    <![CDATA[ 
     import spark.layouts.supportClasses.LayoutBase; 

     protected function onButtonClicked(event:MouseEvent):void 
     { 
      currentState = (event.target.selected ? 'largeState' : 'smallState'); 
     } 

    ]]> 
</fx:Script> 
<s:TitleWindow id="window" width="300" height="200"> 
    <s:TextArea width="{window.width - 10}" height="{window.height - 60}" 
     text="{IMyConsts.LOREMIPSUM}" borderVisible="false" /> 
    <s:ToggleButton id="btnEffect" bottom="5" click="onButtonClicked(event)" 
     label="{btnEffect.selected ? 'Go smaller' : 'Go larger'}" /> 
</s:TitleWindow> 
<s:states> 
    <s:State name="smallState" /> 
    <s:State name="largeState" /> 
</s:states> 
<s:transitions> 
    <s:Transition fromState="smallState" toState="*"> 
     <s:Resize target="{window}" widthTo="400" heightTo="300" /> 
    </s:Transition> 
    <s:Transition fromState="largeState" toState="*"> 
     <s:Resize target="{window}" widthTo="300" heightTo="250" /> 
    </s:Transition> 
</s:transitions> 

Answer 2

J'ai trouvé un excellent exemple de fluid windows s'il vous plaît ne le visiter. Ils fournissent également le code source, donc vous pourriez avoir une meilleure idée.

http://examples.adobe.com/flex3/devnet/dashboard/main.html

Answer 3

Vous pouvez essayer Layout Framework texte d'Adobe: http://labs.adobe.com/technologies/textlayout/

Answer 4

je peux prendre un grand coup à ce ... mais ne riez pas .. Je ne sais pas si vous avez besoin utilisez un conteneur particulier mais dans tous les cas, définissez la largeur et la hauteur sur 100% et utilisez Grid> GridRow et GridItem pour redimensionner et redimensionner le contrôle de texte, vous pouvez spécifier la largeur de la table ou simplement l'utiliser comme une table HTML dans Flex manipuler la taille des contrôles et des conteneurs ....

espérons que cela aide ...