逐步解說：為行動使用者建立 LightSwitch 用戶端

發行項
06/10/2015

您可以使用 LightSwitch 建立 HTML 用戶端，讓行動使用者可以使用觸控導向的現代化裝置 (例如手機和平板電腦)，從遠端檢視、加入及更新資料。在本逐步解說中，您將會建立虛構搬家公司 Contoso Moving 的用戶端，使其客服人員可以更輕鬆地預估每項工作所需的搬運工、貨車和包裝箱數目。

在 Contoso，排程調度人員花大部分時間待在辦公室，與潛在客戶面對面或在電話上聯繫，以及安排後續追蹤查訪。這些工作者使用以 Silverlight 為基礎的豐富桌面用戶端，該用戶端也提升了對於使用鍵盤和滑鼠進行大量資料輸入的支援。相反地，規劃專員整天都在出差，到各地進行後續追蹤查訪並記錄相關資訊，例如每個房間的大小、內容和入口需求。這些行動使用者需要一個用戶端，該用戶端不僅能為其顯示排程規劃人員所提供之每個後續追蹤查訪的相關資訊，還支援輸入特定類型的資料、拍照，以及提醒搬家小組注意停車限制或其他細節。

排程調度人員的桌面用戶端已建置。您將要建置行動用戶端，以供規劃專員用來追蹤排程調度人員安排的預約，並輸入每個搬家工作的詳細資訊。

必要條件

下載 ContosoMoving 範例應用程式 (英文)。

快速入門

在您建置行動用戶端之前，您將為已下載的桌面用戶端建立一些範例資料。

若要建立範例資料

在功能表列上，依序選擇 [檔案]、[開啟舊檔] 及 [專案/方案]。
找到您下載的 ContosoMoving.sln 檔案，然後開啟檔案。
在功能表列上，選擇 [偵錯]、[開始偵錯]。
在執行中用戶端的功能表列上，依序選擇 [範例資料] 及 [建立範例資料]。
在 [建立範例資料] 畫面的工具列上，選擇 [加入所有範例資料] 按鈕。

系統會隨即為 [州/省]、[員工]、[客戶] 和 [預約] 實體建立範例資料。
在工具列上，選擇 [儲存] 按鈕。
在功能表列上，選擇 [首頁]。
在工具列上，選擇 [重新整理] 按鈕。

所有員工預定進行的預約清單會隨即顯示，並且您可以在桌面用戶端中瀏覽其他螢幕。

加入行動用戶端

接下來，您要將 HTML 用戶端專案加入至現有方案。

若要加入 HTML 用戶端專案

在 [方案總管] 中，選擇 [ContosoMoving] 節點。
選擇功能表列上的 [專案]、[加入用戶端]。
在 [加入用戶端] 對話方塊中，選擇 [HTML 用戶端] 並命名為 MobileClient，然後選擇 [確定] 按鈕。

[MobileClient] 專案節點會隨即加入至 [方案總管] 中。

建立螢幕並定義巡覽方式

接下來，您要建立 [首頁] 畫面和詳細資料螢幕、定義兩個螢幕之間的巡覽方式，以及建立強制回應對話方塊。行動用戶端和桌面用戶端使用不同的巡覽模型。在行動用戶端中，通常一次只能顯示一個螢幕，而且當您從一個螢幕移到另一個螢幕時，會認可變更。

若要建立主畫面

在 [方案總管] 中，選擇 [MobileClient] 節點。
在功能表列上，選擇 [專案]、[加入螢幕]。
在 [加入新螢幕] 對話方塊中，選擇 [瀏覽資料螢幕] 範本。
在 [螢幕名稱] 文字方塊中，輸入 Home。
在 [螢幕資料] 清單中，選擇 [UpcomingAppointments]，然後選擇 [確定] 按鈕。

若要自訂主畫面

在 [畫面設計工具] 中，選擇 [預約] 節點，然後選擇下拉式清單中的 [資料列配置]。
在 [資料列配置 | 預約]] 節點下，除了 [開始日期] 和 [客戶] 外，刪除其他所有節點。
在功能表列上，選擇 [開始偵錯]。

行動用戶端會隨即顯示在瀏覽器中。

