LightSwitch 應用程式的 HTML 用戶端螢幕

使用 Microsoft LightSwitch for Visual Studio Update 2，您可以建立 HTML 為在行動裝置上顯示最佳化的用戶端螢幕。 本主題將介紹您可以用於建立螢幕根據 HTML5 工具，您可以使用設計螢幕和某些工作可以執行設計您的 LightSwitch 應用程式的最佳螢幕的範本。

如需將 HTML 螢幕用戶端之端對端範例，請參閱 逐步解說：為行動使用者建立 LightSwitch 用戶端。

HTML 用戶端

您可以將一個或多個 HTML 用戶端加入至現有的 LightSwitch 應用程式，也可以建立 Microsoft LightSwitch for Visual Studio Update 2 的應用程式只包含 HTML 用戶端。 每個 HTML 用戶端在 LightSwitch 方案中的專案中。

注意事項
當您將 [HTML 用戶端] 專案加入至 LightSwitch 方案時，它會升級至 Microsoft LightSwitch for Visual Studio Update 2。修改方案中的檔案結構，然後，您便無法再於未安裝 Microsoft LightSwitch for Visual Studio Update 2 的電腦上的方案。 如需詳細資訊，請參閱如何：建立或新增 HTML 用戶端專案。

畫面範本

若要開始使用，請透過使用下列其中一個畫面範本來建立畫面：

• 瀏覽畫面

• 檢視詳細資料畫面

• 加入/編輯詳細資料畫面

如需如何選擇範本的詳細資訊，請參閱為 LightSwitch 應用程式的 HTML 用戶端選擇螢幕類型。

如需如何尋找這些範本的詳細資訊，請參閱 如何：建立 HTML 用戶端螢幕。

畫面設計工具

使用螢幕設計工具中，您可以修改螢幕的設計。 畫面設計工具顯示諸如資料欄位和命令等「項目」(Item)，以及資料階層式表示的「畫面內容樹狀結構」(Screen Content Tree)。 您可以將項目拖曳到畫面內容樹狀結構，以所要的順序排列它們。

如需畫面設計工具的詳細資訊，請參閱螢幕設計工具導覽。

如需如何執行特定工作的詳細資訊螢幕設計工具，請參閱 如何：使用螢幕設計工具設計 HTML 螢幕。

畫面設計工作

若要修改畫面設計，您可以執行下列工作：

• 修改畫面的外觀

• 將欄位和命令加入到畫面

• 篩選出現在畫面上的資料

• 將資料加入到畫面

• 自訂在螢幕之間巡覽

• 透過使用程式碼修改畫面

修改畫面的外觀

您可以修改資料在畫面上的顯示方式。 例如，您可以設定一資訊收集出現，一般清單或是一個並排顯示的清單。 您可以變更欄位一起出現或群組欄位的命令。

如需詳細資訊，請參閱如何：使用螢幕設計工具設計 HTML 螢幕。

將欄位和命令加入到畫面

在 LightSwitch 的 HTML 螢幕提供內建命令，讓使用者可以檢視，更新，刪除或儲存資料。 您還可以加入自訂命令和欄位。

將自訂命令您是否要將商務邏輯加入至畫面。 例如，您可以將按鈕，讓使用者可以顯示根據銷售次序容量的客戶清單。 如需詳細資訊，請參閱如何：為 LightSwitch 的行動用戶端加入按鈕。

您可以加入自訂的「區域屬性」(Local Property) 欄位，以收集或顯示資訊。 例如，可以在銷售數量按鈕旁邊加入文字方塊，讓使用者可以指定要在清單中顯示多少客戶。 如需詳細資訊，請參閱如何：將區域屬性加入至 HTML 螢幕。

將自訂控制項加入到畫面

將自訂控制項加入至 HTML 畫面，您可以顯示或收集資訊是超出控制項功能範圍是內建在 LightSwitch 的方式。 您也可以使用自訂控制項會取代控制項出現在螢幕上的所有內建 LightSwitch 控制項。 如需詳細資訊，請參閱如何：將自訂控制項加入至 LightSwitch 應用程式的 HTML 螢幕。

篩選出現在畫面上的資料

可以透過修改畫面查詢條件，篩選出現在畫面上的資料。

出現在設計工具左窗格中的每個資料群組都是基於查詢。 螢幕顯示由這些查詢只傳回的資訊。 若要變更為資料的一個群組所顯示的資訊，請修改的查詢。

如需詳細資訊，請參閱如何：在 LightSwitch 應用程式的 HTML 用戶端中篩選資料。

將資料加入到畫面

您可以將其他類型的資料加入到畫面。 例如，在顯示客戶的畫面上，您可以加入可顯示訂單清單的資料方格。 如需詳細資訊，請參閱HOW TO：將資料加入至螢幕。

自訂在螢幕之間巡覽

在 HTML 用戶端，只有一個螢幕隨時為作用中。 您可以指定使用者如何開啟另一個螢幕，而發生的事情，當螢幕變成非現用。

如需詳細資訊，請參閱如何：控制 LightSwitch 應用程式 HTML 螢幕之間的巡覽方式。

透過使用程式碼修改畫面

您可以將程式碼加入至 LightSwitch 呼叫的部分方法，如此一來，當，某些事件會在執行階段時，適當地修改螢幕。 例如，您可以加入程式碼，向您的應用程式使用者隱藏想要保持匿名的公司名稱。 這個程式碼會檢查客戶的公司名稱，，並在找到相符項目時，設定 CompanyName 欄位的 IsVisible 屬性為 False ，資訊會顯示在螢幕上。

如需撰寫程式碼的詳細資訊，位置 (請參閱 如何：在 LightSwitch 應用程式的行動用戶端中處理螢幕事件。

如需如何加入用於修改畫面之程式碼的詳細資訊，請參閱 How to: Modify an HTML Screen by Using Code。

相關主題

標題	描述
為 LightSwitch 應用程式的 HTML 用戶端選擇螢幕類型	描述可做為建立畫面起點的範本。
如何：建立 HTML 用戶端螢幕	示範如何將畫面加入到您的應用程式。
螢幕設計工具導覽	說明設計工具的組件及其功能。
如何：使用螢幕設計工具設計 HTML 螢幕	示範如何使用畫面設計工具。
如何：將區域屬性加入至 HTML 螢幕	示範如何將自訂區域屬性欄位至畫面。
如何：為 LightSwitch 的行動用戶端加入按鈕	顯示如何將按鈕或在螢幕的自訂程式碼的連結。
如何：將自訂控制項加入至 LightSwitch 應用程式的 HTML 螢幕	在 LightSwitch 螢幕顯示如何使用自訂 HTML 控制項。
HOW TO：將資料加入至螢幕	示範如何將資料從其他查詢加入到畫面。
HOW TO:在 HTML 螢幕的篩選資料	示範如何使用查詢來控制出現在畫面中的資料。
如何：在 LightSwitch 應用程式的行動用戶端中處理螢幕事件	描述如何藉由撰寫執行的程式碼以自訂您的應用程式，在某些事件發生。
How to: Modify an HTML Screen by Using Code	描述如何使用程式碼來修改控制項並與畫面上的項目互動。
參考：螢幕設計工具屬性	描述出現在畫面成員清單中和畫面設計工具的畫面內容樹狀結構中之項目的屬性。 您可以透過使用 [屬性] 視窗設定屬性值，修改項目的外觀和行為。
如何：控制 LightSwitch 應用程式 HTML 螢幕之間的巡覽方式	描述 LightSwitch 應用程式的 HTML 用戶端的螢幕導覽模型。