2010-03-03

デバッグに役立つTips集（前編）

はじめに

前編では「mx_internal名前空間を使って、Flex Frameworkの内部構造にアクセスする」「全てのテキストエリアに境界線を表示する『UITextField.debuggingBorders』」の２つのTipsを紹介します。

ユーザーレベル：初級、中級: 製品：Adobe Flex、Adobe AIR、Flex Builder

必要なソフトウェア

Flex Builder 3

デバッグに役立つTips

今回紹介するのは「mx_internal名前空間を使って、Flex Frameworkの内部構造にアクセスする」「全てのテキストエリアに境界線を表示する『UITextField.debuggingBorders』」の２つのTipsです。

mx_internal名前空間を使って、Flex Frameworkの内部構造にアクセスする

カスタムコンポーネントを開発する際に、「Flexの標準コンポーネントの挙動をカスタマイズしたいが、もう少しで手が届かない」という経験をお持ちの方は少なくないのではないでしょうか？ドキュメントを参照しても、操作のためのAPIが用意されていないと諦めてしまいがちですが、そんなときでも出来ることがあります。

まずは、カスタマイズしようとしているFlexコンポーネントのソースコードを確認してみましょう。ソースコード内に「mx_internal」という名前空間で定義されている変数やメソッドを見つけることが出来ると思います。これらはヘルプには記載されていない、いわゆる「アンドキュメンテッド」な機能で、大抵は一般的な開発においては特に意識する必要のない「実装詳細」です。ですが、中には大変便利に使えるプロパティやメソッドが存在します。そのうちの幾つかを実例と共にご紹介します。

mx_internal名前空間で定義された変数・メソッドへのアクセス方法

mx_internal名前空間で定義されたメソッドや変数へアクセスするには、以下のように記述します。

var label:Label = new Label();
// LabelのgetTextField()メソッドを呼ぶ:
var txtField:IUITextField = label.mx_internal::getTextField();

又は次のようにしてもアクセス出来ます。
この方法だと、毎回「mx_internal::」を明示的に記述しなくても良いため、mx_internal名前空間の変数・メソッドへのアクセス回数が多い場合には便利です。

import mx.core.mx_internal; //Flex Builderのキーワード補完の候補としては出てこないので注意
use namespace mx_internal;

var label:Label = new Label();
// Labelのmx_internal:getTextField()メソッドを呼ぶ:
var txtField:IUITextField = label.getTextField();

それでは、試しにLabelコンポーネントに外枠を表示させてみましょう。

<?xml version="1.0" encoding="utf-8"?>
<!--
Labelに外枠を表示するサンプル
-->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Script><![CDATA[
		import mx.core.IUITextField;
    ]]></mx:Script>

    <mx:Label id="lbl" text="ラベルです"/>

    <mx:Button id="btn" toggle="true" label="境界線を表示する">
        <mx:valueCommit><![CDATA[
            var uiTextFieldInsideLabel:IUITextField = lbl.mx_internal::getTextField();
            if (btn.selected) {
                uiTextFieldInsideLabel.border = true;
                uiTextFieldInsideLabel.borderColor = 0x0000FF; //blue
            } else {
                uiTextFieldInsideLabel.border = false;
            }
        ]]></mx:valueCommit>
    </mx:Button>
</mx:Application>

もしFlashを使用した事があれば、Flashの「テキスト入力」コンポーネントには境界線を表示できる機能があることにお気づきだと思います。
Flash IDEでは、グラフィカルに「テキスト入力」の境界線の有無を設定できますが、同様の事をFlexで行うためにはUITextFieldインスタンスを取得して、その「border」、「borderColor」プロパティを適切に設定します。
Labelコンポーネントは、内部的にUITextFieldのインスタンスを保持していますが、取得のためのメソッドは「mx_internal」名前空間で定義されているため、先に紹介した手法を用いて呼び出しました。

Labelの外側に境界線を設定したところであまり実用性が感じられないかもしれませんが、UITextField等のテキスト系のコンポーネントの領域を可視化するだけで、UITextFieldを利用したコンポーネントを開発する際には思いのほか役立つことがあります。
例えば、UITextField等に明示的に幅・高さを設定する際には、文字列を代入後、計測した幅・高さに対し多少の余白を加えないと文字が表示されなくなってしまう場合があるため、これは意外に繊細な問題です。

境界線を表示することにより、UITextFieldの大きさを把握できるようになり、実行時に意図した通りのサイズとなっているかを目で確認できます。筆者も「複数行のテキストをタブに表示できるTabNavigator」コンポーネントを開発した際に、境界線を表示することがデバッグの手助けになりました。

全てのテキストエリアに境界線を表示する「UITextField.debuggingBorders」

最終完成品

BizRIAFlex3Tips03UITextFieldWithBorder.zip

個別のUITextFieldに対して境界線を表示するのは面倒なため、作成されたUITextFieldインスタンス全てに境界線を表示させるためのプロパティである「debuggingBorders」がUITextFieldクラスに定義されています。利用例は以下の通りです。

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Script><![CDATA[
    	import mx.core.UITextField;
        UITextField.mx_internal::debuggingBorders = true;
    ]]></mx:Script>
<!--中略-->
</mx:Application>

上が通常、下が「debuggingBorders」を「true」に設定した場合のDataGridになります。内部的にUITextFieldが使われている部分に対し、境界線が表示されているのがお分かりになるかと思います。

通常のDataGridとUITextFieldのdebuggingBordersをtrueにした場合のDataGridの比較

終わりに

今回は、mx_internal名前空間を使ってFlex Frameworkの内部構造にアクセスし、Flexコンポーネントの挙動をカスタマイズする例をご紹介しました。
ただし、わざわざmx_internal名前空間で定義してあるということは、それが実装詳細であり、予期せずに仕様が変更されたりする可能性があるということですので、留意が必要です。
直近にFlex 4のリリースを控えていますが、Flex Frameworkのバージョン3系は十分枯れた状態になりつつあります。(mx_internalで定義されている内容の確認も含めて)一度Flex Frameworkのソースコードを腰を据えて読んでみると、意外な発見があるかもしれません。

次回は「Flash Debugプレーヤーの設定をしてデバッグに役立つ情報を出力」や「Flex SDKの隠れた便利コマンド」についてご紹介します。（執筆内容は変更となる場合あります）