×
Namespaces

Variants
Actions

Creating a touch-friendly combobox with QML for Harmattan

From Nokia Developer 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
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.

MeeGo-ComboBox.png

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 }
}
 
}
}
This page was last modified on 13 June 2012, at 13:52.
116 page views in the last 30 days.
×