Discuz!NT控件剖析 之 Button [原创: 附源码]

  Discuz!NT控件剖析 之 Button [原创: 附源码] 收藏

        在开源以后，还没什么文章来讲明 Discuz!NT项目的一些特色。做为这个控件库的设计者，本人将在接下来的时间里用连载的方式来向你们解释其中一些控件的设计思想，实现功能以及一些不曾使用过的功能展现（由于管理后台只使用控件的部分功能）。同时由于这组控件开发的周期很短（当时仅用一个半月，后不断加强功能），有很多思路和控件设计的规范相驳，但当时只考虑为后台程序开发和订制方便，所以就暂且开发成了这个样子，但本人往后会不断完善和规范这些代码:)

         为了便于你们下载和使用这组控件，本人在源代码的基本上去掉了与项目相关的一些使人费解的的代码。同时把相关的控件与具体运行实例相绑定，这只是为了让你们使用和分析方便，一定不是库中全部控件你们都愿意用或感兴趣。正所谓投其所好嘛。另外下载包中的文件所在的项目和文件位置也是与开源项目中的配置相一致的，这么搞能够方便你们按图索骥，以便于同步开源项目中的文件。

         同时，本人也但愿园子里同行在使用和测试这组代码时将您的意见或建议提出来，以便改进和优化代码。还有就是这些控件代码是能在.net1.0 .net2.0框架上运行。欢迎你们使用:)

         好了，今天就先说一下 Button 控件。

         先贴一张运行效果图让你们看一下：

      

         开发动机：在去年10月底时，后台UI进行了一次重构，由于对.net 中的button控件和图片按钮控件感到控制不灵活（项目须要一个既有text 属性，又有img字段属性的按钮）。在看到了CS项目中所使用的按钮后，决定尝试实现与其相似的功能设计。另外由于当时设计部没法对咱们直接进行支持,因此决定样式（css）直接采用cs中所使用的样式（偷个赖）。

        实现功能：但愿提供两种或以上的按钮样式，同时支持JS脚本注册，以及在客户端表单验证等。
    
         由于要求作出多个显示样式，因此使用枚举方式显示可能选择的样式类型，相关代码以下:

     

 1    properytyButtontypeMode 按钮样式 #region properytyButtontypeMode 按钮样式
 2        public enum ButtonType
 3        {
 4            Normal,   //普通
 5            WithImage,  //带图
 6            XpStyle  //不带图
 7        }
 8
 9
