AS3 Rounded Text Field

Question

Does anyone know how to create a dynamic textfield with a visible border and rounded corners in AS3?

I think I might have to create a rounded movieclip, resize and place it behind the text.

I tried this, but I don't see any changes.

var styleRound:StyleSheet = new StyleSheet();
styleRound.parseCSS("h4{cornerRadius:10;borderStyle: solid; borderThickness: 1;}");
tf.htmlText = "<h4>" + hotspotData.caption + "</h4>";
tf.styleSheet = styleRound;

Answer 1

Can you just use the CSS styles? Something like:

TextInput { 
  borderStyle: solid; 
  borderThickness: 1; 
  cornerRadius: 2; 
}

I haven't tested this, but that should give you a rounded corner.

Answer 2

I ended up creating a rounded rectangle in flash and exporting it as its own class - hotspotBG.

var hotspotBackground:hotspotBG = new hotspotBG();
hotspotBackground.width = textField.width + 10;
caption.addChild(hotspotBackground);

Answer 3

Here is a list of the available CSS styles for TextFields in ActionScript 3. Sorry, there is no corner radius.

You can turn on a border for a textfield on the TextField objects border property. But there is not a property available to round the corner.

I suggest you create a new component and add the border yourself as a Sprite underneath the TextField. Something like:

package
{

import flash.display.Graphics;
import flash.display.Sprite;
import flash.text.TextField;
import flash.text.TextFieldAutoSize;

public class TextBorder extends Sprite
{
    private static const CORNER_RADIUS:int = 5;
    // display objects
    private var background:Sprite;
    private var field:TextField;

    // properties
    private var _text:String;

    public function TextBorder()
    {
     background = new Sprite;
     field = new TextField;
     field.autoSize = TextFieldAutoSize.LEFT;

     addChild(background);
     addChild(field);

     // TESTING:
     text = "Hello World";
    }

    public function set text(newText:String):void
    {
     _text = newText;
     display();
    }

    public function get text():String
    {
     return _text;
    }

    private function display():void
    {
     field.text = _text;

     var g:Graphics = background.graphics;
     g.clear();
     g.lineStyle(0, 0x0);
     g.beginFill(0xFFFFFF);
     g.drawRoundRect(0, 0, field.width, field.height, CORNER_RADIUS);
    }
}

}