What makes this code important? It is an easy way to get started writing server controls. The functionality this control provides is relatively simple. Almost every website has some form of rollover effect, implying this control will also be reusable. I wanted a simple design time interface, and an even simpler run time "experience."
Making it easier for programmers: Binding design time interfaces into your controls
In figure 1, there are properties with ellipses buttons off to the right.
HoverImageURL, are properties that use the
System.Design namespace (contained within System.Design.dll) to construct a custom "Select Image" dialog, derived ultimately from
System.Drawing.Design.UITypeEditor. Binding custom properties to design time developer interfaces is done with the markup before the function itself. In the following code snippet the
EditorAttribute is the markup that binds the "Select Image" dialog to the toolbox window.
Description("This is the mouseover image for the surfer.")> _
Public Property HoverImageUrl()...
This construct has two great benefits. First we can now show any dialog we wish to the developer by inheriting the
System.Drawing.Design.UITypeEditor. This is useful because some information is by nature best expressed in a visual format, such as images or drawings. Second, we now have the ability to pipe visual information into our component in a completely abstracted representation. For example, if the dialog is showing a list of time zones, the control author may have decided to store the offset to GMT. In the past we, component authors, have not had the luxury of this level of abstraction. As a result the "design time experience" was stunted from designer point of view.
The design surface
After dropping this toolbox item onto the design surface, and setting a few properties, this tag is generated by the UI.
<cc1:hoverbutton id=HoverButton1 runat="server"
Users: even the most challenged of them, can run this control
var img = document.images;
var i =0;
for(i=0; i < img.length; i++)
if (img[i].name == targetDOmUrlName) img[i].src = URL;
When the user hovers his mouse over the image this client-side script is invoked, and the computer flips the image to the alternative URL. Presto - simple functionality wrapped up in a nice clean object.