Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Coding an Interface
The graphical interface for your Picture Viewer program is now complete, so click the pushpin in the title bar of the toolbox to close it. Now, you have to write code for the program to be capable of performing actions. Visual Basic is an event-driven language, which means that code is executed in response to events. These events may come from users, such as a user clicking a button, or from Windows itself (see Hour 4, "Understand Events," for a complete explanation of events). Currently, your application looks nice but it won't do a darn thing. The user can click the Select Picture button, for example, until the cows come home, but nothing will happen because you haven't told the program what to do when the user clicks the button.
You're going to write code to accomplish two tasks. First, you're going to write code that lets the user browse his or her hard drives to locate and select a picture file and then display the file in the picture box (this sounds a lot harder than it is). Second, you're going to 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're going to write will allow the user to browse his or her hard drives and select a file and then show the selected picture in the PictureBox control. This code will execute when the user clicks the Select Picture button; therefore, it's added to the Click event of that button (you'll learn all about events in later hours). 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 a button is its most common purpose. Double-click the Select Picture button now to access its Click event in the code window (see Figure 1.10).
){kind=link}
Figure 1.10 You will write all 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 is fired. The cursor is already placed within the code procedure, so all you have to do is add code. By the time you're done with this book, you'll be madly clicking 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 very important that you get in the habit of commenting your code, so the first line you're going to enter is a comment. Beginning a statement with an apostrophe designates the 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.
NOTE
For more information on creating good comments, see Hour 16, "Debugging Your Code."
' 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. You'll learn all about methods in Hour 3. For now, think of a method as a mechanism to make a control take action. 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 we are then comparing to a predefined result (DialogResult.OK). Don't worry too much about what is happening here, because you'll be learning the details of this in later hours. In a nutshell, the ShowDialog method is called to let a user browse for a file, and if the user selects a file, more code gets executed. Of course, there is 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:
If ofdselectpicture.ShowDialog = DialogResult.OK Then
NOTE
After you enter the statement that begins with If and you press Enter, Visual Basic automatically creates the End If statement for you. If you type in End If, you'll wind up with two End If statements and your code won't run. If this happens to you, delete one of the statements. You'll learn all about If statements in Hour 14, "Making Decisions in Visual Basic Code."
Time for another comment. Enter this statement and remember to press Enter at the end of each code line.
' Load the picture into the picture box.
TIP
Don't worry about indenting the code by pressing the Tab key or using spaces. Visual Basic.NET automatically indents code for you.
You're now going to enter one last line of code. This statement, which appears within the If construct, is the line of code that actually displays the picture in the picture box. (If you're itching to know more about graphics, take a look at Hour 10, "Drawing and Printing on a Form or PictureBox.")
Enter the following statement:
picshowpicture.Image = Image.FromFile(ofdselectpicture.filename)
In addition to displaying the selected picture, your program is also going to display the path and filename of the picture in the title bar. When you first created the form, you changed the Text property of the form using the Properties window. To create dynamic applications, properties need to be constantly adjusted at runtime, and this is done using code. Enter the following two statements:
' 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.11.
){kind=link}
Figure 1.11 Make sure your code exactly matches the code shown here.
Terminating a Program Using Code
The last bit of code you'll write will terminate the application when the user clicks the Quit button. To do this, you'll need to access the Click event handler of the btnQuit button. At the top of the code window are two tabs. The current tab has the text fclsViewer.vb. Next to this is a tab that contains the text fclsViewer.vb [Design]. Click this tab now to switch from Code view to the form designer. If you receive an error when you click the tab, the code you entered is incorrect and you need to edit it to make it the same as I've presented it. After the form designer is displayed, double-click the Quit button to access its Click event.
Enter the following code in the Quit button's Click event handler:
Me.Close()
NOTE
The Me.Close statement closes the current form. When the last loaded form in a program is closed, the application shuts itself down—completely. As you build more robust applications, you'll probably want to execute all kinds of clean-up routines before terminating your application, but for this example, closing the form is all you need to do.