Пошаговое руководство. Создание пакета SDK с помощью JavaScript

Статья
10/10/2023

В этом пошаговом руководстве описывается, как использовать JavaScript для создания простого математического пакета SDK в виде расширения Visual Studio (VSIX). Пошаговое руководство разделено на следующие части:

Создание проекта пакета SDK расширения SimpleMathVSIX
Создание примера приложения, использующего пакет SDK

Для JavaScript тип проекта библиотеки классов отсутствует. В этом пошаговом руководстве образец файла arithmetic.js создается непосредственно в проекте VSIX. На практике рекомендуется сначала создавать и тестировать файлы JavaScript и CSS в качестве приложения Магазина Windows, например с помощью шаблона пустого приложения , прежде чем поместить их в проект VSIX.

Необходимые компоненты

Для выполнения этого пошагового руководства необходимо установить пакет SDK для Visual Studio. См. дополнительные сведения о пакете SDK для Visual Studio.

Создание проекта пакета SDK расширения SimpleMathVSIX

В строке меню выберите Файл >Создать >Проект.
В списке категорий шаблонов в разделе Visual C# выберите "Расширяемость", а затем выберите шаблон проекта VSIX.
В текстовом поле "Имя" укажите SimpleMathVSIX и нажмите кнопку "ОК ".
Если откроется мастер пакетов Visual Studio, нажмите кнопку "Далее" на странице приветствия, а затем на странице 1 из 7 нажмите кнопку "Готово".

Хотя откроется конструктор манифестов, мы просто изменим этот пошаговые инструкции, изменив файл манифеста напрямую.

В Обозреватель решений откройте контекстное меню для файла source.extension.vsixmanifest и выберите команду View Code. Используйте этот код для замены существующего содержимого в файле.

<?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>

В Обозреватель решений откройте контекстное меню проекта SimpleMathVSIX и нажмите кнопку "Добавить>новый элемент".
В категории данных выберите XML-файл, назовите файл SDKManifest.xmlи нажмите кнопку "Добавить".
В Обозреватель решений откройте контекстное меню для файла SDKManifest.xml, а затем выберите "Открыть", чтобы отобразить файл в редакторе XML.

Добавьте следующий код в XML-файл 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>

В Обозреватель решений в контекстном меню файла SDKManifest.xml выберите "Свойства".
В окне свойств задайте для свойства Include в свойстве VSIX значение True.
В Обозреватель решений в контекстном меню проекта SimpleMathVSIX выберите "Добавить>новую папку", а затем назовите папкуRedist.
Добавьте вложенные папки в Redist, чтобы создать эту структуру папок:

\Redist\CommonConfiguration\Neutral\SimpleMath\js\
В контекстном меню папки \js\ выберите "Добавить>новый элемент".
В разделе "Элементы Visual C#" выберите веб-категорию и выберите элемент файла JavaScript. Присвойте файлу arithmetic.jsимя и нажмите кнопку "Добавить ".

Вставьте следующий код в 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);

В Обозреватель решений контекстное меню для файла arithmetic.js выберите "Свойства". Внесите следующие изменения в свойство:
- Задайте для свойства Include in VSIX значение True.
- Задайте свойству Copy to Output Directory значение Copy Always.
В Обозреватель решений в контекстном меню проекта SimpleMathVSIX выберите "Сборка".
После успешного завершения сборки в контекстном меню проекта выберите "Открыть папку" в проводник. Перейдите к папке \bin\debug\и запустите SimpleMathVSIX.vsix его, чтобы установить его.
Нажмите кнопку "Установить " и допустите установку.
Перезапустите Visual Studio.

Создание примера приложения, использующего пакет SDK

В строке меню выберите Файл >Создать >Проект.
В списке категорий шаблонов в разделе JavaScript выберите Магазин Windows и выберите шаблон "Пустое приложение".
В поле "Имя" укажите ArithmeticUI. Нажмите кнопку ОК.
В Обозреватель решений откройте контекстное меню проекта ArithmeticUI и нажмите кнопку "Добавить>ссылку".
В разделе Windows выберите "Расширения" и обратите внимание, что отображается простая математика.
Выберите поле "Простая математика " проверка и нажмите кнопку "ОК".
В Обозреватель решений разделе "Ссылки" в разделе "Ссылки" обратите внимание, что отображается ссылка на простую математику. Разверните его и обратите внимание, что есть папка \js\ , которая включает arithmetic.js. Чтобы убедиться, что исходный код установлен, можно открыть arithmetic.js .

Используйте следующий код, чтобы заменить содержимое 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>

Используйте следующий код, чтобы заменить содержимое \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();
})();

Замените содержимое \css\default.css следующим кодом:

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

Выберите ключ F5 для сборки и запуска приложения.
В пользовательском интерфейсе приложения введите два числа, выберите операцию и нажмите кнопку = . Отображается правильный результат.

Создание пакета средств разработки программного обеспечения

Share via

Пошаговое руководство. Создание пакета SDK с помощью JavaScript

Необходимые компоненты

Создание проекта пакета SDK расширения SimpleMathVSIX

Создание примера приложения, использующего пакет SDK

Дополнительные ресурсы

Share via

Пошаговое руководство. Создание пакета SDK с помощью JavaScript

Необходимые компоненты

Создание проекта пакета SDK расширения SimpleMathVSIX

Создание примера приложения, использующего пакет SDK

Связанный контент

Дополнительные ресурсы