LightSwitch HTML Client の Browse Data Screen で Tile List を使う

LightSwitch HTML Client でデータを一覧表示するには Browse Data Screen テンプレートを使います。

image

スマホなどの解像度を意識しているためか PC で見るとかなり間延びして見えるというか、画面の使い方がもったいない感じ。
解像度ごとにクライアントを分けるとか、 PC では従来の Silverlight クライアントを使うとかのやり方もありますが、開発も運用もコストがかかりそう。もちろん要求上、複数クライアントが必要なのであればそれでいいのですが。

Browse Data Screen をデザイナー画面で見ると List コントロールにエンティティのサマリが配置されています。つまり(氏名とか商品名とかの、それほど長くない)文字列が入ってきます。
List コントロールは内部の要素を縦方向に1列に並べるコントロールです。このため幅方向がスカスカしたレイアウトになってしまうわけです。
※サマリ=LightSwitch ではデフォルトはテーブルの最初の String 型の列

SNAGHTMLd1454d

一つの解決方法が Tile List です。リキッドレイアウトなので、解像度の高い PC のブラウザであれば横方向に複数個、スマホならば横方向は1個ずつ、が実現できます。

SNAGHTMLd19437SNAGHTMLd1ebd8

 

Tile List に変更すると内部のコントロールは “Rows Layout” になります。ここでは先ほどとの比較のために Summary に変更します。
これで実行するとこんな感じ。

image

・・・今度は縦方向に間延びします。写真を貼るとか "Rows Layout” でもっと詳しい内容を表示するのであればこのサイズでもいいかもしれません。が、それでもサイズを変更したいことはあるはず。


せっかくの HTML なので IE の F12 開発者ツールで少し覗いてみます。

image

アイテムの要素は width, height ともデフォルトが “150px” です。これを操作すればいいわけです。今回は “60px” くらいがよさそうです。

要素の属性やスタイルを変更する場合は “_postRender” メソッドを使います。

 

SNAGHTMLd9958eSNAGHTMLd9b5cb

HTML クライアントなので C# は使えません。jQuery で “height” を操作します。ここで、引数の “element” とは DOM上での対象の要素のことです。今回は使いませんが “contentItem” は表示対象のアイテムの値が入っています。
これで実行すると、

 

image

期待した通りの表示になりました。
ちなみに “width” についても同じ方法で操作できますが、“width” はデザイナー画面のプロパティでも変更可能です。

image

“_postRender” を使えば属性もスタイルも、データのフォーマッティングを含めた表示内容の操作であっても、かなり自由に変更できます。Silverlight クライアントに比べて、HTML クライアントはこの辺の自由度が高いですね。

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

LightSwitch HTML Client の Browse Data Screen で Tile List を使う への3件のフィードバック

  1. ピンバック: LightSwitch HTML Client : Tile List / Details Screen に写真を表示(してちょっと格好よくする) « 技術との戯れ

  2. ピンバック: LightSwitch HTML Client : Tile List / Details Screen に写真を表示(してちょっと格好よくする) « 技術との戯れ

  3. ピンバック: 「LightSwitch で Web 開発」 デモ ~ 画面定義 | 技術との戯れ

コメントを残す

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

WordPress.com ロゴ

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

Twitter 画像

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

Facebook の写真

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

Google+ フォト

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

%s と連携中