Разработка Android приложения. Часть 2. Создание приложения from scratch

Статья о том, как разработать собственное Android-приложение в среде QtCreator, шаг за шагом.

Создание проекта

Итак, всё начинается с запуска QtCreator, который мы установили и настроили в первой части нашей статьи. Для создания собственного проекта — кликаем на меню Файл в верхней левой части окна и выбираем пункт Создать файл или проект…. Вы можете также воспользоваться сочетанием клавиш Ctrl + N (только не забудьте переключить раскладку на английский язык перед этим).

Создание проекта

После этого вам предстоит выполнить стандартную процедуру для создания нового проекта.

Новый файл или проект

Для создания проекта приложения вам необходимо выбрать пункт Приложение Qt Widgets, как показано на скриншоте:

Создание проекта. Выбор шаблона

Размещение проекта

Создание проекта. Размещение проекта

Первое, что вам предложат сделать — выбрать название проекта и его расположение на жёстком диске. Вы можете последовать примеру на экране, затем кликаем Далее.

Выбор системы сборки

Создание проекта. Выбор системы сборки

Затем вам будет нужно определиться с системой сборки. Что это такое?

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

В нашем случае среда Qt разработки предоставляет собственную систему сборки — Qmake. Синтаксис сборочного файла qmake достаточно прост, чуть позже мы к этому вернёмся, а пока пропустим этот пункт (здесь нас всё устраивает) и продолжим настраивать наш проект.

Информация о классе

Далее мы настраиваем главный класс нашего приложения.

Создание проекта. Главный виджет

Класс MainWindow будет содержать UI приложения и интерфейсную логику.

UI (User Interface) — пользовательский интерфейс приложения, часть программы, через которую пользователь имеет возможность взаимодействовать с функционалом приложения, то есть её основными функциями. UI может быть консольным и тогда программа управляется посредством консольных команд. UI также может быть графическим, т.е. исполненным в виде графических элементов (кнопок, чекбоксов, окон ввода и т.д.) и тогда его называют GUI (Graphical UI). В Qt графические элементы приложения именуют виджетами и для их использования существует специальный заголовочный файл QtWidgets. Дальше мы познакомимся с ними подробнее.

Здесь мы тоже ничего не меняем, оставляем всё как есть.

Файл переводов

Файл переводов это отдельная тема касающаяся локализации вашего приложения. Используя возможности локализации Qt, можно создавать приложения, которые будут корректно отображать текстовую информацию на родном языке пользователя в зависимости от его географического расположения. 

Создание проекта. Локализация

В этой статье мы не будем рассматривать эту тему, но все кто желает, могут ознакомиться с ней в официальной справке, либо на сайте Qt.

Создание проекта. Локализация (Россия)

Здесь нам нужно выбрать из списка доступных языков свой родной — Великий и Могучий Русский язык.

Выбор комплекта

Создание проекта. Выбор платформ для сборки

Итак, если вы хотите попробовать запустить приложение на своём компьютере, вам нужно выбрать пункт Desktop, иначе вам достаточно указать только пункт Android.

Управление проектом

Если вы используете систему контроля версий, такую как SVN или Git, то вы можете указать её в пункте Добавить под контроль версии. В этом случае QtCreator создаст для вас отдельный репозиторий.

Создание проекта. Подключение системы контроля версий

Система контроля версий ( сокращённо СКВ) представляет собой машину времени для файлов вашего проекта — с ней вы всегда можете вернуть любой файл в любое фиксированное состояние.

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

Так что если вы ещё не установили себе СКВ, то я настоятельно рекомендую это сделать. Я например пользуюсь Git, т.к. она позволяет сохранять исходный код моих проектов и делиться им с помощью веб-сервиса GitHub. О том как пользоваться Git и GitHub вы можете прочитать здесь и здесь. Стоит уделить внимание этой теме так же потому, что знание хотя бы одной СКВ как правило требуется при устройстве на работу в любую  уважающую себя IT компанию.

Итак, это последний пункт для настройки вашего проекта. Теперь нам предстоит заняться непосредственно процессом разработки.

Разработка приложения

Структура приложения

После создания и конфигурации вашего проекта он откроется в среде QtCreator. Это будет выглядеть примерно так:

Структура приложения

Обратите внимание на панель справа. Здесь вы можете видеть структуру вашего проекта. Перед вами несколько файлов:

  • programmer.pro файл с инструкциями сборки для qmake
  • main.cpp главный файл, содержащий точку входа в ваше приложение
  • mainwindow.h заголовочный файл главного окна вашего приложения
  • mainwindow.cpp файл содержащий UI-логику вашего приложения
  • mainwindow.ui файл QtDesigner, содержащий описание макета GUI
  • programmer_ru_RU.ts файл локализации

 

