Exportar (0) Imprimir
Expandir Tudo
Este artigo foi traduzido por máquina. Coloque o ponteiro do mouse sobre as frases do artigo para ver o texto original. Mais informações.
Tradução
Original
Este tópico ainda não foi avaliado como - Avalie este tópico

Instruções passo a passo: criando um SDK com JavaScript

Visual Studio 2012

Essa explicação passo a passo ensina como usar o Javascript para criar uma simples matemática SDK como uma extensão do Visual Studio (VSIX). A explicação passo a passo é dividido nessas partes:

Para Javascript, não há nenhum tipo de projeto de biblioteca de classes. Nessa explicação passo a passo, o arquivo de exemplo arithmetic.js é criado diretamente no projeto de VSIX. Na prática, recomendamos que você primeiro crie e teste o Javascript e os arquivos CSS como aplicativos da Windows Store por exemplo, usando o modelo Aplicativo em branco - antes de você colocá-los em um projeto de VSIX.

Você deve ter Windows 8; Visual Studio 2012 professional, superior, ou final; e SDL do Visual Studio 2012 instalado no seu computador. Você pode baixar o Visual Studio SDK Downloads do Visual Studio do site.

Para criar o projeto do SDK de extensão de SimpleMathVSIX

  1. Na barra de menu escolha: File, New Project.

  2. Na lista de categorias de modelo, em Visual C#, Extensibilidadeselecione, e então selecione o modelo de VSIX Project .

  3. Na caixa de texto de Nome , especifique SimpleMathVSIX e escolha o botão de OK .

  4. Se Assistente de pacote do Visual Studio aparece, escolha o botão de Avançar na página de Bem-vindo e em seguida, Página 1 de 7, clique no botão de Concluir .

    Embora Designer de Manifesto , abra nós manteremos este passo-a-passo simples modificando o arquivo de manifesto diretamente.

  5. Em Gerenciador de Soluções, abra o menu de atalho para o arquivo de source.extension.vsixmanifest, e então escolha Exibir Código. Use este código para substituir o conteúdo existente no arquivo.

    <?xml version="1.0" encoding="utf-8"?>
    <PackageManifest Version="2.0.0" xmlns="http://schemas.microsoft.com/developer/vsx-schema/2011" xmlns:d="http://schemas.microsoft.com/developer/vsx-schema-design/2011">
      <Metadata>
        <Identity Id="SimpleMathVSIX" Version="1.0" Language="en-US" Publisher="myname" />
        <DisplayName>Simple Math</DisplayName>
        <Description>Does basic arithmetic calculations.</Description>
      </Metadata>
      <Installation Scope="Global" AllUsers="true">
        <InstallationTarget Id="Microsoft.ExtensionSDK" TargetPlatformIdentifier="Windows" TargetPlatformVersion="v8.0" SdkName="SimpleMath" SdkVersion="1.0" />
      </Installation>
      <Dependencies>
        <Dependency Id="Microsoft.Framework.NDP" DisplayName="Microsoft .NET Framework" d:Source="Manual" Version="4.5" />
      </Dependencies>
      <Assets>
        <Asset Type="Microsoft.ExtensionSDK" d:Source="File" Path="SDKManifest.xml" />
      </Assets>
    </PackageManifest>
    
  6. Em Gerenciador de Soluções, abra o menu de atalho para o projeto de SimpleMathVSIX, e então escolha Adicionar, Novo Item.

  7. Na categoria de DadosArquivo XML, selecione, nomeie o arquivo SDKManifest.xml, e clique o botão de Adicionar .

  8. Em Gerenciador de Soluções, abra o menu de atalho para o arquivo de SDKManifest.xml, e então escolha Abrir para exibir o arquivo em Editor de XML.

  9. Adicione o seguinte código ao arquivo de SDKManifest.xml.

    <?xml version="1.0" encoding="utf-8" ?>
    <FileList
      DisplayName="Simple Math"
      MinVSVersion="11.0"
      AppliesTo="JavaScript+WindowsAppContainer"
      SupportsMultipleVersions="Error"
      MoreInfo="http://www.msdn.microsoft.com/">
    
      <!-- JS -->
      <File Content="js\arithmetic.js" />
    </FileList>
    
    
  10. Em Gerenciador de Soluções, no menu de atalho para o arquivo de SDKManifest.xml, escolha Propriedades.

  11. Na janela de Propriedades , defina a propriedade de Inclua em VSIXTrue.

  12. Em Gerenciador de Soluções, no menu de atalho para o projeto de SimpleMathVSIX, escolha Adicionar, Nova Pasta, e denomine a pasta Redist.

  13. Adicione subpastas em Redist para criar essa estrutura de pasta:

    Redist \ \ CommonConfiguration ponto SimpleMath js neutro \ \ \

  14. No menu de atalho para a pasta \ \ js, escolha Adicionar, Novo Item.

  15. Em Itens do Visual C, selecione a categoria de Web , e selecione o item de Arquivo JavaScript . Nomeie o arquivo arithmetic.js, e então escolha o botão de Adicionar .

  16. Insira o código a seguir arithmetic.js:

    (function (global) {
        "use strict";
        global.Arithmetic = {
            add: function (firstNumber, secondNumber) {
                return firstNumber + secondNumber;
            },
    
            subtract: function (firstNumber, secondNumber) {
                return firstNumber - secondNumber;
            },
    
            multiply: function (firstNumber, secondNumber) {
                return firstNumber * secondNumber;
            },
    
            divide: function (firstNumber, secondNumber) {
                return firstNumber / secondNumber;
            }
        };
    })(this);
    
    
  17. Em Gerenciador de Soluções, no menu de atalho para o arquivo de arithmetic.js, escolha Propriedades. Faça a essas alterações de propriedade:

    • Defina a propriedade de Inclua em VSIXTrue.

    • Defina a propriedade de Copiar para Diretório de Saída para Copiar sempre.

  18. Em Gerenciador de Soluções, no menu de atalho para o projeto de SimpleMathVSIX, escolha Compilar.

  19. Após a compilação for concluída com êxito, no menu de atalho para o projeto, escolha Abrir pasta no Gerenciador de Arquivos. Navegar \ bin \ debug \, e SimpleMathVSIX.vsix executado para instalá-lo.

  20. Escolha o botão de Instalar e deixe a instalação completo.

  21. Reinicie o Visual Studio.

