现在的位置: 首页 > 综合 > 正文

[ASP.NET 控件实作 Day21] 实作控件智能卷标

2012年10月09日 ⁄ 综合 ⁄ 共 8707字 ⁄ 字号 评论关闭

控件通常会把常用属性或功能显示在智能卷标中,提供使用者更简便的快速设定,例如下图为 GridView 的智能。若要制作控件的智能卷标,需实作控件的 ActionList 加入智能卷标中要显示的项目,在本文将以 TDateEdit 控件为例,进一步说明控件的智能卷标的实作方式。

image

程序代码下载:ASP.NET Server Control - Day21.rar

 

一、TDateEdit 控件介绍

TDateEdit 控件是笔者之前在部落格中实作的一个日期控件,如下图所示。它是结合 JavaScript 的 The Coolest DHTML Calendar 日期选择器实作的控件,我已将 TDateEdit 控件的相关程序代码含入 Bee.Web.dll 组件中。TDateEdit 控件的相关细节可以参考笔者部落格下面几篇文章有进一步说明,本文将以 TDateEdit 控件为例,只针对实作智能标签的部分做进一步说明。

日期控件实作教学(1) - 结合 JavaScript
日期控件实作教学(2) - PostBack 与 事件
TBDateEdit 日期控件 - 1.0.0.0 版 (Open Source)

image

 

二、控件加入智能卷标

控件要加入智能卷标要实作控件的 Designer,我们继承 ControlDesigner 命名为 TBDateEditDesigner,然后覆写 ActionLists 属性,此属性即是传回智能卷标中所包含的项目清单集合。在 ActionLists 属性中一般会先加入父类别的 ActionLists 属性,再加入自订的 ActionList 类别,这样才可以保留原父类别中智能卷标的项目清单。

    ''' <summary>
    ''' TBDateEdit 控制項的設計模式行為。
    ''' </summary>
    Public Class TBDateEditDesigner
        Inherits System.Web.UI.Design.ControlDesigner
 
        ''' <summary>
        ''' 取得控制項設計工具的動作清單集合。
        ''' </summary>
        Public Overrides ReadOnly Property ActionLists() As DesignerActionListCollection
            Get
                Dim oActionLists As New DesignerActionListCollection()
                oActionLists.AddRange(MyBase.ActionLists)
                oActionLists.Add(New TBDateEditActionList(Me))
                Return oActionLists
            End Get
        End Property
 
    End Class

 

 

 

 

我们自订的 ActionList 为 TBDateEditActionList 类别,它在智能卷标呈现的项目清单如下图所示,接下去我们会说明 TBDateEditActionList 类别的内容。

image

 

三、自订智能卷标面板的项目清单集合

DesignerActionList 类别定义用于建立智能卷标面板的项目清单的基底类别,所以我们首先继承 DesignerActionList 命名为 TBDateEditActionList。

    ''' <summary>
    ''' 定義 TBDateEdit 控制項智慧標籤面板的項目清單集合。
    ''' </summary>
    Public Class TBDateEditActionList
        Inherits DesignerActionList
 
        ''' <summary>
        ''' 建構函式。
        ''' </summary>
        Public Sub New(ByVal owner As ControlDesigner)
            MyBase.New(owner.Component)
        End Sub
 
    End Class

 

 

 

 

