×
Namespaces

Variants
Actions
Revision as of 01:13, 11 October 2012 by hamishwillee (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

Archived:Adding icon to QComboBox

From Nokia Developer Wiki
Jump to: navigation, search

Archived.pngArchived: This article is archived because it is not considered relevant for third-party developers creating commercial solutions today. If you think this article is still relevant, let us know by adding the template {{ReviewForRemovalFromArchive|user=~~~~|write your reason here}}.

Qt Quick should be used for all UI development on mobile devices. The approach described in this article (using C++ for the Qt app UI) is deprecated.

Article Metadata
Code ExampleTested with
Devices(s): Nokia N8
Compatibility
Platform(s): Symbian, Maemo
Symbian
Article
Keywords: QComboBox, QIcon, QPixmap, QTabView
Created: weiwei2 (30 Nov 2010)
Last edited: hamishwillee (11 Oct 2012)

Contents

Introduction

This article shows how to use QComboBox in your Qt mobile app. Its aim is to complement the documentation about QComboxBox by citing a typical use case where user add a list of items to the combobox, how to response to the selected item, and how to add icon or image to the QComboBox by using QIcon.


Prerequisites

You should be familiar with Qt as well as some experience with Qt C++. Full documentation about QComboBox is available at the QComboBox Class Reference. This article is based on Qt version 4.7.0 and Qt 4.7 for Symbian^3 Developer Edition, and has been developed on a desktop. You are able to run the code on a Symbian^3 device such as N8.

Goal

The QComboBox widget is a combined button and popup list. It provides a means of presenting a list of options to the user in a way that takes up the minimum amount of screen space.

QComboBox with plain text, image icon and colour filled icon

There are various applications that benefit from the ability to let user choose items from a combo box. In the example shown above, the combo box can consists of just plain text, plain text with image icon, or plain text with colour filled icon. The sample application is a BMI calculator and uses QTabView and its use case explanation is beyond the scope of this article. However, the code used is straightforward and should be usable for the reader to find out use case of other UI controls such as how to use tab view for the application. In the example, the QTabView is used to provide three different tab to the application.

Populating the QComboBox

In this article, three combo box have been created by using Qt Designer. They are named comboBoxBreakfast, comboBoxLunch and comboBoxDinner respectively. The first action needed after that is to populate the combo box with data (known as item in the documentation). The fastest way to populate it with just plain text items is by using the QStringList. The code snippet below shows how to do it.

QStringList breakfastlist;
breakfastlist << "Porridge" << "Full English" << "Noodle" << "Roti Canai";
ui->comboBoxBreakfast->addItems(breakfastlist);

Note.pngNote: QComboBox uses a zero based index. As such, the 'porridge' is item at index 0, 'Full English' is item 1 and follows on.

Adding Colour Filled Icon

We will use QPixmap and QIcon to add a simple color filled icon to the 3rd combo box in the example, which is list of dinner item We first define QPixmap object for red, green and blue color. Subsequently, we add one item at each time to the combo box, by creating a QIcon object with the QPixmap object, as shown by the code snippet below

QPixmap red( 40, 40 );
QPixmap green( 40, 40 );
QPixmap blue( 40, 40 );
red.fill( Qt::red );
green.fill( Qt::green );
blue.fill( Qt::blue );
 
ui->comboBoxDinner->addItem(QIcon(green),"Sandwich");
ui->comboBoxDinner->addItem(QIcon(red),"Pasta");
ui->comboBoxDinner->addItem(QIcon(red),"Economy Rice");
ui->comboBoxDinner->addItem(QIcon(green),"Skipped");


Adding Image Icon

Finally, here is how to add your own image as icon to the QComboBox. In fact this is the original objective of writing this article. I couldn't find a code example that actually shows how to use our own image as icon in a QComboBox easily and i actually spent quite some time to look for the information and make it work.

Firstly, we create some image icons by loading image into QIcon. Take note of the semicolon needed in front of the file path If one only put the file path, the image is simply not loaded into QIcon

QIcon sandwichIcon(":/images/sandwich.png");
QIcon steakIcon(":/images/steak.png");
QIcon burgerIcon(":/images/burger.png");

Note.pngNote: The images have to be added to the project's resources before they can be used. Please refer to the source code to see how the images are included as resources.

After we created all the QIcon icons, we simply use them one by addItem() method

ui->comboBoxLunch->addItem(sandwichIcon,"Sandwich");
ui->comboBoxLunch->addItem(steakIcon,"Steak");
ui->comboBoxLunch->addItem(burgerIcon,"Burger");
ui->comboBoxLunch->addItem(QIcon(green),"Skipped");

We can also change the icon of an existing item by using the setItemIcon() method. For example, we use the code snippet below to change the icon of item 3 from a green color fill to a burger

ui->comboBoxLunch->setItemIcon(3,burgerIcon)

Responding to Selected Item

How do we know when user make a selection on the combo box? In Qt, such event handling is known as Signals and Slots. We can manually write the signal and slot pair to do it but there are easier way. Here the easier way is used. In the designer, we select the QComboBox that we want want to handle the signal, right click and select Go To Slot. From there we select the signal that we want to assign a slot.

Responding to slot event

In this example, we choose the currentIndexChanged signal and a slot is automatically created in mainwindow.cpp you can then handle the signal the way you want. Here i simply call the calculateCalories() method

//selected breakfast
void MainWindow::on_comboBoxBreakfast_currentIndexChanged(QString)
{
calculateCalories();
}

In calculateCalories(), processing is done based on the selection to calculate calories consumed by the selected food as an illustration. The point to take note here is how we know which item gets selected, in this case, we use the currentIndex in a switch statement to process them

void MainWindow::calculateCalories()
{
double calories=0;
 
//breakfast
switch(ui->comboBoxBreakfast->currentIndex())
{
case 0:
//porridge
calories+=150;
break;
case 1:
//full English
calories+=450;
break;
case 2:
//noodle
calories+=350;
break;
case 3:
//roti canai
calories+=400;
break;
default:
//does nothing
break;
}
 
//lunch
switch(ui->comboBoxDinner->currentIndex())
{
case 0:
calories+=50;
break;
case 1:
//steak
calories+=950;
break;
case 2:
//burger
calories+=550;
break;
default:
//does nothing
break;
}
 
//Sandwich" << "Pasta" << "Economy Rice" << "None
//dinner
switch(ui->comboBoxLunch->currentIndex())
{
case 0:
calories+=50;
break;
case 1:
//steak
calories+=450;
break;
case 2:
//burger
calories+=450;
break;
default:
//does nothing
break;
}
 
QString s;
s.sprintf("Calories: %.2f", calories);
ui->labelCalories->setText(s);
 
caloriesConsumed=calories;
 
updateAdvice();
}

As you've hopefully seen from this tutorial, you can quickly start using QComboBox with some added flavors (i.e the fancy image icon). For more advanced usage, you can always refer to the QComboBox documentation at the QComboBox Class Reference

Files

The source code File:BmiCalculator.zip is included here for you to play with. It has been tested only on Windows 7 64 bit, running the Symbian^3 simulator, as well as running on N8 (a Symbian^3 device), although it should work on other development systems. The screenshot is from a Symbian^3 simulator in 640x360, i.e. the same resolution as most Nokia mobile devices.

This page was last modified on 11 October 2012, at 01:13.
166 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×