Implementing State Indicators
Continue with the files you created in Exercise 1, or if you do not have a starting point for this exercise, the code that forms the basis for this exercise is in \Labs\Ch08\Lab01\Ex01.
The menu items you added are now functional. However, the user has no indication of the pen width without drawing a line. The easiest way to indicate the state of an option is to use radio button marks or check marks. Because the user can only choose between the two options of thick and thin pens, you will add a radio button as the indicator of the pen width.
Use ClassWizard to add UPDATE _COMMAND_UI handlers for Thick and Thin menu items
1. On the View menu, click ClassWizard, or press CTRL+W.
2. Select the CScribbleDoc class and select the object ID ID_PEN_WIDTH_THICK.
3. Select the UPDATE _COMMAND_UI message.
4. Click Add Function and accept the default function name.
5. Repeat the previous steps for ID_PEN_WIDTH_THIN.
Implement the UPDATE _COMMAND_UI handlers for Thick and Thin menu items
1. Select the OnUpdatePenWidthThick member function and click Edit Code.
2. SetRadio and SetCheck are member functions of CCmdUI that take a BOOL value. To set the radio button indicator, check to see whether the pen width matches the menu item. Replace the //TODO comment with:
pCmdUI->SetRadio(GetPenWidth() == THICK);
3. For the Thin menu item, the same technique applies. Replace the //TODO comment with:
pCmdUI->SetRadio(GetPenWidth() == THIN);
If check marks were a more appropriate UI, you could use the same technique with CCmdUI::SetCheck.
4. Save ScribDoc.cpp.
Add a GetPenWidth member
1. Open ScribDoc.h.
2. Add to the public attributes section of CScribbleDoc.
PENWIDTH GetPenWidth() const { return m_nPenWidth; }
3. Save ScribDoc.h.
4. Build and run Scribble.
The completed code for this exercise is in \Labs\Ch08\Lab01\Ex02.
Your menu system is now complete; however, you have not yet implemented toolbar support. In this exercise, you will add two buttons to the toolbar and implement them to work with the menu.
Open the toolbar resource
1. If you do not already have the resource file open, switch to ResourceView and expand the Scribble folder.
2. Expand the toolbar folder and double-click IDR_MAINFRAME.
The Toolbar editor opens and displays the default toolbar resource that AppWizard created for Scribble. The first button on the toolbar, selected by default, appears in the bottom pane (or magnified view) of the editor window. The following illustration shows what the magnified view should look like.
The graphics and color tools also open as part of the Toolbar editor.
The following illustration shows what these two graphics tools look like.
If these graphics tools do not appear, right-click in any blank area on the Developer Studio menu bar. Select Graphics and Colors in the pop-up menu that appears. You can drag the graphics tools to either side of the screen and dock them to get a better view of the editor window.
Delete and add toolbar buttons
1. Drag the button that you want to delete off the toolbar (in the top, or normal view pane). In this case, drag the Cut, Copy and Paste buttons off the Scribble toolbar. (This step is optional; if you do not remove these buttons, they will remain disabled in the running application but otherwise will not interfere with Scribble operations.)
2. To add a button, select the blank button at the right end of the toolbar resource. Drag this new button to the former location of the Cut button. This new button receives the focus in the two split panes of the editing window. (If you want the button to appear larger in the editor, choose the Magnify tool, and select the magnification factor that you want.)
3. Click the line tool on the graphics toolbar and choose the two-pixel-wide pen. This is the smallest of the square-shaped pens.
4. Using the magnified view of the button, draw a line from the lower-left corner to the upper-right corner using a thicker pen.
5. Repeat the process, creating a thick line from the upper-left to lower-right corner.
6. Your toolbar should now look like the toolbar below.
7. Save Scribble.rc.
Associate toolbar buttons with command IDs
In the next step, you will associate the new Thick Line button with a command ID so that the button works when running the Scribble application. This step is identical to the one that you performed to associate a menu item with a command ID.
You bind the Thick Line button to ID_PEN_THICK and the Thin Line button to ID_PEN_THIN. You defined these IDs earlier for the Thick Line and Thin Line menu commands, so Visual C++ has already written a #define for the ID in Resource.h. Your only task is to associate the ID with the button.
1. Double-click the Thin Line button to show the Toolbar Button Properties property sheet. Visual C++ assigns an ID to the button, but you can select an ID from the drop-down ID list that corresponds to the menu item that the toolbar imitates. For the Thin Line button, set its ID to ID_PEN_WIDTH_THIN.
2. Repeat with the Thick Line button. Set its ID to ID_PEN_WIDTH_THICK.
By associating the command ID with the toolbar button, the string resources become active for the button as well. When the mouse passes over the button, the prompt string appears in the status line, and the ToolTip appears next to the button.
Add a ToolTip
1. Select the Thin Line toolbar button in the editor window, and choose Properties from the View menu to display the Toolbar Button Properties property sheet.
In the Prompt: box, you will see the text "Change pen style to a thin line." You entered this text as the Thin menu item in Scribble's Pen menu; it appears in the status line when the mouse passes over the menu command.
2. At the end of the prompt text, type a newline character (\n) plus the text that you want to display in the ToolTip. (There should be no space between the newline character and the text of the ToolTip.) If you want a ToolTip without a prompt string, simply start with the newline character.
Keep this text short. For Scribble, type \nThin after the existing prompt string.
3. Save Scribble.rc and build Scribble.
Because of the built-in toolbar support in MFC, you were able to implement new toolbar buttons without coding. In the next lab, you can programmatically connect a toolbar button with a menu item. Your application should now be able to create output like that shown in the following illustration.
The completed code for this exercise is in \Labs\Ch08\Lab01\Ex03.
Comments
Post a Comment