З кожним роком стає все більше операційних систем, тому розробникам все важче задовольняти потреби користувачів. Три найпопулярніші комп'ютерні платформи – Windows, Linux та Mac OS, а також три мобільні – Android, iOS та Windows Mobile – продовжують активно боротися між собою. А це означає, що якісний додаток має працювати на всіх основних платформах.
Впоратися з цією проблемою допомагає кроссплатформенна розробка. Про одну з найпопулярніших кросплатформових середовищ розробки - Qt Creator - і йтиметься у цій статті. Ми розглянемо як виконується встановлення та налаштування Qt Creator, а також як працювати в Qt Creator.
Що таке Qt Creator
Qt Creator (що нещодавно мав назву Greenhouse) - це одна з найпоширеніших кросплатформових IDE. Її плюси - зручність, швидкість роботи, а також - вільність, оскільки це програмне забезпечення з відкритим вихідним кодом. Підтримуються такі мови, як C, C++, QML.
Програма була написана компанією під назвою Trolltech, яка повною мірою виконала мету створення середовища – роботу з графічним фреймворком Qt. Зручний графічний інтерфейс з підтримкою Qt Widgets і QML, а також велика кількість компіляторів, що підтримуються, дозволяють швидко і зручно створити свій кросплатформовий додаток.
Головне завдання цієї IDE – забезпечити найбільш швидку кроссплатформенну розробку, використовуючи власний фреймворк. Завдяки цьому розробники отримують прекрасну можливість не писати додатки нативно (тобто окремо під кожну платформу), а створити загальний код, і, можливо, підігнати його під особливості ОС.
Qt Creator також включає утиліту Qt Designer, що дозволяє обробити зовнішній вигляд вікна програми, додаючи і перетягуючи елементи (аналогічно Windows Forms в Visual Studio). Як системи збирання використовуються qmake, cmake і autotools.
Установка Qt Creator
Отже, настав час розглянути як встановити Qt Creator. Якщо для Windows розробники подбали і зробили офлайн-установник, то Linux 32-bit цієї можливості не передбачено. Тому під час встановлення вам може знадобитися стабільне інтернет-з'єднання (~20-30 хвилин). Для початку завантажуємо установник:
- Завантажити Qt Creator для Linux 32-bit (натискаємо " View other options").
- Завантажити Qt Creator для Linux 64-bit.
Після закінчення завантаження переходимо в папку з файлом, натискаємо правою кнопкою миші та вибираємо пункт "Властивості".
Тепер перейдемо на вкладку "Права"і поставимо галочку "Дозволити запуск цього файлу як програму".
Запускаємо програму.
Тепер натискаємо "Next".
Тут необхідно вибрати існуючий обліковий запис або створити його. Ця дія необхідна для перевірки ліцензії (комерційної чи некомерційної).
Натискаємо "Next".
Вибираємо директорію, в якій перебуватиме Qt. Важливо, щоб у дорозі не було кирилиці та прогалин!
У цьому меню є вибір компонентів. Наприклад, можна вибрати установку інструментів для розробки на Android, або вихідних компонентів (це потрібно для статичного складання, якщо комусь це потрібно - напишіть у коментарях, і я напишу окрему статтю). Якщо Ви не впевнені, чи потрібні Вам ці компоненти чи ні, залиште їх поки що так - навіть після встановлення Qt буде можливим видалення та додавання елементів.
У цьому вікні приймаємо ліцензію. Тиснемо "Next".
Якщо ви готові, починайте встановлення. У Вас запитають пароль суперкористувача (sudo), після чого почнеться скачування та вилучення файлів. Альтернативний спосіб – встановлення через термінал. Для початку потрібно оновити список пакетів.
Завантажуємо та встановлюємо Qt:
sudo apt install qt5-default
Тепер встановлення Qt Creator:
sudo apt install qtcreator
І, якщо потрібне, вихідники.
sudo apt install qtbase5-examples qtdeclarative5-examples
Налаштування Qt Creator
Після завершення інсталяції перезавантажте комп'ютер і запустіть Qt Creator. Перейдіть до меню "Інструменти" -> "Параметри".
Тут слід розглянути кілька вкладок.
1. Середа- це налаштування зовнішнього вигляду самої IDE, а також зміна поєднань клавіш та керування зовнішніми утилітами.
2. Текстовий редактор- тут йде налаштування зовнішнього вигляду, шрифтів та забарвлення редактора.
3. C++- підсвічування синтаксису, робота з розширеннями файлів та UI (тобто формами).
4. Android- тут зібрані шляхи до необхідних інструментів, а також у цьому меню налаштовуються віртуальні пристрої, що підключаються.
Встановлення компонентів Qt Creator
Якщо раптом так сталося, що Ви забули встановити якийсь компонент, або, навпаки, хочете видалити його, то на допомогу прийде Qt Maintenance Tool. Це інструмент, який дозволяє керувати всіма компонентами Qt Creator.
Щоб запустити його, перейдіть до меню програм, виберіть пункт "Розробка" -> "Qt Maintenance Tool".
Виберіть потрібний пункт (Видалити/додати компоненти, оновити компоненти або видалити Qt). Після цього виконайте необхідні операції і закрийте вікно.
Робота з Qt Creator – перший проект
Ну що ж, час пробив! Налаштування Qt Creator завершено. Час зробити свій перший кросплатформовий додаток на Linux, а потім скомпілювати його на Windows. Нехай це буде... програма, яка виводить іконку Qt, кнопку та напис, на яку після натискання кнопки буде виводитися випадкова фраза. Проект нескладний, і, звичайно ж, кроссплатформенний!
Спочатку відкриємо середовище розробки. Натиснемо "Файл" -> "Створити файл або проект...". Виберемо додаток Qt Widgets - його швидко та зручно зробити. А назва йому - "Cross-Platphorm". Ось як!
Комплект – за замовчуванням. Головне вікно також залишаємо без змін. Створюємо проект.
Для початку необхідно налаштувати форму – головне вікно програми. За замовчуванням воно пусте, але це не залишиться надовго.
Перейдемо до папки "Форми" -> "mainwindow.ui". Відкриється вікно Qt Designer:
Видаляємо панель меню та панель інструментів на форму, натиснувши правою кнопкою миші та вибравши відповідний пункт. Тепер перетягуємо елементи Graphics View, Push Button та Label таким чином:
Щоб змінити текст, двічі натисніть на елемент. У властивостях Label (праворуч) вибираємо розташування тексту по вертикалі та по горизонталі – вертикальне.
Тепер настав час розібратися з виведенням іконки. Перейдемо в редактор, зліва клікнемо по будь-якій папці правою кнопкою миші та оберемо "Додати новий...". Тепер натискаємо "Qt" -> "Qt Resource File". Ім'я – res. У вікні натискаємо "Додати" -> "Додати префікс", а після додавання - "Додати файли". Вибираємо файл, а у вікні, що з'явилося "Неправильне розміщення файлу"кликаємо "Копіювати".
Вийшло! Зберігаємо все. Знову відкриваємо форму. Клацаємо правою кнопкою миші по Graphics View, вибираємо "styleSheet..." -> "Додати ресурс" -> "background-image". У лівій частині вікна вибираємо prefix1, а в правій - нашу картинку. Натискаємо "ОК". Налаштовуємо довжину та ширину.
Всі! Тепер можна приступати до коду. Клік правою кнопкою миші по кнопці відкриває контекстне меню, тепер потрібно натиснути "Перейти до слота..." -> "clicked()". У вікні набираємо наступний код:
Або ви можете завантажити повний проект на GitHub. Робота з Qt Creator завершена, натискаємо на значок зеленої стрілки зліва, і чекаємо на запуск програми (якщо стрілка сіра, спочатку натисніть на значок молотка). Запустилось! Ура!
tl;dr - Qt бібліотека для створення кросплатформових віконних додатків на C++.
Qt як проект зародився з бажання розробників C++ мати зручний інструментарій розробки графічних інтерфейсів програм (GUI). Якщо, наприклад, Java для цих цілей з коробки йде AWT, а Python Tk, то С++ не було нічого подібного. І не тільки того, що стосується розробки GUI, а також класів роботи з мережею, мультимедіа та інших дуже затребуваних речей. Чому дуже прикро розробники. Ну а якщо є попит, то пропозиція не змусила довго чекати. 1995 року вийшов перший реліз бібліотеки. З тих пір Qt швидко став розширюватися за межі всього-на-всього розробки інтерфейсів.
Тому, Qt варто розглядати не стільки набір класів для створення GUI, а як повноцінний інструментарій класів на всі випадки життя. Цей набір всього (ну чи майже всього) що може знадобитися програмісту-прикладнику для створення практично будь-якої програми. Структура бібліотеки логічно розбита на компоненти, їх дуже багато і з кожною новою версією Qt у них стає дедалі більше корисних класів.
Основні компоненти два — QtCore, що являє собою ядро бібліотеки і QtGui, що представляє компоненти графічного інтерфейсу. Як ми надалі побачимо, проект, що створюється, завжди має при собі два цих компоненти (за винятком консольних додатків, в яких обов'язкову роль грає QtCore).
Ну а далі, залежно від потреб, розробники вільні використовувати все, що душі завгодно. QtNetwork для роботи з мережею, написати свій Torrent-клієнт. QtMultimedia для реалізації відео-аудіо програвача. QtWebEngine для вбудовування у свою програму повноцінного браузерного движка. І багато іншого.
Варто також відзначити, що заявлена кросплатформність дійсно присутня. Ви можете взяти свій код, що розробляється на одній системі (Windows, MinGW) і скомпілювати її компілятором іншої системи (Linux, GCC) і отримати бінарний файл здатний запускатися там без особливих турбот. Як показала практика, особливий клопіт починається коли додаток стає сильно обвішаним сторонніми бібліотеками.
Приємним бонусом для веб-розробників стане можливість розробляти програми не тільки C++, але й мовою QML, сильно схожим з JavaScript. Це особлива гілка розвитку Qt, спрямована на швидке прототипування та розробку мобільних додатків.
Ну і звичайно ж, однією із родзинок Qt є середовище розробки Qt Creator. Універсальне та дуже зручне середовище розробки на Qt, не перевантажене зайвим функціоналом.
Початківець програміст постійно сумнівається, які технології почати освоювати цю чи якусь іншу. Чи потрібно програмісту-початківцю вивчати Qt? Однозначно потрібно! Наприклад, почитайте цей пост чи пошукайте що-небудь в інтернеті. Все ще не впевнені, чи потрібен Вам Qt? Якщо ви пишете на С++, Qt ви повинні знати, у вас просто немає іншої альтернативи.
Отже, поїхали...
Давайте, наприклад, напишемо простенький калькулятор - додавання двох чисел.
Створюємо новий проект. Як бачимо, існує кілька типів додатків. Ми як початківці, вибираємо "Додаток Qt Widgets":
Вказуємо ім'я проекту та папку для розміщення файлів, у мене: C:\projects\qt
Qt автоматично генерує такі файли:
- lesson1.pro - файл проекту
- main.cpp - головний файл з функцією main()
- mainwindow.cpp - вихідний код головного вікна
- mainwindow.h - заголовний файл головного вікна
- mainwindow.ui - файл форми головного вікна
Натискаємо кнопку "Завершити" – відкривається редактор для розробки програм на Qt.
Поки має бути все зрозуміло для Qt-розробника-початківця.
Відкриваємо головну форму (для цього переходимо до mainwindow.ui).
Зліва розташовуються компоненти до створення екранної форми, справа сама форма, вона порожня. Накидаємо потрібні компоненти, незабудемо поля введення QLineEdit назвати так: edtA, edtB і edtC відповідно.
Ми бачимо на екрані поля введення, підписи до них ліворуч та кнопку "A + B =". При натисканні цієї кнопки ми повинні скласти A і B і помістити результат в C.
Як бути? Будь-який початківець Qt-розробник припустить, що потрібно навісити на кнопку обробник натискання цієї кнопки і він має рацію! У будь-яких інших фреймворках є таке поняття як подія. Але в Qt вирішили випендритися і вигадали сигнали/слоти. Хоча, по суті, це практично теж саме.
Клацаємо правою кнопкою миші на кнопку "A + B =", відкривається спливаюче меню:
тиснемо на "Перейти до слота"
Вибираємо сигнал clicked() , і в редакторі коду, що відкрився, пишемо невеликий програмний код на Qt:
Void MainWindow::on_btnOK_clicked() ( int a = ui->edtA->text().toInt(); // Беремо текст edtA і перетворюємо його в число a int b = ui->edtB->text().toInt (); // Беремо текст edtB і перетворюємо його в число b int c = a + b; // Складаємо числа QString s = QString::number(c); // Перетворюємо результат у рядковий вигляд (s); // Вивести результат в edtC)
Функція обробки сигналу clicked() називається слотом on_btnOK_clicked().
Це крос-платформний інструментарій розробки програмного забезпечення на мові програмування C++. Є також «прив'язки» до багатьох інших мов програмування: Python – PyQt, Ruby – QtRuby, Java – Qt Jambi, PHP – PHP-Qt та інші.
Дозволяє запускати написане з його допомогою у більшості сучасних операційних систем шляхом простої компіляції програми для кожної ОС без зміни вихідного коду. Включає всі основні класи, які можуть знадобитися при розробці прикладного програмного забезпечення, починаючи від елементів графічного інтерфейсу і закінчуючи класами для роботи з мережею, базами даних і XML. Qt є повністю об'єктно-орієнтованим, що легко розширюється і підтримує техніку компонентного програмування.
У цій статті я покажу як написати просту програму Hello, World! з використанням бібліотеки Qt4
Середовище розробки
Спочатку визначимося із середовищем розробки. Особисто я для написання програма використовую платформну крос IDE Code::Blocks (докладніше про роботу в цій IDE з Qt4 можна почитати ). Також є плагіни для роботи з Qt в Eclipse. Комерційна версія Qt під MS Windows може бути інтегрована до MSVS. Програми також можна писати в будь-якому текстовому редакторі, а потім компілювати їх з командного рядка.Для наочності, я покажу як компілювати програми, написані Qt, вручну.
Перша програма
Спочатку в будь-якому текстовому редакторі створимо файл і назвемо його, наприклад, main.cppНапишемо в ньому таке:
- #include
- #include
- QApplication app(argc, argv);
- QDialog *dialog = new QDialog;
- QLabel * label = новий QLabel (dialog);
- label->setText( "Hello, World!" );
- dialog-> show ();
- return app.exec();
У рядках 1 і 2 ми підключили заголовні файли Qt, в яких знаходяться основні класи.
У рядку 4 ми оголосили функцію main – головну функцію, з якої починається виконання будь-якої програми. Вона повертає ціле число (результат роботи програми; 0 - якщо все гаразд) і приймає на вхід дві змінні - кількість параметрів командного рядка та масив, в якому вони збережені.
У рядку 5 ми створюємо об'єкт програми. Цьому об'єкту ми передаємо змінні командного рядка.
У рядку 6 ми створюємо діалог - графічне вікно прямокутної форми, із заголовком та кнопками у верхньому правому кутку. Створюємо мітку (рядок 7). При створенні мітки передаємо її конструктору покажчик на діалог, який стає її батьком. При видаленні батька автоматично видаляються всі його нащадки, що дуже зручно. Потім встановлюємо напис мітки шляхом виклику функції setText() (рядок 8). Як видно з прикладу, для тексту, що відображається, можна використовувати html-теги.
У рядку 9 ми відображаємо наше діалогове вікно з міткою на екрані.
І, нарешті, у рядку 10 ми запускаємо цикл обробки подій операційної системи додатком. Результат роботи об'єкта ми повертаємо як наслідок роботи програми.
Компіляція
Тепер скомпілюємо написану програму.Перейдемо до каталогу, куди ми зберегли наш файл main.cpp та виконаємо команду
$qmake-project
При цьому відбудеться створення заготівлі проекту Qt4, який автоматично буде включено всі файли вихідних кодів, що лежать в даній директорії. В результаті вийде файл з ім'ям як у поточної директорії та розширенням. Він виглядатиме так:
TEMPLATE = app
TARGET =
DEPENDPATH +=.
INCLUDEPATH +=.
# Input
SOURCES += main.cpp
В результаті ми отримаємо Makefile, який використовуємо для того, щоб скомпілювати програму, виконавши наступну команду:
Зачекаємо, поки процес компіляції не закінчиться і запустимо нашу першу програму. Вона виглядатиме приблизно так:
Друга програма
Щоб отримати повний контроль над створюваними вікнами та іншими віджетами, необхідно створювати похідні від них класи. Створимо похідний клас MyDialog. Як батьківський будемо використовувати клас QDialog. Опис нашого класу помістимо в заголовок mydialog.h:У перших чотирьох рядках ми підключаємо необхідні заголовні файли графічних елементів, що використовуються - діалогу, кнопки, написи і вертикального менеджера компонування. Використовувати такі великі файли заголовків як* Цей source code був highlighted with Source Code Highlighter.
- #include
- #include
- #include
- #include
- class MyDialog: public QDialog (
- Q_OBJECT
- public :
- MyDialog(QWidget *parent = 0);
У шостому рядку ми визначили наш клас похідним від QDialog.
На наступному рядку ми вказали макрос Q_OBJECT, який вказує передпроцесору Qt, що даний клас буде використовувати додаткові можливості Qt, наприклад, систему сигналів і слотів.
У рядку 9 ми вказуємо конструктор нашого діалогового вікна. Він має лише один вхідний параметр - покажчик на батьківський об'єкт (0 якщо батька немає).
Конструктор нашого класу ми визначимо у файлі mydialog.cpp:
* Цей source code був highlighted with Source Code Highlighter.
- #include "mydialog.h"
- MyDialog::MyDialog(QWidget *parent) : QDialog(parent) (
- QVBoxLayout *layout = новий QVBoxLayout(this );
- QLabel * label = new QLabel (this);
- label->setText( "Hello, World!" );
- QPushButton *button = новий QPushButton(this );
- button->setText("Close");
- layout->addWidget(label);
- layout->addWidget(button);
- connect(button, SIGNAL(clicked()), this , SLOT(close()));
У рядку 4 ми створюємо менеджер компонування, який автоматично відображатиме всі додані до нього віджети вертикально. Створення напису аналогічно до попереднього прикладу.
У рядках 7 та 8 створюємо кнопку та встановлюємо її текст. На наступних двох рядках ми додаємо наші віджети в менеджер компонування, щоб він їх автоматично впорядкував.
У рядку 11 ми підключаємо сигнал натискання clicked() кнопки button до слота close() нашого діалогового вікна. У кожного об'єкта Qt можуть бути свої сигнали та слоти, які можна підключати до сигналів та слотів інших об'єктів і таким чином здійснювати комунікацію між елементами програми.
Файл main.cpp набуде наступного вигляду:
* Цей source code був highlighted with Source Code Highlighter.
- #include
- #include "mydialog.h"
- int main(int argc, char * argv) (
- QApplication app(argc, argv);
- MyDialog *dialog = new MyDialog;
- dialog-> show ();
- return app.exec();
Перестворюємо проект командою
$qmake-project
Щоб нові файли автоматично до нього додалися і компілюємо його. Ось так виглядає наша нова програма:
Третя програма
Якщо діалогове вікно містить багато графічних елементів, створювати такі вікна досить втомлює. Для спрощення цього процесу є інструмент Qt Designer. Запускаємо йогоІ вибираємо створення діалогового вікна без кнопок. Додаємо на нього мітку та кнопку, редагуємо їхній текст. За допомогою інструмента редактора сигналів та слотів (Signal/Slot Editor) підключаємо сигнал натискання clicked() кнопки button до слота close() діалогового вікна. Маємо їх вертикально за допомогою менеджера компонування. Зберігаємо отриманий файл під назвою mydialog.ui. Пізніше він буде автоматично перетворено на заголовковий файл з ім'ям ui_mydialog.h.
Змінюємо заголовний файл нашого діалогового вікна mydialog.h наступним чином:
Не була б тим, чим вона є без того, що називається proof-of-concept. І в даному випадку роль цього доказу грає Qt Creator - середовище розробки під Qt з відкритим вихідним кодом, написане повністю на ній самій.
Qt Creator може показати чудово аскетичної IDE, особливо після роботи та програмування в чомусь іншому. Тим часом середовище містить все необхідне для роботи і є досить продуманим. Qt Creator поставляється в пакеті разом із бібліотекою Qt. . Вибирайте спосіб (онлайн, офлайн), платформу та вперед ( Примітка: описаний спосіб може змінитися в майбутньому, але в будь-якому випадку – завантажуйте дистрибутив бібліотеки тільки з офіційного сайту). Установка досить проста і особливих сюрпризів не несе.
До речі, під Linux і Mac OS X існує також варіант установки через репозитарій вашого дистрибутива (через brew у Mac OS X або apt в Ubuntu), але в цьому випадку ви ризикуєте отримати не найсвіжішу версію бібліотеки.
Після завантаження та встановлення залишається запустити Qt Creator і почати розробляти.
Середовище має три теми (тема Flat з'явилася в 4.0) інтерфейсу та кілька варіантів забарвлення синтаксису коду. За бажанням кольору синтаксису можна змінити будь-які інші. Як і генеральний колір IDE.
Плюсом для початківців знайомство із Qt стане вбудована колекція прикладів на будь-яку тему. Вибираємо пункт початок, клацаємо по кнопці Приклади, і вибираємо цікавий. Qt Creator запропонує відразу ж підготувати приклад для подальшого збирання та запуску. Це дуже зручно і дозволяє наживо подивитися на можливості Qt.
Приклади дуже добре допоможуть після деякого часу ознайомлення із середовищем та Qt. Основна фішка Qt Creator — вбудована довідка, що дозволяє не виходячи з середовища отримувати інформацію про будь-який клас і його методи та властивості. Достатньо стати на ім'я класу або екземплярі та натиснути F1. Збоку з'явиться вікно довідки, аналогічне документації https://doc.qt.io/ - головного довідкового порталу Qt. 
Якщо немає бажання ділити робочий простір із довідковим вікном і хочеться вдумливого читання, можна натиснути на кнопку Довідкау лівому сайдбарі. Вкладка Проектидозволяє налаштувати деякі етапи складання та запуску проекту, Налагодженняперемикає середовище у відповідний режим, кнопка Дизайнстає активним при редагуванні.ui файлів інтерфейсу. У вікні Редакторвідбувається головне дійство - написання коду. З усім цим ми розберемося пізніше.
У нижній лівій частині екрану розташовані манячі натиснути кнопки створення білда, налагоджувального запуску та запуску програми. А також режим складання - Налагодження, Реліз та Профільування.
Награвшись вдосталь із середовищем, можна переходити до створення свого власного проекту.