How to implement vertical option list

From Forum Nokia Wiki

Reviewer Approved

ID		Creation date	September 29, 2009
Platform	Symbian	Tested on devices	S60
Category	Symbian C++	Subcategory	S60 2nd Edition

Keywords (APIs, classes, methods, functions): CAknSingleGraphicStyleListBox, CTextListBoxModel, CDesCArray

Overview

Vertical option list is a set of vertically arranged “radio” buttons — i.e. a group of options which supports selection from a group of mutually exclusive options. At any time, only one option may be set; this is known as the selected option. This articles describes how to create such a list by standard S60 list-box.

Solution

First we create a normal selection list-box of type CAknSingleGraphicStyleListBox,

void CZoyvlyooListBox::InitializeControlsL()
	{
	iListBox = new ( ELeave ) CAknSingleGraphicStyleListBox;
	iListBox->SetContainerWindowL( *this );
		{
		TResourceReader reader;
		iEikonEnv->CreateResourceReaderLC( reader, R_ZOYVLYOO_LIST_BOX_LIST_BOX );
		iListBox->ConstructFromResourceL( reader );
		CleanupStack::PopAndDestroy(); // reader internal state
		}
	...

and then we add two icons ( selected and unselected) to its icon array.

void CZoyvlyooListBox::SetupListBoxIconsL()
	{
	CArrayPtr< CGulIcon >* icons = NULL;		
	icons = new (ELeave) CAknIconArray( 2 );
	CleanupStack::PushL( icons );
	// for EListBoxZoyvlyooRationonIndex
	icons->AppendL( CEikonEnv::Static()->CreateIconL(
			KZoyvlyooFile, EMbmZoyvlyooRationon ) );
	// for EListBoxZoyvlyooRationoffIndex
	icons->AppendL( CEikonEnv::Static()->CreateIconL(
			KZoyvlyooFile, EMbmZoyvlyooRationoff ) );
	CleanupStack::Pop( icons );
 
	if ( icons != NULL )
		{
		iListBox->ItemDrawer()->ColumnData()->SetIconArray( icons );
		}
	}

As we know the item format string of CAknSingleGraphicStyleListBox is "Icon\tText", let's assume that the first item (option) is selected by default, then we append several options to the list, and then we use iSelectedOption to remember the index of the current selected option.

...
AddListBoxItemL(iListBox, _L("0\tItem1")); // zero is the index of the "selected" icon
AddListBoxItemL(iListBox, _L("1\tItem2")); // one is the index of the "unselected" icon
AddListBoxItemL(iListBox, _L("1\tItem3"));
...
iSelectedOption = 0;
...
void CZoyvlyooListBox::AddListBoxItemL(
		CEikTextListBox* aListBox,
		const TDesC& aString)
	{
	CTextListBoxModel* model = aListBox->Model();
	CDesCArray* itemArray = static_cast< CDesCArray* > ( model->ItemTextArray() );
	itemArray->AppendL( aString );
	aListBox->HandleItemAdditionL();
	}

Whenever the user selects a new option we first set the icon of the previous selected option to "unselected", and then set the icon of the selected option to "selected", and don't forget to update the iSelectedOption.

void CZoyvlyooListBox::HandleListBoxEnterKeyPressedL( 
		CEikListBox* aListBox, 
		TListBoxEvent anEventType)
	{
	// TODO: implement enterKeyPressed event handler
	if((anEventType==EEventEnterKeyPressed)
	 ||(anEventType==EEventItemClicked))
		{
		TInt index = aListBox->CurrentItemIndex();
		if(index!=iSelectedOption)
			{
			CTextListBoxModel* model = static_cast<CTextListBoxModel*>(aListBox->Model());
			CDesCArray* itemArray = static_cast< CDesCArray* > ( model->ItemTextArray() );
				{
				TPtrC ptr = (*itemArray)[iSelectedOption];
				_LIT(KSeparater, "\t");
				TInt i = ptr.Find(KSeparater);
				ptr.Set(ptr.Right(ptr.Length()-i-1));
				TBuf<512> listString; 
				CreateListBoxItemL( listString, EListBoxZoyvlyooRationoffIndex, ptr);
				itemArray->Delete(iSelectedOption);
				itemArray->InsertL(iSelectedOption, listString);
				aListBox->HandleItemAdditionL();
				}
				{
				TPtrC ptr = (*itemArray)[index];
				_LIT(KSeparater, "\t");
				TInt i = ptr.Find(KSeparater);
				ptr.Set(ptr.Right(ptr.Length()-i-1));
				TBuf<512> listString; 
				CreateListBoxItemL( listString, EListBoxZoyvlyooRationonIndex, ptr);
				itemArray->Delete(index);
				itemArray->InsertL(index, listString);
				aListBox->HandleItemAdditionL();
				}
			iSelectedOption = index;
			}
		}
	}