Первый интерфейс

Вы соберёте в UI-Designer (редактор интерфейсов) небольшую часть проекта «Демо-зал» и посмотрите результат на панели. По пути вы пройдёте все основные приёмы: создадите интерфейс и страницу, нарисуете фон и подпись, сделаете область, в которой меняется содержимое (фрейм и оверлеи), добавите кнопки-вкладки, сохраните и опубликуете. Тот же порядок подходит для любого интерфейса.

Что получится: экран 1920 × 1200 с заголовком «Демо-зал», двумя кнопками внизу — «Главная» и «Звук» — и областью над ними. Нажатие на кнопку показывает в области свою вкладку.

Прежде чем начать:

• откройте UI-Designer (см. UI-Designer);

• чтобы интерфейс появился на панели, в программе U-Logic (редактор программы управления) должен быть развёрнут узел UI - Panel in (блок программы); как это проверить и сделать — в разделе «Подготовьте U-Logic» ниже;

• если вы уже загрузили готовый «Демо-зал», назовите свой интерфейс иначе, например «Демо-зал 2»: тогда в селекторе UI-Panel (страница, на которой оператор работает с интерфейсом) вы их не перепутаете.

Как называть элементы

Все соглашения об именах, блоках программы и копиях проекта собраны на странице «Соглашения».

Прежде чем что-то рисовать, определите, как вы будете называть элементы. Имя элемента — его ID: по нему программа в U-Logic находит элемент. Поэтому в «Демо-зале» принято одно правило:

Группа_Объект_тип — латиницей, без пробелов, слова с заглавной буквы, части через _.

Например, Nav_Home_b: Nav — группа (навигация, вкладки), Home — объект («Главная»), b — тип (кнопка).

Тип — суффикс в конце имени:

Суффикс	Элемент
b	кнопка
lb	лейбл (подпись)
fr	фрейм
bg	фон
sl	слайдер
ls	список
tm	время

Зачем это нужно. По общему префиксу группы в U-Logic можно обработать целую группу одним правилом (например, все кнопки Src_*). По суффиксу в U-Logic сразу видно, кнопка это или ползунок. Регистр важен: Nav_Home_b и nav_home_b для программы — разные элементы. Названия интерфейса, страниц и оверлеев можно писать по-русски: узлы выбирают их по названию, поэтому в готовой программе их не переименовывайте.

Создайте интерфейс

Интерфейс задаёт размер экрана, для которого вы рисуете.

1. На левой панели нажмите первую кнопку — «Создать Интерфейс». Откроется окно «Создать Интерфейс».

2. В поле «Название интерфейса» введите Демо-зал.

3. В «Соотношение сторон:» выберите «Пользовательское соотношение сторон».

4. В полях «Ширина:» и «Высота:» введите 1920 и 1200.

5. Нажмите «OK».

Окно «Создать Интерфейс»: 1 — «Название интерфейса», 2 — «Пользовательское соотношение сторон», 3 — «Ширина:» и «Высота:», 4 — «OK»

Что вы увидите: в дереве слева появится интерфейс «Демо-зал» со страницей «Home Page», над холстом — «Страница : Home Page».

Если кнопка «OK» серая, значит, поле названия пустое — без названия интерфейс не создаётся. Размер 1920 × 1200 — это пропорции 16:10. Готовый вариант 16:10 в списке даёт 1600 × 1000, поэтому для «Демо-зала» размер вводится вручную. Все свойства интерфейса можно изменить позже, выделив его в дереве.

Назовите страницу

Страница — это основной экран интерфейса. В «Демо-зале» корневую страницу называют «Основа»: на ней фон, шапка и кнопки вкладок, а содержимое вкладок живёт в оверлеях.

1. В дереве дважды щёлкните по имени страницы «Home Page».

2. Введите Основа и нажмите Enter.

Что вы увидите: в дереве и над холстом — «Страница : Основа».

Нарисуйте фон

Фон — отдельный элемент страницы: без него экран будет пустым.

1. Над холстом нажмите «Создать Виджет» и выберите «Создать Фон».

2. Протяните рамку по холсту: зажмите кнопку мыши в левом верхнем углу холста и тяните к правому нижнему.

3. В правой панели раскройте «Основные свойства» и в поле «Имя» введите Root_bg.

