TextArea with Row/Line Numbers?

[RichardM]

Hi,

I'm looking to have a text box within a Flex application which is capable of showing the row numbers alongside the left edge of the text area much in the same way as you can turn it on in many IDE's.

I'm not sure if there exists an existing component capable of supporting this sort of 'show line numbers' feature, a guide or somthing else out there but I've had no luck finding one and hoping someone here might know of one which they could point me to or some idea as to how I might be able to support this. I'd like it to say suport numbering to 9999: (I think room for 5 digits would be a little excessive).

Alternativly if anyone has any ideas of a good way to create a component to do this I would be intrested in hearing it. I'm basically aiming to create a code editor so anything like this would be good.


Thanks to anyone who can help me out.

Richard

[Chowdhary]

I have created a small component. Hope this helps:)

<?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%"
backgroundSize="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.text="";
var code:String = javaCode.text;
var lines:Array = code.split("\r");
var lineCount:int = lines.length;

for(var i:int=1; i<=lineCount; i++){
lineNum.text = lineNum.text+i+"\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="50" 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>

[ricfar]

Thanks ...

[ricfar]

How can we make the same with a spark Textarea? In a Spark TextArea we don´t have the scroll event ...
Thanks