Lect01 Introduction of Visual Basic

1
T U T O R I A L
Welcome
3
Application
Introduction to
Visual Programming
https://www.facebook.com/groups/252543721572219
 2009 Pearson Education, Inc. All rights reserved.

2
Outline
3.1 Test-Driving the Welcome Application

3.2 Constructing the Welcome Application
3.3 Objects Used in the Welcome Application

3
Objectives
In this tutorial you will learn:

■ Set the text in the Form’s title bar.
■ Change the Form’s background color.
■ Place a Label control on the Form.
■ Display text in a Label control.
■ Place a PictureBox control on the Form.
■ Display an image in a PictureBox control.
■ Execute an application.

4
Introduction
■ Users prefer software with interactive graphical

user interfaces (GUIs) that respond to actions
(events) such as Button clicks, data input and
much more (4th generation language).
■ The majority of Windows applications are GUI
based.
■ With Visual Basic, you can create Windows
applications that input and output information in
a variety of ways.
■ Visual Basic uses objects (properties and
methods).
5
Introduction (Cont.)
an object is a programming structure that encapsulates data
(properties) and functionality (methods) as a single unit
(Object) Button1 (instance of button)
Button1.ButtonText = “OK” (set property)

X = Button1.ButtonText (get property)
(Properties)
Button2 (instance of button)

Button2.ButtonText = “Cancel”
Setting and Getting properties can be done at design time

and run time
6
3.1 Test-Driving the Welcome Application

Application Requirements
Recall that a software company (Deitel & Associates)

has asked you to develop a simple Welcome
application that includes the greeting “Welcome to
Visual Basic 2008!” and a picture of the company’s bug
mascot. Now that you’re familiar with the Visual Basic
IDE, your task is to develop this application to satisfy the
company’s request.

7
Test-Driving the Welcome Application
■ Open Windows Explorer (Fig. 3.1) and navigate to the C:\

Examples\Tutorial03\CompletedApplication\
Welcome directory. Select Welcome.sln and click the
Open Button (Fig. 3.2).
Open Project... command (selected)

opens an existing project
Figure 3.1 | Opening an existing project with the File menu’s

Open Project... command.

8
Test-Driving the Welcome
Application (Cont.)
Open Project dialog
Welcome solution file
Figure 3.2 | Open Project dialog displaying the contents of the Welcome solution.

9
Application (Cont.)
■ Double click Welcome.vb in the Solution Explorer to

open the Welcome application’s Form in Design view
(Fig. 3.3).
Figure 3.3 | Welcome application’s Form in Design view.

10
Application (Cont.)
■ Running the Welcome application. Select Debug >

Start Debugging (Fig. 3.4). The Start Debugging
command runs the application.
Start Debugging command

(selected) runs the application
Figure 3.4 | Running the Welcome application using the Debug menu’s
Start Debugging command.

11
Application (Cont.)
■ The Welcome Form shown in Fig. 3.5 appears.

Close
box
Figure 3.5 | Welcome application running.
■ Close the running application and then close the project.

12
Changing the Form’s File Name
and Title Bar Text
■ Open the C:\SimplyVB2008\Welcome\Welcome.sln

file that you created in Tutorial 2.
■ Double click Form1.vb in the Solution Explorer
window (Fig. 3.6) to display the blank Form.
IDE title bar

Solution Explorer window
Toolbar
Form title bar Project name
Form file name

Blank Form
Figure 3.6 | Blank Form.

13
and Title Bar Text (Cont.)
■ Select Form1.vb in the Solution Explorer window to

display the file’s properties in the Properties window.
■ Double click the field to the right of the File Name
property’s box to select the current file name, and type
Welcome.vb(Fig. 3.7).
File properties
New file name
Selected property New property

value
Selected property description
Figure 3.7 | Changing the Form’s file name.

14
Good Programming Practice

Change your application’s Form file name (Form1.vb)
to a name that describes the application’s purpose.

