Part 1: Demonstrate an understanding of basic terminologies

Skill Area 502 : Apply Programming Fundamentals

Computer Programming

Skill Area Overview

Define the basic terminologies of a programming languages

List program development cycle of the language

Program Development Cycle1. Define the problem2. Design a solution using a

programming tool if desired3. Create the interface (GUI)4. Set the properties5. Write the code6. Run, test and debug7. Add any documentation

Integrated Development Environment (IDE)

The Integrated Development Environment (IDE) when you launch VB 2008 Express consists of a few panes, namely:

The Recent Projects Pane - it shows the list of projects that have been created by you recently.

The Getting Started Pane - It provides some helpful tips to quickly develop your applications.

The VB Express Headlines pane - It provides latest online news about Visual Basic 2008 Express. It will announce new releases and updates

Basic Terminologies of Visual Programming

Language Components

The language you write and speak has structure.

Programs written in Visual Basic also have a structure: modules are like chapters, procedures are like paragraphs, and lines of code are like sentences.

Visual Basic has rules that define how categories of words, known as programming elements, are used to write programs.

Programming elements in Visual Basic include statements, declarations, methods, 

operators, and keywords.

Modules A complete Visual Basic application is typically

contained in a single project.

Within a project, code is placed in separate code files called modules, and within each module, the Visual Basic code is further separated into self contained and re-usable procedures.

Procedures Visual Basic procedures provide a way to break

up code into logical and re-usable sections that can be called from other sections of Visual Basic code.

It is also possible that you need to perform this calculation from a number of different places in your application code. Rather than duplicating the code to perform this task at each code location where it is needed, it is more efficient to place the calculation code in a procedure, and then call that procedure each time it is needed

Creating Application with Visual Basic Express 2008

Starting… To start creating your first application, you need

to click on file and select new project. The following VB 2008 New Project dialog box will appear.

Starting…

Remove the default project name (WindowsApplication1) from the Name text box and then type MyFirstApp.

Click OK to create your new project.

The Integrated Development Environment (IDE)

Toolbox

Blank Form

Solution Explorer

Properties Windows

Menu and Toolbars

Toolbox

Things like buttons, textboxes, and labels are all things that you can add to your Forms. They are know as Controls, and are kept in the Toolbox for ease of use.

The Toolbox can be found on the left of the screen. In the picture below, you can see the toolbox icon next to Form1 (VB Net 2008):

Visual Basic Controls•They can be added to the form by double clicking the control or drag and drop the control from the toolbox to the form.

• You can also single click the control, point where you want the control and stretch to the size you want. We will look at four controls.

Toolbox (cont)

To display all the tools, move your mouse over the toolbox icon. You'll see the following automatically appear:

Toolbox (cont)

As you can see, there are an awful lot of tools to choose from!

For this first section, we'll only be using the Button, the TextBox and the Label. If you want to keep the toolbox displayed, click the Pin icon next to the X. To close the toolbox, simply move your mouse away.

Properties

You've probably noticed the area to the right of the design environment, the area with all the textboxes in a grid, the one that has those daunting names like "AccessibleDescription", "AccessibleName", "AccessibleRole".

That's the Properties box. On the right of the design

environment there should be the following Properties box:

Properties Click away from the textbox

or label until the Properties box reads "Form1 Form“.

What you are looking at is a list of the properties that a form has: Name , BackColor, Font, Image, Text, etc. Just to the right of these properties are the values for them.

These values are the default values, and can be changed.

List Properties Display the list properties

alphabetically by clicking the Alphabetic icon at the top of the Properties Box.

Before we change any in the Properties box, let's clear up what we mean by "Property".

What is a Property? Those controls you added to the form

(textboxes and labels), and the form itself, are called control objects. You can think of controls as things, something solid that you can pick up and move about. Controls (things) have properties.

In VB, you can change a property of a control from the Properties Box.

VB Properties We will now change the

values to our Form object by doing the following: Locate the word "Text" in the

Property box. Click inside the area next to

"Text", and delete the word "Form1" by hitting the backspace key on your keyboard

When "Form1" has been deleted, type the words "My First Form“

Properties Click anywhere on the form that is not a label

or a textbox, somewhere on the form's grey areas. The form should have the little sizing handles now, indicating that the form is selected.

On the right of the design environment there should be the following Properties box:

Adding a Tool (Control) to your Form

Let's start by adding a textbox to our form. With the tools displayed, do the following: Locate the TextBox tool Double click the icon A textbox is added to your form

