Procédure pas à pas : Créer un kit SDK à l’aide de JavaScript

Cette procédure pas à pas explique comment utiliser JavaScript pour créer un Kit de développement logiciel (SDK) mathématique simple en tant qu’extension Visual Studio (VSIX). La procédure pas à pas est divisée en parties suivantes :

• Pour créer le projet SDK d’extension SimpleMathVSIX

• Pour créer un exemple d’application qui utilise le Kit de développement logiciel (SDK)

  Pour JavaScript, il n’existe aucun type de projet de bibliothèque de classes. Dans cette procédure pas à pas, l’exemple de fichier arithmétique.js est créé directement dans le projet VSIX. Dans la pratique, nous vous recommandons de créer et de tester d’abord les fichiers JavaScript et CSS en tant qu’application du Windows Store( par exemple, à l’aide du modèle d’application vide) avant de les placer dans un projet VSIX.

Prérequis

Pour suivre cette procédure pas à pas, vous devez installer le Kit de développement logiciel (SDK) Visual Studio. Pour plus d'informations, consultez SDK Visual Studio.

Pour créer le projet SDK d’extension SimpleMathVSIX

1. Dans la barre de menus, choisissez Fichier>Nouveau>Projet.

2. Dans la liste des catégories de modèles, sous Visual C#, sélectionnez Extensibilité, puis sélectionnez le modèle de projet VSIX.

3. Dans la zone de texte Nom , spécifiez SimpleMathVSIX et choisissez le bouton OK .

4. Si l’Assistant Package Visual Studio s’affiche, cliquez sur le bouton Suivant sur la page d’accueil, puis sur la page 1 sur 7, choisissez le bouton Terminer.

   Bien que le Concepteur de manifeste s’ouvre, nous allons simplifier cette procédure pas à pas en modifiant directement le fichier manifeste.

5. Dans Explorateur de solutions, ouvrez le menu contextuel du fichier source.extension.vsixmanifest, puis choisissez Afficher le code. Utilisez ce code pour remplacer le contenu existant dans le fichier.

   <?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. Dans Explorateur de solutions, ouvrez le menu contextuel du projet SimpleMathVSIX, puis choisissez Ajouter>un nouvel élément.

7. Dans la catégorie Données , sélectionnez fichier XML, nommez le fichier SDKManifest.xml, puis choisissez le bouton Ajouter .

8. Dans Explorateur de solutions, ouvrez le menu contextuel du fichier SDKManifest.xml, puis choisissez Ouvrir pour afficher le fichier dans l’éditeur XML.

9. Ajoutez le code suivant au fichier 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>
   
   

10. Dans Explorateur de solutions, dans le menu contextuel du fichier SDKManifest.xml, choisissez Propriétés.

11. Dans la fenêtre Propriétés , définissez la propriété Include dans VSIX sur True.

12. Dans Explorateur de solutions, dans le menu contextuel du projet SimpleMathVSIX, choisissez Ajouter>un nouveau dossier, puis nommez le dossierRedist.

13. Ajoutez des sous-dossiers sous Redist pour créer cette structure de dossiers :

    \Redist\CommonConfiguration\Neutral\SimpleMath\js\

14. Dans le menu contextuel du dossier \js\ , choisissez Ajouter un>nouvel élément.

15. Sous Éléments Visual C#, sélectionnez la catégorie Web , puis sélectionnez l’élément Fichier JavaScript. Nommez le fichier arithmetic.js, puis choisissez le bouton Ajouter .

16. Insérez le code suivant dans 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);
    
    

17. Dans Explorateur de solutions, dans le menu contextuel du fichier arithmétique.js, choisissez Propriétés. Apportez ces modifications de propriété :

    • Définissez la propriété Include dans VSIX sur True.

    • Définissez la propriété Copy to Output Directory sur Copy Always.

18. Dans Explorateur de solutions, dans le menu contextuel du projet SimpleMathVSIX, choisissez Générer.

19. Une fois la build terminée, dans le menu contextuel du projet, choisissez Ouvrir le dossier dans Explorateur de fichiers. Accédez à \bin\debug\, puis exécutez-le SimpleMathVSIX.vsix pour l’installer.

20. Choisissez le bouton Installer et laissez l’installation terminée.

21. Démarrez Visual Studio.

Pour créer un exemple d’application qui utilise le Kit de développement logiciel (SDK)

1. Dans la barre de menus, choisissez Fichier>Nouveau>Projet.

2. Dans la liste des catégories de modèles, sous JavaScript, sélectionnez Windows Store, puis sélectionnez le modèle d’application vide.

3. Dans la zone Nom , spécifiez ArithmeticUI. Cliquez sur le bouton OK.

4. Dans Explorateur de solutions, ouvrez le menu contextuel du projet arithmétiqueUI, puis choisissez Ajouter>une référence.

5. Sous Windows, choisissez Extensions et notez que les mathématiques simples sont affichées.

6. Sélectionnez la zone Case activée mathématiques simples, puis cliquez sur le bouton OK.

7. Dans Explorateur de solutions, sous Références, notez que la référence mathématique simple est affichée. Développez-le et notez qu’il existe un dossier \js\ qui inclut l’arithmétique.js. Vous pouvez ouvrir arithmetic.js pour vérifier que votre code source a été installé.

8. Utilisez le code suivant pour remplacer le contenu de 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>
   

9. Utilisez le code suivant pour remplacer le contenu de \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();
   })();
   

10. Remplacez le contenu de \css\default.css par ce 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. Choisissez la clé F5 pour générer et exécuter l’application.

12. Dans l’interface utilisateur de l’application, entrez deux nombres, sélectionnez une opération, puis choisissez le = bouton. Le résultat correct s’affiche.

Contenu connexe

• Créer un kit de développement logiciel