03 February, 2012

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 GitoriousHarmattan Native Look Components

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

6 comments:

  1. Awesome! That's exactly what I needed yesterday - I was already playing with arctan and trying to come up with my own solution.

    One question though: Your time picker acts as the MTF time picker pre-PR1.2. In PR1.2, they changed it (when you press on the wheel, the small circle "wanders" to the touch point). Do you plan on implementing the new behavior?

    ReplyDelete
    Replies
    1. May be sometime, but now I have not time, I'm busy on my work. Sorry.

      Delete
  2. Good staff, thx you men. Right now i didn't found any other free datepicker in qml. I mean free, from components like Ubuntu components, or BB 10 components

    ReplyDelete
  3. hi dear,I can't use this link to download.what's the problem?!

    ReplyDelete
    Replies
    1. Hi, Problem is Gitorious was closed completely, but they said "The repositories will soon be available for read-only access, with original clone URLs preserved.". So stand by. Or if you need it immediately I can give you link https://drive.google.com/file/d/0B3skhHrmR-v6UHFLaGRmVDVodkE/view?usp=sharing on my local archive, but I'm not sure that it's last version, sorry.

      Delete