DFP4013

VISUAL PROGRAMMING
CHAPTER 2
PROGRAM AND GUI
.NET APPLICATION DEVELOPMENT

[CLO 2: Develop a window application using Visual Basic

.Net with ADO and apply effective secure coding (C3, A5,
P4, PLO1, PLO2, PLO4)
Learning Outcome
 Use the ToolBox control.
Textbox, Label, Command Button, List Box, Combo Box, Option
Button, Check Box, Frame, Scroll Box, Frame Controls and others.
 Determine the properties of Object Controls.
 Use suitable naming prefixes for the object controls.
 Identify programming style and documentation in VB.NET:
a. appropriate comments and comments style
b. naming conventions
c. proper indention and spacing
d. block styles
Starting a New Project

Default: Windows Forms Application

The Integrated Development Environment
(IDE)

 Menu bar provides many menu items

 Examples include File and Edit
menus
 Provideslies
 Toolbar shortcuts
below to menu
the menu bar
bar
 Toolbox
 Contains various icons representing VB
controls
Shows all forms,
Solution references, classes, and modules the
Explorer
current project contains
The IDE

Toolbar Menu bar

Solution Explorer and Properties Window

Solution Explorer
shows all the forms,
classes, references
and modules in the
project

Properties window
shows all the
properties for the
selected object
 Auto Hide
 Hides tool windows when not in use
 Vertical push pin icon indicates auto hide is

disabled.
 Click the push pin to make it horizontal and
enable auto hide.
 The Code Window
Tabs at top let you toggle between the form and
the code window
Procedure box
lists events
Object box the object in
lists all the object box
objects in recognizes
the form

Object-oriented syntax:
object and property Comments
separated by dot (period) appear green
in the IDE
 Understanding the IDE
 Design time
 When you are placing controls on the form
 When you are writing code in the code

window
 Runtime
 When the code in your project comes to life,
responding to events
 Press Start on the Debug menu in the IDE
 Press the F5 key in the IDE
 Press the start button in the IDE
 Interfaces of VB Objects
 Forms and controls are objects
 Objects have interfaces:
1) Properties: typically relate to appearance of
objects
2) Events: user or system actions recognized by
the object
 Procedures written to handle events
3) Methods: actions that objects are capable of
performing
 1) Properties
 Special types of data associated with object
 Most relate to appearance of objects

 i.e. Label1.BackColor = Color.Red

 Some relate to behavior of objects
 i.e. btnNext.Enabled = True
 Object and property separated by dot
(period)
 Property must be given a value
 2) Events
 User or system actions the object recognizes
 i.e. a button has a Click event
 Event procedure
 Procedure written to handle a specific event
 Also called event handler

 Syntax: Private Sub ObjectName_Event

 Code surrounded by Sub … End Sub
 Private refers to the scope of the procedure
 Object and event separated by underscore
 3) Methods
 Actions objects are capable of performing
 ex: Me.Close()
 Syntax: Object.Method(Parameter List)
 Parameter list: arguments passed in to the method
 Parameter list must be enclosed in parentheses,
even if no parameters are required
 The three steps in creating a
VB.NET program:
1. Create the interface; that is, generate,
position, and size the objects.
2. Set properties; that is, configure the
appearance of the objects.
3. Write the code that executes when events
occur.
ToolBox control: TextBox
 Drag TextBox from ToolBox
 Sizing

 Rename with appropriate name

 Properties

 Text, Color, Font, Size, Location, Visible,

Enabled
ToolBox control: Button
 Add the button
 Change the Text property

 Rename with appropriate name

ToolBox control: Label
 Add the Label
 Change the Text property

 Resize the control

 Rename with appropriate name

ToolBox control: List Box
 Add the List Box
 Add data

 Resize the control

 Rename with appropriate name

MessageBox.Show
 The MessageBox.Show method is used to display a box
with a message for the user
 The message box also contains a title and an icon
 General forms of the MessageBox.Show method:
 MessageBox.Show(text)
 MessageBox.Show(text, caption)
 MessageBox.Show(text, caption, buttons)
 MessageBox.Show(text, caption, buttons, icon)
 MessageBox.Show(text, caption, buttons, icon, defaultbutton)

 To do: Add a MessageBox.Show to the button click

event
 The Name Property

 How the programmer refers to a control in code

 Name must begin with a letter

 Must be less than 215 characters long

 May include numbers and the underscore

 Use Camel Casing (Lower Case / Upper Case)

 Use appropriate 3 character naming prefix

 First three letters identifies the type of control

 Remaining letters identifies the purpose

 E.g. a text box to store a Student Name would be

called txtStudName
Common Control Name Prefixes

Control Prefix Example

button btn btnComputeTotal
label lbl lblInstructions
list box lst lstOutput
text box txt txtAddress
 Adding Code to an Event
 To add code for an event:
In the VB Code Window select the control on the left side
menu and the event of interest on the right side menu

Or double-click the control in the designer to bring up the

most common event for that control

 Other methods for opening the Code window:

 If the Code window is visible, click on it
 Double-click anywhere on the Form window
 Select the Code option from the View menu
 Select the View Code icon from the Project Window
