LightSwitch HTML Client : Render 関数でコントロールの表示を変更する方法

LightSwitch の HTML Client でも基本的なコントロールは一式揃っているので、表示できずに困ることはまずないと思います。
が、例えばスタイルを変更したいとか、書式設定したいとかといった要求は当然あります。

そのような時には Custom Control を使います。

Desktop Client (Silverlight) では Custom Control は Silverlight のコントロールを別途開発しておき、それを LightSwitch の画面に配置する、という使い方をしました。
それに対して HTML Client では、レンダリングの際に表示を変更するために Custom Control を使います。

あまりいい例を思いつかず(すみません)ヘボい内容なのですが、Custom Control の使い方を理解する参考になるとは思いますので、以下にキャプチャーと合わせて操作を紹介します。手順としては簡単です。


1. 画面デザイナーで対象のコントロールを Custom Control に変更する

例として、氏名の表示を変更したいと思います。
Label コントロールを Custom Control に変更します。

SNAGHTMLc29f6dbSNAGHTMLc2a1775

2. Render 関数のスケルトンを生成

プロパティウィンドウに [Edit Render Code] リンクがあるので、これをクリックします。またはメニューの [Write Code] で “xxx_render” を選択しても OK です。

image

3. コードを記述

コードを記述します。ここでは例として、”名前 : ” という見出しに続いてボールドにした値を表示することにします。jQuery の力を借ります。

SNAGHTMLc318832

 

以上です。実行するとこんな感じ。(ちょっと分かりづらいかも)

image

フォントを大きくしたり、数値や日時の書式設定をしたり、という際にはこの方法でコントロールの表示を変えてください。

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

LightSwitch HTML Client : Render 関数でコントロールの表示を変更する方法 への3件のフィードバック

  1. ピンバック: Office 365 (Napa) でホストするアプリケーションを LightSwitch で作る « 技術との戯れ

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

  3. ピンバック: Office 365 でホストするアプリケーションを LightSwitch で作る | 技術との戯れ

コメントを残す

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

WordPress.com ロゴ

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

Twitter 画像

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

Facebook の写真

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

Google+ フォト

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

%s と連携中