Carbide.c++ Tutorial 3 - Using List view

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 Example

Source file: Media:Listviewdemo.zip

---

Article

Created: vdharankar (08 Sep 2009)

Last edited: hamishwillee (14 Feb 2012)

Overview

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.

Prerequisite

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.

  

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.

   

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.

   

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".

   

2. Once the item is added it appears as follows

   

3. Now you can double click on item and then edit the title of the item.

   

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.

   

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

   

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.

   

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. 

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.

  

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

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.

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

You will landup with the event handler method.

Now add the code as shown in the figure below.

Step 5 - Running the application

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

Conclusion

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

File:Listviewdemo.zip

Carbide.c++ Tutorials