Displaying Tabs in the Navigation Pane
This occurs when handling the NaviPane Tabs item on the Options menu, in
CTitlePaneAppUi::HandleCommandL():
[View full width]
void CTitlePaneAppUi::HandleCommandL(Tlnt aCommand)
switch (aCommand) {
// display two tabs in the navigation pane case ETitlePaneSetNaviPane: {
TUid naviPaneUid;
naviPaneUid.iUid = EEikStatusPaneUidNavi;
CEikStatusPane* statusPane = StatusPaneQ;
CEikStatusPaneBase::TPaneCapabilities subPane = statusPane->PaneCapabilities (naviPaneUid);
// if we can access the navigation pane if (subPane.lsPresent() && subPane.IsAppOwnedO) {
CAknNavigationControlContainer* naviPane = CAknNavigationControlContainer*) statusPane->ControlL(naviPaneUid);
delete ¡NaviDecorator; ¡NaviDecorator = NULL;
// ownership is transferred to us here ¡NaviDecorator = naviPane->CreateTabGroupL();
// ownership is not transferred here
CAknTabGroup* tabGroup = (CAknTabGroup*) ¡NaviDecorator->DecoratedControl();
// Display two tabs of normal length on the navigation pane at a time tabGroup->SetTabFixedWidthL(KTabWidthWithTwoTabs);
// load the text to be displayed in the tabs
HBufC* tab 1 Text = StringLoader::LoadLC(R_TAB1_TEXT);
tabGroup->AddTabL(tabld++, *tab1 Text);
CleanupStack::PopAndDestroy(tab1Text);
HBufC* tab2Text = StringLoader::LoadLC(R_TAB2_TEXT); tabGroup->AddTabL(tabld++, *tab2Text); CleanupStack::PopAndDestroy(tab2Text);
// highlight the first tab tabGroup->SetActiveTabBylndex(0);
naviPane->PushL(*iNaviDecorator);
break;
First a pointer to the navigation pane is obtained by calling the status pane's ControlL() method, passing the navigation pane's ID as an argument. After checking that the navigation pane exists and that applications can interact with it, the navigation pane's CreateTabGroupL() method is then used to create a new navigation decorator that contains a tab group. You can then use this tab group to add tabs to the navigation control.
In the TitlePane example, two tabs are added to the tab group, and the first tab is set to be active using the
SetActiveTabBylndex() method. This highlights the tab with the specified index, which in this case is the first one. Finally, the tab group is pushed onto the navigation pane's object stack. You must do this for the tab group to actually appear on the navigation pane.
It is also possible to display a bitmap in a tab. To achieve this, use the appropriate overload of theAddTabL() method:
// load the bitmap to be displayed in the tabs
CFbsBitmap* bitmap = ¡EikonEnv->CreateBitmapL(KTitleBitMapFile, EMbmTitlepaneTab);
// display a bitmap in the tab tabGroup->AddTabL(tabld++, bitmap);
Here, the bitmap variable is a pointer to a bitmap of type CFbsBitmap*.
You can control the number and size of the tabs displayed on the navigation pane by using the CAknTabGroup::SetTabFixedWidthL() method. This allows you to have anywhere between one and four tabs displayed on the navigation pane, and these can be either long or short tabs. The type of tabs you use will depend on the information you want to display in them. Long tabs have more space, making it easier to display text. When using long tabs, however, the currently highlighted tab will obscure most of the area available for the remaining tabs. This means that the user will not be able to see the text or images contained in the other tabs. Short tabs, on the other hand, have a much more limited amount of space available, but they will not obscure the other tabs, giving the user a better view of the available options.
Although you are limited to displaying a maximum of four tabs on the navigation pane at any point in time, you can actually have more tabs than this. Scroll indicators will automatically be displayed if there are more tabs available than are displayed on the navigation pane. The user will then be able to scroll to any of the available tabs. It is generally recommended, though, that you keep the total number of tabs low—six tabs is the recommended maximum.
In Series 60 1.x, tabs always appear in a left-to-right order. The leftmost tab is always the first tab, and the rightmost is always the last tab. Series 60 2.x provides support for bidirectional text (in other words, support for languages that read right-to-left), which means that the order of tabs may be reversed, depending on the locale.
When the tabs are reversed (mirrored), they are traversed from right-to-left. In order to support bidirectional text, you should now pass key events on to the tab group, and then let the tab group notify your application if the view changes, rather than handle tab changes yourself. The old key-handling logic will still work in Series 60 2.x if used, but tabs won't be mirrored correctly if a mirrored language is used.
It is up to you to implement the code allowing the user to switch between tabs. For example: TKeyResponse CTitlePaneAppUi::HandleKeyEventL(
const TKeyEvent& aKeyEvent, TEventCode aType)
return EKeyWasNotConsumed; }
CAknTabGroup* tabGroup = (CAknTabGroup*)iTabDecorator->DecoratedControl();
return EKeyWasNotConsumed; }
return tabGroup->OfferKeyEventL(aKeyEvent, aType);
This function checks whether the navigation decorator exists, then obtains the tab group from it. If either of these operations fails, it means that a tab group is not available, and that the control event cannot be processed by this function. In this case, the function then returns EKeyWasNotConsumed. Otherwise, the key press is passed on to the tab group, and it will handle switching tabs.
The application Ill's HandleKeyEventL() method will be called if none of the controls on the Control Stack consume the event. See the CAknTabGroup help page in the SDK documentation for a full list of methods available.
The NavigationPane example illustrates how to display tabs, a label, or an image in the navigation pane using resources, as shown in Figure 5-20.
- Figure 5-20. Navigation pane display options in NavigationPane.
The navigation pane in the NavigationPane example initially displays two tabs that are defined using resources. The Options menu also has a Set NaviPane Tabs item, which you can use to display the tabs in the navigation pane.
Post a comment