1. 程式人生 > >ASP.NET Atlas簡單控制元件介紹——Sys.Component基類與Sys.UI.Control基類

ASP.NET Atlas簡單控制元件介紹——Sys.Component基類與Sys.UI.Control基類

本系列有三篇文章:

  1. ASP.NET Atlas簡單控制元件介紹——Sys.Component基類與Sys.UI.Control基類
  2. ASP.NET Atlas簡單控制元件介紹——InputControlTextBoxButtonCheckBox
  3. ASP.NET Atlas簡單控制元件介紹——LabelHyperLinkSelectImage

這篇是其中的第一篇:ASP.NET Atlas簡單控制元件介紹——Sys.Component基類與Sys.UI.Control基類

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

在前面的一些帖子中,我介紹了一些

Atlas中較複雜的控制元件。但同時,Atlas也提供了一些比較簡單/基礎的客戶端控制元件,同樣在開發中十分有用,讓我們通過這個系列來熟悉Atlas自帶的簡單客戶端控制元件。

所有的Atlas客戶端控制元件都繼承於Sys.UI.Control基類,同時Sys.UI.Control繼承於Sys.Component基類,讓我們先看看Sys.Component提供的屬性:

  1. idAtlas元件的識別符號,將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. beginUpdateendUpdate:依賴於基類的實現,可以通過呼叫這兩個方法延遲或一起更新一批元件,以提高效能或減少螢幕閃爍。
  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控制元件實現客戶端分頁導航中找到該方法的實際應用。

在接下來的幾篇中,我會介紹繼承或間接繼承於Sys.UI.ControlAtlas內建控制元件,希望不會像這篇一樣枯燥。