It seems that after applying a stylesheet to a TextArea, you can no longer edit the TextArea. What a drag :( But thanks for the great post as usual.

Andrew.

I’ve tried the TextArea.stylesheet method and it works, but after applying the stylesheet, it seems that the textarea is not editable anymore?
I saw that Steve asked the same question, but I did not find an answer to it anywhere.

I hope someone can help, because I’m in desparate need of an editable textarea with css.

Thanks in advance,

Johan Velthuis
Holland

I believe this has been fixed in newer versions of the Flex SDK. See http://bugs.adobe.com/jira/browse/SDK-19734 for more information. According to the comments in the patch, this was fixed with SVN checkin 5719 (post Flex SDK 3.3). You can download the latest stable/nightly builds of the Flex 3 SDK from http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+3 (just make sure you download something more recent than build 3.4.0.5719).

Peter

I have a situation where i have to provide a stylesheeet to the Text Component. So that the htmlText works the sameway as in TextArea, but there is not any property sa stylesheet for Text component.

Plz suggest how to do implement that.

Thanks

This post is great, the closest yet to the solution that I am searching for. I’m slightly confused as to why I can have custom CSS classes and implement them in Flash or Actionscript projects but cannot do so in Flex. Or, I could be completely off my rocker. Three of us have been using CSS Classes like

myCustom
{
embedFonts: true;
font-family: “Gotham Bold”;
font-anti-alias-type:advanced;
font-size: 12;
color: #FF0000;
}

with html text like

field.htmlText = <GBodyFX>my css implementation</GBodyFX>

the TextArea or UITextField will pick up the size, color, basically all the attributes except the embedded font. Now I would say that the font isn’t embedded, but there are components sitting right next to the ones I am having trouble with that are using style properties and look great, embeddedFont, AntiAliasedType.ADVANCED, the whole bit. The only difference are the components that look correct are using compile time CSS and the text components that are using runtime CSS. Any suggestions?

Thanks!

Good question. I’m not sure you can define an ActionScript StyleSheet object in MXML. It looks like you’d need to call the parseCSS() method to convert the text into a StyleSheet object.

http://livedocs.adobe.com/flex/3/langref/flash/text/StyleSheet.html

This is as close as I could get, but I don’t know it is any better than the code above:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application name="TextArea_styleSheet_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;

            private function textArea_link(evt:TextEvent):void {
                Alert.show("text: " + evt.text, "Panel");
            }
        ]]>
    </mx:Script>

    <mx:String id="cssStr">
        <![CDATA[
            h1 {
                font-size: 24;
            }

            p {
                font-size: 10;
                text-align: justify;
            }

            a {
                text-decoration: underline;
                color: #0000FF;
            }

            a:hover {
                color: #FF0000;
            }
        ]]>
    </mx:String>

    <flash:StyleSheet id="styleSh" xmlns:flash="flash.text.*" />

    <mx:TextArea id="textArea"
            editable="false"
            condenseWhite="true"
            width="100%"
            height="100%"
            styleSheet="{styleSh}"
            initialize="styleSh.parseCSS(cssStr);"
            link="textArea_link(event);">
        <mx:htmlText>
            <![CDATA[
                <h1>More Information...</h1>
                <p>Lorem ipsum <a href="http://www.adobe.com/" target="_top">dolor sit amet</a>, consectetuer adipiscing elit. Donec at arcu in lacus iaculis ultricies. Vivamus consectetuer. Donec vulputate aliquam leo. Nam metus. Aliquam nulla odio, ultrices vitae, nonummy eget, viverra accumsan, tellus. Curabitur neque ante, nonummy ut, fermentum eu, elementum a, ligula. Fusce hendrerit lectus ac velit. Suspendisse lorem pede, sagittis ac, fermentum non, auctor quis, nulla. Integer eu lacus sit amet justo vestibulum sodales. In euismod tellus eget magna. Vestibulum sed ante. Suspendisse eros libero, gravida ac, cursus et, porta vitae, lectus.</p>
                <br />
                <p>Vestibulum pretium ante eget justo. <a href="event:flex">Quisque</a> sed tortor nec erat pellentesque sollicitudin. Ut placerat, enim vel ultricies vehicula, leo diam vulputate nibh, eu ultricies dui dui aliquam magna. Phasellus tempus leo eu tortor. Vestibulum sollicitudin turpis et arcu. Nullam felis neque, ultrices eu, vestibulum nec, ornare vitae, odio. Aenean vestibulum ullamcorper justo. Proin magna. Suspendisse potenti. Nunc sodales, eros a ultrices commodo, lorem sem rhoncus eros, id porta arcu felis id massa.</p>
                <br />
                <p>Donec tincidunt neque nec erat. In <a href="http://www.onflex.org/" target="_blank">pretium orci vitae justo</a>. Cras massa. Phasellus in massa. Curabitur diam velit, accumsan ut, tristique non, pulvinar in, libero. Praesent et nulla iaculis nisi condimentum tincidunt. Nulla bibendum. Duis pellentesque, libero non hendrerit scelerisque, erat eros dignissim diam, sit amet tempor mi lorem et justo. Curabitur mollis elit vel tortor. Vivamus risus nisl, sodales quis, aliquam non, tempor vitae, nisl. Duis luctus ipsum id felis. Nullam quis dui sit amet ante ultrices gravida. Vestibulum id felis. Curabitur mauris magna, dictum in, accumsan aliquam, bibendum eget, magna. Donec consequat tristique purus. Nunc bibendum nisi vitae tellus. Phasellus elit elit, pharetra id, elementum adipiscing, sollicitudin sed, neque. Nulla arcu. Integer sit amet elit. Pellentesque facilisis, mauris vel ullamcorper faucibus, quam felis fringilla mi, non adipiscing ante odio luctus tortor.</p>
                <br />
                <p>Etiam interdum dui quis urna. Cras rutrum ipsum eget nulla vestibulum imperdiet. Proin ut augue porta dui faucibus adipiscing. Pellentesque a dui. Proin malesuada mattis dui. Duis vestibulum, nulla eu hendrerit fermentum, enim purus tristique justo, in aliquet tortor nisl non purus. Nam vitae quam. Duis ut risus ac sem nonummy luctus. Pellentesque a ligula at neque tempus semper. Mauris varius nibh.</p>
                <br />
                <p>Nullam consequat justo vitae lorem. Maecenas non dui a eros sollicitudin placerat. Nunc faucibus. Donec vestibulum ullamcorper magna. Vivamus non tellus. Ut quis justo id mi sollicitudin hendrerit. Sed lobortis pharetra turpis. Quisque egestas. Phasellus orci nibh, molestie eu, malesuada semper, imperdiet et, nulla. Vestibulum sed diam. Praesent at justo. Morbi mi eros, ultrices sed, vulputate vitae, varius dictum, est. Donec purus orci, viverra aliquam, sagittis nec, consequat ac, erat. Donec ac justo sit amet erat laoreet semper. Proin ornare. Phasellus adipiscing semper dolor. Nulla ultrices, ante id molestie adipiscing, massa nibh volutpat quam, eget egestas arcu dolor in tortor. Ut laoreet turpis et justo.</p>
            ]]>
        </mx:htmlText>
    </mx:TextArea>

</mx:Application>

Peter

I have tried, but hasn’t succeeded getting it compiled yet.
The tag is available, so I guess it should be possible.

http://askmeflash.com/article_m.php?p=article&id=6

You need to set the styleSheet first, and then set the htmlText.

If you are seeing changes after edits, don’t forget to clean the project. This helps ensure that the newly edited copy of your stylesheet is moved into the bin-debug folder.

Peter, could you address the vexing problem of trying to print this textfield, populated with htmlText, over multiple pages? I can’t get this to work without losing two lines of text between page breaks.

I’ve found lots of examples of folks grappling with the printing issue, but no viable solutions. If anyone can find a solution, it would be you!

David