Thunkable X: практика использования

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

Помимо разработки нативных приложений Thunkable X позволяет использовать web-технологии и текстовое программирование, при помощи чего можно реализовать то, что невозможно сделать нативным образом из-за недостаточно развитой функциональности. При помощи онлайн-сервисов Web API, данных URI, HTML, CSS, Javascript, web-фреймворков и др. можно значительно расширить функциональность, но во многих случаях это может потребовать онлайн подключение. Для чего использовать ограниченную по функциональности Thunkable X, если на iPhone можно без проблем загружать html-страницы и web-приложения? Для того, чтобы иметь возможность работать с нативными возможностями, которые предоставляет Thunkable. Пока их немного, но через некоторое время ситуация улучшится.

Для использования Web-технологий, необходимо использовать компонент Web Viewer, который очень не любят в компании Apple и могут отклонять проекты с самым безобидным его содержанием. Учтите это, если планируете использовать этот компонент, особенно с фреймворками, что можно классифицировать как запрещённую для публикации подгрузку стороннего кода.

Если чего-то нет в нативной функциональности, используйте web

Перед началом создания приложения подумайте о том, будет оно состоять из одного или нескольких экранов. В одноэкранном приложении также можно реализовать отношение мастер-детализация путём разделения экрана на несколько частей и использования вертикальной прокрутки в вертикальном компоновщике Column. В одной части экрана может находиться, например, область для отображения списка List Viewer, а в другой - текстовое поле Label или область для отображения изображения Image. Если вместо текстовой области Label использовать поле ввода Text Input, то появится возможность не только редактировать текст, но и выделять его для копирования в другие приложения. При помощи пользовательских диалогов можно реализовать работу с настройками одноэкранного приложения, запроса данных или вывода информации без необходимости использования для этого дополнительных экранов. При помощи компонента Alert упростилась работа по созданию простых диалогов, но, к сожалению, это диалог имеет различную функциональность для iOS и Android.

Создание одноэкранного приложения потребует большого количества блоков, к чему совершенно не готов редактор блоков, начинающий тормозить уже при 200-300 блоках на экране.

В случае создания многоэкранного приложения выберем способ и компонент навигации для этого:

1. Tab Navigator - переключение при помощи ярлыков и свайп-жеста (при включении опции SwipeEnabled в навигаторе).
2. Stack Navigator - вариант стека, когда каждый новый экран добавляется в стопку поверх текущего. Стековые экраны имеют в заголовке стрелку влево для перехода на предыдущий экран.
3. Drawer Navigator - навигация при помощи списка с названиями экранов, расположенном на боковой выдвигающейся (слева или справа) панели.
4. Произвольная - вызов экрана при обработке какого-нибудь события - нажатие кнопки, по таймеру и др. Блок экрана для его вызова находится в категории Controls.

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

Компоненты на экране могут располагаться по горизонтали или вертикали. Перед переходом к созданию интерфейса рекомендую выполнить на листе бумаги или в графическом редакторе набросок экранов. Это поможет увидеть общую разметку и компоновку, которую нужно создать. Для чего это делать, если можно сразу создавать интерфейс на рабочем поле Thunkable IDE? Функциональность Thukable IDE не позволяет эффективно строить интерфейсы (особенно сложные) на рабочем поле. В ней отсутствуют операции копирования компонентов и экранов, выделения нескольких компонентов для групповой настройки свойств. Каждое свойство для каждого компонента придётся настраивать вручную (если для него нет блока). Если же свойство находися на вкладке Advanced, то настройка компонентов усложняется многократно по причине необходимости постоянно открывать и закрывать категории, в которых они находятся. Из-за неадекватного отображения содержимое рабочего поля будет отличаться от того, что показывается на экране устройства. При этом особенно неудобна работа с планшетами и разметкой с абсолютным значениями.

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

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

• Относительный размер в процентах (Relative Size)
• Абсолютный размер в пикселях (Absolute Size)
• Заполнение по области контейнера, в котором они находятся (Fill container)
• Расширение с учётом их содержимого (Fit contents)

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

40%
Fit contents
Fill container

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

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

Глобальные переменные или локальное хранилище можно использовать и в качестве глобального межэкранного ассоциативного массива вместо создания большого количества переменных. Вместо создания 10 переменных создаём список пар ключ-значение. Вместо переменных можно использовать и JSON-объект, но имена свойств в его блоке задаётся вручную, тогда как при помощи списка их можно получить из строки с разделителями программно. К недостатку использования хранилища и JSON-объекта можно отнести необходимость самостоятельного отслеживания имён переменных, чтобы случайно не перезаписать ранее созданные.

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

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

Текстовое поле ввода Text Input не имеет обработчиков событий, но при помощи таймера можно отслеживать изменение текста в нём и реализовать поиск с уточнением или AJAX-поиск.

В фоновом режиме приложения Thunkable X не работают, но выходом может стать запуск в Web Viewer специального скрипта, блокирующего переход в режим сна - NoSleep.js.

Если в момент переключения экранов возникает мерцание изображения, то их помещаем в распорку - компоновщик с заданной абсолютной высотой или шириной. Это уменьшит неприятный эффект. Полностью устранить эффект можно путём замены Image на Column или Button.

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