在 VS2010 中发布自定义的 Web 控件 第二部分

第一部分地址：http://www.cnblogs.com/haogj/archive/2010/06/16/1758936.html

在第一部分，我们已经学习了手工创建和发布一个自定义的 Web 控件扩展项目。但是，需要很多的步骤。现在，我们将创建一个扩展项目模版，可以使得我们发布到 Visual Studio Gellary中，任何希望创建和发布自定义 Web 控件的人都可以下载，然后安装这个模版，只要一步就可以创建项目。

在第二部分，你将会学习到如下的知识：

创建一个 VSIX 项目模版扩展
发布项目的模版到 Visual Studio Gallery
从 Visual Studio Gallery 中安装这个项目模版。
测试安装的模版
从  Visual Studio Gallery 中删除项目模版
为项目模版增加一个调试的动作

预备内容

要完成这个练习，你必须具备 Web 控件的知识，创建一个新的项目，设置项目的属性，使用 Visual Studio 调试，你还必须已经安装了 Visual Studio 2010 和 Visual Studio 2010 SDK，另外，你必须完成了第一部分。

创建和发布一个扩展的 Web 控件模版

为了创建一个扩展的 Web 控件模版，我们从第一步中创建的项目开始，因为这个项目已经包含了 ColorTextControl Web 控件，你可以使用模板创建一个简单的起点。

为了发布一个项目模版到 Visual Studio Gallery 中，你必须创建一个作为 VSIX 扩展的项目模版，并且要提供一个图标和一个屏幕的截图，最简单的方式莫过于使用 Export Template as VSIX 向导。

1. 打开 MyWebControls 项目
2. 使用 Extension Manager 从 Visual Studio Gallery 来下载 Export Template as VSIX ,这样当一个项目被打开的时候，File 菜单中将会增加一个 Export Template as VSIX  的菜单项目。
3. 安装之后，通过 File 菜单选择 Export Template as VSIX

4. 在  Choose Template Type 页面上，确认选中了  Project Template ，并且 MyWebControls.csproj 的复选框被选中。
5. 在  Select Template Options 页面上，将模版的名称 Template Name 设置为  Extensibility Color Text Web Toolbox Control ，模版的描述  Template Description 设置为 Color text web control project that produces a VSIX extension.
6. 选择图标，浏览并选择 Color.bmp 文件，
7. 选择预览效果，浏览并选择  ScreenShot.jpg.
8. 在 Select VSIX Options 页面，将产品的名称  Product Name 设置为  Extensibility Color Text Web Control Template
9. 修改公司的名字等等其他内容。

10. 取消对 Automatically import the template into Visual Studio 的选择，然后点击完成。

稍等一会， Windows 将会打开在 <Users>\My Documents\Visual Studio 2010\My Exported Templates 文件夹，生成的 VSIX 位于其中。

发布 Web 控件的模版项目 VSIX 文件

你现在已经准备好了发布的工作
1. 打开浏览器，导航到  Visual Studio Gallery

2. 在屏幕的右上角，点击 Sign in

3. 使用你的 Windows Live 账号登录，如果没有的话，就创建一个。
4. 在右上角，点击 Upload 按钮

5. 在 Step 1: Extension Type 扩展类型中选择 Control。继续
6. 在 Step 2: Upload 中选择  I would like to upload my control，然后 Select your control 出现。
7. 点击浏览按钮选择 <Users>\My Documents\Visual Studio 2010\My Exported Templates 文件夹下面的 MyWebControls.vsix  文件
8. 在 Step 3: Basic Information 中，你会在 Summary 中看到在清单文件中输入的信息
9. 将控件的分类 Category 设置为 ASP.NET，然后，Tags 中为 toolbox, Web Control，此时，你可以输入更加详细的描述。
10. 阅读并且同意 Contribution Agreement，继续

11.  此时还没有正式发布，点击  publish  正式发布。
12. 搜索一下  MyWebControls，应该出现如下的扩展。

 

安装 Web 控件项目模版

现在你的项目已经发布到 Visual Studio Gallery 中，我们现在安装并且测试一下。

1. 回到 Visual Studio

2. 从  Tools 菜单中选择 Extension Manager

3. 点击 Online Gallery，搜索上传的模版，看到 Extensibility Color Text Web Control Template

4. 点击下载 Download，下载完成之后点击 Install 进行安装，现在模版就安装到 Visual Studio 中了。

测试 Web 项目模版

现在你用不着再手工创建 Web 控件项目了，你可以使用  Extensibility Color Text Web Control 项目模版来创建了。

下面我们使用这个模版创建一个  BlueColorTextControl  Web 控件。

1.  创建一个新项目，在对话框的左边选择 Online Templates

2. 选择 ASP.NET 节点，在中间选择 Extensibility Color Text Web Control Template

3. 将名字设置为 MoreWebControls，确定

