带皮肤的 Web Parts 的基类和生成器工具

• 下载 SampleBaseSkinnedWebPart - 36.56 KB

一篇新文章

一年前我发表了这篇文章。我们发布了一个新版本到 Codeplex，其中包含一个 VisualStudio Add-In，让您更轻松地生成 Web 部件。我还在这里的 codeproject 上写了一篇新文章，解释了如何使用 Web 部件。您可以在此处阅读该文章。

引言

当我开始使用 Web 部件时，我真正缺少的第一件事就是能够像使用 ASP.NET 网页和 Web 用户控件一样使用 Web 部件。换句话说，我缺少将 Web 部件的设计/布局与“代码隐藏”或业务逻辑分开的能力。除了设计没有与代码隐藏分离之外，我真的不喜欢我必须花费大量时间手动编写所有东西的事实。

背景

不久前，我读了一篇 Michiel Van Otegem 关于带皮肤控件的精彩文章（http://www.code-magazine.com/article.aspx?quickid=0401051&page=1）。基于他的想法和他的 SkinnedPart 的功能，我制作了 BaseSkinnedWebPart，它是 Michiel 控件的略微改进版本。除此之外，我还创建了一个控制台应用程序，根据已经制作好的皮肤（ASCX 控件）生成 Web 部件。
使用基类和 swpgen 的另一个优点是，您可以创建多个皮肤 (ASCX) 控件，并在运行时为您的 Web 部件选择不同的外观。

使用 BaseSkinnedWebPart 和 swpgen.exe（生成器工具），开发人员可以使用 Web 部件，其方式与他们使用网页和 Web 用户控件的方式几乎相同。基本思想如下（下面将更详细地解释）

1. 创建一个不带代码隐藏的 ASCX 控件（只有带 ASP.NET 控件和其他 HTML 的 ASCX 文件）
2. 使用 swpgen.exe 生成继承自 BaseSkinnedWebPart 并使用先前制作的 ASCX 控件（皮肤）的类
3. 将生成的类添加到 Web 部件项目，并以与处理常规网页相同的方式添加额外功能。

一个实际的例子

我将在此处展示制作一个充分利用 BaseSkinnedWebPart 功能并使用 swpgen 生成器工具的完全功能 Web 部件所需的所有步骤。

第 1 部分 – 创建初始皮肤

在第 1 部分中，我将介绍初始皮肤的创建。以下是可以执行的步骤

1. 创建初始解决方案
   1. 打开 VisualStudio（在此示例中我使用了带有 SP1 的 2005 版本）
   2. 从主菜单中选择 文件 --> 新建 --> 项目
   3. 展开“项目类型”部分中的“其他项目类型”节点
   4. 单击“其他项目类型”节点下方的“Visual Studio 解决方案”节点
   5. 单击“模板”部分（右侧）中的“空白解决方案”节点
      
   6. 为新解决方案输入“名称”和“位置”，然后单击“确定”
2. 添加一个将包含皮肤的 Web 应用程序项目
   1. 在“解决方案资源管理器”中右键单击解决方案
   2. 选择“添加”==>“新建项目...”
   3. 在“项目类型”部分中单击“Visual C#”
   4. 在“模板”部分（右侧）中选择 ASP.NET Web 应用程序
   5. 为您的新 Web 应用程序项目输入“名称”和“位置”
      
   6. 点击“确定”按钮
3. 移除不必要的项目
   1. 选择 Default.aspx 和 Web.config 文件
   2. 右键单击所选内容并选择“删除”菜单项
   3. 确认要删除选定的项目
4. 创建初始皮肤文件夹结构
   注意：在此示例中，我计划为我的 Web 部件设置两个主题/皮肤。根据您想要为 Web 部件设置的皮肤数量，您可以进行稍微不同的配置。如果您想或需要添加新皮肤，您也可以稍后更改此配置。
   1. 在解决方案资源管理器中右键单击您的 Web 应用程序项目
   2. 选择“添加”==>“新建文件夹”
   3. 将第一个文件夹命名为“default”
   4. 重复步骤 a. 到 c. 以创建另一个名为“theme2”的文件夹
5. 添加新“皮肤”
   1. 右键单击您的 Web 应用程序项目中的“default”文件夹
   2. 选择“添加”？“新建项...”
   3. 在“模板”部分选择“Web 用户控件”
   4. 输入您的第一个皮肤的名称；注意：我建议您以与命名您的 Web 部件相同的方式命名皮肤（只是扩展名为 ASCX 而不是 CS）
   5. 点击“添加”
   6. 右键单击“theme2”文件夹并重复步骤 b. 到 e.（您可以为两个文件夹中的皮肤指定相同的名称）
