ASP.NET Atlas簡單控制項介紹

來源:互聯網
上載者:User
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




相關文章

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。