AN INTRODUCTION TO VISUAL PROGRAMMING USING VB.Net
Contents
3. VB.NET
12. Summary
13. Appendix
1. WINDOWS ENVIRONMENTS
Most Windows type applications use multiple forms with a menu system that allow access to various forms and functions. MS Word 2007 has a file menu and ribbon that can be used to open various dialogue boxes to allow certain actions to be performed – see below
For example, if you select Format->Font from the menu a dialogue box is displayed – see below
This is an example of a form and all such dialogue boxes are examples of forms. Most Microsoft products use Multi-Document Interface (MDI) and Visual Programming Languages have been created to allow programmers to rapidly design and implement such programs. The for
m templates are provided upon which controls such as textboxes, drop-down lists etc can be placed. Such facilities allow for the rapid implementation of windows programs leaving the programmer to concentrate on the logic and functionality of the program
2. PROGRAMMING LANGUAGES
Since the early beginnings of the modern digital computer, many and various programming languages have been created. Each one has been created for a specific task or to improve the effectiveness and efficiency of the code. For example, one of the earlier languages, FORTRAN (Formulate Translation) was written for mathematicians and scientists to use. Because of its simplicity of use PASCAL has been adopted by many schools and colleges to teach the basics of programming. COBOL (Common Business Oriented Language) was, for many years the choice of language in business applications. Many of the earlier languages could be described as being Procedural languages which are based on the concept of the Procedural Call. When the program is executed (run) the program will run through a sequence of procedures, sub procedures and functions until it has completed its task.
Later programming paradigms (models) include:
· Event Driven – a language based on events that happen during the execution of a program i.e. a mouse click, entering data in a textbox or temporal events i.e. events that occur at various times etc. Events are controlled by:
o Event Handlers – code that is called when an event is invoked
o Event loops -that are provided by the language to check if an event has occurred
o Trigger functions– select the event handler according to which event has occurred
· Object Oriented – This type of language is fast becoming the industry standard in software engineering. It is based on the concept of Classes and Objects that can be created from the classes. Programs created using OO techniques are usually cheaper, easier to maintain and can usually take less time to develop
· Visual – languages that use an IDE (Integrated Development Environment) whereby developers have access to per-defined objects which can be dragged from a toolbox and placed on Forms.
3. VB.NET
Visual Basic.NET is a combination of all the above languages. It has a visual interface (IDE), is driven by events and is fully object oriented.
CREATING A MDI APPLICATION
As a way of introducing the VB.Net IDE we will create a MDI that will be used to save all of the exercise programs that you implement during the topic.
· Software Design and Dev elopement
· Event Driven Programming
· Object Oriented Programming
STARTING A NEW PROJECT
Click on Programs->Microsoft Visual Basic 2008 Express Edition to open the start page of VB.Net
Click on Create – Project – see below:
In the following window make sure that the Windows Form Application is highlighted and add a name in the Name textbox. I suggest using your own name i.e. Fred Bloggs Project. Click OK
The IDE (Integrated Development Environment) select should now be displayed – see below:
SAVING THE PROJECT
Before we continue it is best to save the project. Select File->Save All from the
main menu – see below:
In the next window that is displayed select a suitable place to save the project (I’m saving mine to the desktop) and click Save – see below:
THE ELEMENTS THAT MAKE UP THE IDE
As you can see from the screen shot above there are a number of different windows in the default IDE which are explained below. There are many other windows that can be added but these will be explained in later sessions
· Design Window – this is window that contains the forms for the program. All new projects have a default form. Many other forms can be added to the design.
· Solution Explorer – this contains the main components of the system i.e. Forms and the assemblies and references needed to create a basic program. As you add more functionality to the project the components will be added to the explorer
· Properties Window – All components of a program have properties that can be set either through this window or programmatically. If you click once on the Form icon in the Solution Explorer a set of properties for the form are displayed in the Properties Window – see above.
· Toolbox – This contains a list of all the objects that can be placed on a form –more about this later
The first step in creating the MDI program is to name the default form. To do this, single click on the form to select it. Do not double click on the form as this will take you to the Code Window. In the Solution Explorer single click on the Form1 icon and a set of properties for the form are displayed in the Properties widow below:
Change The File Name property of the default form (Form1.vb) to Main Form.vb. Do not have any spaces and make sure that you retain the .vb extension. If you now click on the form itself you will see that the name of the form in the Solution Explorer has been change and another set of properties is displayed in the Properties Window – see below.
The properties now shown in the Project window are the main properties for the currently highlighted control (in this case Main Form). We use the name Control to describe any form or object from the Toolbox that is placed on the form. When a control is added to the form the controls properties are displayed or when it is highlighted. When a property is clicked an explanation of the property is displayed in the window directly below the properties window. Notice that the (Name) property has been changed to the name we added earlier i.e. Main Form. The (Name) property is the identification for the control that is used to access the control when we are writing the code.
Other properties we need to change to make the form an MDI form are:
· Text – change to a suitable name – see below. This text will be displayed aim the forms header. It can contain spaces
· Window State – set to Maximized by clicking on the drop-down list
·
IsMDIContainer – set this to True. Notice that when this property is set to true the background of the form changes to a darker shade
IsMDIContainer – set this to True. Notice that when this property is set to true the background of the form changes to a darker shade
Each project can only contain one MDI form. It is going to be the form that is displayed when the program is executed. Setting the form to Maximized will make the form fill the screen. We can now execute (run) the program we have just created by either pressing F5, clicking on the green triangle in the main menu or by selecting Debug->Start Debugging from the top menu – see below:
The MDI form should now be displayed maximized with the title shown in the top left-hand corner – see below:
You have just created your first VB.Net program. However, it does not do very much. Close the program by clicking on the X in the top right-hand corner of the form. This will return you to the IDE ready for the next stage of the process
ACCESSING THE CODE WINDOW
Up to now we have not written a single line of code as thus far the IDE has provided all the functionality we need. To access the code window of the form, double click on the form. The code widow, similar to the one shown below will be displayed:
Notice that the Toolbox that was displayed when the IDE was in Design Mode i.e. when the form was displayed is now not accessible. To return to design mode either click on the Design tab at the top of the code window or click on the forms icon in the Solution Explorer – see below:
We will return to the code window later. What is needed before we add any code is to provide some form of navigation to different parts of the application program. Most of the applications created in a visual language consist of multiple forms that are accessed through a navigation system. VB.Net has controls that can be used for this purpose which can be accessed from the Toolbox.
THE TOOLBOX
The Toolbox contains a list of all the controls i.e. textboxes, labels, buttons etc that can be added to a form. There are a number of different tabs to choose from which include:
· Data – controls used for accessing data sources i.e. databases
· Components – contains .NET components that monitor events within the operating system and within the Visual Studio Development environment
· Printing – controls used for printing
· Menus and Toolbars – controls for adding menus
· Containers – controls to group together other controls
ADDING A MENU
In the Toolbox look for Menus and Toolbars and double click or click and drag the Menu Strip control onto the form. The form will then look as shown below:
Notice that, not only has a Menu Strip been added to the form, but a menu strip icon has been added to the area directly below the Design window.
Click on the Menu Strip and where it says ‘Type Here’ add the word File – see below:
Notice that when you
add the text two more ‘Type Here’ labels appear – one to the right-hand side and one below. The one to the right-hand side is a top level menu item and the one below is a sub-menu of File. Add the text Exit to the one below and add four more top level menu items named Event Driven Exercises, OO Exercises, Event Assignments and OO Assignments. The form should now look as below:
If we execute the program and click on the menu items nothing happens. We need to add some code. To demonstrate this we will use the sub-menu Exit. Click on File and double-click on Exit. This will open the code window and the cursor will be flashing between the Private Sub and the End Sub declaration of the Event Handler of the Exit menu item – see below:
Do not worry too much about any other code that is shown – that will be discussed later. For now we will concentrate the Exit Event Handler. Notice that the name has been changed from Exit to Exit Tool Strip Menu_Click. This defines the Event as being the Click Event of the menu item. More on Events later.
Add the following code – Application.Exit()- to the Click Event code:
Private Sub Exit Tool Strip Menu Item_Click(…
Application.Exit()
End Sub
Run the program and click the Exit menu item and the program will close.
You have just written your first piece of VB code.
What’s needed now is to add other forms to the program. Each form will contain solutions to exercises or solutions to assignment problems
The first class exercise we are going to complete is the designing of a form to which we will add various controls. It will be place in the Event Driven Exercises menu as a sub-menu item. We will name it Form design exercise – see below:
ADDING OTHER FORMS
To add other forms to the application select Project->Add Windows Form from the main IDE menu – see below
In the next window make sure Windows Form is highlighted and give the form a suitable name i.e. frm Form Design and click Add. Notice that I have used frm as a prefix for the name. When naming controls we use certain naming conventions so that we can identify the type of control we are using. There is a list of naming conventions for common controls in the appendices of this lesson
The new form will be displayed and If you look at the Solution Explorer you will see the extra form in the list – see below
We are now ready to program the menu item that will allow access to the new form. Click on the Main Form.vb[Design] tab to open the Main Form and Double click on Form Design Exercise menu item to access the code window – see below:
The Click Event Handler for the menu is shown below:
The minimum code needed to open the form is shown below:
Private Sub Form Design Exercise Tool Strip Menu Item_Click(…
frm Form Design.Show()
End Sub
Execute the program and click on the menu item you have just coded. If you have followed the instructions the result should be as shown below:
However, if you minimize the main form the other form does not minimize with it. To do this you have to ‘tie’ the new form to the main for in the code by making the new form a Child form of the Parent (main) form.
Each control has a list of methods (functions and procedures) and Properties which can be accessed using dot notation. To access these type the name of the control i.e. frm Form Design and add a full stop. The list will then be displayed – see below:
The methods are denoted by a flying purple box:
The properties by a hand holding a letter:
In the examples above Show is a method and Text is a property. We will discuss these concepts in greater detail in later sessions. The Show method will display the named form. A property of the form is MDI Parent i.e. frm Form Design.MdiParent
This property has assigned to it the name of the form that is to be its MDI form in this example the Main Form. In VB.Net the = sign can be referred to as an assignment operator. When you are adding code to a form, if you want to refer to the form you can use the reserved word Me. Therefore the following statement assigns the Main Form to be the MDI Parent of the frm Form Design form:
frm Form Design.MdiParent = Me
Add the previous line of code to the Click Event of the menu item i.e.
Private Sub Form Design Exercise Tool Strip Menu Item_Click(…
frm FormDesign.MdiParent = Me
frm Form Design.Show()
End Sub
Execute the program and when you minimize the Main Form the frmFormDesign form will minimize with it
Summary
We have covered many concepts in this session i.e.
· Creating a new project
· Using the Solution Explorer
· Using the Properties window
· Using the toolbox
· Creating an MDI (parent) form
· Creating a menu with sub-menus
· Adding new forms to a MDI application (child forms)
· Properties and Methods
· Naming conventions for controls
· Coding Events
APPENDIX
PREFIXES AND NAMING CONVENTIONS
When we add controls to a form we must always remember to name the control correctly and to do this we use a convention of prefixes for different controls. The prefix for a menu item is menu i.e. menu File. Using this convention for all controls makes it easier to read code and identify particular controls, however, we must also give the controls meaningful names as well i.e. menu File, mnuExercise2 etc. The prefix is always shown in lower case except for forms which always have a upper case first letter to the prefix i.e. Frm My Form. Another tip to aid readability of the code is to capitalist the first letter of every word used in a name i.e. text Students Address – a textbox for inputting a student’s address (spaces are not allowed). I always use this convention for variable and procedure names (more on this subject later)
A table of the most common control prefixes is shown below:
Control | Prefix |
Label | lbl |
Textbox | txt |
btn | |
Form | Frm |
Combo Box | cbo |
Check box | chk |
List box | lst |
Radio button | rad |
Menu item | mnu |
Timer | tmr |
