CBSE Notes for Class 8 Computer in Action – Introduction to Visual Basic

A programming language is a set of grammatical rules used for giving instructions to a computer. The two broad categories of programming languages are low-level languages and high-level languages.
We have already learnt about one of the high-level languages called QBASIC. In this chapter, we will learn about another high-level programming language called Visual Basic. We will use Microsoft Visual Basic 2010 Express which is a freely downloadable version of Visual Basic for students.

INTRODUCTION TO VISUAL BASIC
Visual Basic is a high-level programming language that offers a Graphical User Interface for designing and developing programs as compared to QBASIC that offers a text-only environment. Visual Basic offers an Integrated Development Environment (IDE) for writing programs. An IDE provides a common environment for designing, editing and removing errors in the programs.
Visual Basic is also referred to as an event-driven programming language. An event is the occurrence of some user-generated actions such as click and keypress. In Visual Basic, the code statements are executed in response to events. Let us learn more about Visual Basic.

STARTING VISUAL BASIC 2010 EXPRESS
To start Visual Basic, type Visual Basic in the Search box on the Taskbar and click the Microsoft Visual Basic 2010 Express option.The Start Page of Microsoft Visual Basic 2010 Express appears (Fig. 6.2). The Start Page has options to create a new project or open an existing project. A project is a collection of files that make up an application. You can create various types of applications in Visual Basic. In this chapter, we will learn to create a Windows Forms Application.
Follow these steps to create a Windows Forms Application.
cbse-notes-for-class-8-computer-in-action-introduction-to-visual-basic-1

Step 1: Click on the New Project in the Start Page (Fig. 6.2). The New Project dialog box appears.cbse-notes-for-class-8-computer-in-action-introduction-to-visual-basic-2Step 2: Choose Windows Forms Application option (Fig. 6.3). You may specify the name of the Application in the Name box or you may choose to save it later.
Step 3: Click on the OK button. The Visual Basic IDE appears as shown in (Fig.6.4)cbse-notes-for-class-8-computer-in-action-introduction-to-visual-basic-3

COMPONENTS OF THE VISUAL BASIC IDE
The following are the main components of Visual Basic IDE (Fig 6.4).cbse-notes-for-class-8-computer-in-action-introduction-to-visual-basic-4

Title Bar
The Title bar displays the name of the project. By default, the first project is named as Windows Application 1.

Menu Bar
The Menu bar offers commands for working in Visual Basic environment. Apart from the standard menus such as File and Edit, menus such as Project, Format and Debug provide commands that are specific to programming.

Toolbar
The Toolbar contains buttons that provide shortcuts to various menu options such as the Start Debugging button.

Main Window
The Main window is the area where you work to create the application. You use this window to work with forms and edit code. There are tabs on top of the window for every opened file.
In Figure 6.4, the main window shows a form (Form 1) in the Designer view. At the top of the window, there are two tabs: the Start Page tab and the Form 1.vb [Design] tab.

Form Window
The Form window is the basic building block on which you place various objects for designing an application. It is through forms that a user interacts with an application.

Toolbox
Click on the Toolbox tab on the left edge of the screen to display the Toolbox. The Toolbox offers various tools, which can be placed on the forms for creating an interface. These tools are referred to as controls in Visual Basic (Fig. 6.5). Every form as well as control has its own set of properties, methods and events.cbse-notes-for-class-8-computer-in-action-introduction-to-visual-basic-5

  • Property: A property refers to the characteristics of an object such as colour and size. For example, the BackColor property lets you change the background colour of an object. You can change the properties either at the time of designing or during the execution of an application.Event: An event can be thought of as an occurrence of some user-generated action applied on an
  • Method: A method is an action that can be performed on an object. For example, the Show method is used to display the form and Hide method is used to hide the form from displaying. You can call the methods at the time of execution of an application.
  • Event: An event can be thought of as an occurrence of some user-generated action applied on an object. For example, click event is triggered when an object is clicked using a mouse.

Solution Explorer: The Solution Explorer window displays a list of various files of a project. The Solution Explorer window has the View Codecbse-notes-for-class-8-computer-in-action-introduction-to-visual-basic-6and the View Designercbse-notes-for-class-8-computer-in-action-introduction-to-visual-basic-6-1buttons on the top to change to the Code or Designer view, respectively. You can switch between the two views to develop View Code applications in Visual Basic (Fig. 6.6).cbse-notes-for-class-8-computer-in-action-introduction-to-visual-basic-7

  1. Designer View: In this view, you can design the interface of an application by placing various controls on the form (Fig. 6.7).
    cbse-notes-for-class-8-computer-in-action-introduction-to-visual-basic-8
  2. Code View: This is the view that lets you type code statements inside the event handlers of the form or the other controls. Event handler is a code that gets executed when a particular event related to an object takes place. In this view, the drop-down box to the left provides a list of all controls used on the current form including the form itself (Fig. 6.8a). The drop-down box on the right displays a list of all the events related to the control selected in the left-side drop-down box (Fig. 6.8b).
    cbse-notes-for-class-8-computer-in-action-introduction-to-visual-basic-9

