如何:使用程式碼修改 HTML 螢幕

 

如需 Visual Studio 2017 的最新文件請參閱 Visual Studio 2017 文件

當您設計 LightSwitch 應用程式的 HTML 螢幕時,您主要使用設計工具和工具視窗,不過,您也可以使用程式碼,以特定方式修改這些螢幕。 使用 LightSwitch JavaScript API 可以執行下列資料相關工作。

當您建立資料輸入螢幕時,可能要在某些欄位中填入預設值。 例如,您可能將日期欄位的預設值設為目前日期。 若要在任何設定目標實體的 [加入/編輯詳細資料] 螢幕中設定預設值,您必須在該實體的 created 方法中撰寫程式碼。

若要設定預設值

  1. 在 Entity Designer 中的 [透視圖] 列上,選擇 [HTMLClient] 索引標籤。

  2. 在 [撰寫程式碼] 清單中,選擇 [已建立]。

  3. 在程式碼編輯器中,將程式碼加入至 created 方法,以設定初始值:

    entity.OrderDate = new Date();  
    entity.OrderStatus = 'New';  
    
    

    您為實體所建立的所有 [加入/編輯詳細資料] 畫面會自動顯示這些預設值。

由於某些行動裝置的螢幕空間有限,您可能要格式化數字以顯示較少精確度。 下列範例示範如何格式化儲存為 Double 的數字,只顯示兩位小數位數。

若要格式化數字

  1. 在 [畫面設計工具] 中,針對要格式化的數字選擇節點。

  2. 在工具列上開啟 [撰寫程式碼] 清單,然後選擇 postRender 方法。

  3. 在 [程式碼編輯器] 中,將下面程式碼加入至 postRender 方法:

    contentItem.dataBind("value", function (value) {  
            if (value) {  
                $(element).text(value.toFixed(2));  
            }  
        });  
    
    

若要轉換日期的顯示格式,您必須使用 JavaScript 程式庫,例如 Moment.js (英文)。 在將程式庫加入至專案之後,您可以在 default.htm 檔案中加入參考,然後在 [Render] 或 [postRender] 方法中撰寫程式碼。

若要加入程式庫

  1. 在 [方案總管] 中,開啟 [HTMLClient] 節點的捷徑功能表,然後選擇 [管理 NuGet 套件]。

  2. 在 [管理 NuGet 套件] 對話方塊中,選擇 [上線] 節點。

  3. 在 [線上搜尋] 文字方塊中輸入 moment.js

  4. 選擇 [安裝] 按鈕安裝 Moment.js 程式庫,然後選擇 [關閉] 按鈕。

若要加入參考

  1. 在 [方案總管] 中,展開 [HTMLClient] 節點,然後再開啟 default.htm 檔案。

  2. 在程式碼編輯器中,將下列指令碼標記加入至最後一個 </script> 標記之後:

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

格式化日期

  1. 在 [方案總管] 中,開啟您要格式化日期的螢幕。

  2. 在 [畫面設計工具] 中,選擇要套用格式化日期的節點。

  3. 在工具列上開啟 [撰寫程式碼] 清單,然後選擇 postRender 方法。

  4. 在 [程式碼編輯器] 中,將下面程式碼加入至 postRender 方法:

    contentItem.dataBind("value", function (value) {  
            if (value) {  
                $(element).text(moment(value).format("DD/MM/YYYY"));  
            }  
        });  
    
    

[ListView] 控制項的外觀取決於階層式樣式表 (CSS),而且這個樣式非常複雜。 您可以使用 postRender 方法,在程式碼中變更色彩,而不需要嘗試編輯 CSS。 請注意,您無法變更 [ListView] 本身的樣式,但是可以透過其父代 ([RowTemplate]) 變更每個 [清單項目] 的樣式。 每個 [清單項目] 都已定義 background-image,因此您必須在套用新的 [背景色彩] 之前指定 background-image

若要變更色彩

  1. 在畫面設計工具中,選擇清單的 [資料列配置] (或 [資料行配置]) 節點。

  2. 在 [屬性] 視窗中,選擇 [編輯 PostRender 程式碼] 連結。

  3. 在 [程式碼編輯器] 中,將下面程式碼加入至 postRender 方法:

    $(element).parent().css({  
                "background-color": "green",  
                "background-image": "none",  
                color: "yellow"  
            });  
    
    

在螢幕上顯示必要欄位的常見慣例是提供一個視覺線索,例如使用不同的字型色彩並在欄位名稱旁邊顯示一個星號。

反白顯示必要欄位。

  1. 在畫面設計工具中,選擇要標記為必填的欄位。

  2. 在 [屬性] 視窗中,選擇 [編輯 PostRender 程式碼] 連結。

  3. 在 [程式碼編輯器] 中,將下面程式碼加入至 postRender 方法:

    $(element).parent().css('color', 'red'); $(element).parent().find("label")[0].innerHTML += " *"  
    
    

