Создаем DatePicker аналогичный стандартному в Harmattan

Некоторое время назад в рамках конкурса на лучшую статью о Qt, я разработал компонент TimePicker и написал о нем статью. Мало того, в комментариях, я говорил о том, что следующим компонентом будет DatePicker. Несколько дней назад я закончил его.

Для тех кто не читал предыдущую статью поясняю: не все компоненты используемые Nokia в своих приложениях на Harmattan свободны, некоторые из них не включены в Qt Components для MeeGo, а некоторые заменены суррогатами, картинка слева — оригинал, картинка справа — предлагаемый разработчикам суррогат компонента DatePicker.

Требования

Первое что необходимо, это определить требования к компоненту, поскольку мне я собирался реализовать аналог уже существующего компонента, это просто.
Итак, DatePicker должен выглядеть как календарь на указанный месяц, и захватывать крайние дни предыдущего и последующего месяца. Навигация между месяцами осуществляется по нажатию на стрелки, по жесту сдвига и при тапе на число предыдущего/последующего месяца. Текущий выбранный день должен выделятся рамкой и переключаться по тапу. Сегодняшний день также должен выделяться особой рамкой.
Вторым требованием я определил, что компонент должен быть реализован независимо от MeeGo Qt Components, что обеспечит его переносимость на любые платформы поддерживающие Qt Quick.

Компонент

Лирическое отступление

Изначально следует заложить гибкую настройку внешнего вида компонента. А поскольку он достаточно сложен, то и настроек у него будет относительно много. Я пошел тем же путем что и авторы оригинальных Qt Components, а именно создал простой компонент стиля, который заполнен свойствами с настройкой по-умолчанию.

QtObject {
    id: style

    property string orientationString: "portrait"
    property string backgroundImage: "image://theme/meegotouch-calendar-monthgrid-background-" + orientationString
    property string currentDayImage: "image://theme/meegotouch-monthgrid-daycell-current-day-" + orientationString
    property string selectedDayImage: "image://theme/meegotouch-monthgrid-daycell-selected-day-" + orientationString
    property string currentSelectedDayImage: "image://theme/meegotouch-monthgrid-daycell-selected-day-current-" + orientationString

    property string leftArrowImage: "image://theme/meegotouch-calendar-monthgrid-previousbutton"
    property string leftArrowPressedImage: "image://theme/meegotouch-calendar-monthgrid-previousbutton-pressed"
    property string rightArrowImage: "image://theme/meegotouch-calendar-monthgrid-nextbutton"
    property string rightArrowPressedImage: "image://theme/meegotouch-calendar-monthgrid-nextbutton-pressed"

    property string eventImage: "image://theme/meegotouch-monthgrid-daycell-regular-day-eventindicator"
    property string weekEndEventImage: "image://theme/meegotouch-monthgrid-daycell-regular-weekend-day-eventindicator"
    property string currentDayEventImage: "image://theme/meegotouch-monthgrid-daycell-current-day-eventindicator"
    property string selectedDayEventImage: "image://theme/meegotouch-monthgrid-daycell-selected-day-eventindicator"
    property string otherMonthEventImage: "image://theme/meegotouch-monthgrid-daycell-othermonth-day-eventindicator"

    property color weekEndColor: "#EF5500"
    property color weekDayColor: "#8C8C8C"
    property color otherMonthDayColor: "#8C8C8C"
    property color dayColor: "#000000"
    property color monthColor: "#000000"
    property color currentDayColor: "#EF5500"
    property color selectedDayColor: "#FFFFFF"

    property int monthFontSize: 32
    property int dayNameFontSize: 18
    property int dayFontSize: 26
}

В дальнейшем любой пользователь DatePicker может поменять настройки, определив свой стиль наследником от умолчального. Как видно, умолчания настроены на платформу Harmattan и при использовании на отличной платформе, обязаны быть переопределены.

О главном

Первым делом надо определить структуру нашего компонента, в общем виде она состоит из трех элементов:

• Шапка с названием месяца и стрелками
• Строка с днями недели
• Решетка с числами месяца

Рассмотрим их по отдельности.

Шапка с названием месяца и стрелками

