TextField設定レシピ (1) - XMLを使った書式の設定

taro

Jan 06, 2010

E4X
TextField
TextFormat
XML

こんにちはtaroです.

明けましておめでとうございます.

今回はXMLを利用して、TextFieldに複雑な書式を設定する方法について考えていきます.

TextFieldに複雑な書式を設定するには2通りの方法があります.

TextFormatとTextField.setTextFormat()の組み合わせ.
htmlTextを用いる.

今回はhtmlTextを使用して, 色々な書式を設定していきます.

しかし, htmlTextというと少し面倒です.

tf.htmlText = '<font face="_ゴシック" color="#C83E43"><u><a href="event:'
            + event_name + '">' + str + '</a></u></font>';

このように, + や ' が大量にある式を書くこととなるからです.

XMLを利用する

そこで, htmlTextに設定する文字列を生成するのにXMLを使用するということを考えてみます.

ActionScript3.0で利用出来るE4X(ECMAScript for XML)には { } という記法があります.

var タグ:String = 'p';
var 属性名:String = 'face';
var 属性値:String = '_ゴシック';
var 内容:String = 'テキスト';

var myXML:XML = <{タグ} {属性名}={属性値}>{内容}</{タグ}>;
// xmlの内容を表示
trace(myXML.toXMLString()); // <p face="_ゴシック">テキスト</p>

このように, { } はタグ名, 属性名, 属性値, ノードの中身を, 変数の値として設定することが出来ます.

htmlTextの設定と相性が良さそうです. 先ほどの例を使って, 早速やってみます.

var html_text:XML = <font face="_ゴシック" color="#C83E43">
                      <u><a href={'event:' + event_link}>{str}</a></u>
                    </font>;
tf.htmlText = html_text.toXMLString();

さてどうでしょう.

複数行になってしまいました. 何が問題なのでしょうか, 設定されている文字列を調べてみます.

<font face="_ゴシック" color="#C83E43">
  <u>
    <a href="event:click">テキスト・リンク</a>
  </u>
</font>

どうやら、XMLから文字列をつくるのに整形されてしまっているようです. これを止めるにはどうすればいいでしょうか. リファレンスを見ます.

XML.prettyPrinting = false;

prettyPrintingというのをtoggleしてfalseにしてやれば整形されない文字列として出力してくれそうです. 1行足してみます.

var html_text:XML = <font face="_ゴシック" color="#C83E43">
                      <u><a href={'event:' + event_link}>{str}</a></u>
                    </font>;
// 追加
XML.prettyPrinting = false;
tf.htmlText = html_text.toXMLString();

みてみます.

良さそうです. 生成されている文字列も期待通りのものとなっています.

<font face="_ゴシック" color="#C83E43"><u><a href="event:click">テキスト・リンク</a></u></font>

まとめ

今回はhtmlTextを用いた書式の設定について少し考えてみました.

XMLの { } を用いると,　+ や ' 等の煩わしさから開放される.
XML.prettyPrinting = false; と設定して整形されないように気をつける.