Azure Pack 管理ポータル Client-Side 拡張機能 JavaScript のWindows

[アーティクル]
08/24/2015

適用対象: Azure Pack Windows

Hello Worldサンプル Visual Studio Project パス: Microsoft.WAP.Samples.HelloWorld.TenantExtension\Content\*.js および Microsoft.WAP.Samples.HelloWorld.AdminExtension\Content\*.js

Windows Azure Pack 管理ポータル拡張機能で必要な JavaScript は、テンプレートに配置し、マニフェストで定義する必要があります。これにより、Windows Azure Pack ポータルが読み込まれると、JavaScript がブラウザーに読み込まれます。スタイルシートと同様に、スクリプトの分離はありません。すべてのスクリプトが一緒に読み込まれます。したがって、名前空間などの JavaScript 分離手法を使用することを強くお勧めします。

レイアウト

拡張機能で必要な数または数の 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 ディレクトリの外部には 2 つの JavaScript ファイルがあります。これには、拡張機能のクライアント側のブラウザー部分の初期化コードが含まれています。
その他のすべての JavaScript ファイルは、\Scripts ディレクトリにあります。タブやダイアログなど、拡張機能の各主要なユーザーインターフェイスビューには、独自のファイルがあります。内のコードは、拡張機能の 1 つの名前空間にあります。

初期化 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 部分の初期化は、2 つの部分に分かれています。 1 つ目はフレームワークの拡張機能を宣言し、2 番目の部分は動作とタブやコマンドバーボタンなどの主要なユーザーインターフェイスコンポーネントを入力します。この分割の理由は、拡張機能が表示する必要があるかどうかを確認できるためです。たとえば、ユーザーがリソースを含むプランをサブスクライブしていない可能性があります。その場合、表示は必要ありません。これは、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	左側のナビゲーションの拡張機能の一覧内の位置。小さい数値は、左側のナビゲーションウィンドウの上部に近づくと同じになります。

拡張機能宣言の 2 番目の部分は、Windows Azure Pack 管理ポータル Client-Side拡張機能の実装で推奨されるファイルレイアウトを使用する場合は、[ExtensionName]Extension.js ファイルで行われます ([ExtensionName] は拡張機能の名前です)。このファイル内のコンテンツは、通常、スコープ内の拡張機能全体です。このファイルで通常実行される内容の例を次に示します。

拡張機能のコードの JavaScript 名前空間を設定します。
拡張機能に含まれるタブを宣言します。
拡張機能が提供する [新しい追加] メニュー項目を宣言します。
拡張機能とグローバルの動作を定義する。たとえば、拡張機能を初めて開いたときに実行する操作などです。

タブまたはダイアログの JavaScript ファイル

推奨されるスクリプト分割とファイルレイアウトを使用する場合、各タブまたはダイアログには、\Scripts ディレクトリに独自の JavaScript ファイルがあります。すべてのスクリプトファイルを読み込む場合は、拡張機能のマニフェストで宣言する必要があります。JavaScript コードは、他の拡張機能のコードに干渉しないように、名前空間内に存在することをお勧めします。すべてのファイル間で同じ名前空間が使用されている場合は、他のファイルから関数を参照できる必要があります。つまり、ウィザード作成関数を初期化 JavaScript の一部にするのではなく、ウィザードを作成するウィザード JavaScript の関数を初期化 JavaScript で参照できます。

ユーザーインターフェイスでアクションを実行する方法の詳細については、「Windows Azure Pack 管理ポータル拡張機能での一般的なタスクの実行」を参照してください。

参照

Azure Pack 管理ポータルのユーザーインターフェイス拡張機能のWindows

次の方法で共有

Azure Pack 管理ポータル Client-Side 拡張機能 JavaScript のWindows

レイアウト

初期化 Java スクリプト

タブまたはダイアログの JavaScript ファイル

参照

その他のリソース