在FLEX的TextArea组件中使用CSS.

最新推荐文章于 2025-05-23 14:14:39 发布

转载最新推荐文章于 2025-05-23 14:14:39 发布 · 72 阅读

本文介绍如何在Flex应用程序中使用外部CSS文件为TextArea控件设置样式。通过加载样式表并将其应用于TextArea，可以实现文本样式的灵活控制。示例代码展示了完整的实现过程。

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        creationComplete="init();">

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

            private var styleSheet:StyleSheet;
            private var urlLoader:URLLoader;

            private function init():void {
                urlLoader = new URLLoader();
                urlLoader.addEventListener(Event.COMPLETE, urlLoader_complete);
                urlLoader.load(new URLRequest("styles.css"));
            }

            private function urlLoader_complete(evt:Event):void {
                var css:String = URLLoader(evt.currentTarget).data;
                // Convert text to style sheet.
                styleSheet = new StyleSheet();
                styleSheet.parseCSS(css);
                // Set the style sheet.
                textArea.styleSheet = styleSheet;
            }

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

    <mx:String id="txt" source="text.html" />

    <mx:TextArea id="textArea"
            htmlText="{txt}"
            editable="false"
            condenseWhite="true"
            width="100%"
            height="100%"
            link="textArea_link(event);" />

</mx:Application>

/src/styles.css