接下来要覆写 GetSortedActionItems 方法,它会回传 DesignerActionItemCollection 集合型别,此集合中会传回要显示在智能卷标面板的项目清单集合,所以我们要在 DesignerActionItemCollection 集合中加入我们要呈现的项目清单内容。

        ''' <summary>
        ''' 傳回要顯示在智慧標籤面板的項目清單集合。
        ''' </summary>
        Public Overrides Function GetSortedActionItems() As System.ComponentModel.Design.DesignerActionItemCollection
            Dim oItems As New DesignerActionItemCollection()
 
            '在此加入智慧標籤面板的項目清單               
 
            Return oItems
        End Function

 

step1. 在智能卷标面板加入静态标题项目

首先介绍 DesignerActionHeaderItem 类别,它是设定静态标题项目,例如我们在 TDateEdit 的智能标签中加入「行为」、「外观」二个标题项目,其中 DesignerActionHeaderItem  建构函式的 category 参数是群组名称,我们可以将相关的项目归类到同一个群组。

Dim oItems As New DesignerActionItemCollection()
 
oItems.Add(New DesignerActionHeaderItem("行為", "Behavior"))
oItems.Add(New DesignerActionHeaderItem("外觀", "Appearance"))

 

 

step2. 在智能卷标面板加入属性项目

DesignerActionPropertyItem 类别是设定智能卷标面上的属性项目,DesignerActionPropertyItem 建构函式的第一个参数(memberName) 为属性名称,这个属性指的是 TBDateEditActionList 类别中的属性,所以要在 TBDateEditActionList 新增一个对应的属性。

例如在智能卷标中加入 AutoPostBack 属性项目,则在 TBDateEditActionList 类别需有一个对应 AutoPostBack 属性。

            oItems.Add(New DesignerActionPropertyItem("AutoPostBack", _
                "AutoPostBack", "Behavior", "是否引發 PostBack 動作。"))

 

 

 

 

TBDateEditActionList.AutoPostBack 属性如下,其中 Me.Component 指的是目前的 TDateEdit 控件,透过 GetPropertyValue 及 SetPropertyValue 方法来存取控件的指定属性。

        ''' <summary>
        ''' 是否引發 PostBack 動作。
        ''' </summary>
        Public Property AutoPostBack() As Boolean
            Get
                Return CType(GetPropertyValue(Me.Component, "AutoPostBack"), Boolean)
            End Get
            Set(ByVal value As Boolean)
                SetPropertyValue(Me.Component, "AutoPostBack", value)
            End Set
        End Property
 
    ''' <summary>
    ''' 設定物件的屬性值。
    ''' </summary>
    ''' <param name="Component">屬性值將要設定的物件。</param>
    ''' <param name="PropertyName">屬性名稱。</param>
    ''' <param name="Value">新值。</param>
    Public Shared Sub SetPropertyValue(ByVal Component As Object, ByVal PropertyName As String, ByVal Value As Object)
        Dim Prop As PropertyDescriptor = TypeDescriptor.GetProperties(Component).Item(PropertyName)
        Prop.SetValue(Component, Value)
    End Sub
 
    ''' <summary>
    ''' 取得物件的屬性值。
    ''' </summary>
    ''' <param name="Component">具有要擷取屬性的物件。</param>
    ''' <param name="PropertyName">屬性名稱。</param>
    Public Shared Function GetPropertyValue(ByVal Component As Object, ByVal PropertyName As String) As Object
        Dim Prop As PropertyDescriptor = TypeDescriptor.GetProperties(Component).Item(PropertyName)
        Return Prop.GetValue(Component)
    End Function

 

 

 

step3. 在智能卷标面板加入方法项目

DesignerActionMethodItem 类别是设定智能卷标面上的方法项目,DesignerActionPropertyItem 建构函式的第二个参数(memberName) 为方法名称,这个方法指的是 TBDateEditActionList 类别中的方法,所以要在 TBDateEditActionList 新增一个对应的方法。

例如在智能卷标中加入 About 方法项目,则在 TBDateEditActionList 类别需有一个对应 About 方法。

            oItems.Add(New DesignerActionMethodItem(Me, "About", _
                "關於 TDateEdit 控制項", "About", _
                "關於 TDateEdit 控制項。", True))

 

 

 

 

TBDateEditActionList 的 About 方法只是单纯显示一个讯息窗口,一般你可以在这方法加入任何想在设计阶段处理的动作。例如自动产生 GridView 的字段、在 FormView 加入控件并自动排版,这些都可以在此实现的。

        Public Sub About()
            MsgBox("TDateEdit 是結合 The Coolest DHTML Calendar 日期選擇器實作的控制項")
        End Sub

 

 

备注:本文同步发布于「第一届iT邦帮忙铁人赛」,如果你觉得这篇文章对您有帮助,记得连上去推鉴此文增加人气 ^^
http://ithelp.ithome.com.tw/question/10012896
http://ithelp.ithome.com.tw/question/10012897

抱歉!评论已关闭.