Learn about Microsoft Visual Basic 2010 Writing Your First Program Step by Step

<div dir="ltr" style="text-align: left;" trbidi="on"> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKLxzsNNpGtKXbrXeAV8ReAsG3meUAhFKI625t5Fk82uabTjYZLmTqv-W1vNHcVA86WPdJBWFoLBbbw6n59tWdvI9hoWo2sb-MO7leFGliEpXkuI4kLfQZxm_8jqs-9rrETg_Ydz13EF_M/s1600/9.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="900" data-original-width="738" height="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKLxzsNNpGtKXbrXeAV8ReAsG3meUAhFKI625t5Fk82uabTjYZLmTqv-W1vNHcVA86WPdJBWFoLBbbw6n59tWdvI9hoWo2sb-MO7leFGliEpXkuI4kLfQZxm_8jqs-9rrETg_Ydz13EF_M/s640/9.jpg" width="524" /></a></div> <h2 style="text-align: left;"> <i><br /></i></h2> <h2 style="text-align: left;"> <i>Writing Your First Program</i></h2> <i>After completing this chapter, you will be able to:</i><br /> <br /> <ol style="text-align: left;"> <li><i> Create the user interface for a new program.</i></li> <li><i>Set the properties for each object in your user interface.</i></li> <li><i>Write program code.</i></li> <li><i>Save and run the program.</i></li> <li><i> Build an executable file.</i></li> </ol> <br /> <i>As you learned “Exploring the Visual Studio Integrated Development</i><br /> <i>Environment,” the Microsoft Visual Studio 2010 Integrated Development Environment (IDE)</i><br /> <i>contains several</i><br /> <i>powerful tools to help you run and manage your programs. Visual Studio</i><br /> <i>also contains everything</i><br /> <i>you need to build your own applications for Windows and the Web</i><br /> <i>from the ground up.</i><br /> <i>In this chapter, you’ll learn how to create a simple but attractive user interface with the</i><br /> <i>controls</i><br /> <i>in the Visual Studio Toolbox. Next you’ll learn how to customize the operation</i><br /> <i>of these controls with property settings. Then you’ll see how to identify just what your</i><br /> <i>program</i><br /> <i>should do by writing program code. Finally, you’ll learn how to save and run your</i><br /> <i>new program</i><br /> <i>(a Las Vegas–style slot machine) and how to compile it as an executable file.</i><br /> <i>Lucky Seven: Your First Visual Basic Program</i><br /> <i>The Windows-based application you’re going to construct is Lucky Seven, a game program</i><br /> <i>that simulates a lucky number slot machine. Lucky Seven has a simple user interface and can</i><br /> <i>be created and compiled in just a few minutes using Microsoft Visual Basic. Here’s what your</i><br /> <i>program will look like when it’s finished:</i><br /> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyCIw-DhR7etg5J7rqS1dIp5bsHwnfRQW2_w80Qbm_C3lwEFC3zlSqoKWEYy4WQa_VOK68PQNjKElgy25dY4I4k6xk1D1Gg3w1uUv3gKW3kPpTM2Zaytj_RZi2RgVOJQVLvoyQ2SnjEd-f/s1600/1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="276" data-original-width="483" height="364" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyCIw-DhR7etg5J7rqS1dIp5bsHwnfRQW2_w80Qbm_C3lwEFC3zlSqoKWEYy4WQa_VOK68PQNjKElgy25dY4I4k6xk1D1Gg3w1uUv3gKW3kPpTM2Zaytj_RZi2RgVOJQVLvoyQ2SnjEd-f/s640/1.jpg" width="640" /></a></div> <h2 style="text-align: left;"> <i>Programming Steps</i></h2> <i>The Lucky Seven user interface contains two buttons, three lucky number boxes, a digital</i><br /> <i>photo depicting your winnings, and the label “Lucky Seven.” I produced these elements</i><br /> <i>by creating seven objects on the Lucky Seven form and then changing several properties</i><br /> <i>for each object. After I designed the interface, I added program code for the Spin and End</i><br /> <i>buttons</i><br /> <i>to process the user’s button clicks and produce the random numbers. To re-create</i><br /> <i>Lucky Seven, you’ll follow three essential programming steps in Visual Basic: Create the user</i><br /> <i>interface, set the properties, and write the program code. Table 2-1 shows the process</i><br /> <i>for</i><br /> <h3 style="text-align: left;"> <i>Lucky Seven.</i></h3> <h4 style="text-align: left;"> <i>Building the Lucky Seven Program</i></h4> <i>Programming Step Number of Items</i><br /> <i>1. Create the user interface. 7 objects</i><br /> <i>2. Set the properties. 13 properties</i><br /> <i>3. Write the program code. 2 objects</i><br /> <h2 style="text-align: left;"> <i>Creating the User Interface</i></h2> <i>In this exercise, you’ll start building Lucky Seven by first creating a new project and then</i><br /> <i>using</i><br /> <i>controls in the Toolbox to construct the user interface.</i><br /> <i>Create a new project</i><br /> <i>1. Start Visual Studio 2010.</i><br /> <i>2. On the Visual Studio File menu, click New Project.</i><br /> <i><b>[Tip You can also start a new programming project by clicking the blue New Project link</b></i><br /> <i><b>on the Start Page.]</b></i><br /> <i>The New Project dialog box opens, as shown on the following page.</i><br /> <i>The New Project dialog box provides access to the major project types available for</i><br /> <i>writing Windows and Web applications. If you indicated during setup that you are</i><br /> <i>a Visual Basic programmer, Visual Basic is your primary development option (as shown</i><br /> <i>here), but the other languages in Visual Studio (Visual C#, Visual C++, and Visual F#)</i><br /> <i>are always available through this dialog box. Although you will select a basic Windows</i><br /> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdl0-jsIVlMSJNvkVnkGGpy1jHuEf0TQwp7CF4aGVSrf5H1bCNv5LDdr4PNWgyYLmpoVHLZZzdgspPmFWrt8QYSdS1exU9bEHh0BuaoK9Nk-HbSvqzO79gQy26lMGN9_4H5nF3g0XQppKS/s1600/2.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="478" data-original-width="798" height="380" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdl0-jsIVlMSJNvkVnkGGpy1jHuEf0TQwp7CF4aGVSrf5H1bCNv5LDdr4PNWgyYLmpoVHLZZzdgspPmFWrt8QYSdS1exU9bEHh0BuaoK9Nk-HbSvqzO79gQy26lMGN9_4H5nF3g0XQppKS/s640/2.jpg" width="640" /></a></div> <i>application project in this exercise, this dialog box is also the gateway to other types</i><br /> <i>of development projects, such as a Web application, console application, Microsoft</i><br /> <i>Office add-in, Windows Azure Cloud Service, Silverlight application, or Visual Studio</i><br /> <i>deployment</i><br /> <i>project.</i><br /> <i>Near the top of the New Project dialog box, you will notice a drop-down list box.</i><br /> <i>This feature allows you to specify the version of the Microsoft .NET Framework that</i><br /> <i>your application will target. This feature is sometimes called multi-targeting, meaning</i><br /> <i>that through it, you can select the target environment that your program will run on.</i><br /> <i>For example, if you retain the default selection of .NET Framework 4, any computer that</i><br /> <i>your application will run on must have .NET Framework 4 installed. (Not to worry—the</i><br /> <i>.NET Framework is usually installed as part of the operating system installation, or when</i><br /> <i>you install a new Visual Basic program that you have written.) Unless you have a specific</i><br /> <i>need, you can just leave this drop-down list at its default setting of .NET Framework 4.</i><br /> <i>Visual Basic 2010 Express does not include this drop-down list. You’ll learn more about</i><br /> <i>the .NET Framework in Chapter 5, “Visual Basic Variables and Formulas, and the .NET</i><br /> <i>Framework.”</i><br /> <i>3. Click the Windows Forms Application icon in the central Templates area of the dialog</i><br /> <i>box, if it is not already selected.</i><br /> <i>Visual Studio prepares the development environment for Visual Basic Windows</i><br /> <i>application</i><br /> <i></i><br /> <i>programming.</i><br /> <i>4. In the Name text box, type <b><u>MyLucky7</u></b>.</i><br /> <i>Visual Studio assigns the name MyLucky7 to your project. (You’ll specify a folder</i><br /> <i>location</i><br /> <i>for the project later.) I’m recommending the “My” prefix here so you</i><br /> <i>don’t confuse your new application with the Lucky7 project I’ve created for you</i><br /> <i>on disk.</i><br /> <i><b>[Tip If your New Project dialog box contains Location and Solution Name text boxes,</b></i><br /> <i><b>you need to specify a folder location and solution name for your new programming</b></i><br /> <i><b>project now. The presence of these text boxes is controlled by a check box in the Project</b></i><br /> <i><b>And Solutions category of the Options dialog box, but it is not the default setting. (You</b></i><br /> <i><b>display</b></i><br /> <i><b>this dialog box by clicking the Options command on the Tools menu.) Throughout</b></i><br /> <i><b>this book, you will be instructed to save your projects (or discard them) after you have</b></i><br /> <i><b>completed the programming exercise. For more information about this “delayed saving”</b></i><br /> <i><b>feature and default settings, see the section entitled “Customizing IDE Settings to Match</b></i><br /> <i><b>Step-by-Step Exercises” ]</b></i><br /> <i>5. Click OK to create the new project in Visual Studio.</i><br /> <i>Visual Studio cleans the slate for a new programming project and displays the blank</i><br /> <i>Windows form that you will use to build your user interface.</i><br /> <i>Now you’ll enlarge the form and create the two buttons in the interface.</i><br /> <h4 style="text-align: left;"> <i>Create the user interface</i></h4> <i>1. Point to the lower-right corner of the form until the mouse pointer changes to</i><br /> <i>a resizing</i><br /> <i>pointer, and then drag to increase the size of the form to make room for</i><br /> <i>the objects in your program.</i><br /> <i>As you resize the form, scroll bars might appear in the Designer to give you access to</i><br /> <i>the entire form you’re creating. Depending on your screen resolution and the Visual</i><br /> <i>Studio tools you have open, you might not be able to see the entire form at once.</i><br /> <i>Don’t worry about this—your form can be small, or it can fill the entire screen because</i><br /> <i>the scroll bars give you access to the entire form.</i><br /> <i>Size your form so that it is about the size of the form shown on the following page. If</i><br /> <i>you want to match my example exactly, you can use the width and height dimensions</i><br /> <i>(485 pixels</i><br /> <i>× 278 pixels) shown in the lower-right corner of the screen.</i><br /> <i>To see the entire form without obstruction, you can resize or close the other</i><br /> <i>programming</i><br /> <i>tools, as you learned in Chapter 1. (Return to Chapter 1 if you have</i><br /> <i>questions</i><br /> <i>about resizing windows or tools.)</i><br /> <i></i><br /> <i>Now you’ll practice adding a button object on the form.</i><br /> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjFbNQoxx3ZaqJD93m8Ap2_gEhHim5-quX7zbn2FDO40muBY0uvim5jxRq5Gvse3YwmME2cnR01Epoms9atrF2e7pXeQ2jdUMHim_jQank84HYiMDtPgSyhYzDdHJfs2yJblszRyUghZ65/s1600/3.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="599" data-original-width="802" height="478" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjFbNQoxx3ZaqJD93m8Ap2_gEhHim5-quX7zbn2FDO40muBY0uvim5jxRq5Gvse3YwmME2cnR01Epoms9atrF2e7pXeQ2jdUMHim_jQank84HYiMDtPgSyhYzDdHJfs2yJblszRyUghZ65/s640/3.jpg" width="640" /></a></div> <i>2. Click the Toolbox tab to display the Toolbox window in the IDE.</i><br /> <i>The Toolbox contains all the controls that you’ll use to build Visual Basic programs in</i><br /> <i>this book. The controls suitable for creating a Windows application are visible now</i><br /> <i>because you selected the Windows Application project type earlier. Controls are</i><br /> <i>organized</i><br /> <i>by type, and by default the Common Controls category is visible. (If the</i><br /> <i>Toolbox is not visible now, click Toolbox on the View menu to display it.)</i><br /> <i>3. Double-click the Button control in the Toolbox, and then move the mouse pointer away</i><br /> <i>from the Toolbox.</i><br /> <i>Visual Studio creates a default-sized button object on the form and hides the Toolbox,</i><br /> <i></i><br /> <i>as shown here:</i><br /> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnRqbQQ-4tS6ru23p_jGB4GdPT1BH98B2juWMO24zb3m_kLvBzAr917lJ1WO6hw3D-h7gk7Mh-84LCoBxy1uJTvUhkPYhk2WPlZ8bY3MMn_8ybF6rnx5hPjj-7Agf4NgZWRjXQcYGMWWv3/s1600/4.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="273" data-original-width="480" height="363" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnRqbQQ-4tS6ru23p_jGB4GdPT1BH98B2juWMO24zb3m_kLvBzAr917lJ1WO6hw3D-h7gk7Mh-84LCoBxy1uJTvUhkPYhk2WPlZ8bY3MMn_8ybF6rnx5hPjj-7Agf4NgZWRjXQcYGMWWv3/s640/4.jpg" width="640" /></a></div> <i>The button is named Button1 because it is the first button in the program. (You should make</i><br /> <i>a mental note of this button name—you’ll see it again when you write your program code.)</i><br /> <i>The new button object is selected and enclosed by resize handles. When Visual Basic is in</i><br /> <i>design</i><br /> <i>mode (that is, whenever the Visual Studio IDE is active), you can move objects on the</i><br /> <i>form by dragging them with the mouse, and you can resize them by using the resize handles.</i><br /> <i>While a program is running, however, the user can’t move user interface (UI) elements unless</i><br /> <i>you’ve changed a property in the program to allow this. You’ll practice moving and resizing</i><br /> <i>the button now.</i><br /> <i><b>Move and resize a button</b></i><br /> <i>1. Point to the button so that the pointer changes to a four-headed arrow, and then drag</i><br /> <i>the button down and to the right.</i><br /> <i>The button moves across the surface of the form. If you move the object near the edge</i><br /> <i>of the form or another object (if other objects are present), it automatically aligns itself</i><br /> <i>to a hidden grid when it is an inch or so away. A little blue “snapline” also appears to</i><br /> <i>help you gauge the distance of this object from the edge of the form or the other</i><br /> <i>object.</i><br /> <i>The grid is not displayed on the form by default, but you can use the snapline</i><br /> <i>to judge distances with almost the same effect.</i><br /> <i>2. Position the mouse pointer on the lower-right corner of the button.</i><br /> <i>When the mouse pointer rests on a resize handle of a selected object, it</i><br /> <i>becomes</i><br /> <i>a resizing</i><br /> <i>pointer. You can use the resizing pointer to change the size</i><br /> <i>of an object.</i><br /> <i>3. Enlarge the button by dragging the pointer down and to the right.</i><br /> <i>When you release the mouse button, the button changes size and snaps to the grid.</i><br /> <i>4. Use the resizing pointer to return the button to its original size.</i><br /> <i>Now you’ll add a second button to the form, below the first button.</i><br /> <i>Add a second button</i><br /> <i>1. Click the Toolbox tab to display the Toolbox.</i><br /> <i>2. Click the Button control in the Toolbox (single-click this time), and then move the</i><br /> <i>mouse pointer over the form.</i><br /> <i>The mouse pointer changes to crosshairs and a button icon. The crosshairs are</i><br /> <i>designed</i><br /> <i>to help you draw the rectangular shape of the button on the form, and you</i><br /> <i>can use this method as an alternative to double-clicking to create a control of the</i><br /> <i>default</i><br /> <i>size.</i><br /> <i>3. Click and drag the pointer down and to the right. Release the mouse button to</i><br /> <i>complete</i><br /> <i></i><br /> <i>the button, and watch it snap to the form.</i><br /> <i>4. Resize the button object so that it is the same size as the first button, and then move it</i><br /> <i>below the first button on the form. (Use the snapline feature to help you.)</i><br /> <i>Tip At any time, you can delete an object and start over again by selecting the object</i><br /> <i>on the form and then pressing DELETE. Feel free to create and delete objects to practice</i><br /> <i>creating</i><br /> <i>your user interface.</i><br /> <i>Now you’ll add the labels used to display the numbers in the program. A label is a special</i><br /> <i>user interface element designed to display text, numbers, or symbols when a program runs.</i><br /> <i>When the user clicks the Lucky Seven program’s Spin button, three random numbers appear</i><br /> <i>in the label boxes. If one of the numbers is a 7, the user wins.</i><br /> <i>Add the number labels</i><br /> <i>1. Double-click the Label control in the Toolbox.</i><br /> <i>Visual Studio creates a label object on the form. The label object is just large enough</i><br /> <i>to hold the text contained in the object (it is rather small now), but it can be resized.</i><br /> <i>2. Drag the Label1 object to the right of the two button objects.</i><br /> <i></i><br /> <i>Your form looks something like this:</i><br /> <div class="separator" style="clear: both; text-align: center;"> <i><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgP4dZIAnxzhamio7-WGl826cqeHViFLMAx7NXXy8eA5PtJvcQGzLgpymb559TAK79rjqDm8419b7DF6NmEW5IeOnnJXFFf6o3qjDCgDpAUM3xgjD248v0vEFMtRx6vzbs4CtFl0hdbnjR/s1600/5.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="273" data-original-width="480" height="363" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgP4dZIAnxzhamio7-WGl826cqeHViFLMAx7NXXy8eA5PtJvcQGzLgpymb559TAK79rjqDm8419b7DF6NmEW5IeOnnJXFFf6o3qjDCgDpAUM3xgjD248v0vEFMtRx6vzbs4CtFl0hdbnjR/s640/5.jpg" width="640" /></a></i></div> <div class="separator" style="clear: both; text-align: center;"> <i>3. Double-click the Label control in the Toolbox to create a second label object.</i></div> <br /> <div class="separator" style="clear: both; text-align: center;"> <i>This label object will be named Label2 in the program.</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>4. Double-click the Label control again to create a third label object.</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>5. Move the second and third label objects to the right of the first one on the form.</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>Allow plenty of space between the three labels because you will use them to display</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>large numbers when the program runs.</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>Now you’ll use the Label control to add a descriptive label to your form. This will be</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>the fourth and final label in the program.</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>6. Double-click the Label control in the Toolbox.</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>7. Drag the Label4 object below the two command buttons.</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>When you’ve finished, your four labels should look like those in the following</i></div> <div class="separator" style="clear: both; text-align: center;"> <i></i></div> <div class="separator" style="clear: both; text-align: center;"> <i>screen shot. (You can move your label objects if they don’t look quite right.)</i></div> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimDDnsJrpHz_XIkIbvxFAk-EbviuFjDs9zC-Un7nA7gCxcg0lFKwu4idxUPHqGFNTCTdeD7bSysxg9xxfEGOgjrEi7xRTmkUaFAF_Fc-6eQD5zHVNSC003InEg_1Np5GenelPNUA0LheYf/s1600/6.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="276" data-original-width="483" height="363" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimDDnsJrpHz_XIkIbvxFAk-EbviuFjDs9zC-Un7nA7gCxcg0lFKwu4idxUPHqGFNTCTdeD7bSysxg9xxfEGOgjrEi7xRTmkUaFAF_Fc-6eQD5zHVNSC003InEg_1Np5GenelPNUA0LheYf/s640/6.jpg" width="640" /></a></div> <div class="separator" style="clear: both; text-align: center;"> <i>Now you’ll add a picture box to the form to graphically display the payout you’ll receive</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>when you draw a 7 and hit the jackpot. A picture box is designed to display bitmaps, icons,</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>digital photos, and other artwork in a program. One of the best uses for a picture box is to</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>display a JPEG image file.</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>Add a picture</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>1. Click the PictureBox control in the Toolbox.</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>2. Using the control’s drawing pointer, create a large rectangular box below the second</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>and third labels on the form.</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>Leave a little space below the labels for their size to grow as I mentioned earlier.</i></div> <div class="separator" style="clear: both; text-align: center;"> <i></i></div> <div class="separator" style="clear: both; text-align: center;"> <i>When you’ve finished, your picture box object looks similar to this:</i></div> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfD7C2BFW2xcHaXlhfRKO69B0xtKiKMJU7L-judP8AzqBIEdsxJr6jsDIj6V8m2m_Zj3Oin8xrteMcgwByFYsq7z5vSMsm-mGZwSZUVSVfAhm8JsZd56OQgFq4AHDhbRsddiwI0D4I4AF8/s1600/7.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="273" data-original-width="480" height="363" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfD7C2BFW2xcHaXlhfRKO69B0xtKiKMJU7L-judP8AzqBIEdsxJr6jsDIj6V8m2m_Zj3Oin8xrteMcgwByFYsq7z5vSMsm-mGZwSZUVSVfAhm8JsZd56OQgFq4AHDhbRsddiwI0D4I4AF8/s640/7.jpg" width="640" /></a></div> <div class="separator" style="clear: both; text-align: center;"> <i>This object will be named PictureBox1 in your program; you’ll use this name later in</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>the program code.</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>Now you’re ready to customize your interface by setting a few properties.</i></div> <div class="separator" style="clear: both; text-align: center;"> <i><b>Setting the Properties</b></i></div> <div class="separator" style="clear: both; text-align: center;"> <i>As you discovered in Chapter 1, you can change properties by selecting objects on the form</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>and changing their settings in the Properties window. You’ll start by changing the property</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>settings for the two buttons.</i></div> <div class="separator" style="clear: both; text-align: center;"> <i><b>Set the button properties</b></i></div> <div class="separator" style="clear: both; text-align: center;"> <i>1. Click the first button (Button1) on the form.</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>The button is selected and is surrounded by resize handles.</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>2. Click the Properties window title bar.</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>Tip If the Properties window isn’t visible, click the Properties Window command on the</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>View menu, or press F4.</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>3. At the top of the Properties window, click the Categorized button.</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>For information about categorized properties, see the section entitled “The Properties</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>Window” in Chapter 1.</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>4. Resize the Properties window (if necessary) so that there is plenty of room to see the</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>property names and their current settings.</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>Once you get used to setting properties, you will probably use the Properties window</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>without enlarging it, but making it bigger helps when you first try to use it. The</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>Properties window in the following screen shot is a good size for setting properties:</i></div> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrWmulNOLt_o-0KTxt8zAnSjVPSt8fELgSbmFuBgdNZUC3GRy8aeLpZSdgtc_6bPptR0P-dNc64eU7JtlazSlaLDJ9VYFU8_MCfw0dpKcg1kb_wZXJbxkE9hnlCCIqG1cIwzx3xv7Jx95F/s1600/8.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="431" data-original-width="292" height="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrWmulNOLt_o-0KTxt8zAnSjVPSt8fELgSbmFuBgdNZUC3GRy8aeLpZSdgtc_6bPptR0P-dNc64eU7JtlazSlaLDJ9VYFU8_MCfw0dpKcg1kb_wZXJbxkE9hnlCCIqG1cIwzx3xv7Jx95F/s640/8.jpg" width="432" /></a></div> <div class="separator" style="clear: both; text-align: center;"> <i>The Properties window lists the settings for the first button. These include settings</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>for the background color, text, font height, and width of the button. Because there are</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>so many properties, Visual Studio organizes them into categories and displays them</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>in outline view. If you want to see the properties in a category, click the arrow sign (>)</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>next to the category title.</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>5. If it is not already visible, scroll in the Properties window until you see the Text property</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>located in the Appearance category.</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>6. Double-click the Text property in the first column of the Properties window.</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>The current Text setting (“Button1”) is highlighted in the Properties window.</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>7. Type Spin, and then press ENTER.</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>The Text property changes to “Spin” in the Properties window and on the button</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>on the form. Now you’ll change the Text property of the second button to “End.”</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>(You’ll select the second button in a new way this time.)</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>8. Open the Object list at the top of the Properties window.</i></div> <div class="separator" style="clear: both; text-align: center;"> <i></i></div> <div class="separator" style="clear: both; text-align: center;"> <i>A list of the interface objects in your program appears as follows:</i></div> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgf_mZhpgOewyu0aDPKg8jJvZPh_w7MyD1MrensLpa9tO2EnT5de2yVw_RUEufCRkcej6jTMpXubK4fzID2GmTLcDeBe_O3gIItNzb7tFGrOoI4mcrPnZrNLpqeygfTH6t_mWRCm9EGq-Qg/s1600/9.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="428" data-original-width="292" height="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgf_mZhpgOewyu0aDPKg8jJvZPh_w7MyD1MrensLpa9tO2EnT5de2yVw_RUEufCRkcej6jTMpXubK4fzID2GmTLcDeBe_O3gIItNzb7tFGrOoI4mcrPnZrNLpqeygfTH6t_mWRCm9EGq-Qg/s640/9.jpg" width="435" /></a></div> <div class="separator" style="clear: both; text-align: center;"> <i>9. Click Button2 System.Windows.Forms.Button (the second button) in the list box.</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>The property settings for the second button appear in the Properties window, and</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>Visual Studio highlights Button2 on the form.</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>10. Double-click the current Text property (“Button2”), type End, and then press ENTER.</i></div> <div class="separator" style="clear: both; text-align: center;"> <i></i></div> <div class="separator" style="clear: both; text-align: center;"> <i>The text of the second button changes to “End.”</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>Tip Using the Object list is a handy way to switch between objects in your program.</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>You can also switch between objects on the form by clicking each object.</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>Now you’ll set the properties for the labels in the program. The first three labels will hold</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>the random numbers generated by the program and will have identical property settings.</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>(You’ll set most of them as a group.) The descriptive label settings will be slightly different.</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>Set the number label properties</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>1. Click the first number label (Label1), hold down the SHIFT key, click the second</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>and third number labels, and then release the SHIFT key. (If the Properties window is</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>in the way, move it to a new place.)</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>A selection rectangle and resize handles appear around each label you click. You’ll</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>change the TextAlign, BorderStyle, and Font properties now so that the numbers that</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>will appear in the labels will be centered, boxed, and identical in font and font size.</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>(All these properties are located in the Appearance category of the Properties window.)</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>You’ll also set the AutoSize property to False so that you can change the size of the</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>labels</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>according to your precise specifications. (The AutoSize property is located in the</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>Layout category.)</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>Tip When more than one object is selected, only those properties that can be changed</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>for the group are displayed in the Properties window.</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>2. Click the AutoSize property in the Properties window, and then click the arrow that</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>appears</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>in the second column.</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>3. Set the AutoSize property to False so that you can size the labels manually.</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>4. Click the TextAlign property, and then click the arrow that appears in the second</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>column.</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>A graphical assortment of alignment options appears in the list box; you can use</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>these settings to align text anywhere within the borders of the label object.</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>5. Click the center option (MiddleCenter).</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>The TextAlign property for each of the selected labels changes to MiddleCenter.</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>6. Click the BorderStyle property, and then click the arrow that appears in the second</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>column.</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>The valid property settings (None, FixedSingle, and Fixed3D) appear in the list box.</i></div> <div class="separator" style="clear: both; text-align: center;"> <i></i></div> <div class="separator" style="clear: both; text-align: center;"> <i>7. Click FixedSingle in the list box to add a thin border around each label.</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>8. Click the Font property, and then click the ellipsis button (the button with three dots</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>that’s located next to the current font setting).</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>The Font dialog box opens.</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>9. Change the font to Times New Roman, the font style to Bold, and the font size to 24,</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>and then click OK.</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>The label text appears in the font, style, and size you specified.</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>Now you’ll set the text for the three labels to the number 0—a good “placeholder” for</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>the numbers that will eventually fill these boxes in your game. (Because the program</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>produces the actual numbers, you could also delete the text, but putting a placeholder</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>here gives you something to base the size of the labels on.)</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>10. Click a blank area on the form to remove the selection from the three labels, and then</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>click the first label.</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>11. Double-click the Text property, type 0, and then press ENTER.</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>The text of the Label1 object is set to 0. You’ll use program code to set this property</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>to a random “slot machine” number later in this chapter.</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>12. Change the text in the second and third labels on the form to 0 also.</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>13. Move and resize the labels now so that they are appropriately spaced.</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>Your form looks something like this:</i></div> <div class="separator" style="clear: both; text-align: center;"> <i></i></div> <div class="separator" style="clear: both; text-align: center;"> <i>Now</i></div> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9lvdgcOREP2XDjWSCSbMG6_woEZN1CbtdybXBACQQBBgvYhP5_Bi_pEDScvLRlamZZL6zXWLmyCVqWLeqMifJoNWEklD6cDQ40vLbXCs72C8JHixODS5yS4G3XR2kx6A6_5JTjt49jR4I/s1600/9.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="276" data-original-width="483" height="365" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9lvdgcOREP2XDjWSCSbMG6_woEZN1CbtdybXBACQQBBgvYhP5_Bi_pEDScvLRlamZZL6zXWLmyCVqWLeqMifJoNWEklD6cDQ40vLbXCs72C8JHixODS5yS4G3XR2kx6A6_5JTjt49jR4I/s640/9.jpg" width="640" /></a></div> <br /> <div class="separator" style="clear: both; text-align: center;"> </div> <div class="separator" style="clear: both; text-align: center;"> <i>Now you’ll change the Text, Font, and ForeColor properties of the fourth label.</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>Set the descriptive label properties</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>1. Click the fourth label object (Label4) on the form.</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>2. Change the Text property in the Properties window to Lucky Seven.</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>3. Click the Font property, and then click the ellipsis button.</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>4. Use the Font dialog box to change the font to Arial, the font style to Bold, and the font</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>size to 18. Then click OK.</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>The font in the Label4 object is updated, and the label is resized automatically to hold</i></div> <div class="separator" style="clear: both; text-align: center;"> <i></i></div> <div class="separator" style="clear: both; text-align: center;"> <i>the larger font size because the object’s AutoSize property is set to True.</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>5. Click the ForeColor property in the Properties window, and then click the arrow in</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>the second column.</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>Visual Studio displays a list box with Custom, Web, and System tabs for setting the</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>foreground colors (the color of text) of the label object. The Custom tab offers many of</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>the colors available in your system. The Web tab sets colors for Web pages and lets you</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>pick colors using their common names. The System tab displays the current colors used</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>for user interface elements in your system.</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>6. Click the purple color on the Custom tab.</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>The text in the label box changes to purple.</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>Now you’re ready to set the properties for the last object.</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>The Picture Box Properties</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>When the person playing your game hits the jackpot (that is, when at least one 7 appears in</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>the number labels on the form), the picture box object will contain a picture in JPEG format</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>of a person dispensing money. (I am supplying you with this digitized image, but you can</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>substitute your own if you like.) You need to set the SizeMode property to accurately size the</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>picture and set the Image property to specify the name of the JPEG file that you will load</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>into the picture box. You also need to set the Visible property, which specifies the picture</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>state at the beginning of the program.</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>Set the picture box properties</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>1. Click the picture box object on the form.</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>2. Click the SizeMode property in the Properties window (listed in the Behavior category),</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>click the arrow in the second column, and then click StretchImage.</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>Setting SizeMode to StretchImage before you open a graphic causes Visual Studio to</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>resize the graphic to the exact dimensions of the picture box. (Typically, you set this</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>property before you set the Image property.)</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>3. Click the Image property in the Properties window, and then click the ellipsis button</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>in the second column.</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>The Select Resource dialog box opens.</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>4. Click the Local Resource radio button, and then click the Import button.</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>5. In the Open dialog box, navigate to the C:\Vb10sbs\Chap02 folder.</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>This folder contains the digital photo PayCoins.jpg.</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>6. Select PayCoins.jpg, and then click Open.</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>An screen shot of one person paying another appears in the Select Resource</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>dialog</i></div> <div class="separator" style="clear: both; text-align: center;"> <i></i></div> <div class="separator" style="clear: both; text-align: center;"> <i>box. (The letter “W” represents winning.)</i></div> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_JD0TzLrz5rlqCFPklIGcyHLO1nQMG-7SnnuBl0xdLjbsgOilLPL7Ly3kmoktEMyHANOYC0V-OPiqjO1u4C3LpLSjB28S1Bf-34Gsxrb88ulDK6jOd9X6J7z-5KqEVZr3NrDljqJveexn/s1600/9.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="388" data-original-width="575" height="427" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_JD0TzLrz5rlqCFPklIGcyHLO1nQMG-7SnnuBl0xdLjbsgOilLPL7Ly3kmoktEMyHANOYC0V-OPiqjO1u4C3LpLSjB28S1Bf-34Gsxrb88ulDK6jOd9X6J7z-5KqEVZr3NrDljqJveexn/s640/9.jpg" width="640" /></a></div> <div class="separator" style="clear: both; text-align: center;"> <i>7. Click OK.</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>The PayCoins photo is loaded into the picture box. Because the photo is relatively small</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>(24 KB), it opens quickly on the form.</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>8. Resize the picture box object now to fix any distortion problems that you see in the</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>image.</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>I sized my picture box object to be 144 pixels wide by 146 pixels high. You can match</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>this size by using the width and height dimensions located on the lower-right side</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>of the Visual Studio IDE. (The dimensions of the selected object are given on the</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>lower-</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>right side, and the location on the form of the object’s upper-left corner is given</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>to the left of the dimensions.)</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>This particular image displays best when the picture box object retains a square shape.</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>Note As you look at the picture box object, you might notice a tiny shortcut arrow called</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>a smart tag near its upper-right corner. This smart tag is a button that you can click to</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>quickly change a few common picture box settings and open the Select Resource dialog</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>box. (You’ll see the smart tag again in Chapter 4, “Working with Menus, Toolbars, and</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>Dialog Boxes,” when you use the ToolStrip control.)</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>Now you’ll change the Visible property to False so that the image will be invisible when</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>the program starts.</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>9. Click the Visible property in the Behavior category of the Properties window, and then</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>click the arrow in the second column.</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>The valid settings for the Visible property appear in a list box.</i></div> <div class="separator" style="clear: both; text-align: center;"> <i></i></div> <div class="separator" style="clear: both; text-align: center;"> <i>10. Click False to make the picture invisible when the program starts.</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>Setting the Visible property to False affects the picture box when the program runs, but</i></div> <div class="separator" style="clear: both; text-align: center;"> <i></i></div> <div class="separator" style="clear: both; text-align: center;"> <i>not now, while you’re designing it. Your completed form looks similar to this:</i></div> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMz7DJz8EiXrZMEq20-Ka-R27-WAtL7352XpTTbEyeZTXjb2YnMO-hp_BRLra3zyoaUmEdefJsFgL2G_pphIP_7jJxaRKT37SH8vMGf3qrGfAAAKcbdeRjFbBqgrEreRWLrgJWnePEI08N/s1600/9.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="276" data-original-width="483" height="364" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMz7DJz8EiXrZMEq20-Ka-R27-WAtL7352XpTTbEyeZTXjb2YnMO-hp_BRLra3zyoaUmEdefJsFgL2G_pphIP_7jJxaRKT37SH8vMGf3qrGfAAAKcbdeRjFbBqgrEreRWLrgJWnePEI08N/s640/9.jpg" width="640" /></a></div> <div class="separator" style="clear: both; text-align: center;"> <i>Tip You can also double-click property names that have True and False settings (so-called</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>Boolean properties), to toggle back and forth between True and False. Default Boolean</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>properties are shown in regular type, and changed settings appear in bold.</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>11. You are finished setting properties for now, so if your Properties window is floating,</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>hold down the CTRL key and double-click its title bar to return it to the docked</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>position.</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>Reading Properties in Tables</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>In this chapter, you’ve set the properties for the Lucky Seven program step by step.</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>In future chapters, the instructions to set properties will be presented in table format</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>unless a setting is especially tricky. Table 2-2 lists the properties you’ve set so far in the</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>Lucky Seven program, as they’d look later in the book. Settings you need to type in are</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>shown in quotation marks. You shouldn’t type the quotation marks.</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>TABLE 2-2 Lucky Seven Properties</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>Object Property Setting</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>Button1 Text “Spin”</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>Button2 Text “End”</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>Label1, Label2, Label3 AutoSize</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>BorderStyle</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>Font</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>Text</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>TextAlign</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>False</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>FixedSingle</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>Times New Roman, Bold, 24-point</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>“0”</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>MiddleCenter</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>Label4 Text</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>Font</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>ForeColor</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>“Lucky Seven”</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>Arial, Bold, 18-point</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>Purple</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>PictureBox1 Image</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>SizeMode</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>Visible</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>“C:\Vb10sbs\Chap02\Paycoins.jpg”</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>StretchImage</i></div> <div class="separator" style="clear: both; text-align: center;"> <i></i></div> <div class="separator" style="clear: both; text-align: center;"> <i>False</i></div> <h2 style="clear: both; text-align: center;"> <i>Writing the Code</i></h2> <div class="separator" style="clear: both; text-align: center;"> <i>Now you’re ready to write the code for the Lucky Seven program. Because most of the</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>objects</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>you’ve created already “know” how to work when the program runs, they’re ready</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>to receive input from the user and process it. The inherent functionality of objects is one</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>of the great strengths of Visual Studio and Visual Basic—after objects are placed on a form</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>and their properties are set, they’re ready to run without any additional programming.</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>However, the “meat” of the Lucky Seven game—the code that actually calculates random</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>numbers, displays them in boxes, and detects a jackpot—is still missing from the program.</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>This computing logic can be built into the application only by using program statements—</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>code that clearly spells out what the program should do at each step of the way. Because</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>the Spin and End buttons drive the program, you’ll associate the code for the game with</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>those buttons. You enter and edit Visual Basic program statements in the Code Editor.</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>In the following steps, you’ll enter the program code for Lucky Seven in the Code Editor.</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>Use the Code Editor</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>1. Double-click the End button on the form.</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>The Code Editor appears as a tabbed document window in the center of the Visual</i></div> <div class="separator" style="clear: both; text-align: center;"> <i></i></div> <div class="separator" style="clear: both; text-align: center;"> <i>Studio IDE, as shown here:</i></div> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHc6Aceg0U4YvB24BCUW6ktZ_3raOAqE33514X2pcuGnbvRismsMRuP2btCZNewtLfW-DB57oIzAUOGq2jyL6StUhSn2hmJQG7UqLVxj6Xg1eDuSIeGiCAr4nqhv9sY31FgZzSo7cCGAYU/s1600/9.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="599" data-original-width="801" height="478" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHc6Aceg0U4YvB24BCUW6ktZ_3raOAqE33514X2pcuGnbvRismsMRuP2btCZNewtLfW-DB57oIzAUOGq2jyL6StUhSn2hmJQG7UqLVxj6Xg1eDuSIeGiCAr4nqhv9sY31FgZzSo7cCGAYU/s640/9.jpg" width="640" /></a></div> <div class="separator" style="clear: both; text-align: center;"> <i>Inside the Code Editor are program statements associated with the current form.</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>Program statements that are used together to perform some action are typically</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>grouped in a programming construct called a procedure. A common type of procedure</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>is a Sub procedure, sometimes called a subroutine. Sub procedures include a Sub</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>keyword</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>in the first line and end with End Sub. (I’ll talk about the Public and Private</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>keywords later.) Procedures are typically executed when certain events occur, such as</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>when a button is clicked. When a procedure is associated with a particular object and</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>an event, it is called an event handler or an event procedure.</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>When you double-clicked the End button (Button2), Visual Studio automatically added</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>the first and last lines of the Button2_Click event procedure, as the following code</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>shows. (The first line was wrapped to stay within the book margins.) You may notice</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>other bits of code in the Code Editor (words like Public and Class), which Visual Studio</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>has added to define important characteristics of the form, but I won’t emphasize</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>them here.</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>Private Sub Button2_Click(ByVal sender As System.Object, _</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>ByVal e As System.EventArgs) Handles Button2.Click</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>End Sub</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>The body of a procedure fits between these lines and is executed whenever a user</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>activates the interface element associated with the procedure. In this case, the event</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>is a mouse click, but as you’ll see later in the book, it could also be a different type</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>of event.</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>2. Type End, and then press the ENTER key.</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>When you type the statement, Visual Studio recognizes End as a unique reserved word</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>or keyword and displays it in a list box with Common and All tabs. Microsoft calls this</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>auto-extend feature IntelliSense because it tries to intelligently help you write code,</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>and you can browse through various Visual Basic keywords and objects alphabetically.</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>(In this way, the language is partially discoverable through the IDE itself.)</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>After you press the ENTER key, the letters in End turn blue and are indented, indicating</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>that Visual Basic recognizes End as one of several hundred unique keywords within</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>the Visual Basic language. You use the End keyword to stop your program and</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>remove</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>it from the screen. In this case, End is also a complete program statement,</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>a self-</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>contained instruction executed by the Visual Basic compiler, the part of Visual</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>Studio that processes</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>or parses each line of Visual Basic source code, combining the</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>result with other</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>resources to create an executable file. Program statements are a little</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>like complete</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>sentences in a human language—statements can be of varying lengths</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>but must follow the grammatical “rules” of the compiler. In Visual Studio, program</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>statements</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>can be composed of keywords, properties, object names, variables,</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>numbers,</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>special symbols, and other values. You’ll learn more about how program</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>statements are constructed in Chapter 5.</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>As you enter program statements and make other edits, the Code Editor handles many</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>of the formatting details for you, including adjusting indentation and spacing</i></div> <div class="separator" style="clear: both; text-align: center;"> <i></i></div> <div class="separator" style="clear: both; text-align: center;"> <i>and</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>adding</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>any necessary parentheses. The exact spelling, order, and spacing of items within</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>program statements is referred to as statement syntax. In the early days of compilers,</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>programmers were almost totally responsible for getting the precise syntax for each</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>program statement correct on their own, but now sophisticated development tools such</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>as Visual Studio help immensely with the construction of accurate program statements.</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>When you pressed the ENTER key, the End statement was indented to set it apart</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>from the Private Sub and End Sub statements. This indenting scheme is one of the</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>programming</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>conventions you’ll see throughout this book to keep your programs clear</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>and readable. The group of conventions regarding how code is organized in a program</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>is often referred to as program style.</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>Now that you’ve written the code associated with the End button, you’ll write code for the</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>Spin button. These program statements will be a little more extensive and will give you</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>a chance to learn more about statement syntax and program style. You’ll study many of the</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>program statements later in this book, so you don’t need to know everything about them</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>now. Just focus on the general structure of the code and on typing the program statements</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>exactly as they are printed.</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>Write code for the Spin button</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>1. At the top of the Solution Explorer window, click the View Designer button in the</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>Solution Explorer window to display your form again.</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>Note When the Code Editor is visible, you won’t be able to see the form you’re working</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>on. The View Designer button is one mechanism you can use to display it again. (If more</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>than one form is loaded in Solution Explorer, click the form that you want to display first.)</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>You can also click the Form1.vb [Design] tab at the top edge of the Code Editor. To display</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>the Code Editor again, click the View Code button in Solution Explorer.</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>2. Double-click the Spin button.</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>After a few moments, the Code Editor appears, and an event procedure associated with</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>the Button1 button appears near the Button2 event procedure.</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>Although you changed the text of this button to “Spin,” its name in the program is</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>still Button1. (The name and the text of an interface element can be different to suit</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>the needs of the programmer.) Each object can have several procedures associated</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>with it, one for each event it recognizes. The click event is the one you’re interested</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>in now because</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>users will click the Spin and End buttons when they run the program.</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>3. Type the following program lines between the Private Sub and End Sub statements.</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>Press ENTER after each line, press TAB to indent, and take care to type the program</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>statements exactly as they appear here. (The Code Editor will scroll to the left as you</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>enter the longer lines.) If you make a mistake (usually identified by a jagged underline),</i></div> <div class="separator" style="clear: both; text-align: center;"> <i></i></div> <div class="separator" style="clear: both; text-align: center;"> <i>delete the incorrect statements and try again.</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>Tip As you enter the program code, Visual Basic formats the text and displays different</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>parts of the program in color to help you identify the various elements. When you begin</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>to type a property, Visual Basic also displays the available properties for the object you’re</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>using in a list box, so you can double-click the property or keep typing to enter it yourself.</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>If Visual Basic displays an error message, you might have misspelled a program statement.</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>Check the line against the text in this book, make the necessary correction, and continue</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>typing. (You can also delete a line and type it from scratch.) In addition, Visual Basic might</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>add necessary code automatically. For example, when you type the following code, Visual</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>Basic automatically adds the End If line. Readers of previous editions of this book have</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>found this first typing exercise to be the toughest part of this chapter—“But Mr. Halvorson,</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>I know I typed it just as you wrote it!”—so please give this program code your closest</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>attention.</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>I promise you, it works!</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>PictureBox1.Visible = False ' hide picture</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>Label1.Text = CStr(Int(Rnd() * 10)) ' pick numbers</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>Label2.Text = CStr(Int(Rnd() * 10))</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>Label3.Text = CStr(Int(Rnd() * 10))</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>' if any number is 7 display picture and beep</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>If (Label1.Text = "7") Or (Label2.Text = "7") _</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>Or (Label3.Text = "7") Then</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>PictureBox1.Visible = True</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>Beep()</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>End If</i></div> <div class="separator" style="clear: both; text-align: center;"> <i></i></div> <div class="separator" style="clear: both; text-align: center;"> <i>When you’ve finished, the Code Editor looks as shown in the following screen shot:</i></div> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhv2OmRH0IDFaZ6-kObCdgVp0ewvEJzAA3dBnisZnBwXAxES1b3PsPyW4hn3lP5NHKtQZLQi2eprr2qTxxvO1UcY_T7A38KjfdnT0-OzyXULykK3E0bNE44AK6cT09B96_NqhN5bGEKAMzO/s1600/9.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="599" data-original-width="802" height="478" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhv2OmRH0IDFaZ6-kObCdgVp0ewvEJzAA3dBnisZnBwXAxES1b3PsPyW4hn3lP5NHKtQZLQi2eprr2qTxxvO1UcY_T7A38KjfdnT0-OzyXULykK3E0bNE44AK6cT09B96_NqhN5bGEKAMzO/s640/9.jpg" width="640" /></a></div> <div class="separator" style="clear: both; text-align: center;"> <i>4. Click the Save All command on the File menu to save your additions to the program.</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>The Save All command saves everything in your project—the project file, the form</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>file, any code modules, and other related components in your application. Since</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>this is the first time that you have saved your project, the Save Project dialog box</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>opens, prompting you for the name and location of the project. (If your copy of</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>Visual Studio is configured to prompt you for a location when you first create your</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>project,</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>you won’t see the Save Project dialog box now—Visual Studio just saves</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>your changes.)</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>5. Browse and select a location for your files.</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>I recommend that you use the C:\Vb10sbs\Chap02 folder (the location of the book’s</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>sample files), but the location is up to you. Since you used the “My” prefix when you</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>originally opened your project, this version won’t overwrite the Lucky7 practice file that</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>I built for you on disk.</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>6. Clear the Create Directory For Solution check box.</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>When this check box is selected, it creates a second folder for your program’s solution</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>files, which is not necessary for solutions that contain only one project (the situation for</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>most programs in this book).</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>7. Click Save to save your files.</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>Note If you want to save just the item you are currently working on (the form, the code</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>module, or something else), you can use the Save command on the File menu. If you want</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>to save the current item with a different name, you can use the Save As command.</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>A Look at the Button1_Click Procedure</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>The Button1_Click procedure is executed when the user clicks the Spin button on the form.</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>The procedure uses some pretty complicated statements, and because I haven’t formally</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>introduced</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>them yet, it might look a little confusing. However, if you take a closer look,</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>you’ll probably see a few things that look familiar. Taking a peek at the contents of these</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>procedures</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>will give you a feel for the type of program code you’ll be creating later in</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>this book. (If you’d rather not stop for this preview, feel free to skip to the next section,</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>“Running Visual Basic Applications.”)</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>The Button1_Click procedure performs three tasks:</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>n It hides the digital photo.</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>n It creates three random numbers for the number labels.</i></div> <div class="separator" style="clear: both; text-align: center;"> <i></i></div> <div class="separator" style="clear: both; text-align: center;"> <i>n It displays the photo when the number 7 appears.</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>Let’s look at each of these steps individually.</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>Hiding the photo is accomplished with the following line:</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>PictureBox1.Visible = False ' hide picture</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>This line is made up of two parts: a program statement and a comment.</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>The PictureBox1.Visible = False program statement sets the Visible property of the picture</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>box object (PictureBox1) to False (one of two possible settings). You might remember that</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>you set this property to False once before by using the Properties window. You’re doing</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>it again now in the program code because the first task is a spin and you need to clear</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>away a photo that might have been displayed in a previous game. Because the property</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>will be changed at run time and not at design time, you must set the property by using</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>program</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>code. This is a handy feature of Visual Basic, and I’ll talk about it more in Chapter 3,</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>“Working with Toolbox Controls.”</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>The second part of the first line (the part displayed in green type on your screen) is called</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>a comment. Comments are explanatory notes included in program code following a single</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>quotation mark (‘). Programmers use comments to describe how important statements work</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>in a program. These notes aren’t processed by Visual Basic when the program runs; they exist</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>only to document what the program does. You’ll want to use comments often when you</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>write Visual Basic programs to leave an easy-to-understand record of what you’re doing.</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>The next three lines handle the random number computations. Does this concept sound</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>strange? You can actually make Visual Basic generate unpredictable numbers within specific</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>guidelines—in other words, you can create random numbers for lottery contests, dice</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>games, or other statistical patterns. The Rnd function in each line creates a random number</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>between</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>0 and 1 (a number with a decimal point and several decimal places), and the Int</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>function returns the integer portion of the result of multiplying the random number by 10.</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>This computation</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>creates random numbers between 0 and 9 in the program—just what you</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>need for this particular slot machine application.</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>Label1.Text = CStr(Int(Rnd() * 10)) ' pick numbers</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>You then need to jump through a little hoop in your code. You need to copy these random</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>numbers</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>into the three label boxes on the form, but first the numbers need to be converted</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>to</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>text with the CStr (convert to string) function. Notice how CStr, Int, and Rnd are all connected</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>in</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>the program statement—they work collectively to produce a result like a mathematical</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>formula.</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>After the computation and conversion, the values are assigned to the Text properties of the</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>first three labels on the form, and the assignment causes the numbers</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>to be displayed in bold,</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>24-point, Times New Roman font in the three number labels.</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>The last group of statements in the program checks whether any of the random numbers is 7.</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>If one or more of them is, the program displays the graphical depiction of a payout, and a</i></div> <div class="separator" style="clear: both; text-align: center;"> <i></i></div> <div class="separator" style="clear: both; text-align: center;"> <i>beep announces the winnings.</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>' if any number is 7 display picture and beep</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>If (Label1.Text = "7") Or (Label2.Text = "7") _</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>Or (Label3.Text = "7") Then</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>PictureBox1.Visible = True</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>Beep()</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>End If</i></div> <div class="separator" style="clear: both; text-align: center;"> <i>Each time the user clicks the Spin button, the Button1_Click procedure is executed, or called,</i></div> <div class="separator" style="clear: both; text-align: center;"> <i></i></div> <div class="separator" style="clear: both; text-align: center;"> <i>and the program statements in the procedure are run again.</i></div> </div>

Learn about Microsoft Visual Basic 2010 Writing Your First Program Step by Step

Writing Your First Program After completing this chapter, you will be able to:  Create the user interface for a new program. Set ...

Read more »