[ThinkIT] 第3回：サンプルからNexawebの機能を学ぶ (1/4)

TOP＞システム開発＞ Nexawebでる注文システムを作る

Nexaweb Studioで手軽にリッチクライアントアプリケーション開発

第３回：サンプルからNexawebの機能を学ぶ
著者：チェンジビジョン岩永寿来、豆蔵長谷川裕一
2007/6/12

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入門（技術評論社）」。

INDEX
第3回：サンプルからNexawebの機能を学ぶ
	Nexawebでる注文システムを作る
	メニューテーブル用のデータを用意する
	orderメソッド
	データソースの定義