The textbox gets added to the top left position of your form. To move it down, hold your mouse over the textbox and drag to a new position:

Adding a Label Let's add some labels

near the textboxes so that your users will know what they are for. Locate the label control in the

toolbox Double click the label icon A new label is added to your form

Click on the label to select it. Now hold your left mouse button down on the label. Keep it held down and drag it to the left of the textbox.

Naming a Label Name the Label1 "Name". To do

that right click on Label1, click on Properties.

The Properties window will appear on the right.

Change the property of Text to Name:

Add more Label and Textbox Add a new Textbox and a new Label and a button

as the picture below, and name the second change the new label's text properties to Last and the button's text to Get Name.

VB Properties Click back on the form itself

(the one with the labels and textboxes), or hit the return key on your keyboard.

The words "My First Form" will appear as white text on a blue background at the top of the form.

Adding a Splash of Colour

Changing the colour of the Form means we have to change one of its properties - the BackColor property.

To change the colour of the Form, click the word "BackColor" in the Property Box.

Next, click the black down-pointing arrow to the right.

A drop-down box will appear.

Changing Color of the Labels

To change the colour of the labels, click on a label to select it. Look in the Property box to see if it reads Label. Change the BackColor property of the Label in exactly the same way that we changed the BackColor property for our Form.

To change the colour of more than one Label at a time, click on one Label to select it. Hold down the "Ctrl" key on your keyboard and click another Label.

Changing the Font Size To change the Font size of the

Labels and Textboxes, select a control. Let's start with Label1. Click on Label 1 Scroll down the Property Box until

you see Font Click on the word "Font" to highlight

it MS Sans Serif is the default Font

Changing the Font Size Notice that the Font property has a

cross next to it. This indicates that the property is expandable. Click the cross to see the following:

As you can see, you can change a lot of Font properties from here: the Name of the font, its Size, whether is should be Bold or not, etc.

Make the following changes to the three labels:

Font: ArialFont Style: BoldFont Size: 10

Writing the Code Here comes the fun part: WRITING THE CODE

Double click on the new button that says "Get Name" to go to the codes page.

You will see a code like this:Public Class Form1

Private Sub Button1_Click(ByVal sender As System.Object, _ ByVal e As System.EventArgs)_Handles Button1.Click

End Sub

End Class

Writing the Code Now we will tell the form to produce a

message box and show the name and the last name when we click on "Get Name“.

You will enter this code between the second line and the third line:

After adding this code go to Build, Publish MyFirstApp.

MsgBox("My Name is " & TextBox1.Text & " " & TextBox2.Text)

Writing the Code Now enter a name inside the first textbox, and

a last name inside the second textbox, and then click on "Get Name" and you should get something like this:

MsgBox:  We told the program to display a message box that

tells us whatever we entered in the form.

Explanation of the Code Private

Private means that no other part of the programme can see this code except for our button

Sub Short for Subroutine. The "Sub" word tells VB that some

code follows, and that it needs to be executed Button1

This is the name of our button. You might think that we've just erased the word "Button1" when we changed the Text property. The Name property of the control is the important one. If you change the Name property, VB will change this button name for you.

Explanation of the Code

_Click ( ) This is something called an Event. In other words, when

the button is clicked, the Click Event will fire, and the code we're going to write will be executed

End Sub The subroutine ends right here. This signifies the end of

our code

Using the ListBox This program will add one item at a time as the

user enter an item into the TextBox and click the Add button.Class Frm1

Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) _Handles Button1.Click

Dim item As Stringitem = TextBox1.Text

'To add items to a listboxListBox1.Items.Add(item)

End Sub

End Class

Using the PictureBox In this program, we insert a PictureBox and a

Button into the form.

Make sure to set the SizeMode property of the PictureBox to StretchImage so that the whole picture can be viewed in the picture box.

Key in the code as shown below and you can load an image from a certain image file into the PictureBox.

Using the PictureBox Code:

Public Class Form1

Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs)_ Handles Button1.Click

'To load an image into the PictureBox from an image filePictureBox1.Image = Image.FromFile("c:\Users\Public\Pictures\Sample Pictures\Frangipani Flowers.jpg")

End Sub

Run and Debug the Program

To see what your Form looks like as a programme, click Debug > Start from the menu bar. Or press F5 on your keyboard:

Running the program

To run the form, try this: From the menu bar, click Debug From the drop down menu, click

Start Alternatively, press the F5 key on

your keyboard Your programme is launched