Building the User Interface with Web Forms

Using Advanced Web Forms Controls

While it is easy to build a form with controls that are available as part of HTML, WebForms become even more useful (and colorful, and easy to use) when you use some of the more advanced controls, such as the Calendar, AdRotator or Data controls. While they are built using more simple controls, they make building user interfaces easier.

The Calendar control shows, strangely enough, a monthly calendar. This control allows the user to view and select dates more easily than by using a TextBox. In addition, by using the Calendar, you reduce the chance of the user entering a date in an invalid format. The Calendar control has a huge number of properties, however most of them affect how the Ccalendar control is displayed. Just about everything visible on the control can be adjusted, the colors, whether the weekday or month names are abbreviated, and so on. Table 10.3 outlines some of the most useful properties, methods and events of the Calendar control.

Table 10.3 Important characteristics of the Calendar control

Item	Property,	Description
SelectedDate	Property	This is the date that will be returned by this control.
VisibleDate	Property	This is the date showing in the control. While this is generally the same as the SelectedDate, it might be _different, particularly if you are trying to set the date through code.

Let's update the MadLib project to use a Calendar control instead of the TextBox for the date entered. You can either edit the old form, or create a copy if you want to view both.

Delete the date TextBox, and add a Calendar control. At this point, you have the choice of either playing with the properties that affect the appearance of the Calendar, or being lazy and selecting the AutoFormat link that appears at the bottom of the Properties window when you select the Calendar control. Personally, I clicked the link and selected "Colorful 2". Why fuss and make something ugly when a professional has made something look good (one of my programming strategies). Set the Calendar's Name property to 'calDate'.

We will also need to change our code slightly, due to the change in the name of the _control. Listing 10.3 and 10.4 show the new, changed code.

Listing 10.3 Altered code for the Clear button

1   Public Sub btnClear_Click(ByVal sender As Object, ByVal e As System.EventArgs)
2     txtName.Text = ""
3     calDate.SelectedDate = DateTime.Today
4     txtVerb.Text = ""
5     txtNumber.Text = ""
6     txtOccupation.Text = ""
7     lblResult.Text = ""
8   End Sub

Only a single line of code is changed. As we no longer have the TextBox txtDate, we cannot set it to "". Instead, we can reset the Calendar to select today (DateTime.Today), as we do in line 3.

Listing 10.4 Altered code for the Write Story button

1   Public Sub btnWrite_Click(ByVal sender As 
Object, ByVal e As System.EventArgs)
2     'here's were we combine the selections the user 
has made into the final story
3     Dim sTemp As String
4     sTemp = "Diary of " & txtName.Text & " for " 
& DateTime.Today.ToString & "<br>"
5     sTemp &= "On " & calDate.SelectedDate & " I 
started to program in Visual Basic.NET. "
6     sTemp &= "I'm " & rlstEmotion.SelectedItem.Text & "! "
7     sTemp &= "I think I'm going to go out and " & txtVerb.Text
8     sTemp &= " my new " & txtNumber.Text
9     sTemp &= " PicoHertz " & cboFruit.SelectedItem.Text
10     sTemp &= " and become a " & txtOccupation.Text & "."
11     'the final story goes into the Label control
12     lblResult.Text = sTemp
13   End Sub

Again, the only change here is with one line, in this case line 5. Rather than retrieving the (hopefully) date in the TextBox, we retrieve the selected date from the Calendar with calDate.SelectedDate. (Doesn't this property thing make sense? That's why they didn't call it Visual Complex.NET)