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

LightSwitch では、モバイル デバイスでの表示に適した HTML クライアント画面を作成できます。 ここでは、HTML5 準拠の画面を作成するためのテンプレート、画面のデザインに役立つツール、および LightSwitch アプリケーションに最適な画面をデザインする方法について説明します。

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

HTML クライアント

既存の LightSwitch アプリケーションに 1 つ以上の HTML クライアントを追加できます。また、HTML クライアントを 1 つだけ備えた LightSwitch アプリケーションを作成することもできます。 LightSwitch ソリューション内で、各 HTML クライアントはそれぞれ異なるプロジェクトに追加されます。

画面テンプレート

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

• 共通画面セット

• データの参照画面

• 詳細の表示画面

• 詳細画面の追加/編集

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

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

画面デザイナー

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

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

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

画面デザイン タスク

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

• 画面の外観を変更する

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

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

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

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

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

画面の外観を変更する

画面でのデータの表示方法を変更できます。 たとえば、情報をフラット リストやタイル リストとして表示したり、 フィールドの表示順序を変更したり、複数のフィールドをグループにまとめたりできます。

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

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

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

画面にビジネス ロジックを追加する場合は、カスタム コマンドを使用します。 たとえば、販売注文件数に基づいて顧客の一覧を表示するためのボタンを追加できます。 詳細については、「方法: LightSwitch のモバイル クライアントにボタンを追加する」を参照してください。

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

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

HTML 画面にカスタム コントロールを追加すれば、LightSwitch に標準で備わっているコントロール以外の方法で情報を表示したり、収集したりできます。 また、LightSwitch の標準コントロールの代わりに、カスタム コントロールを画面に表示することもできます。 詳細については、「方法: LightSwitch アプリの HTML 画面にカスタム コントロールを追加する」を参照してください。

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

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

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

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

画面にデータを追加する

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

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

HTML クライアントでは、一度に 1 つの画面がアクティブになります。 ある画面から別の画面を開くための方法、および画面が非アクティブになったときの動作を指定できます。

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

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

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

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

画面を変更するコードを追加する方法については、「方法: コードを使用して HTML 画面を変更する」を参照してください。

LightSwitch HTML Client API のリストについては、「HTML クライアント API リファレンス」を参照してください。

関連トピック