Procédure pas à pas : création d'un SDK à l'aide de JavaScript
Cette procédure pas - à - pas explique comment utiliser JavaScript pour créer une simple mathématique Kit de développement logiciel comme une extension Visual Studio (VSIX).La procédure pas - à - pas est divisée en ces parties :
Pour créer le projet d'extension Kit de développement logiciel de SimpleMathVSIX
Pour créer une application d'exemple qui utilise le Kit de développement logiciel
Pour JavaScript, il n'y a aucun type de projet de Bibliothèque de classes.Dans cette procédure pas - à - pas, le fichier de arithmetic.js est créé directement dans le projet VSIX.Dans la pratique, nous vous recommandons de générer d'abord et testons JavaScript et des fichiers CSS comme une mémoire windows Applications- pour l'exemple, à l'aide Application vide descripteur- avant vous les avez placé dans un projet VSIX.
Composants requis
Vous devez avoir Windows 8; professional, premium, ultimate ou d' Visual Studio 2012 ; et Kit de développement logiciel Visual Studio 2012 installé sur votre ordinateur.Vous pouvez télécharger le kit de développement Visual Studio Téléchargements de Visual Studio du site Web.
Pour créer le projet d'extension Kit de développement logiciel de SimpleMathVSIX
Dans la barre de menus, sélectionnez Fichier, Nouveau, Project.
Dans la liste de catégories de modèles, sous Visual C#, sélectionnez Extensibilité, puis sélectionnez le modèle Projet VSIX .
Dans la zone de texte Nom, spécifiez SimpleMathVSIX et choisissez le bouton OK .
Si Assistant Package Visual Studio Package s'affiche, cliquez sur le bouton Suivant sur la page Bienvenue, puis sur Page 1 à 7, choisissez le bouton Terminer .
Bien que Manifestez le concepteur s'ouvre, nous maintiendrons cette procédure pas - à - pas simple en modifiant le fichier manifeste directement.
Dans Explorateur de solutions, ouvrez le menu contextuel pour le 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="https://schemas.microsoft.com/developer/vsx-schema/2011" xmlns:d="https://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>Dans Explorateur de solutions, ouvrez le menu contextuel du projet de SimpleMathVSIX, puis choisissez Ajouter, Nouvel élément.
Dans la catégorie Données, sélectionnez Fichier XML, nommez le fichier SDKManifest.xml, puis choisissez le bouton Ajouter .
Dans Explorateur de solutions, ouvrez le menu contextuel du fichier de SDKManifest.xml, puis choisissez Ouvrir pour afficher le fichier dans Éditeur XML.
Ajoutez le code suivant au fichier de SDKManifest.xml.
<?xml version="1.0" encoding="utf-8" ?> <FileList DisplayName="Simple Math" MinVSVersion="11.0" AppliesTo="JavaScript+WindowsAppContainer" SupportsMultipleVersions="Error" MoreInfo="http://www.msdn.microsoft.com/"> <!-- JS --> <File Content="js\arithmetic.js" /> </FileList>Dans Explorateur de solutions, dans le menu contextuel du fichier de SDKManifest.xml, choisissez Propriétés.
Dans la fenêtre Propriétés, affectez à la propriété Incluez dans VSIX à True.
Dans Explorateur de solutions, dans le menu contextuel du projet de SimpleMathVSIX, choisissez Ajouter, Nouveau dossier, puis nommez le dossier Redist.
Ajoutez les sous-dossiers composants redistribuables pour créer cette structure de dossiers :
Redist\\ CommonConfiguration neutre SimpleMath\\\js
Dans le menu contextuel pour js\\ dossier, choisissez Ajouter, Nouvel élément.
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 .
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);Dans Explorateur de solutions, dans le menu contextuel pour le fichier d'arithmetic.js, choisissez Propriétés.Apportez à ceux-ci les modifications de propriété :
Affectez à la propriété Incluez dans VSIX à True.
Affectez à la propriété Copier dans le répertoire de sortie à Toujours copier.
Dans Explorateur de solutions, dans le menu contextuel du projet de SimpleMathVSIX, choisissez Build.
Une fois la génération terminée avec succès, dans le menu contextuel du projet, choisissez Ouvrir le dossier dans l'Explorateur de fichiers.Accédez au dossier\bin\debug \, puis exécutez SimpleMathVSIX.vsix pour l'installer.
Choisissez le bouton Installer et laissez l'installation terminée.
Redémarrez Visual Studio.
Pour créer une application d'exemple qui utilise le Kit de développement logiciel
Dans la barre de menus, sélectionnez Fichier, Nouveau, Projet.
Dans la liste de catégories de modèles, sous JavaScript, sélectionnez Windows Store, puis sélectionnez le modèle Application vide .
Dans la zone Nom, spécifiez ArithmeticUI.Cliquez sur le bouton OK.
Dans Explorateur de solutions, ouvrez le menu contextuel pour le projet d'ArithmeticUI, puis choisissez Ajouter une référence.
Sous Fenêtres, choisissez Extensions, et notez que Mathématique simple s'affiche.
Activez la case à cocher Mathématique simple puis choisissez le bouton OK .
Dans Explorateur de solutions, sous Références, notez que la référence Mathématique simple s'affiche.Développez l'et notez qu'il existe un js\\ dossier qui contient arithmetic.js.Vous pouvez ouvrir arithmetic.js pour confirmer que votre code source a été installé.
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>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(); })();Remplacez de contenu\\ 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; }Choisissez la touche F5 pour générer et exécuter l'application.
Dans l'interface utilisateur de l'application, tapez deux nombres quelconques, sélectionnez une opération, puis choisissez le bouton = .Le résultat correct s'affiche.