Reprinted and summarized on the Ribbon interface

 

This tutorial applies to MFC developers who are developing desktop applications and want to take advantage of the new MFC functional area framework. In this tutorial, you will learn how to add the default functional area to a small application, edit the functional area controls in ribbon designer, and then use the controls at runtime. You can see that it is very easy to edit and use the functional area controls through the MFC functional area framework. In this tutorial, all necessary steps to add and customize the basic functional area in the application are completed.

This tutorial involves compiling code in real time and copying the code from this document. If the application cannot be compiled due to a copy error (or any other problem), you can find all completed examples and the final source code of each exercise in the package of this tutorial. These examples can be used to solve compilation errors.

Prerequisites

You must have the following content to complete this experiment:

• Microsoft Visual Studio 2010 beta 2 (or later)

• Windows 7

Learning Objectives

After completing this tutorial, you will learn how:

• Create a default functional area for the application in Visual Studio 2010

• Add a functional area control, such as buttons, check boxes, and blocks, to ribbon designer.

• Add event handler functions for the functional area controls in ribbon designer

• Use functional area controls during runtime

Exercise 1: Create a default functional area in the Application

In this exercise, you will start creating a Windows 7-style, functional-area MFC application from scratch in Visual Studio 2010. You do not have to write any code to perform these operations. Just click, click, and then click!

Task 1-create an MFC project with a functional area in Visual Studio 2010

1. in Visual Studio 2010, use the MFC Application Wizard to create an MFC application with the default functional area. To run the wizard, point to new in the File menu, and select project. The new project dialog box is displayed.

2. In the new project dialog box, expand the Visual C ++ node in the project types pane and select MFC. In the templates pane, select MFC application. Enter a project name, such as ribbonapp, and click OK. See Figure 1-1. The MF Application Wizard is displayed.

 

Figure 1-1

3. In the application type pane, change project style to office, and then change visual style and colors to Windows 7 ". Keep others unchanged, and then click Next. See Figure 1-2.

 

Figure 1-2

4. Retain the compound document support settings as the default value (that is, select the "NONE" check box ). See Figure 1-3.

 

Figure 1-3

5. retain all default values in the Document Template strings pane. See Figure 1-4.

 

Figure 1-4

