Transcript Deitel PowerPoint Slides - University of Wisconsin–Parkside

1
Tutorial 3 - Welcome Application
Introduction to Visual Programming
Outline
3.1
3.2
3.3
3.4
Test-Driving the Welcome Application
Constructing the Welcome Application
Objects used in the Welcome Application
Wrap-Up
 2003 Prentice Hall, Inc. All rights reserved.
2
Objectives
• In this tutorial, you will learn to:
–
–
–
–
–
–
–
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.
 2003 Prentice Hall, Inc. All rights reserved.
3
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 .NET!” and a picture of the company’s bug mascot. Now that you are familiar
with the Visual Studio .NET IDE, your task is to develop this application to satisfy
the company’s request.
 2003 Prentice Hall, Inc. All rights reserved.
4
3.1
Test-Driving the Welcome Application
Figure 3.1 Opening an existing solution with the File menu’s Open Solution...
Command.
Open Solution command
(selected) opens an existing
solution
• Select File > Open Solution... to display the Open
Solution dialog
 2003 Prentice Hall, Inc. All rights reserved.
5
3.1
Test-Driving the Welcome Application
• Look in: ComboBox
– Select Welcome directory
• Select the Welcome solution file and click the
Open button
 2003 Prentice Hall, Inc. All rights reserved.
6
3.1
Figure 3.2
Test-Driving the Welcome Application
Open Solution dialog displaying the contents of the Welcome solution.
Welcome.sln solution file
(may display Welcome
Open
Solution
dialog
depending on your settings)
Look in: ComboBox
 2003 Prentice Hall, Inc. All rights reserved.
7
3.1
Test-Driving the Welcome Application
• Visual Studio .NET IDE
– Presents Welcome.vb in design view
 2003 Prentice Hall, Inc. All rights reserved.
8
3.1
Figure 3.3
Test-Driving the Welcome Application
Welcome application’s Form in design view.
 2003 Prentice Hall, Inc. All rights reserved.
9
3.1
Figure 3.4
Test-Driving the Welcome Application
Executing the Welcome application using the Debug menu’s Start command.
Start command
(selected) executes the
application
• Select Debug > Start
• The Start command runs (executes) the application.
 2003 Prentice Hall, Inc. All rights reserved.
10
3.1
Test-Driving the Welcome Application
• Application during Run mode
– Notice the application’s output
• Click the application’s close box to
– close the executing application
 2003 Prentice Hall, Inc. All rights reserved.
11
3.1
Figure 3.5
Test-Driving the Welcome Application
Welcome application executing.
Close box
 2003 Prentice Hall, Inc. All rights reserved.
12
3.2 Constructing the Welcome Application
• Select File > Open Solution....
– Open the Welcome solution file (Welcome.sln)
• Viewing the IDE in design mode
–
–
–
–
The empty Form
The Solution Explorer
Toolbar
IDE title bar
 2003 Prentice Hall, Inc. All rights reserved.
13
3.2 Constructing the Welcome Application
Figure 3.6
Blank Form.
IDE title bar
Solution Explorer window
Toolbar
Solution name
Form title bar
Project name
Blank Form
Form file name
 2003 Prentice Hall, Inc. All rights reserved.
14
3.2 Constructing the Welcome Application
• Changing the Form’s file name
– Locate the Solution Explorer
– Select the file
– Change the File Name property
 2003 Prentice Hall, Inc. All rights reserved.
15
3.2 Constructing the Welcome Application
Figure 3.7
Changing the Form’s file name.
File properties
Selected
property
New property value
New file name
Selected property
description
 2003 Prentice Hall, Inc. All rights reserved.
16
3.2 Constructing the Welcome Application
Figure 3.8
Setting the Form’s Text property.
Selected property
Property value
Selected property
description
• Changing the Form’s title display
– Locate Solution Explorer
– Select the Text property
– Change the text
 2003 Prentice Hall, Inc. All rights reserved.