此時，螢幕只會顯示預約。接下來，您要加入詳細資料螢幕，以在使用者點選預約時顯示預約詳細資料。

若要建立詳細資料螢幕

在 [畫面設計工具] 中，選擇 [近期預約] 節點。
在 [屬性] 視窗中，選擇 [項目點選: 無] 連結。
在 [編輯項目點選動作] 對話方塊中，選擇 [選擇現有方法] 選項按鈕，然後選擇清單中的 [UpcomingAppointments.ViewSelected]。
在 [巡覽至] 清單中，選擇 [(新螢幕)]，然後選擇 [確定] 按鈕。

[加入新螢幕] 對話方塊隨即出現。
在 [加入新螢幕] 對話方塊中，選擇 [檢視詳細資料螢幕] 範本。
在 [螢幕名稱] 文字方塊中，輸入 ViewAppointment。
在 [螢幕資料] 清單中，選擇 [預約]。
選取 [預約詳細資料]、[預約相片] 和 [預約場所] 核取方塊，然後選擇 [確定] 按鈕。

在 [畫面設計工具] 中會建立 [索引標籤] 配置，並依索引標籤來組織不同類型的資料。
在功能表列上，選擇 [開始偵錯] 以執行行動用戶端。
點選預約以顯示 [檢視預約] 畫面。
調整瀏覽器視窗的大小，並注意配置在兩個資料行和單一資料行之間變更的情況。

若要自訂詳細資料螢幕

在 [方案總管] 中，開啟 [ViewAppointment] 畫面。
在 [畫面設計工具] 中，選擇 [資料列配置 | 詳細資料] 節點。
刪除 [開始日期]、[結束日期]、[注意事項]、[移動類型]、[員工] 和 [客戶] 節點。
移動 [州/省] 節點，使其顯示在 [城市] 節點底下。
選擇 [資料列配置 | 右] 節點，展開 [加入] 節點，然後選擇 [其他螢幕資料]。

[加入螢幕資料] 對話方塊隨即顯示。
在 [指定要加入的螢幕資料] 文字方塊中，輸入 Customer.Phone，然後選擇 [確定] 按鈕。
展開 [加入] 節點，然後選擇 [其他螢幕資料]。

[加入螢幕資料] 對話方塊隨即顯示。
在 [指定要加入的螢幕資料] 文字方塊中，輸入 Customer.Email，然後選擇 [確定] 按鈕。

若要建立強制回應對話方塊

在 [方案總管] 中，開啟 [ViewAppointment] 畫面。
在 [畫面設計工具] 中，開啟 [詳細資料] 索引標籤之 [命令列] 節點的捷徑功能表，然後選擇 [加入按鈕]。
在 [加入按鈕] 對話方塊中，選擇 [選擇現有方法] 選項按鈕，然後選擇清單中的 [Appointment.edit]。
在 [巡覽至] 清單中，選擇 [(新螢幕)]，然後選擇 [確定] 按鈕。

[加入新螢幕] 對話方塊隨即出現。
在 [螢幕名稱] 文字方塊中，輸入 EditAppointment，然後選擇 [確定] 按鈕。

在 [屬性] 視窗中已選取 [顯示為對話方塊] 核取方塊，這表示螢幕會顯示為強制回應對話方塊。
在 [畫面設計工具] 中，刪除 [資料行配置 | 資料行] 節點。
展開 [加入] 節點，然後選擇 [其他螢幕資料]。

[加入螢幕資料] 對話方塊隨即顯示。
在 [指定要加入的螢幕資料] 文字方塊中，輸入 Appointment.Customer.FirstName，然後選擇 [確定] 按鈕。
展開 [加入] 節點，然後選擇 [其他螢幕資料]。

[加入螢幕資料] 對話方塊隨即顯示。
在 [指定要加入的螢幕資料] 文字方塊中，輸入 Appointment.Customer.LastName，然後選擇 [確定] 按鈕。
展開 [加入] 節點，然後選擇 [其他螢幕資料]。

[加入螢幕資料] 對話方塊隨即顯示。
在 [指定要加入的螢幕資料] 文字方塊中，輸入 Appointment.Customer.Phone，然後選擇 [確定] 按鈕。
展開 [加入] 節點，然後選擇 [其他螢幕資料]。

