Creating Your First Windows Application
Now that you have learned some of the basics of using the Visual Studio IDE, you can put that information to use building an application without getting into very much code. This exercise focuses on using the IDE itself, which means that you are going to be creating a relatively simple application. For this example, you will make a Windows application (an application that uses the Windows user-interface and runs locally on your machine) that allows a user to enter two numbers. The application will then add the numbers, displaying the result.
Create the Project
Using the menus, choose the File, New, Project command, bringing up the New Project dialog box. Under the Visual Basic category, select the Windows Application icon and change the project name from WindowsApplication(x)—the numbered default name—to Adder (unless you are bothered by snakes, in which case you can name the project whatever you want). The new project will already contain a form, which is all you need to get started on the application. Visual Studio automatically creates a Solution folder to hold your new project, naming it Adder as well. Click OK after you have entered the correct project and solution names.
Develop the User Interface
You need to have three text boxes and a single button on the form. Positioning is not that important, but you might want to make your interface look something like Figure 1.18. Follow these steps to set up your form:
1. | Double-click Form1 in the Solution Explorer, bringing it up into the designer window in the center of the IDE. |
2. | Now, with the form in Design mode, select or open the Toolbox window. This window, which will show all the available objects that can be placed onto your form, contains a TextBox control and a Button control. |
3. | To place one of these controls onto your form, click and drag the control into position on the form. |
4. | When it is on the form, select the control and use its handles to resize it to the desired shape and size. |
5. | Play with resizing and moving these controls until you get all three text boxes and the single button onto the form and looking like the example (Figure 1.18). After everything is in place, you will change a few properties of these controls. |
Figure 1.18. Arrange the three text boxes and one button on your form to approximate this appearance.
Select the first text box (the one closest to the top on the form) and display the Properties window (press F4 or select View, Properties Window from the menu, if the window is not already visible). Many properties are listed, but you are only going to change two of them:
Text (under the Appearance group)— Represents the contents of the text box. Erase the contents of this property to make the text box blank when the program starts.
(Name) (under the Design group)— In the code, you will refer to this text box using the name in this property, which defaults to a relatively meaningless name, such as Text2 or Text1. For the example, change this to txtFirstValue.
Continue with the other two text boxes, changing their Text property to blank and their names to txtSecondValue and txtResult, respectively.
Now select the button to display its attributes in the Properties window. For this object, you will also be changing only two values, (Name) to btnAdd and Text to Add.
Finally, just because you can, you will change one of the properties of the form itself. Select the form (click somewhere on the form that is not another object) and scroll through the list of properties to find the Text property in the Appearance group. For a form, this property represents its caption (the text displayed on the form's title bar), which you can set to Simple Adder for the example.
Running the Project
Although you have entered no code, the project can be run just as it is now. When you run the application, Visual Studio compiles your code into an executable and then runs it. Unlike Visual Basic 6.0, there is very little difference (but there is some) between running the application inside or outside of the IDE. In both cases, the system is compiled and then run, but when you run within the IDE, it is possible to break the code execution at certain points and debug it as it runs. Creating an executable, or other type of output file from your project, is also known as building.
To run a project within the IDE, select Start from the Debug menu, press F5, or use the Toolbar button that looks like a right-facing arrow (or the play button on a VCR). Try this now, with the Adder project you already have open, and you will see the form that you have been designing appear in front of the Visual Studio IDE. Without your having written a single line of code, the form is functional. You can drag it around and minimize it, all because of the underlying .NET Framework and the IDE that allows you to visually create a user interface and that produces the code required to make it work. Although you have written no code, a great deal of code has been generated by the IDE, and that is what is being executed when the project is run.
Building the Project
Building a project is the creation of an executable or other output files. For a Windows application like the example, this means compiling your code into an .EXE file, along with any other associated files. This is an essential step in running the application, so it occurs whenever you click the Start button inside of Visual Studio, but you can also just build it directly (without running the application) by selecting Build Solution or Build <Project Name> from the Build menu.
Project Build Settings
To create the output files for your project, select Build from the Build menu (not a very creative menu name, but easy to understand). This command does not appear to do much, but the default Build settings have created an Adder.exe file for you, placing it within the bin subdirectory of your project folder. Unless you chose to customize the displayed path when you created this project, your project should be located at My DocumentsVisual Studio ProjectsAdder, and the executable at inAdder.exe within that directory. To see the default settings, and perhaps to change them, right-click your project in the Solution Explorer window and select Properties from the context menu that appears. The property dialog box for your project contains a variety of settings, but the ones that are relevant to the build process are described here:
Under Common PropertiesGeneral:
Assembly name— This value provides the first part of the filename for your output file. In the case of the example, it is Adder, so Adder.exe is created. Change it to MyAdder, and MyAdder.exe is created when you build.
Output type— Tells the IDE what type of file is to be created from building this project, an .EXE if Windows Application or Console Application is selected, or a .DLL, if Class Library is selected.
Startup object— Indicates the part of the project that should be run when the application is executed, by default. For the example, it should be Adder.Form1 to indicate that the form should be automatically run. Note that if you change, even temporarily, the Output Type from Windows Application to anything else, this property will also change and can end up set incorrectly.
Cancel the entire project property dialog box (by pressing the Cancel button along the bottom of the form) if you feel you have changed something that you do not know how to fix.
Common PropertiesBuild, despite the name, contains only a single property that is directly relevant to the build process. The Application Icon value determines the appearance of the final .EXE in Windows, and allows you to select any icon file (.ICO) you want.
Under the Common PropertiesBuild section, there is a Change button under Supported Runtimes. This button opens up a subject of discussion best left for advanced users, but I will briefly explain its purpose in case you ever have need of it. Underlying any .NET application is the .NET Framework and the Common Language Runtime (CLR). Just like any product, there are different versions of the CLR released at different times. Well, unlike Visual Basic 6.0 (which would only ever run against the Visual Basic 6.0 runtime files), a .NET application can use a different version of the Framework at runtime than it had available when it was originally compiled or built. As you might imagine, this is not a simple concept. Your code, which you tested against a specific version of the CLR (1.1 is what ships with Visual Studio .NET 2003), can end up being run against the older 1.0 version. If you leave the system set up as the default, your application will only run against the 1.1 version of the Framework, which is what is occurring when you are developing. The other two options are to allow it to run against either or to specify that it will only work with the 1.0 version of the Framework.
Although they are not the only other settings that affect the build, the last items I will mention are under Configuration PropertiesBuild. There you will find various debug-related settings as well as the Output Directory setting, which determines where the executable or other created files will be placed.
Build Configurations
At the top of the Project property dialog box is a drop-down list marked Configuration. Solution Configurations are a useful feature of the Visual Studio IDE, allowing you to create more than one group of settings for the same project. By default, two configurations are provided (Release and Debug), designed to indicate whether you are building output for testing purposes (Debug) or for actual deployment (Release). The settings for these default configurations are a good example of the purpose of Solution Configurations, setting the status of a variety of debugging features and even setting a different output location for each.
Using the Configuration Manager (see Figure 1.19), you can create as many different groups of settings as you want, or even remove an existing configuration. For now, you will likely want to leave the settings as they are, selecting the Release version of the output when you are deploying the project, and the Debug version when you are testing.
Figure 1.19. The Configuration Manager allows you to create different configurations for different purposes (testing, debugging, user acceptance, release, and so on), each of which can have different Build settings.
Adding Your Own Code
Up to this point, the sample project you have been working on has contained only code generated by the Visual Studio IDE. As you might have guessed from the names and layout of the form, this application will add the values in the first and second text box and place the result into the third text box. To accomplish this, you need to add code to the project that will run when the user clicks the Add button.
Using the IDE makes this a very direct process, just like in Visual Basic 6.0: Double-click the form in the Solution Explorer to make sure its Design view is visible, and then double-click the Add button. This will take you into the form's Code view, and into a subroutine that has been added by the IDE. By default, the event procedure uses the control name, btnAdd, followed by the event, Click. It is possible to associate procedures with events, regardless of their name, but, in this case, the btnAdd_Click procedure will be executed if the user clicks the button. It is easy to try adding your own code by using the MsgBox function. The MsgBox function enables you to display a message in a dialog box with a single line of code, like this:
MsgBox("The Button has been clicked")
The simplicity of using this class makes it perfect for use as a testing or debugging tool. Add the preceding code line to the btnAdd_Click subroutine and then run the project by pressing F5. After the form appears, try clicking the button. Every click should cause the message box to appear, showing you that the code in btnAdd_Click gets executed whenever the button is pressed.
Now that you can see how to execute code in response to a button click, you can create the real code for your project. The code needs to add two values together to produce a result, which sounds easier than it really is. The values you want are the contents of your text boxes, available through the Text property of those controls, but before you can use them in a mathematical equation (adding them together), you have to convert them from strings (text) into numbers. The following code, if put in place of the MsgBox call you added earlier, accomplishes what you need:
txtResult.Text = CStr(CInt(txtFirstValue.Text) _
+ CInt(txtSecondValue.Text))
This code converts the contents of the two text boxes into numbers (integers, in this case), adds them together, and then coverts the result back into a string (text), so that it can be placed into the third text box. It takes quite a few steps for something that sounds easy enough when first described, but data type conversion is discussed in detail in the next chapter.