Presentation of MeeGo Harmattan Native Look TimePicker and DatePiker components

Few months ago I'm began to learn MeeGo Qt Components. I noticed many cool native components, which Nokia using in own application, not exists in Qt Components. I very like Nokia TimePicker component  (you can see it, when you choose alarm time in clock application). I decided create own TimePicker component with same design and functionality. Yesterday, I finished DatePicker component too.

Components is a free and distributed under BSD Licence. 

So, under cut, you find few words about using of this components, and link to repository.

TimePicker
TimePicker is a simple component. It is only one file TimePicker.qml.

Example of using:

    TimePicker {
        id: timePicker
        anchors.centerIn: parent

        function orientationSuffix() {
            if (screen.currentOrientation === Screen.Portrait || screen.currentOrientation === Screen.PortraitInverted )
                return "portrait"
            else
                return "landscape"
        }

        backgroundImage: "image://theme/meegotouch-timepicker-light-1-" + orientationSuffix()
        hourDotImage: "image://theme/meegotouch-timepicker-disc-hours-" + orientationSuffix()
        minutesDotImage: "image://theme/meegotouch-timepicker-disc-minutes-" + orientationSuffix()
    }

On this listing you can see I using native images sources, but you can set own. All three images should be square and should have same pixel size. You will need draw hours/minutes dots on transparent square png. For getting current time you can use two properties hours and minutes, and its changed signals, of course. 


DatePicker
DatePicker more complicated then TimePicker. Group of files provides DataPicker:

• DatePicker.qml - base component; 
• DateModel.qml - current selected month model;
• DataPickerStyle.qml - style configuration container;
• WeekCell.qml - Week day name cell.
• DayCell.qml - Day number delegate.

Example of using:

  DatePicker {          id: datePicker

      anchors {
          top: parent.top
          horizontalCenter: parent.horizontalCenter
      }
            function orientationString() {
                 if (screen.currentOrientation === Screen.Portrait || screen.currentOrientation === Screen.PortraitInverted )
                    return "portrait"
                else
                    return "landscape"
           }  

           platformStyle: DatePickerStyle {
                orientationString: datePicker.orientationString()
           }
    }

You can override design of DatePicker with help of DatePickerStyle component. It is simple container of properties.
For selection concrete date use function setDate(), for set/unset event marker you can use setEvent() function, it takes two parameters - event date and enable flag. Event markers can be sets only on selected month so far.
For getting current selected date you can use selectedDateChanged signal. It has one parameter - current selected date.

Both components not dependence of any Qt components, It means you can using components on any platform (with own images sources, of course).


You can download code from Gitorious: Harmattan Native Look Components

P. S. If you have any suggestions, questions, comments, bug reports - welcome.