[ASP.NET 控制項實作 Day21] 實作控制項智能卷標

控制項通常會把常用屬性或功能顯示在智能卷標中，提供使用者更簡便的快速設定，例如為 GridView 的智能。若要製作控制項的智能卷標，需實作控制項的 ActionList 加入智能卷標中要顯示的項目，在本文將以 TDateEdit 控制項為例，進一步說明控制項的智能卷標的實作方式。

程式碼下載：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)

 

二、控制項加入智能卷標

控制項要加入智能卷標要實作控制項的 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 類別的內容。

 

三、自訂智能卷標面板的項目清單集合

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