Procedura dettagliata: Creare un SDK con JavaScript

Articolo
10/10/2023

Questa procedura dettagliata illustra come usare JavaScript per creare un SDK matematico semplice come estensione di Visual Studio (VSIX). La procedura dettagliata è suddivisa in queste parti:

Per creare il progetto SDK dell'estensione SimpleMathVSIX
Per creare un'app di esempio che usa l'SDK

Per JavaScript, non esiste alcun tipo di progetto della libreria di classi. In questa procedura dettagliata il file aritmetic.js di esempio viene creato direttamente nel progetto VSIX. In pratica, ti consigliamo di compilare e testare prima i file JavaScript e CSS come app di Windows Store, ad esempio usando il modello App vuota, prima di inserirli in un progetto VSIX.

Prerequisiti

Per seguire questa procedura dettagliata, è necessario installare Visual Studio SDK. Per altre informazioni, vedere Visual Studio SDK.

Per creare il progetto SDK dell'estensione SimpleMathVSIX

Nella barra dei menu scegliere File>Nuovo>Progetto.
Nell'elenco delle categorie di modelli, in Visual C#, selezionare Estendibilità e quindi selezionare il modello progetto VSIX.
Nella casella di testo Nome specificare SimpleMathVSIX e scegliere il pulsante OK .
Se viene visualizzata la Creazione guidata pacchetto di Visual Studio, scegliere il pulsante Avanti nella pagina iniziale e quindi nella pagina 1 di 7 scegliere il pulsante Fine.

Anche se si apre Progettazione manifesto , questa procedura dettagliata verrà semplificata modificando direttamente il file manifesto.

In Esplora soluzioni aprire il menu di scelta rapida per il file source.extension.vsixmanifest e quindi scegliere Visualizza codice. Usare questo codice per sostituire il contenuto esistente nel 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>

In Esplora soluzioni aprire il menu di scelta rapida per il progetto SimpleMathVSIX e quindi scegliere Aggiungi>nuovo elemento.
Nella categoria Dati selezionare File XML, assegnare al file SDKManifest.xmlil nome e scegliere il pulsante Aggiungi.
In Esplora soluzioni aprire il menu di scelta rapida per il file SDKManifest.xml e quindi scegliere Apri per visualizzare il file nell'editor XML.

Aggiungere il codice seguente al 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>

In Esplora soluzioni scegliere Proprietà dal menu di scelta rapida per il file SDKManifest.xml.
Nella finestra Proprietà impostare la proprietà Includi in VSIX su True.
In Esplora soluzioni scegliere Aggiungi>nuova cartella dal menu di scelta rapida per il progetto SimpleMathVSIX e quindi denominare la cartella .Redist
Aggiungere sottocartelle in Redist per creare questa struttura di cartelle:

\Redist\CommonConfiguration\Neutral\SimpleMath\js\
Nel menu di scelta rapida per la cartella \js\ scegliere Aggiungi>nuovo elemento.
In Elementi di Visual C# selezionare la categoria Web e quindi selezionare l'elemento File JavaScript. Assegnare al file il nome arithmetic.jse quindi scegliere il pulsante Aggiungi .

Inserire il codice seguente in aritmetic.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);

In Esplora soluzioni scegliere Proprietà dal menu di scelta rapida per il file aritmetico.js. Apportare queste modifiche alle proprietà:
- Impostare la proprietà Include in VSIX su True.
- Impostare la proprietà Copia nella directory di output su Copia sempre.
In Esplora soluzioni scegliere Compila dal menu di scelta rapida per il progetto SimpleMathVSIX.
Al termine della compilazione, scegliere Apri cartella nel menu di scelta rapida del progetto Esplora file. Passare a \bin\debug\ed eseguire SimpleMathVSIX.vsix per installarlo.
Scegliere il pulsante Installa e lasciare che l'installazione venga completata.
Riavviare Visual Studio.

Per creare un'app di esempio che usa l'SDK

Nella barra dei menu scegliere File>Nuovo>Progetto.
Nell'elenco delle categorie di modelli, in JavaScript selezionare Windows Store e quindi selezionare il modello App vuota.
Nella casella Nome specificare ArithmeticUI. Scegli il pulsante OK.
In Esplora soluzioni aprire il menu di scelta rapida per il progetto AritmeticUI e quindi scegliere Aggiungi>riferimento.
In Windows scegliere Estensioni e notare che viene visualizzato Simple Math (Matematica semplice).
Selezionare la casella di controllo Simple Math (Matematica semplice ) e quindi scegliere il pulsante OK .
In Esplora soluzioni, in Riferimenti si noti che viene visualizzato il riferimento matematico semplice. Espanderlo e notare che è presente una cartella \js\ che include aritmetica.js. È possibile aprire aritmetic.js per verificare che il codice sorgente sia stato installato.

Utilizzare il codice seguente per sostituire il contenuto di 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>

Usare il codice seguente per sostituire il contenuto di \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();
})();

Sostituire il contenuto di \css\default.css con questo codice:

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

Scegliere il tasto F5 per compilare ed eseguire l'app.
Nell'interfaccia utente dell'app immettere due numeri, selezionare un'operazione e quindi scegliere il = pulsante. Viene visualizzato il risultato corretto.

Creare un Software Development Kit

Condividi tramite

Procedura dettagliata: Creare un SDK con JavaScript

Prerequisiti

Per creare il progetto SDK dell'estensione SimpleMathVSIX

Per creare un'app di esempio che usa l'SDK

Risorse aggiuntive

Condividi tramite

Procedura dettagliata: Creare un SDK con JavaScript

Prerequisiti

Per creare il progetto SDK dell'estensione SimpleMathVSIX

Per creare un'app di esempio che usa l'SDK

Contenuto correlato

Risorse aggiuntive