Creating a touch-friendly combobox with QML for Harmattan

Comments

(no comments yet)

Log in or Join to leave comments.

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

---

Article

Created: gnuton (26 Feb 2012)

Last edited: hamishwillee (13 Jun 2012)

Introduction

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.

Code

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 com.nokia.meego 1.0
 
Rectangle {
    color: "black"
 
    Button {
        id: comboboxButton
        width: parent.width
        anchors.centerIn: parent
 
        text: comboboxDialog.model.get(0).name
        onClicked: comboboxDialog.open();
 
        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 }
        }
 
    }
}