Using Microsoft Visual Studio .NET

Creating a “Hello World” Program:

1. Start Microsoft Visual Studio

2. Go to File -> New -> New Project

3. In the New Project dialog box, select Visual C++ Projects, then the .NET folder, and Windows Form Application (.NET) from the right

4. Name the project ex001 and press OK

5. This is the layout of where the GUI will be designed, called the Windows Forms Designer.

6. Using the Toolbox tab on the left, click Button and drag it onto the form

7. Again using the Toolbox tab on the left, click TextBox and drag it onto the form

8. Click once on button1 and in the properties window change the Text to “OK” and the name to “okButton”

9. Similarly, click once on textBox1 and in the properties window change its Text to “Ready” and its name to outputBox. The window should now look something like below.

10. Now to add functionality, click the OK button once. On the properties window, select the lightning bolt on top.

11. Next to the Click field, type “OKButtonClick”. This will create an event called “OKButtonClick” in the Form1.h code file that will be called each time a user clicks the OK button.

12. After typing in the event name and pressing enter, a window should pop up showing that the event has been added to the Form1.h code (see first below). If it doesn’t pop up, the code can always be accessed by right-clicking on Form1 and selecting “View Code” (see second below)

13. Now add functionality to the code. The “name” field of each control created (i.e. a Button or TextBox) is how the control is referenced in the code. Therefore, to reference the TextBox, type outputBox.

14. All control objects are created as pointers. Therefore the arrow operator must be used to access their methods. Type “->” and then “Text”. Since “Text” is a managed string, this will access the Text that is displayed in the TextBox. Set it equal to “Hello World!” Similarly, to read a TextBox, you would assign a managed string to be equal to the TextBox text (i.e. String *read = outputBox->Text;)

NOTE: The function “InitializeComponent” is where all code for the control objects and the Form goes as properties are changed or controls added. If you expand this function to look at it, you can see how properties are accessed. DO NOT CHANGE THIS CODE DIRECTLY! If you do so, you will be unable to use the designer.

15. Now when you click the button, the text will change in the TextBox to say “Hello World!” Go to Build->Build Solution and then press Ctrl+F5 to run the program.

16. Click the OK button and the output should look something like below.

Creating a Program with a Timer:

1. Using the above example we will create a GUI that displays “Hello World” and counts down from 10 to 0. First, open up ex001 from above. The Form should look something like below

2. Using the Toolbox tab on the left side, add another TextBox below the Ready TextBox

3. Click once on the next TextBox and in the properties panel change the Text to “10” and the name to “counterBox”

4. Now, in the Toolbox tab on the left, find the Timer control. Click it and drag it to the Form. It will not directly appear on the Form where you placed it.

5. Instead, timer1 will appear in a yellow block below the Form. This means it is attached to your Form, but doesn’t show up because it is purely code implemented.

6. Click once on timer1 and in the properties panel change enabled to be True. This will enable timer1. Also change the interval from 100 to 1000, this means that any events associated with the timer will occur ever 1 second.

7. In the same properties panel select the lightning bolt to go to the list of timer1 events. Create a tick event named “clockevent”

8. This should bring up the code for clockevent. This is the code which will be executed every second.

9. We now need to add a variable that will be used as the actual counter. To do this, add “private: int counter;” below the Form1 constructor as shown.

10. Initialize this variable to 10 in the Form1 constructor below “InitializeComponent();”

11. Now back in our clockevent event, add the following code:

This code will decrement the counter, until the counter equals 0, upon which the counter will then be reset to 10.

12. We need to display this in counterBox. Remember, TextBoxes take strings and therefore setting the Text method of counterBox directly to the integer counter will not work. Instead, use the Convert class to convert the counter to a managed string as shown below:

13. Build and run the program. You will see the counter counts down and resets. As a quick way to stop the timer, let’s add some more functionality to the OKButtonClick event created in the last example. In this event, add the following code.

Now when the OK button is pressed, the counter should stop. Build and run the program to verify this.