Перші кроки з Qt

Ласкаво просимо до світу Qt — крос-платформного набору інструментів для ГІК (графічного інтерфейсу користувача). В цьому посібнику з перших кроків ми отримаємо базові знання з Qt, реалізовуючи просту програму Нотатник. Після прочитання цього посібника ви маєте бути готові зануритись до наших оглядів та документації з API та знайти потрібну вам інформацію для програми, що ви розробляєте.

Привіт, Нотатник

В цьому першому прикладі ми просто створимо та відобразимо текстовий редактор у вікні на стільниці. Це буде найпростіша можлива програма Qt, що має ГІК.

Код програми:

  1. #include <QApplication>
  2. #include <QTextEdit>
  3.  
  4. int main(int argc, char **argv)
  5. {
  6.     QApplication app(argc, argv);
  7.  
  8.     QTextEdit textEdit;
  9.     textEdit.show();
  10.  
  11.     return app.exec();
  12. }

Давайте переглянемо код рядок за рядком. В перших двох рядках ми підключаємо файли заголовків для QApplication [doc.qt.nokia.com] та QTextEdit [doc.qt.nokia.com], двох класів, що потрібні для цього прикладу. Усі класи Qt мають файл заголовків, названий так само як і клас.

В рядку 6 створюється об’єкт QApplication [doc.qt.nokia.com]. Цей об’єкт керує ресурсами програми і має бути запущений в будь-який програмі Qt, що має ГІК. Йому передаються argc та argv, оскільки Qt обробляє деякі параметри командного рядка.

В рядку 8 створюється об’єкт QTextEdit [doc.qt.nokia.com]. Текстовий редактор є візуальним елементом ГІК. Ми називаємо такі елементи віджетами в Qt. Прикладами інших віджетів є панелі прокрутки, мітки та перемикачі. Віджет також може бути контейнером для інших віджетів, як, наприклад, діалог або головне вікно програми.

В рядку 9 текстовий редактор відображується на екрані у його власному вікні. Оскільки віджети також функціонують як контейнери (наприклад, QMainWindow [doc.qt.nokia.com], який має панелі інструментів, меню, рядок статусу та декілька інших віджетів), то можна відобразити один віджет у його власному вікні. Віджети не відображаються за замовчанням; функція show() [doc.qt.nokia.com] робить віджет видимим.

В рядку 11 відбувається вхід до циклу подій QApplication [doc.qt.nokia.com]. Коли програма Qt виконується, генеруються події, що доставляються до віджетів програми. Прикладами подій є натискання на кнопки миші та клавіші клавіатури. Коли ви набираєте текст в віджеті текстового редактора, він отримує події натискання клавіш та реагує промальовуванням тексту, що набирається.

Щоб запустити програму, відкрийте командний рядок та перейдіть до теки, в якій знаходиться файл .cpp програми. Наступні команди оболонки зберуть програму.

  1. qmake -project
  2. qmake
  3. make

При цьому виконуваний модуль з’явиться в теці part1 (майте на увазі, що у Windows вам, можливо, потрібно буде використовувати nmake замість make. Також, виконуваний модуль буде розміщено в part1/debug або part1/release). qmake – це інструмент збірки з Qt, який використовує конфігураційний файл. qmake генерує його для нас, коли запускається з аргументом -project. Коли конфігураційний файл (із суфіксом .pro) існує, qmake створює файл збірки, який збирає для вас програму. Ми розглянемо написання власних файлів .pro пізніше.

Дізнайтесь більше

Про Тут
Віджети та геометрія вікна“Віджети вікна та діалогу”:http://doc.qt.nokia.com/4.7/application-windows.html
Події та обробка подій“Система подій”:http://doc.qt.nokia.com/4.7/eventsandfilters.html

Додаємо кнопку виходу

В справжній програмі вам, зазвичай, буде потрібен більше ніж один віджет. Зараз ми додамо QPushButton [doc.qt.nokia.com] нижче текстового редактора. Кнопка буде здійснювати вихід з програми Нотатник, коли на неї будуть натискати (наприклад, клацнуть мишею).

Давайте поглянемо на код.

  1. #include <QtGui>
  2.  
  3. int main(int argv, char **args)
  4. {
  5.     QApplication app(argv, args);
  6.  
  7.     QTextEdit textEdit;
  8.     QPushButton quitButton("Quit");
  9.  
  10.     QObject::connect(&quitButton, SIGNAL(clicked()), qApp, SLOT(quit()));
  11.  
  12.     QVBoxLayout layout;
  13.     layout.addWidget(&textEdit);
  14.     layout.addWidget(&quitButton);
  15.  
  16.     QWidget window;
  17.     window.setLayout(&layout);
  18.  
  19.     window.show();
  20.  
  21.     return app.exec();
  22. }