4. Раскройте «Свойства фона и изображения» и включите флажок «Во весь экран».

5. В поле «Цвет фона» задайте светлый цвет, например #F5F8FC.

Свойства фона: 1 — «Имя» в «Основные свойства», 2 — «Во весь экран», 3 — «Цвет фона»

Что вы увидите: холст залит светлым цветом; в дереве в группе «Фон» появился элемент Root_bg.

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

Добавьте заголовок

1. Над холстом нажмите «Создать Виджет» и выберите «Создать Лейбл».

2. Протяните рамку в верхнем левом углу холста.

3. В «Основные свойства» задайте «Имя» Hdr_Title_lb, X 32, Y 18, «Ширина» 520, «Высота» 60.

4. В «Свойства текста» в поле «Текст» введите Демо-зал.

5. Там же задайте «Размер» побольше, например 44.

Заголовок: 1 — лейбл на холсте, 2 — «Имя», 3 — «Текст», 4 — «Размер»

Что вы увидите: вверху слева на холсте — надпись «Демо-зал» (текст по умолчанию выровнен по центру лейбла), в дереве в группе «Передний план» — Hdr_Title_lb.

Сделайте оверлеи — содержимое вкладок

Оверлей — отдельная «подстраница» со своим холстом. Страница не рисует вкладки сама: она показывает нужный оверлей в специальной рамке, фрейме. Поэтому сначала вы создадите два оверлея, а потом фрейм, который их показывает.

1. В левой панели нажмите третью кнопку — «Создать Оверлей».

2. В дереве в ветке «Оверлеи» найдите оверлей «Overlay»: он станет текущим, над холстом будет «Оверлей : Overlay». Дважды щёлкните по его имени в дереве.

3. Введите Главная.

4. В правой панели, в «Свойствах» оверлея, введите «Ширина» 1920 и «Высота» 1008. Это размер области, которую вы сейчас сделаете на странице.

5. Нажмите «Подтвердить».

6. На холсте оверлея нажмите «Создать Виджет» и выберите «Создать Лейбл».

7. Протяните рамку и задайте «Имя» Home_Title_lb, «Текст» Главная, крупный «Размер».

8. Снова нажмите «Создать Оверлей».

9. Назовите новый оверлей Звук, так же как и первый: двойной щелчок по имени в дереве.

10. В «Свойствах» нового оверлея задайте те же «Ширина» 1920 и «Высота» 1008 и нажмите «Подтвердить».

11. На его холсте создайте лейбл Snd_Title_lb с текстом Звук.

Дерево: 1 — «Создать Оверлей», 2 — оверлей «Звук», 3 — оверлей «Главная»

Свойства оверлея: 1 — «Имя», 2 — «Ширина», 3 — «Высота», 4 — «Подтвердить»

Что вы увидите: в ветке «Оверлеи» два оверлея, «Главная» и «Звук», в каждом по одному лейблу.

Размер оверлея нужно ставить равным размеру будущего фрейма: тогда содержимое займёт область ровно, без растяжения.

Добавьте фрейм

Фрейм — прямоугольная область на странице, в которой показан оверлей. Сменив оверлей, вы меняете содержимое области, не уходя со страницы.

1. В дереве выберите страницу «Основа».

2. «Создать Виджет» → «Создать Фрейм» и протяните рамку между заголовком и нижним краем холста.

3. В «Основные свойства» задайте «Имя» Main_Content_fr, X 0, Y 96, «Ширина» 1920, «Высота» 1008.

4. Раскройте «Свойства фрейма». В списке «Оверлей» должен стоять «Главная»: при создании фрейму автоматически назначается первый подходящий оверлей. Если там «Нет оверлея» или другой оверлей, выберите «Главная».

Свойства фрейма: 1 — «Имя», 2 — «Оверлей»

Что вы увидите: в дереве в группе «Фреймы» — Main_Content_fr. Тип фрейма оставьте «Фрейм»: он виден всегда. Тип «Pop Up» нужен для окон, которые открываются по нажатию.

На холсте UI-Designer фрейм показан серым прямоугольником с именем оверлея. Это вид только в редакторе: на панели оверлей прозрачный, сквозь него виден фон страницы.