6. In the database support pane, retain all default settings ("NONE" should be selected "). Click "Next ". See Figure 1-5.

 

Figure 1-5

7. In the user interface features pane, make sure that the use a ribbon option is selected. Click "Next ". See Figure 1-6.

 

Figure 1-6

8. In the advanced features pane, clear all options. Click "Next ". See Figure 1-7.

 

Figure 1-7

9. Keep all default settings in the generated classes pane. See Figure 1-8.

 

Figure 1-8

10. To generate an application, select build solution from the build menu. If the application is successfully generated, run start debugging from the Debug menu. The wizard automatically creates a Windows 7-style ribbon with a functional area category named home. This category contains three functional area panels named clipboard, view, and window. See Figure 1-9.

 

Figure 1-9

Exercise 2: Add simple controls to the existing functional area

Visual Studio 2010 has a new function called ribbon designer of the MFC application, which allows you to conveniently add and edit any functional area controls to the application.

In this exercise, you will learn how to drag controls to ribbon designer and how to easily add event handlers. In this exercise, you will use the ribbonapp solution in the ex02_starter \ begin \ ribbonapp folder.

Task 1-add simple controls to the existing functional area

1. Start ribbonapp. sln in Visual Studio 2010.

2. In the resource view, expand ribbonapp. RC-> ribbon-> idr_ribbon node. Double-click the file to open ribbon designer. The resource view panel, ribbon bar designer panel, and Toolbox Panel 2-1 are shown.

 

Figure 2-1

3. Drag a category control from the toolbox to the ribbon bar. In the designer, you will see a category named "category1" and there is a panel named "Panel1" in category1. Drag and Drop two button controls from the toolbox to "Panel1 ". By default, the buttons are named "button1" and "button2 ". The functional area bar has a new look, as shown in 2-2.

 

Figure 2-2

4. Right-click "category1" and select Properties to open the Properties window. As shown in 2-3, in the property window, you can easily rename the title to "my category" and edit other properties. In the Property Window, select "idb_writelarge" from the "large images" drop-down list, and select "idb_writesmall" from the "small images" drop-down list ". It defines an image set of elements in this category.

 

Figure 2-3

5. Open the Properties window of the button you just created, and change the title to "my button" and "my choice ". To add an image for the button, open the "My choice" attribute window and click "large image Index" (when the value field is selected, the Browse button is displayed, allows browsing image sets ). Click the Browse button to bring up the image collection dialog box. Select "0" and edit other attributes, as shown in Figure 2-4. Change the value of large image index to "0" to add an image for "My button.

 

Figure 2-4

6. Test the function area by clicking the "test Ribbon" button on the toolbar, as shown in Figure 2-5.

 

Figure 2-5

7. Compile and run the application. Now it has a new look as shown in 2-6. The created buttons ("My Choice" and "my button") are disabled by default. The button is enabled after an event handler is added for them.

 

Figure 2-6

Task 2-add an event handler to the control

1. It is very easy to add an event handler in ribbon designer. Right-click the "my button" button control and select "add event handler ". The event handler Wizard will be enabled. Select the "command" Message Type and select "cmainframe" from the class list, as shown in Figure 2-7.

 

Figure 2-7

2. Click "add and edit ". The wizard automatically generates some functions and then opens the source code editor. Here, we will see the null function cmainframe: onmybutton () in mainfrm. cpp ().

3. Add the following line of code to the onmybutton () function in mainfrm. cpp.

C ++

MessageBox (text ("this is my button! "), Text (" My button "), mb_ OK );

4. Compile and run the solution. The application will have a functional area that contains a category and two buttons. Click "my button" to test the application, as shown in Figure 2-8.

 

Figure 2-8

Exercise 3: Add and use more controls to the existing functional area

Exercise 1 shows how to use the MFC Wizard to create an application with a default functional area. Exercise 2 shows how to easily add or modify a ribbon widget using ribbon designer. This demonstration will show more information about the functional area controls and focus on how to use buttons, check boxes, slide, and the combo box MFC functional area controls at runtime.

Task 1-generate an existing ribbon application to view ribbon controls

1. Open the ribbonapp solution in the ex03_starter \ begin \ ribbonapp folder.

2. Click rebuild solution on the build menu.

3. On the Debug menu, click Start debugging.

4. The application shown in 3-1 will be opened. All the functional area controls shown here are created using ribbon designer. (Exercise 2 shows how to use ribbon designer .)

 

Figure 3-1

5. Click the "My category" tab to view the changes in the functional area, as shown in 3-2.

 

Figure 3-2

Help:

For convenience, some variables and functions (such as event handler functions and helper functions) have been declared and defined in this project, so you only need to implement them in a centralized manner in the following tasks.

Task 2-Disable and enable buttons during running

1. You can add code to manually disable or enable a button. As shown in 3-2, the disable panel of my category includes a check box and a button. You can select or clear this check box to trigger the event. Select the check box to disable the object button. These variables have been declared and some necessary functions are ready.

2. to update the event handler function of the checkbox control in mainfrm. cpp, enter the following code:

C ++

Void cmainframe: ondisablecheckbox ()

{

M_bchecked =! M_bchecked;

}

Void cmainframe: onupdatedisablecheckbox (ccmdui * pcmdui)

{

Pcmdui-> setcheck (! M_bchecked );

}

3. You must also update the event handler function of the button object in mainfrm. cpp, as shown below:

C ++

Void cmainframe: onupdatedisableobject (ccmdui * pcmdui)

{

Pcmdui-> enable (m_bchecked );

}

4. Compile and run the application. If you select the "Disable object button" check box, the "object" button is disabled, as shown in 3-3.

 

Figure 3-3

Task 3: displays the currently selected combo box items.

1. Update the functions in mainfrm. cpp to display a message box when selecting a project from the drop-down list in the combo box:

C ++

Void cmainframe: oncombomessage ()

{

Cmfcribboncombobox * pfontcombobox = dynamic_downcast (

Cmfcribboncombobox, m_wndribbonbar.findbyid (id_combo_box ));

// Get the selected index

Int ncursel = pfontcombobox-> getcursel ();

If (ncursel> = 0)

{

Cstring item = pfontcombobox-> getitem (ncursel );

Cstring smessage = _ T ("");

Smessage. Format (_ T ("current selected item is \" % s \ "."), item );

MessageBox (smessage, _ T ("combo box item"), mb_ OK );

}

Else

{

MessageBox (_ T ("Please select one item from droplist of combo box."), _ T ("combo box item"), mb_ OK );

}

}

2. Compile and run the application.

3. Select a project from the combo box and click "message box. A message box is displayed, as shown in 3-4.

 

Figure 3-4

Task 4-draw a rectangular view when the button is pressed

1. The rectangle panel in the home category contains a draw button (3-1 ). Update the following functions in ribbonappdoc. app, as shown below, to draw a rectangle when you click the draw button.

C ++

Cribbonappdoc: cribbonappdoc ()

{

// Todo: add one-time construction code here

M_bdraw = false;

}

Bool cribbonappdoc: enabledraw (void)

{

Return m_bdraw;

}

Void cribbonappdoc: onrectdraw ()

{

M_bdraw = true;

Updateallviews (null );

}

2. add the following lines to ribbonappview. CPP void cribbonappview: ondraw (CDC * PDC) function comment "// todo: Add draw code for native data here", as shown below:

C ++

// Draw a rectangle

Crect client;

Cbrush brush;

Getwindowrect (& client );

If (pdoc-> enabledraw () & brush. createsolidbrush (RGB (255, 0, 222 )))

{

Int width = client. Width ()/2; // to make it smaller

Int Height = client. Height ()/2;

Crect rect = crect (0, 0, width, height );

PDC-> fillrect (rect, & brush );

}

3. Compile and run the solution. Click the draw button to view the application, as shown in Figure 3-5.

 

Figure 3-5

Task 5-change the rectangle color

1. The color combo box in the font panel controls the color of the rectangle. To enable the color control, implement the function cribbonappdoc: getcolor (void) in cribbonappdoc. cpp, as shown below:

C ++

Colorref cribbonappdoc: getcolor (void)

{

Cmfcribbonbar * pribbon = (cmdiframewndex *) afxgetmainwnd ()-> getribbonbar ();

Assert_valid (pribbon );

Cmfcribboncolorbutton * pcolor = dynamic_downcast (

Cmfcribboncolorbutton, pribbon-> findbyid (id_font_color ));

// Get the selected color

Return pcolor-> getcolor ();

}

2. Update cribbonappdoc. cpp's event handler function cribbonappdoc: onfontcolor ().

C ++

Void cribbonappdoc: onfontcolor ()

{

Updateallviews (null );

}

3. Update the void cribbonappview: ondraw (CDC * PDC) function to change the line "brush. createsolidbrush (RGB (222,)" to the following:

C ++

Brush. createsolidbrush (pdoc-> getcolor ())

4. Compile and run the application.

5. Click the draw button and select yellow from the color combo box to view the new user interface, as shown in 3-6.

 

Figure 3-6

Task 6-move the slider to enlarge the rectangle

1. Update the help function Double cribbonappdoc: getsliderfactor (void) in cribbonappdoc. cpp, as shown below:

C ++

// Return the factor of zooming the rectangle

Double cribbonappdoc: getsliderfactor (void)

{

// Get a pointer to the ribbon bar

Cmfcribbonbar * pribbon = (cmdiframewndex *) afxgetmainwnd ()-> getribbonbar ();

Assert_valid (pribbon );

Cmfcribbonslider * pslider = dynamic_downcast (

Cmfcribbonslider, pribbon-> findbyid (id_rect_slider ));

// Get current position

Int position = pslider-> getpos ();

Return (double) position/(double) pslider-> getrangemax ();

}

2. Update the event handler function of the slider as follows:

C ++

Void cribbonappdoc: onrectslider ()

{

If (getasynckeystate (vk_lbutton) = 0)

{

Updateallviews (null );

}

}

3. Update the void cribbonappview: ondraw (CDC * PDC) function to enable the slider function.

C ++

If (pdoc-> enabledraw () & brush. createsolidbrush (pdoc-> getcolor ()))

{

Int width = client. Width ()/2; // to make it smaller

Int Height = client. Height ()/2;

Double factor = pdoc-> getsliderfactor ();

If (factor)

{

Width = width * factor;

Height = height * factor;

}

Crect rect = crect (0, 0, width, height );

PDC-> fillrect (rect, & brush );

}

4. Compile and run the application.

5. Click the draw button and move the slider. When the slider moves, the rectangle is resized with a zoom factor, as shown in 3-7.

 

Figure 3-7

Help:

At the end of this exercise, the application generated using ex03_starter \ begin \ ribbonapp. sln should be the same as the application generated using ex03_starter \ end \ ribbonapp. sln.

Summary

We have successfully completed the introduction tutorial of the MFC functional area. We learned how the new MFC functional area framework helps you quickly and easily create a functional area application using the MFC wizard and ribbon designer.