Click here to Skip to main content
Click here to Skip to main content

The Ultimate Toolbox 3D Tab Views

, 25 Aug 2007 CPOL
Rate this:
Please Sign up or sign in to vote.
COX3DTabViewContainer can be used to provide tabbed window support to document views and control bars

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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

The Ultimate Toolbox
Web Developer
Canada Canada
In January 2005, David Cunningham and Chris Maunder created TheUltimateToolbox.com, a new group dedicated to the continued development, support and growth of Dundas Software’s award winning line of MFC, C++ and ActiveX control products.
 
Ultimate Grid for MFC, Ultimate Toolbox for MFC, and Ultimate TCP/IP have been stalwarts of C++/MFC development for a decade. Thousands of developers have used these products to speed their time to market, improve the quality of their finished products, and enhance the reliability and flexibility of their software.
Group type: Organisation

394 members


Comments and Discussions

 
QuestionDisplay different Tabs with different views of Single View PinmemberMember 400907131-Jan-12 3:53 
QuestionHow to catch the TCN_SELCHANGE Notification???? Pinmembermalfaro17-Nov-10 11:58 
Generalscrollbars in tabviewcontainer [modified] Pinmembergrandmasta121-Sep-08 2:12 
GeneralRe: scrollbars in tabviewcontainer PineditorTim Deveaux23-Sep-08 10:16 
GeneralRe: scrollbars in tabviewcontainer Pinmemberpatrick_f14-Jan-10 5:36 
GeneralRe: scrollbars in tabviewcontainer Pinmembergrandmasta114-Jan-10 6:30 
GeneralRe: scrollbars in tabviewcontainer Pinmemberpatrick_f14-Jan-10 23:09 
GeneralProblems with skins Pinmembermalfaro30-May-08 11:30 
GeneralRe: Problems with skins PineditorTim Deveaux1-Jun-08 15:13 
GeneralRe: Problems with skins Pinmembermalfaro2-Jun-08 6:59 
GeneralRe: Problems with skins PineditorTim Deveaux4-Jun-08 15:34 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.141223.1 | Last Updated 25 Aug 2007
Article Copyright 2007 by The Ultimate Toolbox
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid