CS252 - Programs

CS252. User Interface Design

Program 4 - Managing Interface Components

Due 11:59 PM, Monday, February 14

Download the Prog4 program (Prog4.vbp and frmProg4.frm; or as a single file in prog4.zip). To see the form, you may have to click on the form in the Project Explorer window. You may also have to resize the white window behind the form in order to see the full size of the form.

The program consists of a form with a PictureBox, colored black, and a ListBox to hold messages. Please do not resize any of these objects while completing the assignment.

You will be graded on things such as spelling, choice of words (where you are allowed to choose them), choice of access and shortcut keys, etc., in addition to the completeness of your assignment.

Learning about New Controls

This assignment deals with a number of controls not included in the book. You'll want to learn how to use the Object Browser to find out more about then:

Choose Object Browser on the View menu
Perform a string search. Type "MsgBox" in the text area and press the Search icon
Note that you can now see the syntax of the MsgBox invocation, which creates a dialog containing a message (this particular feature was described in the text)
To find out what you could use as the second argument to MsgBox, click on vbMsgBoxStyle. A list of possible constants will be displayed in the scrolled window
Use the left arrow to "go back" to the original MsgBox information
Now click on vbMsgBoxResult to find out what return values you might get if you use MsgBox as a function

Since the Working Version doesn't have online help, this may be the best way for you to find additional information on VB controls, methods, and constants.

1. Add a Second Form with a Different Cursor

Many applications begin by displaying a product startup panel as the program is loading. Add one with the following steps:

Choose Project -> Add Form, indicating a form type of Splash Screen (this will be an example of a product startup window). Be sure to give it a proper name.

Make sure properties of the form will mimic the behavior of typical startup windows:

StartUpPosition	set to make the panel appear in the center of the screen
ShowInTaskbar	set to False to keep it from appearing in the desktop taskbar
Moveable	set to False to kees the user from being able to move it
ControlBox	set to False to get rid of the normal title bar
BorderStyle	set to Fixed Dialog to create a simple "line" frame
MousePointer	change the cursor to an Hourglass

Now make this be the initial form that appears on the screen. Go to Project->Properties and select the correct form from the scrolldown list.
If you run it now, the startup panel will appear, but not the main program form. You will need to modify the code for the startup panel so that it explicitly invokes it. Open the code window and add the line frmProg4.Show to the event handlers for mouse clicks and keystrokes. What does the other line of code do?
Run the program and use the keyboard to bring up the main form. Which types of keys will work for this? Now bring up the main form using a mouse click (hint: you might have to try clicking in a variety of places). Where did you have to click the mouse in order for this to work?

2. Add a Timeout Mechanism

While it's a good idea to let the user dismiss the startup panel with a keystroke (especially with <ESC>), it should also be possible to make it go away on its own. Do this by adding a Timer control.

Make sure the startup panel's form is visible, then double-click the stopwatch icon on the toolbar. A small icon will appear near the center of the form. Don't worry about where actually is, because it won't be visible anyway. Give it a name using the convention of starting with "tmr". Set the Interval property for the frequency with which the timer should "fire" - say after 3 or 4 seconds. (Use the comments at the bottom of the Property box to help you figure out what value you should use.)
Double-click on the Timer object to bring up the form's code, with a new event handler added. Insert the code needed to dismiss the startup panel and bring up the main form.
Run the program to verify that the Timer works.

3. Add Menus and Related Objects

Use the Webpage on Creating and Managing Menus to accomplish the following changes.

Create a File menu, with the following items: "New", "Save", and "Exit", with the first two separated into a different group (using a separator bar). Be sure to give them the traditional access keys. Give "New" and "Save" the appropriate shortcut keys, too. (Note that VB won't let you assign the normal shortcut key to "Exit".)
Create an Edit menu, with the following items: "Cut", "Copy", and "Paste". Give them shortcut keys as well as access keys. Disable the Paste menu item (since you can't paste something until you have copied or cut it).

Now add some code to handle menu events.

Whenever a menu item is pressed, a message should be added to the ListBox indicating which menu item was selected. Since the list will grow long quickly, force the list to scroll so that it shows (by making the newly added line be the "current list index").
Add a MsgBox control that pops up when the user chooses "Exit" to ask if he/she really wants to quit. If so, the program should exit; if not, nothing more should happen. The popup will need an OK button and a Cancel button. (Hint: to figure out what button has been pressed, test the value returned by invoking MsgBox as a function; find out what the return values look like by using the Object Browser.)

4. Animate the Display

Animation is easy using the Timer control. For this assignment, use a timer to make the background of the PictureBox blink. In the timer event handler, write the code to do the following:

If the background is not currently white, save the background color in a local variable, then set the background to white
Otherwise, set the background color back to the previous (non-white) color

Set the Timer interval to some reasonable value. Run the program and watch the background blink. It should work even if you change the starting background from black to, say, green.

Now add user control over this feature. Create an Options menu with a single item, "Blinking". Start out with this item checked (indicating that blinking is enabled). When the menu item is clicked, the checkmark should disappear and the screen should stop blinking. (Hint: toggle both the Checked property of the menu item and the Enabled property of the Timer rather than setting them explicitly to True or False.)

5. Add a Toolbar

Use the Webpage on Creating and Managing Toolbars to accomplish the following changes.

Create a toolbar and add 6 buttons, a group of 2 followed by a separator, then a group of 3 more.
Make up something for your toolbar to represent (e.g., background textures, drawing shapes, etc.) Choose 5 different icons and associate one with each of the non-separator buttons. Also give each button a single-word caption that reflects the content of the icons.
Write the event handler code so that whenever a toolbar button is pressed, a message is added in the message list. The message should include the caption associated with the button and should always be visible.
Create a "radio group" for the first two buttons.
Create short, explanatory Tooltips for the buttons. These should provide more information than the Captions, and be different from the Captions.
Add one more button - separated from the others - to provide an alternate way to exit from the program. When pressed, this should invoke the Exit menu item. Don't forget to include a tooltip for this button.

Turn in the whole project group as a single unit by using WinZip (available on all the CS NT's) to package up the entire directory into a single file for submission.