王爽ID:kanshangren
12384次访问,排名9011好友0人,关注者0
kanshangren的文章
原创 5 篇
翻译 0 篇
转载 12 篇
评论 24 篇
kanshangren的公告
总计数:
Google搜索
最近评论
文章分类
收藏
相册
技术类
asp.net
SOHO族
博客园(RSS)
博客堂(RSS)
观自在书院
学术类
世纪沙龙
公法评论
天涯社区
新青年
存档
软件项目交易
订阅我的博客
XML聚合  FeedSky
订阅到鲜果
订阅到Google
订阅到抓虾
订阅到BlogLines
订阅到Yahoo
订阅到GouGou
订阅到飞鸽
订阅到Rojo
订阅到newsgator
订阅到netvibes

转载 ASP.NET组件编程step by step 收藏

新一篇: 告别浮华 | 旧一篇: 当家教后的一点感想

来源:http://blog.csdn.net/lizanhong/archive/2004/07/23/49940.aspx

ASP.NET组件编程step by step

 

       事先声明:本文只适合对组件编程感兴趣的初、中级程序员,如果您对组件编程很牛X了,您可以略过此地。欢迎各位指导并发表意见和建议。

 

       事情的起因(纯粹为了增强文章的趣味性)

       我对电影一向不感冒,最近网上、电视上《十面埋伏》的广告和评论扑天盖地,加上张艺谋在中央电视台还搞了个晚会,专门宣传该影片,不免也蠢蠢欲动起来。我没有去电影院看电影的习惯,所以如果网上有就到网上看了。恰巧一日QQ聊天时,一个群里的会员发了个链接,说是可以下载《十面埋伏》,我试了一下,果然,速度还不错,有70K的速度,100M的东东很快就下完了(是不是我特别容易满足?)。可是效果不太好,颜色基本上没有了,像过去的黑白电影,还不清晰,不过免费的东西就这样了,将就一下啦。

 

       看了十几分钟,终于看不下去了,都是打打杀杀,三个主要人物都出场了,没有帅哥也没有美女,看得我头晕眼花直打盹。为了防止见周公,鼠标在我手里不安份起来,我用的播放器是为了看这个电影刚下载的realplay10的,这可是头一次见,以前都用8.0的,界面没新版的好看(虽然我并不觉得好看,笨笨的),所以想看看有些什么功能,最后,我打开了下面的界面:

 

     

       咦,我一看那个蓝色的背景挺有趣的啊,“名称”标签和文件框组合成一个复合控件,背景颜色还可以变化,有点创意,效果也不错,那我也做一个啊,哈哈,有时候一个想法就是这样无意中产生的。

 

       基础知识

       ASP.net中做一个复合控件不是很难了,但是如果是刚刚接触的话,可能还是需要指点一下方向,所以不妨在这里啰嗦一下,高手们莫怪。

       Javascript:当今最流行的客户端脚本语言,如果要做出特效来他最有能耐。

       CSS:级联样式表,用于设置元素的样式。

       DHTML:动态HTML,和浏览器交互会用到。

       System.Web.UI.WebControls.WebControl:在ASP.NET中自定义控件的基类,我们可能会重写他的一些方法,常用的有:

       CreateChildControls():给予控件创建内定子控件的机会,预设情况OnPreRender()方法会调用此方法要求该控件创建其子控件,别一种情况则是由FindControl()方法调用。

       OnPreRender():触发PreRender事件,在绘制控件之前发生。

       Render():绘制控件。

       AddAttributesToRender():向标签中添加HTML样式或属性。

       另外,还有一个方法:EnsureChildControls()该方法用于确定服务器控控件是否包含子控件,如果不包含,则创建子控件,在设计阶段起作用。

    其他的慢慢去看啦,这几个是我们的例子中会用到的。

 

    最终效果

    先看看效果,这样心中才有明确的目标。

   

    没有任何鼠标动作            鼠标移到控件上              鼠标移出后还原

 

    怎么样?效果挺炫吧?(我在自夸呢)

   

    跟我一步一步来

       现在,请听我的指令:喜欢这个效果的站左边,不喜欢这个效果或者极为不屑的站右边。好了,右边的朋友请关闭您的浏览器继续您喜欢的网上之旅,左边的朋友请跟我来:

 

1、  我们先完成效果部分,也就是编写javascript脚本。我的方法是写一个HTML文件,试验脚本的正确性:

<HTML>

<HEAD>

<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">

