Namespaces

Variants
Actions

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 over the next few weeks. Thanks for all your past and future contributions.

Tumbler based SelectionDialog

From 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.
56 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.

×