[ASP.NET 控制項實作 Day21] 實作控制項智慧標籤

2008-10-22

7942
0
Server Control
2008-11-04

控制項通常會把常用屬性或功能顯示在智慧標籤中，提供使用者更簡便的快速設定，例如下圖為 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

ASP.NET 魔法學院

回首頁

ASP.NET 魔法學院

.NET 技術分享

[ASP.NET 控制項實作 Day21] 實作控制項智慧標籤

系列文章

標籤雲