OpenLaszloアドバンスド・テクニック
OpenLaszloアドバンスド・テクニック(3) Page 4/4

リアルタイム株価チャートの基盤フレームを作る

ネットエイト
小野 圭二
2006/6/7

最後の仕上げとWebブラウザでの動作確認

- PR -

 ここまでできたなら、全体の動きを確認してみます。「チャート表示ビュー」にある3つのビューをチェックボックスと連動させます。<chartview>の各タグに該当するチェックボックスとの状態により、表示/非表示を切り替えるようにvisible属性を設定します(リスト9)。

 さらにもう1つ、現状では<chartview>タグの各ビューはcanvas内を自由にドラッグ移動できます。ここで移動範囲を制限してみましょう。まずは上下(y軸)方向に制限を付けます。chartviewクラスにリスト10のコードを追加します。

<chartview name="candlechart" ……略……
           visible="${canvas.cont.chartselect.cs1.value}"/>
<chartview name="realtimechart" ……略……
           visible="${canvas.cont.chartselect.cs2.value}"/>
<chartview name="datalist" ……略……
           visible="${canvas.cont.chartselect.cs3.value}"/>
リスト9 チャート表示ビューとチェックボックスの連動

<method event="ony">
  <![CDATA[
    var upper_y = 0;
    var lower_y = canvas.height;
    var now_y   = this.y;
    var height  = this.height; 
    if( now_y < upper_y )
        this.setAttribute( 'y', upper_y );
    if( lower_y < (now_y+height) )
        this.setAttribute( 'y', lower_y-height );
  ]]>
</method>
リスト10 上下(y軸)方向の移動範囲を制限

 コンポーネントのyポジションが変化すると「ony」というイベントが発生します。同じく横(x軸)方向の制限は「onx」を使ってリスト11のようにできます。

<method event="onx">
  <![CDATA[
    var left_x  = 0;
    var right_x = canvas.width;
    var now_x   = this.x;
    var width   = this.width;
    if( now_x < left_x )
       this.setAttribute( 'x', left_x );
    if( right_x < (now_x+width) )
        this.setAttribute( 'x', right_x-width );
  ]]>
</method>
リスト11 横(x軸)方向の移動範囲を制限

 ここまでのコードはリスト12のようになっているはずです。これを実行したものが、図5〜7になります。チェックボックスのチェック状態によって各チャートビューの表示/非表示が切り替わること、表示されているチャートビューがドラッグ移動できることを確認してください。

図5 初期の実行画面
(画像をクリックすると拡大します)

図6 「銘柄選択」を実行したときの画面
(画像をクリックすると拡大します)  

図7 すべてのチェックボックスを選択したときの画面
(画像をクリックすると拡大します)  

<?xml version="1.0" encoding="UTF-8" ?>
<canvas>
  <dataset name="meigara">
    <company id="1">(株)ABC社</company>
    <company id="2">(株)XYZ社</company>
  </dataset>

  <class name="chartview"
         onmousedown="bringToFront();drg.apply()"
         onmouseup="drg.remove()">
    <dragstate name="drg"/>
    <method event="ony">
      <![CDATA[
        var upper_y = 0;
        var lower_y = canvas.height;
        var now_y   = this.y;
        var height  = this.height; 
        if( now_y < upper_y )
            this.setAttribute( 'y', upper_y );
        if( lower_y < (now_y+height) )
            this.setAttribute( 'y', lower_y-height );
      ]]>
    </method>
    <method event="onx">
      <![CDATA[
        var left_x  = 0;
        var right_x = canvas.width;
        var now_x   = this.x;
        var width   = this.width;
        if( now_x < left_x )
            this.setAttribute( 'x', left_x );
        if( right_x < (now_x+width) )
            this.setAttribute( 'x', right_x-width );
      ]]>
    </method>
  </class>

  <class name="chkb" extends="checkbox"
         fontsize="14" visible="false">
    <method event="onclick">
      Debug.write( this.text + ":" + this.value );
    </method>
  </class>
  
  <!-- 
    銘柄、表示チャート選択ビュー
   -->
  <view name="cont" width="${canvas.width}"
                    height="${canvas.height*0.2}">
    <simplelayout axis="x"/>
    <!-- 銘柄選択 -->
    <view name="stocklist" width="${parent.width*0.4}"
          height="${parent.height}" bgcolor="red">
      <text x="50" y="20" fontsize="14">銘柄:</text>
      <combobox name="cbox" x="90" y="20"
                defaulttext="銘柄選択" editable="false">
        <textlistitem datapath="meigara:/company"
                      text="$path{'text()'}" value="$path{'@id'}"/>
        <method event="onselect">
            var obj = this.getSelection();
            var id = obj.getValue();
            Debug.write( "id: " + id );
            
            with( canvas.cont.chartselect ){
              if( !cs1.visible ){
                for( var i=0; i<subviews.length; i++ ){
                  subviews[i].setVisible( true );
                }
                
                cs1.setValue( true );
              }
            }
        </method>
      </combobox>
    </view>
    <!-- 表示チャート選択 -->
    <view name="chartselect" width="${parent.width*0.6}"
          height="${parent.height}"  bgcolor="green">
      <chkb name="cs1" x="10" y="10"
            text="ローソク足・出来高チャート"/>
      <chkb name="cs2" x="10" y="30"
            text="当日株価チャート"/>
      <chkb name="cs3" x="10" y="50"
            text="過去株価一覧"/>
    </view>
  </view>
  <!-- 
    チャート表示ビュー
   -->
  <view name="chartarea" y="${parent.cont.height+1}"
        width="${canvas.width}" height="${canvas.height*0.8}">
    <!-- ローソク足・出来高チャートビュー -->
    <chartview name="candlechart" x="0" y="0"
               width="${parent.width/2}"
               height="${parent.height/2}"
               bgcolor="blue"
               visible="${canvas.cont.chartselect.cs1.value}"/>
    <!-- リアルタイム株価チャートビュー -->
    <chartview name="realtimechart"
               x="${parent.width/2}" y="0"
               width="${parent.width/2}"
               height="${parent.height/2}"
               bgcolor="silver"
               visible="${canvas.cont.chartselect.cs2.value}"/>
    <!-- 株価一覧ビュー -->
    <chartview name="datalist" x="0" y="${parent.height/2}"
               width="${parent.width}"
               height="${parent.height/2}"
               bgcolor="yellow"
               visible="${canvas.cont.chartselect.cs3.value}"/>
  </view>
</canvas>
リスト12 完成したコード

 今回はリアルタイム株価チャートの基盤部分を作成しました。次回は「チャート表示ビュー」に各コンポーネントを配置します。お楽しみに。(次回へ続く)

  4/4  

 INDEX

OpenLaszloアドバンスド・テクニック(3)
 リアルタイム株価チャートの基盤フレームを作る
  Page1
はじめに
アプリケーションの設計条件
株価チャートのおさらい
アプリケーションの画面設計
  Page2
画面モデルビューの作成
  Page3
ビューへのコンポーネント配置
Page4
最後の仕上げとWebブラウザでの動作確認




HTML5 + UX フォーラム 新着記事
@ITメールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)

注目のテーマ

HTML5+UX 記事ランキング

本日 月間
ソリューションFLASH