Problem
I want a "comb field" text component like the one in LiveCycle described here: http://www.adobe.com/devnet/livecycle/articles/whats_new_designer8.html
Solution
Create a custom component extending UIComponent that has a TextField, as seen below.
Detailed explanation
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml"
xmlns:local="*">
<local:CombFieldComp text="This is really long text."
spacing="10"/>
</mx:Application>
package
{
import flash.text.TextField;
import flash.text.TextFormat;
import flash.text.TextFormatAlign;
import flash.text.TextLineMetrics;
import mx.core.UIComponent;
public class CombFieldComp extends UIComponent{
private var _tf:TextField;
private var _format:TextFormat;
private var _spacing:uint = 0;
[Bindable] private var _text:String = "";
public function CombFieldComp(){
super();
_tf = new TextField();
_tf.border = true;
_format = new TextFormat();
setCustFormat();
addChild(_tf);
}
public function get text():String{
return _text;
}
public function set text(value:String):void{
_text = value;
_tf.text = _text;
setCustFormat();
}
public function get spacing():uint{
return _spacing;
}
public function set spacing(value:uint):void{
_spacing = value;
setCustFormat();
}
private function setCustFormat():void{
_format.font = "Courier New";
_format.letterSpacing = _spacing;
_format.align = TextFormatAlign.CENTER;
_format.blockIndent = _spacing / 2;
_tf.setTextFormat(_format);
var tlm:TextLineMetrics = _tf.getLineMetrics(0);
_tf.width = tlm.width + 5;
_tf.height = tlm.height + 5;
this.graphics.lineStyle(1,0x000000);
for(var a:uint=1;a<_tf.getLineLength(0);a++){
var Xpos:int = (_tf.width / _tf.getLineLength(0)) * a;
this.graphics.moveTo(Xpos, _tf.height);
this.graphics.lineTo(Xpos, 0);
}
}
}
}
+
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License. Permissions beyond the scope of this license, pertaining to the examples of code included within this work are available at Adobe.
Report abuse