[加入螢幕資料] 對話方塊隨即顯示。
在 [指定要加入的螢幕資料] 文字方塊中，輸入 Appointment.Customer.Email，然後選擇 [確定] 按鈕。

在左窗格中，將 [街道]、[城市]、[州/省] 和 [郵遞區號] 拖曳至 [電子郵件] 節點底下。

注意事項
您也可以遵循處理 [名字] 和 [姓氏] 欄位的相同步驟，加入 [街道]、[街道行2]、[城市]、[州/省] 和 [郵遞區號] 欄位，而不要使用拖曳的方式加入。

若要顯示對話方塊

在 [方案總管] 中，開啟 [ViewAppointment] 畫面。
在 [畫面設計工具] 中，選擇 [編輯預約] 節點。
在 [屬性] 視窗中，展開 [圖示] 清單，然後選擇 [編輯]。
在功能表列上，依序選擇 [偵錯] 及 [開始偵錯] 以執行行動用戶端。
在執行中用戶端上，點選預約以開啟 [檢視預約] 畫面。
點選 [編輯預約] 按鈕以顯示對話方塊。

系統會自動加入 [確定] 和 [取消] 按鈕。

自訂使用者介面

您不僅可以變更 [畫面設計工具] 中的設定，也可以加入自訂控制項和撰寫 JavaScript 程式碼，來自訂用戶端的使用者介面。

若要使用 JavaScript 程式庫套用自訂格式

在 [方案總管] 中，開啟[首頁] 畫面。
在 [畫面設計工具] 中，選擇 [資料列配置 | 預約] 節點，然後選擇清單中的 [自訂控制項]。
在 [撰寫程式碼] 清單中，選擇 [RowTemplate_render] 方法。

在程式碼編輯器中，為 RowTemplate_render 函式加入下列程式碼：

myapp.Home.RowTemplate_render = function (element, contentItem) {
    var itemTemplate = $("<div> </div>");
    var title = $("<h3>" + moment(contentItem.value.StartDate).format("ddd, MMM Do, h:mm") + "-" + moment(contentItem.value.EndDate).format("h:mma") + "</h3>");
    var subTitle = $("<span>" + contentItem.value.Customer.FirstName + " " + contentItem.value.Customer.LastName + " - " + contentItem.value.Customer.Phone + "</span>");
    title.appendTo($(itemTemplate));
    subTitle.appendTo($(itemTemplate));
    itemTemplate.appendTo($(element));
};

這個 JavaScript 程式碼使用 contentItem.value 成員變數決定要顯示的內容，並使用 format 方法定義格式。

在 [方案總管] 中，開啟 [MobileClient] 節點的捷徑功能表，然後選擇 [管理 NuGet 套件]。
在 [管理 NuGet 套件] 對話方塊中，選擇 [上線] 節點。
在 [線上搜尋] 文字方塊中輸入 moment.js。
選擇 [安裝] 按鈕安裝 Moment.js 程式庫，然後選擇 [關閉] 按鈕。
在 [方案總管] 中，展開 [MobileClient] 節點，然後再開啟 default.htm 檔案。
在程式碼編輯器中，將下列指令碼標記加入至最後一個 </script> 標記之後：
```
<script type="text/javascript" src="Scripts/moment.js" charset="utf-8"></script>
```
這個標記會加入 moment.js 程式庫的參考。
在功能表列上，依序選擇 [偵錯] 及 [開始偵錯] 以執行用戶端。

預約的格式已設定，而且時間和電話號碼也已加入。

將配置變更為並排清單

在 [方案總管] 中，開啟 [首頁] 畫面。
在 [畫面設計工具] 中，選擇 [清單 | 近期預約] 節點，然後選擇清單中的 [並排清單]。
在功能表列上，依序選擇 [偵錯] 及 [開始偵錯] 以執行用戶端。

[首頁] 畫面會以並排清單配置來顯示近期預約。變更瀏覽器視窗的寬度，示範並排顯示配置如何動態調整以充分利用可用的水平空間。這會示範清單配置如何根據行動裝置的方向和螢幕大小變更。

