OpenLaszloアドバンスド・テクニック（3）　Page 3/4

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

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

■ビューへのコンポーネント配置

（1）コンボボックス・コンポーネントの配置

　まず「銘柄選択」のコンボボックスを配置してみます。銘柄は「（株）ABC社」と「（株）XYZ社」の2社から選択するものとします。銘柄リストは<dataset>にありますので、これを<combobox>にバインドします。リスト5のコードを「stocklist」ビューに配置します。

<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 );   </method> </combobox>

リスト5　「銘柄選択」のコンボボックスを配置

　<combobox>タグにバインドされたデータをプルダウンメニューから選択すると「onselect」イベントが発生しますのでgetSelectionメソッドを使って「obj」オブジェクトとして取得します。このオブジェクトからgetValueメソッドを使って<textlistitem>タグのvalue属性が取得できます。これはcompanyデータのid属性がバインドされています。デバッグウィンドウに取得したデータを表示するようにしていますので確認してください。

　なお、本プログラムでは銘柄リストをLZXコードに直接書いていますが、実際にはパーソナライズされた銘柄リストをデータベースにアクセスして取得することがほとんどでしょう。そんなときには、第2回「Webアプリと連携するためのコーディング基礎」で解説したように、<dataset>タグのsrc属性にサーバサイドプログラムを指定すればデータをサーバから取得できます。さらに、このLZXアプリケーション起動時に自動的に銘柄データをサーバから取得したいなら、同じく<dataset>タグのrequest属性をtrueにします。

<dataset name="meigara"          src="http://server program url" request="true"/>

　これでサーバからデータを取得する場合も、本プログラムと同じ動作が実現できます。

（2）チェックボックス・コンポーネントの配置

　次に、表示するチャートを選択するチェックボックスを配置します。表示はデフォルトで「ローソク足・出来高チャート」を表示し、そのほかはここで配置するチェックボックスが選択されたら表示することにします。リスト6のコードをchartselectビューに配置します。

<checkbox name="cs1" x="10" y="10" fontsize="14">ローソク足・出来高チャート   <method event="onclick">     Debug.write( "ローソク足チャート選択：" + this.value );   </method> </checkbox> <checkbox name="cs2" x="10" y="30" fontsize="14">当日株価チャート   <method event="onclick">     Debug.write( "当日株価選択：" + this.value );   </method> </checkbox> <checkbox name="cs3" x="10" y="50" fontsize="14">過去株価一覧   <method event="onclick">     Debug.write( "過去一覧選択：" + this.value );   </method> </checkbox>

リスト6　チェックボックス・コンポーネントの配置

　各チェックボックスがチェックされると「onclick」イベントが発生しますので、同様にデバッグウィンドウで確認してください。

（3）コンポーネント／ビュー間の連動設定

　さて、（1）と（2）でコンポーネントをそれぞれ配置しましたが、操作シナリオのa〜bを実現するためにひと工夫必要です。まず、操作シナリオのaを実現するためにチェックボックス・コンポーネントをデフォルトで非表示にします。3つのチェックボックスを<view>タグでくくってそのビュー全体を非表示にするのは簡単ですが、せっかく<class>タグを覚えたので、ここでは属性を「visible=false」にした<checkbox>を継承したクラスを作成してみましょう（リスト7）。

<class name="chkb" extends="checkbox" fontsize="14" visible="false"/> <chkb name="cs1" ……略…… > ローソク足・出来高チャート <chkb name="cs2" ……略…… > 当日株価チャート <chkb name="cs3" ……略…… > 過去株価一覧

リスト7　<checkbox>を継承した「chkb」クラスの作成

そして「銘柄選択」がされたときに、このチェックボックスが表示されるようにしますので、cboxコンボボックスのメソッドに機能を追加します（リスト8）。

<method event="onselect">   <![CDATA[    ……略……    ……略……    ……略……     with( canvas.cont.chartselect ){       if( !cs1.visible ){         for( var i=0; i<subviews.length; i++ ){           subviews[i].setVisible( true );         }         cs1.setValue( true );       }     }   ]]> </method>

リスト8　cboxコンボボックスのメソッドに機能追加

　この追加されたコードでは、「cs1」チェックボックスが表示されているかどうか判断して、表示されていない場合は以下のループ内を実行し、各subviews（チェックボックス）を表示するようにsetVisibleメソッドに「true」を設定して実行します。

　この追加されたコードは「with(){}」でくくられていますが、これは「with()」のカッコ内で宣言されたものが「{}」内に適用されることを表しています。つまり、「cs1.visible」は「canvas.cont.chartselect.cs1.visible」と等価であり、「subviews.length」は同じく「canvas.cont.chartselect.subviews.length」と等価です。「subviews」は<view>タグの属性であり、「そのviewに属する子ビューの配列」です。

　さらに、初めて表示されたときに「ローソク足・出来高チャート」だけはチェックされた状態になっていてほしいので（操作シナリオのb）、cs1チェックボックスだけにチェックを入れておきます。これは<checkbox>タグのsetValueメソッドに「true」を設定すると実現されます。

　そうそう、メソッドの初めと終わりに「<![CDATA[ 〜 ]]>」が追加されていますが、これはコード内の文字をエスケープするためのものです。ループ処理で「i<subviews.length」とあり、この部分の「<」がタグと解釈されるので、これをエスケープするために全体をCDATAセクション（/aig/01xml/cdata.html）でくくっています。「<」だけを「&lt;」で置き換えても同じです。

3/4

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

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）