t u t o r i a l 2009 pearson education, inc. all rights reserved. 1 3 welcome application...

T U T O R I A L

2009 Pearson Education, Inc. All rights reserved.

1

3Welcome Application

Introduction toVisual Programming


2

Outline

3.1 Test-Driving the Welcome Application

3.2 Constructing the Welcome Application

3.3 Objects Used in the Welcome Application


3

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.

Objectives


4

■ Users prefer software with interactive graphical user interfaces (GUIs) that respond to actions such as Button clicks, data input and much more.

■ The majority of Windows applications are GUI based.

■ With Visual Basic, you can create Windows applications that input and output information ina variety of ways.

Introduction

Application Requirements


5

3.1 Test-Driving the Welcome Application

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.


6

■ 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).

Figure 3.1 | Opening an existing project with the File menu’sOpen Project... command.

Open Project... command (selected) opens an existing

project

Test-Driving the Welcome Application


7

Figure 3.2 | Open Project dialog displaying the contents of the Welcome solution.

Welcome solution file

Test-Driving the WelcomeApplication (Cont.)

Open Project dialog


8

■ 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.



9

■ Running the Welcome application. Select Debug > Start Debugging (Fig. 3.4). The Start Debugging command runs the application.

Figure 3.4 | Running the Welcome application using the Debug menu’sStart Debugging command.


Start Debugging command (selected) runs the

application


10

■ The Welcome Form shown in Fig. 3.5 appears.

Figure 3.5 | Welcome application running.


Closebox

■ Close the running application and then close the project.


11

■ 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.

Figure 3.6 | Blank Form.

Changing the Form’s File Nameand Title Bar Text

Solution Explorer window

Project name

Form file name

IDE title bar

Toolbar

Form title bar

Blank Form


12

■ 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).

Figure 3.7 | Changing the Form’s file name.

Changing the Form’s File Nameand Title Bar Text (Cont.)

File properties

Selected property

Selected property description

New propertyvalue

New file name


13

Good Programming Practice

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


14

■ 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).


Figure 3.8 | Setting the Form’s Text property.

Selected property

Property value

Selected property description

Figure 3.9 | Title bar for the Welcome application.

Updated title bar


15

GUI Design Tip

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


16

Figure 3.10 | Form with sizing handles.


File properties

Selected property

Enabled sizing handles

■ 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).


17

■ 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.

Setting the Form’s Size Property


18

Figure 3.11 | Size property values for the Form.

Size property values

Setting the Form’s Size Property (Cont.)


19

■ 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).

Setting the Form’s Background Color


20Setting the Form’s

Background Color (Cont.)

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

Current color

Custom palette

Down-arrow Button

Custom colors can beadded to the white boxes

Tabs


21

■ 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.

Setting the Form’sBackground Color (Cont.)


22Setting the Form’s

Background Color (Cont.)

Figure 3.13 | Adding a color to the Custom palette.

Red component (255)

Green component (237)

Blue component (169)

Color preview

Adds a color to Custom palette


23

■ 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.

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

Setting the Form’sBackground Color (Cont.)

Form background set to new custom color

Custom color added to palette


24

GUI Design Tip

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


25

■ 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.

Adding a Label to the Form

Figure 3.15 | Clicking the Common Controls tab in the Toolbox.

Common Controls group

Label control


26

GUI Design Tip

Use Labels to display text that users cannot change.


27

■ 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.

Adding a Label to the Form (Cont.)

Figure 3.16 | Adding a Label to the Form.

Label control

New background color

Sizing handles (enabled)


28


AutoSize property

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

■ To enable manual resizing, set the Label’s AutoSize property to False (Fig. 3.17).


29

■ The Label’s Text property specifies the text that the Labeldisplays (Fig. 3.18).

■ Edit the Text property, then use the sizing handles to enlarge the Label so all the text is displayed (Fig. 3.19)


Figure 3.18 | Label after updating its Text property.

Updated Text property value too large for Label

Label resized horizontally

Figure 3.19 | Label after it has been resized.


30

GUI Design Tip

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


31


Centered Label

Figure 3.20 | Centered Label.

■ 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).


32


Ellipsis Button

Figure 3.21 | Properties window displaying the Label’s properties.

■ Click the value of the Font property to cause an ellipsis Button to appear (Fig. 3.21).


33


Font sample

Figure 3.22 | Font dialog for selecting fonts, styles and sizes.

■ Click the ellipsis Button to display the Font dialog (Fig. 3.22).

■ In this dialog, you can select the font name, font styleand font size.

Font dialog

current font


34

GUI Design Tip

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


35

■ To align text inside a Label, use the Label’s TextAlign 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.


36

Figure 3.24 | Inserting and aligning the PictureBox.

■ 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 Labeland center it on the Form (Fig. 3.24).

Updated Label

PictureBox

Inserting an Image and Running the Welcome Application


37

GUI Design Tip

Use PictureBoxes to enhance GUIs with graphicsthat users cannot change.


38

■ Click the PictureBox to display its properties.– Locate the Image property.

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

Inserting an Image and Running the Welcome Application (Cont.)

Figure 3.25 | Image property of the PictureBox.

Image property value(no image selected)

Ellipsis Button

Image preview box (no image currently displayed)

Choose Image link


39

■ 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.


40

■ 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).


Figure 3.27 | Open dialog used to browse for a PictureBox image.

bug.png file (may display

bug depending on whether your computer

is set to display file-name

extensions)


41

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


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


42

Figure 3.29 | Newly inserted image.


■ 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 toosmall for image


43

GUI Design Tip

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


44

Figure 3.40 | PictureBox displaying an image.


■ To resize the PictureBox, change the Size propertyto 500, 250.

■ Center the image horizontally. The Form should nowlook like Fig. 3.40.

Newly inserted image


45

Figure 3.41 | Locking controls by using the Format menu.


■ 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


46

■ 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.



47

Figure 3.42 | IDE in run mode with the application runningin the foreground.


Running application

Form

IDE title bar displaying(Running)


48Inserting an Image and Running the

Welcome Application (Cont.)

■ 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 andthe Form class.

Figure 3.43 | Component object box expanded to showthe Welcome application’s objects.

Welcome application GUI objects

Figure 3.44 | The name and class of an object are displayed in the component object box.

Name of object(Welcome) Namespace

(System.Windows.Forms)Class type of object (Form)

t u t o r i a l 2009 pearson education, inc. all rights reserved. 1 3 welcome application...

Documents