OpenLaszloアドバンスド・テクニック
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>タグで宣言されています。

- PR -

 <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ブラウザでの動作確認




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

注目のテーマ

HTML5+UX 記事ランキング

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