Creating the Preferences Page
|
The page you ll create incorporates all the basic features of getting and setting user preferences: presenting choices to the user, storing the preferences somewhere, and applying them as appropriate.
There are many ways in which you could ask the user for preferences. In this example, you ll create two versions of the preferences page, a page that illustrates the basic principles of storing preferences, and a smarter page that automatically previews your preference choices. Both versions have the following basic functionalities:
-
A check box that lets the user choose whether to show captions.
-
A drop-down list that contains a selection of colors to let the user set the caption color.
-
A set of option buttons that lets the user select between three fonts: Arial, Times Roman, and Courier.
You ll also add a preview feature that shows a sample caption in the color and font that the user has selected. If the user chooses not to show captions, the sample caption will disappear. After setting all the preferences, the user clicks a Save button. The Web page gathers the user s preferences and stores them in a cookie. (I ll discuss cookies in detail later in this chapter.) Finally, the user will be able to click a button to jump to the slideshow.
Later in the chapter, you ll add an instant preview feature to the preferences page so that the sample caption will reflect changes as soon as the user makes them.
We ll start by creating a new page where users can set preferences. To get you oriented, Figure 6-1 shows what the preferences page might look like when finished.
Figure 6-1: The preferences page in action.
Create the preferences page and add controls
-
In the directory where you created
Slideshow1.aspx, create a new page named SlideshowSettings.aspx. -
Add a heading and captions as static HTML. Follow the model of the preceding screen shot for the layout.
-
From the Web Controls tab of the Toolbox, add the following controls to the page and set the specified properties. (As always, the settings I suggest are not gospel; you can name the controls as you like. Just be sure to substitute your names as appropriate later in the code.)
Control
Property Settings
CheckBox
ID: checkShowCaptions
Checked: True
Text: Show captions
DropDownList
ID: listColorNames
RadioButton
ID: radioFontArial
GroupName: fontName (Option buttons that have the same group name act as a unit, allowing only one to be selected at a time.)
Checked: True (This button will be checked by default.)
Text: Arial
RadioButton
ID: radioFontTimes
GroupName: fontName (Same as the previous radio button)
Text: Times Roman
RadioButton
ID: radioFontCourier
GroupName: fontName (Same as the two previous option buttons)
Text: Courier
Label
ID: labelSampleCaption
Text: Sample Caption
Font.Name: Arial
Button
ID: buttonPreview
Text: Preview
Button
ID: buttonSavePreferences
Text: Save Preferences
Button
ID: buttonDisplaySlideshow
Text: Display slideshow
Populating the DropDownList Control
The drop-down list needs to show a list of colors. In this page, you ll hard- code the colors into the DropDownList control. It s also possible to load the list dynamically in various ways, as I ll explain in Chapter 12.
Add items to the DropDownList control
-
In Design view, select the DropDownList control.
-
In the Properties window, click inside the Items property box. An ellipsis button will be visible. Click that button to display the ListItem Collection Editor dialog box, as shown in this screen shot.
The items in a DropDownList control (and other controls, too, such as ListBox) are stored in a collection. A collection is like the array you used in Chapter 5 to store the file names and captions of the photos. You add elements differently than in an array, though, and you can reference the elements not just by index number, but also by a name. For now, just make a note that the items in a DropDownList are members of a collection.
In the dialog box, click Add. Under Members, you will see a new item called ListItem. In the right-hand pane is a mini Properties window specifically for that item.
Set the Text property of ListItem to Black. Notice that the name of the item changes to Black in the left-hand pane as well, as shown here:
Add several more items and change the text for each one. I suggest that you name them Red, Green, DarkGreen (one word), Pink, and Blue, as shown in the following illustration. However, you can add as many colors as you like. (See the sidebar at the end of this procedure for color choices.)
