サイテック株式会社 > 【連載】Flexただいま修行中 - 第3回 コンポーネントを改造する(失敗編)

散々やりつくされている感もあるのですが、DateChooserをカラーリングするカスタムコンポーネントを作ってみました。

いきなりカスタムコンポーネントを作成するのは敷居が高いので、http://blog.asial.co.jp/358の記事を参考に改造させていただきました。

実行画面は、こちら＝＞http://122.220.4.169/cydatechooser/CyDateChooserTest.html

ちなみにこのコンポーネントは、重大な欠陥があるのでまったく参考になりません。（僕の実験的なものです。）

そのままコピーするのもおもしろくない

土日・祝日をなど、事前にイベントが分かっている場合は、参考サイトのもので十分だと思うのですが、データベースやWebサービスに登録したイベント情報を元に色を変えたいといった場合には、データベースと配列のデータの同期=>カラーリングの処理が発生し、処理が煩雑になるのではないかと思いました。

そこで、色情報を取得する関数を外に出して、コンポーネント自体が画面更新のタイミングで、作成した関数に色を問い合わせるように改造しました。

カスタムコンポーネントのコード

作成したカスタムコンポーネントのコードは、下記のとおりです。

dateColorFuncという関数オブジェクトにコンポーネント側から色情報を問い合わせているのがポイントです。それ以外は、参考サイトとほとんど同じです。

ちなみに"use namespace mx_internal"ってのは、flexの内部的な名前空間にアクセスするもので、mx_internal名前空間のメソッドは、将来的に変更される可能性があるので、仕様等公開されていないそうです。題材として完全に失敗です。

<?xml version="1.0" encoding="utf-8"?>
<mx:DateChooser xmlns:mx="http://www.adobe.com/2006/mxml"
        updateComplete="updateColor();">
  <mx:Script>
    <![CDATA[
      import mx.utils.StringUtil;
      import mx.core.UITextField;

      use namespace mx_internal;

      /**
       * function(date:Date)
       * @return color:int, default -1;
       */
      public var dateColorFunc:Function;

      public function updateColor():void
      {
        if (dateColorFunc == null)
        {
          return;
        }

        var y:int=this.displayedYear;
        var m:int=this.displayedMonth;

        var endOfMonth:int=new Date(y, m + 1, 0).day;

        for each (var line:Array in this.dateGrid.dayBlocksArray) 
        {  
          for each (var text:UITextField in line.slice(1))// 1項目目は、曜日なので飛ばす
          {
            if (!StringUtil.isWhitespace(text.text)) {
              var color:int = dateColorFunc(new Date(y,m, int(text.text)));
              if (color != -1) {
                text.setColor(color);
              }
              else {
                text.setColor(0x000000);
              }
            }
          }
        }
      }
    ]]>
  </mx:Script>
</mx:DateChooser>

使い方

使い方は、下記のような感じです。関数を差し替えることで容易に色を変えられるようになりました。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        xmlns:local="*">
  <mx:Script>
    <![CDATA[
      private function getColor(date:Date):int
      {
        if (date.day == 0)
        {
          return 0xff0000;
        }
        if (date.day == 6)
        {
          return 0x0000ff;
        }
        return -1;
      }
    ]]>
  </mx:Script>
  <local:CyDateChooser dateColorFunc="getColor">
  </local:CyDateChooser>
</mx:Application>

と、ここまで作っておいて気づきました。

データベースへのアクセスもWebサービスのアクセスも非同期で行われるので、このやり方ではマズそうです。

データベースやWebサービスのデータを元にカラーリングするには、もう一工夫必要なのでした。

つづく(はず)。