4. 将项目文件  ColorTextControl.cs 改为  BlueTextControl.cs

5. 在源代码窗口打开 BlueTextControl.cs

6. 在 ToolboxData  标签中，将 ColorTextControl  全部替换为 BlueColorTextControl

这样开始部分的代码应该如下：

 namespace MoreWebControls
2 {
3     [DefaultProperty("Text")]
4     [ToolboxData("<{0}:BlueColorTextControl runat=server></{0}:BlueColorTextControl>")]
5     [ProvideToolboxControl("MoreWebControls", false)]
6     public class BlueColorTextControl : WebControl
7     {

7. 修改 Text 属性的 get 方法为如下的效果

 get
2 {
3     String s = (String)ViewState["Text"];
4     return "<span style='color:blue'>“ + s + "</span>";
5 }

8.  编译项目。

测试 Web 控件

不要按 F5 启动另一个 Visual Studio 进行调试，相反，我们学习一下在项目模版中增加一个调试动作。

1. 通过 Windows 的开始菜单 Start/All Programs/Microsoft Visual Studio 2010 SDK/Tools/Start Experimental Instance of Microsoft Visual Studio 2010，找到 VS2010 SDK 的工具

2. 创建一个新的 Web 应用程序项目

3. 使用源代码视图打开 default.aspx

4. 打开工具箱，你应该在 MoreWebControls 中看到 BlueColorTextControl

5. 将这个控件拖到页面中

6. 为控件增加一个 Text 属性，内容为  Think Blue!

 <cc1:BlueColorTextControl ID="BlueColorTextControl1" Text="Think Blue!" runat="server" />

7.  按 F5 进行测试

8. 关闭  ASP.NET Development Server.

9. 关闭测试 Visual Studio

删除项目模版

为了能够增加一个调试的动作，我们首先将现在的模版删除掉。

1. 回到浏览器，

2. 在 我的贡献中  My Contributions ，看到刚才发布的模版

3. 点击 Delete 按钮，从 Visual Studio Gallery 中删除

4. 关闭浏览器，回到 Visual Studio

5. 从工具 Tools 菜单中，选择 Extension Manager.

6. 选择  Extensibility Color Text Web Control  ，点击卸载按钮 Uninstall.

7. 关闭 Extension Manager

8. 关闭 MoreWebControls  项目

9. 关闭 Visual Studio

10. 删除 MoreWebControls 文件夹

11. 重新启动 Visual Studio 完成删除过程

为项目模版增加调试动作

如果你在 MoreWebControls  中按 F5 进行调试，你将会看到一个错误信息 "A project with an Output Type of Class Library cannot be started directly"，这是因为类库项目没有程序的入口，不能直接运行，这样 Visual Studio 就不能进行调试。

微软扩展项目模版在安装的时候包含一个看不见的向导，这个向导检测  experimental instance of Visual Studio 的位置，并且依此设置调试动作，你可以创建自定义的向导来完成这个任务，你仅仅需要创建一次，你就可以在你所创建的每一个项目模版中使用。

扩展项目模版向导必须实现接口 Microsoft.VisualStudio.TemplateWizard.IWizard， 并且必须使用强命名签名。

创建向导

1. 创建  Visual C#/Windows/Class 类库项目，命名为 MyWizard。

2. 将 Class1.cs 改名为 MyWizard.cs

3. 文件中包含下面的内容

 1 using System;
 2 using System.Collections.Generic;
 3 using System.Linq;
 4 using System.Text;
 5 using Microsoft.VisualStudio.TemplateWizard;
 6 using System.Globalization;
 7 using EnvDTE;
 8 
 9 namespace MyWizard
10 {
11     public class MyWizard : IWizard
12     {
13         public void BeforeOpeningFile(ProjectItem projectItem)
14         {
15         }
16         public void ProjectFinishedGenerating(Project project)
17         {
18             foreach (Configuration config in project.ConfigurationManager)
19             {
20                 //Set up the debug options to run "devenv /rootsuffix Exp";
21                 config.Properties.Item("StartAction").Value = 1;
22                 //Get the full path to devenv.exe through DTE.FullName
23                 config.Properties.Item("StartProgram").Value =
24                     project.DTE.FullName;
25                 config.Properties.Item("StartArguments").Value =
26                     "/rootsuffix Exp";
27             }
28         }
29         public void ProjectItemFinishedGenerating(ProjectItem projectItem)
30         {
31         }
32         public void RunFinished()
33         {
34         }
35         public void RunStarted(object automationObject,
36             Dictionary<string, string> replacementsDictionary,
37             WizardRunKind runKind, object[] customParams)
38         {
39         }
40         public bool ShouldAddProjectItem(string filePath)
41         {
42             return true;
43         }
44     }
45 }

4. 项目中增加下面的引用，如果有多于一个的选择，注意选择 Visual Studio 2010 的