Time Required: Less than 1 hour
This month, we create an ASP.NET Hangman control. Our control will render all of the necessary images, sounds, and scripts to create a richly interactive hangman game (see Figure 1). Our control will work with the most recent versions of Microsoft Internet Explorer, Mozilla Firefox, and Opera.
Using the Hangman Control
If you are anxious to start playing hangman, you can download the ZIP file that accompanies this article. Click the Download link above. The ZIP file contains two projects: the Visual Basic and the C# versions of the Hangman control. If you are interested in viewing or modifying the source code for the Hangman control, you can open the Visual Basic version with Microsoft Visual Basic 2005 Express Edition and the C# version with Microsoft C# 2005 Express Edition.
Here's how you use the Hangman control. Launch Visual Web Developer 2005 Express Edition and create a new website (select the menu option File, New Web Site). Next, add the control to your Toolbox by right-clicking beneath the General tab on your Toolbox and selecting the option Choose Items (see Figure 2). You must have a Web Form Page open in order to modify the Toolbox.
Next, under the .NET Framework Components tab, click the Browse button and browse to the Hangman assembly (dll file). There is both a VB.NET and C# version of this file (it doesn't matter which version you use since you can use a control written in C# with a VB.NET website and a control written in VB.NET with a C# website). The files are located in the following subfolders:
Click OK a couple of times to close the dialog boxes and the Hangman control should now appear on your Toolbox.
After you have added to the Hangman control to your Toolbox, you can add the control to any page simply by dragging the control onto a Web Form Page in either Design or Source view. That's all there is to adding this control to a page.
The Hangman control includes a default set of words included in an embedded XML file (these words are intended to be hard). If you prefer, you can associate a custom list of words with the Hangman control by assigning the path of an XML file to the control's WordsUrl property. The XML file should have the following format:
The file can contain as many words as you please.
Creating a Custom Web Control
The Hangman control is implemented as a custom ASP.NET Web Control. In other words, the control is a class that derives from the base System.Web.UI.WebControls.WebControl class. The Hangman class overrides one method of the base class: the OnPreRender() method.
There are three steps required for embedding a resource in an assembly:
1) Set the Build Action for the resource to the value Embedded Resource. You set the Build Action for a file by selecting the file, opening the Properties Window, and modifying the Build Action property.
2) Add a WebResource attribute to the AssemblyInfo file for each embedded resource. When working with Microsoft Visual Basic 2005 Express Edition, select the menu option Project, Show All Files and expand the My Project folder in the Solution Explorer Window to view the AssemblyInfo file. When working with Microsoft C# 2005 Express Edition, expand the Properties folder to view the AssemblyInfo file. You need to add the following attribute to embed an image resource named MyImage.gif:
<Assembly: WebResource("ProjectNamespace.MyImage.gif", "image/gif")>
[Assembly: WebResource("ProjectNamespace.MyImage.gif", "image/gif")]
By default, the ProjectNamespace will be the same as your project name. In the case of the Hangman project, the project namespace is Hangman.
3) Finally, in your code, you can retrieve a URL to an embedded resource by using the Page.ClientScript.GetWebResourceUrl() method. This method accepts two parameters: a type and a parameter name. Typically, you will pass the type of the current class and the name of the embedded resource. For example, you would use the following line of code to get the URL to an image named MyImage.gif located in the Hangman project:
Dim imageUrl As String = Page.ClientScript.GetWebResourceUrl( this.GetType(), “Hangman.MyImage.gif”)
string imageUrl = Page.ClientScript.GetWebResourceUrl( me.GetType(), “Hangman.MyImage.gif”);
Be aware that all resource names are case-sensitive -- even in the case of VB.NET. Make sure that you refer to the name of the resource in the same way with the file name, attribute, and GetWebResourceUrl() method.
When you click a letter, the selectLetter() function is called. If a matching letter is found, the display of matching letters is updated. If a matching letter is not found, the badGuessCount variable is updated and the image of the hangman is updated as well.
If you win a game, the doWin() function is called and if you lose a game the doLose() function is called. Both functions play a sound and both functions display a link that enables you to restart the game.
The biggest hurdle that I encountered while writing this control was getting the embedded resources to work. Once I resolved the namespace issues and got all of the case-sensitivity issues under control, everything worked out. I was very happy that I was able to get all of the resource (including the XML file with the list of words) embedded into one control.