共用方式為


逐步解說:建立 Vision Clinic 應用程式

本逐步解說示範在Visual Studio LightSwitch 中建立應用程式的端對端程序。 您將使用 LightSwitch 的許多功能建立虛構眼科診所的應用程式。 該應用程式包含安排預約及建立發票的能力。

必要條件

下載 PrescriptionContoso 資料庫。 MSDN 程式碼繪製廊

步驟

  • 建立專案

    建立應用程式專案。

  • 定義資料表

    加入病人、發票和發票詳細資料實體。

  • 建立選擇清單

    建立一份值的清單。

  • 定義關聯性

    連結相關聯的資料表。

  • 新增另一個實體

    加入預約實體。

  • 建立螢幕

    建立一個顯示 [病人] 的畫面。

  • 執行應用程式

    執行應用程式並輸入資料。

  • 連接到資料庫

    連接至外部資料庫。

  • 對實體進行變更

    修改產品和產品回饋金實體。

  • 建立清單和詳細資料畫面

    建立畫面以顯示產品。

  • 變更畫面配置

    修改產品清單畫面的配置。

  • 進行執行階段變更

    在執行中應用程式中進行變更。

  • 建立查詢

    建立參數型的查詢,並將其繫結至畫面。

  • 加入運算欄位

    建立運算欄位,並將它加入到畫面。

  • 建立跨資料庫的關聯性

    建立不同資料庫中實體之間的虛擬關聯性。

  • 建立發票畫面

    建立畫面以顯示發票。

  • 修改發票畫面

    變更執行中應用程式的發票畫面配置。

  • 加入畫面邏輯

    撰寫程式碼來計算日期。

  • 加入更多運算欄位

    建立更多運算欄位,並將它們加入到發票畫面。

  • 部署應用程式

    發行應用程式做為 2 層桌面應用程式。

建立專案

建立 LightSwitch 應用程式的第一個步驟是開啟新專案。