6. 删除代码隐藏文件
   1. 展开两个文件夹的节点
   2. 展开两个 ASCX 控件的节点
   3. 选择第一个皮肤的“.ascx.cs”和“.ascx.designer.cs”文件
      
   4. 右键单击所选内容并选择“删除”菜单项
   5. 确认您要永久删除选定的项目
   6. 对第二个皮肤（在“theme2”文件夹中）重复步骤 c. 到 e.
7. 设计您的皮肤
   1. 双击“default”文件夹中的“SampleWebPart.ascx”
   2. 修改第一行，不包含任何关于代码隐藏文件的信息。最后一行应该像这样

      <%@ Control %>

   3. 通过添加 HTML 和服务器控件创建皮肤布局；注意：您可以使用 VisualStudio 的设计器来设计皮肤
      
   4. 对“theme2”文件夹中的 ASCX 控件重复步骤 a. 到 c.。注意：您可以在两个皮肤中使用完全不同的控件布局，但重要的是两个皮肤中必须具有相同的服务器控件（如果您愿意，可以在一个皮肤中隐藏一些服务器控件，但控件无论如何都必须存在）。

第 2 部分 – 生成 Web 部件

在第 2 部分中，我将介绍如何根据之前制作的皮肤生成 Web 部件类。以下是可以执行的步骤