<TITLE></TITLE>

 

<script language=javascript>

var OldColor;

function mouseover(ctrl,color)

{

        OldColor = ctrl.style.backgroundColor;

        ctrl.style.color = "#ffffff";

        ctrl.style.backgroundColor = color;

       

}

function mouseout(ctrl)

{

        ctrl.style.backgroundColor = OldColor;

        ctrl.style.color = "#000000";

}

</script>

</HEAD>

<BODY>

 

<table  border="0" style="font-size:9pt" onmouseover="mouseover(this,'#ff0044')" onmouseout="mouseout(this)">

<tr >

        <td><span>姓名:</span></td><td><input name="_ctl2" type="text" /></td>

</tr>

</table>

 

</BODY>

</HTML>

新建一个文本文件,将这段代码复制过去,然后将文件的扩展名改为.html,用IE打开,是不是看到了想要的效果?

 

2、  前期工作准备完成了,接下来打开VS.NET IDE,新建一个项目,选择Visual C#项目(别问我要VB.net的代码,我不会),在右边列表中选择“WEB控件库”,输入项目名称:LabelTextBox

3、  把自动生成的代码删除,只留下一个类的框架,像下面这样(命名空间自定):

using System;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.ComponentModel;

using System.Drawing;

 

namespace LzhTextBpx

{      

    public class LabelTextbox : System.Web.UI.WebControls.WebControl

{

}

}

 

4、  上面看到的效果其实是一个一行两列的表格,我们把表格的border属性设成0,所以看不出来了,其中左边单元格放标签,右边单元格放文本框,所以,我们要用代码生成这个表格。用到的类有:

a)         Table:表示表格

b)        TableRow:表示表格行

c)        TableCell:表示表格中的单元格

注意:一个表格可以有多个表格行,一个表格行中可以放置多个单元格

生成代码如下:

//定义一个表对象

            Table t = new Table();

            //添加一行

            TableRow tr = new TableRow();

            //添加两个单元格

            TableCell tc1 = new TableCell();

            TableCell tc2 = new TableCell();

            //将控件添加到Controls集中.

            tc1.Controls.Add(label);

            tc2.Controls.Add(textBox);

            tr.Controls.Add(tc1);

            tr.Controls.Add(tc2);

            t.Controls.Add(tr);

this.Controls.Add(t);  

我们还要响应表格的鼠标移入移出事件,背景色的变化就是在这里触发的,下面的代码完成此事:

//添加鼠标事件

        t.Attributes.Add("onmouseover","mouseover(this,'" + "#" + R + G + B + "')");

t.Attributes.Add("onmouseout","mouseout(this)");

Attributes表示表格的属性集,Add()方法用于添加一个新的属性。

顺便把表格中的字体也设置一下:

//添加样式,用来控制字体

t.Style.Add("font-size","10pt");

看到上面的R、G、B三个变量了吗?这三个变量是某种颜色的十六进制的字符串表示。使用如下的方法对颜色进行分解:

//以下将颜色值转化成十六进制表示

        string R,G,B;

        R = (Convert.ToInt32(this._backgroundColor.R)).ToString("X");

        G = (Convert.ToInt32(this._backgroundColor.G)).ToString("X");

B = (Convert.ToInt32(this._backgroundColor.B)).ToString("X");

其中_backgroundColor是自定义属性。

 

这一步的全部代码如下:

private void CreateControls()//创建控件以及设置控件的相关属性

        {

            //以下将颜色值转化成十六进制表示

            string R,G,B;

            R = (Convert.ToInt32(this._backgroundColor.R)).ToString("X");

            G = (Convert.ToInt32(this._backgroundColor.G)).ToString("X");

            B = (Convert.ToInt32(this._backgroundColor.B)).ToString("X");

            //定义一个表对象

            Table t = new Table();

 

            //添加鼠标事件

            t.Attributes.Add("onmouseover","ltmouseover(this,'" + "#" + R + G + B + "')");

            t.Attributes.Add("onmouseout","ltmouseout(this)");

 

            //添加样式,用来控制字体

            t.Style.Add("font-size","10pt");

 

            //添加一行

            TableRow tr = new TableRow();

            //添加两个单元格

            TableCell tc1 = new TableCell();

            TableCell tc2 = new TableCell();

 

            //将控件添加到Controls集中.

            tc1.Controls.Add(label);

            tc2.Controls.Add(textBox);

            tr.Controls.Add(tc1);

            tr.Controls.Add(tc2);

 

            t.Controls.Add(tr);

 

            this.Controls.Add(t);          

        }

 

