From Forum Nokia Wiki

Contents 1 Introduction 2 Files and library 3 Construction 4 Operations 5 Tips

Introduction

The following article shows what operations can be done on tabs. Tabs are UI components which facilitate easier navigation just by pressing the joystick left or right. Tabs are shown in the navigation pane and navigation pane itself is a part of the status pane.

Individual tab units can be either long or short. They can have simple labels or icons on them.

Files and library

Following are the header files required: eikspane.h, aknnavide.h, akntabgrp.h

Link against: avkon.lib , eikcore.lib

Construction

Tabs can be constructed in the AppUi or the container of a particular view. The resources for the status pane and the tab group are as follows:

RESOURCE STATUS_PANE_APP_MODEL r_myview_status_pane
{
    panes=
        {
        SPANE_PANE
            {
            id = EEikStatusPaneUidNavi;
            type = EAknCtNaviPane;
            resource = r_myview_navi_decorator;
            }
        };
}
 
RESOURCE NAVI_DECORATOR r_myview_navi_decorator
{
    type = ENaviDecoratorControlTabGroup;
    control = TAB_GROUP
    {
        tab_width = EAknTabWidthWithTwoTabs;  // two tabs
        active = 0;
        tabs = {
            TAB
                {
                id = EMyViewView1Tab; // from application hrh
                txt = qtn_view1_tab;
                },
            TAB
                {
                id = EMyViewView2Tab;
                txt = qtn_view2_tab;
                }
            };
    };
}

if ( !iNaviPane )
{
    CEikStatusPane *sp = 
    ( ( CAknAppUi* )iEikonEnv->EikAppUi() )->StatusPane();
        
    iNaviPane = ( CAknNavigationControlContainer * )
    sp->ControlL( TUid::Uid( EEikStatusPaneUidNavi ) );
}
 
iNaviDecorator = iNaviPane->CreateTabGroupL();
 
CAknTabGroup * tabGroup = (CAknTabGroup*) iNaviDecorator->DecoratedControl();
 
iNaviPane->PushL(*iNaviDecorator);

Operations

The following operations can be performed:

• Add new tab

void CMyContainer::AddNewTabL(TInt aTabid)
{
	// get a pointer to the tab group
	CAknTabGroup* tabGroup = (CAknTabGroup*) iNaviDecorator->DecoratedControl();
 
	// format the string of text to appear in the new tab
	TBuf<10> temp;
	temp.Format(_L("%d"), aTabid + 1);
 
	// add the new tab to the end, and make it active
	tabGroup->AddTabL(aTabid, temp);
	tabGroup->SetActiveTabById(aTabid);
	SetTitle(aTabid,2);
}

• Moving to a particular tab (activating it)

TBool CMyContainer::SetActiveTab(TUid aTab)
{
	// get a pointer to the tab group
	CAknTabGroup* tabGroup = (CAknTabGroup*) iNaviDecorator->DecoratedControl();
	TInt iTabInt = aTab.iUid;
	tabGroup->SetActiveTabById(iTabInt);
	SetTitle(iTabInt,2);
	return ETrue;
}

• Hide tabgroup

void CMyContainer::HideTabs()
{
	iNaviPane->Pop();
}

• Show tabgroup

void CMyContainer::ShowTabs()
{
	iNaviPane->PushL(*iNaviDecorator);
}

• Set title of a particular tab

void CMyContainer::SetTitle(TInt aTabid, TInt aView)
{
    CEikStatusPane* sp = iEikonEnv->AppUiFactory()->StatusPane();
    iTitlePane = ( CAknTitlePane*)
    sp->ControlL(TUid::Uid(EEikStatusPaneUidTitle ));
 
    TBuf<10> temp;
 
    if( aView == 2)
	temp.Format(_L("Buddy %d"),aTabid+1);
    else
	temp.Copy(_L("MyView"));
 
    iTitlePane->SetTextL(temp);
}

• Which is the currently active tab

TInt CMyContainer::ActiveTab()
{
    CAknTabGroup* iTabGroup = 
    (CAknTabGroup*) iNaviDecorator->DecoratedControl();
 
    return iTabGroup->ActiveTabId();
}

• Moving between tabs

TKeyResponse CMyContainer::OfferKeyEventL(const TKeyEvent& aKeyEvent, TEventCode aType)
{
if (aType != EEventKey)
{ 
	return  EKeyWasNotConsumed;  
} 
 
CAknTabGroup* iTabGroup = (CAknTabGroup*) iNaviDecorator->DecoratedControl();
if ( iTabGroup == NULL )
	{
	return EKeyWasNotConsumed;
	}
 
TInt active = iTabGroup->ActiveTabIndex();
TInt count = iTabGroup->TabCount();
 
switch ( aKeyEvent.iCode )
	{
	case EKeyLeftArrow:
		if ( active > 0 )
			{
			active--;
			iTabGroup->SetActiveTabByIndex( active );
			}
		break;
	case EKeyRightArrow:
		if( (active + 1) < count )
			{
			active++;
			iTabGroup->SetActiveTabByIndex( active );
			}
		break;
	default:
		return EKeyWasNotConsumed;
		break;
	}
 
return EKeyWasConsumed;
}

Tips

It may be a requirement that the tabs should not be shown when in a particular view. In such case in the views DoDeactivateL do the following

void CMyView::DoDeactivate()
{	
    iContainer->HideTabs();
    iContainer->SetTitle(1,1);
}