Panduan: Membuat SDK menggunakan JavaScript

2025-06-12

Panduan ini mengajarkan cara menggunakan JavaScript untuk membuat SDK matematika sederhana sebagai Ekstensi Visual Studio (VSIX). Panduan dibagi menjadi bagian-bagian ini:

Untuk membuat proyek SDK ekstensi SimpleMathVSIX
Untuk membuat aplikasi sampel yang menggunakan SDK

Untuk JavaScript, tidak ada jenis proyek pustaka kelas. Dalam panduan ini, sampel file aritmetic.js dibuat langsung dalam proyek VSIX. Dalam praktiknya, sebaiknya Anda terlebih dahulu membuat dan menguji file JavaScript dan CSS sebagai aplikasi Windows Store—misalnya, dengan menggunakan templat Aplikasi Kosong—sebelum Anda memasukkannya ke dalam proyek VSIX.

Prasyarat

Untuk mengikuti panduan ini, Anda harus menginstal Visual Studio SDK. Untuk informasi selengkapnya, lihat Visual Studio SDK.

Untuk membuat proyek SDK ekstensi SimpleMathVSIX

Dari bilah menu, pilih File>New>Project.
Dalam daftar kategori templat, di bawah Visual C#, pilih Ekstensibilitas, lalu pilih templat Proyek VSIX.
Dalam kotak teks Nama , tentukan SimpleMathVSIX dan pilih tombol OK .
Jika Wizard Paket Visual Studio muncul, pilih tombol Berikutnya di halaman Selamat Datang, lalu pada Halaman 1 dari 7, pilih tombol Selesai.

Meskipun Perancang Manifes terbuka, kami akan menjaga panduan ini tetap sederhana dengan memodifikasi file manifes secara langsung.

Di Penjelajah Solusi, buka menu pintasan untuk file source.extension.vsixmanifest, lalu pilih Tampilkan Kode. Gunakan kode ini untuk menggantikan isi yang ada dalam file.

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

Di Penjelajah Solusi, buka menu pintasan untuk proyek SimpleMathVSIX, lalu pilih Tambahkan>Item Baru.
Dalam kategori Data, pilih file XML, beri nama file SDKManifest.xml, dan pilih tombol Tambahkan.
Di Penjelajah Solusi, buka menu pintasan untuk file SDKManifest.xml, lalu pilih Buka untuk menampilkan file di Editor XML.

Tambahkan kode berikut ke file 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>

Di Penjelajah Solusi, pada menu pintasan untuk file SDKManifest.xml, pilih Properti.
Di jendela Properti , atur properti Sertakan di VSIX ke True.
Di Penjelajah Solusi, pada menu pintasan untuk proyek SimpleMathVSIX, pilih Tambahkan>Folder Baru, lalu beri nama folder .Redist
Tambahkan subfolder di bawah Redist untuk membuat struktur folder ini:

\Redist\CommonConfiguration\Neutral\SimpleMath\js\
Pada menu pintasan untuk folder \js\, pilih Tambahkan>Item Baru.
Di bawah Item Visual C#, pilih kategori Web , lalu pilih item File JavaScript. Beri nama file arithmetic.js, lalu pilih tombol Tambahkan .

Sisipkan kode berikut ke dalam 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);

Di Penjelajah Solusi, pada menu pintasan untuk file aritmetic.js, pilih Properti. Buat perubahan properti ini:
- Atur properti Sertakan di VSIX ke True.
- Atur properti Salin ke Direktori Output ke Salin Selalu.
Di Penjelajah Solusi, pada menu pintasan untuk proyek SimpleMathVSIX, pilih Bangun.
Setelah build berhasil diselesaikan, pada menu pintasan untuk proyek, pilih Buka Folder di File Explorer. Navigasi ke \bin\debug\, dan jalankan SimpleMathVSIX.vsix untuk menginstalnya.
Pilih tombol Instal dan biarkan penginstalan selesai.
Mulai Visual Studio.

Untuk membuat aplikasi sampel yang menggunakan SDK

Dari bilah menu, pilih File>New>Project.
Dalam daftar kategori templat, di bawah JavaScript, pilih Bursa Windows, lalu pilih templat Aplikasi Kosong.
Dalam kotak Nama , tentukan ArithmeticUI. Pilih tombol OK.
Di Penjelajah Solusi, buka menu pintasan untuk proyek AritmeticUI, lalu pilih Tambahkan>Referensi.
Di bawah Windows, pilih Ekstensi, dan perhatikan bahwa Matematika Sederhana ditampilkan.
Pilih kotak centang Matematika Sederhana lalu pilih tombol OK .
Di Penjelajah Solusi, di bawah Referensi, perhatikan bahwa referensi Matematika Sederhana ditampilkan. Perluas dan perhatikan bahwa ada folder \js\ yang menyertakan aritmetic.js. Anda dapat membuka aritmetic.js untuk mengonfirmasi bahwa kode sumber Anda telah diinstal.

Gunakan kode berikut untuk mengganti konten 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>

Gunakan kode berikut untuk mengganti konten \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();
})();

Ganti isi \css\default.css dengan kode ini:

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

Pilih kunci F5 untuk membuat dan menjalankan aplikasi.
Di antarmuka pengguna aplikasi, masukkan dua angka apa pun, pilih operasi, lalu pilih tombol = . Hasil yang benar muncul.

Membuat Kit Pengembangan Perangkat Lunak

Bagikan melalui

Panduan: Membuat SDK menggunakan JavaScript

Prasyarat

Untuk membuat proyek SDK ekstensi SimpleMathVSIX

Untuk membuat aplikasi sampel yang menggunakan SDK

Konten terkait

Sumber Daya Tambahan: