Exemplarische Vorgehensweise: Erstellen eines SDK mithilfe von JavaScript

Gilt für:yes Visual Studio Visual Studio nofür Mac noVisual Studio Code

In dieser exemplarischen Vorgehensweise wird erläutert, wie JavaScript verwendet wird, um ein einfaches Mathematisches SDK als Visual Studio-Erweiterung (VSIX) zu erstellen. Die exemplarische Vorgehensweise ist in diese Teile unterteilt:

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 SimpleMathVSIX-Erweiterungs-SDK-Projekt

  1. Klicken Sie in der Menüleiste auf Datei>Neu>Projekt.

  2. Wählen Sie in der Liste der Vorlagenkategorien unter Visual C# die Option Extensibility aus, und wählen Sie dann die VSIX-Projektvorlage aus.

  3. Geben Sie im Textfeld "Name " die Schaltfläche "OK" an SimpleMathVSIX , und wählen Sie die Schaltfläche "OK " aus.

  4. Wenn der Visual Studio-Paket-Assistent angezeigt wird, wählen Sie die Schaltfläche " Weiter " auf der Willkommensseite aus, und wählen Sie dann auf Seite 1 von 7 die Schaltfläche "Fertig stellen " aus.

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

  5. Öffnen Sie im 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>
    
  6. Öffnen Sie im Projektmappen-Explorer das Kontextmenü für das SimpleMathVSIX-Projekt, und wählen Sie dann"Neues Element hinzufügen>" aus.

  7. Wählen Sie in der Kategorie "Daten " die XML-Datei aus, benennen Sie die Datei SDKManifest.xml, und wählen Sie die Schaltfläche "Hinzufügen " aus.

  8. Öffnen Sie im Projektmappen-Explorer das Kontextmenü für die dateiSDKManifest.xml , und wählen Sie dann "Öffnen " aus, um die Datei im XML-Editor anzuzeigen.

  9. Fügen Sie den folgenden Code zur dateiSDKManifest.xml 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>
    
    
  10. Wählen Sie im Projektmappen-Explorer im Kontextmenü für die dateiSDKManifest.xmldie Option "Eigenschaften" aus.

  11. Legen Sie im Eigenschaftenfenster die Eigenschaft "In VSIX einschließen " auf "True" fest.

  12. Wählen Sie im Projektmappen-Explorer im Kontextmenü für das SimpleMathVSIX-Projekt die Option"Neuen Ordnerhinzufügen>" aus, und benennen Sie dann den OrdnerRedist.

  13. Fügen Sie Unterordner unter Redist hinzu, um diese Ordnerstruktur zu erstellen:

    \Redist\CommonConfiguration\Neutral\SimpleMath\js\

  14. Wählen Sie im Kontextmenü für den Ordner \js\ die Option"Neues Elementhinzufügen>" aus.

  15. Wählen Sie unter Visual C#-Elementen die Webkategorie aus, und wählen Sie dann das JavaScript-Dateielement aus. Benennen Sie die Datei arithmetic.js, und wählen Sie dann die Schaltfläche "Hinzufügen " aus.

  16. Fügen Sie den folgenden Code in arithmetic.jsein:

    (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. Wählen Sie im Projektmappen-Explorer im Kontextmenü für die dateiarithmetic.jsdie Option "Eigenschaften" aus. Nehmen Sie diese Eigenschaftsänderungen vor:

    • Legen Sie die "Include" in VSIX-Eigenschaft auf"True" fest.

    • Legen Sie die Copy to Output Directory-Eigenschaft auf "Always" fest.

  18. Wählen Sie im Projektmappen-Explorer im Kontextmenü für das SimpleMathVSIX-Projekt die Option "Build" aus.

  19. Nachdem der Build erfolgreich abgeschlossen wurde, wählen Sie im Kontextmenü für das Projekt " Ordner öffnen" im Datei-Explorer aus. Navigieren Sie zu \bin\debug\, und führen Sie sie aus SimpleMathVSIX.vsix , um sie zu installieren.

  20. Wählen Sie die Schaltfläche "Installieren " aus, und lassen Sie die Installation abgeschlossen.

  21. Starten Sie Visual Studio neu.

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

  1. Klicken Sie in der Menüleiste auf Datei>Neu>Projekt.

  2. Wählen Sie in der Liste der Vorlagenkategorien unter JavaScript windows Store aus, und wählen Sie dann die Vorlage "Leere App" aus.

  3. Geben Sie ArithmeticUIim Feld "Name" an. Klicken Sie auf die Schaltfläche OK .

  4. Öffnen Sie im Projektmappen-Explorer das Kontextmenü für das ArithmeticUI-Projekt, und wählen Sie dann"Verweishinzufügen>" aus.

  5. Wählen Sie unter WindowsErweiterungen aus, und beachten Sie, dass einfache Mathematik angezeigt wird.

  6. Aktivieren Sie das Kontrollkästchen "Einfache Mathematik ", und wählen Sie dann die Schaltfläche "OK " aus.

  7. Beachten Sie im Projektmappen-Explorer unter "Verweise", dass der Verweis auf einfache Mathematik angezeigt wird. Erweitern Sie sie, und beachten Sie, dass es einen \js\ -Ordner gibt, der arithmetic.jsenthält. Sie können arithmetic.js öffnen, um zu bestätigen, dass Der Quellcode installiert wurde.

  8. Verwenden Sie den folgenden Code, um den Inhalt von default.htmzu 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>
    
  9. Verwenden Sie den folgenden Code, um den Inhalt von \js\default.jszu 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();
    })();
    
  10. 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;
    }
    
    
  11. Wählen Sie den F5-Schlüssel aus, um die App zu erstellen und auszuführen.

  12. Geben Sie in der App-Benutzeroberfläche alle zwei Zahlen ein, wählen Sie einen Vorgang aus, und wählen Sie dann die = Schaltfläche aus. Das richtige Ergebnis wird angezeigt.

Weitere Informationen