 |
|
|
| 1 2 3 4 次のページ
|
|
| Nexawebでる注文システムを作る
|
前回は、HelloWorldを例にした簡単なNexawebアプリケーションを作成しました。今回からは、最近の大手居酒屋などで見かける注文システムをイメージ（図1）した例をもとにNexawebの詳細に迫っていきます。
図1：居酒屋さんの注文システム
注文システムの全体構成は図2のようになります。
図2：注文システムの全体構成図 （画像をクリックすると別ウィンドウに拡大図を表示します）
今回は図2のうち、顧客が利用する注文画面を使って、クライアント側でイベントやデータの加工などの処理を行えるMCO（Managed Client Object）と、XMLのデータを画面に貼り付けるデータバインドについて紹介します（図3）。
図3：今回のサンプルの構成図 （画像をクリックすると別ウィンドウに拡大図を表示します）
|
| MCOとはなにか
|
図4は作成するメニュー画面です。ここでは画面中央の商品名と単価などの一覧を表示するテーブル（以下、メニューテーブルと称します）と、注文の確認を実行する注文確認ボタンで構成されます。
図4：注文画面
このメニュー画面で注文確認ボタンが押されたときに、チェックボックスが選択されている商品名と単価をメッセージボックスに表示する処理を、MCOを用いて行います。
メニューテーブルに表示するデータは、まずは直接UIに埋め込みます。なおXMLから取得したデータをもとにメニューテーブルを作成する方法については、後ほどのデータバインドで説明します。
テーブルのUIについては少し補足しましょう。Nexaweb Visual EditorのPaletteから「table」UIを選択し、nxml上に適当に配置してみてください。するとリスト1のような2つの列と3つの行で構成されたテーブルが表示されます。テーブルのUIは、columnタグがテーブルのヘッダ（図4の1）を、rowタグは行（図4の2）をあらわします。列（図4の2）はrowタグの子要素としてcellタグを用いて表現します。
リスト1：テーブル
<table height="105"…………略>
<column>
<header text="Column #1"/>
</column>
<column>
<header text="Column #2"/>
</column>
<row>
<cell text="Row 1 Cell 1"/>
<cell text="Row 1 Cell 2"/>
</row>
<row>
<cell text="Row 2 Cell 1"/>
<cell text="Row 2 Cell 2"/>
</row>
<row>
<cell text="Row 3 Cell 1"/>
<cell text="Row 3 Cell 2"/>
</row>
</table>
|
1 2 3 4 次のページ
|
|
|
|
|
著者プロフィール
株式会社チェンジビジョン 岩永 寿来
モデリングツールJUDEを開発しているチェンジビジョンで、ソフトウェア開発プロジェクトの見える化を支援するTRICHORDを開発している。最近は2DやJOGLなど3D技術に興味があり、クールなUIやエフェクトを日々探求している。共著として「Spring入門(技術評論社)」、「Spring2.0入門(技術評論社)」。
|
|
著者プロフィール
株式会社豆蔵 長谷川 裕一
XMLの技術開発やCORBA、EJBを使用したシステム開発などを経て、現在はアジャイル開発プロセスの導入から工学的なソフトウエアプロセスの策定、オープンソースプロダクトに関するコンサルタント、アーキテクトとして常に第一線で活躍。共著として「プログラムの育てかた 現場で使えるリファクタリング（ソフトバンク）」、「Spring入門（技術評論社）」。
|
|
|
|
|
|
