В этот раз, речь пойдёт о новом инструменте FireUI Live Preview, добавленном в RAD Studio 10.1 Berlin . Забегая вперёд скажу, что инструмент очень полезный и удобный, есть исходники и разработан с использованием App Tethering.
FireUI Live Preview – позволяет транслировать проектируемую (design-time) активную форму в режиме реального времени на все подключённые устройства.
Таким образом, вам не надо устанавливать проектируемое приложение на устройство, чтобы посмотреть, как будет выглядеть интерфейс приложения. Можно просто транслировать форму сразу на устройство.
Инструмент состоит из двух частей:
- Сама IDE, выступающая в роли сервера и управляющая подключением устройств
- Приложение FireUI App Preview, выступающее в роли клиента для IDE
Данный инструмент по умолчанию включён в постаку RAD Studio Berlin.
Возможности инструмента.
Сервер (IDE):
- Поддерживает одновременное подключение к множеству устройств
- В качестве технологии подключения используется App Tethering Network
- Совместимость с формами различных устройств
- Используется для проектирования интерфейса, код НЕ посылается на устройство
- Транслируется только Master View форма
Клиент (FireUI App Preview):
- Может работать только с одним экземпляром IDE (Сервер)
- Доступно для Windows, OS X, iOS, и Android
- Совместимость с устройствами различного типа: компьютеры, планшеты, телефоны
- Скомпилированное приложение, поставляемое с RAD Studio, не поддерживает сторонние компоненты
Теперь более подробно рассмотрим настройку этого инструмента.
Серверная часть (IDE).
Открываем настройки: Tools > Options > Environment Options > Form Designer > FireUI Live Preview
Видим вот такое окно:
Описание:
- Broadcast FireUI Live Preview – Включение и отключение передачи (по умолчанию, передача включена)
- Server Name – Имя сервера, которое будет отображаться на клиентских приложениях при обнаружении (по умолчанию, если оставить поле пустым, то будет использоваться имя компьютера)
- Password – Пароль для подключения к серверу из клиентского приложения (по умолчанию, поле пустое)
- Connected Devices – Панель, отображающая список подключенных устройств. В списке отображается: Имя устройства, Операционная система (с указанием версии).
Устройства в списке появляются сразу после подключения клиента к серверу. Для отключения устройства нужно выбрать устройство из списка, нажать по нему правой кнопкой мышки и в контекстном меню выбрать «Disconnect Client».
Клиентская часть (FireUI App Preview).
Исходный код приложения поставляется вместе со студией.
Лежит тут: C:\Program Files (x86)\Embarcadero\Studio\18.0\source\Tools\FireUIAppPreview\.
Скомпилированные приложения для всех поддерживаемых платформ:
- Windows: C:\Program Files (x86)\Embarcadero\Studio\18.0\LivePreview\LivePreviewInstaller.exe
- OS X: C:\Program Files (x86)\Embarcadero\Studio\18.0\LivePreview\LivePreview101.pkg
- Android (Google Play): https://play.google.com/store/apps/details?id=com.embarcadero.LivePreview101
- iOS (Apple Store): https://itunes.apple.com/us/app/fireui-app-preview-10.1-berlin/id1090861997
Описание интерфейса и процесса подключения на примере Android приложения.
Интерфейс.
- Кнопка «Refresh» - позволяет запустить сканирование и соответственно обновить список видимых серверов.
- Кнопка «Advanced» - позволяет задать ip-адрес сервер для подключения.
- Кнопка «Connect/Disconnect» - активирует подключение и отключение с сервером.
Подключение.
- Запускаем приложение на устройстве.
- Сканирование сети запускается автоматически.
- После завершения сканирования, появляется список всех найденных Серверов (IDE).
- Выбираем в списке нужный сервер
- Жмём кнопку «Connect»
- Если Сервер настроен, то появится запрос пароля, вводим его и сразу после этого видим активную форму, выбранную в IDE.
- Всё, теперь любые изменения будут сразу отображаться на вашем устройстве.
Описания на этом закончились.
Теперь о реалиях.
Всё работает отлично и главное быстро. Я соединял Андроид и Windows через Wi-Fi роутер, правда у меня изначально что-то пошло не так и телефон наотрез отказывался видеть ноутбук (про это ниже), хотя до этого я уже использовал App Tethering по такой схеме, всё без проблем работало.
Опыт.
Мой случай:
В общем, в моём случае, т.к. без шаманства не получилось соединиться, пришлось создать точку доступа на ноуте, после этого телефон видел уже две точки (Роутер и ноутбук) и каким-то чудесным образом при подключении к !роутеру!, телефон начал видеть ноутбук. Сегодня утром, думаю, дайка проверю связь без точки доступа на ноуте, раньше же как-то работало и вуаля всё заработало без точки доступа на ноуте. В общем, чудеса или кривые руки - не знаю :)
Полезная ссылка для тех, кто не знает, как создать точку доступа на Windows: http://www.oszone.net/10758
Случай с соединением Виртуальной машины:
Посетитель Vitaldj, рассмотрел данный случай на форуме Ярослава: FireUI как прокинуть в виртуальную машину
Порты, которые должны быть открыты:
- UDP – как минимум один из 2020 – 2039
- TCP – как минимум один из 2040 – 2110
Официальная справка (англ.):
- FireUI Live Preview
- FireUI App Preview
- FireUI Live Preview (IDE)
- Про порты и пр. - System.Tether.NetworkAdapter.TTetheringNetworkAdapterCommon
Вот теперь точно всё :)
p.s. Все права на картинки принадлежат "Embarcadero Technologies, Inc".