LightSwitch アプリの HTML クライアント画面

Microsoft LightSwitch for Visual Studio 更新プログラム 2を使用して、モバイル デバイスの表示用に最適化された HTML のクライアントの画面を作成できます。このトピックでは HTML5 に基づく画面、画面をデザインするために使用できると LightSwitch の最適な画面をデザインするときに実行できるタスクについてもできるツール作成にテンプレートを使用します。

HTML の画面を利用するクライアントの詳細な例については、チュートリアル: モバイル ユーザー用 LightSwitch クライアントの作成を参照してください。

HTML クライアント

LightSwitch の既存のアプリケーションに一つ以上の HTML のクライアントを追加したり、HTML のクライアントだけを含む Microsoft LightSwitch for Visual Studio 更新プログラム 2 のアプリケーションを作成できます。各 HTML のクライアントは LightSwitch ソリューションの独自のプロジェクトに含まれています。

[!メモ]

LightSwitch の [HTML Client] ソリューションにプロジェクトを追加すると、Microsoft LightSwitch for Visual Studio 更新プログラム 2に改善されました。ソリューション ファイル構造が変更され、その Microsoft LightSwitch for Visual Studio 更新プログラム 2 がインストールされていないコンピューターにソリューションを開くことができません。

詳細については、「方法: HTML クライアント プロジェクトを作成または追加する」を参照してください。

画面テンプレート

開始するには、次の画面テンプレートのいずれかを使用して、画面を作成します。

• 画面を参照します。

• [View Details Screen]

• [Add/Edit Details Screen]

テンプレートを選択する方法については、「LightSwitch アプリの HTML クライアントを対象とした画面の種類の選択」を参照してください。

これらのテンプレートを見つける方法については、「方法: HTML クライアント画面を作成する」を参照してください。

画面デザイナー

画面のデザイナーを使用して画面のデザインを変更できます。画面デザイナーには、データ フィールドやコマンドなどの項目と、データが階層的に表現された画面コンテンツ ツリーが表示されます。画面コンテンツ ツリーに項目をドラッグして、目的の順序で配置できます。

画面デザイナーの詳細については、「画面デザイナーの概要」を参照してください。

デザイナー画面で特定のタスクを実行する方法の詳細については、方法: 画面デザイナーを使用して HTML 画面をデザインするを参照してください。

画面デザイン タスク

画面のデザインを変更するために、次のタスクを実行できます。

• 画面の外観を変更する

• フィールドとコマンドを画面に追加する

• 画面に表示されるデータをフィルター処理する

• 画面にデータを追加する

• 画面間のナビゲーションをカスタマイズします。

• コードを使用して画面を変更する

画面の外観を変更する

画面でのデータの表示方法を変更できます。たとえば、表示するように単純なリストと並べて表示されたリスト情報の収集を構成できます。フィールドを同時に表示するか、またはフィールドをグループ化順序を変更できます。

詳細については、「方法: 画面デザイナーを使用して HTML 画面をデザインする」を参照してください。

フィールドとコマンドを画面に追加する

LightSwitch の HTML の画面で、ユーザーがデータを表示、更新、削除、または保存できるようにする組み込みのコマンドが用意されています。カスタムのコマンドおよびフィールドを追加することもできます。

画面にビジネス ロジックを追加するには、カスタム コマンドを追加します。たとえば、ユーザーが販売注文の量に基づいて貴社の一覧を表示できるように、ボタンを追加できます。詳細については、「方法: LightSwitch のモバイル クライアントにボタンを追加する」を参照してください。

カスタムの [ローカル プロパティ] フィールドを追加して、情報を収集または表示できます。たとえば、一覧に表示される顧客の数をユーザーが指定できるように、販売量のボタンの横にテキスト ボックスを追加できます。詳細については、「方法: HTML 画面にローカル プロパティを追加する」を参照してください。

画面にカスタム コントロールを追加する

