Windows portail d’administration Azure Pack Client-Side Extension JavaScript
S’applique à : Windows Azure Pack
Hello World exemples Visual Studio Project chemins : Microsoft.WAP.Samples.HelloWorld.TenantExtension\Content\*.js et Microsoft.WAP.Samples.HelloWorld.AdminExtension\Content\*.js
JavaScript requis par une extension du portail d’administration Azure Pack Windows doit être placé dans des modèles et défini dans le manifeste. Cela charge le Code JavaScript dans le navigateur lorsque le portail Azure Pack Windows se charge. Comme pour les feuilles de style, il n’existe aucune isolation pour les scripts: tous les scripts sont chargés ensemble. Il est donc vivement recommandé d’utiliser des techniques d’isolation JavaScript telles que les espaces de noms.
Layout
Vous pouvez avoir autant de fichiers JavaScript que votre extension nécessite. Toutefois, il est suggéré de suivre une disposition de fichier et une séparation similaire à l’exemple 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)
Les points principaux de cette disposition sont les suivants :
Il existe deux fichiers JavaScript en dehors du répertoire \Scripts: ils contiennent le code d’initialisation pour la partie navigateur du côté client de l’extension.
Tous les autres fichiers JavaScript se trouvent dans le répertoire \Scripts. Chaque vue d’interface utilisateur majeure de l’extension, comme les onglets ou les dialogues, a son propre fichier. Le code dans lequel se trouve un espace de noms pour l’extension.
Initialisation du script Java
Les fichiers JavaScript d’initialisation sont les suivants :
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
L’initialisation de la partie JavaScript de l’extension côté client est en deux parties. Le premier déclare l’extension à l’infrastructure, la deuxième partie remplit le comportement et les principaux composants de l’interface utilisateur, tels que les onglets et les boutons de barre de commandes. La raison de ce fractionnement est qu’il permet à une extension de vérifier s’il doit s’afficher. Par exemple, un utilisateur n’a peut-être pas souscrit à un plan qui inclut vos ressources, auquel cas l’affichage ne serait pas nécessaire. Ceci est illustré par la fonction HelloWorldTenantExtensionActivationInit dans 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));
};
Comme tout autre JavaScript requis pour votre extension, il doit être déclaré dans le manifeste de votre extension. La première partie de la déclaration d’extension, si vous utilisez la disposition de fichier suggérée précédemment, a lieu dans le fichier extensions.data.js. L’exemple Hello World contient ceci dans 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);
Propriété |
Description |
|---|---|
displayName |
Texte affiché dans la navigation gauche de l’extension. |
iconUri |
Chemin absolu du site vers l’image utilisée comme icône pour l’extension. |
iconShowCount |
Bascule l’affichage d’un nombre d’éléments dans une extension sur l’icône de l’extension. |
iconTextOffset, iconInvertTextColor |
Contrôle affiné sur l’affichage de l’entrée de l’extension dans la navigation gauche. |
displayOrderHint |
Position dans la liste des extensions dans la navigation gauche. Un nombre inférieur équivaut à se rapprocher du haut du volet de navigation gauche. |
La deuxième partie de la déclaration d’extension, si vous utilisez la disposition de fichier suggérée dans Implémentation d’un Windows Portail d’administration Azure Pack Client-Side Extension, se produit dans le fichier [ExtensionName]Extension.js (où [ExtensionName] est le nom de l’extension). Le contenu de ce fichier est généralement étendu à l’extension. Voici quelques exemples de ce qui est généralement effectué dans ce fichier :
Configuration de l’espace de noms JavaScript pour le code de l’extension.
Déclarer les onglets dont l’extension aura besoin.
La déclaration d’un nouvel élément de menu que l’extension contribue.
Définition de tous les comportements globaux d’extension. Par exemple, que faire lorsque l’extension est ouverte pour la première fois.
Fichiers JavaScript de tabulation ou de boîte de dialogue
Si vous utilisez le fractionnement de script suggéré et la disposition des fichiers, chaque onglet ou boîte de dialogue aura son propre fichier JavaScript dans le répertoire \Scripts. Chaque fichier de script doit être déclaré dans le manifeste de votre extension s’il doit être chargé. Il est recommandé que votre code JavaScript existe dans un espace de noms afin de ne pas interférer avec le code d’autres extensions. Si le même espace de noms est utilisé entre tous vos fichiers, vous devez être en mesure de faire référence à des fonctions d’autres fichiers, ce qui signifie que vous pourriez avoir la référence JavaScript d’initialisation à une fonction dans votre Assistant JavaScript qui crée un Assistant, au lieu d’avoir la fonction de création de l’Assistant faire partie de l’initialisation JavaScript.
Pour plus d’informations sur l’exécution d’actions dans l’interface utilisateur, consultez Exécution de tâches courantes dans une extension du portail d’administration Azure Pack Windows.
Voir aussi
Windows extensions d’interface utilisateur du portail d’administration Azure Pack