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

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

2008-10-23 00:38 423 查看
控件通常会把常用属性或功能显示在智能卷标中，提供使用者更简便的快速设定，例如下图为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>
'''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

.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>
'''定義TBDateEdit控制項智慧標籤面板的項目清單集合。
'''</summary>
PublicClassTBDateEditActionList
InheritsDesignerActionList
'''<summary>
'''建構函式。
'''</summary>
PublicSubNew(ByValownerAsControlDesigner)
MyBase.New(owner.Component)
EndSub
EndClass

.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>
'''傳回要顯示在智慧標籤面板的項目清單集合。
'''</summary>
PublicOverridesFunctionGetSortedActionItems()AsSystem.ComponentModel.Design.DesignerActionItemCollection
DimoItemsAsNewDesignerActionItemCollection()
'在此加入智慧標籤面板的項目清單
ReturnoItems
EndFunction

.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()
oItems.Add(NewDesignerActionHeaderItem("行為","Behavior"))
oItems.Add(NewDesignerActionHeaderItem("外觀","Appearance"))

.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",_
"AutoPostBack","Behavior","是否引發PostBack動作。"))

.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>
'''是否引發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

.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",_
"關於TDateEdit控制項","About",_
"關於TDateEdit控制項。",True))

.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()
MsgBox("TDateEdit是結合TheCoolestDHTMLCalendar日期選擇器實作的控制項")
EndSub

.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

[新闻]Python的成功之路
博客园首页社区新闻频道小组博问网摘闪存
文章来源:http://www.cnblogs.com/jeff377/archive/2008/10/23/1317325.html
                                            

                                        

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

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航