Introduction
This article describes the construction of a custom control used to display a daily Dilbert comic on a site. The control is extremely simple to build and it is serviced through a public web service made available by Chandu Thota on eSynaps.com. Once built, the control can be dropped on any web page, and it will retrieve a new comic from the Scott Adam's Dilbert archives for display each day.
The web service returns either a path to the image file or an encoded copy of the image. This example just uses the file path option to populate the image upon initialization.
Figure 1: Daily Dilbert Custom Control in Use
Getting Started
The files included with this project include a web control library project and a demonstration web site. In order to get started, open the included zip file and install the two projects onto your file system. Open IIS and create a virtual directory for the web application. Open the solution into Visual 2005 and make any changes necessary to bring both projects into the solution. Once properly configured, your solution explorer should show these projects, references, and files:
Figure 2: Solution Explorer with Web App and Control Library
In examining the solution, note that the “Dilbert” control library contains only a single control and that control is called “DilbertControl”. This project also includes a web reference that points to the http://www.esynaps.com/WebServices/DailyDiblert.asmx?op=DailyDilbertImagePath; this public site supplies the web service used to capture the Dilbert archive cartoon displayed by the control.
The web application contains only a single web page (default.aspx) and includes a reference to the “Dilbert” DLL.
The web application serves as a container used to test the custom control. The page itself contains no addition code and the only other element on the page displays the text “The Daily Dilbert”.
The Code: Dilbert Control
The “Dilbert” custom control is constructed to retrieve the information from the web service upon initialization; in the information retrieved is a path to the URL of the cartoon image. Upon initialization, the URL is retrieved and when the control is rendered, an image is created and added; its imageURL property is set to point to the URL captured from the web service.
In examining the code, note that, only the default imports are included in the project. The class itself inherits from the WebControl class.
Imports System
Imports System.Collections.Generic
Imports System.ComponentModel
Imports System.Text
Imports System.Web
Imports System.Web.UI
Imports System.Web.UI.WebControls
<ToolboxData("<{0}:DilbertControl " & _
"runat=server></{0}:DilbertControl>")> _
Public Class DilbertControl
Inherits WebControl
Following the class declaration, two member variables are declared; one for the web service and one string variable used to contain the path to the cartoon image file.
Private mDilbert As Dilbert.com.esynaps.www.DailyDilbert
Private mDilbertPath As String
Next up is the initialization handler:
Private Sub DilbertControl_Init(ByVal sender As Object, _
ByVal e As System.EventArgs) Handles Me.Init
Me.Width = 600
Me.Height = 100
Try
mDilbert = New Dilbert.com.esynaps.www.DailyDilbert
mDilbertPath = mDilbert.DailyDilbertImagePath()
Catch
Exit Sub
End Try
End Sub
The control initialization handler creates a new instance of the “mDilbert” member variable and then sets the “mDilbertPath” string variable to contain the image URL returned by calling the services “DailyDilbertImagePath” web method.
The last detail to tend to is the rendering; here RenderContents is overridden and, with a Try – Catch block, a Div is started and then an image with the image URL property set to point to string variable containing the URL captured from the service, the image is then rendered and the Div is closed. If an error occurs, the HtmlTextWriter will just print out “Dilbert is on vacation” in lieu of the cartoon.
Protected Overrides Sub RenderContents(ByVal output As HtmlTextWriter)
Try
output.RenderBeginTag(HtmlTextWriterTag.Div)
Dim img As New Image()
img.ImageUrl = mDilbertPath
img.RenderControl(output)
output.RenderEndTag()
Catch ex As Exception
output.Write("Dilbert is on vacation.")
End Try
End Sub
Summary
This project was just for fun although it does show a very basic example of an easy approach to building a custom control that interacts with a web service.
