×
Namespaces

Variants
Actions

Tumbler based SelectionDialog

From Nokia Developer Wiki
Jump to: navigation, search

This code snippet provides a Symbian-specific custom QML dialog for selection one item from list (TumblerSelectionDialog). Note that there is no similar dialog in the Symbian Qt Quick Components.

Article Metadata
Tested with
SDK: Nokia Qt SDK 1.2
Devices(s): all devices based on Symbian Anna, Nokia Belle
Compatibility
Platform(s): Symbian Anna, Nokia Belle
Symbian
Device(s): All
Dependencies: Symbian Qt Quick Components 1.1
Platform Security
Capabilities: None
Article
Keywords: Qml, dialog, list, tumbler
Created: Den123 (14 Mar 2012)
Last edited: Den123 (14 Mar 2012)

Selection Dialog

Overview

The code snippet below shows the full QML-component that implements this functionality.

The component uses CommonDialog as a base and offers following settings:

  • items - array of items
  • item - index of current item
  • colLabel - tumbler column label

Source code

TumblerSelectionDialog.qml:

import QtQuick 1.1
import com.nokia.symbian 1.1
import com.nokia.extras 1.1
 
CommonDialog {
id: root
titleText: qsTr( "Select Item" ) // dialog title
 
privateCloseIcon: true // show close button in the right corner of dialogs title
buttonTexts: [ qsTr( "Ok" ) ] // Ok button
 
property alias colLabel: colItem.label
property variant items: [] // items array
property alias item: colItem.selectedIndex // current item
 
function launch()
{
itemModel.clear()
for( var i = 0; i < items.length; i++ )
itemModel.append( { "value" : items[ i ] } )
 
tumbler.privateInitialize()
open()
}
 
onButtonClicked: accept() // ok was pressed
 
content: Item {
id: content
height: screen.currentOrientation === Screen.Portrait ? 260 : 250 // in real project move this values to separate js-file
width: screen.currentOrientation === Screen.Portrait ? 330 : 400
anchors.horizontalCenter: parent.horizontalCenter
 
Tumbler {
id: tumbler
anchors.fill: parent
anchors.margins: platformStyle.paddingSmall
columns: [ colItem ]
 
privateDelayInit: true
 
TumblerColumn {
id: colItem
anchors.fill: parent
items: itemModel
}
}
}
 
ListModel { id: itemModel }
}

How to use:

    ToolButton {
anchors.centerIn: parent
text: qsTr("Launch dialog")
onClicked: tumblerSelectionDialog.launch();
}
 
TumblerSelectionDialog {
id: tumblerSelectionDialog
colLabel: "Item List"
items: [ "Item1", "Item2", "Item3", "Item4", "Item5", "Item6", "Item7" ]
item : 3
 
onAccepted: console.log( "selected item index: " + item )
}
This page was last modified on 14 March 2012, at 08:50.
41 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.

×