Mar 23

Flex中动态导入级联样式表(CSS)并且应用在TextArea控件中的例子

FlexAdd comments

在这里看到有人问起TextArea中文本内容段落间的间隔为什么总是会那么大，想不到peterd这么快就为我们写了一个例子来说明这个问题。

接下来的例子演示了如何动态读入一个CSS文件并且通过设置TextArea控件的styleSheet属性将其CSS中的设置反映到TextArea控件中。

下面是完整代码：


Download: main.mxml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
  3.         layout="vertical"
  4.         verticalAlign="middle"
  5.         backgroundColor="white"
  6.         creationComplete="init();">
  7.  
  8.     <mx:Script>
  9.         <![CDATA[
  10.             import mx.controls.Alert;
  11.  
  12.             private var styleSheet:StyleSheet;
  13.             private var urlLoader:URLLoader;
  14.  
  15.             private function init():void {
  16.                 urlLoader = new URLLoader();
  17.                 urlLoader.addEventListener(Event.COMPLETE, urlLoader_complete);
  18.                 urlLoader.load(new URLRequest("styles.css"));
  19.             }
  20.  
  21.             private function urlLoader_complete(evt:Event):void {
  22.                 var css:String = URLLoader(evt.currentTarget).data;
  23.                 // Convert text to style sheet.
  24.                 styleSheet = new StyleSheet();
  25.                 styleSheet.parseCSS(css);
  26.                 // Set the style sheet.
  27.                 textArea.styleSheet = styleSheet;
  28.             }
  29.  
  30.             private function textArea_link(evt:TextEvent):void {
  31.                 Alert.show("text: " + evt.text, "Panel");
  32.             }
  33.         ]]>
  34.     </mx:Script>
  35.  
  36.     <mx:String id="txt" source="text.html" />
  37.  
  38.     <mx:TextArea id="textArea"
  39.             htmlText="{txt}"
  40.             editable="false"
  41.             condenseWhite="true"
  42.             width="100%"
  43.             height="100%"
  44.             link="textArea_link(event);" />
  45.  
  46. </mx:Application>
下面是CSS文件：
Download: styles.css
  1. h1 {
  2.     font-size: 24;
  3. }
  4.  
  5. p {
  6.     font-size: 10;
  7. }
  8.  
  9. a {
  10.     text-decoration: underline;
  11. }
  12.  
  13. a:hover {
  14.     color: #FF0000;
  15. }
下面是Demo（可以右键或点击这里察看源代码）：

你也可以通过<mx:HTTPService />动态的读入一个扩展CSS文件，下面是参考代码：

Download: main.mxml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
  3.         layout="vertical"
  4.         verticalAlign="middle"
  5.         backgroundColor="white"
  6.         creationComplete="init();">
  7.  
  8.     <mx:Script>
  9.         <![CDATA[
  10.             import mx.rpc.events.ResultEvent;
  11.             import mx.controls.Alert;
  12.  
  13.             private var styleSheet:StyleSheet;
  14.  
  15.             private function init():void {
  16.                 httpService.send();
  17.             }
  18.  
  19.             private function httpService_result(evt:ResultEvent):void {
  20.                 var css:String = evt.result as String;
  21.                 // Convert text to style sheet.
  22.                 styleSheet = new StyleSheet();
  23.                 styleSheet.parseCSS(css);
  24.                 // Set the style sheet.
  25.                 textArea.styleSheet = styleSheet;
  26.             }
  27.  
  28.             private function textArea_link(evt:TextEvent):void {
  29.                 Alert.show("text: " + evt.text, "Panel");
  30.             }
  31.         ]]>
  32.     </mx:Script>
  33.  
  34.     <mx:HTTPService id="httpService"
  35.             url="styles.css"
  36.             resultFormat="text"
  37.             result="httpService_result(event);" />
  38.     <mx:String id="txt" source="text.html" />
  39.  
  40.     <mx:TextArea id="textArea"
  41.             htmlText="{txt}"
  42.             editable="false"
  43.             condenseWhite="true"
  44.             width="100%"
  45.             height="100%"
  46.             link="textArea_link(event);" />
  47.  
  48. </mx:Application>

下面是CSS文件：

Download: styles.css
  1. h1 {
  2.     font-size: 24;
  3. }
  4.  
  5. p {
  6.     font-size: 10;
  7.     text-align: justify;
  8. }
  9.  
  10. a {
  11.     text-decoration: underline;
  12.     color: #0000FF;
  13. }
  14.  
  15. a:hover {
  16.     color: #FF0000;
  17. }

下面是Demo（可以右键或点击这里察看源代码）：

原文作者：Peter deHaan 翻译：minidxer

written by Minidxer  |  tags: , , , ,

Related Post

2 Responses to “Flex中动态导入级联样式表(CSS)并且应用在TextArea控件中的例子”

  1. iGoodBoy Says:
    March 27th, 2008 at 12:52 am

    您好…我是flash 新手.. 算是未用過flash

    請問如果純 FLASH textarea ,可以實現到 內文單字highlight嗎.

    或在flex可以更容易實現嗎

  2. Minidxer Says:
    March 27th, 2008 at 1:01 am

    例子中的就是textarea
    highlight根据自己的需要设置styles.css就可以了。

Leave a Reply