Windows Azure Pack Management Portal Client-Side Extension JavaScript
Van toepassing op: Windows Azure Pack
Hallo wereld Voorbeeldpaden voor Visual Studio Project: Microsoft.WAP.Samples.HelloWorld.TenantExtension\Content\*.js en Microsoft.WAP.Samples.HelloWorld.AdminExtension\Content\*.js
JavaScript dat is vereist voor een Windows Azure Pack-beheerportal-extensie moet worden geplaatst in sjablonen en worden gedefinieerd in het manifest. Hiermee wordt javaScript in de browser geladen wanneer de Windows Azure Pack Portal wordt geladen. Net als bij opmaakmodellen is er geen isolatie voor scripts: alle scripts worden samen geladen. Het wordt daarom ten zeerste aanbevolen dat JavaScript-isolatietechnieken zoals naamruimten worden gebruikt.
Layout
U kunt zo weinig of zoveel JavaScript-bestanden hebben als uw extensie vereist. U wordt echter aangeraden een bestandsindeling en scheiding te volgen die vergelijkbaar is met het Hallo wereld voorbeeld:
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)
De belangrijkste punten van deze indeling zijn:
Er zijn twee JavaScript-bestanden buiten de map \Scripts: deze bevatten de initialisatiecode voor het browseronderdeel van de clientzijde van de extensie.
Alle andere JavaScript-bestanden bevinden zich in de map \Scripts. Elke primaire gebruikersinterfaceweergave van de extensie, zoals tabbladen of dialoogvensters, heeft een eigen bestand. De code binnen bevindt zich in één naamruimte voor de extensie.
Java-script initialiseren
De Initialisatie JavaScript-bestanden zijn:
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
Initialisatie van het JavaScript-onderdeel van de extensie aan de clientzijde bestaat uit twee delen. De eerste declareert de extensie voor het framework, het tweede deel vult het gedrag en de belangrijkste onderdelen van de gebruikersinterface, zoals tabbladen en opdrachtbalkknoppen, in. De reden voor deze splitsing is dat een extensie kan controleren of deze moet worden weergegeven. Een gebruiker heeft zich bijvoorbeeld mogelijk niet geabonneerd op een plan dat uw resources bevat. In dat geval zou de weergave niet nodig zijn. Dit wordt gedemonstreerd door de functie HelloWorldTenantExtensionActivationInit in Microsoft.WAP.Samples.HelloWorld.TenantExtension\Content\HelloWorldTenantExtension.js:
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));
};
Net als elke andere JavaScript die vereist is voor uw extensie, moet deze worden gedeclareerd in het manifest voor uw extensie. Het eerste deel van de extensiedeclaratie vindt plaats in het extensions.data.js-bestand als u de voorgestelde bestandsindeling van eerder gebruikt. Het Hallo wereld voorbeeld heeft dit in 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);
Eigenschap |
Beschrijving |
|---|---|
displayName |
Tekst die wordt weergegeven in de linkernavigatiebalk voor de extensie. |
iconUri |
Site-absoluut pad naar de afbeelding die wordt gebruikt als pictogram voor de extensie. |
iconShowCount |
Hiermee schakelt u het aantal items in een extensie in op het pictogram van de extensie. |
iconTextOffset, iconInvertTextColor |
Fijnmazige controle over de weergave van de vermelding van de extensie in het linkernavigatievenster. |
displayOrderHint |
Positie in de lijst met extensies in de linkernavigatiebalk. Een lager getal komt overeen met dichter bij de bovenkant van het linkernavigatiedeelvenster. |
Het tweede deel van de extensiedeclaratie vindt plaats in het bestand [ExtensionName]Extension.js bestand (waarbij [ExtensionName] de naam van de extensie is als u een Windows Azure Pack Management Client-Side Portal implementeert. Inhoud in dit bestand is over het algemeen extensiebreed binnen het bereik. Voorbeelden van wat meestal in dit bestand wordt uitgevoerd, zijn:
De JavaScript-naamruimte instellen voor de code van de extensie.
Het declareren van tabbladen die de extensie heeft.
Als u eventuele menu-items Toevoegen nieuw declareren, draagt de extensie bij.
Definieert elk algemeen extensiegedrag. Wat u bijvoorbeeld moet doen wanneer de extensie voor het eerst wordt geopend.
JavaScript-bestanden met tabbladen of dialoogvensters
Als u de voorgestelde scriptsplitsing en bestandsindeling gebruikt, heeft elk tabblad of dialoogvenster een eigen JavaScript-bestand in de map \Scripts. Elk scriptbestand moet worden gedeclareerd in het manifest voor uw extensie als het moet worden geladen. Het wordt aanbevolen dat uw JavaScript-code in een naamruimte bestaat om code van andere extensies niet te verstoren. Als dezelfde naamruimte wordt gebruikt tussen al uw bestanden, moet u naar functies van andere bestanden kunnen verwijzen, wat betekent dat u de initialisatie javaScript kunt hebben naar een functie in uw wizard JavaScript waarmee een wizard wordt gemaakt, in plaats van dat de wizardfunctie voor het maken van de wizard deel uitmaakt van de initialisatie JavaScript.
Zie Algemene taken uitvoeren in een Windows Azure Pack Management Portal-extensie voor meer informatie over het uitvoeren van acties in de gebruikersinterface.
Zie ook
Windows Azure Pack Management Portal User Interface Extensions