Chinaunix首页 | 论坛 | 博客

小洋-燕洋天yanyangtian.blog.chinaunix.net

首页　| 　博文目录　| 　关于我

yanyangtian4502

  • 博客访问： 1106017
  • 博文数量： 141
  • 博客积分： 3161
  • 博客等级： 中校
  • 技术积分： 3011
  • 用 户 组： 普通用户
  • 注册时间： 2011-09-27 14:53
文章分类

全部博文（141）

文章存档

2012年（28）

2011年（113）

我的朋友
最近访客
推荐博文
相关博文
ASP.NET自定义控件组件开发 第四章 组合控件开发CompositeControl

分类： 系统运维

2011-09-29 12:18:57

 

    大家好，今天我们来实现一个自定义的控件，之前我们已经知道了，要开发自定义的控件一般继承三个基类:Control,WebControl，还有一个就是今天要说的CompositeControl。

 

    大家也许还记得，之前的开发的控件基本上都是我们自己从头到尾的写一些控件的标记，如之类的，而且还有一个大的问题：我们为了使得我们的控件更加的好用，专业，我们还实现了大量的接口，和自己写很多的事件.这样开发控件的时间就加大了。其实我们可以利用ASP.NET中已经有的控件，经过我们包装，实现我们自定义控件。大家可能认为这和用户控件差不多的，但是继承CompositeConytol的控件的自定义控件的灵活性和复用行更好，而且还还添加样式。

 

     还一个更加重要的就是我们不必要实现接口，比如，引发回传的IPostBackEventHandler接口，接受数据的IPostBackDataHandler接口。大家还记得我们之前开发控件中的的那个Button还要申明name为 this.UniqueID ，现在我们都不需要了，因为我们要包装的那些服务器的控件，如TextBox，他们都已经实现了这些。

    本章准备开发一个大家都熟知的Login登录控件。

     

    大家先看看效果：     

          

    其实分析起来，这个控件是由一些已有的控件组合而成的，分别是：

    两个Label,两个TextBox，和一个Button

    下面我们就来开发：

          

     首先，还是先继承CompositeControl;

  1. public class Login:CompositeControl

     然后把就申明我们要组合的控件,如上所说的：          

  1. //要组合的控件

  3.         Label lbUserName;
  4.         Label lbUserPassward;
  5.         TextBox txtUserName;
  6.         TextBox txtUserPassward;

          

     把控件申明了之后只要初始化，并且将这些控件整合成我们的Login 控件就可以了。这么做呢？

 

     其实开发组合控件很简单，一般只要重写一个方法就可以了。这个方法就是来初始化并且整合那些已经申明了的小控件的。如下：

 

  1. #region 重写方法CreateChildControls
  2.   
  3.          protected override void CreateChildControls()
  4.          {
  5.              //清空控件，大家可以理解为：初始化一张白纸，好让我们来画画


  8.              Controls.Clear();

  10.             //初始化控件lbUserName

  12.              lbUserName = new Label();
  13.              lbUserName.Text = "用户名：";
  14.              lbUserName.ID = "lbUserName";
  15.              //把控件添加到我们的组合控件中

  17.              Controls.Add(lbUserName);

  19.              //初始化控件lbUserPassward

  21.              lbUserPassward = new Label();
  22.              lbUserPassward.Text = "密 码：";
  23.              lbUserPassward.ID = "lbUserPassward";
  24.              Controls.Add(lbUserPassward);

  26.                //初始化控件txtUserName


  29.              txtUserName = new TextBox();
  30.              txtUserName.ID = "txtUserName";
  31.              txtUserName.Width = Unit.Percentage(60);
  32.              Controls.Add(txtUserName);
  33.            
  34.              //初始化控件txtUserPassward

  36.              txtUserPassward = new TextBox();
  37.              txtUserPassward.ID = "txtUserPassward";
  38.              txtUserPassward.Width = Unit.Percentage(60);
  39.              Controls.Add(txtUserPassward);

  41.              //初始化控件 submitButton

  43.              submitButton = new Button();
  44.              submitButton.Text = "提交";
  45.              submitButton.CommandName = "Validate";
  46.              Controls.Add(submitButton);
  47.              
  48.              告诉编译器，控件已经初始化了
  49.              ChildControlsCreated = true;
  50.          }
  51.          #endregion

 

    大家特别要注意，最后的那句ChildControlsCreated属性，一定要申明，因为在页面的声明周期的任何时候可能调用上面的那个方法，如果不申明ChildControlsCreated，那么这个方法就会被反复的调用，那么我们控件的状态都会丢失。

 

    如果申明了ChildControlsCreated＝true，那么这个方法就调用一次。

    经过上面的步骤之后，其实我们的控件就已经开发完成了。

 

    可能我们还想进一步的向我们ASP.NET的标准的Login控件靠拢.那么我们的控件还缺少什么

     属性，事件！！！

          

     以前我们定义属性都是用的ViewState["..."]，但是这里就不同了。因为我们的控件是有很多的小的控件组合起来的，比如，我们修改“用户名：”的那个Label，我们想改的是那个Label的属性，还是看看效果图：

 

          改前的图：                                                       改后的图

 

           

 

    就是说，我们想把子控件的属性如Text,name等等，把这些属性上升呈现为组合控件Login的属性。

 

    怎么做？

    也很简单的：如下：

 

  1. public string UserNameLabelText
  2.     {
  3.         get
  4.         {
  5.             EnsureChildControls();
  6.             return lbUserName.Text;
  7.         }
  8.         set
  9.         {
  10.             EnsureChildControls();
  11.             lbUserName.Text = value;
  12.         }
  13.     }

    这样我们就把那个显示用户名的Label的Text属性显示为了Login控件的UserNameLabelText属性。大家要注意 EnsureChildControls(); 这个方法的调用。其实是个保险的：确保我们要显示属性的那个控件已经创建，已经初始化了。

 

    大家可以根据需要显示更加多的属性。也可以自己定义一些属性，还是像以前那样，可以用ViewState[''.."]

     如果到这里为止，就差不多了。大家可以按按照上面的方法来写控件。

 

    大家可以看见，控件的呈现很乱。那些Label.TextBox都布局的很乱。其实你可以根据需要来将上面的那些控件排列的更加好看些，只要重写一个方法就行了： 

  1. protected override void RenderContents(HtmlTextWriter writer)

 

    还是像之前一样，我们想把控件用一个Table来布局，先这样

 
  1. protected override HtmlTextWriterTag TagKey
  2.     {
  3.         get
  4.         {
  5.             return HtmlTextWriterTag.Table;
  6.         }
  7.     }
          

     然后再把那些Label,TextBox,Button放到table的行和列中就行了。如下：          

 
  1. protected override void RenderContents(HtmlTextWriter writer)
  2.     {

  4.         writer.RenderBeginTag(HtmlTextWriterTag.Tr);

  6.         writer.RenderBeginTag(HtmlTextWriterTag.Td);
  7.         lbUserName.RenderControl(writer);
  8.         writer.RenderEndTag();//td的结束


  11.         writer.RenderBeginTag(HtmlTextWriterTag.Td);
  12.         txtUserName.RenderControl(writer);
  13.         writer.RenderBeginTag();

  15.         writer.RenderBeginTag();//tr的结束


  18.         //***********************************************


  21.         writer.RenderBeginTag(HtmlTextWriterTag.Tr);

  23.         writer.RenderBeginTag(HtmlTextWriterTag.Td);
  24.         lbUserPassward.RenderControl(writer);
  25.         writer.RenderEndTag();//td的结束


  28.         writer.RenderBeginTag(HtmlTextWriterTag.Td);
  29.         txtUserPassward.RenderControl(writer);
  30.         writer.RenderBeginTag();

  32.         writer.RenderBeginTag();//tr的结束


  35.         //***********************************************


  38.         writer.RenderBeginTag(HtmlTextWriterTag.Tr);

  40.         writer.AddAttribute(HtmlTextWriterAttribute.Colspan, "2");
  41.         writer.AddAttribute(HtmlTextWriterAttribute.Align, "center");
  42.         writer.RenderBeginTag(HtmlTextWriterTag.Td);
  43.         submitButton.RenderControl(writer);
  44.         writer.RenderBeginTag();

  46.         writer.RenderBeginTag();//tr的结束





  52.     }
     这样，我们的控件就写完了。

     我们的控件还差事件。我们在下篇将“事件的冒泡”。

     完整的代码：如下：

 

  1. using System;
  2. using System.Collections.Generic;
  3. using System.Text;
  4. using System.Web;
  5. using System.Web.UI;
  6. using System.Web.UI.WebControls;
  7. using System.ComponentModel;

  9. namespace LoginControl
  10. {
  11.     public class Login : CompositeControl, IPostBackDataHandler
  12.     {
  13.         #region 要组合的控件
  14.         Label lbUserName;
  15.         Label lbUserPassward;
  16.         TextBox txtUserName;
  17.         TextBox txtUserPassward;
  18.         Button submitButton;
  19.         #endregion


  22.         #region 重写方法CreateChildControls

  24.         protected override void CreateChildControls()
  25.         {
  26.             Controls.Clear();

  28.             //初始化控件lbUserName

  30.             lbUserName = new Label();
  31.             lbUserName.Text = "用户名：";
  32.             lbUserName.ID = "lbUserName";
  33.             //把控件添加到我们的组合控件中

  35.             Controls.Add(lbUserName);

  37.             //初始化控件lbUserPassward

  39.             lbUserPassward = new Label();
  40.             lbUserPassward.Text = "密 码：";
  41.             lbUserPassward.ID = "lbUserPassward";
  42.             Controls.Add(lbUserPassward);


  45.             txtUserName = new TextBox();
  46.             txtUserName.ID = "txtUserName";
  47.             txtUserName.Width = Unit.Percentage(60);
  48.             Controls.Add(txtUserName);

  50.             txtUserPassward = new TextBox();
  51.             txtUserPassward.ID = "txtUserPassward";
  52.             txtUserPassward.Width = Unit.Percentage(60);
  53.             Controls.Add(txtUserPassward);

  55.             submitButton = new Button();
  56.             submitButton.Text = "提交";
  57.             submitButton.CommandName = "Validate";
  58.             Controls.Add(submitButton);

  60.             ChildControlsCreated = true;
  61.         }
  62.         #endregion
  63.         #region 将组合的子控件的属性 呈现为 组合控件的属性

  65.         public string UserNameLabelText
  66.         {
  67.             get
  68.             {
  69.                 EnsureChildControls();
  70.                 return lbUserName.Text;
  71.             }
  72.             set
  73.             {
  74.                 EnsureChildControls();
  75.                 lbUserName.Text = value;
  76.             }
  77.         }

  79.         public string UserPasswardLabelText
  80.         {
  81.             get
  82.             {
  83.                 EnsureChildControls();
  84.                 return lbUserPassward.Text;
  85.             }
  86.             set
  87.             {
  88.                 EnsureChildControls();
  89.                 lbUserPassward.Text = value;
  90.             }
  91.         }

  93.         public string SubmitButtonText
  94.         {
  95.             get
  96.             {
  97.                 EnsureChildControls();
  98.                 return submitButton.Text;
  99.             }
  100.             set
  101.             {
  102.                 EnsureChildControls();
  103.                 submitButton = value;
  104.             }
  105.         }


  108.         #endregion

  110.         #region 组合控件呈现的样式
  111.         protected override HtmlTextWriterTag TagKey
  112.         {
  113.             get
  114.             {
  115.                 return HtmlTextWriterTag.Table;
  116.             }
  117.         }

  119.         protected override void RenderContents(HtmlTextWriter writer)
  120.         {

  122.             writer.RenderBeginTag(HtmlTextWriterTag.Tr);

  124.             writer.RenderBeginTag(HtmlTextWriterTag.Td);
  125.             lbUserName.RenderControl(writer);
  126.             writer.RenderEndTag();//td的结束


  129.             writer.RenderBeginTag(HtmlTextWriterTag.Td);
  130.             txtUserName.RenderControl(writer);
  131.             writer.RenderBeginTag();

  133.             writer.RenderBeginTag();//tr的结束


  136.             //***********************************************


  139.             writer.RenderBeginTag(HtmlTextWriterTag.Tr);

  141.             writer.RenderBeginTag(HtmlTextWriterTag.Td);
  142.             lbUserPassward.RenderControl(writer);
  143.             writer.RenderEndTag();//td的结束


  146.             writer.RenderBeginTag(HtmlTextWriterTag.Td);
  147.             txtUserPassward.RenderControl(writer);
  148.             writer.RenderBeginTag();

  150.             writer.RenderBeginTag();//tr的结束


  153.             //***********************************************


  156.             writer.RenderBeginTag(HtmlTextWriterTag.Tr);

  158.             writer.AddAttribute(HtmlTextWriterAttribute.Colspan, "2");
  159.             writer.AddAttribute(HtmlTextWriterAttribute.Align, "center");
  160.             writer.RenderBeginTag(HtmlTextWriterTag.Td);
  161.             submitButton.RenderControl(writer);
  162.             writer.RenderBeginTag();

  164.             writer.RenderBeginTag();//tr的结束





  170.         }
  171.         #endregion



  175.     }
  176. }
阅读(804) | 评论(0) | 转发(0) |
0

上一篇：ASP.NET自定义控件组件开发 第四章 组合控件开发CompositeControl 后篇 －－事件冒泡

下一篇：ASP.NET自定义控件组件开发 第三章 为控件添加事件 后篇

给主人留下些什么吧！~~
关于我们 | 关于IT168 | 联系方式 | 广告合作 | 法律声明 | 免费注册

Copyright 2001-2010 ChinaUnix.net All Rights Reserved 北京皓辰网域网络信息技术有限公司. 版权所有

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6