Thursday, July 23, 2009

I built several Extender Control and Script Control in my provious posts within PainControls assembly, which you can download. You can search the resource about how to build extender control or script control on web. However, I'd still like to write something on it in my words. If you are interesting on that, you can check this article.

Microsoft ASP.Net Ajax Extensions enables you to expand the capabilities of an ASP.Net Web Application in order to create a rich client user experience. We can make use of ScriptControl or ExtenderControl to build a rich client behavior or web control. The difference between ExtenderControl and ScriptControl is that Extender is used on creating client script capabilities on an existing control, which is called "TargetControl" for this behavior, whereas ScriptControl is an absolute web control which contains rich client functionality. For example, when we'd like to build a ModalPopup which will pop out an existing Panel, show/hide functionality is the client script application, then we can build it as ExtenderControl. However, for ScriptControl, for instance, TabContainer which is the entirely new web control contains the client script functionality, so we can build it as ScriptControl.

1.To encapsulate the client behavior for use by ASP.NET page developers, you can use an extender control. An extender control is a Web server control that inherits the ExtenderControl abstract class in the System.Web.UI namespace.Extender control is used for client script functionality extension of an existing web control. It can be applied to specific Web server control types. You identify the types of Web server controls to which an extender control can be applied by using the TargetControlTypeAttribute attribute.(The sample code as below is according to the TimePicker which is from http://vincexu.blogspot.com/2009/07/ajax-timepickerclockpicker-control.html)

4. Set all resources(contain images, css file and js file) embedded in this extender control as "Embedded Resource"(property "Build Action").

5. This extender control can derive from IExtenderControl interface and a server control, instead of ExtenderControl if you'd like to.

The control can derive from other server controls if you want to make it inherit a server control than ExtenderControl. In this scenario, it should derive from IExtenderControl interface and a server control class. Meanwhile, we have another three steps need to do:1) Define TargetControl property2) Override OnPreRender method. Register the web control as the ExtenerControl in OnPreRender phase. ScriptManager manager = ScriptManager.GetCurrent(this.Page); if (manager == null) { throw new InvalidOperationException("A ScriptManager is required on the page."); } manager.RegisterExtenderControl(this);3) Override Render method. Register the script descriptor which has been defined. ScriptManager.GetCurrent(this.Page).RegisterScriptDescriptors(this);

10. Implementing the Initialize and Dispose Methods.Build "initialize" and "dispose" method in prototype of the class. The initialize method is called when an instance of the behavior is created. Use this method to set default property values, to create function delegates, and to add delegates as event handlers. The dispose method is called when an instance of the behavior is no longer used on the page and is removed. Use this method to free any resources that are no longer required for the behavior, such as DOM event handlers.

11. Defining the Property Get and Set Methods.Each property identified in the ScriptDescriptor object of the extender control's GetScriptDescriptors(Control) method must have corresponding client accessors. The client property accessors are defined as get_ and set_ methods of the client class prototype.

12. Defining the Event Handlers for the DOM Element1) Defining the handler in constructor function:this._element_focusHandler = null;2) Associate the handler with the DOM Element event in initailize method:this._element_focusHandler = Function.createDelegate(this, this._element_onfocus);3) Add the handler in initailize method:$addHandler(this.get_element(), 'focus', this._element_focusHandler)4) Build callback method about this event:_element_onfocus:function(){}13. Defining the Event Handlers for the behaviorEach event identified in the ScriptDescriptor object of the extender control's GetScriptDescriptors(Control) method must have corresponding client accessors. The client event accessors are defined as add_ and remove_ methods of the client class prototype. The method Raise is defined to trigger the event.

Friday, July 17, 2009

But somebody found that it also will pop out script error on the line b.width=c+"px" if combobox is in the TabPanel which is not the default active panel in tabcontainer.

For example, we have 2 combobox controls, one is in the TabPanel1, and the other is in TabPanel2. TabPanel1 is the default active tabPanel. After initialized, it will pop out the error, then combobox1 in tabpanel1 is displaying, but combobox2 not.

(You can try this sample. Because Combobox2 is in the TabPanel2, which is an inactive panel, it will pop out the error and it will make Combobox2 off.)

This issue is attributable to the tabpanel which is not active is invisible, combobox can't get the correct offsetHeight and offsetWidth any more.

So, the approach to resolve it is setting the TabPanel2 to be visible so that combobox can create in gear.Combobox will be created in initialized phase. So we have to set TabPanel2 to be visible before combobox creates and set it back in pageLoad phase.

About Me

Hello, I'm Vince Xu. I'm a SoftWare Engineer from Microsoft. My articles will focus on ASP.NET technology, especially on Ajax. Hope it will help some Developers or become a dissusion pool for the technology.