Computer Science 110. NOTES: module 8

Transcription

1 Computer Science 110 NAME: NOTES: module 8 Introducing Objects As we have seen, when a Visual Basic application runs, it displays a screen that is similar to the Windows-style screens. When we create a new Visual Basic project, the application opens to a Form window. The user interface (what the user sees on the screen when the application runs) is drawn by the programmer in this Form window. The interface may have text boxes. It may also have one or more buttons that the user can click to bring about some action. There are many other elements that can also appear on the interface. Each of these elements is added to the interface by the programmer from the Form window. Elements that are added to a form, including the boxes and buttons already mentioned, are known as objects. The form itself is also an object. Objects are added to the Visual Basic form by using controls that are found in the Toolbox. Objects have characteristics. They can "do things" and they can "respond" to things. When using correct Visual Basic terminology, we use the term property instead of characteristic. The object's methods represent what the object can do and we say that objects respond to events such as mouse clicks. In this module, we will look more closely at forms and objects and then practice setting the properties for some of the more commonly-used objects. The Visual Basic Form The form that appears in the Form window is stippled, or dotted, as shown. You use this grid of dots to align and size objects that you place on the form. To build the interface, you must add objects to the form. This is done by selecting a control from the Toolbox and then drawing the object represented by that control on your form with the mouse. There are two ways to do this: 1. Double click on the control to place the object in the centre of the form, then resize the object and drag it to the desired position. 2. Single click on the control, then drag with the mouse to create the object in the size and location that you want. Once an object has been added to the form, you customize it to whatever specifications you want by setting its properties. The form itself is also an object. It can be adjusted to any size you want and you can also control its placement on the user's screen when the program is run. The placement of the form is adjusted in the Form Layout window.

2 When the program is run, the form becomes a window within the program. It will be the user interface that will provide the means through which the user can interact with the program. All information displayed by the program appears on forms or in the objects that have been placed on the forms. Each form in the program is displayed in a window. Each form will have a name. The form shown on the previous screen is named Form1, by default. This form will be renamed once you begin creating your project. Think of a form as a blank window on which you will draw the parts of the program that the user sees. Controls Toolbox Icon Pointer Name of Control PictureBox Label TextBox Frame CommandButton CheckBox OptionButton ComboBox ListBox HScrollBar VScrollBar Timer

3 DriveListBox DirListBox FileListBox Shape Line Image Data OLE Items in the Toolbox are called controls. All the different objects that you can place on a form are represented by controls in the Toolbox. Note: Microsoft supplies several other controls that are not automatically included in the Toolbox and you can also download or buy additional controls. Controls are used to create objects such as text boxes that can be customized once they have been added to the form. This is done either at design time through the Properties window or at run time through your program code. Each control is represented in the Toolbox by an icon. The table on the right shows the available controls and their corresponding icons. When you hold your mouse pointer over an icon in the Toolbox inside Visual Basic, you can see the name of the control the icon represents. Common Visual Basic Controls The three most basic and commonly-used controls are listed below.

4 Naming Objects

5 As you become more and more experienced with Visual Basic, you will create forms with many objects. Each object must have a name. The programming code refers to each object by its name. Visual Basic assigns a default name to each object when it is first created. Objects are given default names such as Text1, Command1 or Label2. As the programmer, you should change the default names to something more unique. This way, you can avoid mistaking one object for another. The default name can be changed through the Properties window by selecting the Name property for the selected object. Object names that are assigned with the Name property cannot exceed 40 characters in length. The name that you choose for an object should: Clearly identify the purpose of the object. Identify the Toolbox control that created it. For example, if you create a text box to hold an address, it will be given the default name Text1 when it is created. A better name for this object would be: txtaddress The "txt" part of the name refers to the Toolbox control that created it. "Address" identifies the information in the text box. This name can be assigned by you, as the programmer, through the Properties window. 8: Introduction to Visual Basic Objects A good Visual Basic programmer always follows the proper style conventions of the language when naming objects. Proper style convention dictates that each name should begin with a three-letter prefix that identifies the type of control that was used to create the object. For instance, in the example txtaddress: The three-letter prefix txt indicates Address was created with a text box control. Address is the name given to the object by the programmer, clearly indicating the object will hold an address value. The chart illustrates the Toolbox controls and the three-letter prefixes used in naming these controls when proper style conventions are followed. In addition to the objects on this table, form objects and menu objects will also be used frequently in Visual Basic. Form objects should use the prefix frm and menu objects should use the prefix mnu. Object Prefix Example Command button cmd cmdstart Form frm frmpayroll Label lbl lblname Picture box pic picrockstar Text box txt txtaddress Combo box cbo cboenglish Check box chk chkreadonly Data dat datbibliography Directory list box dir dirsource Drive list box drv drvtarget File list box fil filsource Frame fra fralanguage Horizontal scroll bar hsb hsbvolume Image img imgclouds Line lin linunderline List box lst lstperipherals OLE ole oleobject1 Option button opt optfrench

