VPL Lecture2 PDF

CSU_07310 – Lecture 2
VISUAL PROGRAMMING
Instructor: Mr. Bakiri A. Hussein

THE INSTITUTE OF FINANCE MANAGEMENT
2017/18
BCS 2
Objectives
After studying this chapter, you should be able to:
• Create a Visual Basic 2010 Windows-based
application
• Manage the windows in the Integrated Development
Environment (IDE)
• Set the properties of an object
• Add a control to a form
• Use the Label, Button, and PictureBox tools
• Use the options on the Format menu
Microsoft Visual Basic 2010: Reloaded, Fourth Edition 2

Objectives (cont'd.)
• Enter code in the Code Editor window

• Save a solution
• Start and end an application
• Print an application’s code and interface
• Write an assignment statement
• Print an application’s code and interface
• Close and open an existing solution
• Find and correct a syntax error

Visual Studio 2010
• Visual Basic 2010 is an object-oriented
programming language
– Object: anything that can be seen, touched, or used
– Class: a pattern used to create an object
– Instance: an object created from a class; object is
said to be instantiated
• Integrated Development Environment (IDE):
– Contains all the tools and features needed to create,
run, and test programs
– Includes Visual Basic, Visual C++, Visual C#, and
Visual F#
Visual Studio 2010 (cont'd.)
• Application: program or suite of programs
• Windows-based application:
– Has a Windows user interface
– Runs on a personal computer
• User interface: what the user sees and interacts with
when using an application
• Web-based application:
– Has a Web user interface
– Runs on a server
– Accessed with a computer browser
Creating a Visual Basic 2010
Windows Application
• Windows applications consist of solutions, projects,
and files
• Solution: a container that stores projects and files
for an entire application
• Project: a container that stores files associated with
a specific portion of the solution
• A solution may contain one or more projects

Solutions, Projects, and Files (cont'd.)
Figure 1-1: Illustration of a solution, project, and file

Starting Microsoft Visual Studio 2010
Figure 1-2: How to start Visual Studio 2010 or Visual Basic 2010
Express Edition

Figure 1-3: Visual Studio 2010 Professional startup screen

Figure 1-4: Visual Basic 2010 Express startup screen

How to Create a Visual Basic 2010
Windows Application
Figure 1-5: How to create a Visual Basic 2010 Windows application

Windows Application (cont’d.)
Figure 1-5: How to create a Visual Basic 2010 Windows application (cont’d.)

Figure 1-6: Options dialog box

Figure 1-7: Completed New Project dialog box in Visual Studio 2010
Figure 1-8: Completed New Project dialog box in

Visual Basic 2010 Express Edition
Figure 1-9: Solution and Visual Basic Project

Managing the Windows in the IDE
Figure 1-10: How to manage the windows in the IDE

The Windows Form Designer Window
• Windows Form Designer window:

– Allows you to create (design) the GUI
• Graphical user interface (GUI):
– What the user sees and interacts with
• Windows Form object (or form):
– Foundation for the user interface
– Add other objects such as buttons/text boxes to form
– Title bar with caption and Minimize, Maximize, and
Close buttons
– Tab at top of designer window has Form1.vb [Design]
The Windows Form Designer Window
(cont’d.)
Figure 1-11: Windows Form Designer window

The Solution Explorer Window
• Solution Explorer window:

– Displays a list of projects contained in this solution
– Displays the items contained in each project
Figure 1-12: Solution Explorer window

The Solution Explorer Window
(cont'd.)
• Source file: a file containing program instructions
• Code: program instructions
• Form file: a file containing code associated with a
Windows form
• Give each form file a meaningful name using the
Properties window

The Properties Window
• Properties: a set of attributes that determine an

object’s appearance and behavior
• Properties window: displays properties of selected
object
• Default property values are assigned when an
object is created

The Properties Window (cont'd.)
Figure 1-13: Properties window showing the Form1.vb file’s properties

The Properties Window (cont'd.)
• Properties window includes an Object box and a

Properties list
• Object box:
– Located immediately below Properties window title bar
– Contains the name of the selected object
• Properties list:
– Left column displays names of properties
• Use the Alphabetical or Categorized buttons to sort the
display of properties
– Settings box: Right column containing the current
value of each property

Properties of a Windows Form
Figure 1-14: Properties window showing a partial listing of the form’s properties
(cont'd.)
• Class definition: block of code that defines the
attributes and behaviors of an object
– All class definitions are contained in namespaces
• Namespace: defines a group of related classes
• Dot member access operator: the period that
separates words in an object’s name to indicate a
hierarchy of namespaces
• Name property: used to refer to an object in code
– Give each object a meaningful name

(cont'd.)
• Pascal case:
– First letter of each word in the name is uppercase
– First part of name is object’s purpose
– Second part of name is object’s class
• Text property: controls the caption displayed on
form’s title bar
• StartPosition property: determines the form’s
position on the screen when application starts
• Font: general shape of characters in text
– Recommended font is Seqoe UI font
• Point: a measure of font sizes; one point = 1/72 inch
The Toolbox Window
• Toolbox:
– Contains objects that can be added to other objects,
such as a form
– Each tool has an icon and a name to identify it
– Each tool represents a class from which objects, called
controls, can be created
• Controls:
– Objects displayed on a form
– Represented as icons in the toolbox
• Controls on a form can be selected, sized, moved,
deleted, locked in place on the form and unlocked
Figure 1-15: Toolbox window
The Toolbox Window (cont'd.)
Figure 1-16: How to add a control to a form

The Toolbox Window (cont'd.)
Figure 1-17: How to manipulate the controls on a form

The Label Control
• Label control:
– Displays text that user cannot edit
– Used as “prompts” to explain controls or display output
– Name should end with “Label”
• Control names use camel case
• Camel case: lowercase first word; uppercase first
letter of each subsequent word in the name
• Not necessary to assign meaningful names for labels
used as prompts because they are never used in
code
• Labels used for output should have meaningful
names
The Label Control (cont'd.)
Figure 1-18: Wizard application’s user interface

The Button Control
• Button control:
– Performs an immediate action when clicked
– Its name should end with “Button”
• Text property: specifies the text that appears on the
button’s face

The Picture Box Control
• Picture box control: used to display an image on a
form
• Image property: specifies the image to display
• SizeMode property: handles how the image will be
displayed
– Settings: Normal, StretchImage, AutoSize,
CenterImage, or Zoom

Using the Format Menu
• Format menu: provides options for manipulating
controls on the form
– Align option: aligns two or more controls by left,
right, top, or bottom borders
– Make Same Size option: makes width and/or height
of two or more controls the same
– Center in Form option: centers controls horizontally
or vertically on the form
• Multi-select controls by clicking the first, then using
Ctrl-click for each additional control
– First control selected is the reference control
• Its size/position is used to adjust the others
The Code Editor Window
• Events: user actions while program is running

– Examples: clicking, double-clicking, scrolling
• Event procedure: set of instructions to be
processed when an event occurs
– Tells the object how to respond to an event
• Code editor window: used to enter event
procedure’s code

The Code Editor Window (cont'd.)
Figure 1-19: How to open the Code Editor window

Figure 1-20: Code Editor window

• Class statement: used to define a class
– Begins with Public Class <class name>
– Ends with End Class
• Class Name list box: lists the names of objects
(controls) included in the user interface
• Method Name list box: lists the events to which
the selected object is capable of responding
• When you select a control from the Class Name list
box and a method name, a code template for the
event appears in the Code Editor window
• Syntax: rules of the language
• Keyword: a word with special meaning in a
programming language
• Event code template has a procedure header and
a procedure footer
• Event’s procedure header:
– Begins with keywords Private Sub
– Procedure name includes object name and event
name
– Handles clause indicates for which objects’ events
this code will execute
• Sub procedure: block of code that performs a task
Figure 1-21: Code template for the exitButton’s Click event procedure

The Me.Close() Instruction
• Me.Close() instruction: closes the current form

at run time
– If the current form is the only form, the application is
terminated
• Me keyword: refers to the current form
• Method: predefined VB procedure that can be
invoked (called) when needed
• Sequential processing: each line is executed in
sequence
– Also called a sequence structure

The Me.Close() Instruction (cont'd.)
Figure 1-22: Me.Close() instruction entered in the Click event procedure

Saving a Solution
• An asterisk appears on the designer and Code

Editor tabs if a change was made since the last
time the solution was saved
Figure 1-23: How to save a solution

Starting and Ending an Application
• Startup form: the form to be displayed when the
application starts
Figure 1-24: How to specify the startup form

(cont'd.)
Figure 1-25: Project Designer window

(cont'd.)
Figure 1-26: How to start an application

(cont'd.)
Figure 1-27: Result of starting the Wizard Viewer application

(cont'd.)
• When you start a VB application, the IDE creates
an executable file
• Executable file:
– Can be run outside of Visual Studio 2010
– Has a file extension of .exe
– Stored in the project’s bin\Debug folder

(cont'd.)
Figure 1-25: How to end an application

Assigning a Value to a Property
During Run Time
• Properties window is used to set property values at
design time
• Assignment statement: assigns a value to a
variable or property of a control
– Used to set property values at run time
• String: zero or more characters enclosed in
quotation marks
• Assignment operator: the = sign
• Value of the expression on the right of the = sign is
assigned to the object and property on the left of
the = sign
Using an Assignment Statement
(cont'd.)
Figure 1-29: Assignment statements entered in the Code Editor window

Printing the Code and User Interface
Figure 1-30: How to print the code and interface during design time
Closing the Current Solution
• Closing a solution closes all projects and files in

that solution
– You are prompted to save any files that have
unsaved changes
Figure 1-31: How to close a solution

Opening an Existing Solution
• Only one solution can be open at any one time
• If a solution is already open, opening a different
one will close the currently open solution
Figure 1-32: How to open an existing solution

Coding Errors (cont’d.)
Figure 1-34: Syntax error message

• Syntax errors should be corrected before starting

an application
• If you start an application with a syntax error, a
dialog box appears
– Click No to open the Error List window
Figure 1-35: Dialog box

Figure 1-36: Result of starting an application that contains a syntax error

Programming Tutorial 1
Figure 1-54: Result of starting the Wizard application

Programming Tutorial 2
Figure 1-67: Result of clicking the Abby button

Programming Example
Figure 1-68: User interface

Summary
• Object-oriented programming language allows

programmers to use objects to accomplish a goal
• Object: can be seen, touched, or used and has
attributes that control its appearance and behavior
• Class: a pattern from which an object can be
created
• Applications created in Visual Studio 2010 are
composed of solutions, projects, and files
• Windows Form Designer window: used to create
GUI applications
Summary (cont'd.)
• A form is the foundation for the user interface

• Windows Form object is instantiated from the
Windows Form class
• Solution Explorer window: displays names of
projects and files in the solution
• Properties window: lists an object’s properties
• All class definitions are contained in namespaces
• System.Windows.Forms namespace contains
definition of the Windows Form class and class
definitions for objects added to a form
Summary (cont'd.)
• Name property: used to refer to an object in code

• Text property of a form: specifies the text to be
displayed in the title bar of the form and in the
taskbar when running
• Form’s StartPosition property sets the position of
the form when it first appears at run time
• Recommended font is Segoe UI in 9-point size
• Toolbox: contains tools for creating the GUI
• A control’s Text property value is displayed inside
the control
Summary (cont'd.)
• Controls on a form can be selected, sized, moved,

deleted, or locked at design time
• Label control: contains text that a user cannot edit
• Button control: performs an immediate action when
clicked
• Picture box control: displays an image on a form
• Format menu provides options for aligning and
sizing controls on a form
• Event procedure: the code that tells an object how
to respond to an event
Summary (cont'd.)
• Use the Class Name and Method Name list boxes

to select an object and event to code
• Code Editor: provides code templates for each
object’s event procedures
• Me.Close() instruction: can terminate an
application
• Computer automatically creates an executable file
when you start a Visual Basic application in the IDE
• Use an assignment statement to assign a value to
a property during run time
Summary (cont'd.)
• You should print your application’s code and its

user interface
• Closing a solution closes all projects and files in it
• The process of locating and correcting errors
(bugs) in a program is called debugging

VPL Lecture2 PDF

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

VPL Lecture2 PDF

Uploaded by

Copyright:

Available Formats

CSU_07310 – Lecture 2

Instructor: Mr. Bakiri A. Hussein

Microsoft Visual Basic 2010: Reloaded, Fourth Edition 2

• Enter code in the Code Editor window

Microsoft Visual Basic 2010: Reloaded, Fourth Edition 3

Microsoft Visual Basic 2010: Reloaded, Fourth Edition 6

Figure 1-1: Illustration of a solution, project, and file

Microsoft Visual Basic 2010: Reloaded, Fourth Edition 7

Microsoft Visual Basic 2010: Reloaded, Fourth Edition 8

Microsoft Visual Basic 2010: Reloaded, Fourth Edition 9

Microsoft Visual Basic 2010: Reloaded, Fourth Edition 10

Figure 1-5: How to create a Visual Basic 2010 Windows application

Microsoft Visual Basic 2010: Reloaded, Fourth Edition 12

Figure 1-6: Options dialog box

Microsoft Visual Basic 2010: Reloaded, Fourth Edition 13

Figure 1-8: Completed New Project dialog box in

Figure 1-9: Solution and Visual Basic Project

Microsoft Visual Basic 2010: Reloaded, Fourth Edition 16

Figure 1-10: How to manage the windows in the IDE

• Windows Form Designer window:

Figure 1-11: Windows Form Designer window

• Solution Explorer window:

Figure 1-12: Solution Explorer window

Microsoft Visual Basic 2010: Reloaded, Fourth Edition 20

Microsoft Visual Basic 2010: Reloaded, Fourth Edition 21

• Properties: a set of attributes that determine an

Microsoft Visual Basic 2010: Reloaded, Fourth Edition 22

Figure 1-13: Properties window showing the Form1.vb file’s properties

Microsoft Visual Basic 2010: Reloaded, Fourth Edition 23

• Properties window includes an Object box and a

Microsoft Visual Basic 2010: Reloaded, Fourth Edition 24

Microsoft Visual Basic 2010: Reloaded, Fourth Edition 26

Figure 1-16: How to add a control to a form

Microsoft Visual Basic 2010: Reloaded, Fourth Edition 30

Figure 1-17: How to manipulate the controls on a form

Microsoft Visual Basic 2010: Reloaded, Fourth Edition 31

Figure 1-18: Wizard application’s user interface

Microsoft Visual Basic 2010: Reloaded, Fourth Edition 34

Microsoft Visual Basic 2010: Reloaded, Fourth Edition 35

• Events: user actions while program is running

Microsoft Visual Basic 2010: Reloaded, Fourth Edition 37

Figure 1-19: How to open the Code Editor window

Microsoft Visual Basic 2010: Reloaded, Fourth Edition 38

Figure 1-20: Code Editor window

Microsoft Visual Basic 2010: Reloaded, Fourth Edition 39

Microsoft Visual Basic 2010: Reloaded, Fourth Edition 42

• Me.Close() instruction: closes the current form

Microsoft Visual Basic 2010: Reloaded, Fourth Edition 43

Figure 1-22: Me.Close() instruction entered in the Click event procedure

Microsoft Visual Basic 2010: Reloaded, Fourth Edition 44

• An asterisk appears on the designer and Code

Figure 1-23: How to save a solution

Microsoft Visual Basic 2010: Reloaded, Fourth Edition 45

Figure 1-24: How to specify the startup form

Figure 1-25: Project Designer window

Figure 1-26: How to start an application

Microsoft Visual Basic 2010: Reloaded, Fourth Edition 48

Figure 1-27: Result of starting the Wizard Viewer application

Microsoft Visual Basic 2010: Reloaded, Fourth Edition 49

Microsoft Visual Basic 2010: Reloaded, Fourth Edition 50

Figure 1-25: How to end an application

Microsoft Visual Basic 2010: Reloaded, Fourth Edition 51