画面テンプレートから見る LightSwitch HTML Client の変更点

LightSwitch の Silverlight クライアントと HTML クライアントとは、ソリューションの別プロジェクトとして開発する必要があり、双方を統合する形で開発することはできません。 画面のテンプレートも SL と HTML とでは異なっています。

 

Silverlight クライアントではデフォルトで 5種類のテンプレートから選択できました。

image

それに対して HTML クライアントでは画面テンプレートは 3種類です。

image

テンプレート数が減って機能ダウンしたように見えますが、スマホなどの解像度、タッチ操作を考えると要素が多すぎる画面はできるだけ避けるべきだ、という意味では適切な範囲ではないかと思います。なにしろ HTML ですからね、スタイルはともかく構造はシンプルなほうがいいです。
例えば、Silverlight クライアントの “List and Details” は PC だからこそ現実的な画面なのはアプリを実行してみれば明らか。
※もちろん今後、正式版に向けてテンプレートが追加される可能性はありますが。

image


HTML クライアントの画面テンプレートを具体的に見てみましょう。

 

Browse Data Screen

image

リスト形式の表示です。PC上のブラウザで見ると間延びして見えますが、スマホを考えるとデフォルトでは適切なレイアウトですね。

image

要素のレイアウトを “List” から “Tile List” に変更すると、PCでもスマホでも見やすいレイアウトになるかも。Windows 8 の Modern UI を思わせるレイアウトですね、
※タイルの高さが高すぎて格好悪いですが、もちろん変更可能。あるいは写真や他の情報をタイルに含めることもできます。話が紛れるので、この辺りはまた今度。

imageimage


View Details Screen

詳細表示画面です。Browse Data Screen の ItemTap アクションに紐づける形で表示することが多いと思います。
画面が生成される際には、全てのフィールドは Text コントロールになっていますが、TextBox や TextArea に変更することで編集画面にすることもできます。
スマホを意識してか、Silverlight クライアントでは複数の Rows Layout になるような部分では Tab 切り替えで表示するレイアウトが生成されます。

imageimage

Columns Layout を使って広い画面を有効に使うようなレイアウトにすることもできますが諸刃の剣です。それならば Silverlight クライアントでさらに見栄えよく操作しやすいクライアントにするほうがいいと思います。(私見)


Add/Edit Details Screen

詳細情報の編集や新規作成用の画面です。
View Details Screen もコントロールの種類を変更すれば編集画面にできるので使い分けが難しいように思うかもしれませんが、キャプションレイアウトが左か上かの違いだと思っていいと思います。コントロールの種類もキャプションの位置も後から変更できるので、詳細画面は View Details Screen でも Add/Edit Details Screen でも、どちらで作ってもかまわないと思います。
ただし Add/Edit Details Screen はキャプションが上にあるということで、縦方向に長い画面になりやすいです。逆に View Details Screen は長い文字列の値が見づらくなる可能性があるかもしれません。この辺りはケースバイケースで使い分け、ということになるでしょうか。

image


(おまけ)Dialog

厳密には画面レイアウトではないのですが、HTML Client ではダイアログを使うケースが多くなりそうです。
詳細表示・編集、新規作成などの際に画面切り替えをする代わりに使うことがあるはず。

image

以上が HTML クライアントの画面テンプレート、基本的な画面レイアウトです。画面のパターンは多くはないと思うので、まずは上記の各画面をどう使うかをイメージするといいのではないでしょうか。
実際の開発手順については、おいおい、また改めて。

広告
カテゴリー: LightSwitch タグ: , パーマリンク

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中