Designing the Application

Table of Contents

Designing the Application

Designing the Application
Designing the Application

You should now see a new new tab in the center labeled Form1.cs [Design]* next to the Start Page. In the center of the window you can see your new form respectively named Form1. Click directly on this. A dotted line will appear around it and the Properties Window will fill with values.

The first thing you should do is name your form appropriately. Find (Name) in the properties window (you may need to scroll) which should have a value of Form1. Change the value to frmMain. Preceding the names of your objects with what they are (frm = form) will create legible, clean code that is easy to read when you edit your code 1 month later. In this tutorial all objects will have a preceding name which specifies what they are.

The 2nd thing you should change is the text of your form which currently states Form1. The text label is simply the “title” of your form. Scroll down (or up) in the properties view until you find Text with a value of Form1. Change the value to “Hello World”.

This image has been resized. Click this bar to view the full image. The original image is sized 600×429.

Adding functionality
Mouse over the Toolbox tab on the right hand side to view the objects you can use:

Click on Button. Place your mouse cursor over the center of your form (frmMain), left-click and hold. Move your cursor to the right and bottom to create a square. Release the mouse button. You should now see a button in the center of your screen with the Text/Title of Button1.

This image has been resized. Click this bar to view the full image. The original image is sized 600×429.

First things First
Click on the button (button1) to see the properties of the object. Find (Name) with the value of button1 and change the value to btnHelloWorld. Scroll down and find Text with the value of button1. Change the value to Click Me.

You have now created a button and properly named/labeled it. The next step is adding the code that makes it work. Double click the button (btnHelloWorld) in the center of your form. This actually creates the button click event function and brings up the code window.

This image has been resized. Click this bar to view the full image. The original image is sized 600×429.

Your cursor is directly below the opening curly bracket { and directly above the closing bracket }. The first thing you should do when a new function is created is comment the code. The Visual Studio 2008 IDE has built in functions that assist you in this task. Press the up arrow three times. Press Enter once. Now press the forward slash (/) three times. As you left of the forward slash the third time XML comments are created for entering function data. Your cursor will be between the summary tags. Enter here what the function below will do. Our function will create a message box with the text “Hello World”. Hence, enter:

Code:
///

/// Function to create Message Box with
/// text “Hello World”.
///
Notice as you press enter three new forward slashes (/) are entered automatically and your cursor is indented to the correct place. This is one of the great features of the VS IDE, automatic indention. You may not appreciate it much now but if you ever do work in Notepad or a similar non programming text editor you will learn how much it helps.

Move your cursor down below the function btnHellowWorld_Click:

Code:
private void btnHelloWorld_Click(object sender, EventArgs e)
{
Your cursor should be just below the opening bracket { and just above the closing bracket }. Type MessageBox.Show(“Hello World”);. Notice the autofill drop down that appears. Another feature of the Visual Studio suite that you will find very useful in time. As you type functions are highlighted in this autofill, pressing enter before you finish typing will automatically fill the text in for you.

Baca Juga :