Добавьте кнопки-вкладки

Каждая кнопка будет показывать «свой» оверлей во фрейме.

1. Выберите страницу «Основа».

2. Нажмите «Создать Виджет» и выберите «Создать Кнопку».

3. Протяните рамку в левом нижнем углу холста.

4. В «Основные свойства» задайте «Имя» Nav_Home_b, X 24, Y 1112, «Ширина» 302, «Высота» 80.

5. В «Свойства текста» в поле «Текст» введите Главная.

6. В «Свойства фона и изображения» в поле «Цвет фона» задайте непрозрачный цвет, например белый #FFFFFF.

7. В «Свойства кнопки» нажмите поле «Перенаправить на». Откроется окно «Присвоить ссылку кнопке».

8. В списке «Тип цели ссылки» выберите «Оверлей».

9. В списке «Фрейм» выберите Main_Content_fr, в списке «Оверлей» — «Главная».

10. Нажмите «OK».

Свойства кнопки: 1 — «Применить ко всем состояниям», 2 — «Цвет фона», 3 — «Перенаправить на», 4 — «Текст»

Окно «Присвоить ссылку кнопке»: 1 — «Тип цели ссылки», 2 — «Фрейм», 3 — «Оверлей», 4 — «OK»

11. Так же создайте вторую кнопку: «Имя» Nav_Sound_b, X 338, Y 1112, «Ширина» 302, «Высота» 80, «Текст» Звук, «Цвет фона» тот же. В окне ссылки выберите «Оверлей» → фрейм Main_Content_fr → оверлей «Звук».

Что вы увидите: внизу холста две кнопки, «Главная» и «Звук». В дереве в группе «Передний план» — Nav_Home_b и Nav_Sound_b.

Что здесь легко упустить:

• Без цвета в «Цвет фона» кнопка на панели прозрачна: вы увидите только фон и подумаете, что кнопки нет.

• Подпись должна читаться на выбранном фоне; если нет — измените цвет текста в «Свойства текста».

• Пока флажок «Применить ко всем состояниям» включён, цвет задан сразу для всех четырёх состояний кнопки. Поэтому нажатие на панели не меняет вид кнопки. Для учебного примера это нормально; в «Демо-зале» состояния оформлены по-разному.

• Поле «Открыть Фрейм» в «Свойства кнопки» для вкладок не годится: оно показывает фрейм целиком, а не выбирает оверлей в нём. Для вкладок нужна ссылка через «Перенаправить на», как выше. «Открыть Фрейм» и «Скрыть Фрейм» используют для окон типа «Pop Up».

Сохраните и опубликуйте

Пока вы только рисовали, всё жило в вашем браузере и в UI-Designer. Панель видит только опубликованное.

1. В верхней панели нажмите значок «Сохранить (Ctrl + S)». Дождитесь надписи «Сохранено ✓».

2. Нажмите значок «Опубликовать (Ctrl + P)». Дождитесь надписи «Опубликовано ✓».

После сохранения: 1 — значок «Сохранить», 2 — статус «Сохранено ✓»

После публикации: 1 — значок «Опубликовать», 2 — статус «Опубликовано ✓»

Что вы увидите: справа вверху, слева от значков, на 3 секунды появляется статус. Если вместо «✓» стоит «✕» («Не удалось сохранить ✕» или «Не удалось опубликовать ✕»), повторите нажатие.

Сохранение и публикация — разные действия: сохранить значит записать проект в UI-Designer, опубликовать — отправить его в UI-Panel. Если вы забыли опубликовать, на панели останется старая версия. Подробнее — на странице «UI-Designer».

Предупреждение

«Опубликовать» отправляет на панель последнюю сохранённую версию. Правки, которые вы не сохранили, на панель не попадут, предупреждения об этом нет. Поэтому порядок всегда один: сначала «Сохранить», потом «Опубликовать».

После публикации «Развернуть» в U-Logic (кнопка, которая запускает правки программы в работу) нажимать не нужно: панель покажет новое при следующей загрузке страницы.

Подготовьте U-Logic

Интерфейс сам на панели не появится: его панели передаёт программа U-Logic через узел UI - Panel in. Если такого узла в программе нет, вы опубликуете интерфейс, а панель покажет только бесконечную загрузку. Понять, в чём дело, будет трудно. Этот шаг делается один раз на контроллер.