15
■ The title bar is the top portion of the window that contains the window’s
title.
■ To change this text, use the Properties window (Fig. 3.8).
– Click the gray area in the Form.
– Double click the field to the right of the Text property in the
Properties window to edit the field.
– Press the Enter key to update the Form’s title bar (Fig. 3.9).
Updated title bar
Selected property
Property value
Selected property Figure 3.9 | Title bar for the Welcome

description
application.
Figure 3.8 | Setting the Form’s Text property.

16
GUI Design Tip

Choose short, descriptive Form titles. Capitalize words
that are not articles, prepositions or conjunctions. Do
not use punctuation.

17
■ There are several ways to resize the Form.

– You can click and drag one of the Form’s enabled sizing
handles (the small white squares that appear around the Form
Fig. 3.10). Selected property
File properties Enabled sizing handles
Figure 3.10 | Form with sizing handles.

18
Setting the Form’s Size Property
■ To resize the Form and its controls with the Size property,
click the Form to select it.
■ Then locate the Form’s Size property in the Properties
window (Fig. 3.11).
■ Click the plus box, , next to this property.
– Type 616 for the Width property value and press Enter.
– Type 440 for the Height property value and press Enter.
– You also can enter the width and height (separated by a
comma) in the Size property’s value field.

19
Setting the Form’s Size Property (Cont.)
Size property values
Figure 3.11 | Size property values for the Form.

20
Setting the Form’s Background Color
■ Click the Form to display its properties in the Properties

window.
■ When you click the BackColor property’s value in the
Properties window, a down-arrow ( ) Button appears
(Fig. 3.12).
■ The down-arrow Button displays three tabs: System,
Web and Custom.
■ Click the Custom tab to display its palette (Fig. 3.12).

21
Setting the Form’s
Background Color (Cont.)
Down-arrow Button
Tabs
Custom palette
Current color
Custom colors can be

added to the white boxes
Figure 3.12 | Viewing the Custom palette in the Form’s BackColor property value
field.

22
■ Right click any one of the white boxes at the bottom of the
Custom palette to display the Define Color dialog
(Fig. 3.13).
■ Colors can be created by selecting a color in the rainbow
window and sliding the black arrow up and down.
■ The values for the Red:, Green: and Blue: TextBoxes
describe the amount of red, green and blue and are
commonly called RGB values.
– Each red, green and blue value is in the range 0–255, inclusive.

23
Red component (255)

Color preview
Green component (237)
Blue component (169)
Adds a color to Custom palette
Figure 3.13 | Adding a color to the Custom palette.

24
■ Clicking the Add Color Button closes the dialog and

changes the Form’s background color (Fig. 3.14).
■ The color is also added to the custom palette.
Form background set to new custom

color
Custom color added to palette
Figure 3.14 | Properties window after the new custom color has been added.

25
GUI Design Tip

Use colors in your applications, but not to the point
of distracting the user.

26
Adding a Label to the Form
■ Click the Common Controls group in the Toolbox (Fig. 3.15) if it

is not already expanded.
■ Double click the Label control in the Toolbox.
■ When a Label control is added to the Form, the IDE initially sets the
control’s BackColor property value to the Form’s BackColor
property value.
Common Controls group
Label control
Figure 3.15 | Clicking the Common Controls tab in the Toolbox.

27
GUI Design Tip

Use Labels to display text that users cannot change.

28
Adding a Label to the Form (Cont.)
■ A Label appears in the upper-left corner of the

Form (Fig. 3.16). You can also drag the Label
from the Toolbox and drop it on the Form.
■ Visual Basic by default does not provide sizing
handles (Fig. 3.16) for you to resize a Label.
Label control
Sizing handles (enabled)
New background color
Figure 3.16 | Adding a Label to the Form.

29
■ To enable manual resizing, set the Label’s AutoSize

property to False (Fig. 3.17).
AutoSize property
Figure 3.17 | Setting a Label’s AutoSize property to False.

