Flex-- TextArea with Row/Line Numbers （可以显示行数的TextArea）

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" horizontalAlign="left" minWidth="600" minHeight="600" width="100%" height="100%" backgroundColor="#ffffff" paddingLeft="45" paddingRight="45" paddingBottom="35" paddingTop="34" > <mx:Script> <!--[CDATA[ /** * This event fires when the rule text changes. This is only fired * on a keystroke, rather than on drag and drop. */ private function onRuleChange():void { ReSizeLineNum(); } private function ReSizeLineNum():void{ lineNum.htmlText=""; var code:String = javaCode.text; var lines:Array = code.split("/r"); var lineCount:int = lines.length; for(var i:int=1; i<=lineCount; i++){ if(i<100){ if(i<10){ lineNum.htmlText +="<B><font color='#000CC' >"+" "+i+"</font></B>/n"; } else lineNum.htmlText +="<B><font color='#000CC' >"+" "+i+"</font></B>/n"; } } } private function ScrollLineNum():void{ lineNum.verticalScrollPosition = javaCode.verticalScrollPosition; } ]]--> </mx:Script> <mx:HDividedBox width="100%" height="100%" verticalGap="0" horizontalGap="0"> <mx:HBox minWidth="500" height="100%" backgroundColor="#FFFFFF" verticalAlign="top" verticalGap="0" paddingRight="0" paddingLeft="0" horizontalGap="0" borderStyle="none"> <mx:TextArea id="lineNum" height="400" width="30" verticalScrollPolicy="off" editable="false" textAlign="right" paddingRight="0" paddingLeft="0"/> <mx:TextArea id="javaCode" width="90%" height="400" paddingRight="0" paddingLeft="0" change="onRuleChange();" tabChildren="false" tabEnabled="false" resize="ReSizeLineNum();" scroll="ScrollLineNum();" /> </mx:HBox> </mx:HDividedBox> </mx:Application>

 

上面的代码计算的行数是通过TextArea.text来计算的，如果TextArea里面放的是HtmlText的话，不能用这种办法计算行数，得这样

var nLines:uint = textArea.mx_internal::getTextField().numLines;

下面这个是通用版，只要分别赋给它的属性区分一下就行。

<?xml version="1.0" encoding="utf-8"?> <mx:HDividedBox xmlns:mx="http://www.adobe.com/2006/mxml" verticalGap="0" horizontalGap="0" > <mx:Script> <!--[CDATA[ import mx.core.mx_internal; private var _content:String=""; private var _htmlContent:String=""; public function get htmlContent():String { return _htmlContent; } public function set htmlContent(value:String):void { _htmlContent = value; contentArea.htmlText = _htmlContent; ReSizeLineNum(); } /** * This event fires when the rule text changes. This is only fired * on a keystroke, rather than on drag and drop. */ public function get content():String { return _content; } /** * @private */ public function set content(value:String):void { _content = value; contentArea.text = _content; ReSizeLineNum(); } private function onRuleChange():void { ReSizeLineNum(); } private function ReSizeLineNum():void{ lineNumArea.htmlText=""; var lineCount:int = contentArea.mx_internal::getTextField().numLines; for(var i:int=1; i<=lineCount; i++){ if(i<100){ if(i<10){ lineNumArea.htmlText +="<B><font color='#000CC' >"+" "+i+"</font></B>/n"; } else lineNumArea.htmlText +="<B><font color='#000CC' >"+" "+i+"</font></B>/n"; } else{ lineNumArea.htmlText +="<B><font color='#000CC' >"+""+i+"</font></B>/n"; } } } private function ScrollLineNum():void{ lineNumArea.verticalScrollPosition = contentArea.verticalScrollPosition; } ]]--> </mx:Script> <mx:HBox minWidth="500" height="100%" verticalAlign="top" verticalGap="0" paddingRight="0" paddingLeft="0" horizontalGap="0" borderStyle="none"> <mx:TextArea id="lineNumArea" height="100%" width="30" verticalScrollPolicy="off" editable="false" textAlign="right" paddingRight="0" paddingLeft="0"/> <mx:TextArea id="contentArea" width="90%" height="100%" paddingRight="0" paddingLeft="0" change="onRuleChange();" tabChildren="false" tabEnabled="false" resize="ReSizeLineNum();" scroll="ScrollLineNum();" /> </mx:HBox> </mx:HDividedBox>