Event Procedure

 An event is an action, such as:

The user clicks on a button


 A form is minimized

 The mouse enters or exits a control

 The form is re-drawn

 Usually, nothing happens until an event occurs

 Event Procedures
Private Sub objectName_event(ByVal sender As System.Object, ByVal e As
System.EventArgs)
Handles objectName.event

For now you can ignore most of this, aside from knowing the name of the
subroutine:

Private Sub objectName_event(…) Handles objectName.event

Structure of an Event Procedure

Private Sub objectName_event(...)

Handles objectName.event
statements ‘ Your code goes here
End Sub
Program Region
Assigning properties in code
The following won't work:
Form1.Text = "Demonstration"

 The current form is referred to by the

keyword Me.
Me.Text = "Demonstration"
Declaration Statement

 A declaration statement for an event procedure:

Private Sub btnOne_Click(...) Handles btnOne.Click

 The name can be changed at will. For example

Private Sub ButtonPushed(...) Handles btnOne.Click

 Handling more than one event:

Private Sub ButtonPushed(...) Handles btnOne.Click, btnTwo.Click
Comment Statement

 Comments
 Explanatory remarks made within a program
 Indicated by an apostrophe (‘) or the keyword
Rem
 Statement categories
 An executable statement causes some specific action
to be performed by the compiler or interpreter
 A non executable statement is a statement that
describes some feature of either the program or its
data but does not cause the computer to perform
any action
 Getting Help from the Help Menu

Enter search
term in the
Look for box

Double-click
an item in
the list box

Double-click an item in the lower center pane; upper center pane

shows results
 Summary
 A Visual Basic.Net program consists of a visual part
and a language part
 Basic steps for developing a Visual Basic.Net
program:
 Create the GUI
 Set the properties of each object on the interface
 Write procedural code
 A form is used during design time to create a
graphical user interface for a Visual Basic.Net
application
 The most commonly placed objects on a form are
buttons, labels, and text boxes
CROSSWORD PUZZLE

Across
1. What is the components that use to
set an attribute for toolbox object?
4. What is the name of the Visual Studio
window that contains control that can
be dragged onto a form?
5. The ____________ properties is use
to rename the textbox name.
6. Visual Studio Integrated
Development Environment (IDE) is
used for developing applications written
in .NET, TRUE or FALSE?

Down
2. Which IDE components can listed all
the files in the solution project?
3. The ____________ properties
specifies the text that is displayed in the
title bar for form.
Learning Outcome

Use Menus and Submenus.

• Explain the usage of menus and submenus.
• Create menu with the Menu Editor: drop-down,
multi-level and pop-up menus.
• Modify menus at run time.

Apply Dialog Boxes.

• Explain the usage of dialog boxes.
• Create dialog boxes example color, fonts, print,
open and save.
• Dialog boxes in application.
 Objectives
 Create and use menus and submenus for program
control
 Display and use the Windows common dialog

boxes
 Create and use message box and input box in

application
 Menus

 What is the purpose of using Menus??

 Menus
 A menu is a list of commands or options available
to users in the current context.
 Menus will look and behave like standard
Windows menus
 Easy to create menus for a Windows form using
the Visual Studio environment’s Menu Designer
Menus
 Menu Bar
 Contains menus which drop down to display list of
menu items
 Can be used in place of or in addition to buttons to
execute a procedure
 Menu items are controls with properties and events
Defining Menus
 MenuStrip component is added
to a form

 MenuStrip is a container to
which ToolStripMenu Items,
ToolStripComboBoxes,
ToolStripSeparators, and
ToolStripTextBoxes can be
added
Defining Menus

The MenuStrip component

appears in the component tray
below the form and the Menu
Designer allows you to begin
typing the text for the menu
items.
 The Text Property for Menus
 Holds the words that appear on the screen - like
the Text property of a button or label
 To conform Windows standards the first menu’s
Text property should be File, with a keyboard
access key
 Use the ampersand (&) in the text to specify the key
to use for keyboard access
Enter and change the Text property for each

menu and menu item using the Menu Designer or
make the changes in the Text property using the
Properties window
The Name Property for Menus
 The File menu item that is added is
automatically named FileToolStripMenuItem
 The items are named so well that there
won’t be a need to change the Name
property of any menu component
 If the Text property is changed for any menu
item, the item is not automatically renamed; it
will need to be renamed.
 The MenuStrip Items Collection
 ToolStripMenu/submenus Items in the collection
can be displayed, reordered, added, deleted
using the Items Collection Editor
 Submenus

 Filled triangle to the

right of the menu
item indicates to the
user the existence of
a submenu
 Create submenus by
moving to the right of
a menu item and
typing the next item's
text
 Separator Bars
 Used for grouping
menu items according
to their purpose
 Visually represented
as a bar across the
menu
 To create a separator
bar, add a new menu
item and click on its
drop-down arrow
 Menu Properties
 Enabled property, True/False-can be set at
design or run time

 Checked property, False/True-can be set at

