OpenLaszloアドバンスド・テクニック（3） Page 4/4
リアルタイム株価チャートの基盤フレームを作る
ネットエイト
小野 圭二
2006/6/7
■最後の仕上げとWebブラウザでの動作確認
ここまでできたなら、全体の動きを確認してみます。「チャート表示ビュー」にある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ブラウザでの動作確認 |
