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";}elselineNum.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";}elselineNumArea.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>