若要加入動態螢幕標題

在 [方案總管] 中，開啟 [ViewAppointment] 畫面。
在 [畫面設計工具] 中，選擇 [資料列配置 | 詳細資料] 節點。
在 [撰寫程式碼] 清單中，選擇 [Details_postRender]。

在程式碼編輯器中，加入下列 JavaScript 程式碼：

myapp.ViewAppointmentDetail.Details_postRender = function (element, contentItem) {
    contentItem.dataBind("value.Appointment.Customer.FirstName", function () {
        formatAppointmentScreenTitle(contentItem);
    });

    contentItem.dataBind("value.Appointment.Customer.LastName", function () {
        formatAppointmentScreenTitle(contentItem);
    });

    function formatAppointmentScreenTitle(contentItem) {
        contentItem.screen.details.displayName = contentItem.value.Appointment.Customer.FirstName + " " +
        contentItem.value.Appointment.Customer.LastName + " " +
        moment(contentItem.value.Appointment.StartDate).format("h:mma") + " - " +
        moment(contentItem.value.Appointment.EndDate).format("h:mma");
    };
};

在功能表列上，依序選擇 [偵錯] 及 [開始偵錯] 以執行用戶端。

預約詳細資料螢幕會顯示客戶名稱以及預約的開始和結束時間。

加入自訂控制項以上傳相片

預約詳細資料螢幕包含 [預約相片] 索引標籤，可讓 Contoso Moving 的規劃專員拍攝客戶場所的相片，以便更精確地預估這個工作。您需要將自訂控制項加入至用戶端，才能啟用這項工作。

若要加入自訂控制項

在 [方案總管] 中，開啟 [指令碼] 節點的捷徑功能表，選擇 [加入]，然後選擇 [現有項目]。
在 [加入現有項目] 對話方塊中，巡覽至 ContosoMoving 資料夾，然後開啟 Sample Resources 資料夾。
選擇 image_uploader-base64-file-encoder 和 image-uploader 檔案，然後選擇 [加入] 按鈕。
開啟 default.htm 檔案，然後在程式碼編輯器中，於指令碼參考區塊的結尾加入下列 image-uploader.js 的參考：
```
<script type="text/javascript" src="Scripts/image-uploader.js" charset="utf-8"></script>
```
在 [方案總管] 中，開啟 [ViewAppointment] 畫面。
在 [畫面設計工具] 中，選擇 [清單 | 相片] 節點，然後選擇清單中的 [並排清單]。
在 [屬性] 視窗中，開啟 [高度] 屬性清單，然後選擇 [自動縮放以符合容器]。
在 [最小值] 文字方塊中，輸入 150。
在 [畫面設計工具] 中，開啟 [相片] 索引標籤之 [命令列] 節點的捷徑功能表，然後選擇 [加入按鈕]。
在 [加入按鈕] 對話方塊中，依序選擇 [選擇現有方法] 選項按鈕、清單中的 [Photos.addEditNew] 及 [確定] 按鈕。

[加入新螢幕] 對話方塊隨即出現。
在 [螢幕名稱] 文字方塊中，輸入 UploadPhoto，然後選擇 [確定] 按鈕。
在 [畫面設計工具] 中，刪除 [資料列配置 | 右] 節點。
選擇 [標題] 節點，然後將控制項類型變更為 [文字區域]。
選擇 [圖片] 節點，然後將控制項類型變更為 [自訂控制項]。
在 [屬性] 視窗中，選擇 [編輯 Render 程式碼] 超連結。
在程式碼編輯器中，將下列程式碼加入至 Picture1_render 函式：
```
createImageUploader(element, contentItem, "max-width: 300px; max-height: 300px");
```
這個程式碼會在顯示螢幕時，初始化 ImageUploader 自訂控制項。
在 [方案總管] 中，開啟 [ViewAppointment] 畫面。
在 [畫面設計工具] 中，選擇 [加入相片] 按鈕節點，然後將 [圖示] 屬性變更為 [加入圖片]。
在功能表列上，依序選擇 [偵錯] 及 [開始偵錯] 以執行用戶端。
在執行中用戶端上，點選預約。
在預約詳細資料螢幕上，點選 [相片] 索引標籤。
點選 [加入相片] 按鈕以開啟 [圖像上傳程式] 對話方塊。