5、  本控件向外提供了三个属性,backgroundColor 表示鼠标移入控件的背景颜色,labelString 为标签内文本,textString 为文本框内容。定义如下:

private Label label = new Label();//创建一个标签

        private TextBox textBox = new TextBox();//创建一个文本框

private Color _backgroundColor;//鼠标移入的背景颜色

public Color backgroundColor

        {

            get

            {

                if(_backgroundColor == Color.Empty)

                    return Color.Blue;

                return _backgroundColor;

            }

            set

            {

                _backgroundColor = value;

            }

        }

 

        public string labelString

        {

            get

            {

                return label.Text;

            }

            set

            {

                label.Text = value;

            }

        }

 

        public string textString

        {

            get

            {

                return textBox.Text;

            }

            set

            {

                textBox.Text = value;

            }

        }

 

6、  这一步需要重写 CreateChildControls() 方法,该方法会自动被调用,用来生成子控件。

protected override void CreateChildControls()

        {

            this.EnsureChildControls();//如果子控件没有创建,则创建

            base.CreateChildControls ();//调用方法

            CreateControls();

}

 

7、  将第一步的脚本存到一个常量中:

private const string MOUSE_SCRIPT = //用来触发鼠标事件的脚本

            "<script language=javascript>\n" +

            "var OldColor;\n" +

            "function ltmouseover(ctrl,color)\n" + //当鼠标移入时,调用该方法,ctrl为表格,color为要改变的颜色值

            "{\n" +

                "OldColor = ctrl.style.backgroundColor;\n" + //记录下原来的文档背景颜色

                "ctrl.style.color = '#ffffff';\n" +//将字体颜色改为白色

                "ctrl.style.backgroundColor = color;\n" + //更改表格背景颜色

            "}\n" +

            "function ltmouseout(ctrl)\n" + //鼠标移出时调用 ,参数同上

            "{\n" +

                "ctrl.style.backgroundColor = OldColor;\n" + //还原背景颜色

                "ctrl.style.color = '#000000';" + //将字体颜色还原成黑色

            "}\n" +

        "</script>\n";

 

重写OnPreRender()方法将该脚本输出到浏览器,考虑到同一页面可能会有多个该控件的情况,此时并不需要每个控件都生成一段脚本,而是所有控件共享这段脚本,所以,我们要用Page.IsClientScriptBlockRegistered()判断该脚本是否已经输出,如果输出,就不需要再次输出了。

protected override void OnPreRender(EventArgs e)

        {

            //将脚本输出到页面中.

            if(!Page.IsClientScriptBlockRegistered("mousescript")) //防止重复输出.

            {

                Page.RegisterClientScriptBlock("mousescript",MOUSE_SCRIPT);

            }

            base.OnPreRender (e);

}

   

    控件的使用

    使用控件显然比创建控件简单得多,下面讲一下该控件的使用方法(适合初学者):

    将该项目编译后,会生成一个叫LabelTextbox.dll的程序集。

   

    1、创建一个测试项目,打开工具箱,点击右键,选择“添加/移除项”,如下图:

   

   

       2、弹出“自定义工具箱”,选择“.net FramWork组件”选项卡,点击“浏览”,在LabelTextBox工程目录下找到“LabelTextbox.dll”程序集,如图:

      

 

       3、确定后,在工具箱中出现该控件的图标,如下图:

      

 

       4、直接将该控件拖到WEB窗体就能使用了。

 

       本程序调试环境:Windows2000 ServerMS.NET2003

posted on 2004年07月23日 3:45 PM

反馈

# 回复:有点小BUG

//以下将颜色值转化成十六进制表示
string R,G,B;
R = (Convert.ToInt32(this._backgroundColor.R)).ToString("X");
G = (Convert.ToInt32(this._backgroundColor.G)).ToString("X");
B = (Convert.ToInt32(this._backgroundColor.B)).ToString("X");
if(R.Length==1)R = "0" + R;
if(G.Length==1)G = "0" + G;
if(B.Length==1)B = "0" + B;

发表于 @ 2004年08月25日 11:01:00|评论(loading...)|编辑

新一篇: 告别浮华 | 旧一篇: 当家教后的一点感想

评论:没有评论。

发表评论  


当前用户设置只有注册用户才能发表评论。如果你没有登录,请点击登录
Csdn Blog version 3.1a
Copyright © kanshangren