Azure Pack 관리 포털 Client-Side 확장 JavaScript Windows
적용 대상: Windows Azure Pack
헬로 월드 샘플 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 격리 기술을 사용하는 것이 좋습니다.
Layout
확장에 필요한 만큼의 JavaScript 파일을 가질 수 있습니다. 그러나 헬로 월드 샘플과 유사한 파일 레이아웃 및 분리를 따르는 것이 좋습니다.
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 파일에서 수행됩니다. 헬로 월드 샘플에는 다음과 같은 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);
속성 |
Description |
|---|---|
displayName |
확장의 왼쪽 탐색에 표시되는 텍스트입니다. |
iconUri |
확장 아이콘으로 사용되는 이미지의 사이트 절대 경로입니다. |
iconShowCount |
확장 아이콘의 확장에 있는 항목 수를 표시하는 토글입니다. |
iconTextOffset, iconInvertTextColor |
왼쪽 탐색 창에서 확장 항목의 표시를 세밀하게 제어합니다. |
displayOrderHint |
왼쪽 탐색 창의 확장 목록에 위치합니다. 숫자가 낮을수록 왼쪽 탐색 창의 맨 위에 더 가깝습니다. |
확장 선언의 두 번째 부분은 Windows Azure 팩 관리 포털 Client-Side 확장 구현에서 제안된 파일 레이아웃을 사용하는 경우 [ExtensionName]Extension.js 파일(여기서 [ExtensionName]은 확장명)에서 수행됩니다. 이 파일의 콘텐츠는 일반적으로 확장 전체 범위입니다. 이 파일에서 일반적으로 수행되는 작업의 예는 다음과 같습니다.
확장 코드에 대한 JavaScript 네임스페이스 설정
확장에 포함할 탭을 선언합니다.
확장이 기여할 새 추가 메뉴 항목을 선언합니다.
확장-전역 동작 정의 예를 들어 확장을 처음으로 열 때 수행할 작업입니다.
탭 또는 대화 상자 JavaScript 파일
제안된 스크립트 분할 및 파일 레이아웃을 사용하는 경우 각 탭 또는 대화 상자는 \Scripts 디렉터리에 자체 JavaScript 파일을 갖습니다. 모든 스크립트 파일이 로드될 경우 확장에 대한 매니페스트에 선언되어야 합니다. 다른 확장의 코드를 방해하지 않으려면 JavaScript 코드가 네임스페이스 내에 있는 것이 좋습니다. 모든 파일 간에 동일한 네임스페이스를 사용하는 경우 다른 파일의 함수를 참조할 수 있어야 합니다. 즉, 초기화 JavaScript에서 마법사 만들기 함수가 초기화 JavaScript의 일부가 되는 대신 마법사를 만드는 JavaScript의 함수를 참조하도록 할 수 있습니다.
사용자 인터페이스에서 작업을 수행하는 방법에 대한 자세한 내용은 Windows Azure Pack 관리 포털 확장에서 일반 작업 수행을 참조하세요.