Components
- Derive from the component base class
- Typically have no UI representation, such as timer component that raise events at intervals but is not visible on the page.
- Have no associated DOM elements
- Encapsulate client code that is intended to be resuable across applications
Behavior
- Derive from the behavior base class, wich extend the Component base class
- Extend the behavior of DOM elements, such as a watermarking behavior of the DOM element that they are associated with.
- Can create UI elements, although they do not typically modified the basic of DOM element that they are associated with.
- If assigned an ID, can be accessed directly from the DOM element through a custom attribute( expando).
- Do not require an association with another client object, such as a class derived from the Control or Behavior classes.
- Can reference either a control or a non-control HTML element in their element property.
Controls
- Derive from the Control base class, which extends the Component base class.
- Represent a DOM element as a client object, typically changing the original DOM element's ordinary behavior to provide new functionality. For example, a menu control might read >li< items from a >ul< element as its source data, but not display a bulleted list.
- Are accessed from the DOM element directly through the control expando
Please refer this artical, in summary you need to do the following thing
- You need to create an component in js file
- add reference to the js file
- create the component instance in the application load event, the instance will be associated with other element in the page because the information is passed in the creation method.
Type.registerNamespace("Demo"); Demo.Timer = function() { Demo.Timer.initializeBase(this); this._interval = 1000; this._enabled = false; this._timer = null;} Demo.Timer.prototype = { // OK to declare value types in the prototype get_interval: function() { ///Interval in milliseconds return this._interval; }, set_interval: function(value) { if (this._interval !== value) { this._interval = value; this.raisePropertyChanged('interval'); if (!this.get_isUpdating() && (this._timer !== null)) { this._restartTimer(); } } }, get_enabled: function() { ///True if timer is enabled, false if disabled. return this._enabled; }, set_enabled: function(value) { if (value !== this.get_enabled()) { this._enabled = value; this.raisePropertyChanged('enabled'); if (!this.get_isUpdating()) { if (value) { this._startTimer(); } else { this._stopTimer(); } } } }, // events add_tick: function(handler) { ///Adds a event handler for the tick event. /// The handler to add to the event. this.get_events().addHandler("tick", handler); }, remove_tick: function(handler) { ///Removes a event handler for the tick event. /// The handler to remove from the event. this.get_events().removeHandler("tick", handler); }, dispose: function() { // call set_enabled so the property changed event fires, for potentially attached listeners. this.set_enabled(false); // make sure it stopped so we aren't called after disposal this._stopTimer(); // be sure to call base.dispose() Demo.Timer.callBaseMethod(this, 'dispose'); }, updated: function() { Demo.Timer.callBaseMethod(this, 'updated'); // called after batch updates, this.beginUpdate(), this.endUpdate(). if (this._enabled) { this._restartTimer(); } }, _timerCallback: function() { var handler = this.get_events().getHandler("tick"); if (handler) { handler(this, Sys.EventArgs.Empty); } }, _restartTimer: function() { this._stopTimer(); this._startTimer(); }, _startTimer: function() { // save timer cookie for removal later this._timer = window.setInterval(Function.createDelegate(this, this._timerCallback), this._interval); }, _stopTimer: function() { if(this._timer) { window.clearInterval(this._timer); this._timer = null; } }} // JSON object that describes all properties, events, and methods of this component that should // be addressable through the Sys.TypeDescriptor methods, and addressable via xml-script. Demo.Timer.descriptor = { properties: [ {name: 'interval', type: Number}, {name: 'enabled', type: Boolean} ], events: [ {name: 'tick'} ]} Demo.Timer.registerClass('Demo.Timer', Sys.Component); // Since this script is not loaded by System.Web.Handlers.ScriptResourceHandler // invoke Sys.Application.notifyScriptLoaded to notify ScriptManager // that this is the end of the script. if (typeof(Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();
No comments:
Post a Comment