В последствии к данной структуре добавятся ещё несколько файлов, о чём будет рассказано далее.

Главный файл

Давайте подробнее остановимся на главном файле нашего приложения. Откроем файл main.cpp Здесь всего 11 строк, как видно он совсем не большой:

  • строка 1 подключает заголовочный файл главного виджета приложения
  • строка 3 подключает стандартный класс приложения QApplication
  • строка 7 создаёт объект приложения Qt с передачей аргументов командной строки
  • строка 8 создаёт объект главного окна вашего приложения MainWindow
  • строка 9 делает этот объект видимым
  • строка 10 запускает ваше приложение с передачей кода возврата по завершении

 

Запуск приложения

После выполнения данного кода приложение будет запущено и перед пользователем появится главное окно.

Окно пустого проекта

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

Кнопка запуска приложения

Режим отладки

Среда QtCreator предоставляет возможность удобной отладки приложения в графическом режиме. Собственно она использует старый добрый GDB в качестве программы отладчика. С помощью него вы можете полностью контролировать ход выполнения вашего приложения по шагам, а также получать информацию о состоянии памяти вашей программы на каждом шаге. Это весьма полезно, когда вы сталкиваетесь с каким-либо неожиданным поведением вашего кода.

Нельзя теоретизировать, прежде чем появятся факты. Неизбежно начинаешь подстраивать факты под свою теорию, а не строить теорию на основе фактов.

цитата из к/ф «Шерлок Холмс»

Когда-то на заре компьютерной эры, когда компьютеры были большими, а программы к ним маленькими — сбои в работе программ возникали, каким бы странным это ни казалось, по причине поломок в компьютерном оборудовании, вызываемых в том числе и наличием внутри них живой органики в виде жуков-багов (от англ. bugs), вызывающих короткое замыкание при попадании на контакты радиоэлементов электронных плат…

Я констатировал факт. Факт при этом визжал и вырывался, но я его все-таки констатировал.

цитата из к/ф «Шерлок Холмс»

Соответственно, отлаживать программу означало то же самое, что и производить проверку компьютерного железа на предмет наличия багов для устранения последствий сбоев, что собственно из называли тогда de-bug. Затем эта терминология перешла в мир компьютерных программ и теперь мы имеем целый класс программ выполняющих данную функцию в области копьютерного кода — дебаггеров (от англ. слова debugger).

Перейдём к делу. Далее вам потребуется знание того, как запускать приложение в режиме отладки, потому как отладка занимает значительную часть рабочего времени в процессе разработки приложения. Для того, чтобы запустить ваше приложение в режиме отладки сперва вам нужно выбрать режим Отладка, воспользовавшись элементом на левой нижней панели QtCreator

Кнопка выбора режима запуска приложения Выбор отладки на Android

Вам нужно выбрать пункт Отладка.

Это позволит Qt подготовить ваше приложение к процессу отладки, автоматически настроить нужные ключи компилятора для сбора отладочной информации. Если вы хотите заниматься отладкой на вашем компьютере, то вы также можете выбрать пункт Desktop (если вы указали поддержку Desktop на этапе создания проекта).

Выбор отладки на Desktop

После этого вы можете запустить ваше приложение в режиме отладки, воспользовавшись элементомКнопка запуска в режиме отладки

QtCreator запустит ваше приложение и автоматически подключит его к программе отладчика GDB, а так же немного изменит свой вид, чтобы сделать процесс отладки для вас более комфортным.

Запуск в режиме отладки

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

Здесь представлены кнопки  управления процессом отладки:

  • первая кнопка — приостановка процесса отладки — программа останавливается в произвольном месте, в котором она оказалась на текущий момент, эта же кнопка позволяет продолжить процесс отладки, в случае если программа уже остановлена
  • вторая кнопка — остановка отладчика — выход из режима отладки и закрытие приложения
  • кнопки 3, 4, 5 — кнопки управления ходом отладки — они отвечают за навигацию в коде приложения, позволяют переходить между функциональными блоками программы, входить и выходить из заданных блоков
  • кнопка 6 — кнопка перезапуска — перезапускает сессию отладки

 

