Plantilla personalizada de MVC

de Jacques Eloff

La versión de la actualización de herramientas de MVC 3 para Visual Studio 2010 introdujo un Asistente de proyecto independiente para proyectos de MVC. El cambio fue controlado por dos factores. En primer lugar, la introducción de nuevas plantillas en MVC 3 y la compatibilidad con motores de vista adicionales, como Razor, conducen a la saturación del cuadro de diálogo Nuevo proyecto en Visual Studio. En segundo lugar, los clientes han pedido puntos de extensibilidad y el nuevo Asistente para proyectos de MVC nos permitiría responder a estas solicitudes.

Agregar plantillas personalizadas era un proceso difícil que dependía del uso del registro para hacer que las plantillas nuevas fueran visibles para el Asistente para proyectos de MVC. El autor de una nueva plantilla tenía que encapsularla dentro de un MSI para asegurarse de que se crearan las entradas de registro necesarias en el momento de la instalación. La alternativa era crear un archivo ZIP que contuviera la plantilla y hacer que el usuario final creara a mano las entradas de registro necesarias.

Ninguno de los enfoques mencionados anteriormente es ideal, por lo que decidimos aprovechar parte de la infraestructura existente proporcionada por las extensiones VSIX para facilitar la creación, distribución e instalación de plantillas personalizadas de MVC a partir de MVC 4 para Visual Studio 2012. Algunas de las ventajas proporcionadas por este enfoque son:

  • Una extensión VSIX puede contener varias plantillas que admiten diferentes lenguajes (C# y Visual Basic) y varios motores de vista (ASPX y Razor).
  • Una extensión VSIX puede tener como destino varias SKU de Visual Studio, incluidas las SKU de Express.
  • La Galería de Visual Studio facilita la distribución de la extensión a un público amplio.
  • Las extensiones VSIX se pueden actualizar, lo que facilita la creación de correcciones y actualizaciones de las plantillas personalizadas.

Requisitos previos

  • Los usuarios deben estar familiarizados con la creación de plantillas de proyecto, incluido el marcado necesario para archivos vstemplate, etc.
  • Los usuarios deberán tener instalado Visual Studio Professional y versiones posteriores. Las SKU de Express no admiten la creación de proyectos VSIX.
  • SDK de Visual Studio 2012 instalado.

Ejemplo

El primer paso es crear un nuevo proyecto VSIX mediante C# o Visual Basic. Seleccione Archivo > Nuevo proyecto y, a continuación, haga clic en Extensibilidad en el panel izquierdo y seleccione el Proyecto VSIX.

New Project

Una vez creado el proyecto, se abrirá el diseñador VSIX.

Project Designer Metadata

El diseñador se puede usar para editar algunas de las propiedades generales de la extensión que se mostrarán a los usuarios cuando instalen la extensión o examinen las extensiones instaladas en Visual Studio (Herramientas > Extensiones y actualizaciones). Una vez que haya completado la información general, haga clic en la pestaña Instalar destinos.

Screenshot shows the Install Targets tab of Project Designer.

Esta pestaña se usa para especificar las SKU y las versiones de Visual Studio compatibles con la extensión. Active la casilla Este VSIX se instala para todos los usuarios para permitir la instalación del VSIX en cada máquina. Haga clic en el botón Nuevo de la derecha para agregar SKU adicionales, como Web Developer Express (VWD).

Add New Installation Target

Si piensa admitir todas las SKU de Professional y superiores (Professional, Premium y Ultimate), solo tiene que seleccionar la SKU mínima en la familia, Microsoft.VisualStudio.Pro. Recuerde guardar todos los cambios una vez que haya completado los destinos de instalación.

Screenshot shows the Install Targets tab of Project Designer with specified Identifiers and Version Ranges.

La pestaña Activos se usa para agregar todos los archivos de contenido al VSIX. Dado que MVC requiere metadatos personalizados, va a editar el XML sin formato del archivo de manifiesto VSIX en lugar de usar la pestaña Activos para agregar contenido. Empiece agregando el contenido de la plantilla al proyecto VSIX. Es importante que la estructura de la carpeta y el contenido reflejen el diseño del proyecto. El ejemplo siguiente contiene cuatro plantillas de proyecto derivadas de la plantilla de proyecto MVC básica. Asegúrese de que todos los archivos que componen la plantilla de proyecto (todo lo que se encuentra debajo de la carpeta ProjectTemplates) se agregan al grupo de elementos Content en el archivo de proyecto VSIX y que cada elemento contiene los metadatos CopyToOutputDirectory e IncludeInVsix establecidos como se muestra en el ejemplo siguiente.

<Content Include="ProjectTemplates\MyMvcWebApplicationProjectTemplate.csaspx\BasicWeb.config">

<CopyToOutputDirectory>Always</CopyToOutputDirectory>

<IncludeInVSIX>true</IncludeInVSIX>

</Content>

Si no es así, el IDE intentará compilar el contenido de la plantilla al compilar VSIX y probablemente verá un error. Los archivos de código de las plantillas suelen contener parámetros de plantilla especiales usados por Visual Studio cuando se crea una instancia de la plantilla de proyecto y, por lo tanto, no se pueden compilar en el IDE.

Solution Explorer

Cierre el diseñador VSIX y haga clic con el botón derecho en el archivo source.extension.manifest en Explorador de soluciones y seleccione Abrir con y elija la opción Editor XML (texto).

Open With Dialog

Cree un elemento <Activos> y agregue un elemento <Activos> para cada archivo que deba incluirse en el VSIX. El atributo Type de cada elemento <Asset> debe establecerse en Microsoft.VisualStudio.Mvc.Template. Se trata de un espacio de nombres personalizado que solo entiende el Asistente para proyectos de MVC. Consulte la documentación del esquema VSIX 2.0 para obtener información adicional sobre la estructura y el diseño del archivo de manifiesto.

Simplemente agregar los archivos a VSIX no es suficiente para registrar las plantillas con el Asistente de MVC. Debe proporcionar información como el nombre de la plantilla, la descripción, los motores de vista admitidos y el lenguaje de programación al Asistente de MVC. Esta información se transporta en atributos personalizados asociados al elemento <Activo> para cada archivo vstemplate.

<Asset d:VsixSubPath="ProjectTemplates\MyMvcWebApplicationProjectTemplate.csaspx"

Type="Microsoft.VisualStudio.Mvc.Template"

d:Source="File"

Path="ProjectTemplates\MyMvcWebApplicationProjectTemplate.csaspx\BasicMvcWebApplicationProjectTemplate.11.csaspx.vstemplate"

ProjectType="MVC"

Language="C#"

ViewEngine="Aspx"

TemplateId="MyMvcApplication"

Title="Custom Basic Web Application"

Description="A custom template derived from a Basic MVC web application (Razor)"

Version="4.0"/>

A continuación se muestra una explicación de los atributos personalizados que deben estar presentes:

  • ProjectType debe establecerse en MVC.
  • El lenguaje designa el lenguaje de desarrollo admitido por la plantilla. Los valores válidos son C# o VB.
  • ViewEngine designa el motor de vistas admitido por la plantilla, como Aspx o Razor. Puede especificar un valor personalizado para este campo.
  • TemplateId se usa para agrupar las plantillas. Si el valor coincide con un identificador de plantilla existente, se reemplazarán las plantillas registradas anteriormente con el Asistente de MVC.
  • Title designa la descripción breve que se muestra en el Asistente de MVC debajo de cada plantilla de proyecto.
  • Descripción designa una descripción más detallada de la plantilla.

Una vez que haya agregado todos los archivos al manifiesto y lo haya guardado, observará que la pestaña Activos del diseñador mostrará todos los archivos, pero no los atributos personalizados que haya añadido a los elementos <Activos> para los archivos vstemplate.

Project Designer Assets

Todo lo que queda ahora es compilar el proyecto VSIX e instalarlo.

Asegúrese de que todas las instancias de Visual Studio están cerradas en el equipo donde quiere probar la extensión VSIX. Visual Studio examina las nuevas extensiones durante el inicio, por lo que si el IDE está abierto al instalar un VSIX, deberá reiniciar Visual Studio. En el Explorador, haga doble clic en el archivo VSIX para iniciar el instalador de VSIX, haga clic en Instalar y, a continuación, inicie Visual Studio.

VSIX Installer

En el menú, seleccione Herramientas> Extensiones y Actualizaciones para confirmar que se ha instalado su extensión. Si el instalador de VSIX notificó errores durante la instalación de la extensión, puede ver el registro del instalador de VSIX para obtener más información. Normalmente, el registro se crea en la carpeta %temp% del usuario que instaló la extensión, por ejemplo C:\Users\Bob\AppData\Local\Temp.

Extensions and Updates

Después de cerrar la ventana, puede crear un proyecto de MVC 4 para ver si las nuevas plantillas se muestran en el Asistente de MVC.

New ASP.NET MVC 4 Project

Limitaciones

  1. El Asistente de MVC no admite plantillas personalizadas localizadas.
  2. El Asistente no notificará ningún error si no encuentra plantillas personalizadas. Si alguno de los atributos personalizados necesarios no está presente, la plantilla simplemente se excluiría del Asistente.