Creating the User Interface

Now that we've completed the design requirements phase and have decided what features our financial calculator will provide, as well as how the interface will appear to the user, it's time to actually start creating our ASP.NET web page.

The first task is to create the user interface (or UI), which is considered the HTML portion of our ASP.NET web page. To construct this UI, we'll add a TextBox Web control for each of the three inputs as well as a Button Web control that, when clicked, will perform the necessary computations.

By the Way

After creating the user interface, we will turn our attention to writing the needed source code to perform the financial computations.

To start creating the user interface, launch Visual Web Developer and create a new ASP.NET website on your computer's file system, just as we examined in the preceding hour. As we've seen, this will create a website with an ASP.NET page named Default.aspx. For practice, go ahead and delete this ASP.NET page and add a new page named FinancialCalculator.aspx. When you're creating a new ASP.NET page, remember that the item type to select is Web Form; also be sure to choose Visual Basic as the language and check the Place Source Code in a Separate File check box.

Adding the Three TextBox Web Controls

Let's start by adding the TextBox Web controls for our user's three inputs. While we've yet to examine using the TextBox Web control in any of our previous examples, it's fairly straightforward. Just like with the Image and Label Web controls we added to our page in Hour 2, "Understanding the ASP.NET Programming Model," adding a TextBox Web control to a page is no different. Simply drag the TextBox from the Toolbox onto the page, either from the Design view or Source view. After adding the TextBox to the page, you can configure its properties through the Properties window (or by typing them in directly in the Source view, if you prefer).

Watch Out!

There is one caveat that's important to mention. When adding Web controls that collect user inputslike TextBoxes, RadioButtons, DropDownLists, Buttons, and so onyou must place these Web controls within the page's Web Form. The Web Form is the name for that <form runat="server"> markup we talked about in Hour 2. If you are dragging controls onto your page from the Design view, you need not worry about this because the controls will automatically be added within your page's Web Form. However, if you are adding the controls from the Source view, make sure you drag the Web controls onto the page somewhere between the opening <form runat="server"> tag and the closing </form> tag.

We'll be discussing why this is essential in detail in Hour 9, "Web Form Basics."

Before we drag a TextBox Web control onto the page, let's first create the title for the TextBox we're going to add. Because the first input is the amount of the mortgage, start by typing in this title in the FinancialCalculator.aspx page's Design view: Principal Amount:.

Next we want to add a TextBox Web control after this title. To accomplish this, make sure that the Web Controls tab from the Toolbox is selected; then drag a TextBox control from the Toolbox and drop it into the page after the Principal Amount: title.

Take a moment to make sure your screen looks similar to Figure 4.3.

Figure 4.3. At this point you should have a title and a single TextBox.

By the Way

Recall that an ASP.NET web page's HTML portion can be crafted using either the Design view or Source view. For most of the examples throughout this book I'll be using the Design view in the screenshots that highlight the progress. Feel free to use the view that works best for you, though.

Currently, the TextBox Web control we just added has its ID property set to TextBox1. Because we will later need to programmatically refer to this ID in order to determine the value of the beginning mortgage principal entered by the user, let's choose an ID value that is representative of the data found within the TextBox. Specifically, change the ID property to loanAmount.

Did you Know?

To change a Web control's ID property, click on the Web control, which will load the Web control's properties in the Properties pane in the lower-right corner. Scroll through the Properties pane until you see the ID property. This is the property value that you should change. Note that in the list of properties in the Properties pane, the ID property is denoted as (ID).

Now let's add the second TextBox, the mortgage's interest rate. Add it just as we did the previous TextBox Web control by first creating a title for the TextBox. Type in the title Annual Interest Rate:. Next, drag and drop a TextBox Web control after this title and change the TextBox's ID property to rate.

Finally, add the third TextBox, the duration of the mortgage. Start by adding the title Mortgage Length:. Then drag and drop a TextBox Web control after the title. Set this TextBox's ID to mortgageLength.

Did you Know?

You might want to type in some text after each TextBox Web control to indicate the units that should be entered into the TextBox. For example, after the "Annual Interest Rate" TextBox, you might want to add a percent sign so that the user knows to enter this value as a percentage. Similarly, you might want to enter the word years after the "Mortgage Length" TextBox. Figure 4.4 includes these optional additions.

Figure 4.4. The Design view, after all three TextBox Web controls have been added.

