Повторное использование компонентов
Проверим, можем ли мы в действительности многократно использовать компонент Clock.qml. Он прекрасно подходит для создания часов, отображающих мировое время. В этом случае, нам не нужна секундная стрелка на них. Мы можем слегка изменить поведение Clock.qml, чтобы последний не отображал часы, минуты или секунды, если их значение меньше нуля. Для элемента Image с id = thinhand мы можем связать свойство visible с количеством секунд:
visible: root.seconds > -1
Мы не изменяли публичный API. Мы также
полагаем, что использование в аналоговых
часах отрицательных значений для секунд
всё равно не имеет никакого смысла.
Поэтому мы уверены, что это изменение
не повлияет на работу существующих
приложений, которые используют компонент
Clock.
В нашем примере с мировыми часами
мы, помимо всего прочего, можем отображать
локальную информацию о погоде. Мы можем
использовать один из доступных API
погодных сервисов вместе с XmlListModel,
который позволяет декларативно извлекать
данные из API. Таймер, который ранее
использовался только для обновления
времени на часах, теперь будет использован
и для обновления данных о погоде раз в
час. Обратите внимание на то, как вводится
сигнал обновления, который соединяется
с функцией обновления данных
XmlListModel.
Изменённый пример отображает
мировые часы и локальную информацию о
погоде для трёх городов.
Компонент
Clock интегрируется тривиально. Мы отключили
секундную стрелку и использовали UTC для
значений времени вместе со смещением
для конкретного города. Это сработало,
так как Clock был спроектирован как простой
элемент интерфейса. Если бы таймер у
нас был внутри компонента (вместо того,
чтобы давать изменять часы, минуты и
секунды как свойства компонента), это
бы сильно усложнило работу. К сожалению,
main.qml значительно вырос в размере. Элемент
Repeater внёс свой вклад в сложность проекта,
равно как и массивы utcOffsets и cities.скачать
пример/посмотреть
онлайнmain.qml:
Rectangle {
...
property variant cities: ["Berlin", "Helsinki", "San Francisco"]
property variant utcOffsets: [1, 2, -8]
property variant now: new Date()
signal refresh()
Timer {
...
property int hours
onTriggered: {
hours = root.now.getHours()
root.now = new Date()
// Получение данных о погоде каждый час:
if (hours != root.now.getHours()) {
root.refresh()
}
}
}
Row {
anchors.horizontalCenter: parent.horizontalCenter
Repeater {
model: root.cities
// Отображаем аналоговые часы с локальными временем и погодой для каждого города.
Rectangle {
id: current
width: 262 // минимальная ширина
height: 320 // минимальная высота
property string city: cities[index]
property int utcOffset: utcOffsets[index]
XmlListModel {
id: cityQuery
...
}
ListView {
model: cityQuery
anchors.fill: parent
delegate:
Item {
Clock {
id: clock
anchors.left: parent.left
anchors.top: parent.top
// Убедимся, что UTC со смещением никогда не станет отрицательным,
// иначе часы не будут отображаться:
hours: root.now.getUTCHours() + current.utcOffset + 24
minutes: root.now.getMinutes()
seconds: -1
}
Row {
...
Image {
id: icon
source: "http://www.google.com" + model.iconUrl
}
Text {
id: label
text: current.city + ", "+ model.temperature
+ "°C\n" + model.humidity
+ "\n" + model.windCondition
}
}
}
}
}
}
}
}
Наша цель — сделать main.qml простым для понимания. В то же время, мы не хотим делать Clock.qml излишне сложным, потому что, в таком случае, его будет трудно использовать как простые аналоговые часы. Поэтому мы создали новый компонент, состоящий из сбора данных о погоде и компонента Clock. Он содержит таймер, логику обновления, XmlListModel и интеграцию Clock. Вместо того, чтобы напрямую задавать здесь массивы utcOffsets и cities, мы добавляем новые публичные свойства для компонента WeatherWorldClock:
// public:
property string city: ""
property int utcOffset: 0
Мы можем удалить эти массивы и Repeater из main.qml. скачать пример/посмотреть онлайнmain.qml:
import QtQuick 1.0
// Отображает время и погоду для выбранных городов.
Rectangle {
id: root
width: 786
height: 320
Row {
id: cities
anchors.fill: parent
anchors.horizontalCenter: parent.horizontalCenter
WeatherWorldClock {
city: "Berlin"
utcOffset: 1
}
WeatherWorldClock {
city: "Helsinki"
utcOffset: 2
}
WeatherWorldClock {
city: "San Francisco"
utcOffset: -8
}
}
}
Компонент WeatherWorldClock изолирован от изменений в main.qml. Мы можем дополнять и изменять его свойства в любом файле и не беспокоиться о том, что что-то пойдёт не так. Если WeatherWorldClock станет слишком сложным для поддержки, его можно разделить на большее число компонентов. Именно поэтому очень важным является то, что основная логика нашего приложения выглядит сейчас крайне просто: мы инициализируем компоненты WeatherWorldClock и указываем город и его UTC-смещение. Вот и всё!