The Ultimate Toolbox 3D Tab Views

• Download demo executable - 434.2 KB

• Download the Ultimate Toolbox source code - 3 MB
• Download the Ultimate Toolbox sample projects - 5.4 MB
• Download the Ultimate Toolbox documentation in compiled HTML help (CHM) format - 4.9 MB

Visit the Ultimate Toolbox main page for an overview and configuration guide to the Ultimate Toolbox library.

Source code and project files for this sample are included in the samples\gui\tabviews directory of the sample projects download.

Overview

For most applications it's not enough to use only one window to provide all its output. There are different solutions for this problem like splitters or docking windows. But they usually have a common inconvenience: all windows are shown at the same time. They also take up precious screen space.

The COXShortcutBar control can be used to show a number of child windows, while keeping active (fully displayed) only one window at a time. But COXShortcutBar was primarily designed to show icons and has a set of notifications that make sense only while using such controls as treeviews or listviews.

A very good example of how the problem could be resolved can be found in the Microsoft Visual Studio IDE. For instance, the "Output" window (with "Build", "Debug", "Find in Files..." panes) or "Result List" window (with "Search", "Lookup", "See Also" and "History" panes). We call them TabViews.

TabViews can be a good alternative to a splitter window when you need to have more than one view per document. Also TabViews can be used within a docking window and can be used as a container for associated windows (pages) that are usually implemented as dialog bars.

We already have in the library the COXTabViewContainer class that implements the TabViews paradigm. In terms of graphical representation, this class duplicates the functionality that can be found in such products as Microsoft Visual Studio IDE (Output window) or Microsoft Excel (multiple sheets in the same book). Tab buttons are positioned at the bottom of the window on the same line as the horizontal scroll bar, like so:

Here, we introduce a new implementation of the TabViews control, COX3DTabViewContainer. The paradigm remains the same but we've changed how associated windows (pages) are represented in the container. We have used the standard Tab control and displayed a tab button for each page. When a user clicks a button the corresponding page is activated and displayed. Tab buttons can be positioned at any side of the container window by means of applying corresponding Tab control styles (refer to the Create() function for details).

COX3DTabViewContainer is derived from the standard CTabCtrl and implements all the functionality needed to support tab views.

COX3DTabViewContainer is quite easy to use. If you have previously worked with the COXTabViewContainer class, then you already know how to use this class because we decided to implement it as close as possible to the existing COXTabViewContainer class. If you haven't used this class yet, then the closest comparison would be to splitter windows.

Using the Class

Here are steps that should be taken in order to deploy TabViews in your application:

First Case: COX3DTabViewContainer will be used as a container for document view(s).

1. Embed a COX3DTabViewContainer member variable in the parent frame (main frame window for SDI application, MDIChild window for MDI application).
2. Override the parent frame's CFrameWnd::OnCreateClient() member function.
3. From within the overridden OnCreateClient, call the Create() member function of COX3DTabViewContainer. In this function, you have to specify the parent window and optionally you can specify the initial rectangle, window styles and window ID. This function is where you can specify Tab control styles that define the way tab buttons are positioned and displayed.
4. If you plan to assign images to TabView pages, you have to create and load the image list with images and associate it with the COX3DTabViewContainer object using the CTabCtrl::SetImageList() function.
5. After the COX3DTabViewContainer window is successfully created, you can populate it with window objects using AddPage() or InsertPage() functions. If you are inserting a view object, you have to specify the runtime class and context information in order to keep the document/view architecture in place. If you are adding a window object that is not a document view, then you have to create it before adding it to COX3DTabViewContainer window. In AddPage() or InsertPage() functions, you can specify text that will be used as the page title in the corresponding tab button. Also, you can specify the index of image in the tab control image list that should be displayed in the tab button.

Second Case: COX3DTabViewContainer will be used as a container for windows within a control bar.

1. Create your own CControlBar-derived class (you can use our COXSizeControlBar as the parent class if you need sizable docking windows). Let's call it CMyControlBar.
2. Embed a COX3DTabViewContainer member variable in this class.
3. Override the CMyControlBar::OnCreate() member function.
4. From within the overridden OnCreate(), call the Create() member function of the COX3DTabViewContainer class. In this function, you have to specify the parent window and optionally you can specify the initial rectangle, window styles and window ID. This function is the place where you can specify Tab control styles that define the way tab buttons are positioned and displayed.
5. If you plan to assign images to TabView pages, then you have to create and load image list with images and associate it with the COX3DTabViewContainer object using the CTabCtrl::SetImageList() function.
6. After the COX3DTabViewContainer window is successfully created, you can populate it with window objects using AddPage() or InsertPage() functions. You have to create the window object before adding it to the COX3DTabViewContainer. In the AddPage or InsertPage functions, you can specify text that will be used as the page title in the tab button. Also, you can specify the index of image in the tab control image list that should be displayed in the tab button.
7. Override the CMyControlBar::OnSize() member function and resize the COX3DTabViewContainer object as appropriate

Note that any child window can be used as a COX3DTabViewContainer page.

The steps that should be taken in order to implement COX3DTabViewContainer in a CControlBar derived window can be applied in the general case too. We just decided to show it using CControlBar derived window because we think it's going to be used as the parent window for COX3DTabViewContainer in most cases.

Above, we described the process of creating and populating the COX3DTabViewContainer object. In most cases that would be all the code you need. For those who need to change dynamically the contents of the COX3DTabViewContainer object, we provide the following functions.

• In order to remove any page at run time you have to use DeletePage() function.
• To set/retrieve the page title that is displayed in the corresponding tab button, use the GetPageTitle() and SetPageTitle() functions.
• To set/retrieve the active page index call the GetActivePageIndex() and SetActivepageIndex() functions.

Refer to the class reference for the full list with description for all public functions.

History

Initial CodeProject release August 2007.