ILOG Elixir

IBM ILOG Elixir:カスタムゲージの一例--色分けゲージ

2009-06-18 08:00:00

 この記事では、FactBookのデモの記事で使ったカスタムゲージの1つに焦点を当てる。

 このゲージはユーザーが編集可能で、三角形のカーソルで色分けの位置を変えることができる。この記事では、IBM ILOG Elixirのゲージ・フレームワークを使って、このようなゲージを作る方法を説明する。

 このゲージは、次の2つのファイルでできている。

  • PartitionGauge.mxml: RectangularGaugeを継承するMXMLコンポーネント
  • TriangleRenderer.as: 三角形を描画するカスタムレンダラーで、受け取る値に制約がある

TriangleRendererクラス

 これは、カスタム版のマーカーのレンダラーで、ユーザーがカーソルをドラッグアンドドロップする際の値を制限する最大値と最小値のプロパティ(min, max)が追加されている。

package
{
  import flash.display.Graphics;
  import ilog.gauges.rectangular.renderers.MarkerRenderer;
  import mx.graphics.IFill;
  import mx.graphics.IStroke;

  public class TriangleMarker extends MarkerRenderer
  {
    public var min:Number = -1;
    public var max:Number = 101;

    public function TriangleMarker()
    {
      super();
      mouseMode = "shape";
      thickness=15;
      length=19;
      y=-10;
      editable=true;
      liveDragging = true;
    }

    override public function set value(val:Object):void
    {
      var v:Number = Number(val);
      if (v > min && v < max)
        super.value = val;
    }

    override protected function drawMarker(g:Graphics, horizontal:Boolean,
                                  x:Number, y:Number, w:Number, h:Number,
                                  fill:IFill, stroke:IStroke):void
    {
      g.lineStyle(0, 0x555555, 1, true);
      g.beginFill(getStyle("color"));
      g.moveTo(x, y);
      g.lineTo(x + w, y);
      g.lineTo(x + w/2, y+h);
      g.lineTo(x, y);
      g.endFill();
      }
    }
}

PartitionGaugeクラス

 このMXMLコンポーネントは、以下の要素を持つカスタム版の長方形ゲージだ(描画はこの順序で行われる)。

  • マーカーの値と結びついた、最小値と最大値のアトリビュートを持つ、各色のトラックレンダラーが4つ
  • 1つのスケールレンダラー
  • 5つの三角形マーカー
    • 0の位置と100の位置に固定された、2つの黒いマーカー
    • ゲージの値を変更するための、3つの編集可能な色付きマーカー
<?xml version="1.0" encoding="utf-8"?>
<RectangularGauge paddingBottom="0" paddingTop="0" fontSize="10"
  xmlns="ilog.gauges.rectangular.*"
  xmlns:mx="http://www.adobe.com/2006/mxml"
  xmlns:ilog="http://www.ilog.com/2007/ilog/flex"
  xmlns:local="*">
  <scales>
    <RectangularLinearScale minimum="0" maximum="100"
      majorTickInterval="10" minorTickInterval="1" snapInterval="1"/>

  </scales>
  <elements>
    <ilog:RectangularTrackRenderer minimum="0" maximum="{m1.value}"
      startThickness="12" endThickness="12" y="-18"
      rendererColor="0x769600"/>
    <ilog:RectangularTrackRenderer
      minimum="{m1.value}" maximum="{m2.value}"
      startThickness="12" endThickness="12" y="-18"
      rendererColor="0xFF8900"/>
    <ilog:RectangularTrackRenderer
      minimum="{m2.value}" maximum="{m3.value}"
      startThickness="12" endThickness="12" y="-18"
      rendererColor="0xDB2218"/>
    <ilog:RectangularTrackRenderer
      minimum="{m3.value}" maximum="100"
      startThickness="12" endThickness="12" y="-18"
      rendererColor="0x8C091E"/>

    <ilog:RectangularScaleRenderer tickPlacement="trailing"
    majorTickLength="12" minorTickLength="8"
    majorTickWidth="3" minorTickWidth="1"/>

    <local:TriangleMarker color="0x000000" value="0" editable="false"/>
    <local:TriangleMarker color="0x000000" value="100" editable="false"/> 

    <local:TriangleMarker id="m1" color="0x769600"
      max="{Number(m2.value)}" value="20"/>
    <local:TriangleMarker id="m2" color="0xFF8900" min="{Number(m1.value)}"
      max="{Number(m3.value)}" value="50"/>
    <local:TriangleMarker id="m3" color="0xDB2218"
      min="{Number(m2.value)}" value="80"/>

  </elements>
</RectangularGauge>

 このFlex Builderプロジェクトは、ここからダウンロードできる。このプロジェクトを動かすには、IBM ILOG Elixirのインストールが必要となる。

 IBM ILOG Elixirについての詳細は、http://www.ilog.co.jp/product/visu/ilogelixir/をご覧ください。

※このエントリは ブロガーにより投稿されたものです。朝日インタラクティブ および ZDNet Japan編集部の見解・意向を示すものではありません。
  • 新着記事
  • 特集
  • ブログ