Изменения и дополнения

Как известно, один из самых простых способов начать изучение нового языка – взять текст несложной программы на этом языке и путем небольших изменений превратить ее в то, что желательно программисту. При этом важно, чтобы на каждом этапе трансформации программа работала или четко давала понять, что именно программист сделал не так. Применительно к современному QML однако, подобный подход наталкивается на совершенно специфические трудности, связанные с тем, что сам язык QML еще не обрел окончательную форму и даже очень простые примеры программ, взятые не из той версии, могут не работать просто в силу несовместимости. Разумеется, все системы с годами меняются, если только разработчики не забросили их. Но с QML изменения происходят пока что уж слишком быстро. То, что работало в версии Qt 4.7, может не работать (и даже, скорее всего, не будет работать) в Qt 4.7.1, не говоря уже о коде из Qt 4.8. Вот, например, некоторые изменения, которые претерпел QML за последнее время.

Элемент LineEdit теперь называется TextInput, а элемент MouseRegion – MouseArea. Раньше индивидуальный идентификатор (значение свойства id) элемента QML мог начинаться с заглавной буквы, теперь – не может. Раньше, если вы объявляли свойство с именем, аналогичным имени унаследованного свойства элемента QML, унаследованное свойство перекрывало ваше. Теперь – наоборот. Раньше QML имел гораздо более мягкую систему типов, в которой любое значение изначально рассматривалось как строка, а уже затем приводилось к нужному типу. Например, можно было написать: color: white Теперь QML скажет на это, что переменная white не найдена. Все дело в том, что вы забыли кавычки:color: "white"А вот выражениеfoo: "true"теперь означает совсем не то же самое, чтоfoo: trueВ первом случае переменной foo присваивается строка "true", во втором случае – значение булевого типа (раньше строка "true" конвертировалась бы в булев тип, при условии что свойство foo принадлежит этому типу).

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

Наша программа

Ну, а теперь собственно сама программа на QML. Я переделал ее из демо-программмы clocks, которая входит в дистрибутив Qt. Стандартная демо-программа clocks показывает текущее время в трех разных городах Земли используя время, установленное в компьютере и «зашитые» в код названия городов и смещения по времени.

 

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

С точки зрения изучения языка QML эта программа интересна для нас, прежде всего, тем, что в ней мы впервые встречаемся с элементами, которые управляют расположением нескольких виджетов. В нашей программе присутствует три ряда виджетов: верхний ряд с дисками часов, ниже ряд для ввода имен городов и смещений, еще ниже – ряд для выбора цвета фона. Для того чтобы создать ряд виджетов, нам требуется элемент Row{}. Задача этого элемента – расположить дочерние элементы в один горизонтальный ряд. Для того чтобы создать ряд, например, прямоугольников, строим конструкцию типа" style="mso-fareast-font-family: "Times New Roman"; mso-ansi-language: RU; mso-fareast-language: RU; mso-bidi-language: AR-SA">Row { Rectangle { ... } Rectangle { id : leftCell ... } Rectangle { anchors.left : leftCell.right ... } }

Если вам требуется более сложное расположение (с разными интервалами между элементами ряда, особым расположением элементов, различающихся по высоте и т.п.), можно поиграть со свойствами anchors а так же left и right. При этом, например, свойство anchors.left элемента, может быть связано со свойством right соседа слева, если, конечно, у соседа слева инициализировано свойство id.

Многие другие вещи в нашей программе должны быть вам уже знакомы. Обратите внимание на то, что когда вы вводите новое имя города, подпись под соответствующими часами меняется непосредственно в процессе ввода. Так работает связывание свойств text элементов TextInput и Text (первый предназначен для ввода текста, второй – для вывода его под часами). Для изменения цвета фона окна достаточно щелкнуть мышью соответствующий прямоугольник. Благодаря тому, что для отрисовки некоторых элементов часов используется полупрозрачная растровая графика, цвет этих элементов так же будет меняться вместе с цветом фона.