TOPシステム開発> 画面遷移を作る
Nexaweb Studio
Nexaweb Studioで手軽にリッチクライアントアプリケーション開発

第2回:簡単に設定できる「Event Wizard」

著者:チェンジビジョン  岩永 寿来、豆蔵  長谷川 裕一
2007/4/16
前のページ  1  2  3
画面遷移を作る

   最後に簡単な画面遷移について解説する。メニュー「File → New → Panel UI File」を選択し、nextというnxmlファイルを新規作成する。これで新しいUIが作成される。

   次に作成されたnext.nxmlにラベルを配置して適当な文字(例:hoge)を表示しておく。なおPanelのほかにもWindowやDialogといったUIも作成できるので、実際に作ってみてどのような画面になるか確認してもよい。

   Nexawebでは画面遷移については「パネルなどのUIを削除して新しいパネルと置き換える」というNXMLの構造の変化で行っている。今回はindex.nxmlのラベルとボタンが配置されているパネルを削除して、next.nxmlで定義されているUIで置き換える方法で行う。

   index.nxmlに「画面遷移実行」ボタン配置してEvent Wizardを実行し、onCommandに新しいMacroを定義する。続いて要素を置き換えるXUpdateのコマンドであるreplace-childrenを選択し、画面遷移実行ボタンにMacroを割り振る。

   ここまでの操作でindex.nxmlは下記のようになっているはずだ(リスト3)。
リスト3:画面遷移ボタンへのMacro適用後の結果
リスト3:画面遷移ボタンへのMacro適用後の結果
(画像をクリックすると別ウィンドウに拡大図を表示します)

   置き換える要素は、replace-childrenの子要素として定義すればよい。今回はnext.nxmlで定義されているUIを取り込みたいので、XML文書をインポートするXIncludeを用いる。

   XIncludeはhref属性でインポートしたいファイルを指定する(リスト4)。

リスト4:XInclude
リスト4:XInclude
(画像をクリックすると別ウィンドウに拡大図を表示します)


今回のまとめ

   今回はNexawebアプリケーションの大きな特徴ともいえるUIについて、HelloWorldから、Nexawebの特色であるXUpdateによるXMLの更新やXIncludeなどを用いた画面遷移の方法、実行時に画面を変更する方法を紹介した。

   次回は居酒屋の注文システムの作成を例に、Nexaweb Studioのアプリケーション構築手法の詳細に迫っていく。

前のページ  1  2  3


株式会社チェンジビジョン 岩永 寿来
著者プロフィール
株式会社チェンジビジョン  岩永 寿来
モデリングツールJUDEを開発しているチェンジビジョンで、ソフトウェア開発プロジェクトの見える化を支援するTRICHORDを開発している。最近は2DやJOGLなど3D技術に興味があり、クールなUIやエフェクトを日々探求している。共著として「Spring入門(技術評論社)」、「Spring2.0入門(技術評論社)」。


株式会社豆蔵 長谷川 裕一
著者プロフィール
株式会社豆蔵  長谷川 裕一
XMLの技術開発やCORBA、EJBを使用したシステム開発などを経て、現在はアジャイル開発プロセスの導入から工学的なソフトウエアプロセスの策定、オープンソースプロダクトに関するコンサルタント、アーキテクトとして常に第一線で活躍。共著として「プログラムの育てかた 現場で使えるリファクタリング(ソフトバンク)」、「Spring入門(技術評論社)」。


INDEX
第2回:簡単に設定できる「Event Wizard」
  イベント処理を簡単に設定できる「Event Wizard」
  画面に表示される文字列を変更する
画面遷移を作る