您的位置：首页 > 编程语言 > ASP

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

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





程序代码下载：ASP.NETServerControl-Day21.rar

一、TDateEdit控件介绍

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

日期控件实作教学(1)-结合JavaScript

日期控件实作教学(2)-PostBack与事件

TBDateEdit日期控件-1.0.0.0版(OpenSource)





二、控件加入智能卷标

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

'''<summary>

[code]'''TBDateEdit控制項的設計模式行為。
'''</summary>

PublicClassTBDateEditDesigner

InheritsSystem.Web.UI.Design.ControlDesigner


'''<summary>

'''取得控制項設計工具的動作清單集合。

'''</summary>

PublicOverridesReadOnlyPropertyActionLists()AsDesignerActionListCollection

Get

DimoActionListsAsNewDesignerActionListCollection()

oActionLists.AddRange(MyBase.ActionLists)

oActionLists.Add(NewTBDateEditActionList(Me))

ReturnoActionLists

EndGet

EndProperty


EndClass

[/code]
.csharpcode,.csharpcodepre
{
font-size:small;
color:black;
font-family:consolas,"CourierNew",courier,monospace;
background-color:#ffffff;
/*white-space:pre;*/
}
.csharpcodepre{margin:0em;}
.csharpcode.rem{color:#008000;}
.csharpcode.kwrd{color:#0000ff;}
.csharpcode.str{color:#006080;}
.csharpcode.op{color:#0000c0;}
.csharpcode.preproc{color:#cc6633;}
.csharpcode.asp{background-color:#ffff00;}
.csharpcode.html{color:#800000;}
.csharpcode.attr{color:#ff0000;}
.csharpcode.alt
{
background-color:#f4f4f4;
width:100%;
margin:0em;
}
.csharpcode.lnum{color:#606060;}

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





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

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

'''<summary>

[code]'''定義TBDateEdit控制項智慧標籤面板的項目清單集合。
'''</summary>

PublicClassTBDateEditActionList

InheritsDesignerActionList


'''<summary>

'''建構函式。

'''</summary>

PublicSubNew(ByValownerAsControlDesigner)

MyBase.New(owner.Component)

EndSub


EndClass

[/code]
.csharpcode,.csharpcodepre
{
font-size:small;
color:black;
font-family:consolas,"CourierNew",courier,monospace;
background-color:#ffffff;
/*white-space:pre;*/
}
.csharpcodepre{margin:0em;}
.csharpcode.rem{color:#008000;}
.csharpcode.kwrd{color:#0000ff;}
.csharpcode.str{color:#006080;}
.csharpcode.op{color:#0000c0;}
.csharpcode.preproc{color:#cc6633;}
.csharpcode.asp{background-color:#ffff00;}
.csharpcode.html{color:#800000;}
.csharpcode.attr{color:#ff0000;}
.csharpcode.alt
{
background-color:#f4f4f4;
width:100%;
margin:0em;
}
.csharpcode.lnum{color:#606060;}

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


'''<summary>

[code]'''傳回要顯示在智慧標籤面板的項目清單集合。
'''</summary>

PublicOverridesFunctionGetSortedActionItems()AsSystem.ComponentModel.Design.DesignerActionItemCollection

DimoItemsAsNewDesignerActionItemCollection()


'在此加入智慧標籤面板的項目清單


ReturnoItems

EndFunction

[/code]
.csharpcode,.csharpcodepre
{
font-size:small;
color:black;
font-family:consolas,"CourierNew",courier,monospace;
background-color:#ffffff;
/*white-space:pre;*/
}
.csharpcodepre{margin:0em;}
.csharpcode.rem{color:#008000;}
.csharpcode.kwrd{color:#0000ff;}
.csharpcode.str{color:#006080;}
.csharpcode.op{color:#0000c0;}
.csharpcode.preproc{color:#cc6633;}
.csharpcode.asp{background-color:#ffff00;}
.csharpcode.html{color:#800000;}
.csharpcode.attr{color:#ff0000;}
.csharpcode.alt
{
background-color:#f4f4f4;
width:100%;
margin:0em;
}
.csharpcode.lnum{color:#606060;}

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

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


DimoItemsAsNewDesignerActionItemCollection()

[code]
oItems.Add(NewDesignerActionHeaderItem("行為","Behavior"))

oItems.Add(NewDesignerActionHeaderItem("外觀","Appearance"))

[/code]
.csharpcode,.csharpcodepre
{
font-size:small;
color:black;
font-family:consolas,"CourierNew",courier,monospace;
background-color:#ffffff;
/*white-space:pre;*/
}
.csharpcodepre{margin:0em;}
.csharpcode.rem{color:#008000;}
.csharpcode.kwrd{color:#0000ff;}
.csharpcode.str{color:#006080;}
.csharpcode.op{color:#0000c0;}
.csharpcode.preproc{color:#cc6633;}
.csharpcode.asp{background-color:#ffff00;}
.csharpcode.html{color:#800000;}
.csharpcode.attr{color:#ff0000;}
.csharpcode.alt
{
background-color:#f4f4f4;
width:100%;
margin:0em;
}
.csharpcode.lnum{color:#606060;}

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

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

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


oItems.Add(NewDesignerActionPropertyItem("AutoPostBack",_

[code]"AutoPostBack","Behavior","是否引發PostBack動作。"))
[/code]
.csharpcode,.csharpcodepre
{
font-size:small;
color:black;
font-family:consolas,"CourierNew",courier,monospace;
background-color:#ffffff;
/*white-space:pre;*/
}
.csharpcodepre{margin:0em;}
.csharpcode.rem{color:#008000;}
.csharpcode.kwrd{color:#0000ff;}
.csharpcode.str{color:#006080;}
.csharpcode.op{color:#0000c0;}
.csharpcode.preproc{color:#cc6633;}
.csharpcode.asp{background-color:#ffff00;}
.csharpcode.html{color:#800000;}
.csharpcode.attr{color:#ff0000;}
.csharpcode.alt
{
background-color:#f4f4f4;
width:100%;
margin:0em;
}
.csharpcode.lnum{color:#606060;}

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


'''<summary>

[code]'''是否引發PostBack動作。
'''</summary>

PublicPropertyAutoPostBack()AsBoolean

Get

ReturnCType(GetPropertyValue(Me.Component,"AutoPostBack"),Boolean)

EndGet

Set(ByValvalueAsBoolean)

SetPropertyValue(Me.Component,"AutoPostBack",value)

EndSet

EndProperty

'''<summary>

'''設定物件的屬性值。

'''</summary>

'''<paramname="Component">屬性值將要設定的物件。</param>

'''<paramname="PropertyName">屬性名稱。</param>

'''<paramname="Value">新值。</param>

PublicSharedSubSetPropertyValue(ByValComponentAsObject,ByValPropertyNameAsString,ByValValueAsObject)

DimPropAsPropertyDescriptor=TypeDescriptor.GetProperties(Component).Item(PropertyName)

Prop.SetValue(Component,Value)

EndSub

'''<summary>

'''取得物件的屬性值。

'''</summary>

'''<paramname="Component">具有要擷取屬性的物件。</param>

'''<paramname="PropertyName">屬性名稱。</param>

PublicSharedFunctionGetPropertyValue(ByValComponentAsObject,ByValPropertyNameAsString)AsObject

DimPropAsPropertyDescriptor=TypeDescriptor.GetProperties(Component).Item(PropertyName)

ReturnProp.GetValue(Component)

EndFunction

[/code]
.csharpcode,.csharpcodepre
{
font-size:small;
color:black;
font-family:consolas,"CourierNew",courier,monospace;
background-color:#ffffff;
/*white-space:pre;*/
}
.csharpcodepre{margin:0em;}
.csharpcode.rem{color:#008000;}
.csharpcode.kwrd{color:#0000ff;}
.csharpcode.str{color:#006080;}
.csharpcode.op{color:#0000c0;}
.csharpcode.preproc{color:#cc6633;}
.csharpcode.asp{background-color:#ffff00;}
.csharpcode.html{color:#800000;}
.csharpcode.attr{color:#ff0000;}
.csharpcode.alt
{
background-color:#f4f4f4;
width:100%;
margin:0em;
}
.csharpcode.lnum{color:#606060;}

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

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

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


oItems.Add(NewDesignerActionMethodItem(Me,"About",_

[code]"關於TDateEdit控制項","About",_
"關於TDateEdit控制項。",True))

[/code]
.csharpcode,.csharpcodepre
{
font-size:small;
color:black;
font-family:consolas,"CourierNew",courier,monospace;
background-color:#ffffff;
/*white-space:pre;*/
}
.csharpcodepre{margin:0em;}
.csharpcode.rem{color:#008000;}
.csharpcode.kwrd{color:#0000ff;}
.csharpcode.str{color:#006080;}
.csharpcode.op{color:#0000c0;}
.csharpcode.preproc{color:#cc6633;}
.csharpcode.asp{background-color:#ffff00;}
.csharpcode.html{color:#800000;}
.csharpcode.attr{color:#ff0000;}
.csharpcode.alt
{
background-color:#f4f4f4;
width:100%;
margin:0em;
}
.csharpcode.lnum{color:#606060;}

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


PublicSubAbout()

[code]MsgBox("TDateEdit是結合TheCoolestDHTMLCalendar日期選擇器實作的控制項")
EndSub

[/code]
.csharpcode,.csharpcodepre
{
font-size:small;
color:black;
font-family:consolas,"CourierNew",courier,monospace;
background-color:#ffffff;
/*white-space:pre;*/
}
.csharpcodepre{margin:0em;}
.csharpcode.rem{color:#008000;}
.csharpcode.kwrd{color:#0000ff;}
.csharpcode.str{color:#006080;}
.csharpcode.op{color:#0000c0;}
.csharpcode.preproc{color:#cc6633;}
.csharpcode.asp{background-color:#ffff00;}
.csharpcode.html{color:#800000;}
.csharpcode.attr{color:#ff0000;}
.csharpcode.alt
{
background-color:#f4f4f4;
width:100%;
margin:0em;
}
.csharpcode.lnum{color:#606060;}

备注：本文同步发布于「第一届iT邦帮忙铁人赛」，如果你觉得这篇文章对您有帮助，记得连上去推鉴此文增加人气^^

http://ithelp.ithome.com.tw/question/10012896

http://ithelp.ithome.com.tw/question/10012897
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航