17
3.2 Constructing the Welcome Application
Figure 3.9
Title bar for the Welcome application.
Title bar
• Title bar changes to display Form’s Text property
 2003 Prentice Hall, Inc. All rights reserved.
18
3.2 Constructing the Welcome Application
• Examine the empty Form
– Grid layout
– Enabled sizing handle
– Height and width
 2003 Prentice Hall, Inc. All rights reserved.
19
3.2 Constructing the Welcome Application
Figure 3.10
Form with sizing handles.
Width
Disabled sizing handle
Grid
Height
Mouse pointer over an
enabled sizing handle
Enabled sizing handle
 2003 Prentice Hall, Inc. All rights reserved.
20
3.2 Constructing the Welcome Application
Figure 3.11
Size property values for the Form.
Size property values
• Resizing the Form
– Expand the Size property
– Change the Width
– Change the Height
 2003 Prentice Hall, Inc. All rights reserved.
21
3.2 Constructing the Welcome Application
• Changing the Form’s background color
– Locate the BackColor property
• System tab (default)
• Web tab
• Custom tab
 2003 Prentice Hall, Inc. All rights reserved.
22
3.2 Constructing the Welcome Application
Figure 3.12
Viewing the Custom palette in the Form’s BackColor property value field.
Current color
Down-arrow Button
Tabs
Custom palette
Custom colors can be
added to the white boxes
 2003 Prentice Hall, Inc. All rights reserved.
23
3.2 Constructing the Welcome Application
• Custom tab palette
– Define Color dialog
• Create your own colors
• RGB values
 2003 Prentice Hall, Inc. All rights reserved.
24
3.2 Constructing the Welcome Application
Figure 3.13
Adding a color to the Custom palette.
Color preview
Red component (255)
Green component (237)
Adds a color to
Custom palette
 2003 Prentice Hall, Inc. All rights reserved.
Blue component (169)
25
3.2 Constructing the Welcome Application
• Result of background color change
– New RGB color values
 2003 Prentice Hall, Inc. All rights reserved.
26
3.2 Constructing the Welcome Application
Figure 3.14 Properties window after the new custom color has been added.
Form background set to
new custom color
Custom color
added to palette
 2003 Prentice Hall, Inc. All rights reserved.
27
3.2 Constructing the Welcome Application
Figure 3.15
Clicking the Windows Forms tab in the Toolbox.
Windows Forms tab
Label control
• Toolbox
– Windows Forms tab
 2003 Prentice Hall, Inc. All rights reserved.
28
3.2 Constructing the Welcome Application
Figure 3.16
Adding a Label to the Form.
Label control
Sizing handle (enabled)
New background color
• Label added to Form
 2003 Prentice Hall, Inc. All rights reserved.
29
3.2 Constructing the Welcome Application
Figure 3.17
Label after updating its Text property.
Updated Text property
value too large for Label
• Adding text to the Label
– Label’s content changes to reflect new Text value
 2003 Prentice Hall, Inc. All rights reserved.
30
3.2 Constructing the Welcome Application
Figure 3.18
Label after it has been resized.
Label resized vertically
and horizontally
• Resizing the Label
– Text re-aligns to fit new Label size
 2003 Prentice Hall, Inc. All rights reserved.
31
3.2 Constructing the Welcome Application
Figure 3.19
Centered Label.
Centered Label
• Moving the Label on the Form
 2003 Prentice Hall, Inc. All rights reserved.
32
3.2 Constructing the Welcome Application
Figure 3.20
Properties window displaying the Label’s properties.
Ellipsis Button
• Changing the font
– Locate Solution Explorer
– Select the Label
– Select Font property
 2003 Prentice Hall, Inc. All rights reserved.
33
3.2 Constructing the Welcome Application
• Font dialog
– Change text by changing values in dialogs
 2003 Prentice Hall, Inc. All rights reserved.
