Flex text inserted into TextArea causes application to hang - apache-flex

I am attempting to insert text from a database into a custom TextArea component, using the following:
var front:CaptionTextArea = myFlashcardFrontsides[adjIndex] as CaptionTextArea;
var back:CaptionTextArea = myFlashcardBacksides[adjIndex] as CaptionTextArea;
var passage:CaptionTextInput = myVersePassages[adjIndex] as CaptionTextInput;
front.text = passage.text;
back.text = str;
This works 100% of the time for smaller strings. However, if I insert long strings of text, the application will hang consistently. The maxchars for the textarea is set to 1200, and the text that is inserted into the text area is always smaller than the character limit:
backside.maxChars = 1200;
How can this problem be fixed?

I resolved the issue, and all I had to do was change my TextArea from a Spark TextArea to an MX TextArea:
// import spark.components.TextArea; DON'T USE: SPARK TEXT AREA CAUSES A BUG WHEN PROGRAMATICALLY INSERTING LONGER TEXT STRINGS
import mx.controls.TextArea;
public class CaptionTextArea extends TextArea
It seems like there is an Adobe bug that causes my application to freeze when programatically inserting long strings of text into the newer text area.

I am facing this issue myself right now.
I think the problem is, when you add a long text (so long that scrollbars appear) to a TextArea and its not yet on the stage, the error is thrown. I believe the component has problems adding the scrollbar to the container.
mx:TextArea works, but its not good for styling the component, so it would be nice if apache (?) fixed that.

Related

How can I read a spark TextArea implicit line breaks?

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

Changing Spark TextArea text color dynamically over a range of characters

Hoping to obtain the help of some Flex 3/4 gurus out there...
I am attempting to dynamically change the color of a subset/portion of text in a Spark TextArea control. Using the MX-based TextArea, I could leverage the mx.controls.textClasses.TextRange type and change the color directly as follows:
TextRange tr = new TextRange(theTextAreaControl, false, beginIndex, endIndex);
tr.color = somePredefindColor;
Input Parameters to TextRange constructor:
1st argument: The TextArea control that will provide access to the underlying textField property
2nd argument: Indicates the TextRange will not modify the content of the TextArea
3rd argument: The beginning index position in the TextArea text string
4th argument: The ending index position in the TextArea text string
How would I go about doing this for a Spark-based TextArea control? I am looking to dynamically change the font color for a range of text, not just the entire TextArea AND I cannot statically specify the font color. The problem I run into when trying to re-use the TextRange type is that the 1st argument is expected to provide the textField property, which is currently not on the Spark-based TextArea control. I thought about extending the Spark-based TextArea control to provide this accessor property but that seems like overkill and is probably not the best approach.
Any help would be greatly appreciated.
Thanks,
Michael
When manipulating Spark text components, you'll want to use the Text Layout Framework (TLF), which is built on top of the Flash Text Engine (FTE) that was introduced in Flash Player 10. It gives you major control over how the text is displayed (at the cost of being pretty complex.) Here's a good place to start: Using Text Layout Framework

AS3: grouping sprites

I have a handful of sprites that I am attempting to group together via addChild().
Here is some pseudo-code demonstrating what I would like to accomplish:
import nav.text.TextSprite;
spr1:Sprite = new Sprite();
spr1.graphics.clear();
spr1.graphics.beginFill(0x000000);
spr1.graphics.drawRect(0,0,100,100);
txt1:TextSprite = new TextSprite;
txt1.text = "hello";
spr1.addChild(txt1);
//this is what isn't working: the sprite is hidden but not the text
spr1.alpha = 0.0;
For some reason I cannot seem to get the TextSprite to draw correctly... All it is is a Sprite with a TextField added to it. I think everything is working there, but I might have something wrong w/r/t making sure all of TextSprites children are grouped correctly.
I should mention that it does position correctly; but the alpha property won't respond in the way I would expect it to. I.E., the sprite that the TextField is attached to will allow it's alpha to be set but the text remains visible.
Any thoughts?
Most likely you just need to embed the font in your textfield. Try changing the x, y of spr1 and see if txt1 moves along with it. If it truly is a child then it will respond to the new position.
You need to embed the font using textfield.embedFonts = true. If your text is disappearing when you do this, how are you going about embedding the font (using the Flex embed meta tag or using the Flash IDE?), check that you are not changing the font weight (setting the text to bold when you have only embedded the normal weight font) and if you are using a text format, be sure to apply the text format AFTER you set the textfield.text property. You can get around this by using textfield.defaultTextFormat.

A real drawText call in Flex?

I am now developing a Flex application in which I need to control each pixel of my control of Flex. I want to calculate that how width and how height of some text used in my control and do some layout stuff.After some searching I find that the only way to draw text in Flex is to use something like TextField. So, I use TextField to display text and try to get the width and height of the text through:
textfiled.getLineMetrics(0).width/.height;
But the real textfield is much more bigger than this, so I do:
textfield.width = textfiled.getLineMetrics(0).width;
textfield.height = textfiled.getLineMetrics(0).height;
But, the textfield get part not displayed, and I am surprised by this effect. I know there should be a 2-pixel gutter around the text, but what the remain space? Why nearly 20% part of the text height/width are not displayed?
And how can I get a real drawText call in Flex, I mean something like Windows's drawText method...
Thanks!
you can try this : getCharBoundaries () i've used it and seems accurate hoever it is for char and not a whole text so you will need to iterate through the text
also see this :
Is there a way to get the actual bounding box of a glyph in ActionScript?
Please try:
textfield.width = textfield.textWidth + 4;
textfield.height = textfield.textHeight + 4;
I'm not familiar with Windows's drawText method so I cannot help you there, but perhaps you want to have a look at the stellar text layout functionality in Flex 4.

Generate a flex image from a hidden component

I'm trying to put an image, generated from some text, in a RichEditableText. Since it's a styled text, I thought about putting it another RichEditableText, style it, then print it to a Bitmap to use as source for InlineGraphicsElement.
I use the following code to do that
var txt:RichEditableText = new RichEditableText();
txt.text = name;
// Appliy given styles to the text flow of input rich editable text
createApplyNamedStyle(name, styles).call(null, txt.textFlow);
var bitmapData:BitmapData = new BitmapData(txt.width, txt.height);
bitmapData.draw(txt);
var bitmap:Bitmap = new Bitmap(bitmapData);
Unfortunatly, when called, it displays an error stack
ArgumentError: Error #2015: BitmapData non valide.
at flash.display::BitmapData()
at RichTextEditor/getTagImage()[E:\FlexWorkspace\Test\src\RichTextEditor.mxml:74]
at RichTextEditor/insertTag()[E:\FlexWorkspace\Test\src\RichTextEditor.mxml:154]
I suspect it is due to the fact that my RichEditableText, not being in visible component, is not laid out.
How can I ensure it is properly laid out ?
And am i doing the right thing to transform my text into an image ?
You're right; since the text is not on the display list, it is never validated and hence has 0 height and width.
A typical workaround is to add the item to the display list and then remove it immediatley. A little more discussion in this SO question.
You should trace txt.width and txt.height. They must be at least greater or equal to one. It does not matter if a DisplayObject is visible or not.

Resources