一、什么是組件?
查看MSDN,微軟是這樣給組件定義的:在 .NET Framework 中,組件是指實(shí)現(xiàn) System.ComponentModel.IComponent 接口的一個(gè)類,或從實(shí)現(xiàn) IComponent 的類中直接或間接派生的類。這是從純語(yǔ)言(技術(shù))角度下的定義,通俗的講,組件是“可獨(dú)立運(yùn)作的軟件單元”,這里強(qiáng)調(diào)獨(dú)立運(yùn)作,也就代表著組件必須擁有低耦合性、高重用性等特點(diǎn)。微軟將軟件劃分為兩部分:其一是Component,意指具備特定功能、可獨(dú)立運(yùn)作、不具備UI接口的單元;其二是Control,也就是我們常說(shuō)的控件,意指具備特定功能、可獨(dú)立運(yùn)作的UI接口單元。
二、學(xué)習(xí)Asp.net組件需要掌握的知識(shí)
任意掌握一門.net語(yǔ)言,建議使用C#,C#是一門全新的語(yǔ)言,但又借鑒了C++和JAVA的語(yǔ)法,同時(shí)引入了一些新概念,在程序員中口啤不錯(cuò)。
理解IIS的運(yùn)行機(jī)制和asp.net的運(yùn)行模式。
熟練掌握javascript,該腳本語(yǔ)言強(qiáng)大的功能在處理客戶端動(dòng)作時(shí)表現(xiàn)非常出色,基本上所有的自定義組件都離不開(kāi)javascript,同時(shí),CSS和DHTML也是要心知肚明的。沒(méi)辦法,他們很少會(huì)單獨(dú)出現(xiàn),總是喜歡集體演出。
三、組件設(shè)計(jì)的難度
這個(gè)問(wèn)題不用問(wèn),也許您猜出了幾分,一個(gè)字:難。
您也許會(huì)有所察覺(jué),在編寫asp.net應(yīng)用程序時(shí),很少會(huì)對(duì)viewstate作深入的研究,原因很簡(jiǎn)單,因?yàn)閂iewState本身設(shè)計(jì)的用戶對(duì)象本來(lái)就不是應(yīng)用程序員,而是組件設(shè)計(jì)員。如果不是因?yàn)榭蛻舳诵枰?,您也不?huì)在asp.net中編寫大量的javascript腳本,而在組件設(shè)計(jì)中,很難逃脫干系。不止這些,是否設(shè)計(jì)成服務(wù)器組件?我們的組件是繼承Control、還是繼承WebControl或是繼承Component?在組件中,需要自定義Attribute嗎?需要實(shí)現(xiàn)數(shù)據(jù)綁定嗎?如何繪制組件的外觀?如何和IIS通訊?需要post-back嗎?很多很多的問(wèn)題,都需要組件設(shè)計(jì)者——辛苦的您去一一考慮。
所以,如果您不屑一顧地說(shuō):不就是設(shè)計(jì)一個(gè)組件嗎?這有何難!那么,我會(huì)嘿嘿一笑,因?yàn)槲抑?,您一定在開(kāi)玩笑。
但是,千萬(wàn)別怕,“程序員需要探索精神哦!”
四、基類的選擇
如果我們?cè)O(shè)計(jì)的是一個(gè)WEB可視控件,并且構(gòu)成WEB頁(yè)的一部分,那么可以繼承Control類或者WebControl類。如果是一個(gè)非可視控件,可以繼承Component,繼承此類的控件設(shè)計(jì)時(shí)不會(huì)出現(xiàn)在頁(yè)面上,而是出現(xiàn)在Component Tray中。還記得OpenFileDialog控件嗎?這個(gè)文件打開(kāi)對(duì)話框控件就是出現(xiàn)在Component Tray控件中的。
如果我們只是在已有的控件基礎(chǔ)上增強(qiáng)功能,那么就繼承該已有的控件吧。
五、實(shí)踐出真知
假設(shè)我們要設(shè)計(jì)一個(gè)組件,該組件只允許用戶輸入數(shù)字,該驗(yàn)證工作自然應(yīng)該放到客戶端,客戶端的驗(yàn)證腳本可以這樣寫:
<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<TITLE></TITLE>
<script language="javascript">
function Virty(ctrl)
{
if (event.keyCode == 13)
return true
if (event.keyCode < 48 || event.keyCode > 57)
return false;
else
return true;
}
</script>
</HEAD>
<BODY>
<form method="POST" >
<p>
<input type="text" name="T1" size="20" OnKeyPress="javascript:return Virty(this);">
</p>
</form>
</BODY>
</HTML>
當(dāng)然,這些驗(yàn)證代碼不能由用戶去寫,應(yīng)該由組件設(shè)計(jì)者去寫,也就是說(shuō),當(dāng)用戶把該組件從工具箱中拖到頁(yè)面上后,運(yùn)行時(shí)應(yīng)該自動(dòng)生成驗(yàn)證代碼。向WEB頁(yè)繪制代碼,我們重寫OnPreRender()方法就可以了。
在重寫OnPreRender()方法之前,先寫定義幾個(gè)常量:
private const string SCP_NUMBER_ONLY_SCRIPT_ID="{29FD7A41-49FD-4fc4-AFA9-6A0B875A1A51}";
private const string SCP_NUMBER_ONLY_HOOK="return Virty(this);";
private const string SCP_NUMBER_ONLY_SCRIPT=
"<script language=\"JavaScript1.2\">\nfunction Virty (ctrl)\n{{\n"+
"if (event.keyCode == 13)\n return true;\n if (event.keyCode < 48 || event.keyCode > 57)\n return false;\n else\n return true;\n}}"+
"</script>";
下面的方法用于驗(yàn)證代碼的生成:
private void RenderJavaScript()
{
if(!Page.IsClientScriptBlockRegistered(SCP_NUMBER_ONLY_SCRIPT_ID)) Page.RegisterClientScriptBlock(SCP_NUMBER_ONLY_SCRIPT_ID,string.Format(SCP_NUMBER_ONLY_SCRIPT,base.ID));
}
為什么會(huì)有Page.IsClientScriptBlockRegistered(SCP_NUMBER_ONLY_SCRIPT_ID)呢?我們想象一下,如果在WEB頁(yè)中有十個(gè)該控件,那是不是就要輸出十個(gè)這樣的腳本?顯然,這是畫蛇添足了,所以,我們要用IsClientScriptBlockRegistered()判斷該腳本是否在客戶端輸出,如果腳本在客戶端已注冊(cè),則不再輸出了。
接下來(lái)就是重寫OnPreRender()方法了,該方法負(fù)責(zé)向客戶端繪制腳本。
protected override void OnPreRender(EventArgs e)
{
base.OnPreRender (e);
RenderJavaScript();
}
大家應(yīng)該注意到,該腳本需要事件觸發(fā)才會(huì)執(zhí)行,當(dāng)用戶從瀏覽器輸入數(shù)據(jù)時(shí),如果是非數(shù)字,則忽略該動(dòng)作,否則才接受輸入。這就需要OnKeyPress="javascript:return Virty(this);"這段代碼了。那么,這段代碼怎么向客戶端輸出呢?重寫AddAttributesToRender()方法吧,該方法負(fù)責(zé)繪制組件的屬性。于是,我們寫了下面一段代碼:
protected override void AddAttributesToRender(HtmlTextWriter writer)
{
base.AddAttributesToRender(writer);
writer.AddAttribute("OnKeyPress",SCP_NUMBER_ONLY_HOOK);
}
最后的源碼如下:
/////////////////////////////////////////////////////////////////////////////
/// 注意,本代碼版權(quán)所有者為黃忠成先生。
/// 在此表示感謝他寫的書《ASP.NET組件設(shè)計(jì)》
////////////////////////////////////////////////////////////////////////////
using System;
using System.Text;
using System.Drawing;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace PowerAsp.NET.Controls
{
[ToolboxBitmap(typeof(NumberEditor),"PowerAsp.NET.Controls.NumberEditor.bmp")]
public class NumberEditor:BaseEditor
{
private const string SCP_NUMBER_ONLY_SCRIPT_ID="{29FD7A41-49FD-4fc4-AFA9-6A0B875A1A51}";
private const string SCP_NUMBER_ONLY_HOOK="return NumberEditor_KeyPress_Handle(this);";
private const string SCP_NUMBER_ONLY_SCRIPT=
"<script language=\"JavaScript1.2\">\nfunction NumberEditor_KeyPress_Handle(ctrl)\n{{\n"+
"if (event.keyCode == 13)\n return true;\n if (event.keyCode < 48 || event.keyCode > 57)\n return false;\n else\n return true;\n}}"+
"</script>";
//rending number-limit javaScript.
private void RenderJavaScript()
{
if(!Page.IsClientScriptBlockRegistered(SCP_NUMBER_ONLY_SCRIPT_ID)) Page.RegisterClientScriptBlock(SCP_NUMBER_ONLY_SCRIPT_ID,string.Format(SCP_NUMBER_ONLY_SCRIPT,base.ID));
}
protected override void AddAttributesToRender(HtmlTextWriter writer)
{
base.AddAttributesToRender(writer);
writer.AddAttribute("OnKeyPress",SCP_NUMBER_ONLY_HOOK);
}
protected override void OnPreRender(EventArgs e)
{
base.OnPreRender (e);
RenderJavaScript();
}
public NumberEditor():base()
{
}
}
}
聯(lián)系客服