34
3.2 Constructing the Welcome Application
Figure 3.21
Font dialog for selecting fonts, styles and sizes.
Font dialog
Current font
Font sample
 2003 Prentice Hall, Inc. All rights reserved.
35
3.2 Constructing the Welcome Application
• Text alignment
– Access TextAlign property
– Select appropriate option
 2003 Prentice Hall, Inc. All rights reserved.
36
3.2 Constructing the Welcome Application
Figure 3.22
Centering the Label’s text.
Text alignment options
Top-center
alignment option
 2003 Prentice Hall, Inc. All rights reserved.
37
3.2 Constructing the Welcome Application
• Inserting a picture
– Select the PictureBox control
• Drop control onto Form
 2003 Prentice Hall, Inc. All rights reserved.
38
3.2 Constructing the Welcome Application
Figure 3.23
Inserting and aligning the PictureBox.
Updated Label
PictureBox
 2003 Prentice Hall, Inc. All rights reserved.
39
3.2 Constructing the Welcome Application
Figure 3.24
Image property of the PictureBox.
Image property value
(no image selected)
Ellipsis Button
Image preview box
(no image currently
displayed)
• Changing PictureBox properties
– Locate Solution Explorer
– Locate Image property
 2003 Prentice Hall, Inc. All rights reserved.
40
3.2 Constructing the Welcome Application
• Selecting the picture
– Navigate the Open dialog to the picture location
– Click Open
 2003 Prentice Hall, Inc. All rights reserved.
41
3.2 Constructing the Welcome Application
Figure 3.25
Open dialog used to browse for a PictureBox image.
bug.png file (may display bug
depending on your settings)
 2003 Prentice Hall, Inc. All rights reserved.
42
3.2 Constructing the Welcome Application
Figure 3.26
Newly inserted image.
PictureBox too
small for image
• Resizing the image
– Change property SizeMode
• StretchImage scales image in PictureBox
– Change property Size
 2003 Prentice Hall, Inc. All rights reserved.
43
3.2 Constructing the Welcome Application
Figure 3.27
Image previewed in the Image property value field.
Previewed image
• Previewed image in Image property
 2003 Prentice Hall, Inc. All rights reserved.
44
3.2 Constructing the Welcome Application
• Align the image
– Format > Center in Form > Horizontally
 2003 Prentice Hall, Inc. All rights reserved.
45
3.2 Constructing the Welcome Application
Figure 3.28
PictureBox displaying an image.
Newly inserted image
 2003 Prentice Hall, Inc. All rights reserved.
46
3.2 Constructing the Welcome Application
Figure 3.29
Locking controls by using the Format menu.
Lock Controls option
• Locking the controls
– Disallow accidental resizing and relocation of controls
 2003 Prentice Hall, Inc. All rights reserved.
47
3.2 Constructing the Welcome Application
• Running the application
– Title bar indicates the current application mode
– Debug > Start
• Terminating the application
– Click the running application’s close box
 2003 Prentice Hall, Inc. All rights reserved.
48
3.2 Constructing the Welcome Application
Figure 3.30
IDE in run mode, with the application running in the foreground.
IDE title bar
displaying [run]
Form (with grid)
Running
application
 2003 Prentice Hall, Inc. All rights reserved.
49
3.2 Constructing the Welcome Application
Figure 3.31
objects.
Component object box expanded to show the Welcome application’s
Welcome
application GUI
objects
• ComboBox
– Located at top of Properties window
– Displays the names and class types of Form and control objects
 2003 Prentice Hall, Inc. All rights reserved.
50
3.2 Constructing the Welcome Application
Figure 3.32 The name and class type of an object are displayed in the
Properties window’s component object box.
Name of object (Form1)
Namespace
(System.Windows.Forms)
• Namespaces
– Organizes classes by functionality
– Directory-like entities
– System.Windows.Forms
 2003 Prentice Hall, Inc. All rights reserved.
Class type of object (Form)