ILOG Elixir

IBM ILOG Elixir:もう1つのカスタムゲージ--温度計クラス

2009-06-25 08:00:00

 この記事では、点滅する円形ゲージ色分けゲージバーグラフ型ゲージに続いて、IBM ILOG Elixirのゲージ・フレームワークを使って作れるゲージの別の例を示そう。

 このゲージは、MXMLコンポーネントとして定義されている。

<?xml version="1.0" encoding="utf-8"?>
<RectangularGauge xmlns:mx="http://www.adobe.com/2006/mxml" title="{bar.value + ' °C'}"
  xmlns="http://www.ilog.com/2007/ilog/flex" xmlns:local="*" direction="vertical" titleStyleName="titleStyle">
  <mx:Style>
    .titleStyle
    {
      font-size: 10;
    }
  </mx:Style>
  <mx:Number id="mainColor">0x5588AA
  <scales>
    <RectangularLinearScale minorTickInterval="1" majorTickInterval="10" minimum="0" maximum="40"
      snapInterval="1" id="scale"/>

  </scales>
  <elements>
    <local:ThermometerBackground width="100%" height="100%" id="back"
      mainColor="{mainColor}"
     >
    <local:ThermometerBar value="20"
      mainColor="{mainColor}"
      x="{back.scaleOriginX}"
      y="{back.scaleWidth/2}"
      height="{back.scaleHeight - back.scaleWidth/2}"
      width="{back.scaleWidth}"
      animationDuration="200"
      id="bar"/>
    <RectangularScaleRenderer width="35" tickPlacement="leading"
      fontSize="11"
      x="{back.scaleOriginX-20}"
      y="{back.scaleWidth/2}"
      height="{back.scaleHeight - back.scaleWidth/2}"
      buttonMode="true"
      area="center"
      minorTickWidth="1" majorTickWidth="1" majorTickLength="90%" minorTickLength="50%"
      labelPlacement="leading"/>
  </elements>

</RectangularGauge>

 このコンポーネントは、ゲージ・フレームワークのクラスを継承する2つのカスタムクラスを持っている。ThermometerBackground(RectangleRendererを継承)とThermometerBar(RectangularBarRendererを継承)だ。

 このゲージのスタイルは完全にプログラム可能で(外部のアセットは使われていない)mainColorアトリビュートを使えばゲージの色を変えることができる。

    ...
    <local:Thermometer mainColor="0x188238">
    ...

 この記事で説明したソースコードの入ったFlex Builderプロジェクトは、ここから入手できる。

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

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