Подробнее рассмотрим процесс приостановки программы. Программа может быть приостановлена в 3-х случаях:

  1. Если вы нажали на кнопку приостановки процесса отладки
  2. Если программа попала в точку останова (breakpoint)
  3. Если программа получила сигнал аварийного останова типа SIGSEGV

Точка останова (break point)

В произвольной строке исходного кода вашей программы вы можете поставить точку останова. Чтобы это сделать вам достаточно кликнуть по области слева от номера выбранной строки как на примере ниже

Breakpoint

При наведении курсора на область изображения точки останова, вы можете увидеть дополнительную информацию

Breakpoint hint

Хорошо, теперь если вы снова запустите ваше приложение в режиме отладки, то ваше приложение остановится в данной точкеОтладочный режим. Останов приложения в точке останова

На панели справа вы увидите информацию о состоянии переменных и объектов вашей программы на момент останова  вашего приложения.

ФАКТЫ, ФАКТЫ, ФАКТЫ! Я не могу строить дом без цемента!

цитата из к/ф «Шерлок Холмс»

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

После того, как у вас появилась адекватная гипотеза о том, что именно произошло и как это исправить, вы можете проверить её, сделав правку в исходном коде программы и запустив её снова в режиме в отладки. Если всё отработало так как вы это себе представляли, то ваша гипотеза верна, и вам больше ничего не нужно делать. Но как это часто бывает, гипотеза оказывается не верна, поэтому приходится повторять этот процесс до тех пор, пока верная гипотеза не будет найдена.

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

Создание GUI в QtDesigner

Теперь настала пора заняться разработкой графического интерфейса для вашего приложения. Для этого QtCreator предоставляет собственный дизайнер интерфейсов QtDesigner, который позволяет скомпановать графические элементы вашего приложения не прибегая к работе с исходным кодом. Найдите кнопку Дизайн на левой верхней панели QtCreator

Кнопка переключения в режим дизайна

Кликнете по ней, если она активна. Если же нет, то вам придётся найти файл mainwindow.ui в структуре вашего проекта и кликнуть по нему два раза.Файл интерфейса приложения

Перед вами должен открыться дизайнер интерфейсов QtDesigner

QtDesigner

Здесь вы увидете 6 основных панелей:

QtDesigner. Основные панели

  1. Центральная панель — макет интерфейса, на котором будет отображаться ваш интерфейс, куда вы можете добавлять графические элементы. Обратите внимание на маленькие синие квадратики по периметру вашего макета — с их помощью вы можете менять размеры макета вашего окна, это также относится и к любым другим графическим элементам.
  2. Левая панель — выбор графического элемента. Элементы добавляются по принципу drag-and-drop на макет интерфейса на центральной панели.
  3. Правая верхняя панель — иерархия вложенности графических элементов на вашем макете. Эта панель также взаимодействует с центральной панелью, так что вы можете перемещать элементы макета по тому же принципу drag-and-drop в произвольное место в иерархии графических элементов. Иногда это очень удобно, потому как некоторые элементы могут перекрывать друг друга. Здесь вы также можете выделять элементы макета для правки их свойств.
  4. Правая нижняя панель — свойства графического элемента. Для выделенного графического элемента вы можете изменить его свойства, например задав имя объекта, подпись, максимальный размер и т.д. Тоже самое можно сделать для некоторых основных свойств с помощью пунктов выпадающего меню по нажатии ПКМ (Правой Кнопки Мыши) на выделенном элементе на центральной панели.
  5. Нижняя панель — эта панель позволяет создавать и настраивать сигналы и слоты. Этой темы мы коснёмся в следующем разделе.
  6. Верхняя панель — совсем небольшая, на ней всего несколько кнопок:QtDesigner. Верхняя панельПредлагаю ознакомиться с ней самостоятельно  от неё нам потребуется только одна кнопка (крайняя справа), которая производит автоматическую настройку размеров элементов это очень удобное свойство, которым вы будете активно пользоваться.

Ну что ж, давайте с вами набросаем простенький интерфейс… Постойте ка мы же ведь даже не определились с тем, что за приложением мы будем разрабатывать… Предлагаю, так как наш сайт посвящен программированию, создать приложение, которое снискало популярность на заре компьютерной эры в нашей стране, а именно приложение «Программист». Точнее не его, а его аналог, что-нибудь вроде реплики с учётом современных реалий.

Концепт

Everything starts with your vision

Unknown author

