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/
Related
I am using Flex 4.5 and I want to set the maximum characters limit according to the textinput width means if user enter more character then the textinput width it should not accept those extra characters.
unfortunately, i have no flex in front of me right now.
You should know, how many space e.g. 20 characters needed and set this value to your textinput.width.
Check out the widthInChars-property for the spark Textinput. Maybe you can work with a litte offset. When it works, you just have to synchronize this value with maxChars.
Let me know, if that work.
Frank
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.
I have a line chart that sometimes contains a number of data points. I have solved how to prevent the horizontal axis from displaying too many labels using custom label functions and data functions. My problem is forcing the AxisRenderer not to scale down my labels.
I'm using the labelRotation property so the canDropLabels and canStagger properties are not an option.
Thanks in advance for any replies.
Try use gutter, gutter set are for the axis labels (if you want u can try to read the code of the AxisRenderer, and see how it use the gutter and other parameters to scale if need the text.
You can set the gutter by style like this (this work for me):
LineChart {
gutterLeft:50;
gutterRight:50;
gutterBottom:50;
}
I believe this can be done by editing the labelRenderer property. Take a look at the second example on this page (Formatting charts), they define a custom component to use as the label. You can do something like that to maintain whatever look you want.
I ran into the same issue. In my case (for the data that I'm plotting), simply setting canDropLabels to true (either in ActionScript or MXML as below) resulted in widening the margins allocated (I'm guessing) to the label text in the chart such that I never saw the text render smaller than set by fontSize below. Try it, it may be all you need.
hAxisRenderer.setStyle("canDropLabels",true);
...
<mx:AxisRenderer id="hAxisRenderer" placement="bottom"
tickPlacement="inside" tickLength="8"
canStagger="false" canDropLabels="false" fontSize="12">
For reference: http://blog.flexexamples.com/2007/10/16/dropping-labels-in-a-flex-chart/
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.
I want my custom button to look like the button sample below.
More specifically, I want the width of the button to be determined by the width of the largest word in the label (i.e. width of "Elongated" in my example). The label must wrap, not truncate.
And I want only one pixel between the top edge of the icon and my button's top edge.
I have tried lots of things but to no avail so far. I have reduced the horizontalGap and verticalGap to zero and padding to zero. But still nothing. Please help.
Here's what I have right now:
<mx:Button top="0" cornerRadius="2" paddingLeft="0" paddingRight="0" leading="0" letterSpacing="0" paddingTop="0" paddingBottom="0" verticalGap="0" horizontalGap="0" textAlign="center" labelPlacement="bottom" icon="{MyIcon}" height="60" width="75" label="Elongated Label" fontSize="10" />
That's not at all simple.
You will need to create your own button,
public class Mybutton extends Button {...}
override createChildren and set the word wrap of the IUITextField used for the label to true.
override measure and use your own line metrics to determine the width that the button should be. If you get the measure right, the button will lay itself out properly.
I don't have a dev environment in front of me at the moment, but something along these lines should work:
Set truncateToFit property of the Label to false (OR use a TextField with wordWrap set to true - I think this should keep the words together as much as possible).
I haven't had the need to use any of the above yet, and hopefully you haven't tried them yet because it would be an easy solution to a part of your problem. Without any code, I'm not sure why padding didn't work, but maybe it's something to do with the word truncation.
As an alternative, why not use a Button, embed or specify a source for your icon and decide where to place the text by specifying the object's labelPlacement property?
EDIT: Since there's no property in Button about wordWrap, as they would recommend in the Adobe Flex forums for such questions regarding sizing based on content where there is no automatic feature to do that, you have to find the longest word and adjust the width of the button (i.e.: in the creationComplete event). Experimenting to find the font to pixel ratio would be my best bet (or you can use a Monospace font where all the characters are given the same space thereby simplifying the estimation):
creationComplete="event.target.width=returnMyWidth();"
As for the padding, it may be related to the custom width that you had set or it may be from embedding the image automatically setting a padding by being included - I'm not really sure, so it would be good if someone can offer a comment based on experience with this.