ITPub博客

首页 > Linux操作系统 > Linux操作系统 > 自定义控件的构建(4)

自定义控件的构建(4)

原创 Linux操作系统 作者:wsx2miao 时间:2011-01-24 18:07:17 0 删除 编辑

    在自定义控件的构建(3)中,我们构建了组合控件,实际上,在大部分构建组合控件时,同时会指定其子控件的布局

构建混合控件

  下面的代码是设计为一个登录控件,同时指定其布局

 namespace MyCompositeControls
{    
    /// 
    /// 构建混合控件
   /// 
    public class Login : CompositeControl
    {
        private TextBox txtUserName;
        private TextBox txtPassword;
        public string UserName
        {
            get 
            {
                EnsureChildControls();
                return txtUserName.Text;
            }
            set
            {
                EnsureChildControls();
               txtUserName.Text=value;
            }
        }
        public string Password
        {
            get
            {
                EnsureChildControls();
                return txtPassword.Text;
            }
            set
            {
                EnsureChildControls();
                txtPassword.Text = value;
            }
        }
        protected override void CreateChildControls()
        {
            txtUserName = new TextBox();
            txtUserName.ID = "txtUserName";
            this.Controls.Add(txtUserName);
            txtPassword = new TextBox();
            txtPassword.ID = "txtPassword";
            this.Controls.Add(txtPassword);
        }
        protected override void RenderContents(HtmlTextWriter writer)
        {
            writer.RenderBeginTag(HtmlTextWriterTag.Tr);
            writer.RenderBeginTag(HtmlTextWriterTag.Td);
            writer.AddAttribute(HtmlTextWriterAttribute.For, txtUserName.ClientID);
            writer.RenderBeginTag(HtmlTextWriterTag.Label);
            writer.Write("User Name:");
            writer.RenderEndTag();
            writer.RenderEndTag();
            writer.RenderBeginTag(HtmlTextWriterTag.Td);
            txtUserName.RenderControl(writer);
            writer.RenderEndTag();
            writer.RenderEndTag();
            writer.RenderBeginTag(HtmlTextWriterTag.Tr);
            writer.RenderBeginTag(HtmlTextWriterTag.Td);
            writer.AddAttribute(HtmlTextWriterAttribute.For, txtPassword.ClientID);
            writer.RenderBeginTag(HtmlTextWriterTag.Label);
            writer.Write("Password:");
            writer.RenderEndTag();
            writer.RenderEndTag();
            writer.RenderBeginTag(HtmlTextWriterTag.Td);
            txtPassword.RenderControl(writer);
            writer.RenderEndTag();
            writer.RenderEndTag();
        }
        protected override HtmlTextWriterTag TagKey
        {
            get { return HtmlTextWriterTag.Table; }
        }
}
    }
 可以看到RenderContents()内部被重写为两个TextBox的布局顺序,TextBox是通过调用各自的RenderContents()生成的

运行后查看界面源码

 <table id="Login1">
  <tr>
    <td><label for="Login1_txtUserName">User Name:label>td><td><input name="Login1$txtUserName" type="text" id="Login1_txtUserName" />td>
  tr><tr>
    <td><label for="Login1_txtPassword">Password:label>td><td><input name="Login1$txtPassword" type="text" id="Login1_txtPassword" />td>
  tr>
table>    

可见TextBox是生成在一个表格中的。

默认的RenderContents()只调用每个子控件的RenderContents(),通过重写控件的RenderContents()可以对子控件的布局进行更多的控制

下面的代码对RenderContents()进行了改写,实现

对控件进行布局的,因为在Web标准中,更支持对
的使用

 //重写布局
        protected override void RenderContents(HtmlTextWriter writer)
        {
            writer.AddStyleAttribute("float", "left");
            writer.RenderBeginTag(HtmlTextWriterTag.Div);
            writer.AddStyleAttribute(HtmlTextWriterStyle.Padding, "3px");
            writer.RenderBeginTag(HtmlTextWriterTag.Div);
            writer.AddAttribute(HtmlTextWriterAttribute.For, txtUserName.ClientID);
            writer.RenderBeginTag(HtmlTextWriterTag.Label);
            writer.Write("User Name:");
            writer.RenderEndTag();
            writer.RenderEndTag();       
           
            writer.AddStyleAttribute(HtmlTextWriterStyle.Padding, "3px");
            writer.RenderBeginTag(HtmlTextWriterTag.Div);
            writer.AddAttribute(HtmlTextWriterAttribute.For, txtPassword.ClientID);
            writer.RenderBeginTag(HtmlTextWriterTag.Label);
            writer.Write(" Password:");
            writer.RenderEndTag();
            writer.RenderEndTag();
            writer.RenderEndTag();
           
            writer.AddStyleAttribute("float", "left");
            writer.RenderBeginTag(HtmlTextWriterTag.Div);
            writer.AddStyleAttribute(HtmlTextWriterStyle.Padding, "3px");
            writer.RenderBeginTag(HtmlTextWriterTag.Div);
            txtUserName.RenderBeginTag(writer);        
            writer.RenderEndTag();
           
            writer.RenderBeginTag(HtmlTextWriterTag.Div);
            writer.AddStyleAttribute(HtmlTextWriterStyle.Padding, "3px");
            writer.RenderBeginTag(HtmlTextWriterTag.Div);
            txtPassword.RenderBeginTag(writer);
            writer.RenderEndTag();
            writer.RenderEndTag();
            writer.Write("
");
        }
        protected override HtmlTextWriterTag TagKey
        {
            get { return HtmlTextWriterTag.Div; }
        }
看看页面的Html生成
 
<div id="LoginStandard1">
  <div style="float:left;">
    <div style="padding:3px;">
      <label for="LoginStandard1_txtUserName">User Name:label>
    div><div style="padding:3px;">
      <label for="LoginStandard1_txtPassword"> Password:label>
    div>
  div>
<div style="float:left;">
       <div style="padding:3px;">
      <input name="LoginStandard1$txtUserName" type="text" id="LoginStandard1_txtUserName" /><div>
        <div style="padding:3px;">
          <input name="LoginStandard1$txtPassword" type="text" id="LoginStandard1_txtPassword" />
        div>
<br style='clear:left'/>
  div>
尽管如此,在标准控件中Ms还是采用了Html表格布局方式。

 

 

本篇参考了《ASP.NET 3.5(揭秘) 卷2》

来自 “ ITPUB博客 ” ,链接:http://blog.itpub.net/25284529/viewspace-684566/,如需转载,请注明出处,否则将追究法律责任。

请登录后发表评论 登录
全部评论

注册时间:2011-01-22

  • 博文量
    45
  • 访问量
    44262