Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries. Thanks for all your past and future contributions.

Carbide.c++ Tutorial 3 - Using List view

From Wiki
Jump to: navigation, search

This Symbian C++ code example shows how to create a List view using the Carbide.c++ UI designer. It also shows how to do the event handling using UI designer.

Article Metadata
Code ExampleArticle
Created: vdharankar (08 Sep 2009)
Last edited: hamishwillee (14 Feb 2012)



In the tutorial 1 and tutorial 2 we have seen how to create basic hello world application and how to get the input. This tutorial shows and explains an example, how to use list views and how to do event handling within the UI Designer.


See this tutorial first in order to understand basics of creating and running an application: Carbide.c++ Tutorial 1 - Helloworld

Step 1 - Start a new project

  • Start with a new project using Carbide.c++ IDE, call it "listdemo" ( or whatever you like).
    Once you are done with all basic steps you will see this window.
    Lisdemo 1.JPG

In this step instead of selecting the empty container,

  1. Select list box and click next.
  2. In next step select the type of list box.
  3. There are several types of list boxes possible for our example we are selecting "Double Large" list box.
    Lisdemo 2.JPG
  4. Next you can go on selecting defaults for all other steps or directly click finish button at this step.
    The List box type can be changed after creating project also from UI designer as shown in figure.
    Lisdemo 3.JPG

Step 2 - Add list box items

  1. Now add the list box items by right clicking inside the list box empty container.
    The pop up menu shows an option as shown in figure. Select "Add list box item".
    Lisdemo 4.JPG
  2. Once the item is added it appears as follows
    Lisdemo 5.JPG
  3. Now you can double click on item and then edit the title of the item.
    Lisdemo 6.JPG

Step 3 - Changing the Image of the list item

  1. Right click on the item and select the option "Edit image properties" from the pop up menu.
    You should see the screen as below.
    Lisdemo 7.JPG
  2. Select the button "Edit MBM/MIF File" to add a new image.
  3. To add the image following requirements are there
    1. It should be either in bmp or in svg format.
    2. Should be placed in "gfx" folder
  4. After clicking the button you will go to following screen
    Lisdemo 8.JPG
  5. Now click on "Add from project" button to add a new image to the MBM file (MBM file stores resources).
    You should see following screen.
    Lisdemo 9.JPG

You will see all available images those can be added, in the dialog.

  • Now select the image to be added and click ok.

Usually for every image two parts are required.

  1. Main image
  2. Mask image (back and white version of same image) with color depth of 2/4 bits.

In our case we have only he main image and not the mask. After adding image it will appear in the list.

  1. Lisdemo 10.JPG

Now this image can be set to any of the list item.

  • Now click ok you will come to the "Edit image properties" screen again.
    Now select the newly added image from the combo box and click "ok" button as follows.
    Lisdemo 11.JPG

You will see the newly added image appearing on the list item. Lisdemo 12.JPG

Step 4 - Handling the Item selection event

After adding item and changing the image add the event handler for selection as follows.

Select the list box and go to the events window as shown.

Lisdemo 13.JPG

Now double click on the "enterKeyPressed" event to add the handler. 

Lisdemo 15.JPG

You will landup with the event handler method.

Now add the code as shown in the figure below.

Lisdemo 15A.JPG

Step 5 - Running the application

Now run the application and you will see the following output.

Lisdemo 16.JPG


This way the list box based applications can be developed very easily with a little efforts. Carbide.c++ UI designer has got very good capabilities to handle the UI behind code automatically.

Source code

Carbide.c++ Tutorials

This page was last modified on 14 February 2012, at 04:17.
61 page views in the last 30 days.