Návod: Vytvoření sady SDK pomocí JavaScriptu

Článek
10/10/2023

V tomto názorném postupu se naučíte, jak pomocí JavaScriptu vytvořit jednoduchou matematickou sadu SDK jako rozšíření sady Visual Studio (VSIX). Návod je rozdělený na tyto části:

Vytvoření projektu sady SDK rozšíření SimpleMathVSIX
Vytvoření ukázkové aplikace, která používá sadu SDK

Pro JavaScript neexistuje žádný typ projektu knihovny tříd. V tomto názorném postupu se ukázkový soubor aritmetic.js vytvoří přímo v projektu VSIX. V praxi doporučujeme nejprve sestavit a otestovat soubory JavaScriptu a CSS jako aplikaci pro Windows Store , například pomocí šablony Prázdná aplikace , před jejich vložením do projektu VSIX.

Požadavky

Pokud chcete postupovat podle tohoto návodu, musíte nainstalovat sadu Visual Studio SDK. Další informace najdete v sadě Visual Studio SDK.

Vytvoření projektu sady SDK rozšíření SimpleMathVSIX

Na řádku nabídek zvolte Soubor>nový>projekt.
V seznamu kategorií šablon v části Visual C# vyberte Rozšiřitelnost a pak vyberte šablonu projektu VSIX.
Do textového pole Název zadejte SimpleMathVSIX a zvolte tlačítko OK .
Pokud se zobrazí Průvodce balíčkem sady Visual Studio, zvolte tlačítko Další na úvodní stránce a potom na stránce 1 ze 7 zvolte tlačítko Dokončit.

I když se otevře Návrhář manifestu, budeme tento názorný postup udržovat jednoduchý úpravou souboru manifestu přímo.

V Průzkumník řešení otevřete místní nabídku pro soubor source.extension.vsixmanifest a pak zvolte Zobrazit kód. Tento kód slouží k nahrazení existujícího obsahu v souboru.

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

V Průzkumník řešení otevřete místní nabídku projektu SimpleMathVSIX a pak zvolte Přidat>novou položku.
V kategorii Data vyberte soubor XML, pojmenujte soubor SDKManifest.xmla zvolte tlačítko Přidat.
V Průzkumník řešení otevřete místní nabídku pro soubor SDKManifest.xml a pak zvolte Otevřít, aby se soubor zobrazil v editoru XML.

Do souboru SDKManifest.xml přidejte následující kód.

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

V Průzkumník řešení v místní nabídce pro soubor SDKManifest.xml zvolte Vlastnosti.
V okně Vlastnosti nastavte vlastnost Include v VSIX na Hodnotu True.
V Průzkumník řešení v místní nabídce projektu SimpleMathVSIX zvolte Přidat> novou složku Redista pak složku pojmenujte .
Přidejte podsložky pod redist a vytvořte tak tuto strukturu složek:

\Redist\CommonConfiguration\Neutral\SimpleMath\js\
V místní nabídce složky \js\ zvolte Přidat>novou položku.
V části Položky jazyka Visual C# vyberte kategorii Web a pak vyberte položku Soubor JavaScriptu. Pojmenujte soubor arithmetic.jsa pak zvolte tlačítko Přidat .

Do aritmetic.js vložte následující kód:

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

V Průzkumník řešení v místní nabídce souboru aritmetic.js zvolte Vlastnosti. Proveďte tyto změny vlastností:
- Nastavte vlastnost Include v VSIX na Hodnotu True.
- Nastavte vlastnost Kopírovat do výstupního adresáře na možnost Kopírovat vždy.
V Průzkumník řešení v místní nabídce projektu SimpleMathVSIX zvolte Sestavit.
Po úspěšném dokončení sestavení v místní nabídce projektu zvolte Otevřít složku v Průzkumník souborů. Přejděte do složky \bin\debug\ a spusťte SimpleMathVSIX.vsix instalaci.
Zvolte tlačítko Instalovat a nechte instalaci dokončit.
Restartujte Visual Studio.

Vytvoření ukázkové aplikace, která používá sadu SDK

Na řádku nabídek zvolte Soubor>nový>projekt.
V seznamu kategorií šablon v javascriptu vyberte Windows Store a pak vyberte prázdnou šablonu aplikace.
Do pole Název zadejte ArithmeticUI. Zvolte tlačítko OK.
V Průzkumník řešení otevřete místní nabídku projektu AritmeticUI a pak zvolte Přidat>odkaz.
V části Windows zvolte Rozšíření a všimněte si, že se zobrazí jednoduchá matematika.
Zaškrtněte políčko Jednoduchá matematika a pak zvolte tlačítko OK.
V Průzkumník řešení v části Odkazy si všimněte, že je zobrazen jednoduchý matematický odkaz. Rozbalte ji a všimněte si, že existuje složka \js\ , která obsahuje aritmetic.js. Můžete otevřít aritmetic.js a potvrdit, že byl váš zdrojový kód nainstalován.

Obsah souboru default.htm nahraďte následujícím kódem.

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

Obsah souboru \js\default.js nahraďte následujícím kódem.

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

Nahraďte obsah souboru \css\default.css tímto kódem:

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

Zvolte klávesu F5 pro sestavení a spuštění aplikace.
V uživatelském rozhraní aplikace zadejte libovolná dvě čísla, vyberte operaci a pak zvolte = tlačítko. Zobrazí se správný výsledek.

Vytvoření sady Software Development Kit

Sdílet prostřednictvím

Návod: Vytvoření sady SDK pomocí JavaScriptu

Požadavky

Vytvoření projektu sady SDK rozšíření SimpleMathVSIX

Vytvoření ukázkové aplikace, která používá sadu SDK

Další materiály

Sdílet prostřednictvím

Návod: Vytvoření sady SDK pomocí JavaScriptu

Požadavky

Vytvoření projektu sady SDK rozšíření SimpleMathVSIX

Vytvoření ukázkové aplikace, která používá sadu SDK

Související obsah

Další materiály