Learning Visual C++ part 2

Now that we have created the first application in VC++, let’s continue exploring different controls and features of VC++.

First lets explorer different properties of textbox.

In the HelloWorld application you have created, double click the hello button to get its code section. Now add the following code after the existing code.

textBox1->ForeColor = Color::Red;

The ForeColor property of textbox (or any control for that matter) will change the font (or anything that appears in the front of control) to the color specified. Notice the right hand side of assignment operator =. We are using inbuilt class in VC++ to asign forecolor to textbox. When you press Color:: you will get drop down menu showing many options (colors) available for you to choose from.

Run the program and click on the hello button. You will see the difference that the text color has changed to red.

In this way you can change forecolor property of any control dynamically ( that is in response to some event like button click). You can also change background color of any control similarly by changing the BackColor property of the control. A good way of learning VC++ is trying different properties that appear in the drop down menu. If you don’t understand what each of the property means then just search them in the help. You can manually search the help section or just select the property and press F1.

The help provided in VC++ is very good. You get detailed description of the help you need with examples to illustrate the problem (most of them are). So it’s a good way of learning the tool. Just master using the help and you can solve any problem you encounter while using VC++.

Ok after knowing a bit about using the help in VC++, let us try some other controls available to us.

Let’s take a look at Label control. Label control is control that is usually used to describe some other control for the user benefits. Let’s add a label to describe the textbox control in our HelloWorld application. Click on the Label control from Toolbox and drop it left of textbox control. Align it using the snap lines. You may notice red line at one time. This means that label will be aligned vertically to match the text alignment of the textbox. The form must look something like this after the process.

Change the text of the label to Textbox so that it describes the text box in front of it. We notice that the label control cannot be resized. This is because the AutoSize property of the control is true. Change it to False to enable resizing of the label. But it is better to have it True as the IDE will resize it automatically to fit the text of the control. Still you can resize the control by changing the AutoSize property to false.

Run the project and see the result. Usually label controls don’t have any code associated with them. But you can have code related to them if the application demands it.

Now lets explorer another window control : ComboBox. A combobox is a control that offers us drop down menu (similar to the like Intellisense). First drag and drop a ComboBox from the Toolbox to the form below textbox. Add a label in front of it and change its text to “Color”. Move the controls and align it in a way you want. The form may look something like this.

Now add few items in the combobox. For this, search for the Items property in the property window and click on the small button with three dots at the right of the property. Add following items in the list. After each item hit enter.

Red

Blue

Green

Yellow

The screen will look like.

Click Ok to finish adding menus.

Now add another button to the form and change its text property to Change Color.

Now double click on the Change Color button. Add following code inside the braces.

if(comboBox1->SelectedIndex == 0)

textBox1->ForeColor = Color::Red;

else if(comboBox1->SelectedIndex == 1)

textBox1->ForeColor = Color::Blue;

else if(comboBox1->SelectedIndex == 2)

textBox1->ForeColor = Color::Green;

else if(comboBox1->SelectedIndex == 3)

textBox1->ForeColor = Color::Yellow;

Delete the previous code you inserted in Hello Button ( i.e. textBox1->ForeColor = Color::Red;).

Run the project. When you click hello button you will get the text in default black. Now click on the combobox you added. Click on the small inverted triangle on the right. You will get a drop down menu. Choose any of the option. Lets say you choose Blue. Now click on Change Color Button. The text of the textbox changes to blue!.

More detailed usage of VC++ is made in next Update!! Read on!! :)

If you have any queries then post here in the blog.

Visual C++ for starters.

Hi all!! A new series is started for all those who are new to Visual C++. We will start learning VC++ from scratch in this series.
The series is only to program using windows forms. Using VC++ for console application is similar to C++. So that aspect of VC++ will not be dealt here in this blog.

So lets get started!!! :)


Getting Started

First of all install Visual C++ express edition in your system.
Open the visual C++ 2008.
You will get a screen something like this(it may vary a bit).



The start page consists of recent projects on the left side of page, getting started tab immediately below the recent projects tab and Microsoft's newsfeed taking up majority of space. You can get resources to learn visual c++ from the link they have provided (that is if you have internet connection in home).
You can start new project, load existing projects from the recent projects tab. You will see a list of recent projects you have worked on (that is if you already worked on some project. Else you will get only two tabs saying Open and create project).

First go to the File menu on the top left of the window. Click on New->Project (Alternately you can also press Ctrl + Shift + N). You will get a window like below.


