ASP.NET Atlas簡單控制項介紹

asp.net|控制項 A 

SP.NET Atlas中引入了用戶端控制項的概念，用物件導向思想將用戶端JavaScript將要操作的DOM元素封裝起來，帶來了更清晰的代碼模型以及更好的可複用性（不足之處是效率有所降低）。Atlas的用戶端控制項是串連JavaScript與DOM元素的橋樑，我們應該儘可能的使用用戶端控制項與DOM元素打交道，也就是以Atlas的方法來編寫我們的程式。同時，Atlas對JavaScript物件導向方面的強大擴充（請參考：ASP.NET Atlas對JavaScript的擴充），也讓我們很容易通過繼承，覆寫等方法來構建自訂的控制項。

在前面的一些文章中，我介紹了一些Atlas中較複雜的控制項。但同時，Atlas也提供了一些比較簡單/基礎的用戶端控制項，同樣在開發中十分有用，讓我們通過這個系列來熟悉Atlas內建的簡易用戶端控制項。

所有的Atlas用戶端控制項都繼承於Sys.UI.Control基類，同時Sys.UI.Control繼承於Sys.Component基類，讓我們先看看Sys.Component提供的屬性：

   1. id：Atlas組件的標識符，將Atlas用戶端組件與DOM元素串連起來。這個id值與DOM元素的id屬性值相同，Atlas使用這個id以找到相關的DOM元素。
   2. bindings：該組件的綁定集合。關於Atlas中的綁定，請參考：Atlas揭秘 —— 綁定（Binding）。
   3. dataContext：該組件的綁定的操作對象。如果您設定了這個屬性，那麼所有綁定條目預設會繼承這個對象，但您也可以在綁定的聲明中覆蓋這個預設的設定。
   4. isInitialized：布爾值，代表該組件是否被初始化過。唯讀。
   5. isUpdating：該組件是否正在更新中，在開始調用beginUpdate()方法到調用endUpdate()方法期間為true，其他時間為false。唯讀。

Sys.Component還提供如下的方法：

   1. beginUpdate與endUpdate：依賴於基類的實現，可以通過調用這兩個方法延遲或一起更新一批組件，以提高效能或減少螢幕閃爍。
   2. initialize：建構函式，不必多言，繼承類可以擴充該方法並初始化自己的成員。

還有如下事件：

   1. propertyChanged：當組件的某個屬性變化時，應該引發該事件。Atlas綁定的實現依賴於這個事件。

現在讓我們看看Sys.UI.Control提供的屬性：

   1. accessKey：擷取或設定控制項的accessKey，該屬性是DOM元素中的accessKey屬性的封裝。
   2. associatedElement：返回控制項的相關DOM元素。這個屬性應該傳入給控制項的建構函式，並在構造以後不可以修改。
   3. behaviors：該組件的Behavior集合。關於Atlas中的Behavior，請參考：在ASP.NET Atlas中建立自訂的Behavior。
   4. cssClass：擷取或設定控制項的CSS Class，該屬性是DOM元素中的class屬性的封裝。
   5. enabled：代表該控制項是否被啟用，該屬性是DOM元素中的enabled屬性的封裝。
   6. parent：擷取或設定該控制項的父控制項。
   7. style：擷取該控制項相對應的DOM元素的style屬性值。
   8. tabIndex：擷取或設定該控制項的tab index。
   9. visibilityMode：擷取或設定該控制項在隱藏時的顯示模式，可選枚舉值：Sys.UI.VisibilityMode.Collapse代表該控制項隱藏時不佔用頁面空間，Sys.UI.VisibilityMode.Hidden代表該控制項隱藏時依然佔有其位置。
  10. visible：擷取或設定該控制項是否可見。

Sys.UI.Control同樣提供如下方法：

   1. addCssClass：為該控制項添加一個CSS Class。
   2. removeCssClass：刪除該控制項的一個CSS Class。
   3. containsCssClass：返回布爾值，代表該控制項是否有指定的CSS Class。
   4. toggleCssClass：如果該控制項沒有指定的CSS Class，則添加，如果有，則刪除。
   5. focus：使該控制項獲得輸入焦點。
   6. scrollIntoView：使該控制項滾動到螢幕可視範圍內。
   7. onBubbleEvent：處理該控制項的子控制項發出的Bubble事件。您可以在這篇文章：使用 ASP.NET Atlas PageNavigator控制項實現用戶端分頁導航中找到該方法的實際應用。
   8. raiseBubbleEvent：該方法會調用該控制項所有父控制項的onBubbleEvent方法，來實現Bubble事件。您可以在這篇文章：使用 ASP.NET Atlas PageNavigator控制項實現用戶端分頁導航中找到該方法的實際應用。


Atlas
中的用戶端控制項均繼承或間接繼承於Sys.UI.Control基類（請參考：ASP.NET Atlas簡單控制項介紹——Sys.Component基類與Sys.UI.Control基類），並有所擴充，本文將介紹Atlas內建的簡單控制項InputControl，TextBox，Button和CheckBox。

Sys.UI.InputControl

InputControl類是一個抽象類別，作為所有提供使用者輸入的控制項（例如TextBox，見下文）的基類，提供了輸入資料驗證等公有操作。InputControl抽象類別提供如下屬性：

   1. isValid：該屬性為唯讀，返回布爾值，代表輸入資料經過驗證後是否合法，即是否通過了所有Validator（請參考：在ASP.NET Atlas中建立自訂的Validator）的驗證。
   2. validationMessage：該屬性為唯讀，返回String。當驗證失敗時，它包含第一個引發失敗的Validator的錯誤資訊；若驗證成功，則為空白字串。
   3. validators：返回該InputControl的Validator集合，您可以通過這個屬性添加/刪除某個Validator來實現對使用者輸入資訊的驗證。

