Windows O Portal de Gerenciamento do Azure Pack Client-Side Extensão JavaScript
Aplica-se a: Windows Azure Pack
Olá, Mundo exemplo Visual Studio Project caminhos: Microsoft.WAP.Samples.HelloWorld.TenantExtension\Content\*.js e Microsoft.WAP.Samples.HelloWorld.AdminExtension\Content\*.js
O JavaScript exigido por um Windows extensão do portal de gerenciamento do Azure Pack deve ser colocado em modelos e definido no manifesto. Isso carregará o JavaScript no navegador quando o portal do Windows do Azure Pack for carregado. Assim como acontece com as folhas de estilo, não há isolamento para scripts— todos os scripts são carregados juntos. Portanto, é altamente recomendável que técnicas de isolamento JavaScript, como namespaces, sejam usadas.
Layout
Você pode ter apenas alguns ou tantos arquivos JavaScript quanto sua extensão exige. No entanto, é sugerido que você siga um layout de arquivo e uma separação semelhante ao exemplo de Olá, 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)
Os principais pontos deste layout são:
Há dois arquivos JavaScript fora do diretório \Scripts– eles contêm o código de inicialização para a parte do navegador do lado do cliente da extensão.
Todos os outros arquivos JavaScript estão no diretório \Scripts. Cada exibição de interface do usuário principal da extensão, como guias ou caixas de diálogo, tem seu próprio arquivo. O código dentro está em um namespace para a extensão.
Script Java de inicialização
Os arquivos 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 para a estrutura, a segunda parte preenche o comportamento e os principais componentes da interface do usuário, como guias e botões da barra de comandos. O motivo dessa divisão é que ela permite que uma extensão verifique se ela precisa ser exibida. Por exemplo, um usuário pode não ter assinado um plano que inclua seus recursos, nesse caso, a exibição não seria necessária. Isso é 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 sua extensão, ele deve ser declarado no manifesto da sua extensão. A primeira parte da declaração de extensão, se estiver usando o layout de arquivo sugerido anteriormente, ocorrerá no arquivo extensions.data.js. O exemplo de Olá, Mundo tem isso 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 o ícone da extensão. |
iconShowCount |
Alterna a exibição de uma contagem dos itens em uma extensão no ícone da extensão. |
iconTextOffset, iconInvertTextColor |
Controle refinado sobre a exibição da entrada da extensão na navegação à esquerda. |
displayOrderHint |
Posicione-se na lista de extensões na navegação à esquerda. Um número mais baixo equivale a mais perto da parte superior do painel de navegação esquerdo. |
A segunda parte da declaração de extensão, se estiver usando o layout de arquivo sugerido na Implementação de um Windows Portal de Gerenciamento do Azure Pack Client-Side Extension, ocorrerá no arquivo [ExtensionName]Extension.js (em que [ExtensionName] é o nome da extensão). O conteúdo neste arquivo geralmente é de toda a extensão no escopo. Exemplos do que geralmente é executado neste arquivo incluem:
Configurando o namespace JavaScript para o código da extensão.
Declarando as guias que a extensão terá.
Declarando todos os itens de menu Adicionar Novo, a extensão contribuirá.
Definindo qualquer comportamento global de extensão. Por exemplo, o que fazer quando a extensão é aberta pela primeira vez.
Arquivos JavaScript de guia ou caixa de diálogo
Se você usar a divisão de script sugerida e o layout do arquivo, cada guia ou caixa de diálogo terá seu próprio arquivo JavaScript no diretório \Scripts. Cada arquivo de script deve ser declarado no manifesto da sua extensão se ele for carregado. É recomendável que o código JavaScript exista em um namespace para não interferir no código de outras extensões. Se o mesmo namespace for usado entre todos os seus arquivos, você deverá ser capaz de fazer referência a funções de outros arquivos, o que significa que você pode fazer com que o JavaScript de inicialização faça referência a uma função no assistente JavaScript que cria um assistente, em vez de fazer com que a função de criação do assistente faça parte da inicialização javaScript.
Para obter mais informações sobre como executar ações na interface do usuário, consulte Executar tarefas comuns em um Windows Extensão do Portal de Gerenciamento do Azure Pack.
Consulte Também
Windows Extensões de Interface do Usuário do Portal de Gerenciamento do Azure Pack