Transcript Document

1
T U T O R I A L
2
Welcome Application
Introducing the Visual Basic
2008 Express Edition IDE
 2009 Pearson Education, Inc. All rights reserved.
2
Outline
2.1
2.2
2.3
2.4
2.5
2.6
2.7
2.8
Test-Driving the Welcome Application
Overview of the Visual Basic 2008 Express Edition IDE
Creating a Project for the Welcome Application
Menu Bar and Toolbar
Visual Basic 2008 Express Edition IDE Windows
Auto-Hide
Using Help
Saving and Closing Projects in Visual Basic
 2009 Pearson Education, Inc. All rights reserved.
3
Objectives
In this tutorial you will learn:
■ Navigate Visual Studio 2008’s Start Page.
■ Create a Visual Basic project.
■ Use the IDE’s menus and toolbars.
■ Manipulate windows in the Visual Basic 2008
Express Edition IDE.
■ Use the auto-hide feature.
■ Use the Visual Basic 2008 Express Edition IDE’s
help features.
■ Close a Visual Basic project.
 2009 Pearson Education, Inc. All rights reserved.
4
Introduction
■ Visual Studio® 2008 is Microsoft’s integrated
development environment (IDE) for creating,
running and debugging applications.
■ The IDE allows you to create applications by
dragging and dropping existing building blocks
into place.
■ This technique is called visual programming.
 2009 Pearson Education, Inc. All rights reserved.
5
2.1 Test-Driving the Welcome Application
Application Requirements
A software company (Deitel & Associates) has asked
you to develop a Visual Basic application that displays
the message “Welcome to Visual Basic 2008!” and a
picture of the company’s bug mascot.
 2009 Pearson Education, Inc. All rights reserved.
6
Test-Driving the Welcome Application
■ Open Windows Explorer and navigate to the
C:\Examples\Tutorial02 directory (Fig. 2.1).
Contents of
C:\Examples\
Tutorial02
Figure 2.1 | Contents of C:\Examples\Tutorial02.
 2009 Pearson Education, Inc. All rights reserved.
7
Test-Driving the Welcome Application (Cont.)
■ Double click Welcome.exe (Fig. 2.1) to run the application
(Fig. 2.2).
Close box
Figure 2.2 | Welcome application executing.
■ Close your running application by clicking its close box,
 2009 Pearson Education, Inc. All rights reserved.
2.2 Overview of the Visual Basic
2008 Express Edition IDE
8
■ Many versions of Visual Studio are available. The
examples in this book are based on the Microsoft
Visual Basic 2008 Express Edition.
■ You can also purchase a full version of Visual
Studio 2008, which includes support for other
languages such as Visual C# and Visual C++.
■ To start the IDE, select Start > All Programs
> Microsoft Visual Basic 2008 Express
Edition.
 2009 Pearson Education, Inc. All rights reserved.
2.2 Overview of the Visual Basic
2008 Express Edition IDE (Cont.)
9
■ Once the Express Edition begins execution, the Start Page displays
(Fig. 2.3).
Start Page
Start Page links
Empty Solution Explorer (no projects open)
Figure 2.3 | Start Page in Visual Basic 2008 Express Edition with an empty project list.
■ The Start Page contains a list of links to resources in the
IDE and on the Internet.
 2009 Pearson Education, Inc. All rights reserved.
2.2 Overview of the Visual Basic
2008 Express Edition IDE (Cont.)
10
■ The Start Page links are organized into sections:
– the Recent Projects section
– the Getting Started section, which focuses on using
the IDE for creating programs, learning Visual Basic,
connecting to the Visual Basic developer community and
providing development tools
– and the Visual Basic Express Headlines and
MSDN: Visual Basic Express Edition sections,
which provide links to information about programming in
Visual Basic.
■ You can browse the MSDN (Microsoft Developer Network)
online library at msdn2.microsoft.com/library.
 2009 Pearson Education, Inc. All rights reserved.
2.2 Overview of the Visual Basic
2008 Express Edition IDE (Cont.)
11
■ You can also browse the web from the IDE using the
internal web browser.
■ To request a web page, type its URL into the location
bar (Fig. 2.4) (If the location bar is not already
displayed, select View > Other Windows >
Web Browser).
 2009 Pearson Education, Inc. All rights reserved.
2.2 Overview of the Visual Basic
2008 Express Edition IDE (Cont.)
Selected tab for
requested web page
12
Requested web page (URL in
location-bar drop-down menu)
Figure 2.4 | Displaying a web page in the Visual Basic 2008 Express Edition IDE.
 2009 Pearson Education, Inc. All rights reserved.
2.3 Creating a Project for the
Welcome Application
13
■ Visual Basic organizes applications into projects
and solutions.
– A project is a group of related files, such as code
and images that might make up a program.
– Solutions contain one or more projects.
 2009 Pearson Education, Inc. All rights reserved.
Creating a Project for the
Welcome Application
14
■ There are several ways to create a new project or
open an existing one:
– Select either File > New Project…, which creates a
new project, or File > Open Project…, which opens
an existing project.
– From the Start Page, under the Recent Projects
section, click the link Create: Project… or Open:
Project….
– Click either the New Project Button (Fig. 2.5) or the
Open File Button (Fig. 2.5).
 2009 Pearson Education, Inc. All rights reserved.
Creating a Project for the
Welcome Application (Cont.)
15
Title bar
New Project button
Open File button
Recent Projects listing
Figure 2.5 | New Project button and Recent Projects listing.
 2009 Pearson Education, Inc. All rights reserved.
Creating a Project for the
Welcome Application (Cont.)
16
■ Visual Basic provides templates for a variety of projects
(Fig. 2.6). Templates are the project types you can create
in Visual Basic.
■ Select Windows Forms Application.
Default project
name (provided
by Visual Basic)
Figure 2.6 | New Project dialog.
 2009 Pearson Education, Inc. All rights reserved.
Creating a Project for the
Welcome Application (Cont.)
17
■ To rename the project, type Welcome in the Name: TextBox
(Fig. 2.7). Then click OK.
Visual Basic
Windows Forms Application
(selected)
Updated project name
Figure 2.7 | New Project dialog with updated project information.
 2009 Pearson Education, Inc. All rights reserved.
Creating a Project for the
Welcome Application (Cont.)
18
■ Save this project in your C:\SimplyVB2008 directory.
To change the project’s location, select File > Save All (Fig. 2.8).
Figure 2.8 | Save Project dialog.
 2009 Pearson Education, Inc. All rights reserved.
Creating a Project for the
Welcome Application (Cont.)
19
■ Use the Browse… Button to locate your SimplyVB2008
directory (Fig. 2.9). After providing the project’s name and
location in the Save Project dialog, click Save.
SimplyVB2008
directory
(selected)
Select Folder
Button
Figure 2.9 | Project Location dialog.
 2009 Pearson Education, Inc. All rights reserved.
20
Creating a Project for the
Welcome Application (Cont.)
■ The name of each open file is listed on a tab.
■ To view a file, click its tab (Fig. 2.10).
Solution Explorer
Tabs
Menu bar
Active tab
Form (Windows
application)
titled Form1
Figure 2.10 | Design view of the IDE.
Properties window
 2009 Pearson Education, Inc. All rights reserved.
Creating a Project for the
Welcome Application (Cont.)
21
■ The content of the Form1.vb [Design] tab is the
Windows Form Designer.
■ The Form (titled Form1) represents the main window
of the Windows Forms application.
 2009 Pearson Education, Inc. All rights reserved.
Creating a Project for the
Welcome Application (Cont.)
22
■ GUI controls aid both in data entry by users and in
formatting and presenting data outputs to users.
■ For example, Internet Explorer (Fig. 2.11) displays
web pages requested by users.
 2009 Pearson Education, Inc. All rights reserved.
Creating a Project for the
Welcome Application (Cont.)
Menu (Help)
ComboBox
23
Drop-down arrowButton (displaying an
icon)
Title bar (Label)
Menu bar
Toolbar
Web site requested
by the user
Figure 2.11 | Internet Explorer window with GUI controls labeled.
(Web site content courtesy of Deitel & Associates, Inc.)
 2009 Pearson Education, Inc. All rights reserved.
24
2.4 Menu Bar and Toolbar
■ Menus contain commands for managing the IDE
and for developing and executing applications.
■ The set of menus displayed (Fig. 2.12) depends
on what you are currently doing in the IDE.
Figure 2.12 | Visual Basic 2008 IDE menu bar.
 2009 Pearson Education, Inc. All rights reserved.
25
2.4 Menu Bar and Toolbar (Cont.)
■ Each menu has a group of related commands (also called
menu items) that cause the IDE to perform specific actions
(Fig. 2.13).
Menu
Description
File
Contains commands for opening, closing, adding and saving projects, as well as printing
project data and exiting Visual Studio.
Edit
Contains editing commands, such as Cut, Paste and Undo.
View
Contains commands for displaying IDE windows and toolbars.
Project
Contains commands for managing projects and their files.
Build
Contains commands for compiling Visual Basic applications.
Debug
Contains commands for debugging and running applications.
Data
Contains commands for interacting with databases.
Format
Contains commands for aligning and modifying a Form’s controls. This menu appears
only when a GUI component is selected in Design view.
Tools
Contains commands for accessing additional IDE tools and options that enable
customization of the IDE.
Window
Contains commands for hiding, opening, closing and displaying IDE windows.
Help
Contains commands for accessing the IDE’s help features.
Figure 2.13 | Visual Basic IDE menu summary.
 2009 Pearson Education, Inc. All rights reserved.
26
2.4 Menu Bar and Toolbar (Cont.)
■ You can access many common commands from the IDE
toolbar (Fig. 2.14).
–
–
The toolbar contains icons that graphically represent commands.
To execute a command via the IDE toolbar, simply
click its icon.
Keyboard shortcuts
Toolbar icon indicates a
command to open a project
Toolbar
Down arrow indicates
additional commands
are available
Figure 2.14 | IDE toolbar.
 2009 Pearson Education, Inc. All rights reserved.
27
2.4 Menu Bar and Toolbar (Cont.)
■ Positioning the mouse pointer over an icon
highlights it and, after a brief pause, displays a
description of the icon called a tooltip (Fig. 2.15).
Tooltip displayed
when the mouse
pointer has rested
on the icon for a
few seconds
Figure 2.15 | Tooltip demonstration.
 2009 Pearson Education, Inc. All rights reserved.
2.5 Visual Basic 2008 Express
Edition IDE Windows
28
■ The IDE provides windows for accessing project files
and for customizing forms and controls.
■ You can access these windows by using the IDE toolbar
icons (Fig. 2.16) or by selecting the window name, using
the View menu.
Properties icon
Solution Explorer icon
Object Browser icon
Toolbox icon
Figure 2.16 | Toolbar icons for four Visual Basic IDE windows.
 2009 Pearson Education, Inc. All rights reserved.
2.5 Visual Basic 2008 Express
Edition IDE Windows (Cont.)
29
Solution Explorer
■ The Solution Explorer window (Fig. 2.17) displays a list of
the files in a project and the projects in a solution.
■ If the Solution Explorer window is not shown in the IDE,
you can display it by selecting View > Solution Explorer.
Properties
window icon
Toolbar
Show All Files icon
Form file
Project name
Figure 2.17 | Solution Explorer with an open project.
 2009 Pearson Education, Inc. All rights reserved.
2.5 Visual Basic 2008 Express
Edition IDE Windows (Cont.)
30
■ Click the Show All Files icon (Fig. 2.18) to display all
the files in the solution.
Collapsed node (plus box
expands node to show
related files when clicked)
Figure 2.18 | Using the Show All Files icon to display all the files in a solution.
■ For your single-project solution, Welcome is the only
project. The Form file is named Form1.vb.
 2009 Pearson Education, Inc. All rights reserved.
Navigating a Project with the
Solution Explorer
31
■ After clicking the Show All Files icon, click the plus box
to the left of the My Project folder (Fig. 2.19) to expand
the node.
Expanded node (minus box)
Figure 2.19 | Expanded node.
 2009 Pearson Education, Inc. All rights reserved.
Navigating a Project with the
Solution Explorer (Cont.)
32
■ After clicking the Show All Files icon, click the plus box
to the left of the My Project folder (Fig. 2.19) to expand
the node.
Collapsed node (plus box)
Figure 2.20 | Collapsed node.
 2009 Pearson Education, Inc. All rights reserved.
Navigating a Project with the
Solution Explorer (Cont.)
33
Group names
Toolbox
Controls
■ Using visual programming, you can
“drag and drop” controls onto the
Form.
■ If the Toolbox is not visible, select
View > Toolbox.
■ The Toolbox (Fig. 2.21) groups
controls into categories.
Additional group
names
Figure 2.21 | Toolbox displaying the contents of the Common Controls tab.
 2009 Pearson Education, Inc. All rights reserved.
Navigating a Project with the
Solution Explorer (Cont.)
34
Properties Window
■ The Properties window (Fig. 2.22) displays an object’s
attributes, such as its size, color and position.
■ The Properties window allows you to set object
properties visually without writing code.
■ If the Properties window is not visible, select
View > Properties Window (or press F4).
 2009 Pearson Education, Inc. All rights reserved.
Navigating a Project with the
Solution Explorer (Cont.)
Object’s
name
(Form1)
35
Object’s class
(System.Windows.Forms.Form)
Down arrow for selecting Form
or control objects
Component object box
Categorized icon
Toolbar
Alphabetical icon
Items that have been
changed from their default
values (by the user or by Visual
Studio) are listed in bold
Selected property
Scrollbox
Scrollbar
Design category
Description of
selected property
Properties
(left column)
Property values
(right column)
Figure 2.22 | Properties window displaying a Form’s properties.
 2009 Pearson Education, Inc. All rights reserved.
Navigating a Project with the
Solution Explorer (Cont.)
36
■ At the top of the Properties window is the component
object box, which displays each object’s name and class
type.
■ Icons on the toolbar sort the properties either alphabetically
or categorically.
■ Each gray horizontal bar to the left of the scrollbar is a
category that groups related properties.
■ The left column of the Properties window lists the object’s
property names; the right column displays each property’s
value.
■ Whenever you select a property, a description of the property
displays at the bottom of the Properties window.
 2009 Pearson Education, Inc. All rights reserved.
37
Using Auto-Hide
■ Auto-hide is enabled by clicking the window’s vertical
pin icon.
■ The toolbar along one of the edges of the IDE contains
one or more tabs, each of which identifies a hidden
window (Fig. 2.23) and displays the window when
clicked (Fig. 2.24).
Mouse pointer over the
tab for the Toolbox
Tab for hidden window
Title bar
Horizontal pin icon
(autohide enabled)
Figure 2.23 | Hidden-window tabs.
Toolbox is displayed
when the mouse
pointer
is placed on the tab for
the Toolbox
Figure 2.24 | Displaying a hidden window with auto-hide
enabled.
 2009 Pearson Education, Inc. All rights reserved.
38
Using Auto-Hide (Cont.)
■ Move the mouse pointer outside the Toolbox
window’s area to hide the Toolbox (Fig. 2.25).
Mouse pointer over the
tab for the Toolbox
(Toolbox window is hidden)
Figure 2.25 | Hiding the Toolbox by moving the mouse pointer
outside of the Toolbox’s area.
 2009 Pearson Education, Inc. All rights reserved.
39
Using Auto-Hide (Cont.)
■ To disable auto-hide click the pin icon in the title bar.
■ When a window is “pinned down,” the pin icon is
vertical (Fig. 2.26)
■ When auto-hide is enabled, the pin icon is horizontal.
Vertical pin icon
(auto-hide is disabled)
Figure 2.26 | Pin icon in vertical position.
 2009 Pearson Education, Inc. All rights reserved.
40
Using Auto-Hide (Cont.)
■ Help provides a list of articles pertaining to the
“current content.”
■ The help window also provides help topics, code
samples and “Getting Started” information (Fig. 2.27).
Command
Description
How Do I?
Contains links to relevant topics, including how to upgrade applications and
learn more about web services, architecture and design, files, data and
more.
Search
Finds help articles based on search keywords.
Index
Displays an alphabetized list of topics which you can browse.
Contents
Displays a categorized table of contents in which help articles are organized
by topic.
Figure 2.27 | Help menu commands.
 2009 Pearson Education, Inc. All rights reserved.
41
Using Auto-Hide (Cont.)
■ Visual Basic also provides context-sensitive
help, which displays relevant help articles
(Fig. 2.28).
■ To use context-sensitive help, click an item,
then press the F1 key.
 2009 Pearson Education, Inc. All rights reserved.
42
Using Auto-Hide (Cont.)
Context-sensitive
help window
How
Do I
Search
Index
Contents
Toolbar
Selected item
(Windows form)
Relevant help
article
Figure 2.28 | Context-sensitive help window.
 2009 Pearson Education, Inc. All rights reserved.
2.8 Saving and Closing Projects
in Visual Basic
43
Once you’re finished with a project, you should
save the project’s files and close the project.
■ Before closing the project for the Welcome
application, you should save its files, ensuring
that any changes made to the project are not lost.
■ Although you did not make any changes, save
your project files by selecting File > Save All.
■ Select File > Close Project.
 2009 Pearson Education, Inc. All rights reserved.