BACK TO THE JOKE MACHINE

OK, let's turn the focus of this chapter back to the development of its main project, the Joke Machine game. Through the development of this game, you will learn the basic steps involved in developing a Windows application. As you go through the steps involved in creating your first Visual Basic application, try and focus on the overall process that is involved and don't get caught up in the details too much, which will be explained in later chapters.

Designing the Game

The Joke Machine game's design is very straightforward, involving basic, yet fundamental Windows programming techniques. The game begins by displaying its GUI. It then waits for the user to click on a button before displaying a joke. The game continues to run, allowing the user to click either of its buttons as many times as desired. Like other Windows applications, the game can be minimized or maximized and continues to run until the user clicks on the close button in the upper right-hand corner of the window.

As you will see as you build the Joke Machine game, Visual Basic applications are typically created in five steps, as outlined below.

1. Create a new Visual Basic project.

2. Create the GUI.

3. Modify form and control properties.

4. Add program code.

5. Test the application's execution.

Each of these steps will be demonstrated in detail in the sections that follow.

Step 1: Creating a New Visual Basic Project

So let's get started. If you have not already done so, start up Visual Basic 2005 Express now. Next, create a new Visual Basic project by clicking on File and then selecting New Project. The New Project dialog appears as shown in Figure 1.6.

Figure 1.6: Select the Windows Application template to create a new Windows application.

The New Project dialog displays a collection of templates for you to choose from. Templates assist you in developing new applications by providing an initial starting point from which you can begin creating a particular type of application. Because the Joke Machine will run as a graphical Windows desktop application, select windows Application. If you click on the OK button at this point, a new application named WindowsApplication1 will be created. Instead of this name, type "Joke Machine" as the name of your new application in the Name field located at the bottom of the New Project window and click on OK.

DEFINITION

A Visual Basic project is a container that is used to store and manage the items that make up your Visual Basic application.

Trick 

By default, Visual Basic stores your new applications in their own folder located in C:\Documents and Settings\Username\My Documents\Visual Studio\Projects. However, if you wish, you can configure Visual Basic to automatically store them elsewhere by clicking on the Tools menu and selecting the Options submenu. This will open the Options window. From here you can click on Projects and Solutions and set default location where you'd like all your Visual Basic applications to be stored.

IN THE REAL WORLD

Visual Basic 2005 Express allows you to create the following three types of applications:

• Windows Application. A graphical Windows application that runs on the Windows desktop. Examples of this type of application include Microsoft Word, WinZip, and any Windows application that you interact with using a mouse.

• Windows Control Library. A custom-built control that can be added to or referenced from within a Windows application. This type of application is one in which you define your own customized Windows controls for the purposes of adding them to other Windows applications that you'll develop.

• Console Application. A text-based application typically run from the Windows Command Prompt. A console application is one in which the user interacts with the application by running it from the Windows Command Prompt and then typing in commands as directed by the application.

The full version of Visual Basic is capable of creating many additional types of applications. Examples include Web applications, applications for smart devices, and Windows services.

Visual Basic creates a new project for you. In the middle of the IDE, you will see a blank window as shown in Figure 1.7. Within Visual Basic, this window is referred to as a form. You will create the GUI for the Joke Machine by adding controls to this form. Note that by default, Visual Basic names the form Form1. As you'll see in the next chapter, you can change the name of forms to anything you wish.

Figure 1.7: By default, Visual Basic automatically creates a new blank form for new Windows applications.

Trick 

At this point, you now have a fully functional, though not very interesting, Windows application. You can run your application by clicking on the Debug menu and selecting the Start Debugging option. You could also press the F5 key or click on the Start Debugging icon on the Standard Visual Basic toolbar. Once started, the application will begin running. The name of the application's form, Form1, is displayed in the title bar, and Minimize, Maximize, and Close buttons will appear in the upper right-hand corner of the application's window. Click on the Close button to stop your application and return to the Visual Basic IDE.

Step 2: Creating the User Interface

In order to create the interface for the Joke Machine game, you need to add controls, such as buttons and text boxes, to the form. Visual Basic makes controls available to you via the Toolbox window, which by default is displayed on the left-hand side of the IDE.

You can add controls to your form using a number of different techniques. For example, you can drag and drop a control from the Toolbox onto the form, or you can double-click on a control located in the Toolbox and Visual Basic will automatically place a copy of the control onto the form for you, which you can then move and resize.

DEFINITION

A control is a user interface element such as a text box or radio button

The first control that you will add is the TextBox control. To do this, double-click on the TextBox control in the Visual Basic Toolbox. Visual Basic adds the Textbox control to the form assigning it a default name of TextBox1. Next, locate the Multiline property in the first column of the Properties Windows (located by default in the lower left-hand side of the IDE) and change its value to True. This will enable the display of multiple lines of text within the control. Using the mouse, move and resize the TextBox control by clicking and holding on to the small white squares that define its parameter, as shown in Figure 1.8.

Figure 1.8: Adding and resizing a TextBox control on a Visual Basic form.

Now, let's add a descriptive label to the form just above the TextBox1. Start by double-clicking on the Label control located in the Toolbox. Using the mouse, move the control just above the upper left-hand corner of the TextBox1 control. Note that Visual Basic automatically assigned the label a default text string of Label1.

