CIS 530 (Blum) 1

Introduction to Visual Basic .NET

A version of the Hello World program in Visual Basic .NET

CIS 530 (Blum) 2

Objective

• Our main objective is to become familiar with the VB .NET Integrated Development Environment (IDE or environment for short)

• To accomplish this task, let us design an interface and write the associated program that has the user enter his or her name, then click a button and view a message welcoming him or her.

CIS 530 (Blum) 3

Start/Programs/Microsoft Visual Studio .NET/Microsoft Visual Studio .NET

CIS 530 (Blum) 4

After a splash screen, one sees the Start Page. Click the New Project button

CIS 530 (Blum) 5

New Project Dialog Box: Choose Visual Basic as the Project Type

CIS 530 (Blum) 6

New Project Dialog Box: Choose Windows Application as the Template

CIS 530 (Blum) 7

New Project Dialog Box: Give your project a name

CIS 530 (Blum) 8

New Project Dialog Box: Click Browse to choose a location for your project

CIS 530 (Blum) 9

Project Location Dialog Box: Use the Look in: drop-down box to select a folder

CIS 530 (Blum) 10

Project Location Dialog Box: Use the Create New Folder button (if you want)

CIS 530 (Blum) 11

New Folder Dialog Box: Enter the name of the new folder, then click OK

CIS 530 (Blum) 12

Project Location Dialog Box: Click Open

CIS 530 (Blum) 13

New Project Dialog Box: Click OK

CIS 530 (Blum) 14

HelloWorld: Form1.vb (Design)

CIS 530 (Blum) 15

Click the Save All button to see what we have so far

CIS 530 (Blum) 16

Windows Explorer

Folder we madeFolder Visual Studio made

CIS 530 (Blum) 17

What is a form?• A simple answer is that it’s a window – a surface

upon which we will build a graphical user interface (GUI).

• A more complex answer is that there are a number of things called forms– A Form base class – all of the generic code for a

window provided by Visual Studio– A specific, programmer-designed class Form1 – the

programmer adds specific features for the particular project

– A form object – an instantiation of the above

CIS 530 (Blum) 18

“Form1” in four places

• “Form1” appears in four places– It is the name of the class we are making– Form1.vb is the name of the file containing the

code for the class– “Form1” is the default value of the text

property, which corresponds to what is written at the top of the window

– It is the start-up object

CIS 530 (Blum) 19

Change the name of the class: click on the form then find the (Name) property in the Properties Window

Properties Window

(Name) property

CIS 530 (Blum) 20

Next change the name of the startup object

• If you change the name of the class, you must change the name of the startup object.

• The startup object is a property of the project that tells it where to start. – The only other option we would have for the

startup object at this time is Sub Main

CIS 530 (Blum) 21

Right click on the project (one level down) found in the Solution Explorer and choose Properties

CIS 530 (Blum) 22

On the HelloWorld Property Pages, use the drop-down list to choose FrmHello as the Startup object and click OK

CIS 530 (Blum) 23

Return to the Properties Window, find the Text property and change it

CIS 530 (Blum) 24

One can list the properties by category or alphabetically

Click here to alphabetize

CIS 530 (Blum) 25

Categorizing the properties

Click here to categorize

CIS 530 (Blum) 26

Right click on the file in the Solution Explorer and choose Rename

CIS 530 (Blum) 27

It’s traditional (though in VB not strictly necessary) to give the file and the class the same name

CIS 530 (Blum) 28

Change the BackColor property of FrmHello

• Click in the box to the right of BackColor in the Properties Window

• A drop-down arrow will appear

• Use the tab to select the palette from which you can choose the color

CIS 530 (Blum) 29

Palettes

CIS 530 (Blum) 30

FrmHello after BackColor chosen

CIS 530 (Blum) 31

Customize the form with some controls

• A control is an object (typically visible) that one places on a form to facilitate interaction with a user. It may be – A label to display a message – A textbox for the user to enter text – A button for a user to click– Etc.

• The standard controls are in the toolbox.

CIS 530 (Blum) 32

Place the mouse over the hammer and

wrench icon on the left.

CIS 530 (Blum) 33

Click on the tack icon at the top of the toolbox

CIS 530 (Blum) 34

Click on the label button on the toolbox, it will appear depressed. Move the cursor over to the form it will appear as a crosshairs and a letter A

CIS 530 (Blum) 35

Place the crosshairs where you want the upper left-hand corner of the label, drag across to where you want the lower right-hand corner and release.

Upper left: begin drag here

Lower right: end drag here

CIS 530 (Blum) 36

Click on the plus sign to the left of the label’s Font property. Make sure Label1 appears in

the drop-down box of the Properties Window

CIS 530 (Blum) 37

This shows all of the individual

properties related to the label’s font.

CIS 530 (Blum) 38

Change the Font Size to 28.

CIS 530 (Blum) 39

Use the drop-down list to make the Font

Bold property True.

CIS 530 (Blum) 40

Use the drop-down list to select the alignment of the

text, choose MiddleCenter (vertical/horizontal) by clicking on the square

CIS 530 (Blum) 41

Result of Label Text Alignment

CIS 530 (Blum) 42

Change the label’s text property to “Welcome”

CIS 530 (Blum) 43

Change the (Name) property of the label

to lblWelcome.

CIS 530 (Blum) 44

Hungarian notation

• The naming of the form as FrmHello and the label as lblWelcome follow a naming convention known as Hungarian notation.

• Hungarian notation consists of a standard (three-letter) prefix that identifies the type of object followed by a name that starts with a capital letter and has some meaning within the project.

CIS 530 (Blum) 45

