Lab: Creating Custom Controls

Lab: Creating Custom Controls

In this lab, you ll create a test Web application project to contain the three different controls you create in each of the exercises. When complete, the controls will appear on the Web form, as shown in Figure 11-17.

Figure 11-17. The completed test application with user and custom controls

Estimated lesson time: 60 minutes

Exercise 1: Create an AddressBox User Control

In this exercise, you ll create a Web application containing a user control that gathers name and address information. Use the skills you developed in Lesson 1 to create and test a user control by completing the following major tasks:

1. Create a Web application project.

2. Add a user control page (.ascx) that contains text and controls for collecting name, address, city, state, and ZIP code information.

3. Use validation controls within the user control to ensure that required fields are completed.

4. Use a Grid Layout Panel HTML control to format and position the text and controls within the user control.

5. Provide a Click event that is fired from the user control after the data entries are validated.

6. Provide public read-only properties to return address information from the user control.

7. Provide a public read/write Style property to support absolute positioning in grid layout.

8. Test the user control by adding it to a Web form and accessing its event and properties from code.

When you have finished (or if you get stuck), compare your results to the AddressBox user control included on the companion CD.

Exercise 2: Create the DigitPad Composite Custom Control

In this exercise, you ll create a Web Control Library containing a custom control that allows the user to enter numbers by clicking buttons. Use the skills you developed in Lesson 2 to create and test the custom control by completing the following major tasks:

1. Add a Web Control Library project to the solution you created in the previous exercise.

2. Add a reference from the user control project to the Web Control Library project so that you can test the custom control from Web forms within that project.

3. Create a composite custom control that uses InputButton HTML controls to accept numeric input.

4. Provide a postback event that is fired from the custom control once the numeric data is complete.

5. Provide a public read-only property to return the number entered in the control.

6. Test the user control by adding it to a Web form and accessing its events and properties from code.

When you have finished, compare your results to the DigitPad custom control included on the companion CD.

Exercise 3: Create the BarChart Rendered Custom Control

In this exercise, you ll add a rendered custom control to the Web Control Library you created in Exercise 2. The custom control will create a simple bar chart from numbers entered between the HTML begin and end tags of the custom control. Use the skills you developed in Lesson 3 to create and test the custom control by completing the following major tasks:

1. Add a new Web custom control class to the Web Control Library project you created in the previous exercise.

2. Create a Values property that gets an array of data from text entered between the begin and end tags of the custom control.

3. Create a ChartTitle property that sets or returns a heading displayed at the top of the chart.

4. Override the control s Render method to create a bar chart from the data in the Values property. To simplify the charting, use Horizontal Rule HTML controls (<HR>) to create the chart.

5. Test the user control by adding it to a Web form and accessing its events and properties from code.

Compare your results to the BarChart custom control included on the companion CD.