30
■ The Label’s Text property specifies the text that the

Label displays (Fig. 3.18).
Updated Text property value too large for Label
Figure 3.18 | Label after updating its Text property.
■ Edit the Text property, then use the sizing handles to

enlarge the Label so all the text is displayed (Fig. 3.19)
Label resized horizontally
Figure 3.19 | Label after it has been resized.

31
GUI Design Tip

Ensure that all Label controls are large enough to
display their text.

32
■ Drag the Label to the top center of the Form. You

also can center the Label by selecting Format >
Center In Form > Horizontally (Fig. 3.20).
Centered Label
Figure 3.20 | Centered Label.

33
■ Click the value of the Font property to cause an

ellipsis Button to appear (Fig. 3.21).
Ellipsis Button
Figure 3.21 | Properties window displaying the Label’s properties.

34
■ Click the ellipsis Button to display the Font dialog

(Fig. 3.22).
■ In this dialog, you can select the font name, font style
and font size.
Font dialog
current font
Font sample
Figure 3.22 | Font dialog for selecting fonts, styles and sizes.

35
GUI Design Tip

Use 9pt Segoe UI font to improve readability for
controls that display text.

36
■ To align text inside a Label, use the Label’s Text

Align property.
– Click the down-arrow Button to display a three-by-three grid
of Buttons (Fig. 3.23).
– Click the middle-center Button.
Text alignment options
Middle-center alignment
option
Figure 3.23 | Centering the Label’s text.

37
Inserting an Image and Running the
Welcome Application
■ To add a PictureBox control to the Form, double click

the PictureBox control icon in the ToolBox.
■ When the PictureBox appears, drag it below the Label

and center it on the Form (Fig. 3.24).
Updated Label
PictureBox
Figure 3.24 | Inserting and aligning the PictureBox.

38
GUI Design Tip

Use PictureBoxes to enhance GUIs with graphics
that users cannot change.

39
Welcome Application (Cont.)
■ Click the PictureBox to display its properties.

– Locate the Image property.
– Click the value of the PictureBox’s Image property
to display an ellipsis Button (Fig. 3.25).
Image property value

(no image selected)
Ellipsis Button
Image preview box (no

image currently
displayed)
Choose Image link
Figure 3.25 | Image property of the PictureBox.

40
■ Click the ellipsis Button to display the Select Resource

dialog (Fig. 3.26).
■ The Select Resource dialog is used to import files to
an application.
– You can use any of several popular image formats, including
PNG, GIF, JPEG and BMP.
Figure 3.26 | Select Resource dialog to select an image for the PictureBox.
41
■ Click the Import… Button to browse for an image to

insert.
■ Navigate to the C:\Examples\Tutorial03\
CompletedApplication directory and select the file
bug.png (Fig. 3.27).
bug.png file (may

display
bug depending on
whether your computer
is set to
display file-name
extensions)
Figure 3.27 | Open dialog used to browse for a PictureBox image.

42
■ Click OK (Fig. 3.28) to place the image in your

application.
Figure 3.28 | Select Resource dialog displaying a preview of selected image.

43
■ To size the image to fit in the PictureBox

(Fig. 3.29):
– change the SizeMode property to StretchImage.
– This scales the image to the size of the PictureBox.
PictureBox too
small for image
Figure 3.29 | Newly inserted image.

44
GUI Design Tip

Images should fit inside their PictureBoxes. This can
be achieved by setting PictureBox property SizeMode
to StretchImage.

45
■ To resize the PictureBox, change the Size property

to 500, 250.
■ Center the image horizontally. The Form should now
look like Fig. 3.40.
Newly inserted image
Figure 3.40 | PictureBox displaying an image.

46
■ To ensure that the controls remain in position, select

Format > Lock Controls (Fig. 3.41).
■ You can lock individual controls by setting the control’s
Locked property to True.
■ Additional capabilities are available by right clicking the
Form in Design view.
Lock Controls option
Figure 3.41 | Locking controls by using the Format menu.

