Friday, August 6, 2010

Packing and Deploying Custom Templates in Visual Studio.

Packing and Deploying Custom Templates in Visual Studio.

Once you have created your own template (Creating project templates for Visual Studio) its time for its distribution.
To make the template appear into the “New Project” window it is important to place the zip file of the template to correct location. This can be done manually and through .vsi (Visual Studio Installer) file. Also .vsi file will be helpful for distribution of your template to different community or users.

To create the .vsi file for your template follow the below steps
1)Create a file in the project folder with .vscontent extension having the below code

[sourcecode language="html"]

<VSContent xmlns="http://schemas.microsoft.com/developer/vscontent/2005">
<Content>
<FileName>MyFirstWebProjectTemplate.zip</FileName>
<DisplayName>My First Web Project Template</DisplayName>
<Description>A project template created for this example.</Description>
<FileContentType>VSTemplate</FileContentType>
<ContentVersion>1.0</ContentVersion>
<Attributes>
<Attribute name="ProjectType" value="Visual C#"/>
<Attribute name="ProjectSubType" value="CSharp"/>
<Attribute name="TemplateType" value="Project"/>
</Attributes>
</Content>
</VSContent>

[/sourcecode]

File Name: Name of the file that needs to be deployed. Here it is our custom template zip file.

DisplayName: Name that appears in the deployment wizard

Description: Small description regarding the component that is being deployed. It appears as tooltip for the Display Name

FileContentType: Type of the file being deployed. It can be Toolbox Control, Code Snippet, VSTemplate etc.

ContentVersion: Version of the content being deployed. Let be 1.0

ProjectType: Type of the project. It can be Visual Basic, Visaul C#, Visual J# etc

ProjectSubType: Type of subcategory to which the template would be placed. It can be CSharp, JSharp, Visual Basic etc

TemplateType: Type of the template that is being deployed. It can be Project, Item.

2)Select all the files to be included in your template (including the .vscontent file) and compress it to prepare a standard zip file. In above case it will produce MyFirstWebProjectTemplate.zip.

3)Rename the extension of the .zip file to .vsi.

Alternate Approach

1)Select all the files to be included in your template (including the .vstemplate file) and compress it to prepare a standard zip file.

2)Create a file in the project folder with .vscontent extension as shown in the above scenario

3)Select the zip file created in step 1 and .vscontent file created in step 2. Right click and click “Add to archive”. In the Archive name give MyTemplate.vsi and zip it. It will create a new MyTemplate.vsi file.

That’s it distribute the .vsi file.

Note: In order to avoid the “No Signature Found” warning and to display the publisher information into the .vsi package you must sign your .vsi file

[sourcecode language="html"]

<VSTemplate Version="2.0.0" xmlns="http://schemas.microsoft.com/developer/vstemplate/2005" Type="Project">
<TemplateData>
<Name>ASP.NET AJAX Control Project</Name>
<Description>Create new ASP.NET AJAX Control Extenders and Behaviors</Description>
<ProjectType>CSharp</ProjectType>
<SortOrder>1000</SortOrder>
<CreateNewFolder>true</CreateNewFolder>
<DefaultName>AjaxControlExtender</DefaultName>
<ProvideDefaultName>true</ProvideDefaultName>
<LocationField>Enabled</LocationField>
<EnableLocationBrowseButton>true</EnableLocationBrowseButton>
<Icon>__TemplateIcon.ico</Icon>
</TemplateData>
<TemplateContent>
<CustomParameters>
<CustomParameter Name="$baseitemname$" Value="$safeprojectname$"/>
<CustomParameter Name="$rootnamespace$" Value="$safeprojectname$"/>
</CustomParameters>
<Project TargetFileName="AjaxControlExtender.csproj" File="AjaxControlExtender.csproj" ReplaceParameters="true">
<ProjectItem TargetFileName="$safeprojectname$Behavior.js" ReplaceParameters="true">Behavior.js</ProjectItem>
<ProjectItem TargetFileName="$safeprojectname$Extender.cs" ReplaceParameters="true">Extender.cs</ProjectItem>
<ProjectItem TargetFileName="$safeprojectname$Designer.cs" ReplaceParameters="true">Designer.cs</ProjectItem>
<Folder Name="bin" TargetFolderName="bin">
<ProjectItem>AjaxControlToolkit.dll</ProjectItem>
</Folder>
</Project>
</TemplateContent>
</VSTemplate>

<VSTemplate Version="2.0.0" Type="Project" xmlns="http://schemas.microsoft.com/developer/vstemplate/2005">
<TemplateData>
<Name>MyFirstWebProjectTemplate</Name>
<Description>A simple Web template</Description>
<Icon>icon.ico</Icon>
<ProjectType>Web</ProjectType>
<ProjectSubType>CSharp</ProjectSubType>
<DefaultName>WebSite</DefaultName>
</TemplateData>
<TemplateContent>
<Project File="MyFirstWebProjectTemplate.webproj" TargetFileName="MyFirstWebProjectTemplate.webproj">
<ProjectItem>web.config</ProjectItem>
<ProjectItem OpenInEditor="true">Default.aspx</ProjectItem>
<ProjectItem>Default.aspx.cs</ProjectItem>
<Folder Name="App_Code" TargetFolderName="App_Code">
<Folder Name="BAL" TargetFolderName="BAL">
</Folder>
<Folder Name="DAL" TargetFolderName="DAL">
<ProjectItem>DataAccess.cs</ProjectItem>
</Folder>
</Folder>
<Folder Name="App_Data" TargetFolderName="App_Data">
</Folder>
</Project>
</TemplateContent>
</VSTemplate>

