Windows Azure Pack 管理入口網站Client-Side擴充功能 JavaScript

發行項
08/24/2015

適用于：Windows Azure Pack

Hello World範例Visual Studio Project路徑：Microsoft.WAP.Samples.HelloWorld.TenantExtension\Content\*.js 和 Microsoft.WAP.Samples.HelloWorld.AdminExtension\Content\*.js

Windows Azure Pack 管理入口網站延伸模組所需的 JavaScript 應該放入範本中，並在資訊清單中定義。當 azure Pack 入口網站載入Windows時，這會將 JavaScript 載入瀏覽器中。如同樣式表單，腳本沒有隔離，所有腳本都會一起載入。因此，強烈建議使用 JavaScript 隔離技術，例如命名空間。

Layout

您可以視您的擴充功能需要，擁有最少或數目的 JavaScript 檔案。不過，建議您遵循類似Hello World範例的檔案配置和分隔：

Microsoft.WAP.Samples.HelloWorld.TenantExtension (or Microsoft.WAP.Samples.HelloWorld.AdminExtension)
  \Styles
  \Templates
  extensions.data.js
  [ExtensionName]Extension.js (e.g. DomainTenantExtension.js)
  \Scripts
    (Individual scripts per tab or dialog)

此版面配置的主要重點如下：

\Scripts 目錄外有兩個 JavaScript 檔案，這些檔案包含擴充功能用戶端瀏覽器部分的初始化程式碼。
所有其他 JavaScript 檔案都位於 \Scripts 目錄中。延伸模組的每個主要使用者介面檢視，例如索引標籤或對話方塊，都有自己的檔案。內的程式碼位於延伸模組的一個命名空間中。

初始化 JAVA 腳本

初始化 JavaScript 檔案如下：

Microsoft.WAP.Samples.HelloWorld.TenantExtension\extensions.data.js
Microsoft.WAP.Samples.HelloWorld.TenantExtension\HelloWorldTenant Extension.js
Microsoft.WAP.Samples.HelloWorld.AdminExtension\extensions.data.js
Microsoft.WAP.Samples.HelloWorld.AdminExtension\HelloWorldAdminExtension.js

用戶端延伸模組的 JavaScript 部分初始化是兩個部分。第一個部分會宣告架構的延伸模組，第二個部分會填入行為和主要使用者介面元件，例如索引標籤和命令列按鈕。此分割的原因是它允許延伸模組檢查是否需要顯示。例如，使用者可能尚未訂閱包含您資源的方案，在此情況下，不需要顯示。這是由 Microsoft.WAP.Samples.HelloWorld.TenantExtension\Content\HelloWorldTenantExtension.js 中的 HelloWorldTenantExtensionActivationInit 函式所示範：

HelloWorldTenantExtensionActivationInit = function () {
     var subs = Exp.Rdfe.getSubscriptionList(),
         subscriptionRegisteredToService = global.Exp.Rdfe.getSubscriptionsRegisteredToService("helloworld"),
         helloWorldExtension = $.extend(this, global.HelloWorldTenantExtension);

     // Don't activate the extension if user doesn't have a plan that includes the service.
     if (subscriptionRegisteredToService.length === 0) {
         return false; // Don't want to activate? Just bail
     }

     //var quickCreateViewModel = new global.HelloWorldTenantExtension.ViewModels.QuickCreateViewModel();

     $.extend(helloWorldExtension, {
         viewModelUris: [helloWorldExtension.Controller.userInfoUrl],
         displayName: "Hello World",
         navigationalViewModelUri: {
             uri: helloWorldExtension.Controller.listFileSharesUrl,
             ajaxData: function () {
                 return global.Exp.Rdfe.getSubscriptionIdsRegisteredToService(serviceName);
             }
         },
         displayStatus: global.waz.interaction.statusIconHelper(global.HelloWorldTenantExtension.FileSharesTab.statusIcons, "Status"),
         menuItems: [
             {
                 name: "FileShares",
                 displayName: "Hello World",
                 url: "#Workspaces/HelloWorldTenantExtension",
                 preview: "createPreview",
                 subMenu: [
                     {
                         name: "Create",
                         displayName: "Create File Share",
                         description: "Quickly Create File Share on a File Server",
                         template: "CreateFileShare",
                         label: "Create",
                         subMenu: [
                             {
                                 name: "QuickCreate",
                                 displayName: "FileFile",
                                 template: "CreateFileShare"                                    
                             }
                         ]//,
                         //data: quickCreateViewModel,
                         //open: global.HelloWorldTenantExtension.ViewModels.onOpened,
                         //ok: global.HelloWorldTenantExtension.ViewModels.onOk

                         //execute: global.HelloWorldTenantExtension.CreateWizard.showCreateWizard
                     }
                 ]
             }
         ],
         getResources: function () {
             return resources;
         }
     });

     // TODO: (fx-isolation) Refactor navigation
     helloWorldExtension.onNavigateAway = onNavigateAway;
     helloWorldExtension.navigation = navigation;

     Shell.UI.Pivots.registerExtension(helloWorldExtension, function () {
         Exp.Navigation.initializePivots(this, this.navigation);
     });

     // Finally activate and give "the" helloWorldExtension the activated extension since a good bit of code depends on it
     $.extend(global.HelloWorldTenantExtension, Shell.Extensions.activate(helloWorldExtension));
 };