Итак, давайте определимся с тем, что мы хотим получить от нашей программы, отталкиваясь от основной идеи — симулятора жизни программиста. В первую очередь это будет игра, от которой будет можно получить удовольствие, встречая в ней знакомые ситуации из жизни современного программиста. Итак, что нам известно, так это то, что у нас есть программист, и мы хотим управлять его действиями, создавая определенные игровые ситуации. Основной фактор с которым сталкивается любой программист в своей деятельности это время. Поэтому наша игра должна создавать иллюзию быстрого течения времени, за которое нужно успеть что-то сделать. Что ж, в целом у нас вырисовывается первый экран приложения

Главная

Макет приложения. Страница "Главная"

Давайте проведём декомпозицию этого макета… Здесь у нас есть множество различных элементов с надписями, а также статическое изображение, которые можно создать с помощью класса QLabel.

Затем у нас есть прогресс бар, реализуемый с помощью класса QProgressBar, который также входит в список стандартных виджетов Qt. И ещё у нас есть список навыков, который мы можем отобразить, использовав класс QListWidget. Не забудем также что, нам нужно упорядочить все эти элементы, чтобы они располагались строго на своих местах — для этого используются элементы QHBoxLayout и QVBoxLayout, они располагают элементы друг за другом по горизонтали и вертикали. Кажется это всё! Этих пяти элементов достаточно, чтобы реализовать макет данной страницы на практике.

Да, конечно мы кое что упустили… Это страницы Learning, Работа и Отдых. Чтобы их реализовать, нам нужно воспользоваться классом QTabWidget. Каждая из страниц будет отвечать за определённую область жизни программиста в соответствии с её названием. Давайте рассмотрим каждую из страниц в отдельности

Learning

В моей жизни как правило возникает три основных варианта, в которых я получаю новое знание. Они изображены на макете

Макет приложения. Страница "Learning"

Здесь всего три кнопки QPushButton, которые упорядочены с помощью элемента QVBoxLayout.

Работа

Макет приложения. Страница "Работа" (слайд 1)

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

Макет приложения. Страница "Работа" (слайд 2)

Всё это реальные проекты из жизни и кому-то уже повезло в них поучаствовать, в вашей жизни может произойти нечто подобное, если вы действительно увлекаетесь программированием!

Отдых

Макет приложения. Страница "Отдых"

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

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

Итак это всё, что нам потребуется знать о приложении на текущий момент, для того, чтобы создать его GUI. Здесь я оставляю вам простор для экспериментирования, укажу лишь конечную цель, потому как для понимания следующих шагов разработки приложения вам потребуется иметь набор тех же самых виджетов, упорядоченных в иерархию подобно этой

Иерархия классов макета приложения

Прежде чем приступать к следующему шагу, убедитесь, что вы получили что-то похожее, воспользовавшись средствами QtDesigner.

Модель приложения

Обычно при создании типичного приложения на Qt используется паттерн проектирования MVC

Шаблон проектирования или паттерн (англ. design pattern) в разработке программного обеспечение — повторяемая архитектурная конструкция, представляющая собой решение проблемы проектирования в рамках некоторого часто возникающего контекста.

Model-View-Controller (MVC, «Модель-Представление-Контроллер») — схема разделения данных приложения, пользовательского интерфейса и управляющей логики на три отдельных компонента: модель, представление и контроллер — таким образом, что модификация каждого компонента может осуществляться независимо.

  • Модель (Model) предоставляет данные и реагирует на команды контроллера, изменяя своё состояние.
  • Представление (View) отвечает за отображение данных модели пользователю, реагируя на изменения модели.
  • Контроллер (Controller) интерпретирует действия пользователя, оповещая модель о необходимости изменений.

справка из Википедии

Мы не будем отходить от данного правила, поэтому нам потребуется создание собственной модели приложения. Пусть это будет класс, который будет содержать основной объект игры, который будет иметь, собственно: главный игровой цикл, модель игрока в виде списка параметров, а также все игровые объекты, так или иначе влияющие на эти параметры, при их взаимодействии с игроком. Обычно конкретные данные о игровых объектах хранят с помощью базы данных, но мы не будем этого делать а ограничимся лишь только текстовым файлом, т.к. у нас не слишком большое приложение.

Идея готова, теперь нам нужно перейти в редактор для того, чтобы заняться её реализацией. Кликаем на кнопку редактора на левой панели

Кнопка переключения в режим редактора

Создание нового файла

Создадим файл для нашей модели, кликнув ПКМ на названии проекта на левой панели сверху и выбрав пункт Добавить новый…

Добавление нового класса (в проект)

Перед вами появиться окно, в котором нужно выбрать пункт Класс С++