若要建立專案

  1. 按一下Windows啟動 功能表中的Visual Studio 2012.

    LightSwitch 設計工具隨即出現。

  2. 在 [檔案] 功能表上,按一下 [新增專案]。

    [新增專案] 對話方塊隨即開啟。

  3. 在 [已安裝的範本] 清單中選取 [LightSwitch] 節點。

  4. 在中央窗格中,選取 [LightSwitch 應用程式 (VB)] 或 [LightSwitch] [應用程式 (C#)]。

  5. 在 [名稱] 欄位中,輸入 Vision Clinic,然後按一下 [確定]。

    [Vision Clinic 設計工具] 視窗隨即出現,而且專案的必要資料夾會加入到 [方案總管] 視窗。

    Vision Clinic 專案

定義資料表

在 LightSwitch,資料表稱為「實體」(Entity),模型化資料所代表的物件,在這個案例中為病人。 LightSwitch 應用程式使用「資料表單」模型,也就是說表單或畫面顯示來自一個或多個來源的資料。 LightSwitch 包含可用來儲存應用程式資料的內建資料庫。 在接下來的步驟中,您將建立用來儲存病人資訊的資料庫資料表。

若要建立病人實體

  1. 在 [Vision Clinic 設計工具] 視窗中,按一下 [建立新資料表]。

    資料設計工具隨即顯示,而且 [Table1Items] 節點會出現在 [Solution Explorer] 的 [資料來源] 底下。

  2. 在 [屬性] 視窗中,選取 [名稱] 屬性並輸入 Patient,然後按 Enter。

    [資料設計工具] 標題列中的名稱會變更為 "Patient",而且 [方案總管] 中的名稱變更為 "Patients"。

  3. 按一下 [名稱] 欄中的 [<加入屬性>] 並輸入 FirstName,然後按 Enter。

    請注意,適當的資料型別 String 會出現在 [型別] 欄中,而且 [必要項] 欄位核取方塊已選取。 病人必須有名稱。

  4. 按一下 [名稱] 欄中的 [<加入屬性>],然後輸入 LastName。

  5. 按一下 [名稱] 欄中的 [<加入屬性>],然後輸入 地址。

  6. 按一下 [名稱] 欄中的 [<加入屬性>],然後輸入 地址2。

  7. 在[必要項]欄中,清除核取方塊。

    第二行街道地址是選用的。

  8. 按一下 [名稱] 欄中的 [<加入屬性>],然後輸入 城市。

  9. 按一下 [名稱] 欄中的 [<加入屬性>],然後輸入 縣市。

  10. 按一下 [名稱] 欄中的 [<加入屬性>],然後輸入 區域號碼。

  11. 按一下 [名稱] 欄中的 [<加入屬性>],然後輸入 主要聯絡電話。

  12. 在 [型別] 資料行中,從下拉式清單選取 [PhoneNumber]。

    PhoneNumber 是表示用於輸入及格式化電話號碼的一般模式的「自訂商務類型」(Custom Business Type)。

  13. 在[必要項]欄中,清除核取方塊。

  14. 按一下 [名稱] 欄中的 [<加入屬性>],然後輸入 次要聯絡電話。

  15. 在 [型別] 資料行中,從下拉式清單選取 [PhoneNumber]。

  16. 在[必要項]欄中,清除核取方塊。

  17. 按一下 [名稱] 欄中的 [<加入欄位>],然後輸入 Email。

  18. 在 [型別] 資料行中,從下拉式清單選取 [EmailAddress]。

    EmailAddress 是代表格式正確的電子郵件地址的另一個自訂商務類型。

  19. 在[必要項]欄中,清除核取方塊。

  20. 按一下 [名稱] 欄中的 [<加入屬性>],然後輸入 PolicyNumber。

  21. 在 [屬性] 視窗中,選取 [最大長度] 屬性,然後輸入 12。

    這會防止使用者輸入超過 12 個字元的保單號碼。

    Patient 實體

  22. 在 [檔案] 功能表上,按一下 [全部儲存] 儲存您的工作。

接下來,您還會建立兩個代表發票和發票行項目的實體。

若要建立 Invoice 和 InvoiceDetail 實體

  1. 在 [方案總管],按一下 [Data Sources]。 在 [專案] 功能表上,按一下 [加入資料表]。

    [資料設計工具] 的新執行個體隨即出現。

  2. 在 [屬性] 視窗中,選取 [名稱] 屬性。 輸入 Invoice,然後按下 確定。

  3. 按一下 [名稱] 欄中的 [<加入屬性>]。 輸入 InvoiceDate,然後按下 Enter。

  4. 在 [型別] 資料行中,從下拉式清單選取 [DateTime]。

  5. 按一下 [名稱] 欄中的 [<加入屬性>]。 輸入 InvoiceDue,然後按下 Enter。

  6. 在 [型別] 資料行中,從下拉式清單選取 [DateTime]。

  7. 在[必要項]欄中,清除核取方塊。

  8. 按一下 [名稱] 欄中的 [<加入屬性>]。 輸入 InvoiceStatus,然後按下 Enter。

  9. 在 [型別] 資料行中,從下拉式清單選取 [整數]。

  10. 按一下 [名稱] 欄中的 [<加入屬性>]。 輸入 ShipDate,然後按下 Enter。

  11. 在 [型別] 資料行中,從下拉式清單選取 [DateTime]。

    Invoice 實體

  12. 在 [方案總管],按一下 [Data Sources]。 在 [專案] 功能表上,按一下 [加入資料表]。

  13. 在 [屬性] 視窗中,選取 [名稱] 屬性。輸入 InvoiceDetail,然後按 Enter。

  14. 按一下 [名稱] 欄中的 [<加入屬性>]。輸入 Quantity,然後按 Enter。

  15. 在 [型別] 資料行中,從下拉式清單選取 [整數]。

  16. 按一下 [名稱] 欄中的 [<加入屬性>],然後輸入 UnitPrice。

  17. 在 [型別] 資料行中,從下拉式清單選取 [Money]。

    Money 是代表且正確格式化貨幣的另一個自訂商務類型。

    InvoiceDetails 實體

  18. 在 [檔案] 功能表上,按一下 [全部儲存] 儲存您的工作。

建立選擇清單

在接下來的步驟中,您將建立 Invoice 實體的「選擇清單」(Choice List)。 選擇清單可呈現一組固定值,以供使用者選擇。

若要建立選擇清單

  1. 按兩下 [方案總管] 中的 [發票]。

  2. 在 [資料設計工具] 中,選取 [InvoiceStatus] 欄位。

  3. 在[屬性 ] 視窗中,按一下 [選擇清單]連結。

    選擇清單對話方塊

    [選擇清單] 對話方塊隨即出現。

  4. 在[選擇清單]對話方塊中,輸入下列設定值,然後按一下 [ 確定]。

    顯示名稱

    0

    Active

    1

    已支付

    2

    過期

    當這個欄位顯示在畫面上時,它會向使用者顯示下拉式清單,其中包含您輸入的三個 [顯示名稱] 值。

  5. 在 [檔案] 功能表上,按一下 [全部儲存] 儲存您的工作。

定義關聯性

在接下來的步驟中,您將定義 PatientInvoiceInvoiceDetail 實體之間的關聯性。

若要定義關聯性

  1. 按兩下 [方案總管] 中的 [發票]。

  2. 按一下 [資料設計工具] 工具列上的 [關聯性]。

    [加入新關聯性] 對話方塊隨即出現。

  3. 在 [加入新的關聯性] 對話方塊中,選取 [名稱] 列中的 [] 欄。 選取 [病患],然後按一下 [確定]。

    Patient 和 Invoice 實體之間就會建立一對多關聯性;病人可以有多個發票。

  4. 按一下 [資料設計工具] 工具列上的 [關聯性]。

    [加入新關聯性] 對話方塊隨即出現。

  5. 在 [加入新的關聯性] 對話方塊中,選取 [名稱] 列中的 [] 欄,然後選取 [InvoiceDetail]。

  6. 選取 [多重性] 列中的 [] 欄,然後選取 []。

  7. 選取 [多重性] 列中的 [] 欄,選取 [],然後按一下 [確定]。

    Invoice 和 InvoiceDetail 實體之間就會建立一對多關聯性;發票可以有多個發票詳細資料。

    Invoice 和 InvoiceDetail 之間的關聯性。

  8. 在 [檔案] 功能表上,按一下 [全部儲存] 儲存您的工作。

建立預約實體

在接下來的步驟中,還會加入一個代表預約的實體,然後加入關聯性和選擇清單。

若要加入預約實體

  1. 在 [方案總管] 中,按一下 [Data Sources],然後按一下 [專案] 功能表上的 [加入資料表]。

  2. 在 [屬性] 視窗中,將 [名稱] 變更為 Appointment。

  3. 在 [資料設計工具] 中,按一下 [名稱] 欄中的 [<加入屬性>],然後輸入 AppointmentTime。

  4. 在 [型別] 資料行中,從下拉式清單選取 [DateTime]。

  5. 按一下 [名稱] 欄中的 [<加入屬性>],然後輸入 AppointmentType。

  6. 在 [型別] 資料行中,從下拉式清單選取 [短整數]。

  7. 按一下 [名稱] 欄中的 [<加入屬性>],然後輸入 DoctorNotes。

  8. 接受預設型別 [字串] 並清除 [必要項] 核取方塊。

  9. 按一下 [資料設計工具] 工具列上的 [關聯性]。

  10. 在 [加入新的關聯性] 對話方塊中,選取 [名稱] 列中的 [] 欄。 選取 [病患],然後按一下 [確定]。

    Patient 和 Appointment 實體之間就會建立一對多關聯性;病人可以有多個預約。

  11. 在 [資料設計工具] 中,選取 [AppointmentType] 欄位。

  12. 在[屬性 ] 視窗中,按一下 [選擇清單]連結。

    [選擇清單] 對話方塊隨即出現。

  13. 在[選擇清單]對話方塊中,輸入下列設定值,然後按一下 [ 確定]。

    顯示名稱

    0

    年度定期

    1

    複診

    2

    緊急事件

    Appointment 實體

  14. 在 [檔案] 功能表上,按一下 [全部儲存] 儲存您的工作。

建立螢幕

在接下來的步驟中,您將建立顯示病人清單的畫面。

若要建立畫面

  1. 在 [方案總管] 中,按一下 [畫面] 節點,然後按一下 [專案] 功能表上的 [加入畫面]。

    [加入新畫面] 對話方塊隨即開啟。

  2. 選取 [選取畫面範本] 清單中的 [可編輯方格畫面]。

  3. 在 [畫面名稱] 文字方塊中,輸入 PatientList。

  4. 選取 [畫面資料] 下拉式清單,然後選取 [Patients]。 按一下 [確定]。

    定義 PatientList 畫面

    [畫面設計工具] 隨即開啟,並顯示畫面配置的階層表示。

  5. 在 [檔案] 功能表上,按一下 [全部儲存] 儲存您的工作。

執行應用程式並輸入資料

應用程式現在可運作。 在接下來的步驟中,您將執行應用程式和輸入一些資料。

若要執行應用程式

  1. F5 啟動應用程式。

  2. 在執行的應用程式中,選取 [PatientList] 畫面,然後按一下加號 +... 按鈕。

    [加入新的病人] 對話方塊隨即出現。

  3. 輸入新病人的資料。 在 [電子郵件] 欄位中,輸入無效值,例如 john#example.com。

    無效的電子郵件地址

    當您離開該欄位時會出現紅色框線。 EmailAddress 商務類型有內建的驗證規則,可以偵測格式不正確的電子郵件地址。

  4. 更正錯誤,完成資料項目,然後按一下 [確定]。

    應用程式工具列上的 [儲存] 按鈕現已啟用。

  5. 按一下 [+…] (加入) 按鈕。 加入第二個病人的資料,然後按一下 [確定]。

  6. 按一下 [儲存] 儲存您的資料。

    您現在可以重新排列 [PatientList] 方格中的各欄,也可以對任一欄進行排序。

  7. 按一下執行中應用程式右上角的 [關閉] 按鈕,返回設計模式。

  8. 在 [檔案] 功能表上,按一下 [全部儲存] 儲存您的工作。

連接到資料庫

在接下來的步驟中,您將連接到外部資料庫,其中包含產品資訊。

注意事項注意事項

執行這個步驟之前,必須先下載並安裝 PrescriptionContoso 資料庫。資料庫可以從 MSDN 程式碼繪製廊下載。依照 Install.htm 檔案中的指示安裝資料庫。

若要附加至資料來源

  1. 在 [方案總管] 中,選取 [資料來源] 節點。

  2. 在 [專案] 功能表上,按一下 [加入資料來源]。

    [附加資料來源] 精靈隨即開啟。

  3. 在 [附加資料來源] 精靈中,按一下 [資料庫],然後按 [下一步]。

    [選擇資料來源] 對話方塊隨即出現。

    注意事項注意事項

    如果您以前已連接到 LightSwitch 中的資料庫,這個對話方塊就不會顯示,並且您可以略過下一個步驟。

  4. 如果出現 [選擇資料來源] 對話方塊,則按一下 [Microsoft SQL Server],再按 [繼續]。

    [連接屬性] 對話方塊隨即出現。

  5. 在 [連接屬性] 對話方塊中,輸入下表中的值,然後按一下 [確定]。

    欄位

    伺服器名稱

    (localdb) \v11.0

    登入伺服器

    使用 Windows 驗證。

    選取或輸入資料庫名稱

    C:\Temp\PrescriptionContoso.mdf

    連接屬性

    [選擇您的資料庫物件] 精靈頁面隨即出現。

  6. 展開 [資料表] 節點。

  7. 選取 [Product] 和 [ProductRebate] 資料表,然後按一下 [完成]。

    C_TEMP_PRESCRIPTIONCONTOSO_MDFData 資料來源會加入到專案,並建立 ProductsProductRebates 實體。

  8. 在 [方案總管] 中,以滑鼠右鍵按一下 [C_TEMP_PRESCRIPTIONCONTOSO_MDFData],按一下 [重新命名],然後輸入 PrescriptionContoso

  9. 在 [檔案] 功能表上,按一下 [全部儲存] 儲存您的工作。

修改 Products 和 ProductRebate 實體

在接下來的步驟中,您將對 ProductRebate 和 Products 實體進行一些變更。

若要修改 ProductRebate 和 Products 實體

  1. 在 [方案總管],按兩下 [ProductRebates] 節點。

  2. 選取 [Rebate] 欄位,並將 [型別] 變更為 [Money]。

  3. 在 [方案總管],按兩下 [產品] 節點。

  4. 在 [資料設計工具],選取 [MSRP] 欄位,並將 [型別] 變更為 [Money]。

  5. 選取 [ProductImage] 欄位,並將 [型別] 變更為 [Image]。

  6. 在 [檔案] 功能表上,按一下 [全部儲存] 儲存您的工作。

建立清單和詳細資料畫面

在接下來的步驟中,您將建立畫面以顯示產品資訊。

若要建立清單和詳細資料畫面

  1. 在 [方案總管] 中,選取 [畫面] 節點。 在 [專案] 功能表上,按一下 [加入畫面]。

  2. 在 [加入新的畫面] 對話方塊中,選取 [選取畫面範本] 清單中的 [清單和詳細資料畫面]。

  3. 在 [畫面名稱] 欄位中,輸入 ProductList。

  4. 選取 [畫面資料] 下拉式清單,然後選取 [PrescriptionContoso.Products]。

  5. 在 [要包含的其他資料] 清單中,選取 [Product Details] 和 [Product ProductRebates] 核取方塊,然後按一下 [確定]。

變更畫面配置

在接下來的步驟中,您將變更 [ProductList] 畫面的配置。

若要自訂配置

  1. 在 [畫面設計工具] 中,選取 [畫面內容樹狀結構] 中的 [資料列配置 |產品詳細資料] 節點。

  2. 在 [資料列配置] 下拉式清單中,選取 [圖片及文字]。

  3. 從 [圖片和文字] 節點底下每個欄位的下拉式清單中選取下列值:

    欄位

    (照片)

    產品影像

    (標題)

    產品名稱

    (副標題)

    MSRP

    (敘述)

    描述

    圖片和文字配置

  4. F5 執行應用程式並檢視結果。

  5. 在執行的應用程式,按一下 [ProductList] 功能表以顯示畫面。

    將應用程式保持開啟狀態。 在接下來的步驟中,您將在執行的應用程式中進行變更。

在執行的應用程式中進行變更

在接下來的步驟中,將在應用程式執行時修改 [Product List] 畫面。

若要在執行階段自訂畫面

  1. 在 [產品清單] 畫面上,按一下右下角的 [設計螢幕] 按鈕。

  2. 在左窗格中,選取 [資料格 | 產品回饋金] 節點。

  3. 在 [屬性] 視窗中,將 [顯示名稱] 屬性變更為 Contoso 回饋金。

    名稱也會在應用程式視窗中變更。

  4. 選取 [MSRP] 欄位並將 [描述] 屬性變更為任何回饋金之前的建議價格。

    設計階段自訂

  5. 按一下 [儲存] 按鈕返回執行的應用程式,並檢視所做的變更。 暫留在 MSRP 欄位以查看說明。

  6. 按一下執行中應用程式右上角的 [關閉] 按鈕,返回設計模式。

  7. 在 [檔案] 功能表上,按一下 [全部儲存] 儲存您的工作。

建立查詢

在接下來的步驟中,您將建立參數化的查詢,並將它繫結到畫面。

若要建立參數化的查詢

  1. 在 [方案總管] 中,選取 [產品] 節點。 在 [專案] 功能表上,按一下 [加入查詢]。

    [查詢設計工具] 隨即出現。

  2. 在 [屬性] 視窗中,選取 [名稱] 欄位並輸入 RelatedProducts。

  3. 在 [查詢設計工具] 中,按一下 [加入篩選條件]。

    篩選條件會加入至 [篩選]。

  4. 在第二個下拉式清單中,選取 [分類]。

  5. 在第四個下拉式清單中,選取 [參數]。

  6. 在第五個下拉式清單中,按一下 [加入新的參數]。

    名為 Category、型別為 String 的新 Parameter 就會加入到 [參數] 區段。

    RelatedProducts 查詢

  7. 在 [方案總管],按兩下 [ProductList] 節點開啟 [畫面設計工具]。

  8. 在 [畫面設計工具] 工具列中,按一下 [加入資料項目]。

    [加入資料項目] 對話方塊隨即出現。

  9. 在 [新增資料項目] 對話方塊中,按一下 [ 查詢]。 在 [名稱] 欄中選取 [PrescriptionContoso.RelatedProducts],然後按一下 [確定]。

    [RelatedProducts] 節點隨即出現在左窗格中。

  10. 選取 [查詢參數] 底下的 [分類] 節點。

  11. 在 [屬性] 視窗中,選取 [參數繫結] 屬性並輸入 Products.SelectedItem.Category。

  12. 在中央窗格中展開 [DataGrid |Contoso 回饋金] 節點下面的 [新增] 節點,並按一下 [相關產品]。

    加入相關產品

  13. F5 執行應用程式並檢視結果。

    開啟 [Products List] 畫面,並注意到每個選定的產品都會顯示相關的產品清單。

  14. 按一下執行中應用程式右上角的 [關閉] 按鈕,返回設計模式。

  15. 在 [檔案] 功能表上,按一下 [全部儲存] 儲存您的工作。

加入運算欄位

在接下來的步驟中,您將加入可使用計算值的欄位。 計算值將是套用回饋金額後的產品價格。

若要加入運算欄位

  1. 在 [方案總管],按兩下 [Products] 實體節點。

  2. 在 [資料設計工具],按一下 [<加入屬性>]。 輸入 CurrentPrice,然後按一下 [索引標籤]。

  3. 在 [型別] 資料行中,從下拉式清單選取 [Money]。

    在 [屬性] 視窗中,[一般] 底下的 [已計算] 屬性預設會選取。

  4. 在 [屬性] 視窗中,按一下 [編輯方法] 連結。

    [程式碼編輯器] 隨即出現,並顯示 CurrentPrice_Compute 方法。

  5. 將下列程式碼加入至事件處理常式:

    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;
    

    計算目前價格的程式碼

  6. 在 [檔案] 功能表上,按一下 [全部儲存] 儲存您的工作。

在接下來的步驟中,您會將運算欄位加入到 ProductList 畫面。

若要將運算欄位加入到畫面

  1. 在 [方案總管],按兩下 [ProductList] 畫面節點。

  2. 在 [畫面設計工具] 的左窗格中,選取 [CurrentPrice] 節點並將它拖曳到中央窗格中 [(描述) |描述] 節點下方。

    拖放後的目前價格

  3. F5 執行應用程式並檢視結果。

  4. 在 [ProductList] 畫面中,編輯 [Rebate] 或 [MSRP] 欄位。 CurrentPrice 會重新計算。 按一下 [關閉] 按鈕返回設計模式。

  5. 按一下執行中應用程式右上角的 [關閉] 按鈕,返回設計模式。

  6. 在 [檔案] 功能表上,按一下 [全部儲存] 儲存您的工作。

建立跨資料庫的關聯性

在接下來的步驟中,將建立位於兩個不同資料庫中實體之間的虛擬關聯性,並在單一清單和詳細資料畫面中顯示來自兩個不同資料來源的資料。

若要建立跨資料庫的關聯性

  1. 在 [方案總管],按兩下 [InvoiceDetails] 實體節點。

  2. 在 [資料設計工具],按一下 [關聯性] 工具列按鈕。

  3. 在 [加入新的關聯性] 對話方塊中,選取 [] 欄中的 [名稱] 欄位,然後選取 [產品]。

    新區段會出現在對話方塊底部。 它顯示兩個實體的相關欄位。 如有必要,可以將相關欄位變更為相同資料型別的另一個欄位,或者將多個相關欄位定義為索引鍵。

    跨資料庫關聯性

  4. 按一下 [確定] 儲存關聯性。

    新關聯性在設計工具中顯示為虛線。 這表示實體是在不同的資料來源,在這個案例中 InvoiceDetails 來自內建資料庫,而 Products 來自 PrescriptionContoso 資料庫。

  5. 在 [檔案] 功能表上,按一下 [全部儲存] 儲存您的工作。

建立畫面以顯示發票

在接下來的步驟中,您將建立新的畫面以顯示發票。

若要建立畫面

  1. 在 [方案總管] 中,選取 [畫面] 節點。 在 [專案] 功能表上,按一下 [加入畫面]。

  2. 在 [加入新的畫面] 對話方塊中,選取 [選取畫面範本] 清單中的 [清單和詳細資料畫面]。

  3. 在 [畫面名稱] 文字方塊中輸入 InvoiceScreen。

  4. 選取 [畫面資料] 下拉式清單,然後選取 [Invoices]。

  5. 在 [要包含的其他資料] 清單中,選取 [Invoice Details] 和 [Invoice InvoiceDetail] 核取方塊,然後按一下 [確定]。

    InvoiceScreen 配置

  6. 展開 [資料格資料列 | 發票詳細資料] 節點。 選取 [產品的產品 ID] 節點並刪除它。

  7. 若要重新排列欄位,按一下 [單價] 節點並將它拖曳到 [產品] 節點下方。

  8. 按下 F5,執行應用程式。 在功能表中,按一下 [發票畫面] 以顯示畫面。

  9. 按一下 [發票] 窗格中的 [+…] (加入) 按鈕。

    輸入一些發票資料。 請注意 [InvoiceStatus] 欄位如何提供值的下拉式清單,以及 [Patient] 欄位包含按鈕,以開啟有病人清單的對話方塊。

  10. 在 [Invoice Details] 窗格中,按一下加號 +... 按鈕。

    輸入一些發票詳細資料。 請注意 [產品] 欄位如何從 PrescriptionContoso 資料庫提供產品的下拉式清單。

  11. 按一下 [儲存] 按鈕以儲存您的發票資料。

  12. 將應用程式保持開啟狀態。 在接下來的步驟中,您將在執行的應用程式中進行變更。

修改發票畫面

在接下來的步驟中,您將在執行的應用程式中的發票畫面進行一些變更。

若要修改執行中應用程式的畫面

  1. 從 [發票畫面] 畫面上,按一下右上角的 [設計畫面] 按鈕。

  2. 在左窗格中,選取 [清單 |發票] 節點。 從 [清單] 下拉式清單中選取 [DataGrid]。

  3. 選取 [病人] 節點。 使用左邊界中的上移箭號,將它移至 [發票日期] 節點上方。

    自訂的 Invoice 畫面

  4. 按一下 [儲存] 返回執行的應用程式,並檢視所做的變更。

  5. 按一下執行中應用程式右上角的 [關閉] 按鈕,返回設計模式。

  6. 在 [檔案] 功能表上,按一下 [全部儲存] 儲存您的工作。

定義畫面邏輯

在接下來的步驟中,您將加入程式碼以定義發票日期的預設邏輯。

若要定義畫面邏輯

  1. 在 [方案總管],按兩下 [Invoices] 實體節點。

  2. 在 [資料設計工具] 中,按一下工具列上的 [撰寫程式碼] 下拉式清單。 按一下 [Invoice_Created] 連結。

    [程式碼編輯器] 隨即開啟,並顯示 Invoice_Created 方法。

  3. 在 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);
    
  4. 在 [方案總管],按兩下 [Invoices] 實體節點。

  5. 在 [資料設計工具],選取 [InvoiceDate] 欄位。

  6. 按一下工具列上的 [撰寫程式碼] 下拉式清單,然後按一下 [InvoiceDate_Changed] 連結

  7. 在 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);
        }
    
  8. 在 [方案總管],按兩下 [InvoiceDetails] 節點。

  9. 在 [資料設計工具] 中選取 [產品] 欄位,按一下工具列上的 [撰寫程式碼] 下拉式清單,然後按一下 [Product_Changed] 連結。

  10. 在 [程式碼編輯器],加入下列程式碼以設定單價和預設數量:

    UnitPrice = Product.CurrentPrice
    Quantity = 1
    
    UnitPrice = Product.CurrentPrice;
    
    Quantity = 1;
    
  11. F5 執行應用程式並檢視所做的變更。

    開啟 [發票] 畫面並加入新的發票。 日期欄位、價格和數量現在會自動更新。

  12. 按一下 [儲存] 按鈕以儲存您的變更。

  13. 按一下執行中應用程式右上角的 [關閉] 按鈕,返回設計模式。

  14. 在 [檔案] 功能表上,按一下 [全部儲存] 儲存您的工作。

