1. T U T O R I A L  2009 Pearson Education, Inc. All rights reserved. 1 3 Welcome Application Introduction to Visual Programming

2.  2009 Pearson Education, Inc. All rights reserved. 2 Outline 3.1Test-Driving the Welcome Application 3.2 Constructing the Welcome Application 3.3 Objects Used in the Welcome Application

3.  2009 Pearson Education, Inc. All rights reserved. 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.  2009 Pearson Education, Inc. All rights reserved. 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 in a variety of ways. Introduction

5. Application Requirements  2009 Pearson Education, Inc. All rights reserved. 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.  2009 Pearson Education, Inc. All rights reserved. 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’s Open Project... command. Open Project... command (selected) opens an existing project Test-Driving the Welcome Application

7.  2009 Pearson Education, Inc. All rights reserved. 7 Figure 3.2 | Open Project dialog displaying the contents of the Welcome solution. Welcome solution file Test-Driving the Welcome Application (Cont.) Open Project dialog

8.  2009 Pearson Education, Inc. All rights reserved. 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. Test-Driving the Welcome Application (Cont.)

9.  2009 Pearson Education, Inc. All rights reserved. 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’s Start Debugging command. Test-Driving the Welcome Application (Cont.) Start Debugging command (selected) runs the application

10.  2009 Pearson Education, Inc. All rights reserved. 10 ■The Welcome Form shown in Fig. 3.5 appears. Figure 3.5 | Welcome application running. Test-Driving the Welcome Application (Cont.) Close box ■Close the running application and then close the project.

11.  2009 Pearson Education, Inc. All rights reserved. 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 Name and Title Bar Text Solution Explorer window Project name Form file name IDE title bar Toolbar Form title bar Blank Form

12.  2009 Pearson Education, Inc. All rights reserved. 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 Name and Title Bar Text (Cont.) File properties Selected property Selected property description New property value New file name

13.  2009 Pearson Education, Inc. All rights reserved. 13 Good Programming Practice Change your application’s Form file name ( Form1.vb ) to a name that describes the application’s purpose.

14.  2009 Pearson Education, Inc. All rights reserved. 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). Changing the Form ’s File Name and Title Bar Text (Cont.) 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.  2009 Pearson Education, Inc. All rights reserved. 15 GUI Design Tip Choose short, descriptive Form titles. Capitalize words that are not articles, prepositions or conjunctions. Do not use punctuation.

16.  2009 Pearson Education, Inc. All rights reserved. 16 Figure 3.10 | Form with sizing handles. Changing the Form ’s File Name and Title Bar Text (Cont.) 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.  2009 Pearson Education, Inc. All rights reserved. 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.  2009 Pearson Education, Inc. All rights reserved. 18 Figure 3.11 | Size property values for the Form. Size property values Setting the Form ’s Size Property (Cont.)

19.  2009 Pearson Education, Inc. All rights reserved. 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

20.  2009 Pearson Education, Inc. All rights reserved. 20 Setting 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 be added to the white boxes Tabs

21.  2009 Pearson Education, Inc. All rights reserved. 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: TextBox es 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 ’s Background Color (Cont.)

22.  2009 Pearson Education, Inc. All rights reserved. 22 Setting 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.  2009 Pearson Education, Inc. All rights reserved. 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 ’s Background Color (Cont.) Form background set to new custom color Custom color added to palette

24.  2009 Pearson Education, Inc. All rights reserved. 24 GUI Design Tip Use colors in your applications, but not to the point of distracting the user.

25.  2009 Pearson Education, Inc. All rights reserved. 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.  2009 Pearson Education, Inc. All rights reserved. 26 GUI Design Tip Use Label s to display text that users cannot change.

27.  2009 Pearson Education, Inc. All rights reserved. 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.  2009 Pearson Education, Inc. All rights reserved. 28 Adding a Label to the Form (Cont.) 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.  2009 Pearson Education, Inc. All rights reserved. 29 ■The Label ’s Text property specifies the text that the Label displays (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) Adding a Label to the Form (Cont.) 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.  2009 Pearson Education, Inc. All rights reserved. 30 GUI Design Tip Ensure that all Label controls are large enough to display their text.

31.  2009 Pearson Education, Inc. All rights reserved. 31 Adding a Label to the Form (Cont.) 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.  2009 Pearson Education, Inc. All rights reserved. 32 Adding a Label to the Form (Cont.) 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.  2009 Pearson Education, Inc. All rights reserved. 33 Adding a Label to the Form (Cont.) 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 style and font size. Font dialog current font

34.  2009 Pearson Education, Inc. All rights reserved. 34 GUI Design Tip Use 9pt Segoe UI font to improve readability for controls that display text.

35.  2009 Pearson Education, Inc. All rights reserved. 35 ■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 Button s (Fig. 3.23). –Click the middle-center Button. Adding a Label to the Form (Cont.) Text alignment options Middle-center alignment option Figure 3.23 | Centering the Label ’s text.

36.  2009 Pearson Education, Inc. All rights reserved. 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 Label and center it on the Form (Fig. 3.24). Updated Label PictureBox Inserting an Image and Running the Welcome Application

37.  2009 Pearson Education, Inc. All rights reserved. 37 GUI Design Tip Use PictureBox es to enhance GUIs with graphics that users cannot change.

38.  2009 Pearson Education, Inc. All rights reserved. 38 ■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). 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.  2009 Pearson Education, Inc. All rights reserved. 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. Inserting an Image and Running the Welcome Application (Cont.) Figure 3.26 | Select Resource dialog to select an image for the PictureBox.

40.  2009 Pearson Education, Inc. All rights reserved. 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). Inserting an Image and Running the Welcome Application (Cont.) 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.  2009 Pearson Education, Inc. All rights reserved. 41 Figure 3.28 | Select Resource dialog displaying a preview of selected image. Inserting an Image and Running the Welcome Application (Cont.) ■Click OK (Fig. 3.28) to place the image in your application.

42.  2009 Pearson Education, Inc. All rights reserved. 42 Figure 3.29 | Newly inserted image. Inserting an Image and Running the Welcome Application (Cont.) ■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

43.  2009 Pearson Education, Inc. All rights reserved. 43 GUI Design Tip Images should fit inside their PictureBox es. This can be achieved by setting PictureBox property SizeMode to StretchImage.

44.  2009 Pearson Education, Inc. All rights reserved. 44 Figure 3.40 | PictureBox displaying an image. Inserting an Image and Running the Welcome Application (Cont.) ■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

45.  2009 Pearson Education, Inc. All rights reserved. 45 Figure 3.41 | Locking controls by using the Format menu. Inserting an Image and Running the Welcome Application (Cont.) ■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.  2009 Pearson Education, Inc. All rights reserved. 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. Inserting an Image and Running the Welcome Application (Cont.)

47.  2009 Pearson Education, Inc. All rights reserved. 47 Figure 3.42 | IDE in run mode with the application running in the foreground. Inserting an Image and Running the Welcome Application (Cont.) Running application Form IDE title bar displaying (Running)

48.  2009 Pearson Education, Inc. All rights reserved. 48 Inserting 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 and the Form class. Figure 3.43 | Component object box expanded to show the 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)