Starting the Project: Design in Visual Basic 6
- Defining the Project Used Throughout the Book
- Project Requirements
- Creating a Visual Basic Project from Scratch
- Creating the Login Form
- Running the Login Form
- Next Steps
In this chapter
- Defining the Project Used Throughout the Book
- Project Requirements
- Creating a Visual Basic Project from Scratch
- Creating the Login Form
- Running the Login Form
In Chapter 1, "Introduction to Visual Basic," you toured Visual Basic to familiarize yourself with the development environment. In Chapter 2, "Brief Language Overview," you learned the Visual Basic language. Armed with this knowledge, you are ready to start the project that you will build on throughout the rest of the book. By working toward building an application using Visual Basic, you can learn Visual Basic in the context of a real coding situation. Like any successful software project, let's start by understanding the requirements and formulating a design.
Defining the Project Used Throughout the Book
The best approach to designing a software application is to first understand what the requirements are. Do this by interviewing some representatives of the targeted user base or by collaborating with someone with domain knowledge of the business problem. By domain knowledge, we mean someone that understands the business and the expected benefits that would be provided by the software application after it is built.
Because you are now reading a book about Visual Basic and not a book on software requirements and analysis, we do not expect you to go through the process of collecting requirements. To get to the coding part as quickly as possible, we are going to provide some basic requirements for the project. The requirements we came up with are intended to spawn the development of an application that exercises most of the features of Visual Basic. This is a daunting task considering the breadth of features provided by Visual Basic. The point we want to make is that these requirements might not exactly match the real-world requirements of a similar application; that is not the purpose of the requirements presented in this chapter. The purpose is to have a base set of requirements (no matter what they are) so that you can start designing and developing an application.
In an effort to come up with an interesting application that you would enjoy working with, we chose to build an application that supports purchasing products from a store. This project is obviously written in Visual Basic but has the same type of functionality that you would see when browsing or ordering products over the Internet. These types of applications are intended to provide access to the warehouse of product information as well as provide the capability to purchase products.
It is possible that an application of this nature would require many different types of information with which to deal. To keep our application manageable we will be focusing on the following types of information:
- Store information
The overall application is a virtual store and requires the capability to minimally specify the store name and possible location. Of course, you also need products to sell. You must add products to the store and specify the prices. It also would be nice to see what the product looks like. In addition, you could really use some customers, and it would be great if they bought some products that result in purchase orders. So, now you have a basic idea of what the project is! Now, let's define some requirements.
The application needs the capability to specify store information, maintain products, add and maintain customer information, and enable customers to create orders. To be more specific, here is a list of requirements we came up with. The capability to
- Edit store information
- Add products
- Edit products
- Browse products
- Add customers
- Edit customers
- Browse customers
- Create orders
- Browse orders
This requirements list should get you thinking in terms of what it is we are going to build (not what we think a real application of this type is required to do because that would be a larger list). Along the way, we will be adding more features to the project that do more than meet these requirements.
These requirements fall into two categories:
- What are the things the store worker needs to do?
- What are the things the customer needs to do?
You do not want these two categories to be part of the same user interface because you do not want to let customers change the prices of products before they buy them--you would quickly be out of business. So, you are going to build two user interfaces as part of the overall application. You will call the user interfaces Administrative Services and Customer Services. Administrative Services contains all necessary functionality for the store worker to do her job. The Customer Services provides the necessary functionality for customers to purchase products.
Based on this minimal set of requirements, you must build the Administrative Services user interface to support the following:
- Maintain products
- Maintain customers
- View all orders
- Edit store information
- Create reports
Obviously, you need products to sell. The user of your application must browse the products that are sold by the store. The user may be someone wanting to buy products or a worker who is performing inventory. A worker would need the capability to edit things like the price and quantity of a product. Because some products become discontinued, the worker needs to be able to delete products.
For the purposes of your store, you want to track the customers and enable them to register with your store. The customer can create a profile to save her address and credit card information. This information is used for any orders that are created within the application by the customer.
View All Orders
The store owner wants to view all the orders currently in the application. The owner might need to see all currently open orders, orders that have not had credit approval, and orders that have been shipped.
Edit Store Information
The store information includes the name and address of the store. This information is used to personalize the application, reports, and orders.
The store owner wants an inventory report and an order summary report. Any remaining reports are left to your discretion.
The customer who purchases products from the store uses the Customer Services user interface. This is the interface she would use to browse products and create orders. In support of this, the customer must be able to do the following:
Add customer information
- Edit customer information
- View order status
- Add products to an order
- Finalize order and check out
Add Customer Information
Anyone is allowed to register as a new customer. She chooses a customer user ID and password to create her customer profile. The customer stores her billing and shipping address as well as her credit card information within the profile.
Edit Customer Information
A registered customer must be able to edit her profile at any time.
View Order Status
A registered customer might want to check on an order status to verify a purchase and the order's shipment. Occasionally, a customer might want to cancel an order.
Anyone must be able to browse the products before choosing to become a customer or before placing an order.
Add Products to an Order
While viewing the products, a registered customer must be able to collect a list of products that will eventually become part of one order. By choosing to add to a shopping cart, these products are added to the list of products for purchase.
Finalize Order and Check Out
After adding one or many products to a shopping cart, the user must be able to finalize the order.
We are going to stop here with the requirements definition so that we don't get too deep into analysis paralysis. This is the state where software projects don't move forward because of some techno-religious belief that everything must be defined before you write some code. If you feel you are in this situation, build something to validate the requirements you have defined. You can always revisit the requirements and design later. You will not be able to revisit anything if you have not developed anything. Treat software development as a continuous cycle.
The intention is to familiarize you with what we are going to build. We do not need to cover all the details of what we are going to build because we will explore these details as we build the application. Throughout this book, we are going to add functionality as we see fit for the purpose of maximizing our use of Visual Basic in this learning process.
Creating a Visual Basic Project from Scratch
Open Visual Basic and, at the initial dialog box, choose Standard EXE on the New tab to create a new standard application project. The Standard EXE option should be highlighted by default. If it is not, click it. After the option is selected, click the Open button in the dialog box to create the new project. After you have created a new Standard EXE project, you are presented with a workspace that looks like the one in Figure 3.1.
Figure 3.1 A new Visual Basic application workspace.
Notice that new Visual Basic projects start with a default name of Project1. The project also contains one form that has a default name of Form1. The first thing you want to do is change the name of the project and the form to a more descriptive name, and then save the project.
Click the element named Project1 at the top of the tree in the Project Explorer. The content of the Properties window (just below the Project Explorer window) now contains the properties of the project. The Properties window always displays the properties of whatever is selected in the Project Explorer window. Double-click the Project1 text in Name property within the Properties window. This selects the entire text. Now type a new name for the project. Enter VBFS for the project name. Figure 3.2 shows the Properties window containing the new name of the project.
Project Name property
Creating the Login Form
The initial form you are going to develop is the login form. This form is used to get the user's name and password before starting the application. Let's start this form by renaming it. Just like you did for the project, click the Form1 form in the Project Explorer. Again, the contents of the Properties window reflect the selection in the Project Explorer. This time you will notice many more properties for forms as opposed to projects. You can view the properties using the scrollbar to the right of the Properties window. Also, clicking the value of a particular property puts you into an edit mode for that property. We will explore the form properties later; for now, double-click the Form1 text in the Name property within the Properties window. Now type frmLoginDlg as the new name.
Standard Visual Basic naming conventions include prepending frm to form names to distinguish them from other objects within the code. This is not a requirement of the Visual Basic language. It is just good practice for you to follow naming conventions to make your code more understandable to yourself and others. As you read through the code it really helps to be able to identify the datatype of a variable when naming conventions are followed. Other people will be able to read and understand your code more readily, and it will help you when you are debugging your application.
Before adding any controls to the form, let's change the form title to give it a friendlier name for the user. Change the form title by clicking the Caption property, and then setting the text to Login to VBFS. Also, change the form icon by clicking the value of the Icon property. Then, click the button with the ellipses in it. This causes a Load Icon dialog box to come up, which enables you to choose an icon for the form. Choose any icon you want, or cancel the dialog box.
Do you notice all the dots on the form (refer to Figure 3.2)? The dots are the visual representation of the alignment grid . This grid is used to align controls on a form. When you place controls on a form, they will automatically line up to the nearest horizontal and vertical line designated by the dots. This simplifies lining up your controls because they snap to the grid. There might come a time when you don't want the controls to align to the grid. To disable this, you must turn off the grid so you can get a finer grain of alignment. To turn off the grid, Choose Tools, and then Options. Click the General tab to view the grid options (see Figure 3.3). You can turn on and off the grid display by clicking the Show Grid check box. Also, you can turn on and off the automatic alignment of controls by clicking the Align Controls to Grid check box.
Show Grid check box
Align Controls to Grid check box
Figure 3.3 The Visual Basic Options dialog box.
The next step is to add support to the form for gathering the information you need--specifically, the user's name and password. You are going to add support for this data gathering by adding controls to the form. Controls are graphical components that have specific visual appearances and behavior designed for gathering data from the user or displaying data to the user. You are going to use the Toolbox to add controls to your form. Place the mouse cursor over the icons on the Toolbox and wait for a second until a text message appears. The text is the name of the control that the mouse cursor is over.
Click the Label control to select which control to add to the form. Now go to the form to add the control. You do this by clicking and holding down the mouse button on the position to which you want to add the label. Then drag the mouse cursor slightly to the right. As you move the mouse cursor, a rectangle shape appears on the form. The top left of the rectangle is where you clicked on the form. The bottom right of the rectangle is the current mouse cursor position. At this point, you are choosing the size of the label. When the size of the label looks good to you, release the mouse button. That's it, you just added a control to a form. The process is the same for any additional controls you need to add to the form. If the size or position is not exactly as you want, you can always use the Properties window to adjust it (or use the mouse to move and resize it). To move a control on a form, click and hold down the mouse button, move the mouse cursor to the desired location, and then release the mouse button. To resize the control, move the mouse to the lower-right corner of the control. When you see the mouse cursor change, click the mouse and hold down the mouse button. Then, as you move the mouse, you will see the control change size. When the desired size is reached, release the mouse button. Figure 3.4 shows the label added to the form.
Figure 3.4 Adding a label to a form.
There is no need to change the name of the label because you do not need to refer to it anywhere in code. You do need to change the Caption property, however. Change it to &User id: by clicking the Caption property and editing the text.
Adding a Label to a Form
Let's add a second label just below the first label and give it a caption of &Password:. Again, there is no reason to change the name of the second label.
NOTE: The & in the Caption property is used to define an access key for the label. By pressing the Alt key and the access key simultaneously, the focus is set to the control on the form that follows the label in the tab order.
If you are like me, the two labels you just added are not the same size and do not line up with one another. Fortunately, Visual Basic provides some help in fixing this. Press and hold the left Ctrl key to select both labels on the form. With the left Ctrl key pressed, click each label. Using both the Ctrl key and the mouse enables you to select many controls at once. Let's make sure both labels are the same size. With both labels selected, select the Format main menu. There are several options on this menu for sizing and positioning controls. If you click the Make Same Size menu item you will see a submenu appear to the right. This submenu contains options for making the selected controls the same height, same width, or both the same height and width. This is shown in Figure 3.5. Select the Both option.
Figure 3.5 Making controls the same size.
It is important to note that the order in which you select the controls affects the behavior of the menu items on the Format menu. The last control you select is the main control used for the command. If you have three controls that are all different sizes on a form and you want to make them the same size, you would select each control (simultaneously using the Ctrl key and the left mouse click), and then select the Format, Make Same Size, Both menu item. The resulting size of all the controls is based on the size of the last control selected.
Now that the controls are the same size, let's make sure they are lined up the same. With both labels selected, select the Format main menu again. Select the Align menu item to bring up the submenu to the right of it (see Figure 3.6). This submenu has many options for aligning controls relative to each other. Select the Lefts option so that the left sides of the controls line up. Each alignment option is described in Table 3.1.
Figure 3.6 Aligning controls.
Table 3.1 Control Alignment Options
Horizontally aligns left sides of controls
Horizontally aligns centers of controls
Horizontally aligns right sides of controls
Vertically aligns top sides of controls
Vertically aligns middles of controls
Vertically aligns bottom sides of controls
Performs Lefts and Tops alignment
If you have Align to Grid turned off (which you should not at this point), you can create controls at any size. You are not confined to the alignment grid for sizing. If you create a control under this scenario and you want to size the control to the grid, you can quickly do this by selecting the control then selecting the Format menu then the Size To Grid menu item. This is not an issue for you right now because you have Align to Grid on.
An issue that you might encounter is spacing between controls. On the form you have built so far, if there is too much or too little space between the labels, you could manually move them. Or, you could use the Horizontal Spacing and Vertical Spacing on the Format menu to adjust the spacing between controls. There are four options for each of these: Make Equal, Increase, Decrease, and Remove (see Figure 3.7).
NOTE: The Make Equal option on the Horizontal Spacing and Vertical Spacing submenus requires at least three controls selected. The remaining options on these submenus require at least two controls selected.
Figure 3.7 The horizontal spacing and vertical spacing menus.
We now need to add the text boxes to the form for the user to enter the user name and password. Select the text box from the Toolbox, and then add it to the form to the right of the first label. Adding a text box is identical to the process we used in adding labels to the form. Change the name of the text box to txtUserId. The standard naming conventions for text boxes in Visual Basic includes prepending the name of the text box with txt. This enables you to quickly identify text box variables when reading your code. Select the text box from the Toolbox then add another one to the right of the second label. Change the name of the text box to txtPassword. You now have two text boxes into which the user can enter data.
Notice that the two text boxes contain text that defaults to the actual name of the control when it was added to the form. The first text box added to a form contains Text1, and the second text box contains Text2. In each text box, the text you see in the control is the value of the Text property of the text box. Let's clear out the contents of these TextBox controls by clicking the Text property on each of the TextBox controls and clearing the value. To clear the property value, double-click the value so that it is highlighted. After it is highlighted, use the Delete key to remove the value.
The user must be able to cancel the login form, as well as start the login process after the user data has been entered. Add a command button to the right of the txtUserId text box and name it cmdLogin. You add command buttons to a form by selecting the CommandButton control on the Toolbox and placing it on the form in the same manner we added labels and text boxes. Also, set the caption to &Login. Add another command button to the right of the txtPassword text box and name it cmdCancel. Set the caption to &Cancel.
At this point, you have all your controls on the form. You can lay out the controls on the form like you want by moving and resizing them. You can also resize the form however you like. Click the form to select it, and then put the mouse cursor at the bottom right of the form until you see the cursor change. After this happens, click and hold, and you can resize the form as you desire. This process is identical for resizing controls on forms.
After all controls have been laid out and the form is the desired size, you can lock the controls to avoid accidentally moving them when you click on them. To lock the controls, select the controls individually by pressing and holding the left-Ctrl key and then use the mouse to click on each of the controls. Because you want to lock all the controls, you could also use Ctrl+A to select everything on the form. After the controls are selected, select the Format menu then select the Lock Controls menu item (see Figure 3.8). Notice the picture of the lock on the menu. The picture of the lock changes to appear as though it is depressed into the menu. This changed appearance of the lock denotes a locked control.
Figure 3.8 Locking controls.
Setting Tab Stops on a Form
One important aspect of developing forms is setting the tab stops. Tab stops are used to define the order in which controls get focus if the user is using a keyboard. If the user is using a keyboard and he wants to select the next field on a form to enter data, he would press the Tab key (or Shift+Tab to move backward). This movement of the focus is dependent on the order of the tab stops.
The tab order is controlled by the two properties TabIndex and TabStop. The TabIndex property specifies the position in the list of controls. The TabStop property contains the value True or False. If the TabStop property is set to True on a control, this means the focus will stop here as the user cycles through the tab stops. If the value is False, focus will not stop on the control. On your logon screen you want the user to be able to use the Tab key to cycle through the username, password, Login button, and Cancel button. Use the values in Table 3.2 to set the tab stops.
Table 3.2 Login Form Tab Stops
Setting Shortcut Keys
Another important aspect of developing a user interface is setting shortcut keys to activate the most important controls on each form. For example, the cmdLogin command button has a shortcut key Alt+L. The shortcut keys are also known as mnemonic keys, or mnemonics. To activate a TextBox control, you would place a label in front of it and add a mnemonic to the label, then set the label's TabIndex property to be one less than the same property of the text box. For example, Label1 in Table 3.2 has TabIndex 0, while the text box following it has TabIndex 1. Because the label cannot be a tab stop, when the user presses the mnemonic the system will activate the next tab stop in order. In this case, it will activate the text box, which is exactly the result you wanted to achieve. The same procedure can be used to activate lists and combo boxes, and in general any control that cannot have a mnemonic (that is, does not have a Caption property).
Running the Login Form
Figure 3.9 shows the final version of frmLoginDlg.
Figure 3.9 The final frmLoginDlg.
You are now ready to run the project for the first time. It is a good idea to save the project at this point. Click the Run menu and select the Start menu item (or press F5) to run the project. The output should look like Figure 3.10.
In this chapter we defined the project that you are going to build throughout the rest of the book. The requirements on which we base our design have been identified.
Next you started your project and learned the first notions of user interface development in Visual Basic. Among the concepts introduced were forms and controls and some of their properties and methods. You jumped into developing the first form as part of your application to implement the login functionality. At the end of the chapter, you ran your first application. Chapter 4, "Validating a User Through a Login Form," involves adding code to extend the functionality of the login form. This includes adding a module and global function and exploring some new Visual Basic statements.