ILOG Elixir

IBM ILOG Elixir:カレンダーに横方向のスクロールバーを追加する

2009-04-22 08:00:00

 カレンダーはIBM ILOG Elixir 2.0で導入された新しいコンポーネントの1つだ。私は掲示板で週表示を使って特定の月の表示や操作を行う方法について質問を受けた。実際、カレンダーコンポーネントで表示する時期の範囲を7日よりも大きい値に設定すると、コンポーネントは自動的に月モードで動作してしまう。

 これを解決するには、カレンダーコンポーネントで表示されている、目にみえる期間の始まりと終わりを、横方向のスクロールバーの位置と同期させればよい。

カレンダーコンポーネントにスクロールバーを追加する

 この同期は、次のように簡単に実現できる。

  • スクロールバーの範囲を0からその月の日数マイナス7までに設定する。
  • スクロールバーが動かされた場合、その月の最初の日付にスクロールバーの位置を加算することで、新しい可視範囲期間の最初の日付を計算する。
  • 可視範囲期間の最後の日付は、最初の日付に7を加算することで求められる。

 その結果は以下のようになる。

 注意:理由は不明だが、スクロールが遅くなる場合があるかもしれない。矢印をクリックするとこの問題が解決される場合がある。純粋なFlexアプリケーションでは、この問題は生じないはずだ。

無限スクロールバー

 このサンプルをベースに、より複雑なコンポーネントである、無限スクロールバーを作成する。

 無限スクロールバーを使えば、カレンダーを次のように操作することができる。

  • 最初はスクロールバーのノブは中央に配置されている。
  • ノブを左か右へドラッグすると、カレンダーは過去あるいは未来方向に1日単位でスクロールを始める。
  • スクロール速度を大きくするには、ノブをスクロールバーの右端か左端にドラッグする。
  • スクロールを止めるには、マウスボタンを離すかノブを中央に戻す。

 その仕組みは次のようになっている。

  • スクロールの範囲は0から20までで、デフォルト値は10になっている。10よりも小さい位置は過去への移動を、10を超える位置は未来への移動を意味する。
  • ユーザーがスクロールバーをクリックし始めると、タイマーがスタートする。
  • このタイマーのディレイは非常に短い間隔に設定されている。
  • このタイマーのリスナーはカウンターを加算する。
  • このカウンターが一定のトリガー値に達すると、カレンダーの可視範囲は指定された方向に1つシフトする。
  • このトリガー値は、スクロールバーの位置から基本的な公式を使って求められる。
  • マウスボタンを離すと、タイマーは止まり、スクロールバーの位置は中央の位置に設定される。

 その結果は、以下のようになる。

 これらの例は、カレンダーが1つのコンポーネントであり、さまざまな形でカスタマイズして利用できることをはっきり示している。

 ぜひ、コンポーネントパレットからデザインビューにドラッグアンドドロップするだけでなく、ユーザーマニュアルやリファレンスを見てみて欲しい。

 ソースはこちらから入手できる。このプロジェクトのコンパイルには、IBM ILOG Elixir 2.0が必要になる。

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

 


原文へ

 

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