Настало время познакомиться с одной из наиболее продвинутых библиотек для создания графических приложений. Наряду с WinAPI, MFC, VLC от Borland в логовах троллей потихоньку развивалась среда для написания программ, преимущественно под Linux и KDE. Чуть более подробно о том, что такое QT можно почитать, как обычно, в Википедии. О преимуществах QT можно говорить бесконечно, достаточно лишь упомянуть то, что создать приложение с её помощью — пара пустяков. Поскольку среда QT является достаточно дружелюбной и простой, я также максимально просто расскажу, как написать своё первое полноценное графическое приложение.
Это простой пример создания программы на QT, который ориентирован на начинающих программистов. Для чтения этой статьи Вам понадобятся средние знания по С++ и некоторое знание классов.

1. Установка

Несмотря на то, что QT — это библиотека, её разработчики решили не обделять программистов и создали свою собственную среду для разработки приложений, аналогичную Борланду или Студии от Майкрософт. Получилось это у них или нет — судить лично каждому, но мне эта среда очень понравилась, так как представляет собой очень современный подход к написанию программ. В целом работать с ней очень легко и быстро. Родная среда разработки QT — QT Creator (Девиз QT — Code Less Create More, что означает "меньше программируй — больше твори"), в которой создание софта действительно напоминает творческий процесс. Скачиваем полноценную SDK отсюда и устанавливаем. Главное, не ошибитесь с операционной системой;). Для начала выбираем лицензию LGPL, затем ищем ссылку с SDK — она весит больше всего, это то, что нам нужно.

Установка QT происходит, как правило, без сучка без задоринки. Запускаете инсталлятор, щёлкаете везде "Далее", стандартные пути установки менять настоятельно не рекомендуется.

После длительной процедуры инсталляции у вас в программах должен появится пункт с QT.

2. Создание нового приложения.

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

Для начала я хотел бы рассказать немного об устройстве QT. Библиотека отличается от, скажем, винапи (WinAPI) тем, что полностью построена на классах. Здесь абсолютно все элементы — объекты каких-либо классов, что, в общем, очень удобно. Сам пакет SDK состоит из следующих главных частей: среда разработки, дизайнер форм и интерфейсов, библиотеки, компилятор. Вся основная работа будет происходить в среде разработки QT Creator. Именно поэтому её следует найти в меню и запустить.

Запущенная среда разработки, представляет из себя примерно следующее:

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

Для начала работы необходимо создать проект. Для этого нажмите в меню на File (Файл) и там выберите пункт New (Новый).

Откроется диалоговое окно, в котором нужно выбрать QT4 Gui Application (Графическое приложение QT4), что означает графическое приложение на QT. Нажмите ОК. Далее вам предложат ввести имя проекта и папку, где он будет располагаться. Внимание! Ни папка, ни название проекта не должны содержать русских символов, если Вы работаете в Windows! Иначе будут сыпаться различные ошибки самого неожиданного происхождения. Назовите проект test и расположите его в папке C:/Qt (или ~/Qt для владельцев Linux/BSD или MacOS). Щёлкните пару раз далее, чтобы создать проект.

Теперь IDE перейдёт в режим редактирования (Edit).

В этом режиме придётся провести основную часть времени. Слева находится список файлов проекта, чуть ниже — список открытых файлов. Справа будет исходный код открытого .cpp или .h файла. Щёлкните дважды по файлу main.cpp. Это главный файл, который содержит функцию int main. Внутри вы увидите несколько строк кода. Почти всегда, какое бы крупное приложение это ни было, этот файл выглядит одинаково, поэтому трогать его на стадии изучения QT не следует.

Рассмотрим следующий файл — mainwindow.cpp. В нём находится описание класса окна, пока что там написано лишь ui->setupUi(this);, но потом в этот конструктор можно будет добавить очень много полезного, что необходимо для инициализации приложения. В файле mainwindow.h располагается описание класса MainWindow, как класса основного окна. Остался ещё один неизведанный файл: mainwindow.ui.

3. Рисование формы

Откройте файл mainwindow.ui. Вместо привычного текстового поля у вас откроется приложение с огромным числом кнопочек и областей.

Это Designer (Дизайнер) — самая главная программа для создания интерфейсов. В центре вы видите прототип главного окна, пока что на нём ничего нет кроме надписи Type Here. Это меню, которое пока что нам не нужно, так как мы сегодня напишем простую программу с одной единственной формой. Справа вы можете увидеть список текущих элементов формы, самый главный из них — окно — называется MainWindow. Элементы показаны в виде дерева.

На стандартной форме есть три совершенно пока не нужных нам элемента: menuBar, mainToolBar, statusBar. Для того чтобы их удалить, кликните по каждому правой кнопкой мыши и выберите пункт Remove (Удалить). Отлично, теперь у вас абсолютно пустая форма, готовая к редактированию.

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

Задание

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

Решение

