Today we will continue our exploration into the wonderful world of different list types of the Bada user interface! Today’s topic are the expandable lists. You will see some sample code of a quick app projects that lists all (most) world countries and “groups” them into expandable continents.

However, first, I have to clarify something regarding my previous post about custom lists (please read that post first!). There I have posted an image of list types that derive from the custom list (including the ExpandableList). Nevertheless, as of RC8, all those lists seem to derive independently from the Osp::Ui::Control class and not from CustomList, although they obviously do share a big part of its functionality.

Now I am not even sure whether it was some glitch in the documentation or if the API really changed that much. If the latter is the case, then it does not make a lot of sense to me, since much of the functionality of those lists can be “shared”.

Oh well, the base class of the ExpandableList is not of much importance here, just remember that a lot of stuff in our example works the same way as in the custom lists. Please read that article first and take into account that we will need to load images (hence you need to link FMedia)!

We start of by finding a huge list of (200+) countries flags with a high-resolution, batch-resizing them (180 x 120 in my example) and placing them into the “/Home/flags/” directory. I may put this project online together with all the flags at a later date, in case you need it

Then we continue by placing an ExpandableList control on our form and modifying the header file of the form to do the following:

• Implement the IExpandableItemEventListener, to capture all kind of touch/click events on the items within the ExpandableList. This includes the implementation of the corresponding OnItemStateChanged() functions, which now (surprise!) also deliver the relevant Index of the selected subitem.
• Define some static integers used to identify the different elements within the different list item types (continent/country)
• Declare two different list item formats (one for the continents and one for the countries)
• Declare two different functions that add items to the list: one for the continents and one for the countries
• Create a member that points at our ExpandableList object

Here is how my header looks like:

#ifndef _EXPFORM_H_
#define _EXPFORM_H_

#include <FBase.h>
#include <FUi.h>
#include <FGraphics.h>
#include <FMedia.h>

class ExpForm :
 public Osp::Ui::Controls::Form,
 public Osp::Ui::IExpandableItemEventListener
{

// Construction
public:
 ExpForm(void);
 virtual ~ExpForm(void);
 bool Initialize(void);

// Implementation
protected:
 static const int LIST_ELEMENT_CONTINENT_TEXT = 101;
 static const int LIST_ELEMENT_COUNTRY_TEXT = 201;
 static const int LIST_ELEMENT_COUNTRY_BITMAP = 203;

 Osp::Ui::Controls::CustomListItemFormat * pContinentListItemFormat;
 Osp::Ui::Controls::CustomListItemFormat * pCountryListItemFormat;
 Osp::Ui::Controls::ExpandableList * pExList;

 result AddContinent(Osp::Base::String name, int continentID);
 result AddCountry(Osp::Base::String name, int countryID, int continentIndex);
// Call-back functions
public:
 virtual result OnInitializing(void);
 virtual result OnTerminating(void);

 virtual void OnItemStateChanged(const Osp::Ui::Control& source, int index, int subindex, int itemId,
 Osp::Ui::ItemStatus status);

 virtual void OnItemStateChanged(const Osp::Ui::Control& source, int index, int subindex, int itemId,
 int elementId, Osp::Ui::ItemStatus status);
};

#endif

Now, we go back to the .cpp file of our form. There, similar to the custom lists, we have to define the custom list item formats. However, in this case, we need two different formats, since the list items used for countries and continents will be different (there is no flag bitmap on the continent list items). All this is placed in the OnInitializing() function.

pExList = static_cast<ExpandableList *>(GetControl(L"IDC_EXPANDABLELIST1"));
 pExList->AddExpandableItemEventListener(*this);

 pCountryListItemFormat = new CustomListItemFormat();
 pCountryListItemFormat->Construct();

 pCountryListItemFormat ->AddElement(LIST_ELEMENT_COUNTRY_TEXT, Rectangle(10,10,180,80),
 34, Color::COLOR_WHITE, Color::COLOR_BLUE);

 pCountryListItemFormat ->AddElement(LIST_ELEMENT_COUNTRY_BITMAP, Rectangle(260,5,180,120));

 pCountryListItemFormat ->SetElementEventEnabled(LIST_ELEMENT_COUNTRY_TEXT, true);

 pCountryListItemFormat ->SetElementEventEnabled(LIST_ELEMENT_COUNTRY_BITMAP, true);

 pContinentListItemFormat = new CustomListItemFormat();
 pContinentListItemFormat->Construct();

 pContinentListItemFormat ->AddElement(LIST_ELEMENT_CONTINENT_TEXT, Rectangle(10,10,180,80),
 34, Color::COLOR_WHITE, Color::COLOR_BLUE);

 pContinentListItemFormat ->SetElementEventEnabled(LIST_ELEMENT_CONTINENT_TEXT, true);

Please note, that the area we reserve for the flag bitmap element (on the countries list items) fits just perfectly the dimensions of out bitmaps. Furthermore we reserve the right to receive notifications, if the user clicks on any of the item’s elements (texts or bitmaps) apart from clicking on the list items as a whole. Although we won’t need it, it is still nice to illustrate it (it is also better to know more than to know less )

Next, let us define the function used to add continents to the list:

result
ExpForm::AddContinent(Osp::Base::String name, int continentID)
{
 CustomListItem * newItem = new CustomListItem();
 newItem->Construct(100);
 newItem->SetItemFormat(*pContinentListItemFormat);
 newItem->SetElement(LIST_ELEMENT_CONTINENT_TEXT, name);
 return pExList->AddItem(*newItem, continentID);
}

It is quiet self-explanatory: we decide which item format to use, the height of the items, set the only element (name of the continent) and add the item to the list.

The next step is a little trickier: the function used to add countries to the list.

result
ExpForm::AddCountry(Osp::Base::String name, int countryID, int continentIndex)
{
 Bitmap* bitmapFlag;
 String flagPath = "/Home/flags/";
 Image* bitmapDecoder = new Image();
 CustomListItem * newItem = new CustomListItem();
 result r = E_SUCCESS;

 flagPath += name;
 flagPath += ".gif";
 bitmapDecoder->Construct();
 bitmapFlag = bitmapDecoder->DecodeN(flagPath, BITMAP_PIXEL_FORMAT_ARGB8888);

 if(!bitmapFlag)
 {
     AppLog("Could not load: %S", flagPath.GetPointer());
     r = E_IO;
 }
 else
 {
     newItem->Construct(130);
     newItem->SetItemFormat(*pCountryListItemFormat);

     newItem->SetElement(LIST_ELEMENT_COUNTRY_TEXT, name);

     newItem->SetElement(LIST_ELEMENT_COUNTRY_BITMAP, *bitmapFlag, bitmapFlag);

     r = pExList->AddSubItem(continentIndex, *newItem, countryID);
 }

 delete bitmapFlag;
 delete bitmapDecoder;

 return r;
}

This function loads the relevant flags by directly matching the country name to the corresponding flag GIF image. In case of success we set the two different elements (country name and its flag) and add the subitem to the corresponding continent item by using AddSubItem(). Note, that we need more height (130 px) to accommodate the flag image. Also please note, that we use the same bitmap for passive and active states of the item, since it is irrelevant to us how the image looks like in different states.

Now, all we need to do is adding the countries and the continents to the list. I have placed this code at the end of OnInitializing() method of the form class. I will not paste all those hundreds of repetitive lines of code (besides there exist far more elegant solutions!), nevertheless here is something to give you an idea:

AddContinent("Africa",0);
 AddContinent("Asia",1);
 AddContinent("Europe",2);
 AddContinent("North America",3);
 AddContinent("Oceania",4);
 AddContinent("South America",5);

 AddCountry("Algeria",    0    ,    0    );
 AddCountry("Angola",    1    ,    0    );
 // Many others follow! ...

Build it and run it! Here are a few beautiful screenshots of our continents/countries expandable list:

This is so cool! In case anybody needs to have/see the whole project, just say it, I may publish it at a later date.

Stay tuned!

Related posts:

1. Bada Tutorial: UI Lists (part 2) – Custom List
2. Tutorial: How to manage large lists in Bada UI – the SlidableList
3. Bada Tutorial: UI Lists (part 1)