Создание графического интерфейса пользователя

1.

Создание графического
интерфейса пользователя

2.

Существующие интерфейсы
взаимодействия машины с
пользователем
Текстовой интерфейс пользователя
Интерфейс командной строки
Оконный интерфейс с использованием
псевдографики
Графический интерфейс пользователя
Оконный интерфейс
Масштабируемый интерфейс

3.

Текстовой интерфейс
(Интерфейс командной строки)

4.

Текстовой интерфейс
(Оконный интерфейс с
использованием псевдографики)

5.

Графический интерфейс
(Оконный интерфейс)

6.

Графический интерфейс
(Масштабируемый интерфейс)

7.

Библиотеки и API для создания
интерфейса пользователя
WinAPI (Только Windows)
Qt (Кросс-платформенная)
wxWidgets (Кросс-платформенная)
Motif (Кросс-платформенная)
Tk (Кросс-платформенная)
Cocoa (Только Mac OS X)
Carbon (Только Mac OS X и младше)

8.

Пример программы на Qt
Исходный код программы использующей библиотеку Qt
#include <QApplication>
#include <QFont>
#include <QPushButton>
int main(int argc, char* argv[])
{
QApplication app(argc, argv); // создание приложения
QPushButton quit("Quit"); // создание кнопки
quit.resize(75, 30); // установка размеров кнопки
quit.setFont(QFont("Times", 18, Qfont::Bold)); // установка
шрифта
// организация связи между событием и реакцией на него
QObject::connect(&quit, SIGNAL(clicked()), &app,
SLOT(quit()));
quit.show(); // показать кнопку
return app.exec(); // передать управление приложению

9.

Пример программы на Qt
Полученный результат компиляции и запуска
приложения
созданная кнопка

10.

Возможная общая структура
приложения
QApplication
QPushButton
QMainWindow
QTableView
TMonitor
QSqlDatabase
TDataBase
TComputer

11.

Подсистемы Qt
QtCore — ядро библиотеки
QtGui — графический интерфейс
пользователя
QtNetwork — сетевой интерфейс
QtOpenGL — 3D графика
QtSql — интерфейс баз данных
QtSvg — векторная графики
QtXml — парсер XML
QtScript — парсер скриптов

12.

Сигналы/слоты
В Qt различные
функции-члены можно Qt
связывать, как с
каким либо событием (сигналом) так и с друг другом.
connect(где_произошёл_сигнал, SIGNAL(сигнал),
где_можно_обработать,
SLOT(слот));
Допустим по нажатию на кнопку происходит сигнал:
clicked() в объекте button. Для разных объектов
могут возникать различные сигналы.
Так же в класс необходимо добавлять макрос Q_OBJECT,
что бы можно было собрать программу содержащею
сигналы/слоты.

13.

Пример приложения на Qt/Си++
Требуется написать текстовой редактор с меню
и возможностью открывать и закрывать
простые текстовые файлы.

14.

Структура организации
файлов проекта
mainwindow.h
new.png
open.pn
g
save.pn
g
main.cpp
mainwindow.cp
p
app.qrc
app.pro

15.

# Место расположения и имя исполняемого файла
TARGET = bin/qtapp
Содержание
файла
проекта
DEPENDPATH += . bin include po src
# Список всех катологов используемых в проекте
# Каталог заголовочных файлов
INCLUDEPATH += . include
# Кодировка исходного кода
CODECFORSRC = UTF-8
# Настойки
CONFIG += qt debug
# Заголовочные файлы
HEADERS += include/mainwindow.h
# Файлы исходного кода
SOURCES += src/main.cpp src/mainwindow.cpp
# Каталог расположения объектных файлов
OBJECTS_DIR = obj
# Каталог расположения файлов moc

16.

Содержание файла ресурсов
<!DOCTYPE RCC><RCC version="1.0">
<qresource>
<file>images/new.png</file>
<file>images/open.png</file>
<file>images/save.png</file>
</qresource>
</RCC>

17.

Структура подсистем приложения
MainWindow()
QMainWindow
createActions()
MainWindow
QPlainTextEdi
*textEdit
t
*fileMen
QMenu
u
QAction
QString
createMenus()
maybeSave
()
*newAct
connect
newFile()
*openAc
t
connect
open()
*saveAc
t
connect
save()
*exitAct
connect
close()
curFile
setCurrentFile()
loadFile()
saveFile()
strippedName()

18.

Содержимое файла
mainwindow.h
#include <QMainWindow>
class QMenu;
class QAction;
class QPlainTextEdit;
class MainWindow: public QMainWindow
{
Q_OBJECT
сиг/сл
// макрос необходим так как имеются свои
public:
MainWindow(QWidget* parent = 0);
virtual ~MainWindow();
private slots: // методы слоты
void newFile();

19.

void
элементов меню
createActions(); // создание
Содержимое файла
void
createMenus(); // создание меню
mainwindow.h
void
setCurrentFile(const QString &
fileName);
QString
fullFileName);
strippedName(const QString &
QString
редактируемый файл
curFile; // текущий
QMenu
*fileMenu;
QAction
*newAct;
QAction
*openAct;
QAction
*saveAct;
QAction
*exitAct;
QPlainTextEdit
*textEdit;

20.

#include <QtGui>
Содержимое файла
#include "mainwindow.h"
mainwindow.cpp
#include <QTranslator>
MainWindow::MainWindow(QWidget* parent): QMainWindow(parent)
{
textEdit = new QplainTextEdit; // создаём текстовое
поле
setCentralWidget(textEdit);
центре
//
размещаем его в
createActions(); // создаём пункты меню
createMenus(); // создаём меню
setWindowTitle(tr("Text editor. Qt Application."));
}
MainWindow::~MainWindow()

21.

{
Содержимое файла
newAct = new QAction(QIcon(":/images/new.png"), tr("&New"), this);
mainwindow.cpp
// создаём пункты меню
newAct->setShortcuts(QKeySequence::New);
connect(newAct, SIGNAL(triggered()), this, SLOT(newFile()));
openAct = new
QAction(QIcon(":/images/open.png"),tr("&Open..."),this);
openAct->setShortcuts(QKeySequence::Open);
connect(openAct, SIGNAL(triggered()), this, SLOT(open()));
saveAct = new QAction(QIcon(":/images/save.png"), tr("&Save"),
this);
saveAct->setShortcuts(QKeySequence::Save);
connect(saveAct, SIGNAL(triggered()), this, SLOT(save()));
exitAct = new QAction(tr("E&xit"), this);

22.

void MainWindow::createMenus()
{
меню
Содержимое
файла
// добавляем пункт меню File и вставляем в него пункт
mainwindow.cpp
fileMenu = menuBar()->addMenu(tr("&File"));
fileMenu->addAction(newAct);
fileMenu->addAction(openAct);
fileMenu->addAction(saveAct);
fileMenu->addSeparator();
fileMenu->addAction(exitAct);
}
void MainWindow::newFile()
{
if (maybeSave()) { // проверяем редактировался ли файл
textEdit->clear();

23.

Содержимое файла
void MainWindow::open()
mainwindow.cpp
{
if (maybeSave()) { // проверяем редактировался ли файл
QString fileName =
QFileDialog::getOpenFileName(this);
if (!fileName.isEmpty()) // если есть открытый файл
loadFile(fileName); // загрузить файл
}
}
bool MainWindow::save()
{
return saveFile(curFile);
}

24.

bool MainWindow::maybeSave()
{
Содержимое файла
if (textEdit->document()->isModified()) {
mainwindow.cpp
QMessageBox::StandardButton ret;
ret = QMessageBox::warning(this, tr("Application"),
tr("The document has been modified.\n"
"Do you want to save your changes?"),
QMessageBox::Save |
QMessageBox::Discard |
QMessageBox::Cancel);
if (ret == QMessageBox::Save)
return save();
else if (ret == QMessageBox::Cancel)
return false;
}

25.

void MainWindow::loadFile(const QString & fileName)
{
Содержимое файла
QFile file(fileName);
mainwindow.cpp
if (!file.open(QFile::ReadOnly | QFile::Text)) {
QMessageBox::warning(this, tr("Application"),
tr("Cannot read file %1:\n%2.")
.arg(fileName)
.arg(file.errorString()));
return;
}
QTextStream in(&file); // открываем поток на чтение
QApplication::setOverrideCursor(Qt::WaitCursor);
textEdit->setPlainText(in.readAll()); // читаем из потока
QApplication::restoreOverrideCursor();

26.

{
Содержимое файла
if (!file.open(QFile::WriteOnly
| QFile::Text)) {
mainwindow.cpp
QFile file(fileName);
QMessageBox::warning(this, tr("Application"),
tr("Cannot write file
%1:\n%2.")
.arg(fileName).arg(file.errorString()));
return false;
}
QTextStream out(&file); // открываем поток на запись
QApplication::setOverrideCursor(Qt::WaitCursor);
out << textEdit->toPlainText(); // пишем в поток
QApplication::restoreOverrideCursor();
setCurrentFile(fileName);

27.

{
Содержимое файла
textEdit->document()->setModified(false);
mainwindow.cpp
curFile = fileName;
setWindowModified(false);
QString shownName;
if (curFile.isEmpty()) // если файл не открыт
shownName = "untitled.txt";
else shownName = strippedName(curFile); // убираем путь
setWindowTitle(tr("%1[*] - %2")
.arg(shownName)
.arg(tr("Application")));
}
QString MainWindow::strippedName(const QString & fullFileName)
{

28.

Содержимое файла main.cpp
#include <QApplication>
#include "mainwindow.h"
int main(int argc, char* argv[])
{
QApplication app(argc, argv);
MainWindow mainWindow;
mainWindow.show();
return app.exec();
}

29.

Пример готовой программы на
Qt/Си++