Windows Portal de Gestão de Pacotes Client-Side JavaScript
Aplica-se a: Windows Azure Pack
Hello World Sample Visual Studio Project Paths: Microsoft.WAP.samples.HelloWorld.TenantExtension\Content\*.js e Microsoft.WAP.samples.HelloWorld.AdminExtension\Content\*.js
O JavaScript exigido por uma extensão do portal de gestão Azure Pack Windows deve ser colocado em modelos e definido no manifesto. Isto irá carregar o JavaScript no navegador quando o portal Windows Azure Pack carregar. Tal como acontece com as folhas de estilo, não há isolamento para scripts - todos os scripts são carregados juntos. É, portanto, altamente recomendado que técnicas de isolamento JavaScript, como espaços de nome, sejam usadas.
Layout
Pode ter os poucos ou tantos ficheiros JavaScript que a sua extensão requer. No entanto, sugere-se que siga um layout de ficheiro e separação semelhante à amostra 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)
Os principais pontos deste layout são:
Existem dois ficheiros JavaScript fora do diretório \Scripts — estes contêm o código de inicialização para a parte do navegador da extensão do cliente.
Todos os outros ficheiros JavaScript estão no diretório \Scripts. Cada visão de interface de utilizador principal da extensão, como separadores ou diálogos, tem o seu próprio ficheiro. O código interior está num espaço de nome para a extensão.
Script java inicialização
Os ficheiros JavaScript de inicialização são:
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
A inicialização da parte JavaScript da extensão do lado do cliente está em duas partes. A primeira declara a extensão da estrutura, a segunda parte preenche o comportamento e os principais componentes da interface do utilizador, tais como separadores e botões de barra de comando. A razão para esta divisão é que permite uma extensão para verificar se precisa de ser exibida. Por exemplo, um utilizador pode não ter subscrito um plano que inclua os seus recursos, caso em que a exibição não seria necessária. Isto é demonstrado pela função HelloWorldTenantExtensionActivationInit em 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));
};
Como qualquer outro JavaScript necessário para a sua extensão, deve ser declarado no manifesto para a sua extensão. A primeira parte da declaração de extensão, se utilizar o layout de ficheiro sugerido anteriormente, ocorre no ficheiro extensions.data.js. A amostra Hello World tem isto em 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);
Propriedade |
Descrição |
|---|---|
displayName |
Texto exibido na navegação à esquerda para a extensão. |
iconUri |
Caminho absoluto do site para a imagem usada como ícone para a extensão. |
íconeShowCount |
Toggles mostrando uma contagem dos itens numa extensão no ícone da extensão. |
iconTextOffset, iconInvertTextColor |
Controlo fino sobre a visualização da entrada da extensão na navegação à esquerda. |
displayOrderHint |
Posição na lista de extensões na navegação à esquerda. Um número mais baixo equivale a mais perto do topo do painel de navegação esquerdo. |
A segunda parte da declaração de extensão, se utilizar o layout de ficheiro sugerido na implementação de um Windows Azure Pack Management Portal Client-Side Extensão, ocorre no ficheiro [Extensãoname]Extension.js (onde [O Nome da Extensão] é o nome da extensão). O conteúdo deste ficheiro é geralmente extensão de âmbito. Exemplos do que é normalmente realizado neste ficheiro incluem:
Configurar o espaço de nomes JavaScript para o código da extensão.
Declarando quaisquer separadores que a extensão terá.
Declarando quaisquer itens de menu Add New a extensão contribuirá.
Definindo quaisquer comportamentos extensivos globais. Por exemplo, o que fazer quando a extensão é aberta pela primeira vez.
Separador ou Dialogar Ficheiros JavaScript
Se utilizar o design sugerido para dividir e arquivar o layout, cada separador ou diálogo terá o seu próprio ficheiro JavaScript no diretório \Scripts. Todos os ficheiros de script devem ser declarados no manifesto para a sua extensão, se for para ser carregado. Recomenda-se que o seu código JavaScript exista dentro de um espaço de nome para não interferir com o código de outras extensões. Se o mesmo espaço de nome for utilizado entre todos os seus ficheiros, deverá ser capaz de se referir a funções de outros ficheiros, o que significa que poderá ter a inicialização javaScript a uma função no seu JavaScript assistente que cria um assistente, em vez de ter a função de criação de assistentes fazer parte da inicialização javaScript.
Para obter mais informações sobre a realização de ações na interface do utilizador, consulte Executar Tarefas Comuns num Windows Extensão do Portal de Gestão de Pacotes Azure.
Consulte também
extensões de interface de utilizador do portal de gestão de pacotes Windows Azure