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.