Добавление нового класса. Выбор шаблона класса

Теперь осталось указать имя класса

Добавление нового класса. Определение класса

Вы можете также сразу отметить галочки Подключить QObject и Добавить Q_OBJECT — это позволит вам использовать сигналы и слоты для взаимодействия вашей модели с UI-частью. Это можно также реализовать самостоятельно в коде, унаследовав класс от объекта QObject и добавив макрос Q_OBJECT сразу за названием в объявлении класса. В любом вам необходимо сделать одно из этих действий.

В следующем окне Qt предложит добавить ваш файл под контроль версий:Добавление нового класса. Контроль версий

Если вы пользуетесь Git, то смело добавляйте.

На этом процесс создания файла для нового класса завершён, теперь можно приступать к его реализации.

Думаю не стоит подробно останавливаться на каждой строчке кода игровой модели, приведу его весь сразу

gamemodel.h

gamemodel.cpp

Код вполне очевидный, ознакомьтесь с ним самостоятельно. Отмечу лишь только, что здесь я активно использую возможности Qt в виде готовых классов:

  • QString — основной класс для работы со строками
  • QMap — класс для работы со структурой данных map, представляющая собой набор key-value пар — здесь я использую QString в качестве ключей для доступа к uint значениям, это очень удобно для хранения списка значений в случае наличия уникальных ключей, таких как названия конкретных навыков
  • QFile — класс для работы с файлами, осуществления операций чтения/записи (я использую его, чтобы загружать игровые данные из текстового файла)
  • QTextStream — для работы с потоком текстовых данных — я использую его в комбинации с QFile, чтобы последовательно считывать файл строка за строкой
  • QList — класс реализующий структуру списка для хранения произвольных объектов (в данном случае игровых объектов)
  • QThread — класс для работы с потоками — здесь я использую данный класс для того, чтобы реализовать временную задержку в игровом цикле, а практике его используют для того, чтобы обеспечить многопоточное исполнение кода на множестве процессорных ядер (с многопоточностью мы все равно столкнёмся, как мы бы этого не хотели, потому что наша игровая модель не может исполняться в одном потоке с UI, т.к. это привело бы его зависанию — игровой цикл должен работать в отдельном потоке и об этом будет сказано далее)

 

Вся остальная часть кода должна выглядеть вполне привычно для тех, кто уже занимался разработкой на C/C++ (здесь я использую две дополнительные структуры для модели игрока и для модели явления, которое влияет на состояние игрока). Но вы также можете заметить новое слово, которое не встречалось вами ранее в декларации класса — а именно слово signals, что же это такое?

Сигналы, на ряду со слотами представляют собой абстракцию, позволяющую осуществлять взаимодействие между объектами в приложении Qt. Любой объект унаследованный от класса QObject, имеет возможность передавать сигналы другим объектам, также унаследованным от класса QObject, а также принимать сигналы от других объектов с помощью слотов, которые по сути являются обычными методами, в которых можно производить обработку данных полученных от сигналов.

Я не буду вдаваться здесь в технические детали реализации подобного механизма, об этом вы можете прочитать в книге Макса Шлее «Qt 5.10 Программирование для профессионалов». Для нас важно, что с помощью данного механизма мы можем осуществлять взаимодействие различных объектов прямо из кода их классов, и это очень круто! Потому как нам не нужно будет писать общий код, который будет явно передавать данные от одного класса к другому и тому подобные вещи. Всё что нам будет нужно, так это создать сигналы в одних классах и соотвествующие им слоты в других, и соединить их с помощью специальной функции connect, подобно тому как это сделано в примере ниже…

Пример использования сигналов и слотов

Допустим у нас есть класс A унаследованный от QObject (при обязательном указании макроса Q_OBJECT) и содержащий объявление сигнала

Тогда мы можем вызвать этот сигнал в любом методе данного класса с помощью специального слова emit как будто мы вызываем обычную функцию:

На принимающей стороне, а это может быть как тот же самый класс A, так и класс B, так же унаследованный от QObject и содержащий соответствующий слот для приёма данного сигнала, например

Для обеспечения соединения между сигналами используется функция connect, которая как правило вызывается из конструктора класса таким образом

Здесь &a это адрес объекта класса A, содержащий объявление сигнала ring(). Таким образом мы говорим, что когда в объекте a класса A происходит событие ring(), то в данном объекте класса B произойдёт событие answer().

В данном примере между событиями не происходит передача каких-либо данных, но это также можно осуществить с помощью указания конкретных переменных, единственное, что интерфейсы сигналов и слотов должны полностью соответствовать друг другу. Например, если мы передаем int, то вызов функции connect будет выглядеть следующим образом

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

Пока нам этого будет достаточно, чтобы воспользоваться сигналами и слотами для связывания  модели приложения его UI.

UI-логика

Под UI-логикой, или как её ещё называют интерфейсной логикой, как правило подразумевают логическую связь между компонентами элементов интерфейса и их взаимодействие с моделью приложения. Для того, чтобы обвязать наш интерфейс и модель логикой, нам нужно вернуться к классу MainWindow и добавить в него объект нашей игровой модели GameModel, а затем прописать каким образом будет меняться модель в зависимости от действий пользователя, а также каким образом интерфейс будет реагировать на эти изменения. Вообще модель MVC устроена таким образом, что действия пользователя посредством контроллера C влияют на изменение модели M, а та в свою очередь производит изменения в представлении V. При этом конечно возможен вариант, когда контроллер C передаёт эти изменения непосредственно в представление V.

Итак, код нашего GUI будет выглядеть следующим образом:

mainwindow.h

mainwindow.cpp

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

Создание слота средствами QtDesigner

Для создания слота, обработки события конкретного элемента пользовательского интерфеса (кнопки, чекбокса, и т.п.) зайдите в QtDesigner и выберете этот элемент, кликнув по нему ПКМ

Создание слота для элемента UI

Откройте его и выберете пункт Перейти к слоту… Перед вами появиться выбор вариантов типа события, которое вы хотите обработать

Создание слота для элемента UI. Выбор типа события

Выберете событие и нажмите кнопку OK. Это автоматически перенесёт вас в редактор к тому месту, где только что вы добавили слот. Посмотрите внимательно — был добавлен только интерфейс данного слота, тогда как прописать его тело вы должны своими руками.

Ресурсы Qt

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

  • это могут быть медиафайлы (картинки, анимация, аудио и т.д.),
  • так же это могут быть текстовые файлы,
  • либо файлы баз данных и т.п.

Для того, чтобы создать определённый ресурс для вашего приложения и использовать его в своей программе, вам потребуется выполнить следующий алгоритм:

Алгоритм создания ресурса для приложения Qt

I. Создайте файл ресурсов (делается только один раз)

Перейдите в редактор и кликнете ПКМ на названии вашего проекта на левой верхней панели.Создание ресурса. Переход в редактор

Затем выберете пункт Добавить новый файл…

Создание ресурса. Добавление нового файла

Выберете пункт Qt -> Файл ресурсов Qt

Создание ресурса. Создание файла ресурсов

Выберете размещение файла ресурсов

Создание ресурса. Выбор размещения файла ресурсов

Добавьте этот файл под контроль версий (если нужно)

Создание ресурса. Контроль версий файла ресурсов

II. Создайте папку с ресурсами в каталоге вашего приложения и скопируйте в него все необходимые для вашего приложения ресурсные файлы.

III. Зарегистрируйте ваши ресурсные файлы в файле ресурсов при помощи редактора ресурсов.

Приведу пример как это должно бытьСоздание ресусра. Регистрация ресурса в файле ресурсов

При создании файла ресурсов здесь будет доступна только одна кнопка Добавить префикс… Отредактируйте префикс как вам удобно в окне ввода ниже (очень удобно когда префикс состоит только из одного символа слэша, потому что затем к нему прибавляется путь к каталогу расположения вашего ресурса, а он может быть очень длинным). Затем кликнете на эту кнопку и ещё на кнопку Добавить файлы… После этого добавьте каталог с вашими ресурсами. Это автоматически зарегистрирует все доступные в данном каталоге ресурсы для вашей программы.

IV. Теперь осталось использовать ваш файл внутри вашей программы. На примере выше, вы можете увидеть полный путь к ресурсу, что-нибудь вроде:

/res/images/rest/Крым.jpeg

Няш-мяш - Крым наш!Теперь вы можете использовать это изображение в вашем коде например так:

Это позволит вам загрузить вашу картинку, без указания её расположения в файловой системе. Файл ресурсов это очень удобная вещь, потому как он позволяет организовать и в более удобной форме использовать данные вашего приложения, сэкономив ваше время.

Итак это всё на сегодня. Внимательно читайте исходный код и используйте справку Qt для лучшего понимания. И ещё, я выложил исходный код на GitHub для тех, кому не терпиться сразу испытать наше приложение боем! Так что дерзайте! Всё в ваших руках!

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.