HTML の画面にカスタム コントロールを追加して、LightSwitch にビルド コントロールの機能を越える移動方法で情報を表示したり、収集できます。また、画面に表示される LightSwitch の組み込みコントロールを置き換えるためにカスタム コントロールを使用できます。詳細については、「方法: LightSwitch アプリの HTML 画面にカスタム コントロールを追加する」を参照してください。

画面に表示されるデータをフィルター処理する

画面クエリの条件を変更して、画面に表示されるデータをフィルター処理できます。

デザイナーの左側のウィンドウに表示されるデータのすべてのグループは、クエリに基づいています。画面表示それらのクエリで返される情報だけ。データのグループに表示される情報を変更するには、クエリを変更します。

詳細については、「方法: LightSwitch アプリの HTML クライアントでデータをフィルター処理する」を参照してください。

画面にデータを追加する

画面には、他の種類のデータを追加できます。たとえば、顧客を表示する画面には、注文の一覧を表示するデータ グリッドを追加できます。詳細については、「方法: 画面にデータを追加する」を参照してください。

画面間のナビゲーションをカスタマイズします。

HTML のクライアントでは、1 画面分だけをアクティブです。画面が非アクティブになると、ユーザーが別のを 1 画面をどのように開くどうなるかを指定できます。

詳細については、「方法: LightSwitch アプリでの HTML 画面間の移動を制御する」を参照してください。

コードを使用して画面を変更する

特定のイベントが実行時に発生すると、画面が適切に変更されるように LightSwitch を呼び出す部分メソッドにコードを追加できます。たとえば、アプリケーションのユーザーに対して匿名のままにする会社の名前を非表示にするコードを追加できます。このコードは、情報が画面に表示される前に貴社の会社名を調べて、False に一致を見つけると、CompanyName のフィールドの IsVisible のプロパティを設定します。

コードの場所についての詳細に記述した 方法: LightSwitch アプリのモバイル クライアントで画面イベントを処理するを参照してください。

画面を変更するコードを追加する方法については、「How to: Modify an HTML Screen by Using Code」を参照してください。

関連トピック

Title	説明
LightSwitch アプリの HTML クライアントを対象とした画面の種類の選択	画面を作成する開始点として使用できるテンプレートについて説明します。
方法: HTML クライアント画面を作成する	アプリケーションに画面を追加する方法を示します。
画面デザイナーの概要	デザイナーの各部分とその機能を示しています。
方法: 画面デザイナーを使用して HTML 画面をデザインする	画面デザイナーの使用方法を示します。
方法: HTML 画面にローカル プロパティを追加する	画面にローカル カスタム プロパティのフィールドを追加する方法を示します。
方法: LightSwitch のモバイル クライアントにボタンを追加する	そのボタンまたはリンクを追加する方法を実行し、画面のカスタム コードを示します。
方法: LightSwitch アプリの HTML 画面にカスタム コントロールを追加する	LightSwitch の画面でカスタムの HTML コントロールを使用する方法を示します。
方法: 画面にデータを追加する	他のクエリから画面にデータを追加する方法を示します。
方法: HTML の画面のデータをフィルター処理	クエリを使用して、どのデータが画面に表示されるかを制御する方法を示しています。
方法: LightSwitch アプリのモバイル クライアントで画面イベントを処理する	に実行するコードを記述することにより、アプリケーションをカスタマイズする方法について説明します。特定のイベントが発生したとき。
How to: Modify an HTML Screen by Using Code	コードを使用して、コントロールを変更し、画面上の項目と対話する方法について説明します。
リファレンス: 画面デザイナーのプロパティ	画面メンバー リストに表示される項目のプロパティと、画面デザイナーの画面コンテンツ ツリーについて説明します。[プロパティ] ウィンドウを使用してプロパティの値を設定すると、項目の外観と動作を変更できます。
方法: LightSwitch アプリでの HTML 画面間の移動を制御する	LightSwitch アプリケーションの HTML のクライアントの画面のナビゲーション モデルについて説明します。