6 Shape shp shpstar Timer tmr tmrrunanimation Vertical scroll bar vsb vsbtemperature Properties Properties are characteristics of objects. Properties can be set for both forms and for the objects that appear on the forms. Properties can be preset from the Properties window at design time or they can be set or altered with Visual Basic code as a program runs. The Properties window lists all the properties that are available for the selected form or object. The Properties window contains the following: A drop-down list box at the top of the window to identify the selected object or from which you may select the desired object Two tabs listing the properties either alphabetically or by category A description pane at the bottom of the window to show the name of the selected property and a brief description of it The image shown above highlights some of the available properties for a command button called Command1. In the image on the previous screen, the default name for the selected object, Command1, is displayed in the Properties window title bar. The type of object, CommandButton, is also displayed. In the list box. Notice that the Alphabetic tab is selected, listing the properties in alphabetical order for a command button object. The properties are listed on the left and the values are listed on the right. Values can be set for a property as follows (for any given property, one or more of these methods may work): Highlight the property in the property list on the left, then edit the value by typing the new value in the Settings box on the right. Double-click the property. Select the property, then click the drop-down arrow or the ellipsis ( ) on the right side of the Settings box and select a value. To select the value, double-click on the value or single-click on the value and press the Enter key. Most properties can be set or altered with Visual Basic code as the program is running instead of being preset from the Properties window. For example, the following line of code would make the command button shown in our image disappear: Let Command1.Visible = False In the upcoming lessons in this unit, we will practice placing objects on a form and setting their properties. We will practice with four of Visual Basic's most commonly-used objects text boxes, command buttons, labels and picture boxes.

7 Practicing With Text Boxes Visual Basic programs consist of three parts: interface, properties and code. In this exercise, we will create an interface with a single form that contains a single object. This object will be a text box. We will then set two properties for this text box. 1. Start the Visual Basic development environment and select File New Project. 2. Display the Toolbox, if it is not already displayed. 3. Double click the TextBox icon in the Toolbox. A rectangle with eight small squares, called sizing handles, will appear on your form, as shown. 4. Click anywhere on the form outside the rectangle to remove the handles. 5. Click on the rectangle to restore the handles. An object showing its handles is said to be active. When an object is active, you can change its size, location and all other properties. 6. Move the mouse arrow to the handle in the centre of the right side of the text box. The pointer changes to a double arrow. Hold down the left mouse button and move the mouse to the right. The text box is stretched to the right. If you grab the text box by one of the other handles and drag, the text box will stretch in another direction. Handles can also be used to make the text box smaller. 7. Make sure the text box is active and move the mouse pointer to any part of the text box that is not a handle. Hold down the left mouse button and move the mouse. This allows you to drag the text box to a new location. 8. Select the text box and press the delete key, Del, to remove the text box from the form. 9. Click the TextBox icon in the Toolbox. Move the mouse pointer to any place on the form. When positioned over the form, the mouse pointer becomes a crosshair. Hold down the left mouse button and move the mouse on a diagonal path to draw a rectangle. Release the mouse button to display an active text box. You can now alter the size and location of the text box as in steps 6 and Click the Properties window icon on the toolbar to display the Properties window, as shown. 11. The title bar of the Properties window reads Properties-Text1. Text1 is the current name of the text box. Select the Alphabetic tab, if it is not already selected. The column on the left displays a list of the different properties that can be set for the text box. The column on the right shows the current setting for the selected property. We will work with two different properties in this exercise. 12. Select the Text property as shown in the image above. The Text property determines the words that will appear in the text box. At the moment, the words are Text Double click the Text property in the left-hand column. Notice that Text1 in the right-hand column is now selected. 14. Type your first name. As you type, your name replaces Text1 in both the text box and in the right-hand column Settings box. 15. Click at the beginning of your name in the Settings box and add a title such as Mr., Ms. or The Honourable to your name. 16. Double click the ForeColor property. A drop-down arrow appears in the Settings box. Click the drop-down arrow and select the Palette tab as shown. 17. Select a colour. The ForeColor property allows you to set the colour of the text. 18. Double click the Font property. The Font dialogue box is displayed, as shown. 19. Set the Font to Comic Sans MS, the Font style to Bold Italic and the point Size to 14. Resize the text box so that the complete name is showing. 20. Now we will run our codeless program. On the menu bar, select Run Start. Notice that when the program runs, it displays the form we have created. Notice that the dots have disappeared from the form, as shown. 21. Click in the text box at the end of your first name. Press the space bar and then type your last name followed by the phrase, "loves to program with Visual Basic!" Notice that the words scroll to the left as you type.