You can see many templates of different types of projects you can do. There is class library, CLR Console Application, CLR empty project, and Windows Forms Application template available (that is if you are using Visual C++ express edition. For other edition you will have more templates). You can create Turbo C style projects by creating CLR console application. For creating windows form application (A window style app with window like this browser) choose Windows Form Application template. Enter the name of your project in the Name tab at the bottom of window. You can change the location of the project by clicking on Browse button an choosing appropriate folder. Click on Ok button to create new project. The window is as show below again.


Now that we are familiar with the create project window, its time to create our first project. Lets start with customary hello world program. First type the name HelloWorld (Or anything you want :D) in the Name tab. Click on Ok.

After few moments the window changes to something like this.


The middle box you see is called form. It has been titled Form1. Just notice the ovals i have marked. This are different windows that will help in programming a windows form application.
The left most is the Solution Explorer where you can see all the class headers and definition.
Then there is Properties window where all form elements' properties are shown and can be modified. The last oval shows Toolbox which is autohidden (all this windows may not be as shown. If they are not visible search around till you find something like the toolbox. If not then go to view menu and choose the appropriate window). Hover over the toolbox and the toolbox pops out as shown below.


You can make the toolbox remain visible always by clicking on the small button on the top (shown in circle) which says auto hide. You can also shift the window to some other place on our screen by clicking and dragging the window by its title bar (The place where name 'Toolbox' appears). As soon as you drag the window the screen changes to something like this.



As you can see you will see few new buttons appearing on the screen (As shown inside all circles). You can dock any windows by taking the title bar of the window to any of the buttons with arrows and the window is docked accordingly. Just experiment with all windows till you get a look of the screen you are comfortable with. After redocking my window looked like this.



Now time to add few features to our form. From the toolbox choose Textbox from the list. Click on it once. Click anywhere on the form once. You will notice a textbox has appeared on the form in place where you clicked the mouse as shown below.


Click on the textbox on the form(the white color box) and move it around the form to the place where you want the textbox.

Next lets add a button to the form. Again choose button from the toolbox and drop it on the form. The screen should look like this after the operation.


Next move the button around the form. You will notice that as you move the button around you will get some blue (or red) lines appearing. This are snap lines and they help in designing the window better by allowing us to align the controls in an order. Use them to align the button to the left edge of the textbox. You can also resize the control by using the small squares around the control by dragging the control till you get desired size. The form should look like this after the process.


Now lets rename the properties of various controls of the form. For this click on the form first ( the bigger box in the middle. You can know which control you have selected by looking at the property window where the name of the control is displayed at the top). Then search for Text property in the property window. Click on the right hand column and rename it as "First Application" and press enter. As soon as you do this the name on the top of the form changes to "First Application". The screen will look like this.


Next do the same to button Control. ( You dont need to change the text property of the textbox now. But if you want to you can change it and see the result). Change the Button text to "Hello".
You can also change the name of the control and name each control by your own name. This can be done by changing the "Name" property in the property window to name you want to give to the control. Right now leave the name as it is.
The window must look like something like this.



Next its time for some coding. Add a code to the button control so that when user clicks on the button it does some work. To add code to button, double click on the button control. You will get a new view of screen like this.


If you just scroll the window from top, you will see lot of code. This is the code generated by the IDE in order to create the different controls you added. For now you dont have to worry about it.
Just press enter where the cursor was previously present. Type following code:
textBox1->Text = "Hello World!";
You dont need to type the entire stuff. As soon as you press 'tex' press Ctrl + Space on your keyboard. You will get a drop down menu called "IntelliSense" showing different properties and variable. Select textBox1 and type ->. Again you will get a drop down menu. Type 'te' and the control in the drop down menu will show 'Text'. Hit enter and half the code is done. Type in rest of the code to finish coding. The screenshots of Intellisense is as shown below.


Intellisense is one of the most powerful feature of Visual C++. It makes coders work in coding lot simpler. You dont need to type all code with this. You dont need to remember all the variables you have declared in your project as all variables that are visible (that is all variables available in the scope) are shown in the drop down menu. In large projects this is very useful. In short it makes coders life lot easier.

Now that we have written the code, its time to execute the program. You will notice a small green triangle in the top of the window below menu bar. Click on it. Alternatively you can go to Debug menu and click start debugging or press F5. Once you do this you will get a window like this.


Click on Yes. You will see the build process at the bottom of the window. If you have followed all instructions then you will see a new window coming up like this.


The new window looks exactly like the one you just designed. Click on the Hello button. You will get "Hello World!" displayed on the textbox control immediately.


Congratulations!! You have just made the first application using VC++.