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

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

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

■画面モデルビューの作成

　この画面設計に基づいてビュー化したモデルが図4です。このコードがリスト1となります。ここでは分かりやすくするために各ビューに色を付けています。

図4　画面ビューレイアウト

<?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"/>   </class>   <simplelayout spacing="1"/>   <!--      銘柄、表示チャート選択ビュー    -->   <view name="cont"         width="${canvas.width}"         height="${canvas.height*0.1}">     <simplelayout axis="x"/>     <!-- 銘柄選択 -->     <view name="stocklist"           width="${parent.width*0.4}"           height="${parent.height}"           bgcolor="red"/>     <!-- 表示チャート選択 -->     <view name="chartselect"           width="${parent.width*0.6}"           height="${parent.height}"           bgcolor="green"/>   </view>   <!--      チャート表示ビュー    -->   <view name="chartarea"         width="${canvas.width}"         height="${canvas.height*0.9}">     <!-- ローソク足・出来高チャートビュー -->     <chartview name="candlechart"                x="0"                y="0"                width="${parent.width/2}"                height="${parent.height/2}"                bgcolor="blue"/>     <!-- リアルタイム株価チャートビュー -->     <chartview name="realtimechart"                x="${parent.width/2}"                y="0"                width="${parent.width/2}"                height="${parent.height/2}"                bgcolor="silver"/>     <!-- 株価一覧ビュー -->     <chartview name="datalist"                x="0"                y="${parent.height/2}"                width="${parent.width}"                height="${parent.height/2}"                bgcolor="yellow"/>   </view> </canvas>

リスト1　画面ビューレイアウトのソースコード

独自クラスの作成

　リスト1のコードではチャート表示の各ビューである

• ローソク足・出来高チャート［candlechart］
• リアルタイム株価チャートビュー［realtimechart］
• 株価一覧ビュー［datalist］

に共通の振る舞いを持たせるため、「chartview」という独自クラスを作成して使っています。「chartview」クラスは<class>タグで宣言されています。

　<class>タグはコンポーネントを拡張して独自のコンポーネントを作成するために使われます。ビューやコンボボックスなど、LZX標準タグのほとんどがこのクラスタグで機能拡張できます。また、ほとんどのLZX標準タグが同様に機能拡張されて作られています。

　<class>タグには継承を表すextends属性があります。このextends属性を指定することで、「このクラスが何のクラスを継承するか」を指定でき、同時にそのクラスの機能を継承できます。このextends属性を指定しないとデフォルトで「view」クラスを継承することになります。

　ここでは、viewクラスを継承し、ドラッグ機能を備えたクラスとしてchartviewクラスを作成しています。このようにクラスを作成すると、それ以降はname属性で指定した名前をタグ名として使用できます。そのため、チャート表示ビューでは<chartview>タグを使用しています。早い話、「オブジェクトを継承したクラスを作って使っている」ということです。

制約の記述

　また、各タグの「width／height／x／y」で「${}」を使っています。これは「制約」と呼ばれるものです。例えば、contビューのheightは「${canvas.height*0.1}」となっています。これは「<canvas>の高さ（height）の10分の1」に同じであるということです。同じく、stocklistビューのheightは「${parent.height}」となっていますが、これは「自分の親（parent）の高さ（height）」に同じであるということです。

　この場合の「親（parent）」は1つ上のビューであるcontビューを指します。親（parent）はつなげることで階層をたどっていくことができます。例えばリスト2の例では、「v4」が「v3」のheight属性を制約とするならば、「v4」のheight属性は「${parent.height}」で表されます。「v2」のheight属性を制約とするならば「${parent.parent.height}」、「v1」を制約とするならば「${parent.parent.parent.height}」です。

<canvas>     <view name="v1" height="....">       <view name="v2" height="....">         <view name="v3" height="....">           <view name="v4" height="...."/>         </view>       </view>     </view>   </canvas>

リスト2　制約で階層をたどる

　このように、parentをつなげて階層をたどることができますが、あまり長くなると混乱してきます。そこで、ルートから見る方法もあります。つまり「v4」が「v1」のheight属性を制約とする場合、「${canvas.v1.height}」とも書けるのです。これは階層のルート（<canvas>）からたどった書式です。

　<view>タグに名前を付ける属性には、「name」のほかに「id」もあります。id属性で指定された名前はそのアプリケーションでユニークな名前でなければなりません。name属性は同じ階層に同名がなければいいのです。リスト3の例では、同じ階層で同名ではないのでOKです。

<canvas>     <view name="vid">       <view name="v2"/>     </view>     <view name="v1">       <view name="vid"/>     </view>   </canvas>

リスト3　name属性の使用法

　ところがリスト4の例では、同名のidがあるのでコンパイルでワーニングが出ます。

<canvas>     <view id="vid">       <view name="v2"/>     </view>     <view name="v1">       <view id="vid"/>     </view>   </canvas>

リスト4　id属性の間違った使用法 id属性の場合、異なる階層であっても同名のidがあってはならない。

2/4

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

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