透過提供自訂的驗證邏輯,您可以確定只將有效的資料儲存至資料來源中。 您可以在 beforeApplyChanges 方法中加入驗證程式碼,當使用者點選 [加入/編輯] 畫面中的 [儲存] 按鈕時會呼叫這個方法。 在下列範例中,訊息會告知在 [ContactName] 欄位中輸入驚嘆號的使用者,表示該欄位不允許此字元。

若要驗證資料

  1. 在 [畫面設計工具] 的 [撰寫程式碼] 清單中選擇 [beforeApplyChanges]。

  2. 在 [程式碼編輯器] 中,加入下列程式碼並以實體名稱取代 Contact,然後以您要驗證的字串欄位名稱取代 ContactName

    if (screen.Contact.ContactName.indexOf('!') != -1) {  
    
            screen.findContentItem("ContactName").validationResults = [  
    
            new msls.ValidationResult(  
    
            screen.Contact.details.properties.contactName,  
    
            "Contact Name cannot contain the character '!'.")  
    
            ];  
    
            return false;  
    
        }  
    
    

LightSwitch 提供內建方法,可在 HTML 螢幕上加入和編輯項目,但不會刪除項目。 您可以輕鬆地建立您自己的方法以刪除螢幕或快顯中的項目。

若要刪除項目

  1. 在 [畫面設計工具] 的工具列中,選擇 [加入資料項目] 按鈕。

  2. 在 [加入資料項目] 對話方塊中,選擇 [方法] 選項按鈕,然後輸入方法的名稱。

  3. 開啟方法的捷徑功能表,然後選擇 [編輯 Execute 程式碼]。

  4. 在 [程式碼編輯器] 中,加入下列程式碼,以螢幕名稱取代 myScreen,並以實體名稱取代 customers 的兩個執行個體:

    myapp.MyScreen.DeleteSelected_execute = function (screen) {  
        screen.getCustomers().then(function (customers) {  
            customers.deleteSelected();  
        });  
    };  
    
    

    此方法可在任何顯示實體之螢幕或快顯的 [加入按鈕] 對話方塊中使用。

如果您顯示強制回應對話方塊 (可透過加入螢幕查詢和快顯輕鬆地完成),可以讓使用者從清單中挑選項目。 在此範例中,[加入/編輯詳細資料] 螢幕的名稱為 [AddOrders],這是以 [OrderDetails] 實體和第二個名為 [Products] 的相關實體為基礎建立的。

若要建立強制回應選擇器

  1. 在 [畫面設計工具] 的工具列中,選擇 [加入資料項目] 按鈕。

  2. 在 [加入資料項目] 對話方塊中,選擇 [查詢] 選項按鈕,然後選擇清單中的 [產品]。

    [產品] 查詢會出現在 [畫面設計工具] 的左窗格中。

  3. 在內容樹狀結構中,開啟 [快顯] 節點的捷徑功能表,然後選擇 [加入快顯]。

  4. 在 [加入] 清單中選擇 [Products]。

  5. 在工具列上的 [撰寫程式碼] 清單中,選擇 [已建立]。

  6. 在 [程式碼編輯器] 中,將下面程式碼加入至 [created] 方法中:

    myapp.AddOrders.created = function (screen) {  
            screen.findContentItem("Products").dataBind("value.selectedItem", function (newValue) {  
                if (newValue !== undefined && newValue !== null) {  
                    //Whenever selectedItem for Products changes, update the Product value on the main page   
                    screen.Order_Detail.setProduct(screen.Products.selectedItem);  
    
                    //Close popup, if one is open.   
                    screen.closePopup();  
                }  
            });  
        };  
    
    
  7. 在 [畫面設計工具] 中,開啟 [命令列] 節點的捷徑功能表,然後選擇 [加入按鈕]。

  8. 在 [加入按鈕] 對話方塊中,選擇 [確定] 按鈕。

  9. (選擇項) 若要清除欄位,請使用下列程式碼加入螢幕方法:

    myapp.AddOrders.Clear_execute = function (screen) {  
        //Clear the selection for Product. (Useful for 0...1 to many relationships.)   
        screen.Order_Detail.setProduct(undefined);  
    };  
    
    

快顯的預設位置是在螢幕底端,若為較寬的螢幕,則位於右下方。 在較大的螢幕上,快顯的位置可能會讓使用者很難注意得到。 下列範例會將快顯置於螢幕中央,使其更加明顯。

若要將快顯置中

  1. 在畫面設計工具中,選擇啟動快顯的按鈕節點。

  2. 在 [屬性] 視窗中,選擇 [動作] 之下的 [點選] 連結。

  3. 在 [編輯點選動作] 對話方塊中,選擇 [撰寫我自己的方法] 選項按鈕,指定名稱,然後選擇 [確定] 按鈕。

  4. 在 [屬性] 視窗中,選擇 [編輯 Execute 程式碼] 連結。

  5. 在 [程式碼編輯器] 中,將下面程式碼加入至 execute 方法:

    // Note:If using JQuery Mobile 1.3 (or higher) use  
        // "popupcreate" rather than "popupbeforeposition"  
        $(window).one("popupbeforeposition", function (e) {  
            $(e.target).popup({  
                positionTo: "window"  
            });  
        });  
    
        // Show the Popup  
        screen.showPopup("Popup1");  
    
    
    

