本格派エンジニアの工具箱

第13回 Silverlight業務アプリケーションの画面遷移と画面レイアウト

この記事を読むのに必要な時間:およそ 3.5 分

第8回に続き,今回も業務アプリケーション開発にフォーカスを当て解説します。今回取り上げるテーマは画面遷移と画面レイアウトです。

Windowsアプリケーションの画面遷移方法

業務アプリケーションには,たとえば一覧画面から詳細画面を表示するなどの画面遷移という概念が必ず存在します。Windowsアプリケーションの場合,画面遷移は別ウィンドウを開くという手法が一般的に用いられます。

Webアプリケーションでこの別ウィンドウを開くという動作をそのまま真似しようとすると,新たにWebブラウザのウィンドウをもう1つ開くことになります。これは,Webブラウザのプラグインとして動作するSilverlightでも同様です。しかしながら,昨今主流のタブブラウザでは,設定によってはすべての新規ウィンドウをタブとして開いてしまいます。そのため,このような方法で画面遷移を行うことは推奨できません。

Silverlightアプリケーションの画面遷移方法

Silverlightでは,画面遷移を行うための機能として以下の2つが用意されています。

  • ナビゲーションフレームワーク
  • ChildWindow

ナビゲーションフレームワーク

ナビゲーションフレームワークは,Silverlightの一部の領域をWebページのように遷移させる機能です。具体的には,遷移させたい領域にFrameコントロールを配置し,そこに設定したページを差し替えるという方法になります

図1 ナビゲーションフレームワークによる画面遷移の仕組み

図1 ナビゲーションフレームワークによる画面遷移の仕組み

なお,図1では単純に画面を切り替える例しか示していませんが,たとえば「申請書の作成」⁠⁠申請書の確認」⁠⁠申請書の発行」⁠⁠発行の通知」といったような,順を追わないと遷移できないようなパターンもナビゲーションフレームワークで対応可能です。

子ウィンドウを表示する

Silverlight上で子ウィンドウを表示するためのコントロールがChildWindowです。この子ウィンドウはシステムのウィンドウではなく,あくまでSilverlightのUI要素としてウィンドウを表示しているため,Webブラウザの外はもとより,Silverlightの表示領域外にChildWindowを表示させることはできません。

図2 ChildWindowを使用して子ウィンドウを開いた状態

図2 ChildWindowを使用して子ウィンドウを開いた状態

ChildWindowを使う方法は,Windowsアプリケーションの画面遷移に最も近い動作となりますが,1つ大きな制限があります。それは,ChildWindowが自身を閉じるまで親ウィンドウを操作することができないモーダルウィンドウ専用であるということです。そのため,ChildWindowを複数開き,複数の作業を並行して行うといった用途でChildWindowを使うことはできません。

ComponentOne Studio for Silverlight

ComponentOne Studioは,業務アプリケーション開発に欠かせないグリッドやチャートはもちろん,ナビゲーション,コンテナ,スケジュールなど多数のコンポーネントを収録し,幅広い分野の業務アプリケーション開発に対応できるスイート製品です。全部で4つのテクノロジーをカバーする6種類の製品をラインナップしており,Silverlight用のコンポーネントは「for Silverliht」としてパッケージングされています。

  • ComponentOne Studio for Windows Forms
  • ComponentOne Studio for ASP.NET
  • ComponentOne Studio for iPhone-UX
  • ComponentOne Studio for Silverlight
  • ComponentOne Studio for WPF
  • ComponentOne Studio Enterprise

Silverlightでモードレスウィンドウを表示する

ComponentOne Studio for Silverlight(以下,ComponentOne Studio)には,C1Windowコントロール(以下,C1Window)が収録されており,モードレスウィンドウや,ドラッグによるリサイズといったChildWindowでは対応できない多数の機能がサポートされています。

リスト1 ChildWindow(Silverlight標準)とC1Window(ComponentOne Studio)の機能比較

 ChildWindow
(Silverlight標準)
C1Window
(ComponentOne Studio)
モードレスウィンドウ
(複数ウィンドウの表示)
(ウィンドウのアクティブ化操作)
-
ドラッグによるリサイズ-
ウィンドウの最小化/最大化-
ドラッグ移動の禁止-
位置変更時のイベント-
ウィンドウ状態変更のイベント-
アクティブ化変更のイベント-

C1Windowを使用することで図3のように,複数の子ウィンドウを開き,並行して作業するといったことが実現できます。

図3 C1Windowを使用して複数の子ウィンドウを開いた状態

図3 C1Windowを使用して複数の子ウィンドウを開いた状態

C1Windowの動作は,下記のオンラインデモで実際に確認することができます。

C1Windowのオンラインデモ:
http://www.grapecity.com/tools/jp/?componentonesl/window/demo/

著者プロフィール

八巻雄哉(やまきゆうや)

グレープシティ株式会社 テクニカルエバンジェリスト

コメント

コメントの記入