Рядок 1 включає QtGui [doc.qt.nokia.com], який містить усі класи ГІК Qt.

В рядку 10 використовується механізм сигналів та слотів Qt, щоб завершити програму, коли натискається кнопка Вихід. Слот – це функція, що може бути викликана під час виконання програми за допомогою її назви (як рядкового літералу). Сигналом є функція, яка під час свого виклику, виконає слоти зареєстровані до неї; ми називаємо це “під’єднати слот до сигналу та видати сигнал”.

quit() [doc.qt.nokia.com] є слотом QApplication [doc.qt.nokia.com], який завершує програму. clicked() [doc.qt.nokia.com] є сигналом, який QPushButton [doc.qt.nokia.com] видає, коли натискається. Статична функція QObject::connect [doc.qt.nokia.com]() піклується про з’єднання слота із сигналом. SIGNAL() та SLOT() – це два макроси, що приймають сигнатури функцій сигналу та слота, що з’єднуються. Також ми повинні передати вказівники на об’єкти, що мають надіслати та отримати сигнал.

В рядку 12 створюється QVBoxLayout [doc.qt.nokia.com]. Як вже згадувалось, віджети можуть містити інші віджети. Можна встановити границі (розташування та розмір) дочірніх віджетів безпосередньо, однак, зазвичай легше використати компонувальник. Компонувальник керує границями дочірніх віджетів. Наприклад, QVBoxLayout [doc.qt.nokia.com] розташовує дітей у вертикальному рядку.

Рядки 13 та 14 додають текстовий редактор до компонувальника. В рядку 17 ми встановлюємо конмпонувальник на віджет.

Дізнайтесь більше

Про Тут
Сигнали та слоти“Сигнали та слоти”:http://doc.qt.nokia.com/4.7/signalsandslots.html
Компонування“Управління компонуванням”:http://doc.qt.nokia.com/4.7/layout.html, “Віджети та компонування”:http://doc.qt.nokia.com/4.7/widgets-and-layouts.html, “Приклади компонування”:http://doc.qt.nokia.com/4.7/examples-layouts.html
Віджети, що входять до Qt“Галерея віджетів Qt”:http://doc.qt.nokia.com/4.7/gallery.html, “Приклади віджетів”:http://doc.qt.nokia.com/4.7/examples-widgets.html

Успадкування від QWidget

Коли користувач бажає завершити програму, ви можете хотіти відобразити діалог, в якому запитаєте чи дійсно він хоче вийти. В цьому прикладі ми успадкуємось від QWidget [doc.qt.nokia.com] та додамо слот, який під’єднаємо до кнопки Вихід.

Давайте поглянемо на код:

  1. class Notepad : public QWidget
  2. {
  3.     Q_OBJECT
  4.  
  5. public:
  6.     Notepad();
  7.  
  8. private slots:
  9.     void quit();
  10.  
  11. private:
  12.     QTextEdit *textEdit;
  13.     QPushButton *quitButton;
  14. };

Макрос Q_OBJECT повинен бути першим у визначенні класу, він оголошує наш клас як QObject (звичайно, він повинен бути успадкованим від QObject [doc.qt.nokia.com]). QObject [doc.qt.nokia.com] додає декілька особливостей до звичайного класу C++. Найважливішим є те, що назва класу та імена слотів можуть бути отримані під час виконання. Також є можливість дізнатись типи параметрів слоту та викликати його.

В рядку 13 оголошено слот quit(). Це легко зробити завдяки макросу slots. Слот quit() тепер може бути під’єднаним до сигналів з відповідними сигнатурами (будь-який сигнал, що не приймає параметрів).

Замість того, щоб встановлювати ГІК та під’єднувати слот в функції main(), тепер ми використаємо конструктор Notepad.

  1. Notepad::Notepad()
  2. {
  3.     textEdit = new QTextEdit;
  4.     quitButton = new QPushButton(tr("Quit"));
  5.  
  6.     connect(quitButton, SIGNAL(clicked()), this, SLOT(quit()));
  7.  
  8.     QVBoxLayout *layout = new QVBoxLayout;
  9.     layout->addWidget(textEdit);
  10.     layout->addWidget(quitButton);
  11.  
  12.     setLayout(layout);
  13.  
  14.     setWindowTitle(tr("Notepad"));
  15. }

