方法: LightSwitch アプリの HTML 画面にカスタム コントロールを追加する
LightSwitch アプリケーションのクライアントの画面にカスタムの HTML コントロールを追加できます。カスタム コントロールを使用すると、LightSwitchの組み込みの HTML コントロールの機能を越える移動方法で情報を表示したり、収集できます。
カスタム コントロールの参照
画面のカスタム コントロールを使用するには、まずプロジェクトへのファイル参照を追加し、default.htm ファイルにスクリプトでタグを追加します。
カスタム コントロールを参照するには
[ソリューション エクスプローラー] で、ツール バーの一覧から [ファイル ビュー] を選択します。
[スクリプト] フォルダーのショートカット メニューを開き、[追加] を選択し、を [既存の項目] を選択します。
カスタム コントロールの JavaScript (.js) ファイルを選択し、[追加] のボタンをクリックします。
[!メモ]
持つカスタム コントロールは、追加のサポート ファイルを参照する必要があります。すべての要件のカスタム コントロールのドキュメントを参照してください。
プロジェクトの [default.htm] ファイルのセクション <script> で、MyControl がカスタム コントロールの名前である、次の例のようなスクリプト タグを追加します:
<script type=”text/javascript” src=”Scripts/MyControl.js” charset=”utf-8”></script>
新しいコントロールの追加および既存のコントロールの置換
画面に新しいカスタム コントロールを追加または LightSwitch の既存の HTML コントロールを置き換えることができます。
画面にカスタム コントロールを追加するには
[画面コンテンツ ツリー] でグループを選択します。
[画面デザイナー] のツール バーで、[レイアウト項目の追加] の一覧で、[カスタム コントロール] を選択します。
[カスタム コントロールの追加] のダイアログ ボックスが表示されます。
[Specify the data for the new custom control] のボックスに、コントロールにバインドされる成果物またはコレクションを入力します。
たとえば、貴社の郵便番号にバインドするには Customers.selectedItem.PostalCode を入力するか、またはグローバル貴社のレコードにバインドするには Customers.selectedItem を入力します。
コントロールの特定のプロパティにデータをバインドするコードを追加します。
詳細については、このトピックの カスタム コントロール プロパティへのデータのバインド を参照してください。
既存のコントロールをカスタム コントロールに置き換えるには
[画面コンテンツ ツリー] では、置き換えるコントロールを選択します。
[プロパティ] のペインで、[コントロールの種類] のリストを開き、[カスタム コントロール] を選択します。
コントロールの特定のプロパティにデータをバインドするコードを追加します。
詳細については、このトピックの カスタム コントロール プロパティへのデータのバインド を参照してください。
カスタム コントロールのプロパティへのデータのバインド
[カスタム コントロールの追加] ダイアログ ボックスで指定したデータは、カスタム コントロールの特定のプロパティにバインドする必要があります。
カスタム コントロールのプロパティにデータをバインドするには
[画面コンテンツ ツリー] では、カスタム コントロールを選択します。
[プロパティ] のペインで、[Edit Render Code] のハイパーリンクを選択します。
コード エディターで、レンダリング メソッドに次の例のようなコードを追加します:
createMyControl(element, contentItem, “max-width: 300px; max-height: 300px”);このコードは、実行時にコントロールを表示します。MyControl を、コントロールの名前で置き換え、必要に応じて max-height と max-width パラメーターを変更します。
コントロールが要求する追加機能のコードを追加します。すべての要件のカスタム コントロールのドキュメントを参照してください。