DroidScript

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

© 2016-2018 Автор материалов - Александр Страшко admin@starport.ru
DroidScript
инструменты для мобильной разработки

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

© 2016-2018 Автор материалов - Александр Страшко admin@starport.ru
Оглавление  
Дата изменения 19.04.2018

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

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

Проще говоря, если чего-то нет в нативной функциональности, используйте web.

Перед началом создания приложения подумайте о том, будет оно состоять из одного или нескольких экранов. Компоненты не имеют свойств видимости, но и в одноэкранном приложении также можно реализовать отношение мастер-детализация путём разделения экрана на несколько частей. В одной части может находиться, например, область для отображения списка List Viever, а в другой - текстовое поле Label или область для отображения изображения Image. Если вместо текстовой области Label использовать поле ввода TextInput , то появится возможность не только редактировать текст, но и выделения его для копирования в другие приложения.

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

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

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

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

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

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

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

Если данными нужно обмениваться между экранами, то для этого можно обойтись одним блоком Local Storage без использования переменных. В качестве ключа для данного блока указывается имя переменной, а в качестве значения - её значение.

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

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

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

Текстовое поле ввода Text Input не имеет обработчиков событий, но при помощи таймера можно отслеживать изменение текста в нём и реализовать поиск с уточнением или AJAX-поиск. Таймор можно использовать и при работе со временем. Например, сначала при помощи web-сервиса получить время, а затем включить таймер. Если между нативной частью и web не требуется обмен данными, то таймер можно реализовать и в компоненте Web Viewer на JavaScript.

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

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

Оглавление