Cliche RollOvers - Revisted

• Download source - 38.8 Kb

Introduction

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

Figure 1

In figure 1, there are properties with ellipses buttons off to the right. ImageURL, and 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.

<Bindable(False), _
    Category("Appearance"), _
    EditorAttribute(GetType(UrlGraphicEditor), _ 
                    GetType(System.Drawing.Design.UITypeEditor)), _
    DefaultValue(""), _
    Description("This is the mouseover image for the surfer.")> _
    Public Property HoverImageUrl()...
        Get ...
        End Get
        Set ...
        End Set 
    End Property

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" 
        HoverImageUrl="logoBW225x72.gif" 
        ImageUrl="logo225x72.gif" 
        NavagationURL="WebForm1.aspx" 
        BorderWidth="0px"></cc1:HoverButton>

Users: even the most challenged of them, can run this control

The user's computer requests the page from the server. The server then generates some pretty client side JavaScript, like so:

<script DEFER = true language= "javascript" type="text/javascript"> <!-- 
    function newRollOver(targetDOmUrlName,URL){ 
        var img = document.images; 
        var i =0;
        // Look Though the DOM images for the one that is named 
        // correctly, then preform the swap.        
        for(i=0; i < img.length; i++)
            if (img[i].name == targetDOmUrlName) img[i].src = URL; 
    }
//--> </script>

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.