Hello, World! v3 - Qt Quick edition

Hello World! Qt Quick Edition

(релиз Qt SDK на момент написания данной статьи - 1.1.4)

Прежде чем представить вам пример Hello world на QML (язык), думаю стоит рассказать вам немного о том, что такое Qt Quick и с чем его едят.
Если вы посмотрите на Microsoft Office 2000 и скажем на Microsoft Office 2010, то увидите разницу не только в разных форматах документов, но и огромную разницу во внешнем виде. В какой-то момент ИТ-индустрия стала уделять большое внимания не только функционалу, но и внешнему виду программного обеспечения. Qt Quick как раз и является инструментом для разработки "гламурненьких" интерфейсов. С его помощью можно легко внедрить в интерфейс все современные эффекты: перелистывание, плавное перемещение, изменение и т. д.
QML (Qt Meta-Object Language) - это декларативный язык программирования, основанный на JavaScript, предназначенный для дизайна приложений, делающих основной упор на пользовательский интерфейс. (www.wikipedia.org)
 Собственно на этом языке мы и будем делать интерфейс в Qt Quick. В нём нет указателей, ссылок, и в начале пути С-никам будет тяжко, но со временем вы поймёте всё его удобство и красоту.



Нус, приступим. Запускаем наш Qt SDK. Открываем Файл -> Новый файл или проект...

В появившемся диалоге выбираем Проект Qt Quick -> Интерфейс пользователя на Qt Quick



Обзываем по собственному желанию, выбираем путь (не забываем, что не стоит вводить пробелы и русские буквы как в названии, так и в пути).

Я выбрал название HelloWorld, путь: D:\workspace

Жмём далее, затем завершить. По умолчанию у нас с вами уже создался проект Hello World, осталось лишь разобрать его состав.

Исходный код:

// import QtQuick 1.0 // to target S60 5th Edition or Maemo 5
import QtQuick 1.1
Rectangle {
    width: 360
    height: 360
    Text {
        anchors.centerIn: parent
        text: "Hello World"
    }
    MouseArea {
        anchors.fill: parent
        onClicked: {
            Qt.quit();
        }
    }
}

В этом приложении есть уже некоторая обработка событий. Если мы кликаем мышью внутри окна, то приложение закрывается.

Пояснения к исходному коду.

// import QtQuick 1.0 - это библиотека для ОС Maemo 5 и Symbian S60 5-ой редакции. Нам это ни к чему, можете вообще её удалить.
import QtQuick 1.1 - импортируем библиотеку с элементами. Для С-шников это сродне #include. За всё время работы с Qt Quick я так и не нашёл легкого пути нахождения своей библиотеки для каждого элемента. Если найдёте, дайте знать. QtQuick содержит все основные элементы: Rectangle, Text и т. д
Rectangle - здесь мы определяем главный элемент - прямоугольник. Для всех остальных элементов этот объект будет родительским. Не путайте с наследованием. В данном случае он просто содержит остальные объекты внутри себя.
width: 360
height: 360 - устанавливаем свойства объектов в конкретные значения. В нашем случае, ширина и высота прямоугольника становятся равными 360.
Text - создаём элемент Text. Это простое поле для вывода текста.
anchors.centerIn: parent - выравнивание границ. если вы наберёте anchors. то увидите значительное количество способов выравнивания границ. В нашем случае мы указываем, что наш объекте помещается в центре родителя (т. е. в центре нашего основного прямоугольника).
text: "Hello World" - собственно сам текст в Text.
MouseArea - поле, которое обрабатывает любое действие мышью внутри себя. 
anchors.fill: parent - в данном случае выравнивание мы определяем как fill (заполнить) parent (родителя). Иначе говоря поле обработки действий мышью заполнить во весь наш прямоугольник.
onClicked: - обработка действия по нажатию мыши.
Qt.quit(); - выход из приложения.
Теперь жмём запустить (слева снизу зеленый треугольник) и смотрим результат наших трудов:

Если вы кликните внутри окна, то оно закроется.