This chapter is from the book
This chapter is from the book
This chapter is from the book
Writing the Code Behind an Interface
You have to write code for the program to be capable of performing tasks and responding to user interaction. Visual Basic is an event-driven language, which means that code is executed in response to events. These events might come from users, such as a user clicking a button and triggering its Click event, or from Windows itself (see Hour 4, "Understanding Events," for a complete explanation of events). Currently, your application looks nice, but it won't do anything. Users can click the Select Picture button until they can file for disability with carpel tunnel syndrome, but nothing will happen, because you haven't told the program what to do when the user clicks the button. You can see this for yourself now by pressing F5 to run the project. Feel free to click the buttons, but they don't do anything. When you're finished, close the window you created to return to Design mode.
You'll write code to accomplish two tasks. First, you'll write code that lets users browse their hard drives to locate and select a picture file and then display it in the picture box (this sounds a lot harder than it is). Second, you'll add code to the Quit button that shuts down the program when the user clicks the button.
Letting a User Browse for a File
The first bit of code you'll write enables users to browse their hard drives, select a picture file, and then see the selected picture in the PictureBox control. This code executes when the user clicks the Select Picture button; therefore, it's added to the Click event of that button.
When you double-click a control on a form in Design view, the default event for that control is displayed in a code window. The default event for a Button control is its Click event, which makes sense, because clicking is the most common action a user performs with a button. Double-click the Select Picture button now to access its Click event in the code window (see Figure 1.12).
)
Figure 1.12 You'll write all your code in a window such as this.
When you access an event, Visual Basic builds an event handler, which is essentially a template procedure in which you add the code that executes when the event occurs.
The cursor is already placed within the code procedure, so all you have to do is add code. Although this may seem daunting, by the time you're finished with this book, you'll be madly clicking and clacking away as you write your own code to make your applications do exactly what you want them to do—well, most of the time. For now, just enter the code as I present it here.
It's important that you get in the habit of commenting your code, so the first statement you'll enter is a comment. Beginning a statement with an apostrophe (') designates that statement as a comment. The compiler won't do anything with the statement, so you can enter whatever text you want after the apostrophe. Type the following statement exactly as it appears, and press the Enter key at the end of the line:
' Show the open file dialog box.
The next statement you'll enter triggers a method of the OpenFileDialog control that you added to the form. Think of a method as a mechanism to make a control do something. The ShowDialog() method tells the control to show its Open dialog box and let the user select a file. The ShowDialog() method returns a value that indicates its success or failure, which you'll then compare to a predefined result (DialogResult.OK). Don't worry too much about what's happening here; you'll be learning the details of all this in later hours. The sole purpose of this hour is to get your feet wet. In a nutshell, the ShowDialog() method is invoked to let a user browse for a file. If the user selects a file, more code is executed. Of course, there's a lot more to using the OpenFileDialog control than I present in this basic example, but this simple statement gets the job done. Enter the following statement and press Enter to commit the code (don't worry about capitalization; Visual Basic will fix the case for you):
If ofdSelectpicture.ShowDialog = DialogResult.OK Then
It's time for another comment. The cursor is currently between the statement that starts with If and the End If statement. Leave the cursor there and type the following statement, remembering to press Enter at the end of the line:
' Load the picture into the picture box.
This next statement, which appears within the If construct (between the If and End If statements), is the line of code that actually displays the picture in the picture box.
Enter the following statement:
picShowPicture.Image = Image.FromFile(ofdSelectPicture.Filename)
In addition to displaying the selected picture, your program also displays the path and filename of the picture in the title bar. When you first created the form, you changed its Text property in the Properties window. To create dynamic applications, properties need to be constantly adjusted at runtime, and you do this using code. Insert the following two statements, pressing Enter at the end of each line:
' Show the name of the file in the form's caption.
Me.Text = "Picture Viewer(" & ofdselectpicture.FileName & ")"
After you've entered all the code, your editor should look like that shown in Figure 1.13.
)
Figure 1.13 Make sure that your code exactly matches the code shown here.
Terminating a Program Using Code
The last bit of code you'll write terminates the application when the user clicks the Quit button. To do this, you need to access the Click event handler of the btnQuit button. At the top of the code window are two tabs. The current tab says ViewerForm.vb*. This tab contains the code window for the form that has the filename ViewerForm.vb. Next to this is a tab that says ViewerForm.vb [Design]*. Click this tab to switch from Code view to the form designer. If you receive an error when you click the tab, the code you entered contains an error, and you need to edit it to make it the same as shown in Figure 1.13. After the form designer appears, double-click the Quit button to access its Click event.
Enter the following code in the Quit button's Click event handler; press Enter at the end of each statement:
' Close the window and exit the application Me.Close()