Azure Pack 管理ポータル Client-Side 拡張機能 JavaScript のWindows
適用対象: 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 管理ポータル拡張機能での一般的なタスクの実行」を参照してください。