快速构建您自己的 Flash 播放器自定义控件

• 下载项目文件 - 46.5 Kb

引言

本文介绍了一种快速简单的方法，用于创建自定义 Web 控件，该控件可用于在 ASP.NET 页面中显示 Shockwave Flash 文件。尽管本文和演示项目侧重于显示 Shockwave Flash (SWF) 文件，但基本思想适用于任何您希望嵌入 ASP.NET 2.0 页面的对象。

虽然完全可以通过编写页面代码在不使用自定义控件的情况下显示 Flash，但拥有现成的控件可以简化此过程，以至于使用该控件的人只需将其拖放到页面上，并在 IDE（或运行时）中设置几个属性即可将 Flash 添加到页面中。

入门

要开始，请打开 Visual Studio 2005 IDE 并启动一个新项目。在“新建项目”对话框（图 1）中，在“项目类型”下，从“Visual Basic”下的“Windows”节点中选择，然后在右侧窗格中选择“Web 控件库”模板。输入项目名称，然后单击“确定”。

项目打开后，右键单击解决方案，然后单击“添加”菜单选项，再选择“新建项”。出现“添加新项”对话框（图 2）后，选择“Web 自定义控件”模板。选择模板后，在名称字段中输入“EmbeddedObject.vb”，然后单击“添加”关闭对话框。您现在可以删除项目最初从模板初始化时创建的默认 Web 控件。

此时，我们应该有一个已打开的 Web 控件库项目，其中包含名为“EmbeddedObject.vb”的单个 Web 控件。在编写项目代码之前的最后一步是添加一个必需的引用。要添加此引用，请双击“解决方案资源管理器”中的“我的项目”图标以打开“我的项目”。在此处，选择“引用”选项卡，然后单击“添加”按钮。出现“添加引用”对话框后，选择 .NET 选项卡，然后向下搜索列表直到找到“System.Design”引用。选择此库，然后单击“确定”按钮。

图 1：Visual Studio 2005 新建项目对话框

图 2：添加新项对话框

导航回“EmbeddedObject.vb”文件，并在文件顶部添加下面突出显示的 Imports 语句。

Imports System
Imports System.Collections.Generic
Imports System.ComponentModel
Imports System.Text
Imports System.Web
Imports System.Web.UI
Imports System.Web.UI.WebControls
Imports System.Web.UI.Design