透過顯示訊息方塊,您可讓使用者選擇,然後根據其選項執行動作。 下列範例顯示不同的訊息,以回應 [是/否/取消] 訊息方塊中的每一個選擇。 在您自己的程式碼中,你可以使用任何程式碼來取代警示程式碼以執行自訂動作 (例如,根據使用者的選擇顯示不同的螢幕)。

若要顯示訊息方塊

  1. 在 [畫面設計工具] 中,開啟 [命令列] 節點的捷徑功能表,然後選擇 [加入按鈕]。

  2. 在 [加入按鈕] 對話方塊中,選擇 [撰寫我自己的方法] 選項按鈕,將方法命名為 ShowMessageBox

  3. 在 [程式碼編輯器] 中,將下面程式碼加入至 ShowMessageBox_execute 方法:

    msls.showMessageBox("Please choose the appropriate button", {  
    
            title: "This is a message box",  
    
            buttons: msls.MessageBoxButtons.yesNoCancel  
    
        }).then(function (result) {  
    
            if (result === msls.MessageBoxResult.yes) {  
    
                alert("Yes button was chosen");  
    
            }  
    
            else if (result === msls.MessageBoxResult.no) {  
    
                alert("No button was chosen");  
    
            }  
    
            else if (result === msls.MessageBoxResult.cancel) {  
    
                alert("Please choose either Yes or No");  
    
            }  
    
        });  
    
    

您可能會想要根據設計階段無法取得的資訊 (例如目前選取之客戶的名稱) 變更螢幕標題。 下列程式碼範例以動態方式顯示名為 [ViewCustomer] 之螢幕的螢幕標題,該螢幕是以名為 [Customer] 的實體為基礎所建立。

若要設定螢幕標題

  1. 在 [畫面設計工具] 中的 [撰寫程式碼] 清單中,選擇 [已建立]。

  2. 在 [程式碼編輯器] 中,將下面程式碼加入至 [created] 方法中:

    myapp.ViewCustomer.created = function (screen) {  
    
    var name;  
    
        name = screen.Customer.CompanyName;  
        screen.details.displayName = "Information about: " + name;  
    };  
    
    

根據預設,專案名稱會在啟動顯示畫面和標題列或瀏覽器索引標籤中顯示為應用程式的標題。 您可以修改專案的 default.htm 檔案,指定不同的標題。

若要變更標題

  1. 在 [方案總管] 中的 [HTMLClient] 節點下,開啟 [default.htm] 檔案的捷徑功能表,然後選擇 [開啟]。

  2. 在程式碼編輯器中找出 <title> 項目,並以標題來取代現有值:

    這個字串會出現在標題列或瀏覽器索引標籤。

  3. 找出 <div> 項目,並以標題來取代現有值:

    這個字串會顯示在啟動顯示畫面中。

通常會需要根據特定準則來啟用或停用按鈕。 例如,您可以停用某些使用者的螢幕啟動按鈕,或是只有在需要值時啟用加入按鈕。 第一個範例說明如何從程式碼設定 IsEnabled 屬性以停用按鈕。

第二個範例示範以 CanExecute 方法為基礎的兩階段方式。 資料在 LightSwitch 是以非同步方式載入,但是按鈕的 CanExecute 方法是同步的。 因此,您不能根據單一階段中載入的資料來啟用按鈕,但是可以使用 IsLoaded 屬性,來實作兩階段方法。

若要使用 IsEnabled 屬性停用按鈕

  1. 在 [畫面設計工具] 的工具列中,選擇 [加入資料項目] 按鈕。

  2. 在 [加入資料項目] 對話方塊中,選擇 [方法] 選項按鈕,然後輸入方法的名稱。

  3. 開啟方法的捷徑功能表,然後選擇 [編輯 Execute 程式碼]。

  4. 在程式碼編輯器中,加入下列程式碼,並以按鈕的名稱取代 MyButton

    screen.findContentItem("MyButton").isEnabled = false;  
    
    

    每當您需要停用或啟用按鈕時,就可以從程式碼呼叫此方法。

    System_CAPS_ICON_tip.jpg 提示

    若要隱藏或顯示顯示按鈕,請使用 IsVisible 屬性。

若要使用 IsLoaded 屬性啟用按鈕

  1. 在 [畫面設計工具] 的工具列中,選擇 [加入資料項目] 按鈕。

  2. 在 [加入資料項目] 對話方塊中,選擇 [方法] 選項按鈕,然後輸入方法的名稱。

  3. 開啟方法的捷徑功能表,然後選擇 [編輯 CanExecute 程式碼]。

  4. 在 [程式碼編輯器] 中,加入下列程式碼,以實體名稱取代 Orders,並以實體屬性的名稱取代 Photo,然後以您要執行的函式名稱取代 GetPhoto

    var result = false;   
    if (!screen.Order.details.properties.Photo.isLoaded) {   
    screen.Order.getPhoto();   
    } else {   
    screen.Order.getPhoto().then(function (ph) {   
    result = !ph;   
    });   
    }   
    return result;  
    
    
    

    建立螢幕時會呼叫 CanExecute 方法。 在第一個階段中,程式碼會驗證 Photo 屬性是否已載入。 如果未載入,則程式碼會載入資料,且函式會結束。 在載入資料後,會再次呼叫 CanExecute 方法並執行 else 分支。 此時,GetPhoto 函式會以同步方式執行,因為資料已載入以確保結果有效。

