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:
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.
- 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
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
- 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.
Now add some code to handle menu events.
- 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).
- 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:
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.
- 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
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.