Проверьте, нужен ли он. Откройте U-Logic (см. «U-Logic») и посмотрите вкладки программы. Если на какой-то вкладке уже есть узел UI - Panel in и программа развёрнута (например, вы загрузили готовый «Демо-зал») — пропустите этот раздел. Если узла нет, добавьте его:

1. Перетащите из палитры слева на любую вкладку программы узел UI - Panel in.

2. Дважды щёлкните по узлу. Откроется окно «Изменить узел UI-Panel in».

3. Рядом с полем Path нажмите «+». Откроется окно «Добавить новый конфиг узел UI-listener».

4. Оставьте в поле «Путь» значение /web-client и нажмите «Добавить». В поле Path появится это подключение.

5. В окне узла нажмите «Готово».

6. В правом верхнем углу U-Logic нажмите «Развернуть».

Окно узла UI - Panel in: 1 — поле Path, 2 — кнопка «+»

Окно «Добавить новый конфиг узел UI-listener»: 1 — «Путь»

Что вы увидите: сообщение «Успешно развернуто». Проверить результат можно на панели: после новой загрузки страницы UI-Panel вместо точек загрузки там будет селектор «Интерфейсы» (см. следующий раздел).

Подписи в окне узла (Type, Path, Passcode, Name) в интерфейсе U-Logic написаны латиницей — ищите их именно в таком виде. Типичная ошибка — добавить узел, но не нажать «Развернуть»: пока программа не развёрнута, узла для панели как будто нет.

Примечание

Узел UI - Panel out нужен не для показа интерфейсов, а для того, чтобы программа меняла вид элементов на панели (подпись, цвет, состояние кнопки). Для этого учебного примера он не требуется; как он работает — на странице «Связь интерфейса с программой».

Откройте интерфейс на UI-Panel

1. На странице настроек в разделе «Открыть» нажмите «Открыть UI-Panel» или введите в браузере адрес http://<IP контроллера>:5001 (в режиме HTTPS — https://). Подробнее — «UI-Panel».

2. В селекторе интерфейсов слева выберите «Демо-зал».

3. Нажмите «Звук», затем «Главная».

UI-Panel: 1 — интерфейс «Демо-зал» в селекторе, 2 — кнопка «Звук»

Что вы увидите: интерфейс «Демо-зал» с заголовком вверху и двумя кнопками внизу. Сначала в области виден оверлей «Главная»; нажатие на «Звук» заменяет его оверлеем «Звук», нажатие на «Главная» возвращает.

Если на панели нет интерфейса, различайте два случая.

UI-Panel без узла UI - Panel in: только три синие точки загрузки, без селектора и надписей

• Экран белый, на нём только синие точки загрузки, селектора и надписей нет, и так бесконечно. Панель не получает интерфейсы: в программе U-Logic нет развёрнутого узла UI - Panel in. Выполните шаги из раздела «Подготовьте U-Logic» и обновите страницу панели.

• Селектор «Интерфейсы» есть, но «Демо-зала» в нём нет. Значит, проект не опубликован — или опубликован без сохранения, и на панель ушла прежняя версия. Нажмите «Сохранить», дождитесь «Сохранено ✓», затем «Опубликовать» и обновите страницу панели.

Когда узел развёрнут, панель выглядит так: слева селектор «Интерфейсы» со списком опубликованных интерфейсов, справа надпись «Выберите доступный интерфейс».

UI-Panel с развёрнутым узлом UI - Panel in: слева селектор «Интерфейсы», справа «Выберите доступный интерфейс»

Если вместо интерфейса форма входа — на UI-Panel включено ограничение доступа: введите пароль интерфейса или откройте ссылку-пропуск (см. «Доступ к интерфейсам»). Если кнопки не видны — вернитесь к шагу «Добавьте кнопки-вкладки», проверьте «Цвет фона», затем сохраните и опубликуйте заново.

Что дальше

Вы собрали основу «Демо-зала». Остальное устроено так же: ещё четыре вкладки, кнопки-переключатели, ползунки, список и окно подтверждения. Посмотреть готовый результат можно в учебном проекте: его архив и порядок загрузки — на странице «UI-Designer».