QML Day of Week & Time Dialog
This code snippet provides a Symbian-specific custom QML dialog for selecting day of week and time (DayOfWeekTimeDialog).
Article Metadata
Code Example
Source file: symcommunityqtquickextras
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
Device(s): All
Dependencies: Symbian Qt Quick Components 1.1
Platform Security
Capabilities: None
Article
Keywords: Qml, daytime
Created: Den123
(11 Mar 2012)
Last edited: hamishwillee
(15 Mar 2012)
Note: This QML element has been added to the symcommunityqtquickextras Symbian Community Qt Quick Component Extras. There are no similar dialogs in the Symbian Qt Quick Components.
Contents |
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:
- curDay - day of the week: Qt.Monday, Qt.Tuesday, ... Qt.Sunday
- curHour - hours: 0 - 23
- curMinute - minutes: 0 - 59
Functions for dialog launching:
- launch() - open dialog according to the settings curDay, curHour, curMinute
- launchForNow() - set parameters according to the current moment and open dialog
Source code
DayOfWeekTimeDialog.qml:
import QtQuick 1.1
import com.nokia.symbian 1.1
import com.nokia.extras 1.1
CommonDialog {
id: root
titleText: qsTr( "Select Day and Time" ) // dialog title
privateCloseIcon: true // show close button in the right corner of dialogs title
buttonTexts: [ qsTr( "Ok" ) ] // Ok button
property int curDay; // Qt.Monday = 1, Qt.Tuesday = 2, ... Qt.Sunday = 7
property alias curHour: colHour.selectedIndex // 0 - 23
property alias curMinute: colMin.selectedIndex // 0 - 59
function launch() {
fillModelsIfEmpty()
colDay.selectedIndex = curDay - 1
tumbler.privateInitialize()
open()
}
function launchForNow() {
var x = new Date()
curMinute = x.getMinutes()
curHour = x.getHours()
curDay = dayIdxByLocalizedDayName( Qt.formatDateTime( x, "dddd" ) )
launch()
}
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: [colDay, colHour, colMin]
onChanged: root.curDay = colDay.selectedIndex + 1
privateDelayInit: true
TumblerColumn {
id: colDay
height: parent.height
width: 190
items: dayModel
label: qsTr( "Days of the Week" )
}
TumblerColumn {
id: colHour
height: parent.height
items: hourModel
label: qsTr( "Hrs" )
}
TumblerColumn {
id: colMin
height: parent.height
items: minModel
label: qsTr( "Mins" )
}
}
}
function localizedDayNameByIdx( idx )
{
if( idx >= Qt.Monday && idx <= Qt.Sunday )
{
var myDate = new Date()
myDate.setFullYear( 1980, 2, 17 ) // March 17, 1980 - we know, it was monday
myDate.setDate( myDate.getDate() + idx - 1 ) // Qt.Monday = 1
return Qt.formatDateTime( myDate, "dddd" )
}
return ""
}
function dayIdxByLocalizedDayName( dayName )
{
var res = -1
var myDate = new Date()
myDate.setFullYear( 1980, 2, 17 ) // March 17, 1980 - we know, it was monday
for( var i = 0; i < 7; i ++)
if( Qt.formatDateTime( myDate, "dddd" ) == dayName )
{
res = i + 1;
break
}
else
myDate.setDate( myDate.getDate() + 1 )
return res
}
// private
function fillModelsIfEmpty()
{
if( !dayModel.count )
{
var myDate = new Date()
myDate.setFullYear( 1980, 2, 17 ) // March 17, 1980 - we know, it was monday :)
for( var i = 0; i < 7; i ++)
{
dayModel.append( { "value" : Qt.formatDateTime( myDate, "dddd" ) } )
myDate.setDate( myDate.getDate() + 1 )
}
for( i = 0; i < 24; i++ )
hourModel.append( { "value" : i >= 10 ? i : "0" + i } );
for( i = 0; i < 60; i++ )
minModel.append( { "value" : i >= 10 ? i : "0" + i } );
}
}
ListModel { id: dayModel }
ListModel { id: hourModel }
ListModel { id: minModel }
}
How to use
DayOfWeekTimeDialog {
id: dlg
curDay: Qt.Saturday // Saturday, 23:59
curHour: 23
curMinute: 59
onAccepted: console.log( dlg.localizedDayNameByIdx( curDay ) + ", time: " + curHour + ":" + curMinute )
}
ToolButton {
text: "Launch dialog"
onClicked: dlg.launchForNow()
}
Vineet.jain - Nice Article
That is good Den123, it would be nice to attach a sample running project, depicting the same.
vineetvineet.jain 17:28, 11 March 2012 (EET)
Hamishwillee - Could easily be one of our "extra components" in the project
Nice job (again). Vineet is right that it is generally nice to provide a downloadable project people can try. This is very useful because it makes it easy to retest on new versions, and because it ensures that even if your document misses something about the implementation, there is something people can try that we known works, or did at least at some point.
I think this would be a very useful addition to the "extra extra" Qt components - and if we do this we'd just point to the project test code for an example. Personally I find having both Launch and LaunchNow a little odd. If possible would be good to have just launch, taking the values if defined or otherwise using the current time.hamishwillee 04:41, 12 March 2012 (EET)
Vineet.jain - Adding this to reference as well
Hamish , why not add this article as well to the list of references which users can refer while writing articles for QtQuick components(i.e. in 'Wanted' section)vineet.jain 08:25, 12 March 2012 (EET)