Join Now

Insert Multiselection list into GUI

Carbider | 06 November, 2007 11:09

One of my favorite classes that Symbian grants to build User Interface is Multiselection List. I’ve learned about it recently.

This is a type of Vertical lists which draws a set of elements each of them can be marked by checkbox.

 

At future BluSPAN GUI there is “Chat settings” view. User can determine which types of files can be accepted by chat. Example: .bmp, .jpeg, .avi, .mpeg,  wav and so on. See diagram 1.

 

 

 

Diagram 1 – Multiselection list at Chat settings view.

 

To build Multiselection List into my application I had to read about a lot of stages how to use it.

I divided this stages to:

» Defining Multiselection List in resource (.rss) file

» Code implementation in source (.cpp) to Popup it.

» Get results of user choice.

 

1. Defining Multiselection List in .rss file

 

I’ve read the Resources_Dialogs.pdf at S60_Platform_Avkon_UI_Resources documentation series. Upon this I’ve formed the resource definition as below:

Listing 1

// Multiselection list query dialog

RESOURCE DIALOG r_accept_type_multiselection_query

{

   flags = EGeneralQueryFlags;

   buttons = R_AVKON_SOFTKEYS_OK_CANCEL;

   items =

   {

   DLG_LINE

   {

   type = EAknCtListQueryControl;

   id = EListQueryControl;

   control = AVKON_LIST_QUERY_CONTROL

   {

   listtype = EAknCtSingleGraphicPopupMenuListBox;

   listbox = LISTBOX

   {

   flags = EAknListBoxMultiselectionList;

   height = 3;

   width = 3;

   array_id = r_accept_types_multiselection_query_list_item;

   };

   heading = "Select types:";

   };

   }

   };

}

RESOURCE ARRAY r_accept_types_multiselection_query_list_item

{

   items =

   {

   LBUF { txt = "1t.Bmp"; },

   LBUF { txt = "1t.Jpg"; },

   LBUF { txt = "1t.Avi"; },

   LBUF { txt = "1t.Mp3"; },

   LBUF { txt = "1t.Wav"; }

   };

}

I have put this listing  to [project_name].rss  file. After that you can call ExecuteLD() function with Reference to this resource object. This will be shown below.

2. Popuping list. Code implementation.

With UI designer help, choose the Event tab for “Accept types” menu item. Double click on event to generate Handler function.

In this function we need to create an Instance of CAknListQueryDialog class and Execute it. The source code below shows it.

 

Listing 2

// Run a dialog of “Acceptance of data types”

CArrayFixFlat<TInt>* indexArray = new(ELeave)CArrayFixFlat<TInt>(5);

CleanupStack::PushL(indexArray);

CAknListQueryDialog* dlg = new (ELeave)

CAknListQueryDialog(indexArray);

              

if ( dlg->ExecuteLD(R_ACCEPT_TYPE_MULTISELECTION_QUERY ) )

{

    Here we will take results of User’s choice

}

CleanupStack::PopAndDestroy();// indexArray

By this code the Multiselection List will Popup and user can mark preferable items.

3. Geting results of user choice

That task was not easy due to Specific Array type of CArrayFixFlat<TInt>. I could not retrieve data from it. I found a way with help of the similar topic of this forum.

The source code below should be placed at Listing 2 to the “if ( dlg->ExecuteLD)” branch. This source code takes result from List and shows indexes of selected items on screen (diagram 2).

Listing 3

if ( dlg->ExecuteLD(R_ACCEPT_TYPE_MULTISELECTION_QUERY ) )

{

TBufC<136> resultString;

TPtr ptr = resultString.Des();

                         

//temporary string to convert from TInt to text

TBufC<136> temporaryString;

TPtr ptrTemporaryString = temporaryString.Des();

TInt intValue;

                         

//How much elements did user select from Multiselection list

TInt elementsAmount = indexArray->Count();

                         

//Retrieve all element that user have picked up

for (TInt elementI = 0; elementI < elementsAmount; elementI++) {

intValue = (*indexArray)[elementI];

ptrTemporaryString.Format(_L("%d "), intValue);

ptr.Append(temporaryString);

}

                         

//Show the elements user have picked up

CAknInformationNote* Notelnformation;

Notelnformation = new (ELeave) CAknInformationNote;

Notelnformation ->ExecuteLD(resultString);

} // If

 

Diagram 2 – Results of user’s choice. Indexes of selected items

Download source code here: guiSetBluspan Zip Archive v 0.002 (Nokia’s wiki)

See this posts here to know how to use sources.

 

S60, Symbian C++, Testing | Permalink | Comments (1) | Trackbacks (0)

 
 
Powered by LifeType