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.
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).
In this step instead of selecting the empty container,
- Select list box and click next.
- In next step select the type of list box.
- There are several types of list boxes possible for our example we are selecting "Double Large" list box.
- Next you can go on selecting defaults for all other steps or directly click finish button at this step.
Step 2 - Add list box items
- Now add the list box items by right clicking inside the list box empty container.
- Once the item is added it appears as follows
- Now you can double click on item and then edit the title of the item.
Step 3 - Changing the Image of the list item
- Right click on the item and select the option "Edit image properties" from the pop up menu.
- Select the button "Edit MBM/MIF File" to add a new image.
- To add the image following requirements are there
- It should be either in bmp or in svg format.
- Should be placed in "gfx" folder
- After clicking the button you will go to following screen
- Now click on "Add from project" button to add a new image to the MBM file (MBM file stores resources).
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.
- Main image
- 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.
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.
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.
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.