47
■ When a Visual Basic application is run in the IDE,

the project files are automatically saved for you.
■ While in design mode, you have access to all the
IDE windows, menus and toolbars.
■ In run mode you can interact with fewer IDE
features. Select Debug > Start Debugging
to run the application (Fig. 3.42) and note that
many toolbar icons and menus are disabled.

48
IDE title bar displaying (Running)
Form
Running application
Figure 3.42 | IDE in run mode with the application running

in the foreground.

49
■ In the .NET Framework Class Library, classes are

organized into directory-like entities called namespaces.
– The class types used in this application (Fig. 3.43)
have namespace System.Windows.Forms (Fig. 3.44).
– This namespace contains control classes and
the Form class.
Name of object
(Welcome) Namespace
(System.Windows.Forms)
Welcome Class type of object
application GUI (Form)
objects
Figure 3.43 | Component object box expanded to show Figure 3.44 | The name and class of an object are
the Welcome application’s objects. displayed in the component object box .

Lect01 Introduction of Visual Basic

Uploaded by

Copyright:

Available Formats

You might also like

Lect01 Introduction of Visual Basic

Uploaded by

Document Information

Original Description:

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

Lect01 Introduction of Visual Basic

Uploaded by

Copyright:

Available Formats

1

 2009 Pearson Education, Inc. All rights reserved.

3.1 Test-Driving the Welcome Application

 2009 Pearson Education, Inc. All rights reserved.

In this tutorial you will learn:

 2009 Pearson Education, Inc. All rights reserved.

■ Users prefer software with interactive graphical

(Object) Button1 (instance of button)

Button1.ButtonText = “OK” (set property)

Button2 (instance of button)

Setting and Getting properties can be done at design time

3.1 Test-Driving the Welcome Application

Recall that a software company (Deitel & Associates)

 2009 Pearson Education, Inc. All rights reserved.

Test-Driving the Welcome Application

■ Open Windows Explorer (Fig. 3.1) and navigate to the C:\

Open Project... command (selected)

Figure 3.1 | Opening an existing project with the File menu’s

 2009 Pearson Education, Inc. All rights reserved.

Open Project dialog

Welcome solution file

 2009 Pearson Education, Inc. All rights reserved.

■ Double click Welcome.vb in the Solution Explorer to

Figure 3.3 | Welcome application’s Form in Design view.

 2009 Pearson Education, Inc. All rights reserved.

■ Running the Welcome application. Select Debug >

Start Debugging command

 2009 Pearson Education, Inc. All rights reserved.

■ The Welcome Form shown in Fig. 3.5 appears.

Figure 3.5 | Welcome application running.

■ Close the running application and then close the project.

 2009 Pearson Education, Inc. All rights reserved.

■ Open the C:\SimplyVB2008\Welcome\Welcome.sln

IDE title bar

Form title bar Project name

Form file name

Figure 3.6 | Blank Form.

 2009 Pearson Education, Inc. All rights reserved.

■ Select Form1.vb in the Solution Explorer window to

New file name

Selected property New property

Selected property description

Figure 3.7 | Changing the Form’s file name.

 2009 Pearson Education, Inc. All rights reserved.

Good Programming Practice

 2009 Pearson Education, Inc. All rights reserved.

Updated title bar

Selected property Figure 3.9 | Title bar for the Welcome

Figure 3.8 | Setting the Form’s Text property.

 2009 Pearson Education, Inc. All rights reserved.

GUI Design Tip

 2009 Pearson Education, Inc. All rights reserved.

■ There are several ways to resize the Form.

File properties Enabled sizing handles

Figure 3.10 | Form with sizing handles.

 2009 Pearson Education, Inc. All rights reserved.

Setting the Form’s Size Property

 2009 Pearson Education, Inc. All rights reserved.

■ To align text inside a Label, use the Label’s Text