加入更多運算欄位

在接下來的步驟中,您會將 SubTotal、Tax 和 Totals 的運算欄位加入到 InvoiceDetailsInvoices 實體。

若要加入運算欄位

  1. 在 [方案總管],按兩下 [InvoiceDetails] 實體節點。

  2. 在 [資料設計工具],按一下 [<加入屬性>]。輸入 SubTotal,然後按一下 [索引標籤]。

  3. 在 [型別] 資料行中,從下拉式清單選取 [Money]。

  4. 在 [屬性] 視窗中,選取 [一般屬性] 底下的 [IsComputed] 核取方塊。

  5. 按一下 [編輯方法] 連結。

    [程式碼編輯器] 隨即出現,並顯示 SubTotal_Compute 方法。

  6. 加入下列程式碼以計算 SubTotal:

    result = Quantity * UnitPrice
    
    result = Quantity * UnitPrice;
    
  7. 在 [方案總管],按兩下 [Invoices] 實體節點。

  8. 在 [資料設計工具],按一下 [<加入屬性>]。輸入 Tax,然後按一下 [索引標籤]。

  9. 在 [型別] 資料行中,從下拉式清單選取 [Money]。

  10. 在 [屬性] 視窗中,選取 [IsComputed] 核取方塊。

  11. 按一下 [編輯方法] 連結。

    [程式碼編輯器] 隨即開啟,並顯示 Tax_Compute 方法。

  12. 將 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);
        }
    
  13. 在 [方案總管],按兩下 [Invoices] 實體節點。

  14. 在 [資料設計工具],按一下 [<加入屬性>]。 輸入 Total,然後按一下 [索引標籤]。

  15. 在 [型別] 資料行中,從下拉式清單選取 [Money]。

  16. 在 [屬性] 視窗中,選取 [IsComputed] 核取方塊。

  17. 按一下 [編輯方法] 連結。

    [程式碼編輯器] 隨即開啟,並顯示 Total_Compute 方法。

  18. 加入下列程式碼以計算 Tax:

    result = GetSubTotal() + Tax
    
    result = GetSubTotal() + Tax;
    
  19. 在 [檔案] 功能表上,按一下 [全部儲存] 儲存您的工作。