您可以使用 WinJs Promise 物件來自訂內建的 [儲存] 命令,將一個螢幕上的更新儲存至多個資料來源。

若要儲存至多個資料來源

  1. 在 [畫面設計工具] 的工具列中選擇 [撰寫程式碼] 按鈕。

  2. 在 [程式碼編輯器] 中,將下列程式碼加入至 onsavechanges 方法,並以資料來源名稱取代 NorthwindDataApplicationData

    myapp.onsavechanges = function (e) {  
    
        var promises = [];  
    
        promises.push(myapp.activeDataWorkspace.NorthwindData.saveChanges());  
    
        promises.push(myapp.activeDataWorkspace.ApplicationData.saveChanges());  
    
        e.detail.promise = WinJS.Promise.join(promises);  
    
    };  
    
    
    

    如果您需要更多資料來源,可以為每個來源加入 promises.push… 這一行。

在從清單項目巡覽到 [檢視] 或 [編輯] 畫面後,預設行為是將焦點傳回至清單中的第一個項目。 特別是在需要捲動的大型清單中,將焦點傳回至啟動螢幕的清單項目通常是很有用的。 您可以繫結至 Custom Method 並使用 JQuery scrollTop 方法,修改行為以回到先前選取的清單項目。

若要設定焦點

  1. 在畫面設計工具中,選擇您要實作行為的 [清單] 節點。

  2. 在 [屬性] 視窗中,選擇 [動作] 之下的 [點選] 連結。

  3. 在 [編輯點選動作] 對話方塊中,選擇 [撰寫我自己的方法] 選項按鈕,然後選擇 [確定] 按鈕。

  4. 在 [屬性] 視窗中,選擇 [編輯 Execute 程式碼] 連結。

  5. 在 [程式碼編輯器] 中,將下面程式碼加入至 Tap_execute 方法:

    var scrollTopPosition = $(window).scrollTop();  
        myapp.showViewOrder(screen.Orders.selectedItem, {  
            afterClosed: function () {  
                $(window).scrollTop(scrollTopPosition);  
            }  
        });  
    
    

[畫面設計工具] 會提供有限的一組控制項以顯示資料,但是您可以隨時加入 JQuery 行動控制項以提供更豐富的 UI 使用體驗。 JQuery Mobile Foundation 程式庫包含各種針對行動裝置最佳化的控制項,包括滑桿、選項按鈕、核取方塊等等。 請參閱 JQuery 行動架構 (英文)。

下列範例中會加入滑桿控制項,以設定文字方塊控制項中的數值。

