LightSwitch HTML Client : Tile List / Details Screen に写真を表示(してちょっと格好よくする)

こちらの記事こちらの記事で LightSwitch HTML Client の基本を紹介しました。(動画コンテンツは こちら

PC の広いブラウザでもスマホでも見やすいレイアウトにする方法として Tile List も紹介しました。
タイルサイズを変更することで妙な間延びを避けることはできますが、せっかく大きなタイルなので写真を表示したくなりますよね。

LightSwich らしく、とても簡単に実現できます。
予想通り、テーブルに Image 型の列を追加して、画面にも Image コントロールを配置するだけ。

一応、画面キャプチャーを載せておきます。


テーブルはこんな風に変更。

SNAGHTML1854206

Main 画面はこんな風。
こちらの記事 に沿ってタイルの高さを変えた場合は、”_postRender” メソッドの中味をコメントアウトするなり、思い切って Main.js を削除するなりしてください。

image

せっかくなので詳細画面にも写真を載せましょうか。

image

「どうやって写真をアップロードするか?」には触れないままで(寄り道になるので 改めて)、実行するとこんな感じになります。

imageimage

タイルのサイズを変えるとか、写真や名前をセンタリングするとかすればもっと格好よくなりそうですが、そこは “_postRender” メソッドでスタイルを操作してお好きなように。

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

LightSwitch HTML Client : Tile List / Details Screen に写真を表示(してちょっと格好よくする) への1件のフィードバック

  1. ピンバック: LightSwitch で画像ファイルをアップロードする簡単な方法 ~Desktop Client の力を借りる~ « 技術との戯れ

コメントを残す

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

WordPress.com ロゴ

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

Twitter 画像

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

Facebook の写真

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

Google+ フォト

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

%s と連携中