Tutorial: Creación de un SDK mediante JavaScript

En este tutorial se enseña a usar JavaScript para crear un SDK matemático sencillo como una extensión de Visual Studio (VSIX). El tutorial se divide en estas partes:

• Para crear el proyecto del SDK de extensión SimpleMathVSIX

• Para crear una aplicación de ejemplo que use el SDK

  Para JavaScript, no hay ningún tipo de proyecto de biblioteca de clases. En este tutorial, el archivo aritmetic.js de ejemplo se crea directamente en el proyecto VSIX. En la práctica, se recomienda compilar y probar primero los archivos JavaScript y CSS como una aplicación de la Tienda Windows(por ejemplo, mediante la plantilla Aplicación en blanco) antes de colocarlos en un proyecto VSIX.

Requisitos previos

Para seguir este tutorial, debe instalar SDK de Visual Studio. Para obtener más información, vea SDK de Visual Studio.

Para crear el proyecto del SDK de extensión SimpleMathVSIX

1. En la barra de menús, elija Archivo>Nuevo>Proyecto.

2. En la lista de categorías de plantillas, en Visual C#, seleccione Extensibilidad y, a continuación, seleccione la plantilla Proyecto VSIX.

3. En el cuadro de texto Nombre , especifique SimpleMathVSIX y elija el botón Aceptar .

4. Si aparece el Asistente para paquetes de Visual Studio, elija el botón Siguiente de la página principal y, después, en la página 1 de 7, elija el botón Finalizar .

   Aunque se abre el Diseñador de manifiestos, mantendremos este tutorial sencillo modificando el archivo de manifiesto directamente.

5. En Explorador de soluciones, abra el menú contextual del archivo source.extension.vsixmanifest y, a continuación, elija Ver código. Use este código para reemplazar el contenido existente en el archivo.

   <?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. En Explorador de soluciones, abra el menú contextual del proyecto SimpleMathVSIX y, a continuación, elija Agregar>nuevo elemento.

7. En la categoría Datos , seleccione Archivo XML, asigne un nombre al archivo SDKManifest.xmly elija el botón Agregar .

8. En Explorador de soluciones, abra el menú contextual del archivo SDKManifest.xml y, a continuación, elija Abrir para mostrar el archivo en el Editor XML.

9. Agregue el código siguiente al archivo 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. En Explorador de soluciones, en el menú contextual del archivo SDKManifest.xml, elija Propiedades.

11. En la ventana Propiedades, establezca la propiedad Include in VSIX en True.

12. En Explorador de soluciones, en el menú contextual del proyecto SimpleMathVSIX, elija Agregar>nueva carpeta y, a continuación, asigne el nombre a la carpeta Redist.

13. Agregue subcarpetas en Redist para crear esta estructura de carpetas:

    \Redist\CommonConfiguration\Neutral\SimpleMath\js\

14. En el menú contextual de la carpeta \js\ , elija Agregar>nuevo elemento.

15. En Elementos de Visual C#, seleccione la categoría Web y, a continuación, seleccione el elemento Archivo javaScript. Asigne al archivo el nombre arithmetic.jsy, a continuación, elija el botón Agregar .

16. Inserte el código siguiente en 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);
    
    

17. En Explorador de soluciones, en el menú contextual del archivo arithmetic.js, elija Propiedades. Realice estos cambios de propiedad:

    • Establezca la propiedad Include en VSIX en True.

    • Establezca la propiedad Copiar en directorio de salida en Copiar siempre.

18. En Explorador de soluciones, en el menú contextual del proyecto SimpleMathVSIX, elija Compilar.

19. Una vez completada correctamente la compilación, en el menú contextual del proyecto, elija Abrir carpeta en Explorador de archivos. Vaya a \bin\debug\y ejecute SimpleMathVSIX.vsix para instalarlo.

20. Elija el botón Instalar y deje que se complete la instalación.

21. Reinicie Visual Studio.

Para crear una aplicación de ejemplo que use el SDK

1. En la barra de menús, elija Archivo>Nuevo>Proyecto.

2. En la lista de categorías de plantillas, en JavaScript, seleccione Tienda Windows y, a continuación, seleccione la plantilla Aplicación en blanco.

3. En el cuadro Nombre , especifique ArithmeticUI. Elija el botón Aceptar .

4. En Explorador de soluciones, abra el menú contextual del proyecto ArithmeticUI y, a continuación, elija Agregar>referencia.

5. En Windows, elija Extensiones y observe que se muestra Simple Math .

6. Active la casilla Simple Math (Matemáticas simples) y, a continuación, elija el botón Aceptar .

7. En Explorador de soluciones, en Referencias, observe que se muestra la referencia matemática simple. Expándalo y observe que hay una carpeta \js\ que incluye aritmetic.js. Puede abrir aritmetic.js para confirmar que se instaló el código fuente.

8. Use el código siguiente para reemplazar el contenido 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. Use el código siguiente para reemplazar el contenido 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. Reemplace el contenido de \css\default.css por este código:

    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. Elija la tecla F5 para compilar y ejecutar la aplicación.

12. En la interfaz de usuario de la aplicación, escriba dos números, seleccione una operación y, a continuación, elija el = botón . Aparece el resultado correcto.

Contenido relacionado

• Creación de un kit de desarrollo de software