Item {
                id: header

                anchors {
                    left: parent.left
                    right: parent.right
                    top: parent.top
                }

                height: 65

                Item {
                    id: leftArrow

                    anchors {
                        left: parent.left
                        top: parent.top
                        bottom: parent.bottom
                    }

                    width: 100
                    height: 65

                    Image {
                        id: leftArrowImage

                        anchors {
                            left: parent.left
                            leftMargin: (header.width / 7) / 2 - (width / 2)
                            verticalCenter: parent.verticalCenter
                        }

                        width: height
                        source: root.platformStyle.leftArrowImage
                    }

                    MouseArea {
                        anchors.fill: parent

                        onPressed: {
                            leftArrowImage.source = root.platformStyle.leftArrowPressedImage
                        }

                        onReleased: {
                            leftArrowImage.source = root.platformStyle.leftArrowImage
                            previousMonthAnimation.start()
                            dateModel.showPrevious()
                        }
                    }
                }

                Text {
                    id: monthLabel
                    anchors.centerIn: parent
                    font.pixelSize: root.platformStyle.monthFontSize
                    font.weight: Font.Light
                    color: root.platformStyle.monthColor
                }

                Item {
                    id: rightArrow

                    anchors {
                        right: parent.right
                        top: parent.top
                        bottom: parent.bottom
                    }

                    width: 100
                    height: 70

                    Image {
                        id: rightArrowImage

                        anchors {
                            right: parent.right
                            rightMargin: (header.width / 7) / 2 - (width / 2)
                            verticalCenter: parent.verticalCenter
                        }

                        width: height
                        source: root.platformStyle.rightArrowImage
                    }

                    MouseArea {
                        anchors.fill: parent
                        onPressed: {
                            rightArrowImage.source = root.platformStyle.rightArrowPressedImage
                        }

                        onReleased: {
                            rightArrowImage.source = root.platformStyle.rightArrowImage
                            nextMonthAnimation.start()
                            dateModel.showNext()
                        }
                    }
                }
            }

Здесь все достаточно просто и понятно с первого взгляда: по середине текстовое поле, а по краям две картинки со стрелочками, которые меняются при нажатии, и запускают процедуры смены месяца, а также анимацию.

Строка с днями недели

Row {
                id: weekDaysGrid

                anchors {
                    left: parent.left
                    right: parent.right
                    top: header.bottom
                    bottomMargin: 10
                }

                width: parent.width

                WeekCell {
                    text: qsTr("Mon")
                    platformStyle: datePicker.platformStyle
                }
                WeekCell {
                    text: qsTr("Tue")
                    platformStyle: datePicker.platformStyle
                }
                WeekCell {
                    text: qsTr("Wed")
                    platformStyle: datePicker.platformStyle
                }
                WeekCell {
                    text: qsTr("Thu")
                    platformStyle: datePicker.platformStyle
                }
                WeekCell {
                    text: qsTr("Fri")
                    platformStyle: datePicker.platformStyle
                }
                WeekCell {
                    isWeekEnd: true
                    text: qsTr("Sat")
                    platformStyle: datePicker.platformStyle
                }
                WeekCell {
                    isWeekEnd: true
                    text: qsTr("Sun")
                    platformStyle: datePicker.platformStyle
                }
            }

Компонент Row выстраивает своих детей в одну строку, в том порядке, в котором они объявлены.
Как видно из кода, в качестве детей используются собственные компоненты, которые, однако, достаточно просты:

Item {
    id: weekCell
    property alias text: label.text
    property QtObject platformStyle: DatePickerStyle {}
    property bool isWeekEnd: false

    height: label.height
    width: parent.width / 7

    Text {
        id: label
        anchors.centerIn: parent
        font.pixelSize: weekCell.platformStyle.dayNameFontSize
        color: weekCell.isWeekEnd ? weekCell.platformStyle.weekEndColor : weekCell.platformStyle.weekDayColor
        font.bold: true
    }
}

Особенно следует обратить внимание на передачу объекта стиля, в эти компоненты от DatePicker, таким образом мы избавляем пользователя от дополнительных забот — по сути ему вообще не обязательно знать о существовании компонента WeekCell.

Решетка с числами месяца

Для решетки с числами я использовал GridView:

GridView {
                id: daysGrid

                anchors {
                    top: weekDaysGrid.bottom
                    left: parent.left
                    right: parent.right
                    bottom: parent.bottom
                }
                cellWidth: width / 7 - 1
                cellHeight: height / 6

                interactive: false

                delegate: DayCell {
                    platformStyle: datePicker.platformStyle

                    width: daysGrid.cellWidth;
                    height: daysGrid.cellHeight

                    isCurrentDay: model.isCurrentDay
                    isOtherMonthDay: model.isOtherMonthDay
                    hasEventDay: model.hasEventDay

                    dateOfDay: model.dateOfDay
                }

                model: DateModel {
                    id: dateModel
                    currentDate: new Date()

                    onMonthChanged: {
                        monthLabel.text = getMonthYearString()
                        daysGrid.currentIndex = dateModel.firstDayOffset + selectedDate.getDate() - 1
                    }

                    onSelectedDateChanged: {
                        root.selectedDateChanged(selectedDate)
                    }
                }

                MouseArea {
                    anchors.fill: parent

                    property int pressedPosition: 0

                    onPressed: {
                        pressedPosition = mouseX
                    }

                    onReleased: {
                        var delta =  mouseX - pressedPosition;
                        if (Math.abs(delta) > 100) {
                            if (delta < 0) {
                                nextMonthAnimation.start()
                                dateModel.showNext()
                            }
                            else {
                                previousMonthAnimation.start()
                                dateModel.showPrevious()
                            }
                        }
                        pressedPosition = 0

                        if (Math.abs(delta) < 20) {
                            var index = daysGrid.indexAt(mouseX, mouseY)
                            daysGrid.currentIndex = index
                            dateModel.selectedDate = daysGrid.currentItem.dateOfDay
                            if (daysGrid.currentItem.isOtherMonthDay) {
                                if (daysGrid.currentItem.dateOfDay.getMonth() < dateModel.selectedDate.getMonth())
                                    previousMonthAnimation.start()
                                else
                                    nextMonthAnimation.start()

                                dateModel.changeModel(daysGrid.currentItem.dateOfDay)
                            }
                        }
                    }
                }
            }

Здесь следует особо обратить внимание на то, что у View отключен интерактивный режим и его полностью закрывает единственная MouseArea, это решает проблему с жестами сдвига, мы просто обрабатываем длину пройденного пальцем пути, и если она превышает заданное число осуществляем переход на новый месяц. Если же путь совсем не велик, значит пользователь просто нажал на определенный день. Определить позицию необходимой ячейки нам позволяет замечательный метод indexAt, который по пиксельным координатам возвращает индекс ячейки.

Сам делегат ячейки очень прост:

Item {
    id: dayCell
    property QtObject platformStyle: DatePickerStyle {}
    property bool isOtherMonthDay: false
    property bool isCurrentDay: false
    property bool isSelectedDay: false
    property bool hasEventDay: false

    property date dateOfDay

    function color() {
        if (GridView.isCurrentItem)
            return platformStyle.selectedDayColor
        else if (isCurrentDay)
            return platformStyle.currentDayColor
        else if (isOtherMonthDay)
            return platformStyle.otherMonthDayColor
        return platformStyle.dayColor
    }

    function background() {
        if (GridView.isCurrentItem) {
            if (isCurrentDay)
                return platformStyle.currentSelectedDayImage
            return platformStyle.selectedDayImage
        }
        else if (isCurrentDay)
            return platformStyle.currentDayImage
        return ""
    }

    function eventImage() {
        if (GridView.isCurrentItem)
            return platformStyle.selectedDayEventImage
        else if (dateOfDay.getDay() === 0 || dateOfDay.getDay() === 6)
            return platformStyle.weekEndEventImage
        else if (isCurrentDay)
            return platformStyle.currentDayEventImage
        else if (isOtherMonthDay)
            return platformStyle.otherMonthEventImage
        return platformStyle.eventImage
    }

    Image {
        id: background
        anchors.centerIn: parent

        source: dayCell.background()
        Text {
            id: label
            anchors.centerIn: parent
            font.pixelSize: dayCell.platformStyle.dayFontSize
            color: dayCell.color()
            font.weight: (dayCell.isCurrentDay || dayCell.GridView.isCurrentItem) ? Font.Bold : Font.Light
            text: dayCell.dateOfDay.getDate()
        }
        Image {
            anchors {
                top: label.bottom
                topMargin: -5
                horizontalCenter: parent.horizontalCenter
            }

            visible: hasEventDay
            source: dayCell.eventImage()
        }
    }
}

Это всего лишь пара картинок и текст, главная картинка служит для выделения текущего и сегодняшнего элемента, а дополнительная отображается, если на этот день назначено событие. Вспомогательные функции занимаются решением того, каким должен быть внешний вид элемента в зависимости от состояния его флагов.

Модель