顯示客戶地址的地圖

規劃專員還必須能夠找到客戶的場所，因此您接下來要使用 Bing 地圖控制項加入地圖功能。

若要加入地圖控制項

在 [方案總管] 中，開啟 [指令碼] 節點的捷徑功能表，選擇 [加入]，然後選擇 [現有項目]。
在 [加入現有項目] 對話方塊中，巡覽至 ContosoMoving 資料夾，然後開啟 Sample Resources 資料夾。
選擇 lightswitch.bing-maps.js 檔案，然後選擇 [加入] 按鈕。

開啟 default.htm 檔案，然後在程式碼編輯器中，於指令碼參考區塊的開頭加入參考：

<script type="text/javascript" charset="utf-8" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>

在指令碼參考程序結尾，加入 JavaScript 檔案的參考：

<script type="text/javascript" src="Scripts/lightswitch.bing-maps.js" charset="utf-8"></script>

在 [方案總管] 中，開啟 [ViewAppointment] 畫面。
在 [畫面設計工具] 中，開啟 [索引標籤] 節點的捷徑功能表，然後選擇 [加入索引標籤]。
在 [屬性] 視窗中，將 [名稱] 屬性的值設為 Map。
開啟 [資料列配置 | 地圖] 節點的捷徑功能表，然後選擇 [加入自訂控制項]。

[加入自訂控制項] 對話方塊隨即出現。
在 [指定新自訂控制項的資料] 文字方塊中，輸入 Appointment，然後選擇 [確定] 按鈕。
在 [屬性] 視窗中，選擇 [編輯 Render 程式碼] 超連結。

在程式碼編輯器中，於 Appointment_render 函式前面加入下列公用程式方法：

function rebindMap(element, contentItem) {
    // Verify that we aren't updating the map continuously due to multiple bound values changing.
    var now = new Date();
    if (now.getTime() - mapLastUpdated.getTime() > 15) {
        setTimeout(function () {
            updateMap(element, contentItem);
            mapLastUpdated = new Date();
        }, 20);
    }
};

function updateMap(element, contentItem) {
    var mapDiv = $("#appointmentMap");
    // If we've previously created the map, make sure to clean up the div that contained it;
    // otherwise, the Bing map control fails to create properly.
    if (mapDiv.length > 0) {
        $(mapDiv).remove();
    }
    mapDiv = $("<div id='appointmentMap' class='msls-hauto msls-vauto' ></div>");

    $(mapDiv).appendTo($(element));
    mapControl = mapDiv.lightswitchBingMapsControl({
        street: contentItem.value.Street,
        city: contentItem.value.City,
        state: contentItem.value.State.Name,
        zipcode: contentItem.value.PostalCode,
        mapTypeId: Microsoft.Maps.MapTypeId.road,


        height: "400"
    });
};

將下列程式碼加入至 Appointment_render 函式中：

updateMap(element, contentItem);
mapLastUpdated = new Date();
    contentItem.dataBind("value.Street", function () { rebindMap(element, contentItem); });
    contentItem.dataBind("value.City", function () { rebindMap(element, contentItem); });
    contentItem.dataBind("value.Zip", function () { rebindMap(element, contentItem); });
    contentItem.dataBind("value.PostalCode", function () { rebindMap(element, contentItem); });

這個程式碼會在顯示螢幕時，將預約的欄位繫結至地圖控制項。

在功能表列上，依序選擇 [偵錯] 及 [開始偵錯] 以執行用戶端。
在執行中用戶端上，點選預約。
在預約詳細資料螢幕上，點選 [地圖] 索引標籤以顯示客戶地址的地圖。

加入商標

接下來您會將用戶端的標題變更為比 MobileClient 還要有意義的標題，而且您會加入 Contoso Moving 公司標誌以個人化用戶端。

若要變更標題

在 [方案總管] 中，開啟 default.htm 檔案，然後在程式碼編輯器中，將 <title>MobileClient</title> 項目取代成下列程式碼：
```
<title>Contoso Moving Mobile</title>
```

