Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries. Thanks for all your past and future contributions.

Creating a touch-friendly combobox with QML for Harmattan

From Wiki
Jump to: navigation, search

Harmattan QtQuick componets don't provide any combo box element. This article explains you how to create a simple one in few mins.

Article Metadata
Tested with
Devices(s): Nokia N9
Created: gnuton (26 Feb 2012)
Last edited: hamishwillee (13 Jun 2012)


Combo boxes are widgets which allow users to select one item from a list. In one of my previous articles I explained how to create a spinning list, sort of touch-friendly widget which, on Harmattan, is mostly used for Date and Time pickers.



The code below is complete and you can save it in a .qml file and run in qmlviewer or Qt SDK. Basically it mimics combo box/picker widgets you see in desktop or Symbian. Main elements of this widget are a button and a selection dialog. When the button is pressed, the selection dialog is shown. User can select one item on the selection dialog list, which can actually contain strings as well as images, colors and more. Once user selected the item, the dialog is closed and the button label/icon is changed accordingly. Other elements in the UI could pick the selected data by reading the text button property.

import QtQuick 1.1
import 1.0
Rectangle {
color: "black"
Button {
id: comboboxButton
width: parent.width
anchors.centerIn: parent
text: comboboxDialog.model.get(0).name
ToolIcon {
id: filterImage
anchors.right: parent.right
anchors.verticalCenter: parent.verticalCenter
platformIconId: "textinput-combobox-arrow"
SelectionDialog {
id: comboboxDialog
titleText: "Select"
model: ListModel {
ListElement { name: "Item 1" }
ListElement { name: "Item 2" }
ListElement { name: "Item 3" }
ListElement { name: "Item 4" }
ListElement { name: "Item 5" }
onAccepted: { comboboxButton.text = comboboxDialog.model.get(comboboxDialog.selectedIndex).name }
This page was last modified on 13 June 2012, at 10:52.
294 page views in the last 30 days.