Самая сложная, муторная и неоднозначная часть компонента. Дело в том что мне хотелось сделать модель исключительно на Qml/ECMAScript, хотя решение на С++ было бы и красивее и проще, однако это создало бы дополнительные сложности с внедрением, ибо пользователь был бы вынужден таскать за собой еще и qml плагин с C++ кодом.
Так вот, сложность заключается в том, что в ECMAScript отвратительный встроенный класс для работы с датой, он ужасен, он почти ничего не умеет, например он не может сказать високосный ли год по текущей дате, или сколько в текущем месяце дней. Или, например, на какой день недели приходится первое число текущего месяца. Все это пришлось создавать самому.

Вспомогательные части модели

Я не являюсь ни гуру ни поклонником ECMAScript/Javascript, поэтому абсолютно не уверен в том что эти методы сделаны максимально оптимально. Они выполняют свою функцию, но на мой взгляд они уродливы.
Я не буду приводить здесь их реализацию, приведу лишь названия.

function isLeapYear(year);
function getValidDayByMonthAndDay(month, day, leapYear);

Первый возвращает истину, если год високосный, а второй возвращает правильное число в месяце по предполагаемому числу, месяцу и «високосности» года, проще говоря, она корректирует граничные значения при переходе между месяцами.

Интерфейсные методы модели

//public:
    function setEvent(eventDate, enable) {
        if (eventDate.getMonth() !== selectedDate.getMonth() && eventDate.getFullYear() !== selectedDate.getFullYear())
            return
        setProperty(eventDate.getDate() + firstDayOffset, "hasEventDay", enable)
    }

    function getMonthYearString() {
        return Qt.formatDate(selectedDate, "MMMM yyyy")
    }

    function showNext() {
        showOtherMonth(selectedDate.getMonth() + 1)
    }

    function showPrevious() {
        showOtherMonth(selectedDate.getMonth() - 1)
    }

    function changeModel(_selectedDate) {
        clear()
        selectedDate = _selectedDate

        fillModel()
        monthChanged()
    }

Метод setEvent устанавливает или сбрасывает флаг события на заданную дату, как видно из кода, сейчас обрабатываются события только текущего месяца, что заставляет пользователей использующих события отслеживать изменения даты и устанавливать события при каждой смене заново. В дальнейшем я планирую решить этот вопрос путем, создания массива событий внутри модели.
Метод getMonthYearString просто возвращает сроку в формате «месяц год», как нетрудно догадаться, это нужно для заголовка DatePicker'а.
Методы showNext и showPrevious просто переключают модель на следующий или предыдущий месяц соответственно.
Ну а метод changeModel я позволяет менять текущую выбранную дату на произвольную.

Приватные методы модели

К сожалению Qml пока не умеет делать методы приватными, но ниж будут представлены методы, которые ДОЛЖНЫ быть приватными.

    function showOtherMonth(month) {
        var newDate = selectedDate
        var currentDay = selectedDate.getDate()
        currentDay = getValidDayByMonthAndDay(month, currentDay, isLeapYear(selectedDate.getFullYear()));
        newDate.setMonth(month, currentDay)
        changeModel(newDate)
    }

   function fillModel() {
        var tmpDate = selectedDate
        tmpDate.setDate(selectedDate.getDate() - (selectedDate.getDate() - 1))
        var firstDayWeekDay = tmpDate.getDay()
        if (firstDayWeekDay === 0)
            firstDayWeekDay = 6
        else
            firstDayWeekDay--
        firstDayOffset = firstDayWeekDay

        for(var i = 0; i < 6 * 7; ++i) {
            var objectDate = selectedDate;
            objectDate.setDate(selectedDate.getDate() - (selectedDate.getDate() - 1 + firstDayOffset - i))
            appendDayObject(objectDate)
        }
    }

    function appendDayObject(dateOfDay) {

        append({
                   "dateOfDay" : dateOfDay,
                   "isCurrentDay" : dateOfDay.getDate() === currentDate.getDate() &&
                                    dateOfDay.getMonth() === currentDate.getMonth() &&
                                    dateOfDay.getFullYear() === currentDate.getFullYear(),
                   "isOtherMonthDay" : dateOfDay.getMonth() !== selectedDate.getMonth(),
                   "hasEventDay" : false
               })
    }

Метод showOtherMonth передвигает модель на другой месяц, оставляя число неизменным(с учетом корректировки границ, конечно же).
Метод fillModel Заполняет модель числами месяца, для этого он сначала выясняет с какого дня недели начинается месяц.
Метод appendDayObject просто добавляет в модель новую запись по указанному шаблону.

Заключение

На этом все. Комментарии, пожелания, предложения, багрепорты, патчи — милости прошу.

Код компонента доступен на Gitorius. Распространяется, как и TimePicker, под BSD License. Краткое руководство по использованию можно найти в моем блоге.