Exemplarische Vorgehensweise: Erstellen eines SDK mit JavaScript

Artikel
10/10/2023

In dieser exemplarischen Vorgehensweise erfahren Sie, wie Sie JavaScript verwenden, um ein einfaches mathematisches SDK als Visual Studio-Erweiterung (VSIX) zu erstellen. Die exemplarische Vorgehensweise ist in diese Teile unterteilt:

So erstellen Sie das Sdk-Projekt der SimpleMathVSIX-Erweiterung
So erstellen Sie eine Beispiel-App, die das SDK verwendet

Für JavaScript gibt es keinen Klassenbibliotheksprojekttyp. In dieser exemplarischen Vorgehensweise wird die Beispieldatei arithmet.js direkt im VSIX-Projekt erstellt. In der Praxis wird empfohlen, die JavaScript- und CSS-Dateien zunächst als Windows Store-App zu erstellen und zu testen, z. B. mithilfe der Vorlage "Leere App ", bevor Sie sie in ein VSIX-Projekt einfügen.

Voraussetzungen

Um dieser exemplarischen Vorgehensweise folgen zu können, müssen Sie das Visual Studio SDK installieren. Weitere Informationen finden Sie unter Visual Studio SDK.

So erstellen Sie das Sdk-Projekt der SimpleMathVSIX-Erweiterung

Klicken Sie in der Menüleiste auf Datei>Neu>Projekt.
Wählen Sie in der Liste der Vorlagenkategorien unter Visual C# die Option "Erweiterbarkeit" und dann die VSIX-Projektvorlage aus.
Geben Sie im Textfeld "Name" die Schaltfläche "OK" anSimpleMathVSIX, und wählen Sie sie aus.
Wenn der Visual Studio-Paket-Assistent angezeigt wird, wählen Sie auf der Willkommensseite die Schaltfläche "Weiter" und dann auf Seite 1 von 7 die Schaltfläche "Fertig stellen" aus.

Obwohl der Manifest-Designer geöffnet wird, lassen wir diese exemplarische Vorgehensweise einfach, indem sie die Manifestdatei direkt ändern.

Öffnen Sie in Projektmappen-Explorer das Kontextmenü für die Datei "source.extension.vsixmanifest", und wählen Sie dann "Code anzeigen" aus. Verwenden Sie diesen Code, um den vorhandenen Inhalt in der Datei zu ersetzen.

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

Öffnen Sie in Projektmappen-Explorer das Kontextmenü für das SimpleMathVSIX-Projekt, und wählen Sie dann "Neues Element hinzufügen">aus.
Wählen Sie in der Kategorie "Daten" die XML-Datei aus, benennen Sie die DateiSDKManifest.xml, und wählen Sie die Schaltfläche "Hinzufügen" aus.
Öffnen Sie in Projektmappen-Explorer das Kontextmenü für die DATEI SDKManifest.xml, und wählen Sie dann "Öffnen" aus, um die Datei im XML-Editor anzuzeigen.

Fügen Sie der DATEI SDKManifest.xml den folgenden Code hinzu.

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

Wählen Sie in Projektmappen-Explorer im Kontextmenü der DATEI SDKManifest.xml die Option "Eigenschaften" aus.
Legen Sie im Eigenschaftenfenster die Eigenschaft Include in VSIX auf True fest.
Wählen Sie in Projektmappen-Explorer im Kontextmenü für das Projekt "SimpleMathVSIX" die Option "Neuen Ordner hinzufügen>" aus, und benennen Sie dann den Ordner.Redist
Fügen Sie Unterordner unter "Redist" hinzu, um diese Ordnerstruktur zu erstellen:

\Redist\CommonConfiguration\Neutral\SimpleMath\js\
Wählen Sie im Kontextmenü für den Ordner \js\ die Option "Neues Element hinzufügen>" aus.
Wählen Sie unter Visual C#-Elementen die Webkategorie und dann das JavaScript-Dateielement aus. Benennen Sie die Datei arithmetic.js, und wählen Sie dann die Schaltfläche "Hinzufügen " aus.

Fügen Sie den folgenden Code in arithmetische.js ein:

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

Wählen Sie in Projektmappen-Explorer im Kontextmenü für die Datei arithmeetic.js die Option "Eigenschaften" aus. Nehmen Sie diese Eigenschaftsänderungen vor:
- Legen Sie die Include in VSIX-Eigenschaft auf True fest.
- Legen Sie die Eigenschaft "Auf Ausgabeverzeichnis kopieren" auf "Immer kopieren" fest.
Wählen Sie in Projektmappen-Explorer im Kontextmenü für das SimpleMathVSIX-Projekt "Erstellen" aus.
Nachdem der Build erfolgreich abgeschlossen wurde, wählen Sie im Kontextmenü für das Projekt "Ordner öffnen" in Explorer aus. Navigieren Sie zu \bin\debug\, und führen Sie sie aus SimpleMathVSIX.vsix , um sie zu installieren.
Wählen Sie die Schaltfläche "Installieren " aus, und lassen Sie die Installation abschließen.
Starten Sie Visual Studio neu.

So erstellen Sie eine Beispiel-App, die das SDK verwendet

Klicken Sie in der Menüleiste auf Datei>Neu>Projekt.
Wählen Sie in der Liste der Vorlagenkategorien unter JavaScript den Windows Store und dann die Vorlage "Leere App" aus.
Geben Sie ArithmeticUIim Feld "Name" an. Klicken Sie auf die Schaltfläche OK .
Öffnen Sie in Projektmappen-Explorer das Kontextmenü für das ArithmetischeUI-Projekt, und wählen Sie dann "Verweis hinzufügen">aus.
Wählen Sie unter Windows Erweiterungen aus, und beachten Sie, dass einfache Mathematik angezeigt wird.
Aktivieren Sie das Kontrollkästchen "Einfache Mathematik " und dann die Schaltfläche "OK ".
Beachten Sie in Projektmappen-Explorer unter "Verweise", dass der Einfache mathematische Bezug angezeigt wird. Erweitern Sie ihn, und beachten Sie, dass es einen \js\-Ordner gibt, der arithmetische.js enthält. Sie können arithmetische.js öffnen, um zu bestätigen, dass Ihr Quellcode installiert wurde.

Verwenden Sie den folgenden Code, um den Inhalt von default.htm zu ersetzen.

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

Verwenden Sie den folgenden Code, um den Inhalt von \js\default.js zu ersetzen.

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

Ersetzen Sie den Inhalt von \css\default.css durch diesen Code:

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

Wählen Sie die F5-TASTE aus, um die App zu erstellen und auszuführen.
Geben Sie in der App-Benutzeroberfläche beliebige zwei Zahlen ein, wählen Sie einen Vorgang aus, und wählen Sie dann die = Schaltfläche aus. Das richtige Ergebnis wird angezeigt.

Erstellen eines Software Development Kit

Exemplarische Vorgehensweise: Erstellen eines SDK mit JavaScript

Voraussetzungen

So erstellen Sie das Sdk-Projekt der SimpleMathVSIX-Erweiterung

So erstellen Sie eine Beispiel-App, die das SDK verwendet

Zugehöriger Inhalt

Zusätzliche Ressourcen