RichEditableText textFlow attribute not updating properly

April 28, 2014

Was having an issue with the RET component as described in the adobe form:
textFlow (RichEditableText) not updating properly

I had created a popup window to display Bibliography references and it was not always updating when new text was injected into the textflow attribute. The view would refresh if I clicked on the text area. Based on the information in the adobe forum, I changed the initial component implementation:

<s:RichEditableText id="biblioInfo"
						textFlow="{TextConverter.importToFlow(pageInfo, TextConverter.TEXT_FIELD_HTML_FORMAT)}"
						width="100%"
						paragraphStartIndent="10"
						paragraphEndIndent="10"
						editable="false"
						selectable="true"
						/>

to the following:

<s:RichEditableText id="biblioInfo"
						textFlow="{updateFlow(pageInfo)}"
						width="100%"
						paragraphStartIndent="10"
						paragraphEndIndent="10"
						editable="false"
						selectable="true"/>

Where updateFlow was a function which was defined in the script section of the mxml file in the following manner:

private function updateFlow(clip:String):TextFlow {
				
		if (this.biblioInfo){
			this.biblioInfo.textFlow = null;
			this.biblioInfo.validateNow();
		}
				
		//  Converts html text into a TextFlow
		var flow:TextFlow = TextConverter.importToFlow(clip, TextConverter.TEXT_FIELD_HTML_FORMAT);
				
		return flow;
	}

I found this approach solved the refresh problem for my RichEditableText component.


AS3 Textfield New Line not being Recognized

January 14, 2014

I loaded an xml file into a program which was then used to set string based variables. The text from the xml file was contained between CDATA tags and contained the \n character as shown below:

<![CDATA[Directions:\n1. Choose a patient by clicking on a silhouette.\n\n]]>

The AS3 textfield was not recognizing the new line character when set from the xml file and was just displaying the \n within the Textfield so it appeared in the textfield like this:

Directions:\n1. Choose a patient by clicking on a silhouette.\n\n

Finally found a solution from a post from 2008:

Newline characters not recognized when parsing external xml file

Once I added the code recommended on the site:

myText.replace(/\\n/g, "\n");

The new line was recognized in the textfield.

Reminder /g is a flag to globally replace all the occurrences.


Creating Flex Component View using Flash CS5

September 27, 2012

We created some Flex based component views using Flash CS5 by following the instructions in the Adobe Article Combining animation and ActionScript using Flash Professional CS5 and Flash Builder 4 which we used inside our course player. These View components had text fields which would dynamically resize when the player was resized on the fly(Only for firefox and safari, IE and chrome do not allow resizing). These views also had images which would scale appropriately as well.

Note this led to my series on embedding fonts due to conflict messages with respect to flex based textfield and flash based textfields(This is explained in detail in Part 3 of the series).


Flex 4.6 Mobile Resizing TextArea Component to Fit Content – Part 2

May 25, 2012

Now that the view sets the height of the TextArea component after it has been created as discussed in Part 1, what do we need to do when the user rotates the view from portrait to landscape and back again. The TextArea component continues to reuse the number of lines of text from the previous orientation view. We need to force the component to resize itself and then recalculate the number of lines to display so we can reset the height to the appropriate value.

Continue reading


Flex 4.6 Mobile Resizing TextArea Component to Fit Content – Part 1

May 25, 2012

The TextArea component was updated in Flex 4.6 to use the native StageText(StyleableStageText skin) instead of the previous flash TextField(StyleableTextArea skin). I wanted to just use the TextArea component to display multi-line text to the user. The problem was that the height of the component was not being set to display all of the content when I integrated this component into the mobile app. The landscape view especially was cropping off the text which was to be displayed.

After a few googles, this post on stackoverflow discussed how to implement the TextArea component so that all the text would be displayed to the user.

The quick synopsis is as follows:

  1. Setup your TextArea component to use the TextAreaSkin class
  2. Add a creationComplete event on the view that will call a method to calculate the height of the component
  3. Calculate the height of the TextArea component in the creationComplete method

My TextArea component was declared thusly:
Continue reading


Flash CS5 Dynamic Text Formatting – Part 5

May 4, 2011

Embedding Font Class in a Flash CS5 Component Class

I created a document class for a fla file which has

  • font embedded
  • traces the font info when the class is instantiated
  • creates a text field to display embedded font

Here is the document class EmbedFontTest.as which is in the same directory as the Font Classes which it references(ArialEmbedder and MsRefEmbedder):
Continue reading


Flash CS5 Dynamic Text Formatting – Part 4

May 4, 2011

Embedding font in a Class file

My next approach was to read up on embedding fonts programmatically. So I broke out my Essential Actionscript 3.0 book and on page 740 read up on embedding fonts and going through the exercises in that chapter.

The following is an example of embedding font in a class which can then be used in a class to control the rendering of text in a TextField.

package {
	
	//-------------------------------------------------------------------------
	// Class
	//-------------------------------------------------------------------------
	/**
	 *
	 * Class used to embed Arial Regular font 
     * ONLY in a font library
	 * for use by Flash 5 Pro generated swc libraries
	 *
	 **/ 
	public class ArialEmbedder {
		
		public static const FONT_NAME:String = "_arial";
		
		//these are the elements of the font family 
		//we want to embed using direct path location 
        //to Font directory on Windows XP
		[Embed(source='C:/Windows/Fonts/ARIAL.TTF', 
			   fontFamily='_arial',
			   fontWeight='regular',
			   fontStyle='regular',
			   embedAsCFF='false')]
		public static var _arial:Class;
		
	}
}

Continue reading