就像擴充功能所需的任何其他 JavaScript 一樣，它應該在延伸模組的資訊清單中宣告。如果先前使用建議的檔案配置，擴充宣告的第一個部分會在extensions.data.js檔案中發生。 Hello World範例在 Microsoft.WAP.Samples.HelloWorld.TenantExtension\Content\extensions.data.js 中有這個：

(function (global, undefined) {
    "use strict";

    var extensions = [{
        name: "HelloWorldTenantExtension",
        displayName: "Hello World",
        iconUri: "/Content/HelloWorldTenant/HelloWorldTenant.png",
        iconShowCount: false,
        iconTextOffset: 11,
        iconInvertTextColor: true,
        displayOrderHint: 2 // Display it right after WebSites extension (order 1)
    }];

    global.Shell.Internal.ExtensionProviders.addLocal(extensions);
})(this);

屬性	描述
displayName	延伸模組左側導覽中顯示的文字。
iconUri	作為延伸模組圖示之影像的月臺絕對路徑。
iconShowCount	切換，顯示延伸模組圖示上延伸模組中的專案計數。
iconTextOffset， iconInvertTextColor	在左側導覽中，更精細地控制延伸模組專案的顯示。
displayOrderHint	在左側導覽的延伸模組清單中的位置。較低的數位等於接近左流覽窗格頂端。

如果實作Windows Azure Pack Management Portal Client-Side Extension中使用建議的檔案配置，則會在 [ExtensionName] Extension.js檔案 (發生，其中 [ExtensionName] 是副檔名) 的名稱。此檔案中的內容在範圍中通常為全副檔名。通常在此檔案中執行的範例包括：

設定延伸模組程式碼的 JavaScript 命名空間。
宣告延伸模組將擁有的任何索引標籤。
宣告延伸模組將參與的任何 [新增] 功能表項目。
定義任何延伸模組全域行為。例如，第一次開啟擴充功能時該怎麼辦。

索引標籤或對話方塊 JavaScript 檔案

如果您使用建議的腳本分割和檔案配置，每個索引標籤或對話方塊都會在 \Scripts 目錄中有自己的 JavaScript 檔案。如果要載入擴充功能，則必須在資訊清單中宣告每個腳本檔案。建議您的 JavaScript 程式碼存在於命名空間內，以避免干擾來自其他延伸模組的程式碼。如果所有檔案之間使用相同的命名空間，您應該能夠參考其他檔案中的函式，這表示您可以讓初始化 JavaScript 參考精靈 JavaScript 中建立精靈中的函式，而不是讓精靈建立函式成為初始化 JavaScript 的一部分。

如需在使用者介面中執行動作的詳細資訊，請參閱在Windows Azure Pack Management Portal 擴充功能中執行一般工作。

另請參閱

Windows Azure Pack 管理入口網站使用者介面延伸模組

共用方式為

Windows Azure Pack 管理入口網站Client-Side擴充功能 JavaScript

Layout

初始化 JAVA 腳本

索引標籤或對話方塊 JavaScript 檔案

另請參閱

其他資源