Ross Sheppard High School
Computer Programming 20
Student Learning Guide
The Colours Program


  When you have finished this project, you will be able to:
create a menu
use labels
use Visual Basic colors

describe the following terms:

  • menu
  1. Create a new folder called Colors on your personal drive.

  2. The diagram below shows the visual implementation of the Colours Program.



    The Colors Program

    When the user selects a color from the menu choices, the background color of the form will turn the selected color. When a color choice is selected, that choice on the menu will be disabled (dimmed). The color the user selected will be confirmed in the label. When the user clicks on the Exit button, a confirmation dialog box appears. Based on the user's selection, the program unloads the form and quits or returns the user to the program. When the user chooses Exit from the File menu, a confirmation dialog box appears. Based on the user's selection, the program unloads the form and quits or returns the user to the program.

  3. Start a new Standard.exe project in Visual Basic. Save this project as prjColorsProgram and the form as frmColorsProgram in Colors Program folder.

  4. Use the table below to create the visual implementation of the Colors program. Don't attempt the menu items at this point - you will do that in a few minutes.

    Object Property Setting
    Form Name frmColors
      Caption The Colors Program
      BackColor White
      StartUpPosition 2-ScreenCenter
    CommandButton Name btnExit
      Caption Exit
      Font MS Sans Serif Bold 14
    Label Name lblColor
      Caption Make it blank
      Font MS Sans Serif Bold 12
      BackColor White

  5. On the Program Documentation form, create the pseudo-code for the Colors Program.

  6. Type the code for the Exit button.

  7. Save your project and run it. Does the Exit button work?

  8. To create the menu items, you need to be in the View Object window.

  9. Click on the Tools item in the menu bar, then on Menu Editor. The Menu Editor window will appear:



  10. Think about how a Menu Bar is organized.

  11. For the Colors Program, you will built a menu that looks like the illustration below:



  12. In the area labelled Caption, type &File. Just as was the case for creating keyboard shortcuts with the Caption property, the & creates a shortcut when building menus.

    In the Name box, type mnuFile. The mnu is the naming convention for a menu item, and the name of the menu item is File.



  13. The next menu item should appear under the File item on the Menu Bar. Click the Next button, then the right arrow button on the Menu Editor Window. Add Red to the menu.



    Notice the . . . before the Red. This indicates that it is a sub-menu item.


  14. In the same fashion, add Green, Blue, and White sub-menu items.



  15. Next add a Separator Bar to the sub-menu. The Caption is - while the Name is mnuSep1. mnuSep1 indicates it is the first separator bar; subsequent separators would be mnuSep2, mnuSep3 and so on.



  16. The last item for this sub-menu is the Exit item. The caption for Exit is E&xit and the name is mnuExit.



  17. Now, add a new item to the Menu Bar. The caption of this item is &About and the Name is mnuAbout.



  18. Save your project. The Form should now look like the one illustrated below:



  19. Run the program - try each of the items on the Menu Bar. They don't work - do you know why?

  20. Programming convention states that objects and menu items that should not be available to the user at certain time should be disabled, or dimmed. This is the case with the sub-menu item for setting the BackColor to white. The form is already white (your specified that in the properties for the form) - therefore the sum-menu item for this should not be available to the user.

    Note: as a programmer, you must also think like a user. If the sub-menu item white was available and the user clicked on it, nothing would happen. This could frustrate or confuse the user - therefore, it is best to disable that item.

  21. The code for the sub-menu item is placed in the Form_Load section of the View Code window:



  22. Save your program and run it. Click File on the Menu Bar and notice the selection for White is disabled.

  23. The code for a particular procedure or sub-routine always takes precedence over the properties - look at the Menu Editor again and notice the item mnuWhite is Enabled in the Menu Editor. When you run the program, however, it is disabled because code always over-rides property settings.

  24. If you look at the code for the mnuWhite item in the Form, you will notice that is follows typical Visual Basic syntax.

  25. Now it is time to write the code for the color choices in the File sub-menu. Start with the mnuRed item by selecting the mnuRed_Click() procedure in the View Code window. Type the following code:



  26. Save and run your program. Click on File in the Menu Bar then Red. Your form should look like this:



    What does this code instruct Visual Basic to do?

  27. Notice the Red, Blue, and Green items are all enabled, but the White item is still disabled. At this point, however, programming convention would state that the Red item should be disabled and all of the others should be enabled.

  28. Add the following code to the mnuRed_Click() procedure:



  29. The above code disables the mnuRed item and enables the mnuBlue, mnuGreen and mnuWhite items.

  30. Add the appropriate code to each of the other color choices.

    Color QBColor Number
    Blue QBColor(1)
    Green QBColor(2)
    Red QBColor(4)
    White QBColor(15)
  31. Save your program and try all the color choices.

  32. Now you will write the code for the mnuExit item.What should this code look like?

  33. Save and run your program. Test all of the colors.

    In future projects, you will build your menus from a table, just as you have been using a table for the objects and their properties. The Menu Table for the Colors Program is illustrated below:

    Menu Items Table
    Caption Name Properties
    &File mnuFile Menu Bar
    &Red mnuRed Sub-menu
    &Blue mnuBlue Sub-menu
    &Green mnuGreen Sub-menu
    &White mnuWhite Sub-menu
    Disabled on program start
    - mnuSep1 Sub-menu
    E&xit mnuExit Sub-menu
    Runs confirmation dialog box
    &About mnuAbout Menu Bar


  34. In the code view, create a list of comments that show the QBColors and numbers. Place this information below the programmer information at the beginning of the code. Hint: you will need to substitute numbers in your code to determine what color they render when the program is run. For starters, QBColor(0) is black, while QBColor(15) is white. What are the colors in between?

  35. Create menu item for all 16 QBColors. Have them appear in the menu in numerical order.

  36. Run your program and choose some of the darker colours. Notice the black text is difficult to read on the dark backgrounds.

  37. Create the code that will turn the text to white for dark backgrounds and black for light backgrounds. Remember to include the pseudo-code describing this procedure.

  38. Click here to see the marking guide for this project.

  39. When you have finished, send an email to your teacher asking that this project be marked.


© 1998-2000 N.F. Mathew, EdD
File name: Colors.htm
Last updated on October 18, 2000