[/sourcecode]

Creating project templates for Visual Studio

Creating project templates for Visual Studio

Reusability though heard thousands of times, ranges from a small code snippet to the entire enterprise level framework. This article will demonstrate the word reusable in terms of – Reusing the company framework or code through a fantastic feature of Visual Studio called Templates.

Templates

A group of packaged files that help to accelerate the development process by eliminating the need to start the project from scratch. Templates are divided into two parts

Project Templates : This category appears into “New Project” dialog box when one is starting a fresh new project. It is further divided into Project Templates and Website Templates.

Item Templates : This category appears into “Add Item” dialog box when one wants to add a new item to the project.

Ways to create template: There are two ways in which one can create the desired template manually or by using the export template wizard of Visual Studio.

I will stick to the process of manually creating a Website Template.
Steps to create a new website template.
1)Create a new Web site.

2)Prepare the framework (files to be included in your website template)

3)Create a file with .vstemplate as extension in the same directory of your project.

4)Alter the .vstemplate file to provide template metadata as given below.

[sourcecode language="html"]

<VSTemplate Version="2.0.0" Type="Project" xmlns="http://schemas.microsoft.com/developer/vstemplate/2005">
<TemplateData>
<Name>MyFirstWebProjectTemplate</Name>
<Description>A simple Web template</Description>
<Icon>icon.ico</Icon>
<ProjectType>Web</ProjectType>
<ProjectSubType>CSharp</ProjectSubType>
<DefaultName>WebSite</DefaultName>
</TemplateData>
<TemplateContent>
<Project File="MyFirstWebProjectTemplate.webproj" TargetFileName="MyFirstWebProjectTemplate.webproj">
<ProjectItem>web.config</ProjectItem>
<ProjectItem OpenInEditor="true">Default.aspx</ProjectItem>
<ProjectItem>Default.aspx.cs</ProjectItem>
<Folder Name="App_Code" TargetFolderName="App_Code">
<Folder Name="BAL" TargetFolderName="BAL">
</Folder>
<Folder Name="DAL" TargetFolderName="DAL">
<ProjectItem>DataAccess.cs</ProjectItem>
</Folder>
</Folder>
<Folder Name="App_Data" TargetFolderName="App_Data">
</Folder>
</Project>
</TemplateContent>
</VSTemplate>

[/sourcecode]

The above vstemplate XML file includes three major sections

VSTemplate: Identifies the template as a project or item template and provides the template version number

Template Data: Includes all the metadata that defines the display characteristics related to the Add New Website Screen.

Name: Name of the template that appear under the My Template section

Description: Small description that is depicted in the status bar of the New website screen.

Icon: Name of the Icon file that is shown as the preview icon for the newly created template.

Project Type: Type of the project template. This is one of the main attributes as it decides under which section the template will appear. Specifically mention “Web” for creating web site project template.

Project Sub Type: Type of the language for the template. It can be CSharp, VisualBasic, JSharp etc.

DefaultName: The default name of the website

Template Content: Includes the definition for all the files and folder structure that would be created when the template is imported.

Project File: This is the name of the project file that is used internally by visual studio to refer files while extracting the template. So incase of project template it will be the name of the projet file Eg “MyFirstWebProjectTemplate.csproj”
As website donot produce project files just create a file with .webproj extension Eg MyFirstWebProjectTemplate.webproj

ProjectItem: This attributes includes all the files that need to be extracted.

Folder: Used to organize files into specific folder structure just incase. In the above example template will create App_Code foler, BAL and DAL folder under App_Code folder and place DataAccess.cs file into DAL folder.

5)Now navigate to the project folder. Select all the files to be included in your template (including the .vstemplate file) and compress it to prepare a standard zip file. In above case it will produce MyFirstWebProjectTemplate.zip.

6)Now simply move the zip file to My Documents\Visual Studio 2005\Templates\ProjectTemplates folder.

7)To validate Open Visual Studio and goto File >> New >> Website. The newly created template will appear into My Templates section of the “New Website Screen”. That’s it you have created your own first template.

Conclusion
To save time with scratch projects prepare template with a framework including UI aspects like Basic Layout(Login.aspx,DefaultMaster.aspx, etc), Architectural aspects like Authentication,Authorization,Security,Utility classes etc
and save your time and money.

Templates can be used locally as well as can be distributed to others users. To prepare a .vsi deployment package for your template refer

Packing and Deploying Custom Templates in Visual Studio.

Note: Though the template creation seems to be easy but in reality its not. Above was the simplest type of the template that we have created. Visual Studio has great amount of flexibility to produce different types of templates like, project templates, website templates (the one above), item templates and wizard base templates.