design or run time
 Used to indicate that an option is selected

 Setting keyboard shortcuts

 Select the menu item and In Properties window
for menu item, select the ShortcuKeyst property
 Make choice from drop-down list
 Standards for Windows Menus
 Follow Windows standards for applications
 Include keyboard access keys

 Use standards for shortcut keys, if used

 Place the File menu at left end of menu bar

and end File menu with the Exit command
 Help, if included, is placed at right end of
menu bar
File Edit View Format Help
COMMON DIALOG BOX
 Common Dialog Boxes
 Dialog box are use for requesting users for
specific kinds of inputs.
 Predefined standard dialog boxes for:
Specifying colors and fonts
 Printing, opening, and saving

 Add appropriate Common Dialog components

to display the dialog boxes that are provided
as part of the Windows environment.
 Common Dialog Tools

 ColorDialog
 FolderBrowserDialog
 FontDialog
 OpenFileDialog

 SaveFileDialog
 Displaying a Windows Common Dialog Box

 Use ShowDialog method to display the

common dialog box at run time
 ShowDialog only displays the dialog

ColorDialog1.ShowDialog( )
FontDialog1.ShowDialog( )
 Using the Information from the Dialog Box

 Code must be written to retrieve and use

the choice made by the user in the
common dialog box
 Example:
 Color Dialog displayed
 User selects color and clicks OK-the selected
color is stored in a property that can be
accessed
 Color that is selected is stored in the Color
property and can be assigned to another
object such as a control
titleLabel.BackColor = ColorDialog1.Color
MESSAGE BOX AND INPUT BOX
Message box
 Message box are use for displays a message in
a dialog box, waits for the user to click a button
and returns an Integer indicating which button
the user clicked.
 Contain a system icon, a set of buttons, and a
brief application-specific message, such as
status or error information.
 The MessageBox.Show Method
 The MessageBox.Show method is used to display a box
with a message for the user
 The message box also contains a title and an icon
 General forms of the MessageBox.Show method:
 MessageBox.Show(text)
 MessageBox.Show(text, caption)
 MessageBox.Show(text, caption, buttons)
 MessageBox.Show(text, caption, buttons, icon)
 MessageBox.Show(text, caption, buttons, icon, defaultbutton)

 To do: Add a MessageBox.Show to the button click

event
The MessageBox.Show Methodox

 MessageBox.Show(Text)
 MessageBox.Show("Ini contoh untuk paparan
mesej sahaja")
 Output:
Message
The Box
MessageBox.Show Methodox

 MessageBox.Show(Text,Title)
 MessageBox.Show("Ini contoh untuk paparan
mesej dan Tajuk", "Mesej")
 Output:
Message
The Box
MessageBox.Show Methodox

 MessageBox.Show(Text,Title,Button)
 MessageBox.Show("Ini contoh untuk paparan
mesej dan Tajuk dan Button Yes dan No","Mesej",
MessageBoxButtons.YesNo)
 Output:
Message
The Box
MessageBox.Show Methodox

 MessageBox.Show(Text,Title,Button,Icon)
 MessageBox.Show("Ini contoh untuk paparan
mesej dan Tajuk dan Button OK dan CANCEL dan
Icon Information", "Mesej",
MessageBoxButtons.OKCancel,
MessageBoxIcon.Information)
 Output:
 Message
The Box ButtonsMethodox
MessageBox.Show

MessageBox Button Output

MessageBoxButtons.OK
MessageBoxButtons.OKCancel
MessageBoxButtons.YesNo
MessageBoxButtons.YesNoCancel
MessageBoxButtons.RetryCancel
MessageBoxButtons.AbortRetryIgno
re
Message
The Box Icon Methodox
MessageBox.Show

MessageBox Button Output

MessageBoxIcon.Asterisk /
MessageBoxIcon.Information /
MessageBoxIcon.Stop
MessageBoxIcon.Error /
MessageBoxIcon.Warning
MessageBoxIcon.Exclamation

MessageBoxIcon.Question
Input box

 An input box is a specially designed dialog

box that allows the programmer to request a
value from the user and use that value as
necessary.

 An input box displays a title, a message to

indicate the requested value, a text box for
the user, and two buttons: OK and Cancel.
 Input box
 Here is an example:

InputBox("Enter Student's Date of Birth", _

"Red Oak High School - Student Registration")

InputBox("Enter Student's Date of Birth", _

"Red Oak High School - Student Registration", _
"MM/DD/YYYY"
Example:
Input Box Input box
 Codes to create an Input Box:

‘declare variable to get the value from inputbox

Dim nama As String
‘assign variable with input box
nama = InputBox("Masukkan Nama
Anda","Input Nama")
‘display message at lblmessage using variable
from the input box
lblMessage.Text = "Nama anda ialah " nama
SUMMARY
 ToolBox control.
 Textbox, Label, Command Button, List Box, Combo
Box, Option Button, Check Box, Frame, Scroll Box,
Frame Controls and others.
 Determine the properties of Object Controls.
 Suitable naming convention.
 Menus and Submenus.
 Dialog Boxes.
 Input Dialog.
 Message Box.