Итак, сначала нужно как-то назвать ваше приложение. Для этого справа в списке выберите MainWindow. Ниже будет список свойств этого объекта, в этом списке нужно найти свойство windowTitle. Сделать это просто, так как там есть поле Filter, вбив в которое имя свойства мы получаем сразу же искомое. Дважды кликните по нему и измените заголовок окна на "Конвертер валют".

Теперь приступим к добавлению органов управления. В QT это всё виджеты, любая кнопка или текстовое поле являются виджетами. Сначала нужно добавить текстовое поле для ввода суммы, которую необходимо отконвертировать. В Дизайнере с левой стороны расположен список всех доступных виджетов. Среди них нужно найти категорию input Widgets (Виджеты ввода информации) и один из них, который называется Double Spin Box, перетащить на рабочую область окна. Вот что у Вас должно получиться:

Этот виджет служит для ввода чисел с десятичной точкой. Однако, пользователь не поймёт, что это за поле, поэтому слева от него нужно поставить подпись, что это поле для ввода числа. Для этого нужно найти на вкладке Display Widgets (Виджеты отображения) виджет Label (Надпись). Перетащите его на позицию слева от поля ввода. Там сейчас написано Text Label. Эту надпись нужно поменять, поэтому дважды щёлкаем по ней и пишем "Сумма для конвертации". Вот что у меня получилось:

Хм, не ахти что. А всё потому, что виджеты лепили абы как безо всякого выравнивания. Но ведь в QT есть безумно полезные инструменты, они называются слои. Слоями можно группировать виджеты, растягивать и так далее.

Чтобы начать работать со слоями нужно сначала создать слой в главном окне. Для этого щёлкните по пустому пространству формы левой кнопкой мыши, затем правой. В самом низу выберите Lay out (Выравнивание) -> Lay out Vertically (Выровнять по вертикали). Это даст понять QT, что мы хотим располагать виджеты сверху вниз.

Ну вот, уже гораздо лучше. Однако, оно ещё далеко от идеала. Ведь нужно, чтобы надпись была слева, а поле — справа. Но и это можно исправить, просто нужно внутрь вертикального слоя добавить горизонтальный. На этот раз нужно перетащить с панели виджетов Horizontal Layout внутрь формы. Теперь перетащите сначала текст, а затем текстовое поле внутрь этого шаблона.

Что ж, совсем недурно, однако слой растянулся на весь экран и выглядиит не совсем компактно. Чтобы заставить слой сжиматься и прижиматься к верхнему краю нужно под ним засунуть пружинку. Думаете я шучу? Ничуть. Выбираем вертикальную пружинку из панели виджетов (Vertical Spacer) и тащим её под слой.

Отлично, теперь получили то, что нужно!

Ну вот, теперь вы уже знаете как пользоваться виджетами. В таком духе духе начинаем добавлять органы для выбора валюты из списка. Сначала под слой с суммой для конвертации добавляем Label с текстом "Валюта:". Под текстом "Валюта:" нужно поместить ещё один горизонтальный слой. Вот незадача, этот слой вытянулся в струнку:

Это всё из-за пружинки... Думаю, на время добавления виджетов, её лучше убрать. Сказано — сделано, виджеты снова стали крупнее:

Теперь в нижний слой нужно добавить выпадающие списки. Выпадающий список перетягиваем из панели Input Widgets (он называется Combo Box) на панель внутрь слоя. Чтобы добавить элементы в него, нужно по нему дважды щёлкнуть мышкой:

Для добавления элементов внутрь списка, нажимайте на зелёную кнопку "+" столько, сколько нужно. У меня получились следующие валюты: Рубли, Доллары, Евро.

Нажимаем ОК. Теперь нужно добавить ещё один выпадающий список, как как есть ещй и валюта назначения. Проделываем те же процедуры со вторым списком.

Теперь я думаю, что нужно между списками разместить стрелочку, чтобы ещё раз показать, из какой в какую валюту будет конвертировать программа. Перетащите Label между Combo Box'ами, напечатайте в нём "->". Он слишком широкий. Найдите справа свойство Label, оно называется maximumSize. В поле Width (Ширина) я поставил 14.

Отлично, осталось добавить несколько последних виджетов. Во-первых, это форма ответа. Снова ищем Double Spin Box и ставим его в самый низ. Так как нам не нужно, чтобы его редактировали, нужно найти его свойство readonly (только чтение) и поставить там галочку. также нужно убрать стрелки, для этого в свойстве buttonSymbols (кнопки) выбираем NoButtons (без кнопок). Кстати, у спинбоксов есть особенность. Для них характерны минимальная и максимальные величины. Минимальная по умолчанию 0, это то, что нам нужно, а вот максимальная — 99 — маловата. Поэтому у обоих спинбоквсов атрибут maximum ставим на 1000000 (вряд ли больше миллиона кто заработает:). Ах да, подписать забыли. Label над спинбоксом с названием "Ответ:". Ну вот и почти готово:

Осталось сделать кнопки. Кнопок будет две: первая — рассчитать, вторая — закрыть окно. Снова в самый низ добавляем слой Horizontal Layuot. Внутрь него перетаскиваем две кнопки (Push Button). Название кнопки редактируется двойным кликом, одну я назвал "Рассчитать", вторую — "Закрыть". Кажется, всё, теперь можно и пружинку (помните, её убрали?) вниз поставить.

Для того, чтобы полюбоваться результатом, нажмите предпросмотр формы (Ctrl+Alt+R).

4. Редактор связей

В QT события реализованы немного нестандартным образом. Все виджеты здесь связываются отношением сигнал/слот. Любой виджет может послать определенный сигнал и также принять определенный слот. Сигналы и слоты также могу быть и у обычных классов. Редактор связей позволяет соотносить сигнал одного виджета со слотом другого. Например: кнопка может отправить сигнал "Нажата". У окна есть слот "Закрыться". Если в редакторе связей связать сигнал кнопки "Нажата" со слотом окна "Закрыться", то при нажатии на эту кнопку окно закроется. Очень просто! Сегодня мы воспользуемся одним готовым слотом и создадим один свой.

Помните мы создали кнопку Закрыть? Вот сейчас-то она нам и нужна. Сначала открываем редактор связей. Для этого нужно, находясь в Дизайнере нажать на кнопку F4 (Edit Signals/slots — редактировать сигнал/слот). На первый взгляд ничего не изменится. Но если вы наведете курсор мыши на какой-нибудь виджет, он подсветится. Нажмите на любой из ниж и потяните — увидите стрелку, это связь. Чтобы убрать стрелку нажмите отмену действия (Ctrl+Z). Давайте создадим реальную связь. Первой связью у нас будет закрытие окна при нажатиина кнопку "Закрыть". Потяните за кнопку "Закрыть" и отпустите мышку где-нибудь на свободном пространстве формы (будет значок заземления). Откроется окно связывания.

Слева — все возможные сигналы источника, справа — слоты приёмника. Чтобы увидет все сигналы и слоты нажмите на галочку "Show signals and slots inherited from QWidget" (Наследовать сигналы и слоты от QWidget). Начнём связывать события. Слева выберите сигнал "clicked()" — кнопка нажата. Справа выберите слот "close()" — закрыть окно. OK. Ну вот и всё, связь создана! Нажмите Ctrl+Alt+R, чтобы посмотреть, что получилось. Действительно, при нажатии на кнопку "Закрыть", окно закрывается.

Теперь нужно создать свой собственный слот. Так как нужно рассчитать соотношение валют, придётся немного попрограммировать. С точки зрения С++ сигналы и слоты — это обычные функции, только описать их нужно немного особо.

Чтобы наша программа засчитала, необходимо добавить в класс MainWindow новый слот. Для формы это будет слот, для нас — функция, выполняющая расчеты. Назовём её, скажем, calc(). Приступим.

На самом деле отличия от классового программирования в С++ минимальны. В файле mainwindow.h внутрь объявления класса MainWindow нужно написать следующее (перед ключевым словом private):

public slots:
void calc();

Собственно, всё. Вы создали прототип слота. Теперь его нужно описать, то есть запрограммировать. Программируется слот как обычная функция, в файле mainwindow.cpp в самый конец пишем:

void MainWindow::calc()
{
//нужно создать массив - курс рубля относительно других валют
//курсы прописываются в том же порядке, в каком и написаны валюты в списках
double a[]={1, 29.02, 44.65};
//задаем значение спинбоксу с ответом
ui->doubleSpinBox_2->setValue(
//берем значение из первого спинбокса
ui->doubleSpinBox->value()
//делим и умножаем на соответствующий курс
/a[ui->comboBox_2->currentIndex()]
*a[ui->comboBox->currentIndex()]);
}

Слот написан. Осталось лишь привязать этот слот к соответствующей кнопке. Снова переходим в дизайнер (дважды клик по файлу .ui). Редактор связей (F4). Тащим связь от кнопки "Рассчитать" на форму, чтобы появился значок заземления. В появившемся окне слева выбираем "clicked()". Справа Вы не найдёте созданного нами слота calc, так как дизайнер ещё не знает о том, что он существует. Следовательно, слот нужно добавить и в дизайнере. Справа есть кнопка "Edit...", нужно её нажать. Вы попадете в редактирование всех сигналов и слотов главного виджета (формы) MainWindow (см. заголовок окна).

Под слотами нажмите на "+" и напишите "calc()". ОК. Теперь справа появится calc(), выбираем его. Вот такая форма должна получиться:

Вот и готово, можно собрать проект. Для его сборки нажмите на зеленую стрелочку в левом нижнем углу Creator'а. Если всё было сделано без ошибок, проект соберется и Вы увидите свою работающую программу.

Удачи!

© RPG

Назад