1. 下载生成器工具
   1. 转到托管生成器工具的 codeplex 项目 (http://www.codeplex.com/aspnetlibrary)
   2. 转到“发布”部分，找到“ASPNETLibrary.SharePoint.WebParts”项目的最新发布
   3. 从页面底部的“文件”部分下载“Generator.zip”；注意：在撰写本文时，最新版本位于以下 URL：http://www.codeplex.com/aspnetlibrary/Release/ProjectReleases.aspx?ReleaseId=10932
2. 设置工具
   1. 将下载的压缩包解压到本地磁盘上的一个文件夹中；我将其解压到“c:\Program Files\swpgen\”文件夹
   2. 将工具文件夹添加到 PATH 环境变量
      1. 右键单击“我的电脑”并选择“属性”菜单项
      2. 转到高级选项卡
      3. 点击“环境变量...”
      4. 在“系统变量”部分找到“Path”变量
      5. 通过追加分号字符和存放提取存档的文件夹路径来修改它；在我的示例中，我在“Path”环境变量的现有值中添加了“;c:\Program Files\swpgen”。
3. 生成 Web 部件
   1. 打开命令提示符，导航到 Web 应用程序项目中的“default”文件夹
   2. 您可以选择键入并执行“swpgen”以查看所有可用选项
      
   3. 键入下一条命令以生成 Web 部件
      swpgen /source:SampleWebPart.ascx /namespace:MyCompany.MyProject.WebParts

注意：上述命令将在命名空间 MyCompany.MyProject.WebParts 中生成一个名为 SampleWebPart 的 Web 部件类。

第 3 部分 – 处理生成的 Web 部件

在第 3 部分中，我将展示如何使用和自定义生成的类。以下是可以执行的步骤

1. 创建 Web 部件项目
   1. 转到 Visual Studio 中的解决方案
   2. 右键单击解决方案，然后选择“添加”？“新建项目...”
   3. 在“模板”部分选择“类库”
   4. 输入项目名称；在此示例中，我使用了“SampleWebParts”作为名称
   5. 单击“确定”
   6. 通过右键单击“Class1.cs”，选择“删除”菜单项并确认您要永久删除它来删除它
   注意：您也可以创建一个“Web 部件”项目，但在此示例中，我使用“类库”项目作为更通用的解决方案。
2. 将生成的文件添加到 Web 部件项目
   1. 转到生成 Web 部件类的文件夹。在我的示例中，它是“C:\MyProjects\samples\SampleBaseSkinnedWebPart\SampleSkinns\default”
   2. 将生成的两个文件复制到您在步骤 1 中创建的类库项目所在的文件夹。在我的示例中，它是“c:\MyProjects\samples\SampleBaseSkinnedWebPart\SampleWebParts”文件夹，生成的文件是
      1. “SampleWebPart.cs”和
      2. “SampleWebPart.generated.cs”
   3. 进入 VisualStudio 并点击类库项目（在我的示例中，我点击了 SampleWebParts 项目）
   4. 从解决方案资源管理器的顶部菜单中选择“显示所有文件”选项，如下一个屏幕截图所示
      
   5. 如果将文件复制到正确的文件夹，您将能够在 SampleWebParts 项目节点下看到两个生成的文件。选择它们，右键单击所选内容，然后选择“包含在项目中”菜单项。
   6. 关闭“显示所有文件”选项
   注意：除了步骤 a. 到 f. 之外，您还可以右键单击 SampleWebParts 项目，选择“添加”？“现有项...”，导航到生成的文件，选择它们并将其包含在项目中。
3. 添加对所需程序集的引用
   1. 在解决方案资源管理器中，右键单击项目，然后在快捷菜单上单击“添加引用”
   2. 在“添加引用”对话框的“.NET”选项卡上，在组件列表中选择“Windows SharePoint Services”，然后单击“确定”
   3. 转到托管生成器工具的 codeplex 项目 (http://www.codeplex.com/aspnetlibrary)
   4. 转到“发布”部分，找到“ASPNETLibrary.SharePoint.WebParts”项目的最新发布
   5. 从页面底部的“文件”部分下载“ASPNETLibrary.SharePoint.WebParts.zip”；注意：在撰写本文时，最新版本位于以下 URL：http://www.codeplex.com/aspnetlibrary/Release/ProjectReleases.aspx?ReleaseId=10932
   6. 打开 Windows 资源管理器，导航到解决方案文件所在的文件夹，然后创建一个名为“ExternalReferences”的文件夹。在我的示例中，它是“c:\MyProjects\samples\SampleBaseSkinnedWebPart”文件夹
   7. 将下载的存档解压到“ExternalReferences”文件夹
   8. 转到 VisualStudio，右键单击解决方案，选择“添加”？“新建解决方案文件夹”，并将解决方案文件夹的名称设置为“ExternalReferences”
   9. 右键单击“ExternalReferences”解决方案文件夹，然后选择“添加”“现有项...”
   10. 导航到“ExternalReferences”文件夹并选择“ASPNETLibrary.SharePoint.WebParts.dll”
   11. 右键单击 Web 部件项目（在我的示例中是 SampleWebParts 项目）并选择“添加引用...”
   12. 单击“浏览”选项卡，导航到“ExternalReference”文件夹并选择“ASPNETLibrary.SharePoint.WebParts.dll”
   13. 右键单击 Web 部件项目（在我的示例中是 SampleWebParts 项目）并选择“添加引用...”
   14. 从“.NET”选项卡中选择“System.Web”程序集
4. 添加一些代码
   1. 从 SampleWebParts 项目打开 SampleWebPart.cs
   2. 转到“Initialize”方法并添加以下代码
      

      this._newQuestion.Click += 
          new EventHandler(NewQuestionClick);
      this._submit.Click += new EventHandler(SubmitClick);
      this._statusMessagePanel.Visible = false;
                      

   3. 将接下来的两个事件处理程序添加到 SampleWebPart 类
      

      void SubmitClick(object sender, EventArgs e)
      {
          this._statusMessagePanel.Visible = true;
          this._submitQuestionPanel.Visible = false;
          this._status.Text = 
              "Your question was successfully submited.";
      }
      
      void NewQuestionClick(object sender, EventArgs e)
      {
          this._submitQuestionPanel.Visible = true;
          this._statusMessagePanel.Visible = false;
      }
                      

5. 对程序集进行强命名
   1. 右键单击 SampleWebParts 项目并选择“属性”
   2. 转到“签名”选项卡
   3. 选择“签名程序集”选项
   4. 打开下拉列表并选择“”项
   5. 输入密钥文件的名称。我输入了 SampleWebParts
   6. 取消选择“使用密码保护我的密钥文件”选项，然后单击“确定”

第 4 部分 – 创建安装脚本和安装项目

在第 4 部分中，我将解释如何制作 Web 部件部署的安装脚本和安装项目。按照以下步骤制作安装脚本

1. 创建安装脚本
   1. 转到 SampleWebParts 项目，右键单击它，选择“添加”？“新建文件夹”，并将其命名为“Configuration”
   2. 将三个新文件添加到 Configuration 文件夹
      1. SampleWebPart.dwp – 一个文本文件
      2. manifest.xml – 一个 XML 文件
      3. setup.cmd – 一个文本文件
   3. 编辑这三个文件，并将其内容设置为与随附示例解决方案中的三个文件内容相同。注意：您需要修改 SampleWebPart.dwp 和 manifest.xml 中“Assembly”标签的值，以适应“SampleWebParts.dll”（设置正确的 PublicKeyToken），以及 setup.cmd 中“url”参数的值（设置为您希望部署 Web 部件的网站 URL）
   4. 选择所有三个文件，右键单击所选内容，选择“属性”，然后在“生成操作”下拉列表中选择“内容”
2. 创建安装项目
   1. 右键单击解决方案，然后选择“添加”？“新建项目...”
   2. 展开“项目类型”部分中的“其他项目类型”节点，然后选择“安装和部署”节点
   3. 在“模板”部分（右侧）选择“CAB 项目”项目类型
   4. 输入项目名称并单击“确定”（我输入了 SampleWebParts.Setup 作为项目名称）
   5. 右键单击上一步中创建的安装项目，然后选择“添加”？“项目输出”
   6. 在“项目”下拉列表中选择“SampleWebParts”
   7. 按住“Ctrl”键并单击“主输出”和“内容文件”两项以选择它们
   8. 点击“确定”
   9. 右键单击上一步中创建的安装项目，然后选择“添加”？“文件...”
   10. 导航到“ExternalReferences”文件夹并选择“ASPNETLibrary.SharePoint.WebParts.dll”文件

第 5 部分 – Web 部件部署

在第 5 部分中，我将解释如何将 Web 部件部署到 MOSS 以及如何正确配置它以使其正常工作。您可以按照以下步骤进行操作

1. 部署 Web 部件
   1. 将“Configuration”文件夹中的“setup.cmd”文件（在我的示例中是“C:\MyProjects\samples\SampleBaseSkinnedWebPart\SampleWebParts\Configuration\setup.cmd”文件）复制到 Setup 项目的“Debug”文件夹中（在我的示例中是“C:\MyProjects\samples\SampleBaseSkinnedWebPart\SampleWebParts.Setup\Debug”文件夹）
   2. 执行“setup.cmd”将 Web 部件部署到 MOSS。注意：我建议您打开命令提示符，导航到“Debug”文件夹并从命令提示符执行 setup.cmd，以便您可以查看部署是否顺利进行
2. 设置 MOSS 网站
   1. 打开 Internet Explorer 并转到您的 MOSS 网站（您在上一步中部署 Web 部件的网站）
   2. 选择“网站操作”？“创建”
   3. 在“库”部分下选择“文档库”
   4. 将“名称”字段设置为“Themes”
   5. 点击“创建”
   6. 在“Themes”文档库中，点击“新建”按钮旁边的小箭头，然后点击“新建文件夹”
   7. 输入“default”作为文件夹名称，然后单击“确定”
   8. 重复步骤 f. 和 g.，创建一个名为“theme2”的新文件夹
      
3. 上传皮肤
   1. 进入“default”文件夹
   2. 点击“上传”按钮
   3. 点击“浏览”按钮，导航到默认文件夹中的皮肤（在我的示例中是“c:\MyProjects\samples\SampleBaseSkinnedWebPart\SampleSkinns\default\SampleWebPart.ascx”文件），点击“打开”，然后点击“确定”将皮肤（ASCX 文件）上传到“Themes”文档库中的“default”文件夹
   4. 重复步骤 a. 到 c.，但在所有步骤中选择“theme2”文件夹而不是“default”
4. 将 Web 部件添加到页面
   1. 转到您要放置 Web 部件的网页
   2. 选择“网站操作”？“编辑页面”
   3. 在您希望添加 Web 部件的部分中单击“添加 Web 部件”按钮
      
   4. 在“杂项”部分下找到“基本皮肤化 Web 部件示例 1”
   5. 通过点击复选框选择它，然后点击“添加”
      
   6. 打开已添加 Web 部件的“编辑”菜单，然后选择“修改共享 Web 部件”选项
      
   7. 转到“皮肤化 Web 部件设置”部分，查看如何为您的 Web 部件选择不同的主题，以及在所选主题下选择不同的皮肤。
   8. 选择首选皮肤后，单击“确定”，然后单击“退出编辑模式”
   注意：如果您点击 Web 部件中的“提交”按钮，然后点击“新问题”按钮，您可以尝试 Web 部件的工作方式；它不会做任何特殊的事情，只是显示/隐藏不同的面板，但这足以用于演示。

附录 A – 有用链接

以下是一些可能有用的网址

• http://www.codeplex.com/aspnetlibrary - 项目在 codeplex 上的主页
• http://www.codeplex.com/aspnetlibrary/Release/ProjectReleases.aspx - 列出所有最新发布的页面
• http://www.codeplex.com/aspnetlibrary/Release/ProjectReleases.aspx?ReleaseId=10932 – 撰写本文时的当前版本