Як видно у визначенні класу, ми використовуємо вказівники на наші QObject [doc.qt.nokia.com]’и (textEdit та quitButton). Як правило, вам завжди слід виділяти QObject [doc.qt.nokia.com]’и в купі та ніколи не копіювати їх.

Тепер ми використовуємо функцію tr() [doc.qt.nokia.com] навколо рядків, що відображаються користувачу. Ця функція необхідна, якщо ви хочете надавати вашу програму більше ніж однією мовою (наприклад, англійською та китайською). Ми не будемо розглядати деталі тут, однак ви можете перейти за посиланням з таблиці “Дізнайтесь більше” до Qt Linguist.

Дізнайтесь більше

Про Тут
tr() та інтернаціоналізація“Посібник з Qt Linguist”:http://doc.qt.nokia.com/4.7/linguist-manual.html, “Написання коду для перекладу”:http://doc.qt.nokia.com/4.7/i18n-source-translation.html, Приклад “Привіт tr”:http://doc.qt.nokia.com/4.7/linguist-hellotr.html(), “Інтернаціоналізація з Qt”:http://doc.qt.nokia.com/4.7/internationalization.html
QObject [doc.qt.nokia.com]’и та об’єктна модель Qt (Це необхідний матеріал, щоб зрозуміти Qt)“Об’єктна модель”:http://doc.qt.nokia.com/4.7/object.html
qmake та система збірки Qt“Посібник з qmake”:http://doc.qt.nokia.com/4.7/qmake-manual.html

Створення файлу .pro

Для цього прикладу ми напишемо наш власний файл .pro замість використання qmake з опцією -project.

  1. HEADERS =  notepad.h
  2. SOURCES =  notepad.cpp \
  3.            main.cpp

Наступні команди оболонки збирають приклад.

  1. qmake
  2. make

Використання QMainWindow

Багато програм отримають переваги від використання QMainWindow [doc.qt.nokia.com], який має своє власне компонування, до якого ви можете додавати панель меню, віджети, що прикріплюються, панелі інструментів та рядок статусу. QMainWindow [doc.qt.nokia.com] має центральну область, що може бути зайнята віджетом довільного типу. В нашому випадку ми розташуємо там текстовий редактор.

Давайте поглянемо на нове визначення класу Notepad.

  1.  #include <QtGui>
  2. class Notepad : public QMainWindow
  3. {
  4.     Q_OBJECT
  5. public:
  6.     Notepad();
  7. private slots:
  8.     void open();
  9.     void save();
  10.     void quit();
  11. private:
  12.     QTextEdit *textEdit;
  13.     QAction *openAction;
  14.     QAction *saveAction;
  15.     QAction *exitAction;
  16.     QMenu *fileMenu;
  17. };

Ми включили ще два слоти, які можуть зберігати та відкривати документ. Ми реалізуємо їх в наступній частині.

Доволі часто в головному вікні один і той самий слот може бути викликаний декількома різними віджетами. Прикладами є пункти меню та кнопки на панелі інструментів. Щоб полегшити це, Qt надає QAction [doc.qt.nokia.com] (дія), який може бути переданий декільком віджетам та під’єднаний до слота. Наприклад, як QMenu [doc.qt.nokia.com] так і QToolBar [doc.qt.nokia.com] можуть створювати пункти меню та кнопки на панелі з одного й того ж QAction [doc.qt.nokia.com]. Ми скоро побачимо, як це працює.

Як і раніше ми використовуємо конструктор Notepad для встановлення ГІК.

  1. Notepad::Notepad()
  2. {
  3.     openAction = new QAction(tr("&Open"), this);
  4.     saveAction = new QAction(tr("&Save"), this);
  5.     exitAction = new QAction(tr("E&xit"), this);
  6.  
  7.     connect(openAction, SIGNAL(triggered()), this, SLOT(open()));
  8.     connect(saveAction, SIGNAL(triggered()), this, SLOT(save()));
  9.     connect(exitAction, SIGNAL(triggered()), qApp, SLOT(quit()));
  10.  
  11.     fileMenu = menuBar()->addMenu(tr("&File"));
  12.     fileMenu->addAction(openAction);
  13.     fileMenu->addAction(saveAction);
  14.     fileMenu->addSeparator();
  15.     fileMenu->addAction(exitAction);
  16.  
  17.     textEdit = new QTextEdit;
  18.     setCentralWidget(textEdit);
  19.  
  20.     setWindowTitle(tr("Notepad"));
  21. }

