カテゴリー別アーカイブ: Flex 2

DataGrid 小ネタ

先日、仕事でプロジェクタを使って、作成した Flex アプリを映していて気付いた現象です。
画面の色数を 16bit Color に変更すると、若干ですが DataGrid の 1 列目以外のストライプ背景色が薄く変色してしまいます。
列を入れ替えても、同じ状態を維持します。

もしかしたら、スタイルの alternatingItemColors を定義したら直るかと思ったのですが、試した結果、無駄な努力に終わりました。(根本的な解決にはなりませんが、濃い色を定義すると、誤魔化せる場合があるかもしれません←ダメです)

スクリーンショットを撮ったので、比較してみてください。

DataGrid 比較画像 (32bit Color)
32bit Color

DataGrid 比較画像 (16bit Color)
16bit Color

なお、この現象は、Flex3 でも再現します。
ソースを解読していないので原因はわかりませんが、もしご存知の方いらっしゃいましたらツッコミいただけると幸いです。

余談ですが、お堅い基幹業務系 Web アプリ案件の場合、「表示環境:色 16bit Color 」 と要件を提示されることが未だにあるとかないとか。

MXML Coding Best Practice 概要(候補 2 )

下記コードは、先日のエントリーで掲載したコードとほぼ同じ内容ですが、主な相違点は IMXMLObject を使用していることです。

Application タグ内に、IMXMLObject インターフェイスを実装した AS クラスをタグ化して配置することにより、Application タグのインスタンスと、同インスタンスがタグ化した AS クラスを参照するための識別子が、AS クラスの initialized() メソッドに送出されます。

initialized() メソッドは、MXML アプリケーションから明示的に呼び出さずとも、MXML タグに指定されたすべてのコンポーネントプロパティが初期化された後、コンストラクタと同じように呼び出されます。(仮にコンストラクタを定義しても、ビルドエラーは発生しません)

MXML Application
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
    xmlns:base = "lib.*"
    xmlns:mx   = "http://www.adobe.com/2006/mxml">
    <base:ApplicationBase id="hogeName" />
    <mx:Button id="hogeButton" label="test" />
</mx:Application>
lib/ApplicationBase.as package lib
{
    import flash.events.MouseEvent;
    import mx.core.IMXMLObject;
    import mx.events.FlexEvent;
    /**
     * MXML Application コントロールクラス
     */
    public class ApplicationBase implements IMXMLObject
    {
        /**
         * MXML Application インスタンス変数
         */
        private var mApplication:MXML Application Name;
        /**
         * initialized
         * @param aDocment このクラスを作成した MXML オブジェクト
         * @param aId aDocment がこのクラスを参照するための識別子
         * 実装オブジェクトが作成され、MXML タグに指定されたすべてのコンポーネントプロパティが初期化された後に呼び出されます。
         */
        public function initialized(aDocment:Object, aId:String):void
        {
            mApplication = aDocment as MXML Application Name;
            mApplication.addEventListener(FlexEvent.CREATION_COMPLETE, creationCompleteHandler, false, 0, true);
        }
        /**
         * clickHandler
         * @param event MouseEvent オブジェクト
         * テスト出力
         */
        private function clickHandler(event:MouseEvent):void
        {
            trace("hoge");
        }
        /**
         * creationCompleteHandler
         * @param event FlexEvent オブジェクト
         * 初期化
         */
        private function creationCompleteHandler(event:FlexEvent):void
        {
            mApplication.hogeButton.addEventListener(MouseEvent.CLICK, clickHandler, false, 0, true);
        }
    }
}

参考:IMXMLObject の実装について — Flex 2

MXML Coding Best Practice 概要(候補 1 )

ここでいう「概要」とは、MXML アプリケーションと ActionScript のアーキテクチャだと解釈していただければと思います。( MXML コンポーネントについては、別途エントリーする予定です)

下記のコードは、Adobe MAX Japan 2007 にて、Adobe の Ted Patrick 氏が紹介していた Best Practice で、AS クラスを MXML アプリケーションのルートタグにするという手段。
個人的には、この手法が一番好きです。

MXML Application
<?xml version="1.0" encoding="utf-8"?>
<base:ApplicationBase
    xmlns:base = "lib.*"
    xmlns:mx   = "http://www.adobe.com/2006/mxml">
    <mx:Button id="hogeButton" label="test" />
</base:ApplicationBase>

lib/ApplicationBase.as
package lib
{
    import flash.events.MouseEvent;
    import mx.core.Application;
    import mx.events.FlexEvent;
    /**
     * MXML Application コントロールクラス
     */
    public class ApplicationBase extends Application
    {
        /**
         * MXML Application インスタンス変数
         */
        private var mApplication:MXML Application Name;
        /**
         * ApplicationBase
         * コンストラクタ
         */
        public function ApplicationBase()
        {
            super();
            this.addEventListener(FlexEvent.CREATION_COMPLETE, creationCompleteHandler, false, 0, true);
        }
        /**
         * clickHandler
         * @param event MouseEvent オブジェクト
         * テスト出力
         */
        private function clickHandler(event:MouseEvent):void
        {
            trace("hoge");
        }
        /**
         * creationCompleteHandler
         * @param event FlexEvent オブジェクト
         * 初期化
         */
        private function creationCompleteHandler(event:FlexEvent):void
        {
            mApplication = event.currentTarget as MXML Application Name;
            mApplication.hogeButton.addEventListener(MouseEvent.CLICK, clickHandler, false, 0, true);
        }
    }
}

あと宗教っぽくてアレですが、

  • MXML タグ内でイベント属性は定義しない
  • MXML タグ内でスタイル属性は定義しない
  • <mx:Script> タグは一切使用しない

などといったルールを設けておくと、クラスベースなコーディングができて、ドキュメントやソース管理が簡潔になり、スッキリするかもしれません。