チュートリアル: LightSwitch での Vision Clinic アプリケーションの作成

[アーティクル]
06/10/2015

このチュートリアルでは、LightSwitch でアプリケーションを作成するためのプロセスを詳しく説明します。 LightSwitch のさまざまな機能を使用して、架空の Vision Clinic のアプリケーションを作成します。アプリケーションには、予定を管理し、請求書を作成するための機能が含まれています。

必須コンポーネント

MSDN コードギャラリーから PrescriptionContoso データベースをダウンロードします。

手順

プロジェクトの作成

アプリケーションプロジェクトを作成します。
テーブルを定義する

患者、請求書、および請求書詳細エンティティを追加します。
選択肢リストを作成する

値の一覧を作成します。
リレーションシップを定義する

リンク関連テーブルです。
別のエンティティを追加する

予定エンティティを追加します。
画面の作成

患者に関する情報を表示するための画面を作成します。
アプリケーションを実行する

アプリケーションを実行して、データを入力します。
データベースに接続する

外部データベースに接続します。
エンティティを変更する

製品および製品リベートエンティティを変更します。
一覧および詳細画面を作成する

製品を表示する画面を作成します。
画面のレイアウトを変更する

[製品一覧] 画面のレイアウトを変更します。
実行時に変更する

実行中のアプリケーションで変更を行います。
クエリを作成する

パラメーター化されたクエリを作成して、画面にバインディングします。
計算済みフィールドを追加する

計算済みフィールドを作成して、画面に追加します。
データベース間の関係を作成する

異なるデータベース内のエンティティ間の仮想の関係を作成します。
請求書画面を作成する

請求書を表示する画面を作成します。
請求書画面を変更する

実行中のアプリケーションでの請求書画面のレイアウトを変更します。
画面のロジックを追加する

日付を計算するコードを記述します。
さらに計算済みフィールドを追加する

さらに計算済みフィールドを作成して、請求書画面に追加します。
モバイルクライアントを追加する

モバイルデバイスで患者と予定を表示するための画面を追加します。

プロジェクトの作成

LightSwitch アプリケーションを作成するには、まず、そのアプリケーションのプロジェクトを作成します。

プロジェクトを作成するには

メニューバーで [ファイル]、[新しいプロジェクト] を順にクリックします。

