Note
Access to this page requires authorization. You can try signing in or changing directories.
Access to this page requires authorization. You can try changing directories.
各位夥伴們,
第一次聽到 LightSwitch 這個字眼? 它是什麼呢？ 有時候我們想在 Visual Studio 中用工具拖拉點選，快速地 “拉" 出一個資料庫的應用程式，例如中小企業需要一個簡單的產品型錄管理應用、庫存管理、辦公室資產管理、甚至訂便當系統，這類簡單的辦公室應用大都只有基本的資料庫表格操作、以及表單及報表的應用，無需太多客製化空間或是系統整合、也不用寫程式碼，這時候就可以使用 Visual Studio LightSwitch 這個工具！(在以往可能是使用 Access 、甚至是更早期的 FoxPro 工具來設計資料庫應用，但這類的工具無法設計出 Web 版本、往往也侷限在單機操作或是 Client-Server 架構)
我們整理了一系列的 Visual Studio 2013 LightSwitch 入門文章，相信按圖學習操作，你馬上在 5 分鐘就可以 ”拉" 出一個簡單的資料庫應用!
如果你錯過了之前的文章，請參考 :
------------------------------------------------------------------------------------------
VS 2013 LightSwitch 入門 Part 3 - 該選擇哪個螢幕模板?
在這篇文章中，我想談談螢幕。螢幕在日常生活中是一種常見的術語，通常指電視或電腦螢幕——我們觀看並與設備進行交互的閃光的東西。LightSwitch螢幕將數據呈現給用戶,並且形成應用程式的用戶界面（UI）。
商用應用程式的螢幕允許用戶去搜索、編輯、插入和刪除後端數據源中的數據。LightSwitch透過提供給您可選擇模板使得螢幕建立非常的簡單。然後，您可以按原樣使用模板，或進一步按照您的需求來自定義。一旦您擁有了一些已定義好的項目（如你在之前的文章中了解到的），那麼您就可以準備建立螢幕了。
LightSwitch的HTML客戶端螢幕被優化以支持觸摸為主的設備，如：平板電腦和手機。然而，你也可以使用任何現代的（HTML5功能）瀏覽器與應用程式交互。LightSwitch為您做的工作是運用響應式設計 (Responsive Design) 原則，讓螢幕適應不同形式的因素。例如，由於螢幕變得更小，項目的多列佈局將會分裂成一個單一的列，頁邊距，行距，標題和圖標的大小將減少。
這意味著，當你建立一個LightSwitch應用程式時，它會自動調整為用戶設備的大小—— 可以是桌機，平板電腦，或電話這些形式的設備—— 所以你可以為多種類型的設備和操作系統寫一個應用程式。
關於LightSwitch如何使用響應式設計的更多訊息，請參看：多形式因素的設計
選擇螢幕模板
以客戶的角度，您可以透過單擊數據設計器頂部的“+ Screens…”按鈕或者右鍵點擊解決方案資源管理器裡的Screens文件夾，然後選擇“Add Screen...”將螢幕增加到項目中。
當執行此操作時，會彈出“Add New Screen”對話框，要求你選擇一個螢幕模板，以及你想要在螢幕上顯示的數據。這裡為HTML客戶端提供三個可用的螢幕模板，Browse Data螢幕，View Details螢幕，以及Add/Edit Details螢幕。根據你所選擇的螢幕模板，右邊的“Screen Data”部分中的選項也將隨之變化。
展開Screen Data下拉列表時，您可以選擇您要應用在螢幕上的項目。對於您所選的任何一個螢幕模板，其控制均是以類似查看項目定義的方式建立。例如，標籤繼承自字段名。此外，默認情況下，螢幕使用的是配對了基礎數據類型的控件。因此，舉例來說，一個可編輯的String屬性由一個TextBox控件表示，一個Boolean變為一個觸動開關控件，一個網絡地址類型得到的是網絡地址的控件，這就是為什麼在建立螢幕之前正確地模擬你的數據是如此重要。雖然你可以用基於螢幕到螢幕的方式去自定義大多數東西，LightSwitch 還是會讀取您的數據模型中的設置去建立智能的默認設置，加快建立應用程式所花費的時間。
讓我們看看螢幕模板的列表以及一些為什麼會選擇他們的指導原則。
瀏覽數據螢幕
當你想要在一個螢幕中的表格裡看到包含所有記錄的列表時， 您可以使用Browse Data螢幕。默認情況下，當用戶滾動列表時,螢幕上包含一個簡單的異步加載數據頁面的列表。像所有具有多行數據的螢幕一樣，默認情況下,查詢可以在每一頁上返回45行數據（你可以去螢幕屬性裡改變此設置）。數據列表也可以由一平鋪列表或一個表格來表示,對於每個記錄，多列顯示數據這會更好點。
通常情況下，您將用一個Browse Data螢幕作為您應用程式的主螢幕——作為用戶導航到您的應用程式時的第一個顯示的螢幕。您可以輕鬆地連接一個“Tap”事件，以便用戶觸摸（或點擊）列表中的一個項目時，您可以導航到一個詳細的螢幕去。如果您選擇Browse Data螢幕模板，並立即運行了（ F5 ）您的應用程式，您會看到一個簡單的列表。對於較小的展示設備（如手機），列表更利於控制，或當您只顯示一行文字，並且想讓它佔據整個螢幕的寬度時。正如我們在第一部分中討論的,在默認情況下，列表顯示你所定義在項目中的摘要屬性。默認情況下，摘要屬性是表中的第一個字符串字段，但你可以在Data Designer中改變它。
如果你想顯示多個字段，可以考慮平鋪列表或表格控制。
您還可以使用預定義操作, 如: 增加, 編輯和查看, 在命令欄（或螢幕上的其他地方）增加按鈕，這些操作可以帶給你適當的螢幕模板,（下面我們將討論）。
View Details 螢幕
View Details 螢幕允許你查看來自一個表中的單行數據, 並選擇性地顯示任何相關的數據。當你想顯示一個項目的所有細節，就使用View Details螢幕。默認情況下，LightSwitch將讀取您項目字段的順序，將它們分為兩列，基於屬性類型來選擇適當的視圖控制。您也可選擇把相關的子數據包含在一個“View Details螢幕”中。默認情況下，每個相關數據的集合將顯示在螢幕上一個單獨的Tab上,這在小的顯示設備上運行很好，或當你有很多相關數據要顯示的時候效果都很好。
但是，如果您正在使用較小的數據集或您的用戶通常有更大的螢幕，這時您可以把所有的數據放在一個頁面上, 只需把子選項中的列表拖動到Details選項卡中。
Add/Edit Details 螢幕
Add/ Edit Details 螢幕允許您增加或編輯表中的單行數據，並選擇性地顯示任何相關數據。Add/Edit Details螢幕模板和View螢幕非常相似，除了在默認情況下，它的字段是可編輯的。該螢幕可用於編輯當前記錄以及增加新記錄。
當你想增加或編輯一個項目的詳細訊息時，需使用Add/Edit Details螢幕。默認情況下， LightSwitch將讀取項目字段的順序，將它們分為兩列，根據類型屬性選擇適當的編輯控制器。您也可以選擇包含相關子數據在Add/Edit Details螢幕上， 就像一個View Details螢幕一樣，將每套相關的數據集顯示在一個單獨的Tab上。然而，您可能希望設計你的螢幕工作流程，以便在同一時間有針對性地對較小的數據集進行編輯，尤其是當您的目標是小輸入設備。因此，即使您可以編輯螢幕上的這些相關數據，可能您還是決定向用戶呈現View螢幕，並增加按鈕去單獨編輯每個部分會比較好。
View Details螢幕和Add/Edit Details螢幕之間的主要區別是，後者是可編輯的及在螢幕上會有Save和Cancel圖標。默認情況下，這個螢幕也會顯示為一個對話框，但你可以透過取消選取Screen Designer上屬性窗口外觀部分中的“Show As Dialog”對話，讓螢幕佔滿整個瀏覽器的寬度。
初看起來，三個屏模板可能像工作在一個小的集合裡。然而要記住，這些只是您可以充分自定義的起點。對於螢幕上數據（以及相關的數據）的佈局顯示，您有很多的靈活性。一次顯示多少數據，以及如何顯示完全取決於您自己。
出於設計的考慮，特別是相關的數據集，請參閱：使用LightSwitch HTML 客戶端控制的Detail Screens
增加Screens 到地址簿應用程式
現在您清楚了每個螢幕模板能為您提供什麼，讓我們為這一系列建立的地址薄應用程式構建一些模板。在上一篇文章的最後，我們使用Browse Data和Add\Edit Details螢幕，以便我們可以快速地測試我們的數據模型。
然而，如果我們想管理成千上萬的商務聯絡人並允許多個用戶訪問這些數據，把用戶放入一個工作流中可能會更好，那裡他們首先搜索聯絡人， 然後可以一次編輯一個用戶或當他們沒有找到所尋找的聯絡人時增加一個新的。建立一個簡單的應用程式該如何工作的流程圖總是很好的：
首先使用Browse Data螢幕搜索一個聯絡人，如果發現了聯絡人，就打開View Details螢幕，它將顯示所有相關數據。這個螢幕也將讓他們對任何聯絡人的詳細訊息或者相關數據進行有針對性的編輯。一旦用戶保存，View Details螢幕只會簡單重新顯示直到他們導航回Browse 螢幕。如果用戶無法找到他們正在尋找的聯絡人，便可以打開Add Contact螢幕，它允許用戶只透過聯絡人項目就可進入。當他們保存時，Contact View Details 螢幕將打開，如果他們需要便可以完成輸入任何相關數據。
因此，我們的地址薄應用程式需要六個螢幕，一個Browse Data螢幕，一個View Details螢幕，和四個Add/Edit螢幕，它們每個都對應四個應用程式裡的項目（聯絡人，電子郵件地址，電話號碼，地址）。由於你建立的第一個畫螢幕會成為主螢幕，所以我們首先將要建立Browse Data螢幕。（如果你一直有跟著做，就要先刪除那兩個我們在之前的文章中建立的測試螢幕）。
所以首先要透過右鍵解決方案資源管理器，並選擇“Add Screen…”,打開“Add New Screen”對話框後，去建立Browse Contact 螢幕。選擇Browse Data 螢幕模板，然後選擇Contact Screen Data，最後單擊OK。
接下來，我們將透過修改查詢為Browse Contacts螢幕增加搜索功能。在下一篇文章中，我們將更詳細的討論查詢，現在我們僅快速地修改一下 螢幕查詢，以使用戶能可選性的搜索一個聯絡人，而不需要滾動列表。
在Screen Designer的視圖模型的左側點擊“Edit Query”。這包含了我們所有的屬性，以及螢幕上的查詢和方法。
這將打開查詢設計器，在這裡你可以提供一個過濾器和排序。讓我們允許用戶用聯絡人姓名做一個簡單的搜索。我們會用搜索姓氏和名字來配對。因此，增加一個Where子句，選擇LastName屬性，contains，選擇Parameter [@]，然後選擇Add New... 建立一個新的參數。
為參數“FindContact”命名，在屬性窗口中選中“Is Optional”。然後增加另一個where子句（Or），並選擇FirstName屬性。我們還提供了一個先按名後按姓的排序。查詢應該如下面這樣：
在左上角點擊“Back to BrowseContacts”回到螢幕設計器。現在，在視圖模型中我們看到FindContact螢幕屬性鏈接到查詢參數。我們可以在列表中簡單地拖動螢幕屬性並設置文本框控制。在屬性裡設置佔位符為“Find Contact”和設置標籤位置為“None”。這將有助於螢幕空間的節省。
我們也讓列表裡的摘要控制變為單列的佈局，在它裡面顯示名字和姓氏。這就是現在的Screen Designer應該的樣子。
接下來，讓我們給命令欄增加一個按鈕，這樣當用戶無法找到他們正在尋找的聯絡人時，我們就可以增加新的。選擇命令欄，單擊+Add來增加一個新按鈕，並選擇現有的方法，addAndEditNew。這時LightSwitch知道我們這裡需要一個新的螢幕， 所以Navigate To：（New Screen...）被選中。最後點擊OK。
這將再次打開Add New Screen對話框，同時為我們的聯絡人自動選擇Add/Edit Details螢幕模板。然後點擊OK。
跳轉回Browse Contacts螢幕，並選擇Add Contact按鈕，在屬性窗口中設置圖標為“Add”。您可以從約30個不同的內置圖標中選擇（您也可以透過CSS 改變它們——更多相關的訊息，請關注後面的文章）。
接下來，讓我們為聯絡人增加View Details螢幕。當用戶輕擊（單擊）列表中的聯絡人時，將打開此對話框。選擇列表，並在屬性窗口中單擊Tap動作的鏈接。然後選擇一個現有的方法，viewSelected。同樣，LightSwitch知道這裡我們需要一個新的螢幕，所以Navigate To：（New Screen...）被選中。然後點擊OK。
這個時候，選擇所包括的所有相關的數據，然後單擊OK。
現在，為了讓用戶增加和編輯剩餘的子項目，我們可以重複我們所了解到的建立按鈕和定義tap動作的方法去建立剩下的三個螢幕。在View Contact螢幕上首先選擇Details選項卡上的命令欄, 增加一個按鈕，這允許我們編輯Contact Details。我們可以重複使用我們之前建立的Add/Edit contact螢幕來增加新的聯絡人。
注意到現在當我們選擇一個現有的方法時，我們可以看到螢幕上所有查詢的所有預定義動作。
LightSwitch已經知道我們有一個可以編輯聯絡人的螢幕，因此這將會被自動選擇。點擊“OK” 。然後在屬性窗口中設置Edit Contact按鈕的圖標為“Edit”。
（順便說一下，你可能會注意到一些我們並沒有明確增加數據設計器的字段現在出現在View Contact 螢幕上，默認情況下， LightSwitch將為新表自動增加行級的Created/Modified和CreatedBy/ModifiedBy字段，以便您跟踪後來什麼時候以及誰增加或編輯過這條記錄，從服務器端來看你可以在數據設計器裡的項目中更改此設置。）
我前面提到的，默認情況下LightSwitch將把相關的子集按照單獨的標籤佈局，如你在上面的截屏所看到的。對於較小外形的因子，或當您在這些子集有潛在的大量的數據時，這會是一個不錯的選擇。由於聯絡人有超過少數的電子郵件地址，電話號碼或物理地址是很少見的，所以讓我們把所有列表拖動到Details選項卡，然後刪除其他標籤。而且也已經改變列表為清單列表，並選擇了想要顯示的特定字段。
現在列表都在一個選項卡上，我們想要增加一個標題來區分它們。選擇列表，並在屬性窗口的外觀部分中選中“Show Header”。
現在我們需要做的是為子列表加上最終的Add/Edit螢幕。選擇清單列表並為每個列表設置TAP動作為editSelected。這時，LightSwitch會知道這裡我們需要新的螢幕，所以在對話框中單擊OK。
為每個清單列表重複此操作三次，同時為每個選擇對應的editSelected方法。
在這些畫面上，我們可以刪除LightSwitch將要在螢幕上放置的父聯絡人選擇器。如果我們不是來自一個當前的聯絡人螢幕，這會是需要的。
最後為每個子節點的命令欄增加三個“Add”按鈕，這樣用戶就可以將記錄增加到每個列表。LightSwitch會建議我們重用我們已有的Add/Edit螢幕，這正是我們想要的。
你可能會奇怪這一點，為什麼螢幕設計器不是一個典型的所見即所得的設計器。這是因為LightSwitch中有兩個客戶端選項——HTML和Silverlight ——這使我們能夠保持設計體驗的一致。（如果你想學習如何利用強大的Silverlight客戶端去構建應用程式，請參閱2012年系列）。
然而，如果你想真正看到你所做的改變的影響，這裡有一個很酷的竅門。當應用程式運行時，您可以修改任何客戶端的螢幕佈局或JavaScript代碼！修改後，只需保存您的所有文件，然後刷新瀏覽器。關於這個方便的螢幕開發功能的詳細訊息，請參閱：加快LightSwitch 的發展之“Edit & Refresh ”
使用JavaScript 自定義螢幕的工作流程
當我們設計我們的螢幕工作流程，我提到過當一個新的聯絡人被建立後，我們應該立刻導航到View Contact螢幕，以便讓用戶可以輸入其餘的聯絡人詳情。目前，當一個新的聯絡人被保存後，將會顯示一個Browse Contact 螢幕。這是因為，默認情況下，當他們保存時，LightSwitch會很輕易將用戶導航回到他們保存時的螢幕。因為我們是從View Contact螢幕執行他們的，所以對於其他的Add螢幕也能運作的很好。然而，我們的Add Contact按鈕是位於Browse Contact螢幕上。
所有這一切意味著我們不得不編寫一點JavaScript代碼。在Browse Contact螢幕上，選擇Add Contact按鈕接著選擇“Edit Action”。
然後改變“Write my own method：”的動作，並單擊OK。
再次右鍵點擊按鈕，選擇“Edit Execute Code”。這會帶您導航到代碼編輯器。現在寫入下面的JavaScript代碼：
1: myapp.showAddEditContact( null , {
2: beforeShown: function (addEditScreen) {
3: // Create a new contact here.
4: var newContact = new myapp.Contact();
5: addEditScreen.Contact = newContact;
6: },
7: afterClosed: function (addEditScreen, navigationAction) {
8: // If the user commits the change, show the View screen
9: if (navigationAction === msls.NavigateBackAction.commit) {
10: var newContact = addEditScreen.Contact;
11: myapp.showViewContact(newContact);
12: }
13: }
14: })
LightSwitch中有一個功能強大的運行時客戶端，可以讓你做各種事情。在以後的文章中我們將討論更多的關於使用JavaScript和CSS定制應用程式。現在，來看看如何編寫一些常見任務（從這我得到了上面的代碼:-)）：如何使用代碼修改HTML 螢幕
運行它！
現在，我們將所有定義的螢幕按F5構建和運行應用程式，讓我們來看看我們得到了什麼。你會注意到，打開Browse Contact螢幕，會使我們能夠找到一個聯絡人。在這裡我只有兩行測試數據，但是如果我有數以百計的聯絡人，LightSwitch一次只會裝載45行，只有當我們滾動至列表的底部時，才會裝載更多。
如果你點擊列表中的聯絡人的名稱，它會打開View Contact螢幕，這可以讓我們編輯所有的聯絡人訊息。如果我們在命令欄中點擊Add Contact，它會打開Add/Edit Contact螢幕，並且當我們保存時，它會立刻轉到View Contact螢幕。
到這裡，所有的數據用戶都可以與之交互。輕擊平鋪項將可以編輯相關數據，輕擊命令欄按鈕將會執行關聯的動作。如果用戶點擊了一個電話號碼或電子郵件鏈接，手機就會撥打號碼或者一個新的電子郵件將打開。
總結
正如你所看到的，內置的螢幕模板為您提供了很多功能。我們現在有一個功能很全的HTML5的業務應用程式，同時寫了最少的代碼。這就是LightSwitch的魅力所在。它為您處理所有無聊的管道代碼，而且在客戶端（JavaScript）和伺服器端（.NET）還為您提供了豐富的API。
下一篇文章中，我們將更深入地探討查詢以及如何設計查詢以便在螢幕裡按照我們所需的篩選和排列數據。下一次再見！
希望大家喜歡！
[原文發表地址] Beginning LightSwitch in VS 2013 Part 3: Screen Templates, Which One Do I Choose? 作者:Beth Massi
延伸閱讀 -