Demonstra Passo a passo: Criar um SDK usando JavaScript

Artigo
01/13/2024

Este passo a passo ensina como usar JavaScript para criar um SDK matemático simples como uma extensão do Visual Studio (VSIX). O passo a passo é dividido nestas partes:

Para criar o projeto SDK de extensão SimpleMathVSIX
Para criar um aplicativo de exemplo que usa o SDK

Para JavaScript, não há nenhum tipo de projeto de biblioteca de classes. Neste passo a passo, o arquivo aritmético .js exemplo é criado diretamente no projeto VSIX. Na prática, recomendamos que você primeiro crie e teste os arquivos JavaScript e CSS como um aplicativo da Windows Store — por exemplo, usando o modelo Aplicativo em Branco — antes de colocá-los em um projeto VSIX.

Pré-requisitos

Para seguir este passo a passo, você deve instalar o SDK do Visual Studio. Para obter mais informações, confira SDK do Visual Studio.

Para criar o projeto SDK de extensão SimpleMathVSIX

Na barra de menus, escolha Arquivo>Novo>Projeto.
Na lista de categorias de modelo, em Visual C#, selecione Extensibilidade e, em seguida, selecione o modelo Projeto VSIX.
Na caixa de texto Nome, especifique SimpleMathVSIX e escolha o botão OK.
Se o Assistente de pacote do Visual Studio for exibido, escolha o botão Avançar na página de boas-vindas e, em seguida, na Página 1 de 7, escolha o botão Concluir.

Embora o Designer de Manifesto seja aberto, manteremos esse passo a passo simples modificando o arquivo de manifesto diretamente.

No Gerenciador de Soluções, abra o menu de atalho do arquivo source.extension.vsixmanifest e escolha Exibir Código. Use esse 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>

No Gerenciador de Soluções, abra o menu de atalho do projeto SimpleMathVSIX e escolha Adicionar>Novo Item.
Na categoria Dados, selecione Arquivo XML, nomeie o arquivo SDKManifest.xmle escolha o botão Adicionar.
No Gerenciador de Soluções, abra o menu de atalho do arquivo SDKManifest.xml e escolha Abrir para exibir o arquivo no Editor de XML.

Adicione o seguinte código ao arquivo SDKManifest.xml

<?xml version="1.0" encoding="utf-8" ?>
<FileList
  DisplayName="Simple Math"
  MinVSVersion="14.0"
  AppliesTo="JavaScript+WindowsAppContainer"
  SupportsMultipleVersions="Error"
  MoreInfo="https://msdn.microsoft.com/">

  <!-- JS -->
  <File Content="js\arithmetic.js" />
</FileList>

No Gerenciador de Soluções, no menu de atalho do arquivo SDKManifest.xml escolha Propriedades.
Na janela Propriedades, defina a propriedade Incluir no VSIX como True.
No Gerenciador de Soluções, no menu de atalho do projeto SimpleMathVSIX, escolha Adicionar>Nova Pasta e nomeie a pasta .Redist
Adicione subpastas em Redist para criar esta estrutura de pastas:

\Redist\CommonConfiguration\Neutro\SimpleMath\js\
No menu de atalho da pasta \js\, escolha Adicionar>Novo Item.
Em Itens do Visual C#, selecione a categoria Web e, em seguida, selecione o item Arquivo JavaScript. Nomeie o arquivo arithmetic.jse escolha o botão Adicionar .

Insira o seguinte código na aritmética.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);

No Gerenciador de Soluções, no menu de atalho do arquivo aritmético.js escolha Propriedades. Faça estas alterações de propriedade:
- Defina a propriedade Include in VSIX como True.
- Defina a propriedade Copiar para Diretório de Saída como Copiar Sempre.
No Gerenciador de Soluções, no menu de atalho do projeto SimpleMathVSIX , escolha Compilar.
Depois que a compilação for concluída com êxito, no menu de atalho do projeto, escolha Abrir pasta no Explorador de Arquivos. Navegue até \bin\debug\ e execute SimpleMathVSIX.vsix para instalá-lo.
Escolha o botão Instalar e deixe a instalação ser concluída.
Reinicie o Visual Studio.

Para criar um aplicativo de exemplo que usa o SDK

Na barra de menus, escolha Arquivo>Novo>Projeto.
Na lista de categorias de modelo, em JavaScript, selecione Windows Store e selecione o modelo Aplicativo em Branco.
Na caixa Nome, especifique ArithmeticUI. Clique no botão OK.
No Gerenciador de Soluções, abra o menu de atalho do projeto ArithmeticUI e escolha Adicionar>Referência.
Em Windows, escolha Extensões e observe que a Matemática Simples é exibida.
Marque a caixa de seleção Matemática simples e escolha o botão OK .
No Gerenciador de Soluções, em Referências, observe que a referência Matemática Simples é exibida. Expanda-o e observe que há uma pasta \js\ que inclui aritmética.js. Você pode abrir aritmética.js para confirmar que seu código-fonte foi instalado.

Use o código a seguir 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>

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();
})();

Substitua o conteúdo de \css\default.css por este 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;
}

Escolha a tecla F5 para compilar e executar o aplicativo.
Na interface do usuário do aplicativo, insira dois números, selecione uma operação e escolha o = botão. O resultado correto é exibido.

Criar um Kit de Desenvolvimento de Software

Demonstra Passo a passo: Criar um SDK usando JavaScript

Pré-requisitos

Para criar o projeto SDK de extensão SimpleMathVSIX

Para criar um aplicativo de exemplo que usa o SDK

Conteúdo relacionado

Recursos adicionais