The Visual Basic Development Environment – Chapter 4 – Visual Basic

The Visual Basic Development Environment


  1. Overview to the Integrated Development Environment(IDE)
  2. The Menu Bar
  3. The Tool Bar
  4. The Project Explorer
  5. The Properties Window
  6. Form Layout Window
  7. The Toolbox
  8. Form Designer
  9. The Code Window
  10. The Immediate Window


In this chapter, we’re going to get started with Visual Basic at the logical place to start: the Visual Basic Integrated Development Environment (IDE). The IDE is where you do your programming work in Visual Basic, just as the name says; you develop your projects in the Integrated Development Environment.

Overview to the Integrated Development Environment (IDE).

The Visual Basic IDE appears in Figure 1.1, and as a Visual Basic programmer, this is where you’ll spend most of your programming time. If you’re not already familiar with the parts of the IDE, you will be in time.


 The Visual Basic Integrated Development Environment

Figure-1-1- The Visual Basic Integrated Development Environment

Figure 1.1 The Visual Basic Integrated Development Environment.

The Visual Basic IDE has three distinct states: Design, Run, and Debug. The current state appears in Visual Basic’s title bar. This chapter concentrates on the Design state. We’ll cover the Debug state later. (In the Run state, Visual Basic is in the background while your program runs.)

The IDE is composed of these parts:

  1. The Menu Bar
  2. The Toolbar
  3. The Project Explorer
  4. The Properties Window
  5. The Form Layout Window
  6. The Toolbox
  7. Form Designer
  8. Code Window
  9. The Immediate Window

1. The Menu Bar

The menu bar presents the Visual Basic menus you need to work with. The basic menus with their features are:

  • File: contains the commands for opening projects, saving projects, creating executable files and list of recent project; also used for similar file handling option and printing option.
  • Edit: contains standard editing functions like Undo, Copy, Paste plus a number of commands for formatting and editing your code like Find, Replace and so on.
  • View: contains commands for displaying and hiding components from windows and toolbar.
  • Project: sets project properties, adds/removes forms and modules, and add/removes references and components.
  • Format: contains command for aligning or sizing the controls on the Form.
  • Debug: contains the usual debugging command that starts/stops debugging and stepping through programs.
  • Run: contains the commands that start, break, and end execution of the current application.
  • Query: consists of the commands that are generally used for handling databases.
  • Diagram: is used when building database applications to draw database diagrams.
  • Tools: menu consists of the tools that you may need while building ActiveX components and ActiveX controls; contains the command to start the Menu Editor and the Options command, which lets you customize the environment.
  • Add-Ins: contains Add-In manager, lists add-ins like Application Wizard and API Viewer.
  • Window: arranges or selects open windows.
  • Help: handles Help and the About box.

2. The Toolbar.

The main Visual Basic toolbar appears as in Figure 1.2. This toolbar contains buttons matching popular menu items, as you can see in Figure 1.2; clicking the button is the same as selecting a menu item and can save you some time.


Main Toolbar

Figure-1-2-Main Toolbar

Figure 1.2 The Main Toolbar

Besides the main toolbar, you can also display other dock able toolbars in Visual Basic: the Debug, Edit, and Form Editor toolbars. To display one of these toolbars, just select it using the Toolbars item in the View menu; the toolbar appears.

  • The Standard toolbar is just below the main menu bar and is displayed by default.


Standard Toolbar

Figure-1-3- Standard Toolbar

Figure 1.3 Standard Toolbar

  • The Edit toolbar contains the commands of the Edit menu.


Figure-1-4- Edit Toolbar

Figure-1-4- Edit Toolbar

Figure 1.4 Edit Toolbar

  • The Debug toolbar contains the commands of the Debug menu.


Figure-1-5- Debug Toolbar

Figure-1-5- Debug Toolbar

Figure 1.5 Debug Toolbar.

  • The Form Editor Toolbar contains the commands of the Format menu.


Figure-1-6- Form Editor toolbar

Figure-1-6- Form Editor toolbar

