How to create a web service to produce random web colors

This tutorial will show how to create and consume a simple .NET web service. The web service in question will expose a function that generates and returns a random web color code. The web color can subsequently be used by any application and in any programming language, due to the versatile nature of Web Services. We will first build the web service and then a sample application that uses that web color.

Windows 2000/XP Professional with Internet Information Services running
Visual Studio.NET 2003

Visual Studio .NET environment - you should know your way around in the IDE.
Object Oriented Programming, Design and Analysis (OOP/OOD/OOA) in general. While the service is not too complex, this tutorial assumes a certain familiarity with modern programming in general.
Very basic web site color generating techniques, such as what is RGB and how that works.

Task 1: Implement the ColorWS Web Service
Task 2: Implement the ColorWSDemo Client Application

Task 1 - Creating the Web Service to generate website colors

The first step we need to do is implement the Web Service. The sample code for the service can be found in the WebServiceSetup.zip file. Download and launch the executable file to install the source file and binaries on your system.

To create the project from scratch, follow the following steps:

1. Start Visual Studio.NET

2. Select File -> New -> Project

3. In the new dialog window that opens, select Visual C# Projects and ASP.NET Web Service

Notice that the location of the project is something like http://localhost/WebService1. You can change the name of the web service by modifying the WebService1 part of the address. Since the name of our service is ColorWS, enter that instead of WebService1. You can name the service anything you like, but remember your selection for later reference.

The http://localhost/ part of the location specifies that the service will be created on the server running on the local machine. It could be created on any IIS server in the world. Later you would be able to move your web color generator service somewhere else.

4. Click Ok and you should see a new solution with a project in it. The project represents the web service. Click on the show all files icon in the solution explorer.

ColorWS.asmx - this represents the service. This is the file that is actually retrieved first when you will be consuming the service
ColorWS.asmx.cs - code file
Web.config - configuration file

5. Double-click on the ColorWS.asmx file and then press F7 to go to the code file. Alternatively, double-click the ColorWS.asmx.cs file to open the code file. Of course, there is a lot of code in there needed to support the Web Service's functionality, but ignore that. For now, we need to define the method that will be exposed by the service.

6. In the body of the ColorWS class, write the following method that will generate and integer that corresponds to the RGB value of the web site colour.

public int GetRandomColor()
{
//define RED, GREEN, BLUE values to be used in random colour generation
int R, G, B;

//Generate the random R, G, B values
Random rand = new Random();
R = rand.Next(255);
G = rand.Next(255);
B = rand.Next(255);

//Create a color from the three R, G, B values
System.Drawing.Color c = Color.FromArgb(R, G, B);

//Return the name or the ARGB value of the colour
return c.ToArgb();
}

This method returns a randomly generated color as an integer.

7. on the line BEFORE the method definition, add this directive:

[WebMethod]

This actually instructs the compiler that this is a method exposed on the web.

Now the service is ready, just compile it and it should work if all is ok. You will notice the binary output of the service in the "bin" folder of the WS project. In this case the result is the "ColorWS.dll" file.

If you run the service as this point, .NET will generate a testing interface for you. Feel free to explore it and follow the instructions presented to test your service.

Task 2 - Consuming the Web color service

Now that the Color Web Service is finished, let's build an application that makes use of it. The application will consist of a Windows form displaying some text. The text and background colour will be changeable, with random colours generated by calls to the ColorWS service. You can download and install the Color Web Service Application and source code from here. To create this application, follow the next steps:

1) Start Visual Studio.NET

2) Select File -> New -> Project

3) In the new dialog window that opens, select Visual C# Projects and Windows Application

4) Name the project ColorWSDemo. You can use any name you want.

5) From the control toolbox, build the GUI of the project as shown in the figure below:

6) In order to use the web service in our application web color demonstration, we need to find its location and add a reference to it. Go to the "Project" menu, click "Add web reference".

7) In the new dialog box, select "Web services on the local machine" and then select the "ColorWS" service. You will notice a "Web References" folder will be added to the ColorWSDemo project. Expand the folder and rename the "localhost" reference to "ColorService". At this point you can consider the Web Service as a class defined in your project and you can use its methods as you would with a normal class.

8) Double click on the "Change background color" button and edit the method associated to the Click event like this so that it contains the following code:

//connect to the web service
ColorService.ColorWS cws = new ColorService.ColorWS();

//use the exposed method
int color = cws.GetRandomColor();

//use the returned value to change the background color
System.Drawing.Color c = Color.FromArgb(color);
label1.BackColor = c;

9) Similarly, edit the "Change text color" button Click handler to execute the code below:

//connect to the web service
ColorService.ColorWS cws = new ColorService.ColorWS();

//use the exposed method
int color = cws.GetRandomColor();

//use the returned value to change the background color
System.Drawing.Color c = Color.FromArgb(color);
label1.ForeColor = c;

10) Make sure that "ColorWSDemo" is the default project and run the solution. If all goes well, click on the two buttons in the Windows Form you created and you will see how the background and foreground colors change accordingly.

Annex - Installing the web color demonstration web service on your local machine

Web Color Randomiser Service (download) - IIS server required!
Web Color Randomiser Client (download)

These will install the source code (.cs files), resource files and the binaries (.dll, .exe).

top