Figure 4.4 shows the Design view after all three input TextBox Web controls have been added.

Did you Know?

Figure 4.4 shows the TextBox Web control titles in the standard font. Feel free to change the font or the aesthetics of the HTML portion however you see fit. Likewise, you can adjust the font, color, border, and other aesthetic settings of the TextBox Web controls themselves through the Properties pane.

Adding the Compute Monthly Cost Button

After the user has entered inputs into the three TextBox Web controls, we want to be able to take that information and perform our financial calculation. As we discussed in Hour 1, "Getting Started with ASP.NET 2.0," though, there is a temporal, physical, and logical disconnect between the clientthe end user's web browserand the serverthe web server software that renders the ASP.NET pages.

When the user visits the FinancialCalculator.aspx ASP.NET web page via her browser, she is receiving HTML that contains the user interface we created from the Web controls and static HTML. Once the user's browser has received our ASP.NET page's HTML markup, there's no communication between the client and the server until the client explicitly makes a request back to the web server. Therefore, for the calculation to take place, the inputs entered by the user must be submitted back to our ASP.NET web page (FinancialCalculator.aspx). Once our ASP.NET web page receives these user-entered values, it can perform the financial computation and return the results.

For the client to post the inputs entered by the end user back to the web server, an HTML <form> is used. This process typically commences when a submit button is clicked. We can add such a button by adding a Button Web control to our ASP.NET web page.

By the Way

The intricacies involved in having the browser send back a user's inputs to the appropriate web page are handled for us automatically by the browser's built-in functionality and the HTML markup produced by the ASP.NET web page and its Web controls.

Although an in-depth understanding of this low-level plumbing is not a requisite, it is important to have, at least, a cursory understanding. For now, let me waive my hands and we'll not worry about what's happening behind the scenes; however, we will return to this topic, discussing the specifics involved with collecting and computing user input in Hour 9.

To add a Button Web control, drag the Button Web control from the Toolbox onto the page, dropping it after the last input title and TextBox. When you add a Button Web control, the Button's caption reads "Button." To change this, click on the Button, and then in the Properties window, change the Text property from Button to Compute Monthly Cost. This will change the caption on your button to "Compute Monthly Cost." Also, while in the Properties window, change the Button's ID propertylisted in the Property window as (ID)from the default Button1 to performCalc.

Take a moment to make sure that your screen looks similar to Figure 4.5.

Figure 4.5. A Button Web control has been added.

Creating a Label Web Control for the Output

The final piece we need to add to our user interface is a Label Web control that will be used to display the output of our financial calculation. Because the Label Web control will display the output (the amount of money the mortgage costs per month), the web page's final result will appear wherever you place the Web control. Therefore, if you want the output to appear at the bottom of your ASP.NET web page, simply drag and drop a Label Web control after the existing content in the designer. If you want the output to appear at the top of the web page, place it before the existing content in the designer.

After you have added the Label Web control, you will see that it displays the message "Label". The Label Web control displays the value of its Text property, which is configurable via the Properties window. Figure 4.6 shows the designer with the Label Web control added.

Figure 4.6. A Label Web control has been added to the ASP.NET web page.

Because we don't want this Label to display any content until the user has entered three inputs and the calculation has been performed, clear out the Label's Text property.

To clear out a property value for the Label Web control, first click on the Label Web control so that its properties are loaded in the Properties pane. Then, in the Properties pane, locate the Text property and erase the Text property's value by clicking it and pressing Backspace until all of the characters have been erased.

After you clear out the Label's Text property, the designer will show the Label Web control as its ID property, enclosed by brackets. Currently, the Label Web control's ID property is Label1, meaning that in the designer you should see the Label Web control displayed as [Label1]. Go ahead and change the ID property of the Label Web control from Label1 to results, which should change the Label's display in the designer from [Label1] to [results].

Figure 4.7 shows the designer after the Label Web control's property has been changed to results.

Figure 4.7. The Label Web control's ID has been changed to results.

Completing the User Interface

At this point we have added the vital pieces of the user interface. If you want to add additional user interface elements at this time, perhaps a bold, centered title at the top of the web page, or a brief set of instructions for the user, feel free to do so.

Now that we have created the HTML portion of the ASP.NET web page, we are ready to create the source code portion. In the next section we will tackle this task.