Webocreation

Monday, November 23, 2009

Adding User Interface Features

Adding User Interface Features

This chapter describes how to create and implement the basic elements of the user interface: menus, toolbars, and status bars.

Menus and toolbars provide the user with access to commands. In general, status bars provide the user with information about the status of the application, such as the position of the cursor or the current time.

After outlining the major types of menus available in Windows-based applications, the chapter describes the steps you can follow to develop a user interface, starting with adding menus and command handlers. From there, the chapter covers designing and implementing toolbars and status bars.

Objectives

After completing this chapter, you will be able to:

® Add menus, accelerator keys, status bar menu prompts, and toolbar buttons to an application.
® Explain the routing of a command message.
® Dynamically change the state of a menu item.
® Incorporate a shortcut menu into an application.
® Add additional panes and graphics to a status bar.

Menus

This section provides an introduction to creating and using menus in Windows-based applications, and reviews the architecture of menus under Windows 95. This section is designed for developers who are new to the Windows operating system.

This section includes the following topics:

® Types of Menus
® Building Menus
® Updating the Appearance of Menus
® Adding an Accelerator Key to a Menu

Using Shortcut Menus

Types of Menus

From a programming perspective, all menus in Windows 95-based applications fall into two categories: top-level menus and pop-up menus. Top-level menus are attached to the application's primary, or top-level, window, and pop-up menus are usually attached to other menus or menu items.

Top-Level Menus

A top-level menu consists of a menu name and menu items. The menu name indicates the general functionality and purpose of commands on the menu. Common top-level menu names are File, Edit, Window, and Help. A menu item appears as an individual choice on a menu, and invokes a particular functionality when chosen.

Pop-Up Menus

This chapter explains how to implement three types of pop-up menus: drop-down menus, submenus, and shortcut menus.

Menu type Purpose

Drop-down menus Drop-down menus appear when a menu title is selected from the top-level menu. For example, when you click the top-level Edit menu title, a drop-down menu displays editing commands.

Submenus

Submenus appear when a command is chosen and an additional menu choice is required. In Windows-based applications, a triangular symbol that points to the right of a menu item lets the user know that another menu is displayed when that command is chosen.

Shortcut menus
Shortcut menus appear at the location of the mouse pointer. When you click the right mouse button, a shortcut menu provides context-sensitive commands. For example, if you want the user to have access to common editing and formatting options when the cursor is located over a text string, you can provide those commands on a shortcut menu.

Building Menus

When you use AppWizard to create a new application, it generates standard menus with their associated command identifiers (IDs), along with default command handlers. The command handlers reside in various classes. In the File menu, for example, the application class handles the New and Open commands; the document class handles the Save, Save As, and Close commands; and the view class handles the Print and Print Preview commands.

Adding more menus to your application is a two-step process.

1. Use the Menu editor to create menus.
The Menu editor is a graphical editor that you can use to add, delete, and change menus and menu items. In the Menu editor, you associate a menu item with a command ID.
2. Use ClassWizard to write the code to support menu functionality.
You use ClassWizard to add, delete, and maintain command ID and command-handler entries in the message map.

This section describes how to add a menu, set menu properties, and work with command handlers in your applications.

This section includes the following topics:

Adding a Menu and Setting Its Properties

When you design a menu, keep in mind conventional user interface design guidelines for grouping commands and offering visual clues to the user. This illustration shows many of these visual clues of menu items that are set in the Menu Item Properties property sheet.




To add a top-level menu or menu bar
1. In your project workspace view, click the ResourceView tab.
2. Right-click the Menu folder and click Insert Menu. This inserts a blank menu resource.
3. Double-click the empty placeholder on the menu bar to invoke the Menu Item Properties property sheet.
4. Type a caption for the menu. The caption will appear in the menu bar.

To add a pop-up menu

1. Using the Menu editor, open the menu resource that is to include the new pop-up menu.
2. Create the menu item that is to invoke the pop-up menu by selecting its Pop-up check box. A new menu item appears to the right.
3. Fill in this menu.


To set a menu item's properties

1. Right-click the menu item and click Properties to invoke the Menu Item Properties property sheet.
2. Assign a caption, an ID number, and a string for the menu item. You can either select an ID from the drop-down combo box or create a new one for your menu item. Pre-existing IDs typically have a prompt string associated with them.


Note As an alternative, you can add a caption and prompt string, press ENTER, and let the Menu editor assign the ID.

Implementing a Command Handler
Once you have added a menu item and set its properties, you need to create a command handler for the menu item and add the code that implements the menu item. A command handler is the function called by the MFC command routing mechanism in response to the user's choosing a particular menu item.


Creating a Command Handler

You create a command handler by invoking ClassWizard.
To see an illustration of the MFC ClassWizard dialog box, click this icon.




Note To start ClassWizard, press CTRL+W in the Developer Studio environment.

To add a command handler to a menu resource

1. Start ClassWizard. In the Class name drop-down list box, select the class to which you want to add the handler.
2. In the Object IDs list box, select the menu ID.
3. In the Messages list box, select COMMAND.
4. Click Add Function.
The Add Member Function dialog box appears.
5. Click OK to accept the default name that appears in the Member Function Name box.
ClassWizard makes two changes to your source code:

ClassWizard updates the message map declaration and implementation by adding the entries for the new command. For example, here is the implementation after the command handler for CMenus1View is added. Note that ClassWizard adds its message macros between the //{{ and //}} comments.

BEGIN_MESSAGE_MAP(CMenus1View, CView)
//{{AFX_MSG_MAP(CMenus1View)
ON_COMMAND(ID_COLORS_BLACK, OnColorsBlack)
ON_COMMAND(ID_COLORS_BLUE, OnColorsBlue)
ON_COMMAND(ID_COLORS_GREEN, OnColorsGreen)
ON_COMMAND(ID_COLORS_RED, OnColorsRed)
//}}AFX_MSG_MAP
END_MESSAGE_MAP()


ClassWizard adds a member function with an empty body, called a stub, to the end of the corresponding class .cpp file, and adds an associated prototype to the .h file.

Note In most cases, ClassWizard is used to add message-map entries and member-function stubs to the command target class.

Message macros added between the //{{AFX_MSG_MAP and //}}AFX_MSG_MAP comments are interpreted by ClassWizard. Any code that you add manually to the message maps must be placed outside these comments, usually after the last comment but before the END_MESSAGE_MAP macro.

6. Click Edit Code, and then add the functionality you want to the handler.


Adding Code to the Command Handler

To finish the command handler, add code to the command handler to provide the functionality you want for the menu item. For example, if the menu item changes the background color, you could use this code:

void CMenus1View::OnColorsBlack()
{
CMenus1Doc* pDoc = GetDocument();
ASSERT_VALID(pDoc);
pDoc->SetColor(BLACK);
Invalidate();
}

No comments:

Post a Comment