Now let's add the first Button control to the form by double-clicking on the Button control located in the Toolbox. Visual Basic adds the control to the form assigning it a default text string of Button1. Using the mouse, reposition the button beneath the TextBox1 control. Add a second button to the form and reposition it just to the right of the first button. Note that Visual Basic automatically assigned this control a default text display string of Button2. At this point, your game's interface should like the one shown in Figure 1.9.

Figure 1.9: Visual Basic automatically adds descriptive text labels to controls as you add them to a form.

Now, let's pause for a moment and do a test run of your application by clicking on the Debug menu and then selecting Start Debugging. Within a moment, your new application will start. As you can see, it doesn't do much yet. If you click on its buttons, nothing happens. Once you are done looking at it, click on the Close button located in the upper right-hand corner of the game's dialog to close the application and return to Visual Basic's design view.

Step 3: Customizing Control Properties

Now that all of the controls that are needed to build the application interface have been placed on the form, it is time to customize each of the controls to make them look and act like they should. This will be achieved by selecting each control in turn and editing selected properties associated with each individual control.

Let's begin with the Label1 control. This control needs to be modified so that it displays a text string of "Joke Machine". To do this, click on the Label1 control. Once you have done this, you will notice that the Properties window in the lower right-hand side of the IDE has changed and now displays properties associated with the Label1 control. The name of each property is displayed in the left-hand column and the value assigned to the property is shown in the right-hand column.

Scroll down and select the Text property, which is grouped with other properties under the category of Appearance. As you will see, a text string of Label1 is currently assigned to the Text property of the Label1 control. To replace this string, highlight the currently assigned value and type in the string "Joke Machine" in its place. Now, click back somewhere on Form1 and you'll see that Visual Basic has already updated the text displayed by the Label1 control.

Next, click on the first button control (Button1) that you added to the Form1. It should be located just below the lower-left hand corner of the Textbox1 control. Change the text string stored in its Text property field to "Joke 1". Then click on the second button control (Button2) and change its Text property to "Joke 2".

Step 4: Adding a Little Programming Logic

As I mentioned earlier in the chapter, Visual Basic in an OOP language. Controls like the Button control provide a good example of how OOP works. In order to make these buttons do something when the Joke Machine is run, you'll need to associate or attach some Visual Basic programming statements to them. As you will see, every control that you attach to a Visual Basic form is capable of storing program code alongside the control. You enter this code using the Visual Basic code editor. To enter code for a given object, such as a Button control, you simply double-click on the Button. The IDE will automatically switch from the form designer, where you have just visually assembled the application's interface, to code view, where programming statements associated with selected controls are stored.

To make the Joke Machine work, all that is required is to add two programming statements. The first statement will be assigned to the Button1 control. To prepare to enter this statement, double-click on the Button1 control. The IDE will open the code designer window as shown in Figure 1.10.

Figure 1.10: Visual Basic code statements are attached to controls by keying them in using the code editor.

Trick 

Because the IDE has so many bells and whistles, it is impossible to display every available toolbar and window at the same time. Therefore, Microsoft makes some windows share the same space. If you take a look at the code editor window in Figure 1.10, you see that it is currently sharing space with the Form designer window and the Start Page window. You can switch between these windows by clicking on their associated tabs.

Trick 

You may have noticed that the code editor window shown in Figure 1.10 takes up almost the entire display area of the IDE. I expanded it to make it easier to view and edit programming statements. One way to make more room for the code editor window is to close other windows in the IDE, such as the Toolbox, Solution Explorer, and Properties windows. The problem with this option is that you use these other windows so often that it is just too inconvenient to have to keep opening and closing them all the time. Instead, what I did was to temporarily thumbtack the Toolbox, Solution Explorer, and Properties windows to the side of the IDE. Take a look at the upper right-hand corners of the title bars for each of these three windows and you will see a thumbtack button. Clicking on the thumbtack button tells the IDE to shrink the display of the window down to a tab docked on the side of the IDE where the window is docked. As you can see in Figure 1.10, there is a tab on the far left-hand side of the IDE representing the Toolbox and two tabs on the far right-hand side of the IDE representing the Solution Explorer and Properties windows. When you are ready to view these windows again, just click on their tabs. When you do, the IDE will temporarily display them again. To make these windows remain open, click on the thumbtack button for each window again.

As you can see, Visual Basic has already generated some code for you. I'll explain what this code is in later chapters. For now, just enter the following statement, exactly as shown below. To make the statement that you are supposed to enter stand out, I have highlighted it in bold.

 Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click      TextBox1.Text = "What is black and white and red all over?    " & _      "A sunburned penguin!" End Sub 

Without getting into the technical details at this point of the book, the statement that you just entered assigns a string of text as the Text property value of the TextBox1 control. The text that you are assigning will display in the TextBox1 control when the Button1 control is clicked.

Next, return to the form designer view for Form1 by clicking on the tab labeled Form1.vb [Design]. Then double-click on the Button2 control. As you can see, you are now back in the code editor window, and a pair of new program statements has been added for you. Add the line of code shown below, in bold, inside the two new statements.

 Private Sub Button2_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button2.Click      TextBox1.Text = "What ceases to exist when you say its name?"  & _      "Silence!" End Sub 

Just like with the previous statement, the code that you just added will execute when the Joke Machine is run and the Button2 control is clicked.

Step 5: Testing the Execution of the Joke Machine Application

That's it. The Joke Machine game is complete and ready to run. Press F5 to run it. As long as you didn't make any typos when modifying control properties or entering program code, it should run exactly as shown at the beginning of this chapter. Otherwise, go back and correct your typos and try running your application again.