Para criar um aplicativo de exemplo que usa SDK

  1. Na barra de menu, escolha Arquivo, Novo, Projeto.

  2. Na lista de categorias de modelo, em JavaScript, Windows Storeselecione, e então selecione o modelo de Aplicativo em branco .

  3. Na caixa de Nome , especifique ArithmeticUI. Escolha o botão OK.

  4. Em Gerenciador de Soluções, abra o menu de atalho para o projeto de ArithmeticUI, e então escolha Adicionar Referência.

  5. Em Janelas, escolha Extensões, e observe que Matemática simples é exibido.

  6. Selecione a caixa de seleção de Matemática simples e então escolha o botão de OK .

  7. Em Gerenciador de Soluções, em Referências, observe que a referência de Matemática simples é exibida. Para expandi-la e observe-o que há a pasta \ \ js que inclui arithmetic.js. Você pode abrir arithmetic.js para confirmar que seu código-fonte esteve instalado.

  8. Use o seguinte código para substituir o conteúdo de default.htm.

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title>ArithmeticUI</title>
    
        <!-- WinJS references -->
        <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
        <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
        <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
    
        <!-- ArithmeticUI references -->
        <link href="/css/default.css" rel="stylesheet" />
        <script src="/js/default.js"></script>
        <script src="/SimpleMath/js/arithmetic.js"></script>
    </head>
    <body>
        <form>
        <div id="calculator" class="ms-grid">
            <input name="firstNumber" id="firstNumber" type="number" step="any">
            <div id="operators">
                <button class="operator" type="button">+</button>
                <button class="operator" type="button">-</button>
                <button class="operator" type="button">*</button>
                <button class="operator" type="button">/</button>
            </div>
            <input id="secondNumber" type="number">
            <button class="calculate" type="button">=</button>
            <input id="result" type="number" name="result" disabled="" readonly="">
        </div>
        </form>
    </body>
    </html>
    
  9. Use o código a seguir para substituir o conteúdo de js \ \ default.js.

    (function () {
        "use strict";
    
        var app = WinJS.Application;
        var operation = null;
    
        function calculateResult() {
            var firstNumber = parseFloat(document.querySelector("#firstNumber").value),
                secondNumber = parseFloat(document.querySelector("#secondNumber").value),
                result = 0;
    
            if (isNaN(firstNumber) || isNaN(secondNumber)) {
                result = 0;
            }
            else {
                switch (operation) {
                    case "+":
                        result = Arithmetic.add(firstNumber, secondNumber);
                        break;
                    case "-":
                        result = Arithmetic.subtract(firstNumber, secondNumber);
                        break;
                    case "*":
                        result = Arithmetic.multiply(firstNumber, secondNumber);
                        break;
                    case "/":
                        result = Arithmetic.divide(firstNumber, secondNumber);
                        break;
                    default:
                }
            }
            document.querySelector("#result").value = result.toString();
        }
    
        app.onactivated = function (args) {
            document.querySelector("#calculator").addEventListener("click", function (event) {
                if (event.target.tagName.toLowerCase() === "button") {
                    switch (event.target.className) {
                        case "operator":
                            operation = event.target.innerText;
                            break;
                        case "calculate":
                            calculateResult();
                            break;
                        default:
                            break;
                    }
                }
            });
        };
    
        app.start();
    })();
    
  10. Substitua o conteúdo de CSS \ \ default.css com esse código:

    form {
        display: -ms-grid;
        -ms-grid-rows: 1fr auto 1fr;
        -ms-grid-columns: 1fr auto 1fr;
        height: 100%;
        width: 100%;
    }
    
    button, input[type=number] {
        margin-right: 5px;
        -ms-grid-row-align: center;
    }
    
    #calculator {
        -ms-grid-column: 2;
        -ms-grid-row: 2;
        display: -ms-grid;
        -ms-grid-rows: 1fr;
        -ms-grid-columns: auto min-content auto auto auto;
    }
    
    .ms-grid input {
        width: 5em;
    }
    
    #firstNumber {
        -ms-grid-column: 1;
        -ms-grid-row-align: center;
    }
    
    #operators {
        -ms-grid-column: 2;
        -ms-grid-row-align: center;
    }
    
        #operators button.operator {
            margin-bottom: 5px;
            height: 40px;
        }
    
    #secondNumber {
        -ms-grid-column: 3;
    }
    
    button.calculate {
        -ms-grid-column: 4;
        -ms-grid-row-align: center;
        height: 40px;
    }
    
    #result {
        -ms-grid-column: 5;
    }
    
    
  11. Escolha a tecla F5 para compilar e executar o aplicativo.

  12. Na IU da aplicação, digite quaisquer dois números, selecione uma operação, e então escolha o botão de = . O resultado correto é exibido.

Isso foi útil para você?
(1500 caracteres restantes)
Agradecemos os seus comentários

Contribuições da comunidade

ADICIONAR
Mostrar:
© 2014 Microsoft. Todos os direitos reservados.