8 22. Press the Home key to return to the beginning of the text. Click the Close button on the form to close the program. 23. Activate the text box (by clicking it,) display the Properties window, double-click the MultiLine property and change the setting to True, as shown. 24. Resize the text box so that it is approximately 4 cm wide by 2 cm high. 25. Run the program and repeat step 21. Notice that now the words wrap around when the end of the text box is reached, as shown. 26. Stop the program. On the Standard toolbar, click the Save Project button to open the Save File As dialogue box, as shown. 27. Visual Basic will create two files to store a program. The first file will have the extension.frm. In the Save in box, navigate to the Practice folder. In the File name box, type MyTextBox. 28. In the Save as type box, notice in the image to the right that the file will be given the extension.frm, which means this will be saved as a form in the project. Click Save. 29. The Save Project As dialogue box opens. 30. The Save in box will already show the folder called Practice. In the File name box, type MyTextBox, as shown. 31. The second file that will be saved is the project file. Visual Basic refers to programs as projects. Notice that the project will be saved with the extension.vbp, or visual basic project. Click Save. 32. Add two more text boxes to your form so that you have a total of three text boxes. 33. Run the program. Notice that the cursor is in the first text box, as shown. We say that the text box that contains the cursor has the focus. Any text that you type will be displayed in the text box that has the focus. 34. Press Tab once. This changes the focus to Text2. When you type, characters will appear in this text box. 35. Continue pressing the Tab key. The focus cycles through the text boxes. Stop the program. 36. Close Visual Basic without saving the changes. Practicing With Command Buttons Visual Basic programs consist of three parts: interface, properties and code. In this exercise, we will create an interface with a single form that contains a single object. This object will be a command button. We will then set two properties for this command button.

9 1. Open the Visual Basic development environment and start a new project. 2. Display the Toolbox. Double click the CommandButton icon in the Toolbox to place a command button in the centre of the form, as shown. 3. Display the Properties window and double click the Caption property. Type " Please push me!" in the Settings column, as shown. 4. This phrase is a bit too long to fit on the command button. Click the command button to make it active. Drag the handles to make it larger so that the phrase fits on one line. 5. Run the program. Click the command button. Notice that the button appears to move in and out but nothing happens. In an upcoming lesson, we will learn to write the code to make a command button do something when clicked. 6. End the program. Activate the command button. Double-click the Caption property and type an ampersand (&) before the first letter, P. Notice that the ampersand does not show on the button. However, the letter following the ampersand is now underlined, as shown. The letter P is referred to as the access key for the command button. Pressing Alt + P when the program is running has the same affect as pressing the command button. 7. End the program and close Visual Basic without saving. 8. Practicing With Labels Visual Basic programs consist of three parts: interface, properties and code. In this exercise, we will create an interface with a single form that contains a single object. This object will be a label. We will then set two properties for this label. 1. Open the Visual Basic development environment and start a new project. 2. Double click the Label icon to place a label in the centre of the form, as shown. 3. Display the Properties window and double click the Caption property. Type "Phone Number." A label such as this would be placed next to a text box into which the user would enter a phone number. 4. Activate the label and decrease its size, still keeping both words on the same line, as shown.

10 5. Make the label narrower until the words occupy two lines. 6. On the Properties window, double-click the Alignment property. Click the drop-down arrow and select 2- Center. The label will be centred. 7. Run the program. Nothing happens, even if you click on the label. Labels just sit there. The user cannot change what the label displays unless you write the code that will allow the user to make the change. 8. End the program and close Visual Basic without saving. Practicing With Picture Boxes Visual Basic programs consist of three parts: interface, properties and code. In this exercise, we will create an interface with a single form that contains a single object. This object will be a picture box. We will then set two properties for this picture box. Before you begin this next exercise, save MegAByteImage (from weebly site). You will need to use this image in the following exercise. After you have saved the image, you should: 1. Open Visual Basic and start a new project. 2. Display the Toolbox. Double-click on the PictureBox icon to place a picture box in the centre of the form. 3. Display the Properties window. Double-click the Picture property. This will display an ellipsis ( ) in the Settings column. Click the ellipsis to open the Load Picture dialogue box, as shown. 4. In the Look in box, navigate to your My Documents/My Pictures folder where you downloaded the image at the beginning of the lesson. Select the image called MegAByteImage and click Open. 5. The image appears inside the picture box. Resize your picture box to fit the image as shown. 6. Close Visual Basic without saving your project.