Search for list of Hungarian notation prefixes

CIS 530 (Blum) 46

Choose link concerned with VB

CIS 530 (Blum) 47

Hungarian notation (this reference is for version 6.0, but most of the prefixes are

still useful)

CIS 530 (Blum) 48

Add a second label, lblName, that prompts

the user to enter his or her name

CIS 530 (Blum) 49

Add a textbox, click on the Textbox button on the toolbox, use the crosshairs icon to drag the textbox into the desired location

CIS 530 (Blum) 50

Name the textbox, txtName

CIS 530 (Blum) 51

Clear out the text of the textbox.

CIS 530 (Blum) 52

Add a button: click the Button button and use the crosshairs to position the button on the form

CIS 530 (Blum) 53

One change in Hungarian from VB 6.0 to VB .NET is the prefix for buttons from cmd (for CommandButton) to btn (for Button)

CIS 530 (Blum) 54

Name the button btnOK

CIS 530 (Blum) 55

Change the Text property to “OK”

CIS 530 (Blum) 56

Change the font size property to 12 and the font bold property to True

CIS 530 (Blum) 57

Add another label

CIS 530 (Blum) 58

New label directions

• Set the label (Name) property to lblMessage.

• Set the Font Size property to 24.

• Set the Font Bold property to True.

• Set the TextAlign property to MiddleCenter.

• Clear out the Text property.

CIS 530 (Blum) 59

Result of setting label properties

CIS 530 (Blum) 60

Design time versus Run time

• Thus far we have just set various properties in design time (while the programmer constructs the interface).

• In order for something to happen in response to the user’s action, some property or properties must be change in run time (while the user executes the program).

• The user’s action, in this case a click, is an example of an event.

CIS 530 (Blum) 61

Events

• Events can be raised – In response to the users action

• Mouse events (clicking)

• Keyboard events (pressing a key)

– By an object belonging to the program • A timer raises events periodically

– By the system• Various errors (overflow, can’t find a file, etc.)

CIS 530 (Blum) 62

Event-driven programming

• When the order in which code is executed is determined to a large extent by the events that occur, such programming is said to be event driven.

• The design of graphical user interfaces (GUIs) is generally event-driven programming.

CIS 530 (Blum) 63

The Click Event

• Thus far code has been generated by the environment, but we have not written any ourselves.

• In order for something specific to happen when the user clicks the button, we must write the code for the button’s click method, a set of statements that the system executes when the button is clicked.

CIS 530 (Blum) 64

Going over to code Method 1: Go to the View/Code menu item

CIS 530 (Blum) 65

Going over to code Method 2: Click on the View Code button

CIS 530 (Blum) 66

FrmHello Code

CIS 530 (Blum) 67

To obtain the button’s click event, first choose btnOK from the Class Name drop-down list

CIS 530 (Blum) 68

Next choose the Click method from the Method Name drop-down list.

CIS 530 (Blum) 69

These actions provide the programmer with a template in which to enter code

CIS 530 (Blum) 70

Right-hand side of method’s first line

CIS 530 (Blum) 71

Leave it be

• We will not explain at this stage what all of these words mean.

• For now we live by the motto that what the environment provides is usually correct and we will not attempt to alter it.

CIS 530 (Blum) 72

Going over to code Method 3: Double click on the button in design view

CIS 530 (Blum) 73

Doubling clicking the button moves one to Code View and generates the btnOK’s Click method shell

CIS 530 (Blum) 74

What should happen

• When the user clicks the OK button, we would like the text property of the Message label to change from an empty string to say “Hello ” followed by the name the user entered in the Name textbox.

• The “when” is handled by our choice of the btnOK_Click method, it is called and executed when the user clicks the OK button.

CIS 530 (Blum) 75

Type the name of the object whose properties we want to change and then a “dot” immediately after

CIS 530 (Blum) 76

Two points

• One can type “lblmessage” even though the name of the label is “lblMessage” – VB is not case sensitive

• After typing the dot, a drop-down list of the labels properties and methods appears. – We can chose the desired property (Text) from

the list– If we misspelled the name, we would get no list

CIS 530 (Blum) 77

Enter the line of code

CIS 530 (Blum) 78

lblMessage.Text = "Hello " & txtName.Text

• The line above is called a statement, a unit of code

• In particular, it is an assignment statement. The equal sign breaks it into two pieces. – The expression to the right is evaluated. – The quantity on the left (in this case the Text

property of lblMessage) is then set equal to (assigned) the value found on the right

CIS 530 (Blum) 79

lblMessage.Text = "Hello " & txtName.Text

• The ampersand (&) on the right denotes the string concatenation operation.

• A sequence of characters is known as a string.

• Concatenation creates a longer string by placing the second immediately after the first – “Hello ” & “Kitty” gives “Hello Kitty”

CIS 530 (Blum) 80

lblMessage.Text = "Hello " & txtName.Text

• The first string in the above concatenation is spelled out by the programmer (“literally”) and is known as a literal string.

• The second string in the above concatenation is a string-valued property of the label.

• Another possibility (not seen above) would be to have a string-valued variable.

CIS 530 (Blum) 81

Preparing to run the program: on the menu choose Build/Build Solution

CIS 530 (Blum) 82

Note the appearance of the Output window where we are informed of our success or failure to build a solution

CIS 530 (Blum) 83

Running the program: Choose Debug/Start Without Debugging from the menu

CIS 530 (Blum) 84

Program running

First starts. User enters name.

CIS 530 (Blum) 85

Program running

User clicks OK. Nothing to do with the program.

CIS 530 (Blum) 86

Closing (stopping) the program

Nothing to do with program