When I create Web Custom Controls, I usually have some JavaScript that needs to be rendered with them. There are several methods of building and rendering scripts for controls and some of these methods are definitely better than others.

I have seen scripts developed as hard-coded strings in a controls code too many times. Sometimes when I see these hard-coded strings, the developers are at least using a StringBuilder object. StringBuilders make large amounts of string concatenations very quick. They also tend to cause the developer to construct the string contents in a line by line fashion. Scripts built as hard-coded strings are not usually very large so any performance benefit gained from using a StringBuilder would be negligible, but better formatting of the code from a line by line style is easier to read.

Regardless of whether a StringBuilder is used or not, building up a string is clumsy as it makes the script really difficult to develop and even harder to maintain. A better way of developing a script for a control is by adding a script file to the project and rendering the contents of the file to the browser. In doing this, developing and maintaining the script will be easier as you will be editing the code just like any other text based file.

My wife and I started doing TaeKwonDo about six months ago and it has been a lot of fun doing it together. After only three weeks, we were able to do a triple grading to take us from White belt to Orange three tip. Since then we have done a double grading to go to Yellow two tip. The next grading is in a week or so. We will be able to go to Yellow three tip, or maybe double grade again to get to Green belt.

I have now been asked if I want to become an instructor. After several weeks thinking about whether I would be able to fit it in, I am going to give it a go.

Over the last couple of months, I have been developing a new skinning engine for the new versions of my applications. To help me test the new skin object model, I have created a skin builder application that relies heavily on the property grid control.

I quickly found that I didn’t like the default support for bitwise enum types in the property grid. For these enum types, the property grid uses the normal drop-down list and allows for only one item to be selected. This means that if you want to set multiple values, you have to manually enter them in the property grids textbox.

I thought that a better way of doing this would be to use a CheckedListBox control instead of the normal ListBox control in the UITypeEditor. True to my style, I rushed in to coding it, only to find out that several other people have done it. It was fun, but with my lack of time, I should have checked Google first. In any case, to maintain some sense of worth and satisfaction, instead of throwing away my code, I made it better than the examples I have seen so far.

Along my travels of creating web custom controls, I have put a lot of effort into making the controls as dynamic as possible on the client. This typically means running a JavaScript function as a result of some event, such as the page load or control click. I quickly realized that to make a control that is generic and reusable, I need to have some code that always runs on an event, such as control event specific behavior, but I also need a way of allowing the implementer of the control to run their own code based on the same event.

Take my (work in progress) ImageButton control from the previous articles for an example. When the user clicks the button, a script will need to run that will determine if the button should have a toggle behavior and how the button should render itself with its defined set of images. This code must always run as it is part of the controls intrinsic behavior.

The implementer of the ImageButton control may also want to run their own script when the button is clicked. If the implementor can’t run their own code on the client, then the control will only be useful as a server control that fires a click event on the server. I want the implementor to be able to run their own function when the onclick event fires, and also allow them to stop the postback as required.

Metadata attributes are attributes that are assigned to classes, variables, structures, enums, procedures, functions and properties (and no doubt others that I haven’t come across). They are usually used to inform the IDE how to handle the objects that the metadata attributes are assigned to. They can also be used by run-time code to handle additional information.

Metadata attributes are defined on items with an < > combination before the declaration of the Item. For example, defining Category and Description attributes to a Text property would look like this:

Late last year I wanted to move my RSS reader (currently Sauce Reader) from my work desktop to my laptop. Doing this meant that I was able to keep up-to-date with feeds over the weekend. It did come with a hitch though. My work desktop sits behind a proxy server and I haven’t yet come across a feed reader that does true auto-detection of proxy settings like IE does.

After I moved the feed reader to my laptop, it meant that I had to put the proxy settings either in the feed readers settings or in the IE settings. I know that a lot of other applications use IE’s settings so that was the best place as all the other applications would benefit from the settings. I set the feed reader to use the IE proxy settings and entered the proxy server and port number in the IE options dialog. Every time I went to work, I would have to go into the IE settings and enable the proxy setting so that IE and all the other applications would have Internet access. When I went home, I would have to disable the proxy settings again. This very quickly became a major hassle.

Just before Christmas, I thought that if I could identify the domain that the computer was on, I would be able to automatically determine if I was plugged into work or not and change the proxy settings as appropriate. It turns out that I wasn’t able to programmatically determine the current domain (anyone achieved this?), but at the start of January, I had another idea. I could get the IP address of a known computer name, in this case, my work computer.

Custom attributes rendered in HTML tags are quite useless by themselves, however they do become quite powerful when a little script is added. I usually add custom attribute values to a controls rendered HTML tag to store server-side property values that are relevant to the client. This allows script running on the client to use and change those values in order to make a richer control.

In the last article, I created a very simple Label control that inherited from Control. This time I am going to create an Image Button control. It turns out that there is already an ImageButton control that is intrinsic to ASP.Net. The ASP.Net ImageButton control does almost everything I want, so a lot of the work is done for me and I don’t have to worry about coding for styles, postback or server event implementation. Because of this, inheriting from System.Web.UI.WebControls.ImageButton instead of Control or WebControl will cut out a lot of work in developing the control.

Building on the ASP.Net ImageButton, there are a few extra features I want to add with my ImageButton control. I want it to be able to raise a client click event and optionally do a postback, handle mouseover and mousedown images and to be able to act as a toggle button as well as a press button. To support these features, there are several properties that will be exposed by the server control. These properties include ClientClickHandler, ImageDownUrl and ImageUpUrl among others. The ClientClickHandler property value is the JavaScript function to call on the client when the control is clicked. This property has no use on the server at either design-time or run-time, but must be stored in the client tag so it can be used by the client code. The ImageDownUrl and ImageUpUrl property values are also required on the client, but their values may also be used for design-time rendering on the server.

The first decision that needs to be made when creating a web custom control is what the control will inherit from. At the minimum, you will inherit from System.Web.UI.Control which will hook the control into the web page rendering. The Control object only exposes ID, DataBindings, EnableViewState and Visible properties. This is great for very simple controls, but controls are usually required to have much better rendering capabilities.

Inheriting from System.Web.UI.WebControls.WebControl will intrinsically provide better rendering support. WebControl itself inherits from Control and exposes a lot of properties that typical web controls will use, such as Background Color, Borders, Font etc etc. Depending on how you allow a WebControl object to render itself, a lot of these properties will be handled for you, usually by adding values to the style attribute of the controls rendered HTML tag.

I almost always inherit from WebControl, but in this example, I will inherit from Control because I want to create a very simple lightweight Label control. By lightweight, I mean that I want it to render a Text value, but no HTML tags. Because there are no tags, there isn’t a point allowing the implementer of the control to manipulate properties such as BackColor.

I have just come back from a little holiday up in the mountains. It seems that Australia has found some new species of Kangaroos and Wombats. Be on the lookout if you are driving on Australia’s rural roads.

These ones gave me a bit of a giggle too: