Shared Know How


Howto: fix, find, use, make & do it guide

Fixed AS3 Flash TextArea - CSS incompatibility

author Posted by: wytze on date Jul 8th, 2008 | filed Filed under: flash

When working with flash components we often run into disadvantages. As with the TextArea class (fl.controls.TextArea) we encountered that it is not possible to use a CSS on its 'textField' property. Once again we thought to have the fast way to an end with components, but nothing of the sort.:'(

Since the 'styleSheet' property returns a standard TextField instance it struck us as weird that setting its 'styleSheet' property didn't work. The TextArea class was trying to set textFormat which fails after setting the stylesheet of the textfield.

Error message:

Error: Error #2009: This method cannot be used on a text field with a style sheet.
at flash.text::TextField/setTextFormat()
at fl.controls::TextArea/drawTextFormat()
at fl.controls::TextArea/draw()
at fl.core::UIComponent/callLaterDispatcher()

This pointed us to the 'drawTextFormat()' function in the TextArea class. After taking a look we figured out what to do.

The problem turned out to be that every time you add text to your textarea the class tries to add a designated, or default flash-textFormat to the textfield. Adding Flash TextFormat objects to textfields conflicts with stylesheets. Our solutions was relatively simple: a small class extends of the textArea class.

Click continue for the fixing source

    import fl.controls.TextArea;
 
    /**
    * @makes it possible to do textArea.textField.styleSheet
    * @author Tim de Jong - Dooping VOF 2008 - tim -AT- dooping.nl
    * @version 001
    */
 
    public class doopingTextArea extends TextArea
    {
        public function doopingTextArea()
        {
            super();
        }
 
        override protected function drawTextFormat():void {
            if(!this.textField.styleSheet) super.drawTextFormat();
            else {
                setEmbedFont();
                if(_html) textField.htmlText = _savedHTML;
            }
        }
 
    }

Then load the stylesheet by passing it to the textField object inside the textArea.

var myTextArea = new doopingTextArea();
myTextArea.textField.styleSheet = styleSheetObject;

As you can see we simply check if a styleSheet exists and than decide whether or not to do the original text formatting or not. Now we're able to use CSS on TextArea's and keep styling and code neatly separated.

tagsTags: , , , , , , , , ,

tag5 Responses to “Fixed AS3 Flash TextArea - CSS incompatibility”

  1. Willem van den Goorbergh Said,
    July 23rd, 2008 at 5:59 pm edit

    Thanks so much Wytze and Tim. Works like a charm!!
    Would this also work with existing TextAreas? iow: Can I cast a TextArea to a doopingTextArea?
    groet,
    Willem van den Goorbergh

  2. wytze Said,
    July 24th, 2008 at 4:50 pm edit

    Hi,

    What do you mean by “existing TextArea”?
    If you mean instanciated Textarea’s, than no. But I don’t think that’s what you mean, is it? ;)

    greetz Wytze

  3. bunny007 Said,
    August 14th, 2008 at 8:42 pm edit

    Hi,

    I am fairly new to actionscript, so please bear with me.

    I created a custom class that creates a textArea and loads my css, but I don’t know how to apply your fix so that I can apply the stylesheet to my textArea.

    I think I need to call your doopingTextArea class from within my CSSFormatTextArea class. Is that correct, and, if so, would you mind showing me how?

    Thanks in advance… and extra thanks for the fix!!

    b.

  4. bunny007 Said,
    August 14th, 2008 at 9:06 pm edit

    i figured out how to do it.

    i imported the doopintTextArea class into my CSSFormatTextArea class and created the doopingTextArea instead of a regular textArea.

    thanks again for the fix! it works perfectly!

    bunny007 =)

  5. wytze Said,
    August 18th, 2008 at 9:32 am edit

    Glad it works bunny007,

    Although I’m not sure why you created the CSSFormatTextArea class. The doopingTextArea class has all you need for css styling properties.
    My suggestion (for the sake of neat coding) would be to simply import the doopingTextArea into your code, load your css-file, add that to a newly created doopingTextArea like the sample above and fill the text area with your specific text. Something like this:


    import flash.gui.text.Stylesheet;

    var cssReq:URLRequest = new URLRequest("http://www.whateveryourdomainmybe.net");
    var cssLoader:URLLoader = new URLLoader(cssReq);
    cssLoader.addEventListener(Event.COMPLETE, cssComplete);

    private function cssComplete(e:Event):void{
    var CSS:Stylesheet = Stylesheet.parse(e.target.data);
    var myTxtArea:doopingTextArea = new doopingTextArea();
    myTxtArea.textField.styleSheet = CSS;

    /* now the onlything to do is filling it with text and adding it to the stage */
    }

     Add A Comment

trackback Trackback URI | rsscomment Comments RSS