mafulechkaJune 18, 2020, 5:50 a.m.

Представляем Flow Mode в Qt Design Studio 1.5 - Часть 1

Content

В версии 1.5 Qt Design Studio вы можете попробовать функционал flow mode . В первой части статьи, состоящего из нескольких частей, будет рассказано о базовом использовании flow mode и о том, как начать работу. В конце статьи рассмотрим запланированные расширенные функции, которые появятся в следующей версии Qt Design Studio.

Что такое Flow Mode?

Поток (flow) может быть описан, как схематичное представление экранов в вашем приложении, чем-то похожее на узел графа, используемый для визуального программирования, хотя специально реализованное для задачи создания потоков пользовательского интерфейса. Сама блок-схема показывает каждый экран и его связь с другими экранами, а также возможные пути пользователя через приложение. Традиционно дизайнеры создавали эти платы, как макет для представления концепций потока приложения. С появлением таких инструментов, как Sketch, появилась возможность запуска созданных дизайнером блок-схем в виде интерактивного прототипа, по которому можно переходить, чтобы имитировать пользовательский опыт приложения. Тем не менее, фактическая логика для этого потока все равно должна быть заново реализована разработчиками.

Потоки в Design Studio предоставляют собой более полное решение проблемы. Они позволяют дизайнеру быстро создавать прототипы полного приложения путем моделирования потока в привычном стиле визуального программирования, основанного на nodegraph-esque. Код QML создается в фоновом режиме, что позволяет разработчику расширить функциональность своего потока за пределы, присущие более традиционным инструментам проектирования. Конечными результатами являются как прототип с высокой точностью, так и разработчики функционального кода, которые можно использовать в качестве основы для рабочей версии приложения.

Создание потока в Qt Design Studio. Основы.

Настройка вашего первого потока (Flow)

Вы можете создать поток либо в существующем проекте, либо в новом проекте. Чтобы начать использовать режим потока, вам нужно быть в проекте, а затем добавить следующие элементы через меню «Файл»/«Новый файл» (file menu/New File) или «Мастер проектов» (Project Wizard).

Создать Flow View

Первый файл, который вам нужен, это новый тип QML с именем Flow View. Это холст, с которым вы будете соединять все экраны вашего интерфейса. Этот файл можно добавить с помощью мастеров (wizards) после создания проекта, а затем перейти к добавлению нового файла, новые QML Types, используемые в потоках, можно найти в разделе Qt Quick Files.

Создать Flow Items (элементы потока)

Далее вам нужен новый тип экрана, который может использоваться flow mode - Flow Item. Вы также можете создать их с помощью мастеров (wizards). Эти файлы представляют собой тип файла UI.QML, который можно вставить в файл Flow View.

Создание содержимого экрана (Screen content)

Добавление содержимого к Flow Items работает так же, как и при проектировании любого обычного экрана в Qt Design Studio, поскольку эти файлы Flow Item являются просто типом файла UI. Файл QML, значит вы можете использовать их точно так же, как и обычный файл интерфейса пользователя. Они могут содержать подкомпоненты, быстрые элементы управления, анимацию и все остальное, что вы можете добавить в обычный файл пользовательского интерфейса (UI file). Единственное реальное отличие состоит в том, что эти файлы можно увидеть в Flow View, поэтому при просмотре библиотеки QML эти специальные компоненты являются единственными элементами, видимыми на панели «Мои компоненты QML» (My QML Components).

Добавление ваших файлов в flow view (представление потока)

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

Добавление action areas (областей действия)

Action areas (области действия) могут работать несколькими способами. Во-первых, это действовать как простая интерактивная область, которая инициирует переход - это самый простой способ использования flow editor (редактора потоков) для создания прототипов. Другое использование областей действия - это то, что вы можете подключить любой сигнал от любого компонента на вашем экране потока или от любого его подкомпонента, например, кнопку на вашем экране, которая имеет сигнал onPressed. В этой первой части блога будет рассмотрен простой вариант использования, а затем во второй части уже более сложный вариант использования.

Подключение экранов (Connecting Screens)

Если у вас есть Action Area (область действия), вы можете использовать ее для подключения к другому экрану, либо дважды щелкнув Action Area и затем перетащив линию подключения на другой экран и отпустив ее, либо с помощью контекстного меню для Flow View, где все соответствующие элементы управления могут быть найдены. После того, как вы соединили экраны вместе, у вас есть первый поток, теперь вы можете запустить Live Preview и нажать на кнопку, покрывающую Action Area, которая не будет видна в Live Preview, чтобы увидеть полезный предварительный просмотр первого перехода.

Добавление эффектов (Adding Effects)

Как только у вас есть переход, вы можете добавить к нему эффект. Вы делаете это, выбирая переход напрямую, возвращаясь в контекстное меню и выбирая эффект для этого перехода (transition). После применения эффекта вы можете редактировать его через панель свойств, для многих эффектов существует направление перехода, которое определяет направление, с которого будет отображаться новый экран. Вы можете установить продолжительность эффекта и запустить конструктор кривой, чтобы применить собственную кривую замедления к этому эффекту.

Редактирование Эффектов (Editing Effects)

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

Возвращение (Go Back)

Одной из особенностей функционала flow mode в Qt Design Studio является добавление кнопки «Назад» (back button). Во многих случаях в потоке будет много-много взаимосвязей с вашими экранами, традиционно вам придется создавать явные линии связи «к» и «с» каждого потенциально подключенного экрана, что приводит к запутанной и грязной диаграмме. С Qt Design Studio вы можете просто установить действие как «Возвращение» (“Go Back”), и оно всегда вернет вас к предыдущему экрану.

Предварительный просмотр в Live Preview

Как и на всех экранах в Qt Design Studio, вы можете просматривать свои изменения в реальном времени с помощью Live Preview, просто запустите предварительный просмотр и продолжайте работу над потоком, ваши изменения будут обновляться в реальном времени, и вы можете протестировать их непосредственно в окне Live Preview.

Внешний вид (Appearance)

Свойства Flow View позволяют настроить внешний вид всех элементов в потоке, линий подключения, Action Areas (область действия) и дополнительных узлов, таких как «Решения» (Decisions) и «Подстановочные знаки» (Wildcards). Вы можете изменить общие настройки для всех элементов или выбрать отдельную линию, узел или action area и изменить внешний вид только этого элемента (включая цвет, толщину линии, пунктирные или сплошные линии и даже кривую соединений), позволяя вам добавить дополнительную семантику к дизайну самой блок-схемы.

Решения (Decisions)

Частью любого сложного пользовательского интерфейса является условная логика, которую он использует для представления своего состояния пользователям или для сбора и обработки различных источников данных, взаимодействия с пользователем с различных входов, таких как физические кнопки и элементы управления, показания датчиков из массивов оборудования или общие значения из поддерживаемых/сервисных API. С помощью Decision Nodes (узлов принятия решений) вы можете смоделировать любое из этих условий, предоставив пользователю список опций, позволяющий создавать прототипы сложных взаимодействий до того, как у вас будут какие-либо производственные необходимые физические элементы управления, данные бэкенда или сенсора. В будущем вы сможете связать эти решения с фактическими поддерживаемыми значениями или списками событий, перенеся ваши усилия по созданию прототипов в ранние состояния реального производственного кода.

Подходя к части 2

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

Wildcards

Разработчики заметили, что другой распространенной функциональностью реальных пользовательских интерфейсов, которая не была хорошо обработана в традиционных инструментах проектирования потоков, были экраны, которые могут появляться из любого места или в любое время на основе условного события. Возьмите, например, push-уведомления на смартфонах или на экранах входящих вызовов в HMI вашего автомобиля. С помощью Wildcards вы можете моделировать экраны этого типа в своем потоке, используя реальные или смоделированные сигналы и условия, что позволяет вывести ваши концепции потока за пределы этого традиционного барьера. Другой вариант использования, который разработчики планировали, заключался во включении белого и черного списков для этих подстановочных событий. Чтобы продолжить с одного из наших примеров здесь, с входящим вызовом HMI нашего автомобиля, скажем, у нас есть экран предупреждения для двигателя где-то в нашем потоке, который также использует подстановочный знак и может появиться на любом экране в любое время, если он получил сигнал. Теперь добавим этот экран предупреждения двигателя в черный список экрана входящих вызовов. Это означает, что теперь наш экран входящего вызова может появляться на любом экране, кроме экрана предупреждения двигателя.

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

Подключение сигналов от компонентов

Простые интерактивные области отлично подходят для создания прототипов, но что делать, когда хочется использовать реальные сигналы с экранов пользовательского интерфейса для управления потоком приложения? В следующей части этого блога будет рассмотрено, как использовать области действия (action areas) потока для прослушивания сигналов от компонентов экранов потоков и подключения их к дизайну потоков.

Интегрирующие состояния (Integrating States)

Еще одно соображение, которое разработчики должны были спроектировать - это существование состояний в Qt Design Studio, существующей и мощной части рабочего процесса, которая позволяет вам создавать состояния экранов вашего пользовательского интерфейса и отслеживать изменения между ними. С этими потоками вы можете не только переходить из любого состояния экрана в любое состояние другого экрана, но также использовать поток для перехода между состояниями одного экрана, смешивая мощь существующих функций QML с новым режимом потока.

We recommend hosting TIMEWEB
We recommend hosting TIMEWEB
Stable hosting, on which the social network EVILEG is located. For projects on Django we recommend VDS hosting.
Support the author Donate

Comments

Only authorized users can post comments.
Please, Log in or Sign up
How to become an author?

Contribute to the evolution of the EVILEG community.

Learn how to become a site author.

Learn it
Donate

Good day, Dear Users!!!

I am Evgenii Legotckoi, developer of EVILEG. And it is my hobby project, which helps to learn programming another programmers and developers

If the site helped you, and you want also support the development of the site, than you can donate by following ways

PayPalYandex.Money
Timeweb

Let me recommend you the excellent hosting on which EVILEG is located.

For many years, Timeweb has been proving his stability.

For projects on Django I recommend VDS hosting

View Hosting
R

C++ - Test 002. Constants

  • Result:75points,
  • Rating points2
R

C++ - Test 001. The first program and data types

  • Result:73points,
  • Rating points1
MS

C++ - Test 005. Structures and Classes

  • Result:75points,
  • Rating points2
Last comments
R

Qt WinAPI - Lesson 001. How to collect all DLL, which used in Qt project?

Вы меня не совсем правильно поняли, но все равно спасибо, принял все к сведению. Все сделал как вы сказали, все отлично работает, еще раз огромнейшее спасибо) Разве что только что были опять про…

Qt WinAPI - Lesson 001. How to collect all DLL, which used in Qt project?

Стоило перед использованием что ли инструкцию прочитать https://www.cyberforum.ru/blogs/131347/blog2457.html "После сборки при запуске требовались dll," Ясное дело стоило задепло…
R
R

Qt WinAPI - Lesson 001. How to collect all DLL, which used in Qt project?

Да, собралось. После сборки при запуске требовались dll, перекинул всю папки bin, plugins(не знаю как можно было сделать более умно). Как я понял в первой строке путь к екзешнику вставляю, втор…

Android. Java vs Qt QML - Tutorial 000. Enable Material Design

Это актуально для изменения цвета. В файле qtquickcontrols2.conf переменная Primary должна влиять на цвет приложения соответственно и цвет ApplicationBar должен поменяться. Но у status bar вроде…
Now discuss on the forum
A

Как в Qt в qmenu добавить scrollarea

Добрый день. Мое имя Кристина. Познакомлюсь с другом для встречи. Приеду к тебе в гости или встримся у меня. Живу близко. Мой адрес

Qt C++ и Python

Красиво/некрасиво - это скорее моё личное отношение. Если есть возможность ограничить количество интсрументов, то лучше ограничить. Но не зацикливайтесь на этом. Если у вас есть скрипты Py…

Qt + OpenGL glDeleteVertexArrays

Я не уверен, поскольку с OpenGL очень мало работал. Но может быть OpenGL контекст виджета нужно переинициализовывать. И ещё виджет стоит удалять через метод deleteLater() а не п…

QWebEngineView не запускается если к ПК подключено несколько мониторов

Ну я имел ввиду посмотреть на другом ПК с другой графикой и парой мониторов. Как моей программе назначить использовать определенный граф. адаптер? Вот тут понятия не имею.

Счечик производительности сети

Хорошо. После работы сегодня гляну ваш код внимательно.
About
Services
© EVILEG 2015-2020
Recommend hosting TIMEWEB