ILOG Elixir

IBM ILOG Elixir:ゲージでFlex 4(Gumbo)のFXGを利用する

2009-05-21 08:00:00

 ご存知の人もいるだろうが、Adobeは同社のオープンソースウェブサイトで、Gumboとも呼ばれるFlex 4の初期のナイトリービルドをリリースしている。これらはこのページからダウンロードすることができる。試してみたい人は、これらはまだ初期のビルドであることを念頭に置き、説明をよく読んで、慎重に試した方がいいだろう。

 Adobeがこれらの初期のビルドで導入したものの中で、素晴らしいものの1つが、MXMLに対するFXG形式の追加だ。これによって、MXMLの中でオブジェクトのグラフィック表示を、外部資産(SWF、ラスター画像など)や、ActionScriptを使ったプログラムによる描写に頼ることなしに定義することができる。Flex 3のずっと柔軟性の低いコードで書く必要があったようなものも、数行のFXGで書けるため、非常に便利だ。

 わたしは我慢できずにこれを試してみることにし、GumboのFXGを使ってIBM ILOG Elixirのゲージのグラフィック表示を定義してみた。IBM ILOG ElixirのゲージはFlex 3ベースで作られており、私はこれとFXGを組み合わせて使うことができるか少し心配だったのだが、実際には非常に簡単だった。Flex BuilderのプロジェクトをGumboおよびFlash Player 10向けに設定し(このページを参照して欲しい)、IBM ILOG Elixir SWCをライブラリのパスに追加して、コーディングを始めることができた。

 初めての挑戦だったため、できるだけ単純な例から始めたいと考えた。そのため、わたしは水平型のゲージの背景をFXGで書いてみることにした。

 まずmain.mxmlファイルを作成して、ゲージための単純なGumboアプリケーションの骨格を作り、既存のすべての背景要素を空にした。

<?xml version="1.0" encoding="utf-8"?>
<Application xmlns="http://ns.adobe.com/mxml/2009"
                    xmlns:ilog="http://www.ilog.com/2007/ilog/flex">
  <ilog:SimpleHorizontalGauge showTrack="false" editable="true" value="33"
     minimum="0" maximum="100" backgroundElements="[]"/>
</Application>

 次のステップは、ゲージの背景スキンを収めた、GaugeBackgroundSkin.mxmlファイルをFXGで作成することだ。

<?xml version="1.0" encoding="utf-8"?>

<Group xmlns="http://ns.adobe.com/mxml/2009"
             xmlns:ns="library:adobe/flex/gumbo">
  <Rect width="480" height="100" radiusX="7" radiusY="7">
    <filters>
      <ns:DropShadowFilter/>
    </filters>
    <fill>

    	<SolidColor color="0x0000aa"/>
    </fill>
    <stroke>
    	<SolidColorStroke color="0xaa0000" weight="3"/>
    </stroke>
  </Rect>

</Group>

 コードを見ると、いくつかのことに気づくだろう。

  • 描画オブジェクトをグループ化するために、Groupという名前の新しいクラスを使った。これが、FXGのコンテンツを管理するための特定のコンテナとなっている。Skinと呼ばれる、より特殊化されたサブクラスが存在するが、ここでは必要としなかった。
  • ここでは角丸長方形を描画するためにRectオブジェクトを使っているが、他にも直線を描画するもの(LineSegment)や曲線を描画するもの(CubicBezierSegment)など、他にも多くのタグを使うことができる。
  • Strokeクラスは、fillの方と一貫性のあるSolidColorStrokeで置き換えられている。
  • FXGのタグの名前空間は、http://ns.adobe.com/mxml/2009 となっている。Flex 3の名前空間とは異なるので注意が必要だ。
  • おそらくバグだと思われるが、上記の名前空間ではShadowDropFilterを使うことができなかったため、library:adobe/flex/gumboの名前空間を使わなくてはならなかった。

 最後に、ゲージのbackgroundSkinスタイルプロパティを、FXGコンテンツであるGaugeBackgroundSkinに設定した。

  <ilog:SimpleHorizontalGauge showTrack="false" editable="true" value="33"
         minimum="0" maximum="100" backgroundElements="[]"
         backgroundSkin="GaugeBackgroundSkin"/>

 これで終わりだ。その結果は以下の図のようになる。背景が青く設定され、FXGの機能である影がついている。

 (FXGの丸角長方形の角が、明らかに少し乱れていることにも気づくだろう)

 もちろん、これだけでは不十分かもしれないが、FXGを使ったコンポーネントのカスタマイズが、どれだけ簡単かは伝わったことと思う。次のステップは、ゲージの中の値を示すマーカーの表示にFXGを使ってみることになるだろうし、その次は目盛りに音を立てさせることになるだろう。メカニズムは背景の場合と同じなので、これらのこともすべて可能なはずだ。

 もし、自分で試して、IBM ILOG ElixirとGumboの組み合わせを経験してみたいのであれば、今回試したものに対応するFlex Builderプロジェクトをここからダウンロードすることができる。これは、Flex 4.0.0.2514のビルドでテストされている。前述の通り、Flex 4はまだ開発の初期段階にあるため、このプロジェクトが将来リリースされるビルドでも動作すると約束することはできない。

 手短に言えば、Flex 4を使う場合は、IBM ILOG ElixirのようなFlex 3(Halo)コンポーネントでも、FXGのタグを完全に活用できるということだ。もちろん長期的には、Flex 4の機能を完全に生かせるよう、コンポーネントはGumboモデルに移行する必要がある。

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

 


原文へ

※このエントリは ブロガーにより投稿されたものです。朝日インタラクティブ および ZDNet Japan編集部の見解・意向を示すものではありません。
  • 新着記事
  • 特集
  • ブログ
このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]