Daeee galera!
Esse port é para mostra um Skin bacana que catei na internet.
Original em http://flexdevtips.blogspot.com/2010/07/spark-textarea-with-line-numbers.html
Vamos ao Skin:
xml version="1.0" encoding="utf-8"?>
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
creationComplete="created(event)"
alpha.disabled="0.5"
blendMode="normal">
?
<fx:Metadata>
[CDATA[
[HostComponent("spark.components.TextArea")]
]]>
fx:Metadata>
?
<fx:Script fb:purpose="styling">
private var lineBreakChanged:Boolean;
?
private var paddingChanged:Boolean;
?
private var verticalAlignChanged:Boolean;
?
/* Define the skin elements that should not be colorized.
For text area, the skin itself is colorized but the individual parts are not. */
static private const exclusions:Array = ["background", "scroller"];
?
/**
* @private
*/
override public function get colorizeExclusions():Array {
return exclusions;
}
?
/* Define the content fill items that should be colored by the "contentBackgroundColor" style. */
static private const contentFill:Array = ["bgFill"];
?
/**
* @private
*/
override public function get contentItems():Array {
return contentFill
}
;
?
/**
* @private
*/
override protected function commitProperties():void {
super.commitProperties();
?
if (lineBreakChanged) {
updateStringStyle("lineBreak");
lineBreakChanged = false;
?
if (textDisplay != null) {
if (getStyle("lineBreak") == "explicit") {
if (textDisplay.percentWidth == 100) {
textDisplay.width = NaN;
}
} else if (textDisplay.percentWidth != 100) {
textDisplay.percentWidth = 100;
}
}
}
if (paddingChanged) {
updatePadding();
paddingChanged = false;
}
if (verticalAlignChanged) {
updateStringStyle("verticalAlign");
verticalAlignChanged = false;
}
}
?
/**
* @private
*/
override protected function initializationComplete():void {
useChromeColor = true;
super.initializationComplete();
}
?
/**
* @private
*/
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
if (getStyle("borderVisible") == true) {
border.visible = true;
shadow.visible = true;
background.left = background.top = background.right = background.bottom = 1;
scroller.left = scroller.top = scroller.right = scroller.bottom = 1;
} else {
border.visible = false;
shadow.visible = false;
background.left = background.top = background.right = background.bottom = 0;
scroller.left = scroller.top = scroller.right = scroller.bottom = 0;
}
?
borderStroke.color = getStyle("borderColor");
borderStroke.alpha = getStyle("borderAlpha");
?
super.updateDisplayList(unscaledWidth, unscaledHeight);
}
?
/**
* @private
*/
private function updatePadding():void {
if (!textDisplay)
return;
?
// Push padding styles into the textDisplay
var padding:Number;
?
padding = getStyle("paddingLeft");
if (textDisplay.getStyle("paddingLeft") != padding)
textDisplay.setStyle("paddingLeft", padding);
?
padding = getStyle("paddingTop");
if (textDisplay.getStyle("paddingTop") != padding)
textDisplay.setStyle("paddingTop", padding);
?
padding = getStyle("paddingRight");
if (textDisplay.getStyle("paddingRight") != padding)
textDisplay.setStyle("paddingRight", padding);
?
padding = getStyle("paddingBottom");
if (textDisplay.getStyle("paddingBottom") != padding)
textDisplay.setStyle("paddingBottom", padding);
}
?
/**
* @private
*/
private function updateStringStyle(styleName:String):void {
if (!textDisplay)
return;
?
// Push style into the textDisplay
var style:String;
?
style = getStyle(styleName);
if (textDisplay.getStyle(styleName) != style) {
textDisplay.setStyle(styleName, style);
}
}
?
/**
* @private
*/
override public function styleChanged(styleProp:String):void {
var allStyles:Boolean = !styleProp || styleProp == "styleName";
?
super.styleChanged(styleProp);
?
if (allStyles || styleProp.indexOf("lineBreak") == 0) {
lineBreakChanged = true;
invalidateProperties();
}
if (allStyles || styleProp.indexOf("padding") == 0) {
paddingChanged = true;
invalidateProperties();
}
if (allStyles || styleProp.indexOf("verticalAlign") == 0) {
verticalAlignChanged = true;
invalidateProperties();
}
}
fx:Script>
?
<fx:Script>
[CDATA[
import mx.events.FlexEvent;
?
/**
* @private
*/
private static const focusExclusions:Array = ["textDisplay"];
?
/**
* @private
*/
override public function get focusSkinExclusions():Array {
return focusExclusions;
}
?
protected function created(event:FlexEvent):void {
updateLineNumbers(event);
hostComponent.addEventListener(FlexEvent.UPDATE_COMPLETE, updateLineNumbers, false, 0, true);
}
?
private var _lines:int = 0;
?
private function updateLineNumbers(event:Event):void {
var lines:int = textDisplay.mx_internal::textContainerManager.numLines;
if (lines != _lines) {
var old:int = _lines;
this._lines = lines;
var diff:int = lines - old;
var linesString:String;
var i:int;
if (diff > 0) {
linesString = lineNumbersLabel.text;
for (i = old + 1; i <= _lines; i++) {
if (i > 1) {
linesString += "n";
}
linesString += i.toString(10);
}
} else {
linesString = "";
for (i = 1; i <= _lines; i++) {
if (i > 1) {
linesString += "n";
}
linesString += i.toString(10);
}
}
lineNumbersLabel.text = linesString;
}
}
]]>
fx:Script>
?
<s:states>
<s:State name="normal"/>
<s:State name="disabled"/>
s:states>
?
<s:Rect id="border"
bottom="0"
left="0"
right="0"
top="0">
<s:stroke>
<s:SolidColorStroke id="borderStroke"
weight="1"/>
s:stroke>
s:Rect>
?
?
?
?
?
E ao Uso do mesmo no componente
xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" width="100%" height="100%">
<fx:Declarations>
?
fx:Declarations>
?
<s:TextArea width="400" height="200" skinClass="br.com.fborella.SkinTextArea">
s:TextArea>
s:Application>
Lembre-se de colocar o arquivo no seu pacore e ajustar o mesmo no skinClass
Exemplo:
Abraço
Felipe
Veja o post original no blog do autor aqui!