Properties Window
The Properties window is used to display and change the properties of the form or of a control placed on the form. You can choose to display the properties category-wise or in the alphabetic order (Fig. 6.9).

cbse-notes-for-class-8-computer-in-action-introduction-to-visual-basic-10

PROPERTIES, METHODS AND EVENTS
As discussed earlier, the form as well as the controls have properties, methods and events associated with them. Let us discuss them.
Form
Table 6.1 lists the important form properties, events and methods.

cbse-notes-for-class-8-computer-in-action-introduction-to-visual-basic-11

CONTROLS
Pointer Controlcbse-notes-for-class-8-computer-in-action-introduction-to-visual-basic-12: The Pointer control is used to move and resize the controls on the form window.
Label Controlcbse-notes-for-class-8-computer-in-action-introduction-to-visual-basic-12-1: The Label control is used to display text on the form. You can use labels for identifying a Textbox or for displaying instructions to the user on the form. Table 6.2 lists some of the common properties and events associated with the Label control.cbse-notes-for-class-8-computer-in-action-introduction-to-visual-basic-13

TextBox Controlcbse-notes-for-class-8-computer-in-action-introduction-to-visual-basic-14: The TextBox control is used for accepting text or numeric values from the user. Table 6.3 lists some of the common properties and events associated with the TextBox control.
cbse-notes-for-class-8-computer-in-action-introduction-to-visual-basic-15
cbse-notes-for-class-8-computer-in-action-introduction-to-visual-basic-15-1

Button Controlcbse-notes-for-class-8-computer-in-action-introduction-to-visual-basic-16The Button control is similar to push buttons initiating some action on the form. Table 6.4 lists some of the properties and events associated with the Button controlcbse-notes-for-class-8-computer-in-action-introduction-to-visual-basic-17

APPLICATION DEVELOPMENT
The basic steps involved in creating a Windows Application Form-based project are:
Step 1: Create a form.
Step 2: Place controls on the form.
There are two ways in which you can add controls on the form.

  • Select the control in the Toolbox and then drag the control on to the form (Fig. 6.10).
    cbse-notes-for-class-8-computer-in-action-introduction-to-visual-basic-18
  • Double-click the control in the Toolbox. The control gets added in the top-left corner of the form. Drag the control to the desired location on the form. If required, resize the control by dragging its borders (Fig. 6.11).
    cbse-notes-for-class-8-computer-in-action-introduction-to-visual-basic-19

Step 3: Set properties for the controls and the form.
Step 4: Add code to the appropriate event handlers of the form and the various objects.
Let us illustrate the process of application development with the help of some examples.
Example 1: To change the text and the foreground colour of the text when the mouse is moved over the surface of the label.
Step 1: Click on the New Project option on the Start Page (Fig. 6.12).
Step 2: Click on Windows Forms Application as the project type and enter a name for the project. In this example, we have used “first_project” as the project name (Fig. 6.13).

cbse-notes-for-class-8-computer-in-action-introduction-to-visual-basic-20

Step 3: Click on the OK button (Fig. 6.13). The Visual Basic IDE opens with one form named Form 1 (Fig. 6.15).
Step 4: Select the form and set the following properties in the Properties window (Fig. 6.14).
(a) Name: frmMessage
(b) Backcolor: Any colour of your choice
(c) Text: My First Application

cbse-notes-for-class-8-computer-in-action-introduction-to-visual-basic-21

Step 5Double-click on the Label control in the Toolbox. Label 1 gets inserted in the form. Resize and drag it to an appropriate position as shown in Figure 6.15.

cbse-notes-for-class-8-computer-in-action-introduction-to-visual-basic-22

Step 6Change the following properties of the Label control (Fig. 6.15).
(a) Name: IbIMessage
(b) Text: Move the mouse over of the following message
(c) BackColour: Any colour of your choice under the Palette tab
(d) Font: Font as Comic Sans MS, Font Style as Regular and Size as 14.
Step 7Add one more label on the form. Drag the new label at a position below the first label as shown in Figure 6.16.

cbse-notes-for-class-8-computer-in-action-introduction-to-visual-basic-23

Step 8Resize the second label control and change its following properties.
(a) Name: IbIChange
(b) Text: Secret to Success
(c) Backcolor: Any colour of your choice
(d) Font: Font as MS Sans Serif, Font Style as Bold, and Size as 14
Step 9: 
 Double-click on the IbIChange control to open the Code view. The Code view gets displayed. Make sure that the label IbIChange is selected in the first drop-down list. Select the MouseMove event from the second drop-down list as shown in Figure 6.17.