[新しいプロジェクト] ダイアログボックスが表示されます。
[インストールされたテンプレート] の一覧で、[Visual Basic] ノードまたは [Visual C#] ノードを展開し、[LightSwitch] ノードを選択します。
中央のペインで、[LightSwitch デスクトップアプリケーション] テンプレートを選択します。
[名前] ボックスに「Vision Clinic」と入力し、[OK] をクリックします。

[Vision Clinic デザイナー] ウィンドウが開き、このプロジェクトに必要なフォルダーが [ソリューションエクスプローラー] ウィンドウに追加されます。

テーブルを定義する

LightSwitch ではテーブルを "エンティティ" と呼んでいます。エンティティは、データが表すオブジェクト (このチュートリアルでは "患者の集まり") をモデル化します。 LightSwitch アプリケーションでは "フォームオーバーデータ" モデルを使用します。つまり、1 つ以上の情報源から取得したデータがフォームや画面に表示されます。 LightSwitch には、作成したアプリケーションのデータを格納するためのデータベースが組み込まれています。次の手順では、患者の情報を格納するデータベーステーブルを作成します。

Patient エンティティを作成するには

[Vision Clinic デザイナー] ウィンドウで [新しいテーブルの作成] リンクを選択します。

データデザイナーが開きます。 In Solution Explorerで、Vision Clinic.Server プロジェクトの [データソース] ノードの下に [Table1Items] ノードが表示されます。
[プロパティ] ウィンドウで、このテーブルに「Patient」という名前を付け、Enter キーを押します。

データデザイナーのタイトルバーの名前が "Patient" に変わり、ソリューションエクスプローラー内の名前も "Patients.lsm" に変わります。
データデザイナーの [名前] 列で [<プロパティの追加>] リンクを選択し、「Name」と入力して Enter キーを押します。

[型] 列に適切なデータ型 (String) が表示され、[必須] チェックボックスがオンになっていることを確認してください。ユーザーは、すべての患者の名前を指定する必要があります。
[名前] 列で [<プロパティの追加>] リンクを選択し、「Street」と入力します。
[名前] 列で [<プロパティの追加>] リンクを選択し、「Street2」と入力します。
[必要] 列でチェックボックスをオフにします。

番地の 2 行目は省略可能です。
[名前] 列で [<プロパティの追加>] リンクを選択し、「City」と入力します。
[名前] 列で [<プロパティの追加>] リンクを選択し、「State」と入力します。
[名前] 列で [<プロパティの追加>] リンクを選択し、「Zip」と入力します。
[名前] 列で [<プロパティの追加>] リンクを選択し、「PrimaryPhone」と入力します。
[型] 列の一覧を開き、[PhoneNumber] を選択します。

PhoneNumber は、電話番号を入力および書式設定するための一般的なパターンを表すカスタムビジネスタイプです。
[必要] 列でチェックボックスをオフにします。
[名前] 列で [<プロパティの追加>] リンクを選択し、「SecondaryPhone」と入力します。
[型] 列の一覧を開き、[PhoneNumber] を選択します。
[必要] 列でチェックボックスをオフにします。
[名前] 列で [<フィールドの追加>] リンクを選択し、「Email」と入力します。
[型] 列の一覧を開き、[EmailAddress] を選択します。

EmailAddressは、正しく書式設定された電子メールアドレスを表すカスタムビジネスタイプです。
[必要] 列でチェックボックスをオフにします。
[名前] 列で [<プロパティの追加>] リンクを選択し、「PolicyNumber」と入力します。
[プロパティ] ウィンドウで、[最大長] プロパティを「12」に設定します。

ユーザーは、12 文字を超えるポリシー番号を入力できなくなります。
[プロパティ] ウィンドウで、[作成/変更されたプロパティを有効にする] チェックボックスをオフにします。

作成または変更されたプロパティを使用すると、テーブルの監査証跡を作成し、レコードの作成者または最終変更者を追跡できます。ただしこれらは、このエンティティには必要ありません。
メニューバーで、[ファイル]、[すべてを保存] の順に選択して作業内容を保存します。

次はさらに、請求書と請求書の明細行を表す 2 つのエンティティを作成します。

Invoice および InvoiceDetail エンティティを作成するには

ソリューションエクスプローラーで [Data Sources] ノードを選択し、メニューバーで [プロジェクト]、[テーブルの追加] の順に選択します。

新しいデータデザイナーが表示されます。
[プロパティ] ウィンドウで、[名前] プロパティを「Invoice」に設定し、Enter キーを押します。
[名前] 列で [<プロパティの追加>] リンクを選択し、「InvoiceDate」と入力して、Tab キーを押します。
[型] 列の一覧を開き、[DateTime] を選択します。
[名前] 列で [<プロパティの追加>] リンクを選択し、「InvoiceDue」と入力して、Tab キーを押します。
[型] 列の一覧を開き、[DateTime] を選択します。
[名前] 列で [<プロパティの追加>] リンクを選択し、「InvoiceStatus」と入力して、Tab キーを押します。
[型] 列の一覧を開き、[Integer] を選択します。
[名前] 列で [<プロパティの追加>] リンクを選択し、「ShipDate」と入力して、Tab キーを押します。
[型] 列の一覧を開き、[DateTime] を選択します。
ソリューションエクスプローラーで [Data Sources] ノードを選択し、メニューバーで [プロジェクト]、[テーブルの追加] の順に選択します。
[プロパティ] ウィンドウで、[名前] プロパティを「InvoiceDetail」に設定し、Enter キーを押します。
[名前] 列で [<プロパティの追加>] リンクを選択し、「Quantity」と入力して、Tab キーを押します。
[型] 列の一覧を開き、[Integer] を選択します。
[名前] 列で [<プロパティの追加>] リンクを選択し、「UnitPrice」と入力します。
[型] 列の一覧を開き、[Money] を選択します。

Money は、通貨を示して正しくフォーマットする、もう 1 つのカスタムビジネスタイプです。
[プロパティ] ウィンドウで、[通貨記号] ボックスに「$」と入力します。
メニューバーで、[ファイル]、[すべてを保存] の順に選択して作業内容を保存します。

選択肢リストを作成する

次の手順では、Invoice エンティティの選択肢リストを作成します。選択肢リストを使用すると、ユーザーは表示された選択肢の中から適切な値を選択できます。

選択肢リストを作成するには

ソリューションエクスプローラーで [Invoices.lsml] ノードのショートカットメニューを表示し、[開く] を選択します。
データデザイナーで [InvoiceStatus] フィールドを選択します。
[プロパティ] ウィンドウで [選択リスト] リンクをクリックします。
[選択肢リスト] ダイアログボックスで、次の値を入力して [OK] をクリックします。

値

[表示名]

0

アクティブ

1

支払い済み

2

期限超過

画面上では、ユーザーがこのフィールドの一覧を開くと、[表示名] に入力した 3 つの値が選択肢として表示されます。
メニューバーで、[ファイル]、[すべてを保存] の順に選択して作業内容を保存します。

値	[表示名]
0	アクティブ
1	支払い済み
2	期限超過

リレーションシップを定義する

次の手順では、Patient エンティティ、Invoice エンティティ、および InvoiceDetail エンティティのリレーションシップを定義します。

リレーションシップを定義するには

ソリューションエクスプローラーで [Invoices.lsml] ノードのショートカットメニューを表示し、[開く] を選択します。
データデザイナーのツールバーで、[リレーションシップ] をクリックします。

[新しいリレーションシップの追加] ダイアログボックスが表示されます。
[名前] 行で [終端側] 列を選択し、一覧から [Patient] を選択して [OK] をクリックします。

Patient エンティティと Invoice エンティティ間に 1 対多リレーションシップが作成されます。 1 人の患者に複数の請求書を関連付けることができます。
データデザイナーのツールバーで、[リレーションシップ] をクリックします。

[新しいリレーションシップの追加] ダイアログボックスが開きます。
[名前] 行で [終端側] 列を選択し、一覧を開いて [InvoiceDetail] を選択します。
[多重度] 行で [開始側] 列を選択し、一覧を開いて [1] を選択します。
[多重度] 行で [終端側] 列を選択し、一覧から [多] を選択して [OK] をクリックします。

Invoice エンティティと InvoiceDetail エンティティ間に 1 対多リレーションシップが作成されます。 1 件の請求書は複数の詳細項目で構成されます。
メニューバーで、[ファイル]、[すべてを保存] の順に選択して作業内容を保存します。

予定エンティティを作成する

次の手順では、さらに予定を表すエンティティを作成し、リレーションシップと選択肢リストを追加します。

Appointment エンティティを追加するには

ソリューションエクスプローラーで [Data Sources] ノードを選択し、メニューバーで [プロジェクト]、[テーブルの追加] の順に選択します。
[プロパティ] ウィンドウで [名前] ボックスを選択し、「Appointment」と入力します。
データデザイナーの [名前] 列で <プロパティの追加> プレースホルダーテキストを選択し、「AppointmentTime」と入力します。
[型] 列の一覧を開き、[DateTime] を選択します。
データデザイナーの [名前] 列で <プロパティの追加> プレースホルダーテキストを選択し、「AppointmentDate」と入力します。
[型] 列の一覧を開き、[Date] をクリックします。
[名前] 列で <プロパティの追加> プレースホルダーテキストを選択し、「AppointmentType」と入力します。
[型] 列の一覧を開き、[Short Integer] を選択します。
[名前] 列で <プロパティの追加> プレースホルダーテキストを選択し、「DoctorNotes」と入力します。
既定のデータ型である [String] を適用し、[必須] チェックボックスをオフにします。
データデザイナーのツールバーで、[リレーションシップ] をクリックします。
[新しいリレーションシップの追加] ダイアログボックスで、[名前] 行の [終端側] 列を選択します。
一覧を開いて [Patient] を選択し、[OK] をクリックします。

Patient エンティティと Appointment エンティティ間に 1 対多リレーションシップが作成されます。 1 人の患者に複数の予定を設定できます。
データデザイナーで [AppointmentType] フィールドを選択します。
[プロパティ] ウィンドウで [選択リスト] リンクをクリックします。
[選択肢リスト] ダイアログボックスで、次の値を入力して [OK] をクリックします。

値

[表示名]

0

年間

1

フォローアップ

2

緊急
[パースペクティブ] バーで [DesktopClient] タブを選択します。
[プロパティ] ウィンドウで、[概要プロパティ] の一覧の [AppointmentTime] をクリックします。

このプロパティは、予約の一覧が表示されるときに表示するフィールドを定義します。
メニューバーで、[ファイル]、[すべてを保存] の順に選択して作業内容を保存します。

値	[表示名]
0	年間
1	フォローアップ
2	緊急

画面の作成

次の手順では、患者の一覧を表示する画面を作成します。

画面を作成するには

ソリューションエクスプローラーで [画面] ノードを選択し、メニューバーで [プロジェクト]、[画面の追加] の順に選択します。

[新しい画面の追加] ダイアログボックスが表示されます。
[画面テンプレートの選択] の一覧で [編集可能グリッド画面] を選択します。
[画面名] ボックスに「PatientList」と入力します。
[画面データ] の一覧で [Patients] を選択し、[OK] をクリックします。

画面デザイナーが開き、画面レイアウトの階層構造が表示されます。
メニューバーで、[ファイル]、[すべてを保存] の順に選択して作業内容を保存します。

予定画面を作成する

次の手順では、予定をスケジュールする画面を作成します。

画面を作成するには

ソリューションエクスプローラーに表示されている [Vision Clinic.Server] プロジェクトで、[Appointments.lsml] ノードのショートカットメニューを開き、[開く] をクリックします。
[パースペクティブ] バーで、[DesktopClient] タブをクリックし、ツールバーの [画面] をクリックします。
[新しい画面の追加] ダイアログボックスの [画面テンプレートの選択] の一覧で、[新規データ画面] をクリックします。
[画面データ] の一覧で [Appointment] をクリックし、[OK] をクリックします。
画面デザイナーの中央のペインで、[AppointmentTime] ノードを選択します。
[プロパティ] ウィンドウで、[日付の表示] チェックボックスをオフにします。

この変更により、日時指定コントロールには時刻セクションのみが表示されます。

アプリケーションを実行してデータを入力する

これで、アプリケーションが機能します。次の手順では、アプリケーションを実行してデータを入力します。

アプリケーションを実行するには

F5 キーを押してアプリケーションを実行します。
実行中のアプリケーションで [PatientList] 画面を選択し、追加 (+) ボタンをクリックします。

[新しい患者の追加] ダイアログボックスが表示されます。
新しい患者のデータを入力します。その際、[Email] フィールドには無効な値 (「john#example.com」など) を入力します。

他のフィールドへ移動すると、[Email] の入力ボックスが赤い枠線で囲まれます。 EmailAddress ビジネスタイプには、電子メールアドレスの形式が正しいかどうかをチェックする検証規則が組み込まれています。
エラーを修正し、正しいデータを入力したら [OK] をクリックします。

アプリケーションツールバーの [Save] ボタンが有効になります。
さらに数人の患者を追加します。
[Save] をクリックしてデータを保存します。

これで [PatientList] グリッドの列を並べ替えることができ、任意の列で並べ替えを行うことができます。
メニューバーで、[タスク]、[Create New Appointment] の順にクリックします。

[Create New Appointment] 画面が開きます。
[Patient] の一覧から患者を選択し、今日の現在より後の時刻を選択して、予定のデータを入力します。
今日の現在より後の時刻に、さらに数件の予定を追加し、[Save] をクリックしてデータを保存します。
実行中のアプリケーションで、右上隅にある [Close] をクリックしてデザインモードに戻ります。

データベースに接続する

次の手順では、製品情報が保存された外部データベースに接続します。

注意

この手順を実行する前に、MSDN コードギャラリーから PrescriptionContoso データベースをダウンロードし、Install.htm ファイルの説明に従ってインストールする必要があります。

データソースにアタッチするには

ソリューションエクスプローラーで、[データソース] ノードを選択します。
メニューバーで、[プロジェクト]、[データソースの追加] の順に選択します。
データソースのアタッチ ウィザードで [データベース] アイコンを選択し、[次へ] をクリックします。

[データソースの選択] ダイアログボックスが開きます。

注意

Visual Studio のデータベースに接続したことがある場合は、このダイアログボックスが表示されません。次の手順はスキップしてください。
一覧で [Microsoft SQL Server] をクリックし、[続行] をクリックします。

[接続プロパティ] ダイアログボックスで、以下の表に従って値を入力し、[OK] をクリックします。

フィールド	値
サーバー名	(localdb)\v11.0
サーバーにログオンする	Windows 認証の使用
[データベースの選択または入力]	C:\Temp\PrescriptionContoso.mdf

接続プロパティ

[データベースオブジェクトの選択] ウィザードページが表示されます。

[テーブル] ノードを展開し、[Product] テーブルと [ProductRebate] テーブルを選択して [完了] をクリックします。

C_TEMP_PRESCRIPTIONCONTOSO_MDFData データソースがプロジェクトに追加され、Products と ProductRebates のエンティティが作成されます。
ソリューションエクスプローラーで、[C_TEMP_PRESCRIPTIONCONTOSO_MDFData] ノードのショートカットメニューを開ます。[名前の変更] を選択し、「PrescriptionContoso」と入力します。
メニューバーで、[ファイル]、[すべてを保存] の順に選択して作業内容を保存します。

Products エンティティと ProductRebate エンティティを変更する

次の手順では、ProductRebate エンティティと Products エンティティを変更します。

ProductRebate および Products のエンティティを変更するには

ソリューションエクスプローラーで [ProductRebates.lsml] ノードのショートカットメニューを開き、[開く] をクリックします。
[Rebate] フィールドを選択し、[型] を [Money] に変更します。
[プロパティ] ウィンドウで、[通貨記号] ボックスに「$」と入力します。
ソリューションエクスプローラーで [Products.lsml] ノードのショートカットメニューを開き、[開く] をクリックします。
データデザイナーで [MSRP] フィールドを選択し、[型] を [Money] に変更します。
[プロパティ] ウィンドウで、[通貨記号] ボックスに「$」と入力します。
[ProductImage] フィールドを選択し、[型] を [Image] に変更します。
メニューバーで、[ファイル]、[すべてを保存] の順に選択して作業内容を保存します。

一覧および詳細画面を作成する

次の手順では、製品情報を表示する画面を作成します。

一覧および詳細画面を作成するには

データデザイナーの [パースペクティブ] バーで、[DesktopClient] タブをクリックして、ツールバーの [画面] をクリックします。

[新しい画面の追加] ダイアログボックスが表示されます。
[画面テンプレートの選択] の一覧で、[一覧および詳細画面] を選択します。
[画面名] ボックスに「ProductList」と入力します。
[画面データ] の一覧で [PrescriptionContoso.Products] を選択します。
[含める追加データ] の一覧で、[Product Details] と [ProductRebates] のチェックボックスの両方ともオンにして、[OK] をクリックします。

画面のレイアウトを変更する

次の手順では、[ProductList] 画面のレイアウトを変更します。

レイアウトをカスタマイズするには

画面デザイナーの画面コンテンツツリーで、[行のレイアウト | Product Details] ノードを選択します。
[行のレイアウト] の一覧で [画像とテキスト] を選択します。
[画像とテキスト] ノードの下にある各フィールドについて、一覧から次の値を選択します。

フィールド

値

(画像)

製品イメージ

(タイトル)

製品名

(サブタイトル)

MSRP

(説明)

説明
F5 キーを押してアプリケーションを実行し、変更を確認します。
実行中のアプリケーションで、メニューバーの [タスク] をクリックし、[ProductList] をクリックして [ProductList] 画面を表示します。

アプリケーションを開いたままにします。次の手順では、実行中のアプリケーションを変更します。

実行中のアプリケーションで変更を行う

次の手順では、アプリケーションの実行中に [Product List] 画面を変更します。

実行時に、画面をカスタマイズするには

[Product List] 画面の右下隅にある [デザイン画面] を選択します。
左側のペインで、[データグリッド | Product Rebates] ノードを選択します。
[プロパティ] ウィンドウで、[表示名] プロパティを「Contoso Rebates」に変更します。

ここの入力した表示名はアプリケーションウィンドウにも表示されます。
[MSRP] フィールドを選択し、[説明] プロパティを「リベート前の候補価格」に変更します。
[保存] をクリックして実行中のアプリケーションに戻り、変更内容を確認します。

たとえば、[MSRP] フィールドにポインターを移動すると、新しく入力した説明が表示されます。
実行中のアプリケーションで、右上隅にある [Close] をクリックしてデザインモードに戻ります。
メニューバーで、[ファイル]、[すべてを保存] の順に選択して作業内容を保存します。

クエリを作成する

次の手順では、パラメーター化されたクエリを作成して画面にバインディングします。

パラメーター化されたクエリを作成するには

ソリューションエクスプローラーで [Products] ノードのショートカットメニューを開き、[クエリの追加] をクリックします。

クエリデザイナーが開きます。
[プロパティ] ウィンドウで [名前] ボックスを選択し、「RelatedProducts」と入力します。
クエリデザイナーで [フィルターの追加] リンクを選択します。

フィルター条件が [フィルター] セクションに追加されます。
2 番目のボックスの一覧で [カテゴリ] を選択します。
4 番目のボックスの一覧で [パラメター] を選択します。
5 番目の一覧で [新規追加] を選択します。

名前が Category、データ型が String である新しい Parameter が [パラメーター] セクションに追加されます。
ソリューションエクスプローラーで [ProductList.lsml] ノードのショートカットメニューを表示し、[開く] を選択します。
画面デザイナーのツールバーで、[データ項目の追加] ボタンをクリックします。
[データ項目の追加] ダイアログボックスで、[クエリ] オプションを選択します。
[名前] 列で [PrescriptionContoso.RelatedProducts] を選択し、[OK] をクリックします。

[RelatedProducts] ノードが、左側のペインに表示されます。
[クエリパラメーター] の下にある [カテゴリ] ノードを選択します。
[プロパティ] ウィンドウで、[パラメーターバインディング] プロパティを [Products.SelectedItem.Category] に設定します。
中央ペインで、[データグリッド |Contoso Rebates] ノードの下にある [追加] ノードを展開し、[Related Product] をクリックします。
F5 キーを押してアプリケーションを実行し、変更を確認します。

[Products List] 画面を開くと、選択した製品の関連製品が一覧表示されます。
実行中のアプリケーションで、右上隅にある [Close] をクリックしてデザインモードに戻ります。
メニューバーで、[ファイル]、[すべてを保存] の順に選択して作業内容を保存します。

計算済みフィールドを追加する

次の手順では、計算値を使用するフィールドを追加します。計算値は、リベート金額を適用した後の製品の価格になります。

計算フィールドを追加するには

ソリューションエクスプローラーで [Products.lsml] エンティティノードのショートカットメニューを開き、[開く] をクリックします。
データデザイナーのパースペクティブ バーで、[サーバー] タブを選択します。
[<プロパティの追加>] リンクを選択し、「CurrentPrice」と入力して、Tab キーを押します。
[型] 列の一覧を開き、[Money] を選択します。

[プロパティ] ウィンドウの [全般] セクションでは、[計算されたプロパティである] チェックボックスが既定でオンになっています。
[プロパティ] ウィンドウで、[通貨記号] ボックスに「$」と入力します。
[プロパティ] ウィンドウで [メソッドの編集] リンクを選択します。

コードエディターが開き、CurrentPrice_Compute メソッドが表示されます。

イベントハンドラーに次のコードを追加します。

Dim rebates As Decimal
    For Each item In ProductRebates
        If item.RebateStart <= Date.Today And item.RebateEnd >= Date.Today Then
            rebates = rebates + item.Rebate
        End If
    Next

    result = Me.MSRP - rebates

decimal rebates = default(decimal);


            foreach (var item in ProductRebates)
            {
                if (item.RebateStart <= System.DateTime.Today && item.RebateEnd >= System.DateTime.Today)
                {
                    rebates += item.Rebate.Value;
                }
            }

            result = this.MSRP - rebates;

現在の価格を計算するコード

メニューバーで、[ファイル]、[すべてを保存] の順に選択して作業内容を保存します。

次の手順では、[ProductList] 画面に計算フィールドを追加します。

画面に計算フィールドを追加するには

ソリューションエクスプローラーで [ProductList.lsml] 画面ノードのショートカットメニューを開き、[開く] をクリックします。
画面デザイナーの左ペインで [CurrentPrice] ノードを選択し、中央ペインの [(説明) | Description] ノードの下にドラッグします。
F5 キーを押してアプリケーションを実行し、変更を確認します。
[ProductList] 画面で、[リベート] または [MSRP] フィールドを編集します。

CurrentPrice が再計算されます。
実行中のアプリケーションで、右上隅にある [Close] をクリックしてデザインモードに戻ります。
メニューバーで、[ファイル]、[すべてを保存] の順に選択して作業内容を保存します。

データベース間の関係を作成する

次の手順では、2 つのデータベースのエンティティ間に仮想的なリレーションシップを作成し、2 つのソースから取得したデータを 1 つの一覧および詳細画面に表示されます。

データベース間の関係を作成するには

ソリューションエクスプローラーで [InvoiceDetails.lsml] ノードのショートカットメニューを表示し、[開く] を選択します。
データデザイナーのツールバーで、[リレーションシップ] をクリックします。

[新しいリレーションシップの追加] ダイアログボックスが開きます。
[終端側] 列で [名前] フィールドを選択し、一覧を開いて [Product] を選択します。

新しいセクションが、ダイアログボックスの下部に表示されます。ここには、2 つのエンティティ内の関連するフィールドが表示されます。必要に応じて、関連するフィールドを同じデータ型の別のフィールドに変更するか、または複数の関連フィールドをキーとして定義します。
[OK] をクリックしてリレーションシップを保存します。

新しいリレーションシップが点線で示されます。これは、2 つのエンティティがそれぞれ異なるデータソースにあることを表しています。この場合、InvoiceDetails は組み込みデータベースに保存されており、Products は PrescriptionContoso データベースに保存されています。
メニューバーで、[ファイル]、[すべてを保存] の順に選択して作業内容を保存します。

請求書を表示する画面を作成する

次の手順では、請求書を表示する新しい画面を作成します。

画面を作成するには

ソリューションエクスプローラーで [画面] ノードを選択し、メニューバーで [プロジェクト]、[画面の追加] の順に選択します。

[新しい画面の追加] ダイアログボックスが表示されます。
[画面テンプレートの選択] の一覧で、[一覧および詳細画面] を選択します。
[画面名] ボックスに「InvoiceScreen」と入力します。
[画面データ] の一覧で [Invoices] を選択します。
[含める追加データ] の一覧で [Invoice Details] と [Invoice InvoiceDetails] を選択し、[OK] をクリックします。
[データグリッド行 | Invoice Detail] ノードを展開し、[Product Product ID] ノードを削除します。
フィールドの順序を変更するために、[Quantity] ノードおよび [UnitPrice] ノードを [Product] ノードの下へ移動します。
F5 キーを選択してアプリケーションを実行します。
メニューバーで [タスク]、[InvoiceScreen] の順にクリックして、画面を表示します。
[Invoices] ペインで追加 (+) ボタンをクリックし、請求書データを入力します。

[InvoiceStatus] フィールドには値の一覧が表示されます。[Patient] フィールドのボタンをクリックすると、ダイアログボックスが開いて患者が一覧表示されます。
[Invoice Details] ペインで追加 (+) ボタンをクリックし、請求書の明細データを入力します。

[Product] フィールドの一覧には、PrescriptionContoso データベースに保存されている製品が表示されます。
[保存] をクリックして請求書データを保存します。アプリケーションは開いたままにしておきます。

次の手順では、実行中のアプリケーションを変更します。

請求書画面を変更する

次い、実行中のアプリケーションで請求書画面を変更します。

実行中のアプリケーションで画面を変更するには

[Invoice] 画面の右下隅にある [デザイン画面] リンクを選択します。
左ペインで [リスト | Invoices] ノードを選択し、[リスト] の一覧を開いて [データグリッド] を選択します。
[Patient] ノードを選択し、左側にある [上へ移動] 矢印を選択して、このノードを [Invoice Date] ノードの上へ移動します。
[保存] をクリックして実行中のアプリケーションに戻り、変更内容を確認します。
実行中のアプリケーションで、右上隅にある [Close] をクリックしてデザインモードに戻ります。
メニューバーで、[ファイル]、[すべてを保存] の順に選択して作業内容を保存します。

画面のロジックを定義する

次の手順では、請求書の日付の既定のロジックを定義するコードを追加します。

画面のロジックを定義するには

ソリューションエクスプローラーで [Invoices.lsml] ノードのショートカットメニューを表示し、[開く] を選択します。
データデザイナーで、ツールバーにある [コードの記述] の一覧を開き、[Invoice_Created] を選択します。

コードエディターが開き、Invoice_Created メソッドが表示されます。

Invoice_Created メソッドで、次のコードを追加して、日付の既定の動作を設定します。

InvoiceDate = Date.Today
InvoiceDue = Date.Today.AddDays(30)
ShipDate = Date.Today.AddDays(3)

InvoiceDate = System.DateTime.Today;
InvoiceDue = System.DateTime.Today.AddDays(30);
ShipDate = System.DateTime.Today.AddDays(3);

ソリューションエクスプローラーで [Invoices.lsml] ノードのショートカットメニューを表示し、[開く] を選択します。
データデザイナーで [InvoiceDate] フィールドを選択します。
ツールバーで [コードの記述] の一覧を開き、[InvoiceDate_Changed] を選択します。

InvoiceDate_Changed メソッドで、InvoiceDate が変更されたときに日付を更新するために、次のコードを追加します。

InvoiceDue = InvoiceDate.AddDays(30)
‘ If the ShipDate is earlier than the new InvoiceDate, update it.
If ShipDate < InvoiceDate Then
    ShipDate = InvoiceDate.AddDays(2)
End If

InvoiceDue = InvoiceDate.AddDays(30); 
    // If the ShipDate is earlier than the new InvoiceDate, update it
if (ShipDate < InvoiceDate)
    {
        ShipDate = InvoiceDate.AddDays(2);
    }

ソリューションエクスプローラーで [InvoiceDetails.lsml] ノードのショートカットメニューを表示し、[開く] を選択します。
データデザイナーで [Product] フィールドを選択します。
ツールバーで [コードの記述] の一覧を開き、[Product_Changed] を選択します。
単価と既定の数量を設定するため、コードエディターで次のコードを追加します。
```
UnitPrice = Product.CurrentPrice
Quantity = 1
```
```
UnitPrice = Product.CurrentPrice;

Quantity = 1;
```
F5 キーを押してアプリケーションを実行し、[Invoice] 画面を開いて請求書を追加します。

日付フィールド、価格、数量が自動的に更新されます。
[保存] をクリックして変更内容を保存します。
実行中のアプリケーションで、右上隅にある [Close] をクリックしてデザインモードに戻ります。
メニューバーで、[ファイル]、[すべてを保存] の順に選択して作業内容を保存します。

さらに計算済みフィールドを追加する

次の手順では、小計、税金、および合計のの計算フィールドを InvoiceDetails エンティティと Invoices エンティティに追加します。

計算フィールドを追加するには

ソリューションエクスプローラーで [InvoiceDetails.lsml] ノードのショートカットメニューを表示し、[開く] を選択します。
データデザイナーで [<プロパティの追加>] リンクを選択し、「SubTotal」と入力して Tab キーを押します。
[型] 列の一覧を開き、[Money] を選択します。
[プロパティ] ウィンドウで、[通貨記号] ボックスに「$」と入力します。
[プロパティ] ウィンドウの [全般プロパティ] セクションで、[計算されたプロパティである] チェックボックスをオンにして、[メソッドの編集] リンクを選択します。

コードエディターが開き、SubTotal_Compute メソッドが表示されます。
SubTotal を計算するために次のコードを追加します。
```
result = Quantity * UnitPrice
```
```
result = Quantity * UnitPrice;
```
ソリューションエクスプローラーで [Invoices.lsml] ノードのショートカットメニューを表示し、[開く] を選択します。
データデザイナーで [<プロパティの追加>] リンクを選択し、「Tax」と入力して Tab キーを押します。
[型] 列の一覧を開き、[Money] を選択します。
[プロパティ] ウィンドウで、[通貨記号] ボックスに「$」と入力します。
[プロパティ] ウィンドウで [計算されたプロパティである] チェックボックスをオンにし、[メソッドの編集] リンクを選択します。

コードエディターが開き、Tax_Compute メソッドが表示されます。

Tax_Compute メソッドを次のコードに置き換えて、Tax を計算します。

Private Sub Tax_Compute(ByRef result As Decimal)
    result =  GetSubTotal() * 0.095
End Sub
Protected Function GetSubTotal() As Decimal
    GetSubtotal = 0
    For Each item In InvoiceDetails
        GetSubTotal = GetSubTotal + item.SubTotal
    Next
End Function

partial void Tax_Compute(ref decimal result)
    {
        result = GetSubTotal() * (decimal)0.095;
    }
protected decimal GetSubTotal()
    {
        return this.InvoiceDetails.Sum(i => i.SubTotal);
    }

ソリューションエクスプローラーで [Invoices.lsml] ノードのショートカットメニューを表示し、[開く] を選択します。
データデザイナーで [<プロパティの追加>] リンクを選択し、「Total」と入力して Tab キーを押します。
[型] 列の一覧を開き、[Money] を選択します。
[プロパティ] ウィンドウで、[通貨記号] ボックスに「$」と入力します。
[プロパティ] ウィンドウで [計算されたプロパティである] チェックボックスをオンにし、[メソッドの編集] リンクを選択します。

コードエディターが開き、Total_Compute メソッドが表示されます。
Total を計算するために次のコードを追加します。
```
result = GetSubTotal() + Tax
```
```
result = GetSubTotal() + Tax;
```
メニューバーで、[ファイル]、[すべてを保存] の順に選択して作業内容を保存します。

次の手順では、[Invoices] 画面に新しいフィールドを追加します。

画面にフィールドを追加するには

ソリューションエクスプローラーで [InvoiceScreen.lsml] ノードのショートカットメニューを開き、[開く] をクリックします。
中央ペインで [行のレイアウト | Invoice Details] ノードを展開し、[追加] の一覧で [Tax] を選択します。

[垂直スタック | InvoiceDetails] セクションに [Tax] フィールドが表示されます。
もう一度 [追加] の一覧を開き、[Total] フィールドを選択します。
F5 キーを押してアプリケーションを実行し、[Invoice Screen] 画面を開きます。

請求書の各行に [Tax] フィールドと [Total] フィールドが表示されます。
[デザイン画面] リンクを選択してカスタマイズモードに変更します。
左ペインで [データグリッド行 | Invoice Detail] ノードを展開し、[追加] の一覧で [SubTotal] を選択します。
[保存] をクリックして変更内容を保存します。

これで、[SubTotal] フィールドが [Invoice Details] グリッドに表示されます。
実行中のアプリケーションで、右上隅にある [Close] をクリックしてデザインモードに戻ります。
メニューバーで、[ファイル]、[すべてを保存] の順に選択して作業内容を保存します。

モバイルクライアントを追加する

これまでに作成した画面は、デスクトップコンピューターでのデータ入力用に最適化されています。クリニックでのタスクには、患者情報や今後の予定の確認など、モバイルデバイスの使用が適しているものもあります。 LightSwitch を使用すると、ほとんどのタブレットや携帯電話のブラウザーでユーザーが表示できる画面を作成できます。次の手順では、患者および予定を参照する HTML クライアント画面を作成します。

HTML クライアントプロジェクトを追加するには

ソリューションエクスプローラーで [Vision Clinic] ノードのショートカットメニューを開き、[クライアントの追加] をクリックします。
[クライアントの追加] ダイアログボックスで [HTML クライアント] 項目を選択し、[OK] をクリックします。

[VisionClinic.HTMLClient] プロジェクトがソリューションに追加されます。

患者を参照するための画面を追加するには

ソリューションエクスプローラーに表示されている [Vision Clinic.Server] プロジェクトで、[Patients.lsml] ノードのショートカットメニューを開き、[開く] をクリックします。
[パースペクティブ] バーで、[HTMLClient] タブをクリックし、ツールバーの [画面] をクリックします。

[新しい画面の追加] ダイアログボックスが表示されます。
[画面テンプレートの選択] の一覧で [データの参照画面] を選択します。
[画面データ] の一覧で [Patients] を選択し、[OK] をクリックします。

参照画面をカスタマイズするには

画面デザイナーの画面コンテンツツリーで、[リスト | Patients] ノードをクリックします。
[リスト] の一覧で [タイルリスト] を選択します。

このオプションでは、患者ごとにタイルが表示されます。既定では、タイルには患者のすべてのフィールドが表示されます。
[行のレイアウト | Patient] ノードの下で、[First Name]、[Last Name]、および [Policy Number] を除くすべてのフィールドを削除します。
ソリューションエクスプローラーに表示されている [Vision Clinic.HTMLClient] プロジェクトで、[BrowsePatients.lsml] ノードのショートカットメニューを開き、[ホーム画面として設定] をクリックします。
F5 キーを選択してアプリケーションを実行します。

ブラウザーウィンドウのサイズを変更した場合、ウィンドウの幅が狭くなるとタイルの配置が変化し、携帯電話などの小さなデバイスでの画面表示が最適化されます。
実行中のアプリケーションで、右上隅にある [Close] をクリックしてデザインモードに戻ります。
メニューバーで、[ファイル]、[すべてを保存] の順に選択して作業内容を保存します。

次に、患者の詳細を確認するための画面を追加します。

詳細画面を追加するには

画面デザイナーの画面コンテンツツリーで、[タイルリスト | Patients] ノードをクリックします。
[プロパティ] ウィンドウの [アクション] で、[項目のタップ: なし] リンクをクリックします。
[ItemTap アクションの編集] ダイアログボックスで [ShowTab] の一覧を展開し、[viewSelected] をクリックして、[OK] をクリックします。
[新しい画面の追加] ダイアログボックスで、既定の値をそのまま使用して [OK] をクリックします。
F5 キーを選択してアプリケーションを実行します。
[Browse Patients] 画面で患者を選択し、[View Patient] 画面を開きます。

[PrimaryPhone] フィールド、[SecondaryPhone] フィールド、および [Email] フィールドはハイパーリンクになっています。これらのフィールドは、カスタムビジネスタイプに基づいており、これらの型のカスタムコントロールには、電話の発信や電子メールの送信を行う機能が組み込まれています。
実行中のアプリケーションで、右上隅にある [Close] をクリックしてデザインモードに戻ります。
メニューバーで、[ファイル]、[すべてを保存] の順に選択して作業内容を保存します。

次に、今後の予定を表示するクエリベースの画面を追加します。

クエリを作成するには

ソリューションエクスプローラーで [Appointments.lsml] ノードのショートカットメニューを開き、[クエリの追加] をクリックします。
[プロパティ] ウィンドウで、[名前] ボックスに「UpcomingAppointments」と入力します。
クエリデザイナーで [フィルターの追加] リンクを選択します。
3 番目の一覧で、[>=] (以上) をクリックします。
4 番目の一覧で [全体] をクリックします。
5 番目の一覧で [今日] をクリックします。
[フィルターの追加] リンクを再度クリックします。
2 番目の一覧で [AppointmentTime] をクリックします。
3 番目の一覧で、[>=] (以上) をクリックします。
4 番目の一覧で [全体] をクリックします。
5 番目の一覧で [現在] をクリックします。
[並べ替えの追加] リンクをクリックし、[AppointmentDate] および [昇順] の既定値を受け入れます。
[並べ替えの追加] リンクを再度クリックし、[AppointmentTime] および [昇順] の既定値を受け入れます。
メニューバーで、[ファイル]、[すべてを保存] の順に選択して作業内容を保存します。

予定画面を作成するには

ソリューションエクスプローラーで [Appointments.lsml] ノードのショートカットメニューを開き、[開く] をクリックします。
データデザイナーの [パースペクティブ] バーで、[HTMLClient] タブをクリックします。
[プロパティ] ウィンドウで、[概要プロパティ] の一覧を開き、[AppointmentTime] をクリックします。
データデザイナーのツールバーで、[画面] をクリックします。
[新しい画面の追加] ダイアログボックスの [画面テンプレートの選択] の一覧で、[データの参照画面] を選択します。
[画面データ] の一覧で [UpcomingAppointments] を選択し、[OK] をクリックします。

予定詳細画面を作成するには

画面デザイナーの画面コンテンツツリーで、[リスト | UpcomingAppointments] ノードをクリックします。
[プロパティ] ウィンドウの [アクション] で、[項目のタップ: なし] リンクをクリックします。
[ItemTap アクションの編集] ダイアログボックスで [ShowTab] の一覧を展開し、[viewSelected] をクリックして、[OK] をクリックします。
[新しい画面の追加] ダイアログボックスで、既定値をそのまま使用して [OK] をクリックします。

画面ナビゲーションを追加するには

ソリューションエクスプローラーで [Vision Clinic.HTMLClient] ノードのショートカットメニューを開き、[画面ナビゲーションの編集] をクリックします。
アプリケーションデザイナーで、[画面を含める] リンクをクリックし、[Browse Patients] をクリックします。
[画面を含める] リンクを再度クリックし、[Browse UpcomingAppointments] をクリックします。
F5 キーを選択してアプリケーションを実行します。
[Browse Patients] 画面で、タイトルバーの横にある下向きの矢印をクリックし、[Browse UpcomingAppointments] をクリックして [Appointments] 画面を開きます。

[Appointments] 画面に、[戻る] ボタンが表示されていることに注意してください。これをクリックすると、[Patients] 画面に戻ることができます。また、ブラウザーウィンドウのサイズを変更すると、ナビゲーションメニューは表示されたままですが、タイトルの一部は表示されません。最後の手順で JavaScript コードを追加して、この問題を解決します。
実行中のアプリケーションで、右上隅にある [Close] をクリックしてデザインモードに戻ります。
メニューバーで、[ファイル]、[すべてを保存] の順に選択して作業内容を保存します。

画面のタイトルを変更するには

ソリューションエクスプローラーで [BrowseUpcomingAppointments.lsml] ノードのショートカットメニューを開き、[開く] をクリックします。
画面デザイナーのツールバーで、[コードの記述] の一覧を開き、created をクリックします。
コードエディターで、次のコードを created メソッドに追加します。
```
screen.details.displayName = "Appointments";
```
F5 キーを選択してアプリケーションを実行します。
[Browse Patients] 画面で、タイトルバーの横にある下向きの矢印をクリックし、[Browse UpcomingAppointments] をクリックして [Appointments] 画面を開きます。

タイトルが [Appointments] になっていることに注意してください。
実行中のアプリケーションで、右上隅にある [Close] をクリックしてデザインモードに戻ります。
メニューバーで、[ファイル]、[すべてを保存] の順に選択して作業内容を保存します。

Vision Clinic アプリケーションのチュートリアルはこれで終了です。ここでは、LightSwitch アプリケーションを作成するための手順をひととおり説明します。

この時点で、インターネットインフォメーションサービス (IIS) または Microsoft Azure にアプリケーションを発行できます。これにより、アプリケーションを他のユーザーが使用できるようになります。

このチュートリアルでは LightSwitch の基本的な機能を紹介しましたが、その他にもさまざまな機能が備わってます。独自のアプリケーションを構築する際、製品のドキュメントで多くの機能について学ぶことができます。

参照

概念

LightSwitch ガイドツアー

Visual Studio LightSwitch

その他の技術情報

LightSwitch について

フィールド	値
(画像)	製品イメージ
(タイトル)	製品名
(サブタイトル)	MSRP
(説明)	説明

次の方法で共有

チュートリアル: LightSwitch での Vision Clinic アプリケーションの作成

必須コンポーネント

手順

プロジェクトの作成

プロジェクトを作成するには

テーブルを定義する

Patient エンティティを作成するには

Invoice および InvoiceDetail エンティティを作成するには

選択肢リストを作成する

選択肢リストを作成するには

リレーションシップを定義する

リレーションシップを定義するには

予定エンティティを作成する

Appointment エンティティを追加するには

画面の作成

画面を作成するには

予定画面を作成する

画面を作成するには

アプリケーションを実行してデータを入力する

アプリケーションを実行するには

データベースに接続する

データ ソースにアタッチするには

Products エンティティと ProductRebate エンティティを変更する

ProductRebate および Products のエンティティを変更するには

一覧および詳細画面を作成する

一覧および詳細画面を作成するには

画面のレイアウトを変更する

レイアウトをカスタマイズするには

実行中のアプリケーションで変更を行う

実行時に、画面をカスタマイズするには

クエリを作成する

パラメーター化されたクエリを作成するには

計算済みフィールドを追加する

計算フィールドを追加するには

画面に計算フィールドを追加するには

データベース間の関係を作成する

データベース間の関係を作成するには

請求書を表示する画面を作成する

画面を作成するには

請求書画面を変更する

実行中のアプリケーションで画面を変更するには

画面のロジックを定義する

画面のロジックを定義するには

さらに計算済みフィールドを追加する

計算フィールドを追加するには

画面にフィールドを追加するには

モバイル クライアントを追加する

HTML クライアント プロジェクトを追加するには

患者を参照するための画面を追加するには

参照画面をカスタマイズするには

詳細画面を追加するには

クエリを作成するには

予定画面を作成するには

予定詳細画面を作成するには

画面ナビゲーションを追加するには

画面のタイトルを変更するには

参照

概念

その他の技術情報

その他のリソース

データソースにアタッチするには

モバイルクライアントを追加する

HTML クライアントプロジェクトを追加するには