Figure 1.6 Form Editor toolbar


Opening and closing of toolbar can be done by choosing View > Toolbar, which then displays a submenu containing the names of the toolbars.

Creating a New Toolbar

To create a new toolbar, follow these steps:

Figure-1-7-TCS Toolbar

Figure-1-7-TCS Toolbar

a) Open customize dialog box, choose View >Toolbars > Customize.

b) On toolbar tab, click the New Tab.

c) Give name to new toolbar (in figure 1.7, it’s TCS Toolbar).

d) Add icons to your new menu from Commands tab, which contains all commands of the IDE’s menu.

e) Add the toolbar to your IDE and drag commands to the toolbar.

f) Add as many commands icons as necessary, and then close the Customize dialog box.

3. The Project Explorer



The Project Explorer window is used to display the components of the project. This window is titled Project – Project Name. Projects with multiple Forms and other type of components, such as Class Modules and ActiveX controls are organized in folders. Reason behind naming this window as Project Explorer is because it looks alike Windows Explorer. The Project Explorer consists of three buttons on top of window, namely View Object, View Code (F7), Toggle Folders. The first two buttons are used to move between Code window and Form Designer window. And the third button helps to change the listing style of the Project Explorer.

To hide or unhide Project Explorer choose View > Project Explorer. Shortcut key is Ctrl + R.


Figure 1.8 – The Project Explorer

4. The Properties Window.



The Properties Window contains the property settings for the selected objects and controls. Properties are the attributes of an object and controls, such as its caption, backcolor, forecolor, size, font, height, and so on. Property Window is used to change the appearance, text/values displayed on the controls. Some properties can only be changed during design time and some can also be changed through codes at runtime.

To hide or unhide the Properties Window, choose View > Properties window (F4).

Figure 1.9 – The Properties Window


5. The Form Layout Window



The Form Layout window shows the size and places of the Forms shown on the screen. You can rearrange size and coordinates of the Forms by seeing from this window.

To hide or unhide the Form Layout window, choose View > Form Layout Window.

Figure 1.10 – The Form Layout window


6. The Toolbox



The Toolbox contains the objects or controls that are to be used in designing the form for anapplication. ActiveX components are also included in Toolbox. Every component used is contained in Toolbox. To insert a component into the application’s form, an icon of the object is simply dragged to the form’s window by selecting it. By default, the Toolbox contains the pointer icon and the icons of 20 ActiveX controls. These controls are by default kept inside General tab, you can create a custom layouts by right-clicking the Toolbox and selecting Add Tab from the shortcut menu.

Figure 1.11 The Toolbox

To add components to the Toolbox:

  1. Right-Click on Toolbox
  2. Choose Components, and select the controls from the Controls Tab.

To add a custom tab:

  1. Right-Click on Toolbox.
  2. Choose Add Tab and Give name to you custom tab.
  3. Select the new tab and right-click to add components to your new tab.

7. Form Designers

The Form Designer is the main window in the middle of the screen, where designing and editing of the application’s user interface is done. The same window also displays a text editor in which you can enter and edit application’s code. Thus Form Designer window consist of the Form itself and the code window.

Either of these two window is switched by clicking on the little icons (View Code and View Form) at the top of the Project Explorer (see Figure 1.8 The Project Explorer). When the Form you want to see is selected, you can switch to code or form window.

8. The Code Window



The Code Window is the window where you write your application’s code. This window can be switched from Form window by selecting the little icon of Code Window in Project Explorer Window. To add code to any controls you can simply double-click on the control in Form Window, that again switches to Code Window with the Event Procedure for that control. You can create functions and procedures in this window.

Figure 1.12 The Code Window

9. The Immediate Window



The Immediate Window is in the bottom of the IDE (if it’s not visible then, choose View> Immediate Window ).This window is used for the debugging aid. While an application is running, you can stop it and use the Immediate Window to examine or change the values of the application’s variables and to execute the Visual Basic commands in Immediate mode.

Figure 1.13 The Immediate Window