在接下來的步驟中,您會將新欄位加入到 [發票] 畫面。

若要將欄位加入到畫面

  1. 在 [方案總管],按兩下 [InvoiceScreen] 畫面節點。

  2. 在中央窗格中,選取並展開 [資料列配置 | 發票詳細資料] 節點。

  3. 選取並展開 [加入] 下拉式清單,然後選取 [Tax]。

    [Tax] 欄位會加入到 [垂直堆疊 | InvoiceDetails] 區段。

  4. 再次選取 [加入] 下拉式清單,並選取 [Total] 欄位。

  5. F5 執行應用程式並檢視結果。

    開啟 [發票畫面] 畫面。 每個發票列現在都會顯示 [Tax] 和 [Total] 欄位。

  6. 按一下 [設計畫面] 按鈕變更為自訂模式。

  7. 在左窗格中,選取 [資料格資料列 |Invoice Detail] 節點並展開它。

  8. 按一下 [加入] 下拉式清單,並選取 [SubTotal]。

  9. 按一下 [儲存] 儲存變更。 [SubTotal] 欄位現在會顯示在 [Invoice Details] 方格中。

    更新的 Invoice 畫面

  10. 按一下執行中應用程式右上角的 [關閉] 按鈕,返回設計模式。

  11. 在 [檔案] 功能表上,按一下 [全部儲存] 儲存您的工作。

