Subclassing List Box in Symbian OS

This article explains how to subclass a list box in Symbian OS, especially in UIQ. One reason to subclass a list box is to have our own custom list box, for example you can display a double line list box (see Figure 1a). I will focus the discussion in this article on UIQ because Series 60 has already various types of list box, for instance CAknDoubleStyleListBox, CAknSingleHeadingStyleListBox, etc. In most cases, you can use one of these classes.However, in a few cases, you might need to subclass list box in Series 60 as well.

I will start this article with the architecture of list box in Symbian and then go through how to subclass a list box. At the end of this article, I will give a simple example of custom list box and how to use it (with the complete source code).

Before reading this article, I have a small comment. If you just want to port a Series 60 application that uses CAknXXXListBox to UIQ, there is a faster way. You might consider a tool called S2U, which is able to port Series 60 user interface to UIQ (see Further Reading section at the end of this article).


Architecture of List Box in Symbian

I won't discuss the architecture of Symbian list box in more detail (read one of the references at the end of this article if you want to know more about it). Like any other components in Symbian, the list box uses MVC (Model-View-Controller) model. Figure 2 shows the MVC model of the list box in Symbian.



As you can see here, the "controller" in this MVC model is CEikListBox. This is the class that you have to create to display a list box, although usually you will use one of its derived classes, for instance CEikTextListBox, CEikColumnListBox and CEikSnakingListBox.

The "model" of the list box, i.e. MListBoxModel, stores the data of your items. Basically it allows you to get and set the items of the list box. Since MLlistBoxModel is an interface, we have to create a model using one of its derived classes, for instance CTextListBoxModel.

The "view", i.e. CListBoxView, handles all the user interface stuff and displays the list box on the screen. Like the controller and the model, there are some derived classes of CListBoxView, for example CTextListBoxView.

From the controller class, CEikListBox, you can get the model using CEikListBox::Model() and get the view using CEikListBox::View(). This why you don't need to save the instance of the model and view in your application, you need to save the instance of the controller only.


Download

Click the icon below to download the example of custom list box and how to use it.

MyListBox.zip (18 KB)