10        public ButtonType ButtontypeMode
11        {
12            get
13            {
14                object obj = ViewState["ButtontypeMode"];
15                return obj == null ? ButtonType.WithImage : (ButtonType)obj;
16            }
17            set
18            {
19                ViewState["ButtontypeMode"] = value;
20            }
21        }
22        #endregion
23
24

    而脚本注册属性为string ，用于输入和保存相关脚本信息
      

 1   [Description( " 图版按钮连接 " ), DefaultValue( " ../p_w_picpaths/ " )]
 2          public   string  ScriptContent
 3          {
 4            get
 5            {
 6                object obj = ViewState["ScriptContent"];
 7                return obj == null ? "" : (string)obj;
 8            }
 9            set
10            {
11                ViewState["ScriptContent"] = value;
12            }
13        }
14

     是否支持客户端表单验证的属性以下:
      

 1    定义是否调用js函数validate(this.form);进行数据校验 #region 定义是否调用js函数validate(this.form);进行数据校验
 2        private bool _validateForm = false;
 3        //定义是否调用js函数validate(this.form);进行数据校验
 4        public bool ValidateForm
 5        {
 6            set
 7            {
 8                this._validateForm = value;
 9            }
10            get
11            {
12                return this._validateForm;
13            }
14        }
15        #endregion
16

     有了这几个属性，就能够在控件的Render函数中使用相关的设置了
     

 1 protected   override   void  Render(HtmlTextWriter output)
 2       {
 3             //若是应用系统样式,这里只为当没有CSS文件时，则直接将样式写到控件中
 4            if (ApplyDefaultStyle)
 5            {
 6                if (this.ButtontypeMode == ButtonType.Normal)
 7                {
 8                    output.Write("<span><a href=\"javascript:void(0);\" style=\"BORDER-RIGHT: 
 9                    #999999 1px solid; PADDING-RIGHT: 10px; BACKGROUND-POSITION: 1px 1px; BORDER-TOP:
10                    #cccccc 1px solid; DISPLAY: inline-block; PADDING-LEFT: 10px; FONT-WEIGHT: bold; 
11                    
12                }
13
14                if (this.ButtontypeMode == ButtonType.WithImage)
15                {
16                    output.Write("<span><a href=\"javascript:void(0);\"  style=\"BORDER-RIGHT: #999999 1px solid;
17                    PADDING-RIGHT: 3px; BACKGROUND-POSITION: 1px 1px; BORDER-TOP: #cccccc 1px solid; 
18                    DISPLAY: inline-block; PADDING-LEFT: 22px; FONT-WEIGHT: bold; FONT-SIZE: 12px; 
19                    PADDING-BOTTOM: 3px; MARGIN: 1px; BORDER-LEFT: #cccccc 1px solid; CURSOR: pointer; 
20                    
21                }
22
23                if (this.ButtontypeMode == ButtonType.XpStyle)
24                {
25                    output.Write("<span style=\"BACKGROUND-POSITION: left top; DISPLAY: inline-block;
26                    display: -moz-inline-box; PADDING-LEFT: 4px; FONT-WEIGHT: bold; FONT-SIZE: 12px; 
27                    BACKGROUND-IMAGE: url(" + this.XpBGImgFilePath + "/xpbuttonbg_l.gif); 
28                    
29                }
30            }
31            
32
33            //表单验证属性判断，（注：要在web页面上FORM的submit中加入该函数，并进行相关声明
34            //便可，参见webtest页面）
35              if (ValidateForm)
36                {
37                    sb.Append("if(validate(this.form)){");
38                    //当验证经过后则执行向服务器提交内容的JS代码
39              sb.Append(Page.GetPostBackEventReference(this,"") + ";}"); 
40            
41
42            //用户但愿进行注册的JS代码，这块代码可放在表单验证属性判断以前。
43            if (ScriptContent != "")
44            {
45                sb.Append(ScriptContent);
46            }
47
48            //将上来的设置写入到客户端的onlick事件中。
49            output.WriteAttribute("onclick", sb.ToString());
50     }
51
52
53
54

          如今能够说从服务器端设置到客户端脚本生成基本上都开发完了。

          接下来是作服务器端事件的绑定处理，
      

 1    protected   static   readonly   object  EventClick  =   new   object ();
 2
 3            public   event  EventHandler Click
 4             {
 5            add
 6            {
 7                Events.AddHandler(EventClick, value);
 8            }
 9            remove
10            {
11                Events.RemoveHandler(EventClick, value);
12            }
13        }
14
15          protected   virtual   void  OnClick(EventArgs e)
16          {
17            EventHandler clickHandler = (EventHandler)Events[EventClick];
18            if (clickHandler != null)
19            {
20                clickHandler(this, e);
21            }
22        }
23
24
25          public   void  RaisePostBackEvent( string  eventArgument)
26          {
27            OnClick(new EventArgs());
28        }
29
30
31          void  IPostBackEventHandler.RaisePostBackEvent( string  eventArgument)
32          {
33            this.RaisePostBackEvent(eventArgument);
34        }
35
36

          这样就完成了这个控件的主干部分，而其它的一些属性，如图片路径之类的代码你们可参见一下源码，这里就很少作说明了。

         将来实现的功能，应该说主要仍是在UI表现上，但愿能让用户的接受起来更快，色调也更加柔和等等......