Windows Portal de administración de módulos de Azure Client-Side Extensión JavaScript
Se aplica a: Windows Azure Pack
Hola mundo rutas de acceso de ejemplo Visual Studio Project: Microsoft.WAP.Samples.HelloWorld.TenantExtension\Content\*.js y Microsoft.WAP.Samples.HelloWorld.AdminExtension\Content\*.js
JavaScript requerido por una extensión del portal de administración de módulos de Azure Windows debe colocarse en plantillas y definirse en el manifiesto. Esto cargará JavaScript en el explorador cuando se cargue el portal de Windows Azure Pack. Al igual que con las hojas de estilos, no hay aislamiento para los scripts; todos los scripts se cargan juntos. Por lo tanto, se recomienda encarecidamente usar técnicas de aislamiento de JavaScript, como los espacios de nombres.
Layout
Puede tener tan pocos o tantos archivos JavaScript como requiera la extensión. Sin embargo, se recomienda seguir un diseño de archivo y una separación similares al ejemplo de Hola mundo:
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)
Los puntos principales de este diseño son:
Hay dos archivos JavaScript fuera del directorio \Scripts: contienen el código de inicialización para la parte del explorador del lado cliente de la extensión.
Todos los demás archivos javaScript se encuentran en el directorio \Scripts. Cada vista de interfaz de usuario principal de la extensión, como pestañas o diálogos, tiene su propio archivo. El código de está en un espacio de nombres para la extensión.
Script de Java de inicialización
Los archivos javaScript de inicialización son:
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
La inicialización de la parte de JavaScript de la extensión del lado cliente se encuentra en dos partes. La primera declara la extensión en el marco, la segunda parte rellena el comportamiento y los componentes principales de la interfaz de usuario, como pestañas y botones de la barra de comandos. El motivo de esta división es que permite que una extensión compruebe si necesita mostrarse. Por ejemplo, es posible que un usuario no se haya suscrito a un plan que incluya los recursos, en cuyo caso no sería necesario mostrar. Esto se muestra mediante la función HelloWorldTenantExtensionActivationInit en 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));
};
Al igual que cualquier otro JavaScript necesario para la extensión, debe declararse en el manifiesto de la extensión. La primera parte de la declaración de extensión, si usa el diseño de archivo sugerido de anteriormente, tiene lugar en el archivo extensions.data.js. El ejemplo Hola mundo lo tiene en 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);
Propiedad |
Descripción |
|---|---|
DisplayName |
Texto que se muestra en el panel de navegación izquierdo de la extensión. |
iconUri |
Ruta de acceso absoluta del sitio a la imagen usada como icono para la extensión. |
iconShowCount |
Alterna que muestra un recuento de los elementos de una extensión en el icono de la extensión. |
iconTextOffset, iconInvertTextColor |
Control específico sobre la presentación de la entrada de la extensión en el panel de navegación izquierdo. |
displayOrderHint |
Posición en la lista de extensiones en el panel de navegación izquierdo. Un número inferior equivale a estar más cerca de la parte superior del panel de navegación izquierdo. |
La segunda parte de la declaración de extensión, si usa el diseño de archivo sugerido en Implementación de un portal de administración de Windows de Azure Pack Client-Side extensión, tiene lugar en el archivo [ExtensionName]Extension.js (donde [ExtensionName] es el nombre de la extensión). El contenido de este archivo suele ser de extensión en todo el ámbito. Algunos ejemplos de lo que normalmente se realiza en este archivo son:
Configuración del espacio de nombres de JavaScript para el código de la extensión.
Declarar las pestañas que tendrá la extensión.
Declarar los elementos de menú Agregar nuevos que contribuya la extensión.
Definir cualquier comportamiento global de extensión. Por ejemplo, qué hacer cuando se abre la extensión por primera vez.
Archivos JavaScript de tabulación o cuadro de diálogo
Si usa la división de scripts sugerida y el diseño de archivo, cada pestaña o cuadro de diálogo tendrá su propio archivo JavaScript en el directorio \Scripts. Cada archivo de script debe declararse en el manifiesto de la extensión si se va a cargar. Se recomienda que el código javaScript exista dentro de un espacio de nombres para no interferir con el código de otras extensiones. Si se usa el mismo espacio de nombres entre todos los archivos, debería poder hacer referencia a funciones de otros archivos, lo que significa que podría hacer que javaScript de inicialización haga referencia a una función en el asistente JavaScript que crea un asistente, en lugar de tener que la función de creación del asistente forme parte de la inicialización de JavaScript.
Para obtener más información sobre cómo realizar acciones en la interfaz de usuario, consulte Realización de tareas comunes en una extensión del Portal de administración de módulos de Azure Windows.
Consulte también
Windows extensiones de interfaz de usuario del Portal de administración de módulos de Azure