Sys.UI.TextBox

TextBox控制項是任何一種GUI都必須提供的控制項之一，也是我們最常用的和使用者互動的控制項之一。Atlas中的TextBox封裝了type為input的DOM元素input，或是DOM元素textarea，繼承於InputControl基類以獲得輸入資料驗證的功能。TextBox提供如下屬性。

   1. text：擷取或設定TextBox中的文字。

正因為TextBox在實際程式設計中非常常用，所以我們也經常需要對它的擴充。關於對TextBox空間的擴充，有興趣的朋友請參考：

   1. 使用ASP.NET Atlas開發In Place Editing輸入控制項
   2. 使用ASP.NET Atlas開發隨輸入內容自動調整行數的textarea

Sys.UI.Button

Button控制項在GUI中同樣重要。Atlas將DOM元素中的Button概念擴充，使Button不單單指type為button或submit的HTML input元素，還可以應用到例如span，a等元素上，提供開發人員統一的編程介面。Button提供如下兩個屬性：

   1. command：擷取或設定代表該Button引發的命令名稱的String。當該Button的父控制項允許event bubbling時，父控制項的onBubbleEvent事件處理函數中可以訪問到該屬性以得到該Button傳遞過來的命令名稱。
   2. argument：擷取或設定代表該Button引發的命令參數的String。該Button的父控制項允許event bubbling時，父控制項的onBubbleEvent事件處理函數中可以訪問到該屬性以得到該Button傳遞過來的參數。

以上兩個屬性在某些情況中非常有用，您可以在這篇文章：使用 ASP.NET Atlas PageNavigator控制項實現用戶端分頁導航中看到它們的實際應用。

Button還提供如下的事件：

   1. click：在該Button被點擊時觸發。

注意：當某個Button被點擊時，首先觸發的是該Button的click事件，然後再觸發該Button父控制項的onBubbleEvent事件。

Sys.UI.CheckBox

Atlas中的CheckBox封裝了type為checkbox的input DOM元素。使用者可以使用它輸入一個布爾值。CheckBox提供如下屬性：

   1. checked：擷取或設定代表該CheckBox是否被選中的布爾值。

CheckBox還提供如下事件：

   1. click：在該CheckBox被點擊時觸發。


Atlas中的用戶端控制項均繼承或間接繼承於Sys.UI.Control基類（請參考：ASP.NET Atlas簡單控制項介紹——Sys.Component基類與Sys.UI.Control基類），並有所擴充，在上一篇文章（ASP.NET Atlas簡單控制項介紹——InputControl，TextBox，Button和CheckBox）中，我介紹了InputControl，TextBox，Button和CheckBox控制項。本文將繼續介紹Atlas內建的剩下四種簡單控制項：Label，HyperLink，Select和Image。

Sys.UI.Label

Atlas中的Label控制項可以用來顯示一段文字，同時也可以作為一段HTML的預留位置。Label控制項有如下屬性：

   1. text：擷取或設定Label中的內容。該內容既可以以文本方式顯示或是以HTML方式顯示，取決於htmlEncode屬性的設定。
   2. htmlEncode：擷取或設定一個布爾值。代表Label中的內容是否以純文字方式顯示，預設值為false。

Sys.UI.HyperLink

HyperLink控制項繼承於Sys.UI.Label，用來封裝HTML中的a元素。HyperLink除了擁有Label的所有屬性以外，還提供如下屬性：

   1. navigateURL：擷取或設定HyperLink中的導航URL，是對a元素的href屬性的封裝。

如下事件：

   1. click：在該HyperLink被點擊時觸發。

Sys.UI.Select

Select控制項封裝了DOM元素select，可用來表示一個Drop Down List。Select控制項有如下屬性：

   1. firstItemText：擷取或設定List中的第一項的文本。可以被設定成諸如“請選擇……”等文本來提示使用者輸入。預設值為空白，即不顯示提示輸入的文字。
   2. selectedValue：擷取或設定該List中被選中的條目的值。
   3. data：擷取或設定一個DataTable（關於Atlas用戶端DataTable對象，請參考：Atlas命名空間Sys.Data下控制項介紹——DataColumn，DataRow和DataTable），代表該Select中的資料。
   4. textProperty：擷取或設定一個String，代表data屬性中的DataTable裡，將作為該Select中條目中的文本顯示的欄位的名稱。
   5. valueProperty：擷取或設定一個String，代表data屬性中的DataTable裡，將作為該Select中條目中的值的欄位的名稱。

如下事件：

   1. selectionChanged：在該Select中被選中的條目變化時被引發。

Sys.UI.Image

Image控制項作為對DOM元素img的封裝，提供如下屬性：

   1. imageURL：擷取或設定一個代表圖片路徑的字串，是對img元素的src屬性的封裝。
   2. alternateText：擷取或設定一個代表圖片文字說明的字串，是對img元素的alt屬性的封裝。
   3. width：擷取或設定圖片的寬度。
   4. height：擷取或設定圖片的高度。

原文地址：http://dflying.cnblogs.com/archive/2006/05/07/introduct ... label_hyperlink_select_image.html