The line numbers use the same size font as the TextArea.
It is very simply to use, simply set the skinClass property in mxml like this:
<s:TextArea skinClass="flex.utils.spark.TextAreaLineNumbersSkin"/>
If you want a horizontal scroll bar on the TextArea, then set lineBreak="explicit" and the horizontal scrollbar will appear.
Here is an example of it in action (right click to view source).
It would be very easy to modify this skin to make it resizable by adding a resize handle in the bottom right corner. Look at the source code from my previous blog post on Resizable Controls, specifically the flex.utils.spark.resize.ResizableTextAreaSkin class, it uses a custom skin for the Scroller, which adds the resize handle.
12 comments:
"textDisplay.mx_internal::textContainerManager.numLines" - this was really painful to get the number of lines displayed in s:TextArea :(
Although, cool demo in overall!
Yeah I agree, surprisingly complicated just to get at the number of lines.
Really Nice Demo i really like this post flex developer
Nice example. I wanted to take it another step and stop the scrolling to display only on explicit breaks lineBreak="{LineBreak.EXPLICIT}" on the RichEditableText
and add a horizontal scroller just on the RichEditableText
I found I needed to put the RichEditableText into a Group to get the lineBreak to work but have not figured how to get a horizontal scroll just for the content RichEditableText.
Hi MotionMaker,
I made a slight adjustment to the skin, so now if you specify on the TextArea lineBreak="explicit" the horizontal scrollbars will show up when needed. By default the lineBreak property is set to "toFit" which means the horizontal scrollbar will not appear.
Thanks for the comment,
Chris
Any ideas on how to get the Scroller to automatically follow the cursor when you use the arrow key to move the cursor beyond the edge of the textarea? E.g., hit "Random string" to fill the textarea, focus the cursor in the textarea, and then repeatedly hit arrow down beyond line 20. If this were the default skin, the textarea would scroll with the cursor, but since we've wrapped the RichEditableText element in an HGroup, that behavior no longer works.
Any ideas?
Answered my own question. You just need to restructure the skin a little bit and put the scroller back around the RichEditableText element, and bind the scroll position of the "gutter" to the scroll position of the text editing area:
<s:HGroup id="textGroup"
bottom="0"
left="0"
right="0"
top="0"
gap="0">
<s:HGroup id="gutter" clipAndEnableScrolling="true" minWidth="25" height="100%"
verticalScrollPosition="{textDisplay.verticalScrollPosition}">
<s:Label id="lineNumbersLabel"
minWidth="24"
color="#999999"
fontFamily="{textDisplay.getStyle('fontFamily')}"
fontSize="{textDisplay.getStyle('fontSize')}"
fontWeight="{textDisplay.getStyle('fontWeight')}"
paddingBottom="5"
paddingLeft="5"
paddingRight="5"
paddingTop="5"
textAlign="right"/>
<s:Line width="1"
yFrom="0"
yTo="{Math.max(textGroup.height-1, textDisplay.height-1)}">
<s:stroke>
<s:SolidColorStroke color="#EDEDED"
weight="1"/>
</s:stroke>
</s:Line>
</s:HGroup>
<s:Scroller height="100%" width="100%" id="editorScroller">
<s:RichEditableText id="textDisplay"
change="updateLineNumbers(event)"
valueCommit="updateLineNumbers(event)" />
</s:Scroller>
</s:HGroup>
That's awesome DK, thanks for contributing. I was thinking that the "gutter" should actually be outside the scroller too, that is how most text editors do it I think.
I've updated my example above to include your work, and added one more change - a gray box that covers up the line numbers at the bottom when the horizontal scrollbar is present (when lineBreak="explicit").
Chris
Good stuff! This may be very useful for some projects. Thanks by share it with us.
Great work - Thanks for posting this :)
Whith text with > then 5000 lines, we have a delay ....
Very good sample. But it has some size problems. The height of the numbers and scrollbar are same, not same as the height of the text part, and results strange behavior.tex stops with number 38 on line, but the the numbers scroll more with empty lines.
Post a Comment