部署應用程式

在接下來的步驟中,您將部署應用程式做為 2 層桌面應用程式。

若要發行 2 層桌面應用程式

  1. 在 [方案總管] 中選取 [Vision Clinic] 節點,然後按一下 [建置] 功能表上的 [發行 Vision Clinic]。

    [LightSwitch 發行應用程式精靈] 隨即出現。

  2. 在 [歡迎使用 LightSwitch 發行精靈] 頁面上,確認已選取 [桌面],然後按 [下一步]。

  3. 在 [應用程式服務] 頁面上,確認已選取 [本機],然後按 [下一步]。

  4. 在 [指定發行偏好設定] 頁面上,選取 [您要將應用程式檔案放置在何處] 欄位並輸入 C:\Publish。

  5. 在 [您要如何發行預設資料庫?] 區段中,選取 [立即直接發行到資料庫],然後按 [下一步]。

  6. 在 [LightSwitch 應用程式資料庫 - SQL 資料庫連接] 頁面上,接受預設的連接字串值,然後按 [下一步]。

  7. 在 [安裝必要條件] 頁面上接受預設設定,然後按 [下一步]。

  8. 接受 [其他連接資訊] 頁面上的預設設定,然後按一下 [發行]。

  9. 在 [Windows 檔案總管] 中,找到 C:\Publish 目錄並按兩下 Setup.exe 檔案,將應用程式安裝在本機電腦上。

    注意事項注意事項

    若要在不同的電腦上安裝應用程式,請複製 Publish 資料夾和所有子資料夾的內容。在安裝之前,您必須完成在 Install.htm 檔案中列出的步驟,可在 Publish 資料夾中找到這個檔案。

  10. 如果出現 [應用程式安裝 - 安全性警告] 對話方塊,請按一下 [安裝]。

    眼科診所應用程式就會安裝並啟動。

    完成的應用程式

  11. 輸入一些資料,並驗證該應用程式如預期運作。

    提示

    如果您要再次執行眼科診所應用程式,可以從 [開始] 功能表開啟它。

這就完成了眼科診所應用程式逐步解說。 現在,您應該有建立 LightSwitch 應用程式端到端程序的基本了解。

本逐步解說示範 LightSwitch 的基本功能,但 LightSwitch 還有更多可用的功能。 當您開始建置您自己的應用程式,您可以在產品文件中了解更多功能。

請參閱

概念

LightSwitch 導覽

Visual Studio LightSwitch

其他資源

LightSwitch 使用者入門