cbse-notes-for-class-8-computer-in-action-introduction-to-visual-basic-24

Step 10: The Mouse Move event handler for the label IbIChange gets inserted. Enter the given lines of code (Fig. 6.17) in the Mouse Move event handler for the label.
IbIChange. ForeColor = Color.Maroon
IbIChange.Text = “Hard Work and Determination”

cbse-notes-for-class-8-computer-in-action-introduction-to-visual-basic-25

Step 11: Click on the Save button on the toolbar.
Step 12: To run the application, use any one of the following ways.

  • Click the Start Debugging buttoncbse-notes-for-class-8-computer-in-action-introduction-to-visual-basic-26on the Toolbar, or
  • Choose Debug ► Start Debugging.

When you run the application and you move the mouse over the surface of second label, the existing text is replaced and the new text Hard Work and Determination is displayed in maroon colour as shown in Figure 6.18.
Example 2: To accept the First Name and Last Name of a user in two TextBoxes, and display the Full Name on a label when the button is clicked.
Create a new Windows Forms Application project. Give the project an appropriate name. Set the form properties (Name, Back Color and Text) as you had done in Example 1 and perform the following steps.

cbse-notes-for-class-8-computer-in-action-introduction-to-visual-basic-27

Step 1: Add the Label, TextBox, and Button controls to the form as shown in Figure 6.19.
Step 2: Change the properties of the controls as given in Table 6.5.
cbse-notes-for-class-8-computer-in-action-introduction-to-visual-basic-28
cbse-notes-for-class-8-computer-in-action-introduction-to-visual-basic-28-1

The design of the form appears as shown in Figure 6.20.

cbse-notes-for-class-8-computer-in-action-introduction-to-visual-basic-29

Step 3: Double-click on the “Display Full Name” button and type the given code in the cmdDisplay_Click() event handler (Fig. 6.21).
IbIDisplayname.Text = txtFirst.Text + “ ” + txtLast.Text
The user enters the first name and the last name in the text boxes and clicks the Display Full Name button. The click event handler of the cmdDisplay button retrieves the values given in the first name and the last name textboxes by using the Text property and then concatenates (that is, joins the two strings) it. In order to include space between the first name and the last name, the first name is concatenated with space and then with the last name. The full name is then displayed in the IblDisplayname label using its Text property.
Step 4: Double-click on the Exit button and type End in the cmdExit_Click() event handler. The End keyword stops the execution of the program (Fig. 6.21).

cbse-notes-for-class-8-computer-in-action-introduction-to-visual-basic-30

Step 5: Run the application by pressing F5. When you click the Display Full Name button, the Full Name of the user is displayed in the label as shown in Figure 6.22. When you click the Exit button, the application stops executing.

cbse-notes-for-class-8-computer-in-action-introduction-to-visual-basic-31

CREATING A CALCULATOR IN VISUAL BASIC
Follow the given steps to create a calculator in Visual Basic that adds, subtracts and multiplies two numbers accepted from the user and displays the result in the third TextBox when the respective buttons are clicked.
Step 1: Design the form interface as shown in Figure 6.23.
Step 2: Change the Name property of the controls as given here.
(a) Number1 TextBox: txtNum1
(b) Number2 TextBox: txtNum2
(c) Result TextBox: txtResult
(d) Add Button: cmdAdd
(e) Subtract Button: cmdSubtract
(f) Multiply Button: cmdMul

cbse-notes-for-class-8-computer-in-action-introduction-to-visual-basic-32

Step 3: Double-click on the Add button and type the given code in the cmdAdd Click() event handler (Fig. 6.24). txtResult.Text = Val(txtNum1.Text) + Val(txtNum2.Text) The above code retrieves the value of the txtNum1 and txtNum2 textboxes by using the Text property and then adds it. A predefined function Val has been used to convert the values in the textboxes to numeric values for the purpose of addition; otherwise the values inside the textboxes are treated as text values and are concatenated. The addition of two numbers is then shown in the txtResult TextBox by using its Text property.
Step 4: Similarly, add the given code in the cmdSub_Click()’’event handler and cmdMul_Click() event handler.
For subtraction txtResult.Text = Val(txtNuml.Text) – Val(txtNum2.Text)
For multiplication
txtResult.Text = Val(txtNum1.Text) * Val(txtNum2.Text)

cbse-notes-for-class-8-computer-in-action-introduction-to-visual-basic-33

Step 5: Run the project by pressing F5. The Calculator Form appears as shown in Figure 6.25. Enter Number 1 and Number 2. Click on different buttons to view the result.

cbse-notes-for-class-8-computer-in-action-introduction-to-visual-basic-34