Эта страница является переводом страницы IRidium studio 2019 Navigation. Перевод выполнен на 100%.

---

iRidium studio 2019

Switching between pages and popups

Navigation in interface: flipping pages and popups

How to flip pages and popups in i3 pro interface; details and limits od pages and popups. Examples of interface navigation

Pages and popups: purposes and peculiarities

Page is the basis of an interface. When a new interface is created, you get one page to place graphic items on it. Later on you can add other pages and popups to the interface. Peculiarities of working with a page:

• Page size is equal to the resolution you selected when you created the project.
• A page, figurativelly speaking, covers the "empty space" that contains no interface and does not proccess a user's presses, that's why:
• Pages can't appear with animation effects, can't be transparent or semi-transparent
• A page can't be closed, it can only be changed to another one
• At each moment of time only one page can be seen
• When a page is changed all opened popups are closed
• If "Previous page" command is selected, a page is opened with popups that were open on it before a page was changed
• Vertical and horizontal pages can be created and set as "alternative". In this case the pages will substitute one another when a tablet or a smartphone is turned. Opening popups when the screen is turned can be with the help of script. That's why "turning" interfaces are usually based only on pages with a miminal number of popups that do not depend on the current position of the screen (they are always opened in the same place - top left corner of the screen)

Окно-попап (попап) - это окно с графическими элементами, которое можно открыть в любом месте страницы. Большинство проектов строится на единственной странице и множестве окон, т.к. окна обладают управляемым положением и прозрачностью, анимацией, можно открыть множество окон одновременно. Из минусов: невозможность работы с функцией авто-поворота страниц, т.к. окна не имеют вариантов внешнего вида для разной ориентации экрана

• попап не может быть горизонтальным или вертикальным
• попап автоматически закроется при авто-повороте страницы, при открытии другой страницы
• попап может быть любого размера, прозрачности, его можно открыть в любом месте страницы
• к попапу можно применить анимацию появления и закрытия
• на одной странице можно открыть множество попапов
• попапы "непрозрачны" для нажатия. Нельзя создать попап, сквозь который будут проникать нажатия пользователя на элементы страницы или попапа, расположенного слоем ниже
• попапы можно объединять во "взаимоисключающие" Группы попапов: при открытии попапа из группы, происходит автоматическое закрытие попапа, который сейчас открыт и входит в эту же группу
• По команде "Hide Group (name)" закроется любой открытый попап из Группы попапов

Создать страницу. Создать окно-попап

Инструменты создания страниц и попапов находятся в левом верхнем углу панели PROJECT:

• Создать страницу. Настройки:
  • Name - имя страницы
  • Orientation - положение на телефоне/планшете: горизонтальное или вертикальное (для ПК выбирайте горизонтальное)
• Создать окно-попап. Настройки:
  • Name - имя попапа
  • Left, Top - положение на странице: отступ от верхнего-левого края страницы по Х (Left) и Y (Top)
  • Width, Heigth - ширина и высота попапа
  • Draw - нарисовать папап курсором на странице (визуально определить размер и положение)

Переход между страницами и попапами

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

Управление страницами и попапами производится с помощью "команд навигации" (Actions), которые нужно добавить на событие Press или Release в панели PROGRAMMING свойств графического элемента:

Команды перехода по интерфейсу:

• Show page [имя страницы] - показать страницу (взамен текущей). Все попапы закроются
• Show previous page - показать предыдущую страницу. Если на ней были открыты попапы - они вернутся вместе со страницей
• Show popup [имя попапа] - показать попап. Можно указать координаты Top и Left, где появится попап, или оставить их пустыми, тогда попап появится по исходным координатам
• Hide popup [имя попапа] - cкрыть попап
• Toggle popup [имя попапа] - переключить попап (показать, если скрыт, скрыть, если показан). В параметрах команды указывается имя попапа, который нужно переключить. Можно указать координаты Top и Left, где появится попап, или оставить их пустыми, тогда попап появится по исходным координатам
• Hide group [имя группы] - если открыт попап, входящий в Группу, то скрыть его
• Hide popups on page [имя страницы] - скрыть все попапы на указанной странице
• Hide all popups - cкрыть все попапы, открытые в проекте. Если после этой команды использовать Show previous page, то попапы на "возвращенной" странице не восстановятся! Учитывайте это при организации интерфейса

Организация интерфейса

Варианты организации интерфейса:

1. Одна страница и окна-попапы
   Наиболее распространенный подход к разработке. Страница используется как "подложка", на которой размещены фоновое изображение и объекты, которые видны почти все время (называние проекта, статус подключения к оборудованию, дата и время и т.д.). Все управляющие объекты размещаются в окнах, котрые сменяют друг друга по мере необходимости. Навигация за счет попапов делает поведение интерфейса предсказуемым, позволяет использовать прозрачность и анимацию появления/скрытия
2. Несколько страниц и окна-попапы
   Отличие от предыдущего варианта только в том, что вы можете использовать дополнительную страницу как скринсейвер или меню, с которого можно вернуться, автоматически возвратив все ранее открытые попапы. Для этого используйте команду Previous page
3. Только страницы
   Интерфейс без попапов позволяет использовать преимущества авто-поворота страниц - когда интерфейс автоматически переключается между вертикальным и горизонтальным видом при повороте устройства с i3 pro, но, на практике, используется крайне редко, т.к. вынуждает дублировать элементы, которые повторяются на многих страницах, а значит стоимость правок сильно растет

На примере бесплатного интерфейса "iOS стиль: Умный дом" (iridi.com > Поддержка > Загрузки > Интерфейсы > iOS стиль: Умный дом), структура может выглядеть так:

1. Единственная страница интерфейса. Поверх нее открываются попапы
2. Окна-попапы, образующие меню навигации по проекту. На них расположены кнопки, выполняющие команды открытия и закрытия попапов
3. Попапы, на которых хранятся элементы управления оборудованием (активности). Они разбиты в папки по комнатам