若要加入滑桿控制項

  1. 在 [畫面設計工具] 中,選擇數值欄位的節點。

  2. 以 [自訂控制項] 取代 [文字方塊] 控制項。

  3. 在 [屬性] 視窗中,將 [寬度] 屬性設為 [自動縮放以符合容器]。

  4. 選擇 [編輯 Render 程式碼] 連結,然後在 [程式碼編輯器] 中將下列程式碼加入至 render 方法:

    createSlider(element, contentItem, 0, 100);  
    
    
    System_CAPS_ICON_note.jpg 注意

    滑桿的預設值範圍為 0 至 100。 如有需要,以適合應用程式的值取代。

  5. 將下列函式加入至畫面的程式碼檔案:

    function createSlider(element, contentItem, min, max) {  
        // Generate the input element.var value = contentItem.value || 0,  
            $element = $(element)  
                .append('<input type="range" min="' + min + '" max="' + max + '" value="' + value + '"/>')  
                .on("slidestop", function () {  
                    contentItem.value = $element.find("input").val();  
                });  
    
    
    

顯示 Boolean 值的 [FlipSwitch] 控制項只提供兩個用來顯示文字的選項:[]/[] 或 [開啟]/[關閉]。 如果您要顯示不同的值,您可以建立以 [FlipSwitch] 控制項為基礎的自訂控制項。 下列範例會建立 True/False 控制項。

若要自訂控制項

  1. 在 [畫面設計工具] 中,選取Boolean欄位的節點。

  2. 將控制項類型從 [FlipSwitch] 變更為 [自訂控制項]。

  3. 在 [屬性] 視窗中,選擇 [編輯 Render 程式碼] 連結。

  4. 在 [程式碼編輯器] 中,將下列程式碼加入至轉譯方法:

    createBooleanSwitch(element, contentItem);  
    
    
  5. 將下列函式加入至畫面的程式碼檔案:

    function createBooleanSwitch(element, contentItem) {  
        var $flipSwitch = $('<select data-role="slider"></select>').appendTo($(element));  
        $('<option value="false">false</option>').appendTo($flipSwitch);  
        $('<option value="true">true</option>').appendTo($flipSwitch);  
    
        // set select value to match the original contentItem.value  
        $flipSwitch.val((contentItem.value) ? "true" : "false");  
    
        // add listener to update contentItem's value if slider changes  
        $flipSwitch.change(function () {  
            contentItem.value = ($flipSwitch.val() == "true");  
        });  
    
        // visually refresh the slider.  
        $flipSwitch.slider().slider("refresh");  
    };  
    
    
    System_CAPS_ICON_note.jpg 注意

    您可能需要將 [寬度] 屬性設定為值 150 (含) 以上,讓控制項適當地顯示。

Boolean 資料類型的預設控制項類型為 [FlipSwitch] 控制項,但是您可使用自訂控制項,輕易地以 [CheckBox] 來替代。

若要顯示 CheckBox

  1. 在畫面設計工具中,選擇 Boolean 欄位的節點,並將控制項類型從 [FlipSwitch] 變更為 [自訂控制項]。

  2. 在 [屬性] 視窗的 [高度] 區段中,選擇 [最小] 並輸入 100。由於 [CheckBox] 控制項比標準 [TextBox] 控制項還要高,因此這麼做有其必要。 如果您的表單使用其他控制項類型,您可能需要調整此值。

  3. 在 [一般] 區段中,選擇 [編輯 Render 程式碼] 連結。

  4. 在 [程式碼編輯器] 中,將下面程式碼加入至 render 方法:

    // Create the checkbox and add it to the DOM.  
        var checkbox = $("<input type='checkbox'/>")  
                .css({  
                    height: 20,  
                    width: 20,  
                    margin: "10px"  
                })  
                .appendTo($(element));  
    
        // Determine if the change was initiated by the user.  
        var changingValue = false;  
    
        checkbox.change(function () {  
            changingValue = true;  
            contentItem.value = checkbox[0].checked;  
            changingValue = false;  
        });  
        contentItem.dataBind("value", function (newValue) {  
            if (!changingValue) {  
                checkbox[0].checked = newValue;  
            }  
        });  
    
    

如果您要在 [加入/編輯] 螢幕上顯示必要欄位的 [核取方塊],也必須設定控制項的初始值,否則使用者可能會收到驗證錯誤。

若要設定初始值

  1. 在 Entity Designer 中的 [透視圖] 列上,選擇 [HTMLClient] 索引標籤。

  2. 在 [撰寫程式碼] 清單中,選擇 [已建立]。

  3. 在程式碼編輯器中,將程式碼加入至 created 方法,以設定初始值:

    entity.FieldName = new Boolean();  
        entity.FieldName = 'true';  
    
    

    以您的 Boolean 欄位名稱取代 FieldName。 若要將控制項初始化為未核取的狀態,請以 false 取代 true

自訂控制項是以 JQuery Mobile 架構為基礎,此架構會自動設定某些控制項的樣式,以便在行動裝置上獲得最佳顯示效果。 在某些情況下,您可能想要覆寫外觀提供較傳統的樣式。例如,JQuery Mobile 按鈕比傳統按鈕控制項還要大。 您可以使用 data-role="none" 屬性覆寫模式和顯示一般按鈕。

若要套用屬性

  1. 在畫面設計工具中,選擇自訂控制項節點。

  2. 在 [屬性] 視窗中,選擇 [編輯 Render 程式碼] 連結。

  3. 將下列程式碼加入至 render 方法中:

    var $element = $(element);  
        var $textbox1 = $('<input type="text" data-role="none"/>');  
        $element.append($textbox1);  
    
    
    System_CAPS_ICON_note.jpg 注意

    以自訂控制項名稱取代 textbox1,並以控制項類型取代 “text”

您可以使用地理位置應用程式開發介面,判斷特定裝置的目前位置,以啟用對應和以鄰近性為基礎的案例。 下列範例會判斷名為 MyLocation 之實體的座標,此實體具有屬於 Double 類型、名為 LatitudeLongitude 的屬性。

若要取得位置

  1. 在 [畫面設計工具] 的工具列中選擇 [撰寫程式碼] 按鈕。

  2. 在程式碼編輯器中加入下列方法:

    myapp.AddEditMyLocation.GetGeolocation_execute = function (screen) {  
    
    if (navigator.geolocation) {   
    navigator.geolocation.getCurrentPosition(function (pos) {   
    screen.MyLocation.latitude = pos.coords.latitude.toString();   
    screen.MyLocation.longitude = pos.coords.longitude.toString();   
    });   
    }   
    else {   
    alert("Geolocation not supported");   
    }   
    };  
    
    
    

若要輕鬆地加入對應功能,從 Bing 地圖服務 SDK (英文) 取得免費的開發人員金鑰,然後建立自訂控制項以呼叫 Bing 地圖 Web 服務。

下列範例將客戶位置顯示為地圖上的圖釘,您可以點選圖釘來顯示每個客戶的詳細資料。 這個範例要求名為 [BrowseCustomers] 的螢幕附加至有 [Address]、[City] 和 [Country] 欄位的 [Customers] 實體,而且名為 [Details] 的快顯必須位於 [BrowseCustomers] 螢幕上。

建立自訂控制項

  1. 在 [方案總管] 中,選擇 [指令碼] 節點,然後加入名為 lightswitch.bing-maps.js的 JavaScript 檔案。

  2. 在 [程式碼編輯器] 中,將下列程式碼加入至該檔案:

    /// <reference path="jquery-1.7.1.js" />  
    /// <reference path="jquery.mobile-1.1.1.js" />  
    /// <reference path="msls-1.0.0.js" />  
    
    (function ($) {  
        var _credentialsKey = "Ao75sYhQSfLgssT0QkO9n22xt0lgxzntrZ1xpCwLOC-kGhI584OYED3viFXLIWgC";  
    
        // load the directions module only once per session  
        Microsoft.Maps.loadModule('Microsoft.Maps.Directions');  
    
        $.widget("msls.lightswitchBingMapsControl", {  
            options: {  
                mapType: Microsoft.Maps.MapTypeId.road,  
                zoom: 3,  
                showDashboard: false  
            },  
    
            _create: function () {  
            },  
    
            _init: function () {  
                this.createMap();  
            },  
    
            destroy: function () {  
                this._destroyBingMapsControl();  
            },  
    
            createMap: function () {  
                this.htmlMapElement = this.element[0];  
    
                // create empty map  
                this.map = new Microsoft.Maps.Map(this.htmlMapElement,  
                                    {  
                                        credentials: _credentialsKey,  
                                        mapTypeId: this.options.mapType,  
                                        zoom: this.options.zoom,  
                                        showDashboard: this.options.showDashboard  
                                    });  
            },  
    
            addPinAsync: function (street, city, country, i, callback) {  
    
                var widgetInstance = this;  
    
                // construct a request to the REST geocode service using the widget's  
                // optional parameters  
                var geocodeRequest = "http://dev.virtualearth.net/REST/v1/Locations/" +  
                                     street + "," + city + "," + country +  
                                     "?key=" + _credentialsKey;  
    
                // make the ajax request to the Bing Maps geocode REST service  
                $.ajax({  
                    url: geocodeRequest,  
                    dataType: 'jsonp',  
                    async: true,  
                    jsonp: 'jsonp',  
                    error: function (XMLHttpRequest, textStatus, errorThrown) {  
                        alert(textStatus + " " + errorThrown);  
                    },  
                    success: function (result) {  
                        var coordinates = null;  
    
                        if (result && result.resourceSets && (result.resourceSets.length > 0) &&  
                            result.resourceSets[0].resources && (result.resourceSets[0].resources.length > 0)) {  
    
                            // create a location based on the geocoded coordinates  
                            coordinates = result.resourceSets[0].resources[0].point.coordinates;  
    
                            widgetInstance._createPinFromCoordinates(coordinates, i, callback);  
                        }  
                    }  
                });  
            },  
    
            _createPinFromCoordinates: function(coordinates, i, callback) {  
                var location = new Microsoft.Maps.Location(coordinates[0], coordinates[1]);  
                var pin = new Microsoft.Maps.Pushpin(location, { text: '' + i + '' });  
                Microsoft.Maps.Events.addHandler(pin, 'click', callback);  
                this.map.entities.push(pin);  
            },  
    
            resetMap: function () {  
                this.map.entities.clear();  
            },  
    
            _handleError: function (error) {  
                alert("An error occurred.  " + error.message);  
            },  
    
            _destroyBingMapsControl: function () {  
                if (this.map != null) {  
                    this.map.dispose();  
                    this.map = null;  
                }  
            }  
        });  
    }(jQuery));  
    
    
    System_CAPS_ICON_important.jpg 重要

    以您自己的 Bing 地圖服務開發人員金鑰取代 var _credentialsKey 的值。

若要將地圖加入至螢幕

  1. 在 [畫面設計工具] 中,選擇要加入對應的節點,然後在捷徑功能表中選擇 [加入自訂控制項]。

  2. 在 [屬性] 視窗中,將控制項的 [名稱] 變更為 Map,然後選擇 [編輯 Render 程式碼] 連結。

  3. 在 [程式碼編輯器] 中,將下面程式碼加入至 render 方法:

    /// <reference path="../GeneratedArtifacts/viewModel.js" />  
    
    var mapDiv;  
    var current = 0;  
    var step = 15;  
    
    myapp.BrowseCustomers.Customer_render = function (element, contentItem) {  
        mapDiv = $('<div />').appendTo($(element));  
        $(mapDiv).lightswitchBingMapsControl();  
    
        var visualCollection = contentItem.value;  
        if (visualCollection.isLoaded) {  
            showItems(current, step, contentItem.screen);  
        } else {  
            visualCollection.addChangeListener("isLoaded", function () {  
                showItems(current, step, contentItem.screen);  
            });  
            visualCollection.load();  
        }  
    };  
    
    function showItems(start, end, screen) {  
        $(mapDiv).lightswitchBingMapsControl("resetMap");  
    
        $.each(screen.Customers.data, function (i, customer) {  
            if (i >= start && i <= end) {  
                $(mapDiv).lightswitchBingMapsControl("addPinAsync", customer.Address,  
                    customer.City, customer.Country, i + 1, function () {  
                        screen.Customers.selectedItem = customer;  
                        screen.showPopup("Details");  
                    });  
            }  
        });  
    };  
    
    
  4. 在 [方案總管] 中,切換至 [檔案檢視]。

  5. 在 [HTMLClient] 節點底下,開啟 default.htm 檔案。

  6. 在程式碼編輯器中,於指令碼參考區塊的開頭加入下列參考:

    <script type="text/javascript" charset="utf­8" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>  
    
    
  7. 在指令碼參考程序結尾,加入 JavaScript 檔案的參考:

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

您可以讓使用者使用自訂螢幕小鍵盤來輸入數值或其他類型的資訊。 下列範例示範如何在使用者啟用 [文字方塊] 控制項時,顯示數字鍵台。

若要顯示數字鍵台

  1. 在 [畫面設計工具] 中,選擇應包含數值資料之欄位的 [文字方塊] 節點。

  2. 在 [屬性] 視窗中,選擇 [編輯 PostRender 程式碼] 連結。

  3. 在 [程式碼編輯器] 中,將下面程式碼加入至 PostRender 方法:

    $(element).find("input").get(0).type = "number";  
    
    
    System_CAPS_ICON_note.jpg 注意

    您可以使用相同的技巧,為不同類型的輸入顯示鍵盤,不過,無法為 LightSwitch 應用程式的 HTML 用戶端的 color 輸入類型顯示鍵盤。

如果您根據螢幕大小來自訂介面,您可以確保應用程式在各種行動裝置運作良好。 例如,您可能會在平板電腦上顯示客戶的完整位址,但是在電話上隱藏相同資訊以減少捲動。

若要在某些裝置上隱藏 UI 項目

  1. 在 [畫面設計工具] 中,選擇要隱藏的節點,展開 [撰寫程式碼] 清單,然後選擇 [postRender] 方法。

  2. 在程式碼編輯器中,加入下列程式碼:

    $(element).addClass("hidden-on-phone");  
    
    
  3. 在 [方案總管] 中,切換至 [檔案檢視],然後展開 [HTMLClient] 專案的 [內容] 節點。

  4. 開啟 user-customizations.css 檔案。

  5. 在程式碼編輯器中,將下列程式碼加入至 @media 區段:

    .hidden-on-phone {  
           display: none;  
       }  
    
    

    這個程式碼加入至判斷螢幕方向的現有媒體查詢。 當您的應用程式在電話上出現時,欄位不會顯示。

您也可以將 JavaScript 程式碼加入至 default.htm 檔案,在手機和平板電腦上顯示不同的主畫面。

若要在不同裝置上顯示不同的主畫面

  1. 在 [方案總管] 中,選擇 [HTMLClient] 節點,然後再開啟 default.htm 檔案。

  2. 在程式碼編輯器中,以下列程式碼取代包含 msls.run() 函式的指令碼項目:

    <script type="text/javascript">  
           $(document).ready(function () {  
               if ($.mobile.media("screen and (max-width: 400px) and (orientation: portrait), \  
                   screen and (max-width: 640px)  and (max-height: 400px) and (orientation: landscape)")) {  
                   var screen = "BrowseCustomersSmall";  
               } else {  
                   var screen = "BrowseCustomers";  
               }  
               msls._run(screen)  
               .then(null, function failure(error) {  
                   alert(error);  
               });  
           });  
       </script>  
    
    

    以手機的螢幕名稱取代 BrowseCustomersSmall,並以平板電腦的螢幕名稱取代 BrowseCustomers

某些資料庫會在 String 資料欄位儲存 HTML。 您的 LightSwitch 應用程式會將該資訊解譯為一般字串,並在螢幕上、標記等的 [文字] 控制項中顯示原始 HTML。 使用自訂控制項和 render 方法,您可以在螢幕上呈現實際 HTML。

System_CAPS_ICON_warning.jpg 警告

若要避免安全性風險,請只有在您確定 HTML 來自信任的來源時採取這種方法。

若要在螢幕上呈現 HTML

  1. 在 [畫面設計工具] 中,選擇表示 HTML 欄位的節點,然後將控制項類型變更為 [自訂控制項]。

  2. 在 [屬性] 視窗中,選擇 [編輯 Render 程式碼] 連結。

  3. 在 [程式碼編輯器] 中,將下面程式碼加入至 render 方法:

    element.innerHTML = contentItem.stringValue;  
    
    

快顯會提供快速且輕鬆的方式來檢視或輸入資訊,而不需巡覽到另一個螢幕。 不同於螢幕,快顯不會顯示標題,不過,您可能想要在快顯上顯示標題或其他靜態文字。 下列範例示範如何顯示標題和自訂其字型。

若要加入標題

  1. 在 [畫面設計工具] 的工具列中,選擇 [加入資料項目] 按鈕。

  2. 在 [加入資料項目] 對話方塊中,加入類型為 String 的 [區域屬性]。

  3. 在 [畫面設計工具] 中,將區域屬性加入至 [快顯],然後將控制項類型變更為 [文字]。

  4. 在 [屬性] 視窗中,將 [LabelPosition] 屬性設定為 None。

  5. 在 [畫面設計工具] 工具列上,開啟 [撰寫程式碼] 清單,然後選擇 postRender 方法。

  6. 在 [程式碼編輯器] 中,將下面程式碼加入至 postRender 方法:

    element.textContent = "This is the title";  
        $(element).css("font-size", "23px");  
        $(element).css("font-weight", "bold");  
    
    

在資料輸入應用程式中,通常需要將部分來自輸入螢幕的資訊複製到下一個。 使用表單的 beforeShown 方法,您可以輕鬆地實作複製函式。 在下列範例中,[複製] 按鈕已加入至 [AddEditCustomers] 螢幕,並開啟為目前客戶預先填入之 [國家/地區] 和 [區域] 的新螢幕。

若要複製資訊

  1. 在 [畫面設計工具] 中,選擇您要加入 [複製] 按鈕之 [AddEdit] 螢幕的 [命令列] 節點。

  2. 在工具列上選擇 [加入配置項目] 按鈕,然後選擇 [按鈕]。

  3. 在 [加入按鈕] 對話方塊中,選擇 [撰寫我自己的方法] 選項按鈕,將方法命名為 Copy,然後選擇 [確定] 按鈕。

  4. 在左窗格中,選擇 [Copy] 節點,然後在工具列上,開啟 [撰寫程式碼] 清單並選擇 [Copy_execute]。

  5. 在程式碼編輯器中,將下列程式碼加入至 Copy_execute 方法:

    myapp.showAddEditCustomer(null, {  
            beforeShown: function (addNewScreen) {  
                var copied_item = screen.Customer;  
                var new_item = new myapp.Customer;  
                new_item.Country = copied_item.Country;  
                new_item.Region = copied_item.Region;  
                addNewScreen.Customer = new_item;  
            }  
        })  
    
    

在 [加入/編輯] 螢幕上,[儲存] 按鈕的預設行為是關閉螢幕並回到啟動它的螢幕。 在某些情況下,您可能要巡覽至不同的螢幕,例如,顯示不同格式之新加入資料的 [檢視] 螢幕。 您可以在啟動 [加入/編輯] 畫面的按鈕的 afterClosed 方法中撰寫程式碼,完成這項作業。 在下列範例中,[加入和檢視訂單] 按鈕會加入至螢幕,並修改行為讓 [檢視] 螢幕在儲存後顯示。

若要巡覽至新的螢幕

  1. 在 [畫面設計工具] 中,選擇您要加入按鈕之 [瀏覽] 螢幕的 [命令列] 節點。

  2. 在工具列上選擇 [加入配置項目] 按鈕,然後選擇 [按鈕]。

  3. 在 [加入按鈕] 對話方塊中,選擇 [撰寫我自己的方法] 選項按鈕,將方法命名為 AddAndViewOrder,然後選擇 [確定] 按鈕。

  4. 在左窗格中,選擇 [AddAndViewOrder] 節點,然後在工具列上,開啟 [撰寫程式碼] 清單並選擇 [AddAndViewOrder _execute]。

  5. 在程式碼編輯器中,將下列程式碼加入至 AddAndViewOrder_execute 方法:

    myapp.showAddEditOrder(null, {  
            beforeShown: function (AddEditScreen) {  
                // Create a new order here.  
                var newOrder = new myapp.Order();  
                AddEditScreen.Order = newOrder;  
            },  
            afterClosed: function (addEditScreen, navigationAction) {  
                // If the user commits the change, show the View screen  
                if (navigationAction === msls.NavigateBackAction.commit) {  
                    var newOrder = addEditScreen.Order;  
                    myapp.showViewOrder(newOrder);  
                }  
            }  
        })  
    
    
    

    請注意,程式碼也會處理 beforeShown 函式中的新順序建立。 這會覆寫預設 AddEdit 表單行為和處理使用者捨棄變更的情況。

HTML 用戶端螢幕的建立書籤功能可讓使用者複製特定螢幕執行個體的 URL,並在稍後返回該執行個體。 該 URL 部分根據螢幕實體的主索引鍵,因此如果主索引鍵包含機密資訊 (如 SSN),您可能需要停用建立書籤功能以防止使用者看到機密資訊。 下列程式碼會從 URL 移除實體識別項 (螢幕名稱與工作階段 ID 之間的部分),藉此停用建立書籤。

停用建立書籤

  1. 在 [方案總管] 中的 [HTMLClient] 節點下,選擇 default.htm 檔案並開啟它。

  2. 在 [程式碼編輯器] 中,找出 $(document).ready(function () { 這一行,然後緊接在其下方加入下列一行程式碼:

    msls.application.options.disableUrlScreenParameters = true;  
    
    

    這時將從 URL 移除實體識別項,使用者將再也無法建立螢幕書籤。

HTML 用戶端 API 參考

顯示: