İzlenecek yol: JavaScript kullanarak SDK oluşturma

Bu kılavuzda Visual Studio Uzantısı (VSIX) olarak basit bir matematik SDK'sı oluşturmak için JavaScript'in nasıl kullanılacağı öğretilmektedir. İzlenecek yol şu bölümlere ayrılmıştır:

SimpleMathVSIX uzantı SDK'sı projesini oluşturmak için
SDK kullanan örnek bir uygulama oluşturmak için

JavaScript için sınıf kitaplığı proje türü yoktur. Bu kılavuzda örnek arithmetic.js dosyası doğrudan VSIX projesinde oluşturulur. Pratikte, JavaScript ve CSS dosyalarını vsIX projesine yerleştirmeden önce bir Windows Mağazası uygulaması olarak (örneğin, Boş Uygulama şablonunu kullanarak) derlemenizi ve test etmenizi öneririz.

Önkoşullar

Bu kılavuzu izlemek için Visual Studio SDK'sını yüklemeniz gerekir. Daha fazla bilgi için bkz . Visual Studio SDK'sı.

SimpleMathVSIX uzantı SDK'sı projesini oluşturmak için

Menü çubuğunda Dosya Yeni Proje'yi> seçin.>
Şablon kategorileri listesinde, Visual C# altında Genişletilebilirlik'i ve ardından VSIX Projesi şablonunu seçin.
Ad metin kutusunda Tamam düğmesini belirtin SimpleMathVSIX ve seçin.
Visual Studio Paket Sihirbazı görüntülenirse, Hoş Geldiniz sayfasında İleri düğmesini seçin ve ardından Sayfa 1 /7'de Son düğmesini seçin.

Bildirim Tasarım Aracı açsa da bildirim dosyasını doğrudan değiştirerek bu kılavuzu basit tutacağız.

Çözüm Gezgini source.extension.vsixmanifest dosyasının kısayol menüsünü açın ve kodu görüntüle'yi seçin. Dosyadaki mevcut içeriği değiştirmek için bu kodu kullanın.

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

Çözüm Gezgini SimpleMathVSIX projesinin kısayol menüsünü açın ve ardından Yeni Öğe Ekle'yi>seçin.
Veri kategorisinde XML dosyası'nı seçin, dosyayı SDKManifest.xmladlandırın ve Ekle düğmesini seçin.
Çözüm Gezgini,SDKManifest.xml dosyasının kısayol menüsünü açın ve dosyayı XML Düzenleyicisi'nde görüntülemek için Aç'ı seçin.

AŞAĞıDAKI kodu SDKManifest.xml dosyasına ekleyin.

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

Çözüm Gezgini,SDKManifest.xml dosyasının kısayol menüsünde Özellikler'i seçin.
Özellikler penceresinde VSIX'e Ekle özelliğini True olarak ayarlayın.
Çözüm Gezgini'da SimpleMathVSIX projesinin kısayol menüsünde Yeni Klasör Ekle'yi>seçin ve klasörü Redistolarak adlandırın.
Bu klasör yapısını oluşturmak için Redist'in altına alt klasörler ekleyin:

\Redist\CommonConfiguration\Neutral\SimpleMath\js\
\js\ klasörünün kısayol menüsünde Yeni Öğe Ekle'yi>seçin.
Visual C# öğeleri'nin altında Web kategorisini ve ardından JavaScript Dosyası öğesini seçin. Dosyayı arithmetic.jsolarak adlandırın ve ekle düğmesini seçin.

Arithmetic.js dosyasına aşağıdaki kodu ekleyin:

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

Çözüm Gezgini'da, arithmetic.js dosyasının kısayol menüsünde Özellikler'i seçin. Şu özellik değişikliklerini yapın:
- VSIX'e Ekle özelliğini True olarak ayarlayın.
- Çıkış Dizinine Kopyala özelliğini Her Zaman Kopyala olarak ayarlayın.
Çözüm Gezgini,SimpleMathVSIX projesinin kısayol menüsünde Oluştur'u seçin.
Derleme başarıyla tamamlandıktan sonra, projenin kısayol menüsünde Klasörü Dosya Gezgini Aç'ı seçin. \bin\debug\ adresine gidin ve komutunu çalıştırarak SimpleMathVSIX.vsix yükleyin.
Yükle düğmesini seçin ve yüklemenin tamamlanmasını sağlayın.
Visual Studio’yu yeniden başlatın.

SDK kullanan örnek bir uygulama oluşturmak için

Menü çubuğunda Dosya Yeni Proje'yi> seçin.>
Şablon kategorileri listesinde, JavaScript'in altında Windows Mağazası'nı ve ardından Boş Uygulama şablonunu seçin.
Ad kutusunda belirtinArithmeticUI. Tamam düğmesini seçin.
Çözüm Gezgini'de AritmeticUI projesinin kısayol menüsünü açın ve ardından Başvuru Ekle'yi>seçin.
Windows'un altında Uzantılar'ı seçin ve Basit Matematik'in görüntülendiğine dikkat edin.
Basit Matematik onay kutusunu seçin ve ardından Tamam düğmesini seçin.
Çözüm Gezgini'da, Başvurular'ın altında Basit Matematik başvurusunun görüntülendiğine dikkat edin. Genişletin ve aritmetik.js içeren bir \js\ klasörü olduğuna dikkat edin. Kaynak kodunuzun yüklendiğini onaylamak için arithmetic.js dosyasını açabilirsiniz.

default.htm dosyasının içeriğini değiştirmek için aşağıdaki kodu kullanın.

<!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 içeriğini değiştirmek için aşağıdaki kodu kullanın.

(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 içeriğini şu kodla değiştirin:

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

Uygulamayı derlemek ve çalıştırmak için F5 anahtarını seçin.
Uygulama kullanıcı arabiriminde iki sayı girin, bir işlem seçin ve ardından düğmeyi = seçin. Doğru sonuç görüntülenir.

Yazılım Geliştirme Seti oluşturma

Last updated on 2025-12-12

İzlenecek yol: JavaScript kullanarak SDK oluşturma

Önkoşullar

SimpleMathVSIX uzantı SDK'sı projesini oluşturmak için

SDK kullanan örnek bir uygulama oluşturmak için

İlgili içerik

Ek kaynaklar