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表現上，但願能讓用戶的接受起來更快，色調也更加柔和等等......