Simple textflow maxchar ??

Hi guys,
I thought I would experiment with textLayout. I don't think I want to delve as deep as flash.text.engine.
Before I get onto more complicated component design I thought it would be simple enough take a TextFlow Instance and build restrictiveness into it until it performed exactly like a textfield. That is, a text flow with a limit of one line, "enter" key loss of focus, and a maxchar parameter and a password parameter.
I though maxchar would be easy ... apparently not - or I am misunderstanding a fundamental aspect of textLayout or I'm constantly overlooking something stupid in my code.
When I compile the code against the latest 437 build (as adopted from the nov08 API which also didn't work) I get :
TypeError: Error #1009: Cannot access a property or method of a null object reference.
at flashx.textLayout.edit::ElementRange$/createElementRange()
at flashx.textLayout.operations::InsertTextOperation/doOperation()
at flashx.textLayout.edit::EditManager/doInternal()
at flashx.textLayout.edit::EditManager/doOperation()
at flashx.textLayout.edit::EditManager/flushPendingOperations()
at flashx.textLayout.edit::SelectionManager/enterFrameHandler()
package {
     import flash.display.MovieClip;
     import flashx.textLayout.container.ContainerController;
     import flashx.textLayout.elements.TextFlow;
     import flashx.textLayout.elements.ParagraphElement;
     import flashx.textLayout.elements.SpanElement;
     import flashx.textLayout.edit.EditManager;
     import flashx.textLayout.formats.TextLayoutFormat;
     //import flashx.textLayout.operations.FlowOperation;
     import flashx.textLayout.events.CompositionCompletionEvent;
     public class testVellum extends MovieClip {
          private var tfw : Number;
          private var tfh : Number;
          private var inText : String;
          //private var password : Boolean;
          //stylers
          private var fontSize : int;
          private var color : uint;
          private var kern : Number;
          private var kernLeft : Number;
          private var kernRight : Number;
          private var fontF : String;
          private var cFormat : TextLayoutFormat;
          private var tf : TextFlow;
          private var pe : ParagraphElement;
          private var se : SpanElement;
          private var tfem : EditManager;
          private var seForced : String;
          private var maxLength : int;
          public function testVellum():void{
               //set the defaults
               color = 0x272727;
               fontSize = 18;
               inText = "testerText";
               kern = 0;
               kernLeft = 0;
               kernRight = 0;
               fontF = "Arial, Helvetica, _sans";
               gonow();
          public function gonow():void{
               cFormat = new TextLayoutFormat();
               tf = new TextFlow();
               pe = new ParagraphElement();
               se = new SpanElement();
               tfem = new EditManager();
               tf.interactionManager = tfem;
               cFormat.fontSize = fontSize;
               cFormat.fontFamily = fontF;
               se.text = inText;
               se.format = cFormat;
               pe.addChild(se);
               tf.addChild(pe);
               tf.flowComposer.addController(new ContainerController(this, tfw, tfh));
               tf.flowComposer.updateAllControllers();
               tf.addEventListener(CompositionCompletionEvent.COMPOSITION_COMPLETE, compHandler);
          private function compHandler(e : CompositionCompletionEvent):void{
               if(se.textLength > maxLength){
                    seForced = se.text.substr(0, maxLength);
                    se.replaceText(0, se.text.length, seForced);

resolved with help from robin.briggs over on this thread : http://forums.adobe.com/thread/422806?tstart=30
- Listening for the wrong event.. using a span element instead of the entire textflow.
fixed code should it be of care to someone else:
package {
import flash.display.MovieClip;
import flashx.textLayout.container.ContainerController;
import flashx.textLayout.elements.TextFlow;
import flashx.textLayout.elements.ParagraphElement;
import flashx.textLayout.elements.SpanElement;
import flashx.textLayout.edit.EditManager;
import flashx.textLayout.edit.IEditManager;
import flashx.textLayout.formats.TextLayoutFormat;
import flashx.textLayout.events.CompositionCompletionEvent;
import flashx.textLayout.events.FlowOperationEvent;
public class testVellum extends MovieClip {
private var tfw : Number;
private var tfh : Number;
private var inText : String;
//private var password : Boolean;
//stylers
private var fontSize : int;
private var color : uint;
private var kern : Number;
private var kernLeft : Number;
private var kernRight : Number;
private var fontF : String;
private var cFormat : TextLayoutFormat;
private var tf : TextFlow;
private var pe : ParagraphElement;
private var se : SpanElement;
private var tfem : EditManager;
private var seForced : String;
private var maxLength : int;
public function testVellum():void{
//set the defaults
color = 0x272727;
fontSize = 18;
inText = "testerText";
kern = 0;
kernLeft = 0;
kernRight = 0;
fontF = "Arial, Helvetica, _sans";
tfw = 200, tfh = 20;
maxLength = 9;
gonow();
public function gonow():void{
cFormat = new TextLayoutFormat();
tf = new TextFlow();
pe = new ParagraphElement();
se = new SpanElement();
tfem = new EditManager();
tf.interactionManager = tfem;
cFormat.fontSize = fontSize;
cFormat.fontFamily = fontF;
se.text = inText;
se.format = cFormat;
pe.addChild(se);
tf.addChild(pe);
tf.flowComposer.addController(new ContainerController(this, tfw, tfh));
            tf.flowComposer.updateAllControllers();
tf.interactionManager = tfem;
tf.addEventListener(FlowOperationEvent.FLOW_OPERATION_END, compHandler, false, 0, true);
private function compHandler(e : FlowOperationEvent):void{
if ((tf.textLength - 1)> maxLength){
tf.interactionManager.setSelection(maxLength,tf.textLength - 1);
(tf.interactionManager as IEditManager).deleteText();

Similar Messages

  • MaxChars / restrict characters in TextFlow (or any flashx.textlayout.* element)

    Is there an equivalent of the maxChars property anywhere in the TextLayout engine? I expected to find something in the EditManager class but after much searching I can't find a simple way to limit character input on any element in the engine. Am I missing something?
    Thanks,
    Casey

    Thanks for your prompt reply Gordon. I find it a bit bizarre that this functionality is completely excluded from TLF, but I'm sure there's a reason...
    Anyway, for anyone else reading this thread and wondering how to restrict text, here's what I did:
    The notable methods can be found in this file:
    http://opensource.adobe.com/svn/opensource/flex/sdk/tags/4.0.0.14159_RC/frameworks/project s/spark/src/spark/components/RichEditableText.as
    They are:
    textContainerManager_flowOperationBeginHandler() {
        //copied and cleaned out unused operations
    textContainerManager_flowOperationEndHandler() {
       //copied and cleaned out unused operations
       //calls handlePasteOperation()
    handlePasteOperation()
    I just copied these methods to my class and bound them to the events dispatched by my instance of TextFlow. I had to add a few properties to the class, "text" and "maxChars" which I think are pretty self explanatory. Here's the binding:
    myTextFlow.addEventListener(FlowOperationEvent.FLOW_OPERATION_BEGIN, textContainerManager_flowOperationBeginHandler);
    myTextFlow.addEventListener(FlowOperationEvent.FLOW_OPERATION_END, textContainerManager_flowOperationEndHandler);
    I also cleaned out the unused operations as they relate to my class. Primarily the event handling that occurs in the methods -- I didn't need any of that jazz.
    Hope someone finds this useful.
    --C

  • Click attribute in textFlow anchor tag in Flash Builder 4

    Hi folks,
    At first congratulation to you, Adobe and Flex team for Adobe Flash Builder 4 & flex 4 SDK final release...
    then, I have a click attribute in my textFlow anchor tag, just like this:
    <fx:Script>
         <![CDATA[
         import mx.controls.Alert;
         public function func():void{
              Alert.show("hello!");
         ]]>
    </fx:Script>
    <s:RichEditableText x="50" y="50" editable="false" id="RET" >
         <s:TextFlow>
              <s:a href='http://www.adobe.com' click='func()'>
                   <s:img source='adobe.jpg' width='50' height='50' />
              </s:a>
         </s:TextFlow>
    </s:RichEditableText>
    When I run the project, everything's allright; and after click on my image, I have adobe site in new window, and also have my popup alert window with "Hello!" text...
    But the Problem is another thing. I want to give this textFlow content from one webservice and put it in a string var then bind it to my RichEditableText. I receive it from webservice, put it in the string, and then bind this string to textFlow attribute of my RichEditableText obj with simple function... after running my project, I can see the content, and when I click on my image, I have adobe site in new window, again. but my function does not call!
    What is the problem?! the code is something like this (of course without webservice codes!):
    <fx:Script>
         <![CDATA[
         import flashx.textLayout.conversion.TextConverter;
         import mx.controls.Alert;
         public function func():void{
              Alert.show("hello!");
         internal var str:String;
         public function func2():void{
              str = "<TextFlow xmlns='http://ns.adobe.com/textLayout/2008' paddingRight='5'>"+
              "<a href='http://www.adobe.com' click='func();'><img source='adobe.jpg' width='50' height='50' /></a>"+
              "</TextFlow>";
              RET.textFlow= TextConverter.importToFlow(str, TextConverter.TEXT_LAYOUT_FORMAT);
         ]]>
    </fx:Script>
    <s:RichEditableText x="50" y="50" editable="false" id="RET" />

    Listening for a FlowElementMouseEvent.CLICK event will be beneficial.
    In your webservice feed (Textflow), have a tag such as:
    <a href="event:adobe.jpg">Click here to view Adobe's logo!</a>
    Then in your ActionScript code, listen for any FlowElementMouseEvent.CLICK events from your textFlow instance.
    textFlow.addEventListener(FlowElementMouseEvent.CLICK,
    onLinkHandler);
    Next, declare onLinkHandler:
               * In the XML there are href tag which has 'event:' prefix to the value.  This prefix
               * allows method calls.
              private function onLinkHandler(event:FlowElementMouseEvent):void
                   //extract the number value from the string.
                   var uri:String = LinkElement(event.flowElement).href.split(":")[1];
                   trace(uri);//outputs: adobe.jpg

  • WhiteSpaceCollapse not working on textFlow created from HTML

    Is there a trick to getting whiteSpaceCollapse to work with imported HTML? Here's my current code, where value is HTML text (e.g. "<p>Blah</p>.."):
    textFlow = TextConverter.importToFlow( value, TextConverter.TEXT_FIELD_HTML_FORMAT);
    textFlow.whiteSpaceCollapse = WhiteSpaceCollapse.COLLAPSE;
    I've also set whiteSpaceCollapse on the RichEditableText to "collapse" but I'm still noticing vertical space differences if my external HTML has linebreaks between <p></p> nodes. Many thanks in advance for any suggestions.
    -Robert

    this is the way to solve this bug and no need for changing any xml settings , simple and it works
    exporting the textflow:
    var richTextXML:xml = new XML("<"+"richTextXML"+"/>");
    richTextXML.appendChild(getCdataXMl());
    private function getCdataXMl():xml{
      var textFlowStr:String = TextConverter.export(textFlow,TextConverter.TEXT_FIELD_HTML_FORMAT
    , ConversionType.STRING_TYPE).toString();
    var textFlowXMl:xml = new XMl("<![CDATA["+textFlowStr+"]]>");
    return textFlowXMl;
    importing TextFlow from XMl :
    var htmlTextInStr:String = richTextXMl.text();
    var importtedTextFlow:TextFlow = TextConverter.importToFlow(htmlTextInStr,TextConverter.TEXT_FIELD_HTML_FORMAT);
    textArea.textFlow = importtedTextFlow;

  • TextFlow XML export issue with missing whitespaces

    If I export a TextFlow into XML (with either TextFlowUtil or TextConverter) it will lose white spaces where they occur between elements, so that a subsequence import will yield different content from the original. A simple example being:
    "Where is my white space". Will export and re-import to give: "Whereismywhitespace".
    This happens in the XML build process because when a text node is programatically appended (with appendChild()) white spaces are stripped from the start and end. For example, if you do xml.appendChild("     hello    ") you actually get an XML element containing just "hello".
    Now I understand there is a directive (XML.ignoreWhiteSpace) to ignore or keep white space when parsing nodes already set in the XML, but I cannot see how to do this when you are building the XML from some data structure (like a TextFlow), or indeed when creating an XML object from a String that contains XML notation.
    I am unaware how you can include surrounding whitespace in an XML node (short of CDATA). And the fact that the TextFlow XML import/export loses information seems to make it, well, pretty pointless.
    So, how do I retain these white spaces in a TextFlow in an exported XML?

    The solution for this problem consists of two parts.
    First part is exporting the xml from the textflow, you want no formatted XML (with breaks, tabs, ...), but one long string with the spaces left like there were entered between the tags, this can be done with:
    _textXML = TextConverter.export(EditorID.textFlow,TextConverter.TEXT_LAYOUT_FORMAT,ConversionType.STRING_TYPE) as String;
    Use the TextConverter in stead of the TextFlowUtil.
    Second part is back importing to textFlow:
    There the solution mentioned above was correct.
    XML.ignoreWhitespace = false;
    var flowXML:XML = new XML(_textXML);
    contentTLF = TextFlowUtil.importFromXML(flowXML,WhiteSpaceCollapse.PRESERVE);

  • TextFlow into multiple RichEditableText containers keeping container styles

    I'm stumped.
    Can  anyone help me to flow text into multiple RichEditableText contianers  with different styles applied to each container?  When I use the  following code, it works for flowing text between the containers but it  does not adopt the styles of the RichEditableText objects that I attach.
    var textFlow:TextFlow;
    textFlow  = TextConverter.importToFlow("one two three four five six seven eight  nine ten eleven twelve thirteen", TextConverter.PLAIN_TEXT_FORMAT);
    textFlow.flowComposer.addController(new ContainerController(richTextEditor1, richTextEditor1.width, richTextEditor1.height));
    textFlow.flowComposer.addController(new ContainerController(richTextEditor2, richTextEditor2.width, richTextEditor2.height));
    textFlow.flowComposer.updateAllControllers();
    I  have tried to apply styles directly to the ContainerControllers with no  success.  I can apply a style to the TextFlow but it uses that style  for the all containers where the text is flowing into.
    If I  attach the textFlow object directly to the textFlow property in the  RichEditableText object, it will keep the formatting of the  RichEditableText.  But then I can't figure out how to make it flow to  the next text box.
    I even tried adding the additional  controller (attached to the second RichEditableText) to the TextFlow  after attaching it to the first RichEditableText object.  No luck.
    I hope this is a stupid qustion and there is a simple answer.  Any help is appreciated.
    Thank you!
    Mike

    Unfortunately it is a good question and there isn't a simple answer.
    The RichEditableText component was not built with multiple containers in mind, so you'll run into problems trying to use it in a multiple container context.
    It sounds like you've figured out how to run the text through multiple containers directly from ActionScript, which does work well. You can then attach an EditManager to make the text editable. And as the documentation states, you can use the format object on the ContainerController to change container-level formatting (like columns). But if I'm understanding you correctly, you're trying to get the text to change something like fontSize or fontStyle as it flows between containers. That's not something TLF supports yet, and it's not a simple feature to add (either in TLF or your own code).

  • Textflow and flowComposer word wrap

    Hi
    I have a word wrap question re...
    I have a textflow that I'm splitting into multiple sprites (pages). I also have a columnCount of 2, so the text fits into two columns, and then continues onto the next page.
    Here's an example of the text...
    testString+='<p ALIGN="LEFT">Description</p><textformat blockindent=10>Product details with decent length that that overruns the column line '+i+'</textformat>';
    ... and I've concatenated it 500 times so I have a decent length test string to put into the textFlow.
    Which comes out like (imagine 3 lines per page)...
    Description                                                                                                Description
      Product details with decent length that that overruns the column line 1            Product details with decent length that that overruns the column line 4
    Description                                                                                                Description
      Product details with decent length that that overruns the column line 2            Product details with decent length that that overruns the column line 5
    Description                                                                                                Description
      Product details with decent length that that overruns the column line 3            Product details with decent length that that overruns the column line 6
    (page break)
    Description                                                                                                Description
      Product details with decent length that that overruns the column line 7            Product details with decent length that that overruns the column line 10
    Description                                                                                                Description
      Product details with decent length that that overruns the column line 8            Product details with decent length that that overruns the column line 11
    Description                                                                                                Description
      Product details with decent length that that overruns the column line 9            Product details with decent length that that overruns the column line 12
    (etc for about 10 pages until we get to the 500th pair)
    It works nicely, however, I'm wondering how you set it up to NOT word wrap on 'Product details with decent length that that overruns the column line 1' - so in other words, cut that line of if it hits the column edge?
    I tried LineBreak.EXPLICIT, but that only allows one page to be created, and no word wrapping occurred.
    Or is there a way to set it up within an html tag?
    Thank you.

    kethryvalis wrote:
    The "Name" text bounding box that I've created is set to a specific height/width (and needs to stay that way) with a font size of 94.22 pt; however, some of the names are REALLY long and are too big for the bounding box.  They word-wrap.  When I run the "data merge," I need Photoshop to automatically resize the text in the bounding box so that it doesn't word wrap.
    That is not possible its a contradiction resized text would not be font size 94.22.  Data driven graphics as far as I know does not have any text re-sizing feature.  Your template needs to be sized to support the longest text possible.   Text length need to be limited to fit within the space provided in the template psd file.
    It may be possible to write a Photoshop script to resize text layers to fit within some bounds. However is not possible to explain to you thoroughly in simple terms that would enable you to write the script. You most likely know the logic needed to do the resize and really don't need it explained to you.   What you lack is Photoshop scripting knowledge.  You have no script programming skills.  Learning a supported scripting language takes time and of top that you need to learn Adobe Document Object Model and it limitations and about Adobe's Scriptlistener Plug-in that records Action Manager scripting code. Developing Photoshop scripts is not an easy user feature like Adobe Actions Palette recorder/editor. Scripts need to be designed and programmed and debugged.
    Scripts are easy to use like actions and are more powerful then actions. You most likely have use some that are shipped with Photoshop,  Image Processor, Fit Image, Photomerge, lens correction  etc. Find your Photoshop version version Presets\Scripts folder and open any of the  .jsx file in the folder in a text editor see if you can understand somewhat what is written.  If you can you may want to learn scripting Photoshop.  Most Photoshop users never write a Photoshop script.

  • [svn:fx-trunk] 10214: This fixes the problem that if two text components share the same textFlow there is an infinite loop involving updateDisplayList - damageHandler - invalidateDisplaylist - back to updateDisplayList.

    Revision: 10214
    Author:   [email protected]
    Date:     2009-09-13 07:33:58 -0700 (Sun, 13 Sep 2009)
    Log Message:
    This fixes the problem that if two text components share the same textFlow there is an infinite loop involving updateDisplayList -> damageHandler -> invalidateDisplaylist -> back to updateDisplayList.  The bug file was for TextArea which is RET but the same bug was in RichText as well.
    This example with a renderer exposed it because the typicalItem that is composed to figure out sizes and the actual first item in the list share the same textFlow.  It actually has nothing to do with useVirtualDisplay other than it was sharing a textFlow.
    It turns out that the TextFlowFactory dispatches damage events every time the textFlow is composed.  Unlike when the flowComposer is used, it always considers the flow damaged.  It was exacerbated by each of the two components having a damage handler for the same textFlow.
    The solution is to use the textFlow generation number.  In the damageHandler if the generation is the last known generation number, assume no changes, and return immediately from the damage handler.
    QE notes: There are 1 TextArea, 6 TextInput and 2 NumericStepper failuers, with or without my changes.  The common link seems to be DispatchKeyEvent.  Most were testing maxChar, displayAsPassword and restrict.  I tested these and they seem to be working correctly.
    Doc notes:
    Bugs: SDK-23002
    Reviewer: Gordon
    Tests run: checkintests, TextArea, TextInput and NumericStepper
    Is noteworthy for integration: no
    Ticket Links:
        http://bugs.adobe.com/jira/browse/SDK-23002
    Modified Paths:
        flex/sdk/trunk/frameworks/projects/spark/src/spark/components/RichEditableText.as
        flex/sdk/trunk/frameworks/projects/spark/src/spark/components/RichText.as
        flex/sdk/trunk/frameworks/projects/spark/src/spark/components/supportClasses/RichEditable TextContainerManager.as

    Revision: 10214
    Author:   [email protected]
    Date:     2009-09-13 07:33:58 -0700 (Sun, 13 Sep 2009)
    Log Message:
    This fixes the problem that if two text components share the same textFlow there is an infinite loop involving updateDisplayList -> damageHandler -> invalidateDisplaylist -> back to updateDisplayList.  The bug file was for TextArea which is RET but the same bug was in RichText as well.
    This example with a renderer exposed it because the typicalItem that is composed to figure out sizes and the actual first item in the list share the same textFlow.  It actually has nothing to do with useVirtualDisplay other than it was sharing a textFlow.
    It turns out that the TextFlowFactory dispatches damage events every time the textFlow is composed.  Unlike when the flowComposer is used, it always considers the flow damaged.  It was exacerbated by each of the two components having a damage handler for the same textFlow.
    The solution is to use the textFlow generation number.  In the damageHandler if the generation is the last known generation number, assume no changes, and return immediately from the damage handler.
    QE notes: There are 1 TextArea, 6 TextInput and 2 NumericStepper failuers, with or without my changes.  The common link seems to be DispatchKeyEvent.  Most were testing maxChar, displayAsPassword and restrict.  I tested these and they seem to be working correctly.
    Doc notes:
    Bugs: SDK-23002
    Reviewer: Gordon
    Tests run: checkintests, TextArea, TextInput and NumericStepper
    Is noteworthy for integration: no
    Ticket Links:
        http://bugs.adobe.com/jira/browse/SDK-23002
    Modified Paths:
        flex/sdk/trunk/frameworks/projects/spark/src/spark/components/RichEditableText.as
        flex/sdk/trunk/frameworks/projects/spark/src/spark/components/RichText.as
        flex/sdk/trunk/frameworks/projects/spark/src/spark/components/supportClasses/RichEditable TextContainerManager.as

  • Clearing TextArea(textflow) content

    Is there a simple way to remove the content of a textarea programatically, no matter what methods I have tried short of manually deleteing content, as soon as I load new text the old text reappears.
    thanks.

    Well, this works for me too.  What might I be doing wrong. Using the Clear button, then setting the textFlow specifically using either of the import methods seems to work.
    -C
    <?xml version="1.0" encoding="utf-8"?>
    <s:Application
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo">
        <s:layout>
            <s:VerticalLayout/>
        </s:layout>
        <fx:Script>
            <![CDATA[
                import spark.utils.TextFlowUtil;
                private var newText:XML = <span>This is a test</span>;
            ]]>
        </fx:Script>
       <s:TextArea id="ta" text="lskdjflksfs sdf dsjflsk dfs"/>
        <s:Button label="Clear" click="ta.text=null;" />
        <s:Button label="From String" click="ta.textFlow = TextFlowUtil.importFromString('blah blah blah');"/>
        <s:Button label="From XML" click="ta.textFlow = TextFlowUtil.importFromXML(newText);"/>
    </s:Application>

  • Limiting a TextFlow to just one line

    Hi there
    Simple question; is there a way to set the maximum number of lines to 1.
    It used to be simple before TLF; multiline = false
    Now its doing my head in.
    Any thoughts highly appreciated. Cheers

    lineBreak attribute -a TextFlow level attribute
    <xs:attribute name="lineBreak" type="xs:enumeratedString" default="toFit"/>
    Specifies a line break.
    lineBreak is non-inheriting.
    Valid values include:
    ·         toFit: Wraps the lines at the edge of the enclosing <TextFlow>.
    ·         explicit: Breaks the lines only at a Unicode line end character (such as a newline or line separator).
    It's a attribute in TLF that can satisfy you. There may be also some other attributes of the containers (Sprite, Spark Components in Flex and TLFTextField in Flash pro) that can help you.

  • Viewing simple text

    Hello.
    I'm stuck trying to view just a simple line of text in Flex 4.
    The only two things I need are the ability to set backgroundAlpha to my text box and to set the font (or maybe just the font size).
    I've found a lot of classes for viewing text but I don't see any suitable ones.
    Label doesn't have a backgroundAlpha, but the main problem is that it doesn't have a font or a fontSize property.
    In the documentation on spark:Label I've found a fontSize property. But I don't have it in my SDK! (the latest prerelease build).
    There is also a RichText class. It seems to have everything I need, but I can't make it work.
    private var rText:RichText = new RichText();
    rText.width=...;
    rText.height=...;
    var f:TextLayoutFormat = new TextLayoutFormat();
    f.backgroundAlpha = .4;
    f.backgroundColor = 0x222222;
    f.fontSize = 30;
    rText.textFlow.hostFormat = f;
    After this, for example, I get just a line of text without any visible container and with a default font size.
    What should I do? Thank you.

    hi
    Label does have a fontSize property (and fontFamily etc). see: http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/components/Label. html
    Also, none of the spark text components have a backgroundColor or backgroundAlpha style - instead you should create a custom skin.

  • TextFlow.verticalAlign

    When Setting Vertical Align on a TextFlow to VerticalAlign.MIDDLE or VerticalAlign.BOTTOM, The First TextFlowLine Selection and Caret is vertically offset with respect to the distance of vertical space between the top of the Container boundary and the top of the First Line of Text.
    What is the trick to make the Text Selection line up on the First TextFlowLine when verticalAlign is not set to 'top'?
    below is a simple code example that demonstrates it. The first line of text "Hello World" is positioned properly, however when you click on
    the TextLine to edit it, the Caret appears some 100 pixels below where its supposed to, and so does the text selection.
    I am loading this module within an app that is compiled in SDK 3.2
    /******************************      BEGIN CODE ******************************/
    package {
        import flash.text.engine.BreakOpportunity;
        import flashx.textLayout.container.ContainerController;
        import flashx.textLayout.edit.EditManager;
        import flashx.textLayout.elements.Configuration;
        import flashx.textLayout.elements.ParagraphElement;
        import flashx.textLayout.elements.SpanElement;
        import flashx.textLayout.elements.TextFlow;
        import flashx.textLayout.formats.TextLayoutFormat;
        import flashx.textLayout.formats.VerticalAlign;
        import mx.core.UIComponent;
        public class TextFrameExample extends UIComponent
            var textFlow:TextFlow;
            public function TextFrameExample()
                var config:Configuration = new Configuration();
                var textLayoutFormat:TextLayoutFormat = new TextLayoutFormat();
                textLayoutFormat.color = 0xFF0000;
                textLayoutFormat.fontFamily = "_sans";
                textLayoutFormat.fontSize = 22;
                textLayoutFormat.breakOpportunity = BreakOpportunity.ANY;
                textLayoutFormat.verticalAlign = VerticalAlign.MIDDLE;
                config.textFlowInitialFormat = textLayoutFormat;
                textFlow = new TextFlow(config);
                var globalP:ParagraphElement = new ParagraphElement();
                var p:ParagraphElement = new ParagraphElement();
                var span:SpanElement = new SpanElement();
                span.text = "Hello, World!";
                p.verticalAlign = VerticalAlign.TOP;
                p.addChild(span);
                textFlow.addChild(p);           
                p = new ParagraphElement();
                span = new SpanElement();
                  p.verticalAlign = VerticalAlign.TOP;
                span.text = "Next Line should be split into some columns after all this right? i mean come on";
                p.addChild(span);
                textFlow.addChild(p);
                p = new ParagraphElement();
                span = new SpanElement();
                span.verticalAlign = VerticalAlign.TOP;
                span.text = "Next Line should be split into some columns after all this right? i mean come on";          
                p.addChild(span);
                textFlow.addChild(p);
                textFlow.interactionManager = new EditManager();
                textFlow.flowComposer.addController(new ContainerController(this, 0, 0));
                textFlow.flowComposer.getControllerAt(0).setCompositionSize(500, 500);
                textFlow.flowComposer.updateAllControllers();
            override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
                super.updateDisplayList(unscaledWidth, unscaledHeight);
                textFlow.flowComposer.getControllerAt(0).setCompositionSize(unscaledWidth, unscaledHeight);
                textFlow.flowComposer.updateAllControllers();
    /******************************      BEGIN CODE ******************************/
    Thanks for your time!
    Bow

    The verticalAlign property in TLF works only at the TextFlow or container level. So you can set the verticalAlign for an entire component, but not for individual paragraphs or spans. That's something it would be nice to add in the future, but not supported now. Sorry.
    - robin

  • TextFlow img / problem !

    Dear friends in Adobe,
    There is a simple question here:
    When we are using textFlow in our project, and when we want import some html tags in it, specially when our textFlow obj. is in a Module, for example:
    <mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009"
         xmlns:s="library://ns.adobe.com/flex/spark"
         xmlns:mx="library://ns.adobe.com/flex/halo"
         layout="absolute" width="100%" height="100%"
         creationComplete="func();">
         <fx:Declarations>
              <!-- Place non-visual elements (e.g., services, value objects) here -->
         </fx:Declarations>
         <fx:Script>
              <![CDATA[
              import flashx.textLayout.conversion.TextConverter;
              internal var Pvar:String = new String();         
              public function func():void{         
                   Pvar = "<TextFlow xmlns='http://ns.adobe.com/textLayout/2008'>"+
                          "<div><span color='#ff0000'>some text here</span><br />"+
                          "<div><img id='img1' source='Sunset.jpg' /></div>"+
                          "</div></TextFlow>"
                   rtxt.textFlow= TextConverter.importToFlow(PoetsBCvar2, TextConverter.TEXT_LAYOUT_FORMAT);              
              ]]>
         </fx:Script>
         <s:RichText id="rtxt" />
    </mx:Module>
    everything is allright, except showing the image file !
    and it will shown if we set both of width and height attributes in the <img... tag, just like this:
    "<div><img id='img1' source='Sunset.jpg' width='100' height='100' /></div>"
    I wonder if it could show the image without setting these attributes in default size, that was not so better and easier?!

    How is the module being used?

  • A simple question please help.

    Hi
    I have 2 textfields and a button. I want to input a number( diameter) in the first textfield  ( inputField) and by clicking on the button (myButton), I want to get the result (circonference) in the second textfield ( inputField1). diameter*3.14. I know it is a simple question, but it comes from a very simple mind. So have mercy on me.
    import flash.display.Sprite;
    import flash.text.TextField;
    import flash.text.TextFieldAutoSize;
    import flash.text.TextFormat;
    import flash.text.TextFormatAlign;
    import flash.events.MouseEvent;
    var inputField:TextField = new TextField();
    var myFormat:TextFormat = new TextFormat();
    myFormat.size = 44;
    inputField.defaultTextFormat = myFormat;
    inputField.restrict = "0-9";
    inputField.maxChars = 6;
    inputField.multiline = false;
    inputField.textColor = 0x000000;
    inputField.border = true;
    inputField.width = 150;
    inputField.height = 50;
    inputField.x = 75;
    inputField.y = 50;
    inputField.borderColor = 0xFF0000;
    inputField.type = "input";
    addChild(inputField);
    var inputField1:TextField = new TextField();
    var myFormat1:TextFormat = new TextFormat();
    myFormat1.size = 44;
    inputField1.defaultTextFormat = myFormat;
    inputField1.maxChars = 1;
    inputField1.multiline = false;
    inputField1.textColor = 0x000000;
    inputField1.border = true;
    inputField1.width = 150;
    inputField1.height = 50;
    inputField1.x = 275;
    inputField1.y = 50;
    inputField1.borderColor = 0xFF0000;
    addChild(inputField1);
    myButton.addEventListener(MouseEvent.CLICK, fl_MouseClickHandler_2);
    function fl_MouseClickHandler_2(event:MouseEvent):void
       trace("Mouse clicked");

    use:
    import flash.display.Sprite;
    import flash.text.TextField;
    import flash.text.TextFieldAutoSize;
    import flash.text.TextFormat;
    import flash.text.TextFormatAlign;
    import flash.events.MouseEvent;
    var inputField:TextField = new TextField();
    var myFormat:TextFormat = new TextFormat();
    myFormat.size = 44;
    inputField.defaultTextFormat = myFormat;
    inputField.restrict = "0-9";
    inputField.maxChars = 6;
    inputField.multiline = false;
    inputField.textColor = 0x000000;
    inputField.border = true;
    inputField.width = 150;
    inputField.height = 50;
    inputField.x = 75;
    inputField.y = 50;
    inputField.borderColor = 0xFF0000;
    inputField.type = "input";
    addChild(inputField);
    var inputField1:TextField = new TextField();
    var myFormat1:TextFormat = new TextFormat();
    myFormat1.size = 44;
    inputField1.defaultTextFormat = myFormat;
    inputField1.maxChars = 1;
    inputField1.multiline = false;
    inputField1.textColor = 0x000000;
    inputField1.border = true;
    inputField1.width = 150;
    inputField1.height = 50;
    inputField1.x = 275;
    inputField1.y = 50;
    inputField1.borderColor = 0xFF0000;
    addChild(inputField1);
    myButton.addEventListener(MouseEvent.CLICK, fl_MouseClickHandler_2);
    function fl_MouseClickHandler_2(event:MouseEvent):void
    inputField1.text=String(Math.PI*Number(inputField.text));

  • Padding on top of img tags imported to TextFlow

    I'm trying to use an external HTML data source with the Spark RichEditableText control, and it has the following structure:
    <p>My wrapping text here.</p><img id="picture1" src="image1.png" /><img id="picture2" src="image2.png" /><p>More text...</p>
    I'm noticing a large gap above my <img> tags when rendered in the RichEditableText control. Anyone know how I can control the padding on top of <img> elements that are specified in external HTML and imported using TextFlow.importToFlow() ? This also might be a rendering bug, because I can see the text rewrap on initialization, and it's as if the control is leaving the once occupied space still empty and not moving the <img> elements up along the y axis. Many thanks in advance.

    Richard, thanks for the reply. I tried your suggestion, but it didn't seem to help. I've recreated with a simple MXML test:
    <?xml version="1.0" encoding="utf-8"?>
    <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
       xmlns:s="library://ns.adobe.com/flex/spark"
       xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
    <fx:Declarations>
    <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    <s:RichEditableText width="890" height="600" whiteSpaceCollapse="collapse" fontSize="18">
         <s:TextFlow whiteSpaceCollapse="collapse">
              <s:p>
              The secondary survey of this patient reveals he has suffered two major penetrating shrapnel injuries just below the right eye and right parietal scalp region. He also has minor shrapnel wounds to his left forearm, right deltoid region, and right cheek.
              </s:p>
              <s:div tabStops="0 350">
                   <s:img source="http://flashsupport.com/images/waterfall.png"  />
                   <s:tab />
                   <s:img source="http://flashsupport.com/images/waterfall.png" />
                   <s:br/>
                   Left deltoid injury
                   <s:tab />
                   Right deltoid injury
             </s:div>
         </s:TextFlow>
    </s:RichEditableText>
    </s:Application>
    (The padding occurs with or without the <s:div>, but I thought you should see what I'm ultimately trying to accomplish.)
    thanks again for your help!
    -Robert
    p.s. thank you to peter dehaan for the tabstops help!

Maybe you are looking for