若要加入圖示

在 [方案總管] 中，展開 [內容] 和 [影像] 節點。
刪除 user-logo.png 檔案。
開啟 [影像] 節點的捷徑功能表，選擇 [加入]，然後選擇 [現有項目]。
在 [加入現有項目] 對話方塊中，巡覽至 ContosoMoving 資料夾，然後開啟 Sample Resources 資料夾。
選擇 user-logo.png 檔案，然後選擇 [加入] 按鈕。

注意事項

您也可以取代 user-splash-screen.png 檔案，來自訂出現在啟動顯示畫面上的影像。
在功能表列上，依序選擇 [偵錯] 及 [開始偵錯] 以執行用戶端。

注意事項

您可能需要先清除瀏覽器快取，所做的變更才會出現。

注意事項
您也可以取代 user-splash-screen.png 檔案，來自訂出現在啟動顯示畫面上的影像。

注意事項
您可能需要先清除瀏覽器快取，所做的變更才會出現。

變更主題

定義用戶端佈景主題的階層式樣式表 (CSS)。您可以修改預設佈景主題來變更用戶端的外觀，也可以變更 .css 檔案來取代佈景主題。您將會使用 Web 工具 ThemeRoller，來建立具有自訂佈景主題的 a.css 檔案。

若要切換主題

在 [方案總管] 中，開啟 default.htm 檔案，然後在程式碼編輯器中，將下列 <link rel="stylesheet" type="text/css" href="Content/light-theme.css" /> 和 <link rel="stylesheet" type="text/css" href="Content/msls-light.css" /> 兩行中的 “light” 取代成 dark：
在功能表列上，依序選擇 [偵錯] 及 [開始偵錯] 以執行用戶端。

若要自訂現有主題

在 Web 瀏覽器中，巡覽至 ThemeRoller (英文) 網站。
在 ThemeRoller 工具列上，選擇 [Import or upgrade] 按鈕。

[Import Theme] 對話方塊隨即出現。
在 Visual Studio 的 [方案總管] 中，從工具列的清單中選擇 [檔案檢視]。
展開 [內容] 節點，然後開啟 dark-theme.css 檔案。
在程式碼編輯器中，複製檔案的整個內容。
在 ThemeRoller 中，將 dark-theme.css 檔案的內容貼入 [Import Theme] 對話方塊中，然後選擇 [Import] 按鈕。
在左窗格中，選擇 [Global] 索引標籤，然後展開 [Corner Radii] 節點。
在 [Group] 文字方塊中，輸入 0.8em。
在 [Button] 文字方塊中，輸入 1.5em。

右窗格中的 UI 項目現在具有圓角。
在右窗格中，從調色盤將一種色彩拖曳至 [樣本 A] 的背景區域。
將另一種色彩拖曳至 [Radio] 項目。

所有相關項目也會變更色彩。當您指向某個項目時，該項目會變更為互補色，以表示選取色彩。
在 ThemeRoller 工具列上，選擇 [Download] 按鈕。
在 [Download Theme] 對話方塊中，將佈景主題命名為 my-theme，然後選擇 [Download Zip] 按鈕。
將壓縮檔案的內容解壓縮到本機資料夾中。
在 [方案總管] 中，開啟 [內容] 節點的捷徑功能表，選擇 [加入]，然後選擇 [現有項目]。
在 [加入現有項目] 對話方塊中，巡覽至解壓縮檔案的目標資料夾，選擇 my-theme.css 檔案，然後選擇 [加入] 按鈕。
開啟 default.htm 檔案，在程式碼編輯器中找到 <link rel="stylesheet" type="text/css" href="Content/dark-theme.css" charset="utf-8" /> 一行，然後將 ”dark-theme” 取代成 my-theme。
在功能表列上，依序選擇 [偵錯] 及 [開始偵錯] 以執行用戶端。

後續步驟

行動用戶端應用程式現在已可運作。若要在行動裝置上加以測試，請將應用程式發行至 Internet Information Services (IIS) 或 Microsoft Azure。

請參閱

其他資源

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

如何：部署三層式 LightSwitch 應用程式

如何：在 Microsoft Azure 上裝載 LightSwitch 應用程式