1 / 49

CHAPTER 3 Program Design and Coding

CHAPTER 3 Program Design and Coding. Instructor: Andy Wu 9/13/07. Review: GUI Design. Visual Studio IDE Form Toolbox (and pushpin) Properties. Review: Visual Studio IDE. Properties. Toolbox. Form. Review: Toolbox. Contains objects (a.k.a. controls) to build GUIs

carys
Télécharger la présentation

CHAPTER 3 Program Design and Coding

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. CHAPTER 3 Program Design and Coding Instructor: Andy Wu 9/13/07

  2. Review: GUI Design • Visual Studio IDE • Form • Toolbox (and pushpin) • Properties

  3. Review: Visual Studio IDE Properties Toolbox Form

  4. Review: Toolbox • Contains objects (a.k.a. controls) to build GUIs • To add an object to a Windows form • Drag and drop • Double-click • Use pushpin to toggle through two views • Docked – Toolbox is visible all the time • Autohide – Toolbox is not visible unless you mouse over the toolbox tab

  5. Review: Windows Form • The canvas for designing the GUI • This shows a textbox being dragged into form

  6. Review: Properties • Left column – Name of property • Right column – Value for property • Important properties: Name, Size • Change object’s name immediately after it was put on the form • Use the conventional prefixes • Resizing is easy – drag the resizing handles

  7. A Few More Properties • BackColor • SizeMode • Visible • Enabled

  8. BackColor Property • This property specifies the background color of an object. • To set BackColor for an object: • Click the object to select it • If necessary, scroll in the Properties window until the BackColor property is displayed, and then click the right column of the BackColor property • Click the BackColor arrow. Then, if necessary, click the Web tab to display the Web tabbed page • Scroll until you find the color you want • Click to select the color

  9. BackColor Property

  10. Locating and Saving an Image from the World Wide Web • Open your Internet browser. Then, enter scsite.com/vb2005/ch3/images in the Address box and press the ENTER key • Locate the StandardRoom.jpg image and then right-click the image • Click “Save Picture As…” in the shortcut menu • Identify the drive and folder where the image will be stored. Enter the image file name, StandardRoom, in the File name text box • Click the Save button in the Save Picture dialog box to save the image in the selected location

  11. Importing the Image into the Program Resources Folder • With Visual Studio 2005 and the Hotel Room Selection Visual Basic program open, select the picStandardRoom PictureBox object by clicking it. Scroll in the PictureBox Properties window until the Image property is visible. Click the Image property name in the left list in the Properties window • Click the Ellipsis button in the right column of the Image property • Click the Import button in the Select Resource dialog box. Then, using the features of the Open dialog box, locate the file you want to import into the program • Click the Open button in the Open dialog box

  12. Importing the Image into the Program Resources Folder • With the StandardRoom file name selected in the Project resource file list, click the OK button in the Select Resource dialog box

  13. Sizing an Image • With the PictureBox object containing the StandardRoom image selected, scroll in the picStandardRoom Properties window until you see the SizeMode property. Click the SizeMode property name in the left column and then click the SizeMode arrow in the right column of the SizeMode property • Available sizing options are: • Normal • StretchImage • AutoSize • CenterImage • Zoom

  14. Sizing an Image

  15. Visible Property • To change the Visible property of an object • Click the object to select it • Scroll in the Properties window until the Visible property is displayed • Click the Visible property name in the left column • Click the Visible arrow in the right column • Depending on your need, click True or False on the list • True – Object will be shown • False – Object won’t be shown

  16. Visible Property

  17. Enabled Property • To change the Enabled property of an object: • Click the object to select it • Scroll in the Properties window until the Enabled property is displayed • Click the Enabled property name in the left column • Click the Enabled arrow in the right column • Depending on your need, select True or False on the list • True – Object won’t be grayed out (dimmed), will be clickable, and will generate events • False – Object will be grayed out (dimmed), won’t be clickable, and won’t generate events

  18. Enabled Property

  19. Running a Program • Point to the Start Debugging button on the Standard toolbar • Click the Start Debugging button on the Standard toolbar

  20. Design Time vs. Run Time • Design time • When the program is being displayed and worked on in the IDE • The values you assign in the Properties window will be used as initial property values objects have when the program starts • Some values of properties (e.g., False for Visible) do not show their effect • You write programming code for processing, but the code is not run • Run time • Once the program starts, it’s in run time • Your programming code may have been written so that the value of object properties can change in response to what user does • When user does something to/with an object, an event is generated • Event handling – Certain portion of your code is run (“called”) when certain events take place

  21. Event-Driven Programming • Each objects can have a number of events related to it • When user interacts with object, events take place, for example • User clicks the “btnChangeColor” button, a “btnChangeColor_Click” event is generated • User types in a word in the txtPassword box, a “txtPassword_TextChanged” event is generated • You can write code for an event • Whenever that event takes place, your code “fires up” • Your code tells the program how to process input and create output • In VB terminology, your code “handles” the event

  22. Coding for An Event

  23. Entering VB Code for Event Handling • With Visual Studio 2005 and the Hotel Room Selection program open and the Form1.vb[Design] tabbed window visible, point to the Standard Room Button object in the Windows Form object • Double-click the Standard Room Button object

  24. Entering Visual Basic Code for Event Handling

  25. Coding for An Event When you worked on the GUI, you were in the [Design] tab. Double clicking an object switched you to the coding tab. Double clicking the object in [Design] tab opens up the default event for you. For all other events the object may have, click the arrow to look them up. Here is the object for whose events you’re writing the code. If you want to locate other objects on the same form while you’re in coding tab, click the arrow. Make sure all you code for an event is between “… Sub…” and “End Sub”

  26. Visual Basic 2005 Coding Statements • The Visual Basic syntax specifies how each statement must be written • When the user clicks the Standard Room button while the program is running (in run time), the standard room image should be displayed in the picStandardRoom PictureBox object • This is the result of the program executing this line of code -

  27. General Format of a Visual Basic Statement

  28. IntelliSense • IntelliSense displays all allowable entries you can make in a Visual Basic statement each time a dot, equal sign, space, or other special character required for the statement is typed • You must use the word, Me (which refers to the Form), followed by a dot before the name of the object, to take full advantage of IntelliSense

  29. IntelliSense • Me.picStandardRoom.Visible = True You know you want to look up the picture box among all the possible items on a form. The naming convention for an object on a form is [FormName].[ObjectName]. Since “Me” took care of the first part, you want to type in the “.” so that the list of all objects (as well as other elements) on the form will show. Once you have the name of the picture box, you know your next step is to assign a value to one of its properties. And the naming convention for a property is [ObjName].[PropertyName], so you want to type a “.” again. IntelliSense will show you all possible properties for a Picture Box. After you enter the equal to sign, IntelliSense knows the right format for that property and shows the two options (True/False). Type t for true or f for False. Then press Enter. IntelliSense will finish the statement for you. Once you have the Object Property Name down, the next step is to assign a value to it. The syntax is [PropertyName] = InputValue. Since you have got the entire property name down, you want to press the spacebar instead of typing another period.

  30. Entering a Visual Basic Statement • With the code window open and the insertion point positioned as shown in Figure 3-25 on page 131, type me followed by a period • To identify the correct entry, type the first letters of the entry until the entry is selected. In this case, type pics on your keyboard. • When IntelliSense highlights the correct object name, press the key on the keyboard corresponding to the entry that is to follow the object name. In this case, press the PERIOD key • As with the object name in the second step, the next step is to enter one or more characters until IntelliSense highlights the desired property in the list. Type the letter, v on your keyboard

  31. Entering a Visual Basic Statement • Press the key for the character that is to follow the property name. In this case, press the SPACEBAR on the keyboard • Press the EQUAL SIGN key on the keyboard and then press the SPACEBAR • Type t on the keyboard • Press the key for the character that is to follow the True entry. In this case, press the ENTER key

  32. Entering a Visual Basic Statement

  33. Setting the Visible Property to False • With the insertion point on the second line of the coding window for the click event of the Standard Room button, type me. on your keyboard • Type picd to highlight the picDeluxeRoom entry in the IntelliSense list • Press the key on the keyboard for the character that is to follow the object name. In this case, press the PERIOD key • Press the SPACEBAR, press the EQUAL SIGN key, and then press the SPACEBAR • Type f and then press the ENTER key

  34. Setting the Visible Property to False

  35. Enabled Property • Type me. to display the IntelliSense list • Type btnse until IntelliSense highlights the btnSelectRoom entry in the list • Type a period, type e, press the SPACEBAR, press the EQUAL SIGN key, press the SPACEBAR again, and then type t to select True in the IntelliSense list • Press the ENTER key to enter the completed statement and place the insertion point on the next line

  36. Enabled Property

  37. Comments in Program Statements • To insert a blank line following the event code generated by Visual Studio that begins with the word, Private, click anywhere in that line and then press the END key on your keyboard • Press the ENTER key • Type the first line of the comments, beginning with an apostrophe, as shown in Figure 3-46 on page 143, and then press the ENTER key

  38. Comments in Program Statements

  39. Same Line Comments

  40. Introductory Comments • Click to the left of the word, Public, on line 1 in the program to place the insertion point on that line • Press the ENTER key one time, and then press the UP ARROW key one time • Type an apostrophe, a space, the text, Program Name: and then press the TAB key one time • Type Hotel Room Selection as the name of the program. Then, press the ENTER key

  41. Introductory Comments

  42. Introductory Comments • You can enter the remaining comments using the same techniques

  43. Correcting Errors in Code • Using IntelliSense reduces the likelihood of coding errors considerably, although it is still possible to code an error • One possible error may be forgetting an apostrophe in a comment statement • A build errors message means the Visual Basic compiler detected a coding error in the program

  44. Correcting Errors in Code • Click the No button in the Microsoft Visual Studio dialog box that informs you of a build error • Double-click anywhere on the error line • Fix the error • Click anywhere in the code editing window

  45. Additional Click Events • On the Form1.vb [Design] tabbed page, double-click the Exit Window Button object

  46. Code to Close a Window • With the insertion point positioned as shown in Figure 3-64 on page 154, type me. to display the IntelliSense list. Type cl to highlight Close in the IntelliSense list • Press the ENTER key

  47. Printing Code • Click File on the menu bar to display the File menu • Click Print on the File menu to display the Print dialog box. • Ensure that a check mark appears in the Include line numbers check box if you want line numbers on your printout. Most developers prefer line numbers on printouts • Make any other selections you find necessary in the Print dialog box. • Click the OK button in the Print dialog box to print the code

  48. Event Planning Document

  49. Phase 4 – Code the Program • After the events and tasks within the vents have been identified, the developer is ready to code the program • Entering Visual Basic statements to accomplish the tasks specified on the event planning document • Developer enters the code and implements the logic

More Related