QAction [doc.qt.nokia.com]’и створюються з текстом, що має з’явитись на віджетах, до яких ми їх додаємо (в нашому випадку це пункти меню). Якщо б ми також хотіли додати їх до панелі інструментів, ми б могли призначити до них піктограми [doc.qt.nokia.com].

Коли по пункту меню клацнуть, елемент запустить дію і буде викликано відповідний слот.

Дізнайтесь більше

Про Тут
Головні вікна та класи головного вікна“Головне вікно програми”:http://doc.qt.nokia.com/4.7/mainwindow.html, “Приклади головного вікна”:http://doc.qt.nokia.com/4.7/examples-mainwindow.html
Програми з MDI“QMdiArea”:http://doc.qt.nokia.com/4.7/qmdiarea.html, “Приклад MDI”:http://doc.qt.nokia.com/4.7/mainwindows-mdi.html

Збереження та завантаження

В цьому прикладі ми реалізуємо функціональність слотів open() та save(), які ми додали в попередньому прикладі.

Ми почнемо зі слоту open():

  1. QString fileName = QFileDialog::getOpenFileName(this, tr("Open File"), "",
  2.     tr("Text Files (*.txt);;C++ Files (*.cpp *.h)"));
  3.  
  4. if (fileName != "") {
  5.     QFile file(fileName);
  6.     if (!file.open(QIODevice::ReadOnly)) {
  7.         QMessageBox::critical(this, tr("Error"),
  8.             tr("Could not open file"));
  9.         return;
  10.     }
  11.     QString contents = file.readAll().constData();
  12.     textEdit->setPlainText(contents);
  13.     file.close();
  14. }

На першому кроці ми запитаємо у користувача ім’я файлу для відкриття. В Qt є QFileDialog [doc.qt.nokia.com] – діалог, з якого користувач може вибрати файл. На зображенні вище показано цей діалог в Kubuntu. Статична функція getOpenFileName() [doc.qt.nokia.com] відображує модальний файловий діалог, а повернення з неї не відбувається, доки користувач не вибере файл. Вона повертає шлях до обраного файлу або порожній рядок, якщо користувач скасував діалог.

Якщо в нас є ім’я файлу, ми намагаємось відкрити файл за допомогою функції open() [doc.qt.nokia.com], яка повертає істинне значення, якщо файл вдалось відкрити. Ми не будемо тут заглиблюватись в обробку помилок, але ви можете перейти за посиланням з частини “Дізнайтесь більше”. Якщо файл не вдалось відкрити, ми використовуємо QMessageBox [doc.qt.nokia.com], щоб відобразити діалог з повідомленням про помилку (див. опис класу QMessageBox [doc.qt.nokia.com] для деталей).

Реальне читання даних є доволі тривіальним з використанням функції readAll() [doc.qt.nokia.com], яка повертає усі дані з файлу в QByteArray [doc.qt.nokia.com]. Метод constData() [doc.qt.nokia.com] повертає усі дані з масиву як const char*, для якого у QString [doc.qt.nokia.com] є конструктор. Зміст в подальшому може бути відображено в текстовому редакторі. Потім ми закриваємо файл функцією close() [doc.qt.nokia.com], щоб повернути файловий дескриптор назад операційній системі.

Тепер, давайте перейдемо до слота save().

  1. QString fileName = QFileDialog::getSaveFileName(this, tr("Save File"), "",
  2.     tr("Text Files (*.txt);;C++ Files (*.cpp *.h)"));
  3.  
  4. if (fileName != "") {
  5.     QFile file(fileName);
  6.     if (!file.open(QIODevice::WriteOnly)) {
  7.        // повідомлення про помилку
  8.     } else {
  9.     QTextStream stream(&file);
  10.     stream << textEdit->toPlainText();
  11.     stream.flush();
  12.     file.close();
  13.     }
  14. }

Коли ми записуємо зміст текстового редактора до файлу, ми використовуємо клас QTextStream [doc.qt.nokia.com], який обгортає об’єкт QFile [doc.qt.nokia.com]. Текстовий потік може записувати QString’и безпосередньо до файлу; QFile [doc.qt.nokia.com] приймає лише сирі дані (char*) за допомогою функцій write() [doc.qt.nokia.com] класу QIODevice [doc.qt.nokia.com].

Дізнайтесь більше

Про Тут
Файли та пристрої I/O“QFile”:http://doc.qt.nokia.com/4.7/qfile.html, QIODevice”:http://doc.qt.nokia.com/4.7/qiodevice.html