<DefaultProperty("Text"), 
  ToolboxData("<{0}:EmbeddedObject 
  runat=server></{0}:EmbeddedObject>")> _
Public Class EmbeddedObject
    Inherits WebControl

现在我们可以添加使此控件正常工作的必要代码了。首先，我们需要创建一个私有成员变量；此变量将用于存储用户希望传递给控件的 Shockwave Flash (SWF) 文件的路径。要完成此步骤，请创建一个“声明”区域并输入以下变量声明。

#Region "Declarations"

    Private mFilePath As String

#End Region

变量声明后，我们需要提供一个公共属性来向控件用户公开控件属性；要完成此步骤，请创建一个“属性”区域并输入以下代码。

#Region "Properties"

<Category("SWF Source File")> _
<Browsable(True)> _
<Description("Set path to the SWF source file.")> _
<Editor(GetType(System.Web.UI.Design.UrlEditor), _
    _ GetType(System.Drawing.Design.UITypeEditor))> _
    Public Property FilePath() As String
        Get
            Return mFilePath
        End Get
        Set(ByVal value As String)
            mFilePath = value
        End Set
    End Property

#End Region

请注意，在属性部分，代码指定了一个编辑器，并且指定的编辑器定义为 URL 编辑器。将此属性添加到控件会告知 IDE 如何编辑该属性；在此实例中，当控件用户为控件设置“文件路径”属性时，属性网格将在文本框的右侧显示一个带有省略号的按钮。如果用户单击该按钮，IDE 将打开 URL 编辑器，并允许用户使用该编辑器导航到 SWF 文件并通过该编辑器的对话框设置文件路径属性。以这种方式设置的属性将在控件用户的项目中持久化。

<Editor(GetType(System.Web.UI.Design.UrlEditor), 
  _ GetType(System.Drawing.Design.UITypeEditor))> _

此时，剩下的唯一事情就是定义控件的呈现方式。要完成此步骤，请创建一个“渲染”区域，并在该区域内重写 RenderContents 子程序，如下所示。

#Region "Rendering"

Protected Overrides Sub RenderContents(ByVal writer _
          As System.Web.UI.HtmlTextWriter)

        Try
            Dim sb As New StringBuilder
            sb.Append("<object classid=clsid:D27" & _
                      "CDB6E-AE6D-11cf-96B8-444553540000 ")
            sb.Append("codebase=http://download.macromedia.com/pub/" & _ 
                      "shockwave/cabs/flash/swflash.cab#version=5,0,2,0 " & _ 
                      "Width = " & Width.Value.ToString() & _
                      " Height = " & Height.Value.ToString() & " > ")
             sb.Append("<param name=movie value=" & FilePath.ToString() & "> ")
             sb.Append("<param name=quality value=high> ")
             sb.Append("<param name=BGCOLOR value=#000000> ")
             sb.Append("<param name=SCALE value=showall> ")
             sb.Append("<embed src=" & FilePath.ToString() & " = high ")
             sb.Append("pluginspage=http://www.macromedia.com/shockwave/" & _ 
                       "download/index.cgi?P1_Prod_Version=ShockwaveFlash" & _ 
                       " type=application/x-shockwave-flash ")
             sb.Append("Width = " & Width.Value.ToString() & " ")
             sb.Append("Height = " & Height.Value.ToString() & " ")
             sb.Append("bgcolor=#000000 ")
             sb.Append("scale= showall></embed></object>")

             writer.RenderBeginTag(HtmlTextWriterTag.Div)
             writer.Write(sb.ToString())
             writer.RenderEndTag()

        Catch ex As Exception

            writer.RenderBeginTag(HtmlTextWriterTag.Div)
            writer.Write("Custom Flash Control")
            writer.RenderEndTag()

        End Try

    End Sub

#End Region

在此代码中，有几点值得注意；首先，您可以看到嵌入的 object 标记是如何创建的，而且不难想象使用相同的方法可以嵌入任何有效的对象。StringBuilder 收集了控件的三个变量，文件路径被传递给对象的源，控件的高度和宽度也被收集并传递给 object 标记。在演示中，其余参数是固定的，但如果需要，可以替换为可以也在设计时设置的其他属性。

在定义了 object 标记的内容后，唯一剩余的细节就是将控件放在渲染的页面上。这是通过 StringBuilder 定义之后的三个行完成的。

writer.RenderBeginTag(HtmlTextWriterTag.Div)
writer.Write(sb.ToString())
writer.RenderEndTag()

在此示例中，HTML 写入器设置为放置一个开头的 Div 标记。在 Div 内，StringBuilder 中定义的对象的渲染到页面，最后一行关闭 Div。

现在控件已完成。在测试控件之前，请重新生成项目。完成后，并修复遇到的任何错误后，就可以测试控件了。要测试控件，请向当前打开的 Web 控件库项目添加一个新的网站项目。创建测试网站后，将测试项目设置为启动项目，方法是右键单击解决方案资源管理器中的网站解决方案，然后选择“设置为启动项目”菜单选项。接下来，找到网站解决方案中的 Default.aspx 页面，右键单击该页面，然后选择“设置为启动页”菜单选项。

如果您下载了示例项目，您可能希望从该示例网站中获取两个文件并将其添加到网站解决方案的根目录。这两个文件名为“cybertrick.swf”和“cybertrick.txt”。您可以通过右键单击解决方案资源管理器中的网站解决方案并选择“添加现有项”来将文件添加到项目中。

打开 Default.aspx 页面进行编辑。在工具箱中找到新创建的控件（它应该在顶部），然后将“EmbeddedObject”控件拖到页面上（图 3）。

图 3：工具箱中的自定义控件

您现在可以单击嵌入式对象控件并设置其高度、宽度和文件路径属性。对于此演示，提供的 SWF 文件设计为 300 像素高，600 像素宽，因此请将高度和宽度属性设置为 300 和 600。接下来，单击文件路径属性按钮打开 URL 编辑器对话框。在此处，选择“cybertrick.swf”以将文件路径属性指向该文件。

生成应用程序并运行它；您现在应该在自定义控件中看到 Flash 演示（图 4）。

图 4：自定义控件中的 Flash