How can the text in a Label control (or a similar control) be wrapped in Flex 4 beta? In Flex 3 I could use the Text control but this is no longer available in Flex 4.
You can use maxDisplayedLines and lineBreak properties with spark Label component:
<s:Label maxDisplayedLines="{-1}" lineBreak="toFit" text="...." />
It works with Flex 4.5.
Try <s:SimpleText />. From the excellent Migration Guide (p. 75):
The lightest-weight component of the
text primitives. The SimpleText class
supports the least number of text
features. This class is similar to the
Label class, except that it supports
multiple lines. It does not support
user ineractivity such as selection,
editing, or scrolling.
Hope that helps!
Spark Label can display multiple lines, which MX Label cannot:
In Spark Label, three character sequences are recognized as explicit
line breaks: CR ("\r"), LF ("\n"), and CR+LF ("\r\n").
If you don't specify any kind of width for a Label, then the longest
line, as determined by these explicit line breaks, determines the
width of the Label.
If you do specify some kind of width, then the specified text is
word-wrapped at the right edge of the component's bounds, because the
default value of the lineBreak style is "toFit". If the text extends
below the bottom of the component, it is clipped.
To disable this automatic wrapping, set the lineBreak style to
"explicit". Then lines are broken only where the text contains an
explicit line break, and the ends of lines extending past the right
edge is clipped.
Related
I have a TextArea where the user can enter text and also change the width and height of the TextArea. When resizing, the text is breaking where expected. I need to find where the TextArea skin added the implicit line breaks after resizing.
ENVIRONMENT
FlexBuilder 4.6
Flex SDK 4.6.0
Flash Player 11.1
EXAMPLE
This is just plain text that
breaks after the word "that".
Any ideas on how to find the position of the line break when the TextArea lineBreak property is toFit and the text has no CR or LF characters? In the example above, it would be position 28.
You can split up the text into line components and return their individual text lengths pretty easily, but you'll have to use some 'text layout framework' magic.
First access your TextArea's textFlow property (not the text property), which will return a TextFlow instance. This is a model for the text inside your TextArea.
This object has a flowComposer which takes care of the layout of the text and carries a lot of information with it.
Its type is IFlowComposer, but you'll have to cast it to a StandardFlowComposer in order to access the individual lines.
Now you have access to the lines property, which is a collection of TextFlowLine
Each of these lines has a textLength property.
So the following
var composer:StandardFlowComposer =
myTextArea.textFlow.flowComposer as StandardFlowComposer;
for each (var line:TextFlowLine in composer.lines)
trace(line.textLength)
would yield (with your example)
29
30
In my Flex 4.5 mobile app, I have an actionScript item renderer (that derives from Flex's LabelItemRenderer). I want to fit in exactly 2 lines of text, and then truncate the rest. The width and height of the label are fixed and known statically.
How can I do this? The StyleableTextField.truncateToFit() method only works for one line of text.
I've set wordWrap = true, so the text now flows into the second line - but I need to truncate the text if it doesn't fit in two lines.
I need it to show all the text if there is only one line. (in both cases the label should be vertically middle-aligned in my renderer)
I know how to override layoutContents to do sizing and positioning etc of the StyleableTextField. So I'm looking specifically for ideas to implement custom text truncation with the StyleableTextField).
Any ideas?
Unless you're using something specific to the StyleableTextField try the s:Label. It has a property maxDisplayedLines which you could set to 2 and it will handle the truncation.
In my flex app, I have a <mx:Text> control with a fixed height and width enough to show two lines. Now if the text is too long to be shown in two lines, I would like to have it truncated with showing ellipsis (...). The default truncation with ellipsis seems to be present with label, but label cannot show text in two lines.
How do I mimic this behavior in <mx:Text> control in flex? Thanks in advance!!!
The spark.components.Label component inherits the maxDisplayedLines property from spark.components.supportClasses.TextBase. Here is the help for that particular property:
An integer which determines whether, and where, the text gets truncated.
Truncating text means replacing excess text with a truncation indicator such as "...". The truncation indicator is locale-dependent; it is specified by the "truncationIndicator" resource in the "core" resource bundle.
If the value is 0, no truncation occurs. Instead, the text will simply be clipped if it doesn't fit within the component's bounds.
If the value is is a positive integer, the text will be truncated if necessary to reduce the number of lines to this integer.
If the value is -1, the text will be truncated to display as many lines as will completely fit within the height of the component.
Truncation is only performed if the lineBreak style is "toFit"; the value of this property is ignored if lineBreak is "explicit".
The default value is 0.
From this we can see that if you set the maxDisplayedLines property to -1, the component will display as much text as it can, and append the "..." if it had to truncate the text.
It so happens that the Text class in Flex 3 is a subclass of Label. Which means setting "truncateToFit" property on your Text control to true should be enough.
The best solution I've found is via the spark Label and the maxDisplayedLines property, like so:
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:s="library://ns.adobe.com/flex/spark" >
<s:Label text="{data.Name}" maxDisplayedLines="3" verticalAlign="middle" />
</mx:Canvas>
Worked perfectly for me.
In general I've found the spark Label to be better than the mx Label, but YMMV.
I know this is an old post, but lots of people still developing and maintaining mixed Spark/MX projects. So I will give my two cents for people that are still facing this problem, specially when using MX lists and datagrids and in need of a multiline truncation in the renderer.
As far as I can tell, the question is about MX components, using Spark would be a good choice, but only if possible.
So, in case a "s:Label" is not a choice, I would think that the best approach is to extend the MX Label component and set its textField's multiline property to true. That should do the trick, I'd first try adding that logic in the override of the updateDisplayList method.
I have a blog post on this topic here, that works well regardless of the version of Flex you are using:
http://www.tjdownes.com/post.cfm/easy-string-truncation-with-ellipsis-using-ternary-operators-in-as3
The short of it is this:
myString.slice(0, 150).concat(myString.length > 150 ? "..." : "");
This will truncate the string to 150 characters and if the string is longer than 150 characters it adds an ellipsis.
On flex 4 you need to set the Label#maxDisplayedLines to something above 0 and it will do the clipping for you.
See this to see how to customize the "..."
spark component Does have the trancion propert:#see.
http://blog.flexexamples.com/2009/06/15/determining-if-a-spark-simpletext-control-is-truncated-in-flex-4/
in Flex Datagrid, I need to support line wrap function in one column.
In theory I need to set wordWrap="true" and variableRowHeight="true". It works well.
But the problem is that if in the cloumn I set itemRenderer="lc.monitoring.logviewer.components.CustomColumnRenderer" properties, then the line wrap funciton does not take effect. It seems that the line wrap function can not work with itemRenderer in the datagrid column.
Any one can help me about this.
Don't use Label - it is for displaying a single line of text.
The Label control displays a single line of noneditable text. Use the Text control to create blocks of multiline noneditable text.
mx.controls.Text supports multiline text and wordwrap
If the control is not as wide as the text, the text will wordwrap. The text is always aligned top-left in the control.
You should try to override measure and updateDisplaylist inside your itemrenderer.
Your item renderer does not know how to resize the height in order to allow showing info inside the dg
I have a scenario where I want to dynamically add words of text to a container so that it forms a paragraph of text which is wrapped neatly according to the size of the parent container. Each text element will have differing formatting, and will have differing user interaction options. For example, imagine the text " has just spoken out about ". Each word will be added to the container one at a time, at run time. The username in this case would be bold, and if clicked on will trigger an event. Same with the news article. The rest of the text is just plain text which, when clicked on, would do nothing.
Now, I'm using Flex 3 so I don't have access to the fancy new text formatting tools. I've implemented a solution where the words are plotted onto a canvas, but this means that the words are wrapped at a particular y position (an arbitrary value I've chosen). When the container is resized, the words still wrap at that position which leaves lots of space.
I thought about adding each text element to an Array Collection and using this as a datasource for a Tile List, but Tile Lists don't support variable column widths (in my limited knowledge) so each word would use the same amount of space which isn't ideal.
Does anyone know how I can plot words onto a container so that I can retain formatting, events and word wrapping at paragraph level, even if the container is resized?
Why aren't you just using a mx:Text component and html text (you can call functions from htmlText), and apply different formatting using html tags.
For information on how to trigger a function from a htmlText field:
http://www.adobepress.com/articles/article.asp?p=1019620