DroidScript

Thunkable под iOS: часто задаваемые вопросы

DroidScript
инструменты для мобильной разработки

Thunkable под iOS: часто задаваемые вопросы

Оглавление  
Дата изменения 23.05.2018

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

Thunkable X среда разработки

Thunkable X логика

Текст

Диалоги

Web-сервисы и API

Как создать многострочное поле ввода?

Для создания многострочного поля ввода можно использовать компонент Web Viewer. Скопируйте текст в текстовой блок.

data:text/html,<meta charset="utf-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0"/>
<html contenteditable="true">

Web Viewer

Недостатком этого решения является то, что для использования введенного текста в нативной части его придётся каждый раз копировать из Web Viewer.

Как вывести текст с html-разметкой?

Нативные средства не позволяют использовать HTML и CSS для оформления текста, в отличие от компонента Web Viewer.

data:text/html,<meta charset="utf-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0"/>
<style>
.myClass{color:red}
</style>
<h3>Заголовок</h3> <div class="myClass">Красная строка</div>

Web Viewer

Как отобразить системный диалог alert?

Отображение дополнительной информации чаще всего производят на отдельном экране. Но в случае небольшого объёма информации можно использовать и системный диалог. Он не позволяет использовать html-разметку, но при помощи управляющих символов \n, \t, \", \' и символов unicode можно реализовать достаточно интересную разметку. Преимущество системного диалога состоит в том, что для его вывода не требуется область Web Viewer.

data:text/html,<meta charset="utf-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0"/>
<script>alert("
\nВНИМАНИЕ:\n\n
По всем вопросам посьба обращаться по телефону
———————————\n
☎ +7 888-88-88
")</script>

Web Viewer

В диалоге alert информация выравнивается по центру, что делает затруднительным вывод сложно форматированных данных, например, списка.

Как создать объект из JSON-строки?

Создание объекта из строки JSON

Ключевым моментом здесь является использование блока "create text with" для корректной интерпретации строки, содержащей кавычки.

Как работать совместно над одним проектом?

Средства для совместной работы в Thunkabke X отсутствуют, но есть возможность одновременно заходить в один и тот же аккаунт с разных рабочих мест. Это позволяет создать общий проект, который можно совместно обновлять. Проблема в том, что при одновременном редактировании проекта несколькими пользователями изменения будут сохранены только для одного из них, а все остальные пропадут. Выходом может служить последовательная работа над проектом, когда его редактирует один разработчик. Например, на первом экране совместного проекта создаётся надпись "Проект редактируется", под ним надпись с именем того, кто редактирует проект, а ещё ниже переключатель. При входе в проект редактор включает переключатель и указывает своё имя. Если кто-то откроет этот проект, то он увидит, что такой-то человек уже редактирует проект и нужно подождать своей очереди.

Более надёжным является подход, при котором выбирается руководитель группы (интегратор), которому остальные участники группы предоставляют доступ к отлаженным частям своих проектов, а он вручную объединяет их в окончательном приложении.

Как задать цвет помимо использования блока цвета?

Варианты установки цвета

Для указания прозрачного цвета введите слово transparent или установите в 0 компоненту прозрачности a в формате rgba.

Как преобразовать строку в число?

Преобразование строки в число

Преобразование происходит от начала строки до первого символа, не относящегося к числу. Для нечисловой строки блок "sum of list" вернёт значение NaN (не число). В качестве числа можно использовать строку в научной форме, например, 2e2 (200).

Как определить тип значения?

Строковое значение преобразуется в NaN, сравнение с которым всегда возвращает false.

Отпределения типа значения

Для проверки на объект преобразуем значение в JSON и проверим наличие символа фигурной скобки.

Отпределения типа значения

Для проверки на объект преобразуем его в JSON.

Как копировать блоки между экранами одного приложения?

Для копирования блока выполните следующие действия:

  1. Выделите его и нажмите сочетание клавиш Ctrl+C.
  2. Перейдите на другой экран и нажмите сочетание клавиш Ctrl+V.

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

Как вернуть случайно удалённые блоки?

Для отмены действий в редакторе блоков используйте Ctrl+Z или команду Undo контекстного меню, которое появляется при щелчке правой кнопкой мыши по рабочему полю редактора блоков.

При помощи данной команды невозможно отменить удаление компонентов.

Как в текстовую область или поле ввода вставить символ перевода на новую строку \n?

Для этого можно использовать такой костыль:

  1. Вместо Label возьмите поле ввода Text Input, для которого установите свойства editable = false и multiline = true.
  2. Перед текстом, который нужно начать с новой строки, вставьте текстовой блок из достаточно большого количества пробелов.

Имитация вставки символа новой строки

Как скрыть компоненты на экране?

Существует несколько способов скрытия элементов:

  • Обнулить ширину и высоту - скрытие с освобождением занимаемой области
  • Сделать цвет фона и основной цвет прозрачными - скрытие без освобождения занимаемой области
  • Вращение вокруг оси Y на 180 градусов. Для этого на вкладке дополнительных свойств добавляем соответствующую трансформацию (если она существует для выбранного компонента) и установливаем для неё значение в радианах равным 3.14. В редакторе блоков можно воспользоваться блоком PI.
  • Поместить компонент в контейнер с нулевыми размерами - скрытие с освобождением занимаемой области

Как в текст добавить значки Юникода?

В настоящее время Thunkable X не поддерживает Font Awesome, но при помощи символов Unicode можно:

  • создать кнопку с пиктограммой
  • добавить значок к надписи на кнопке или в текст

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

Символы Юникода

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

Символы Юникода можно использовать, например, в элементах области списка List Viewer для имитации списка флажков или радиокнопок.

Как сделать ярлыки Tab Navigator с пиктограммами?

Для этого необходимо эмулировать ярлычковую навигацию при помощи кнопок:

  1. На каждом экране в верхнюю часть помещаем компоновщк Row и делаем его нижнюю границу заданного цвета.
  2. В компоновщик добавляем кнопки и распорки между ними - пустые Label заданной ширины
  3. В кнопки вставляем нужные пиктограммы - символы Юникода
  4. В редакторе блоков задаём переходы на экраны при нажатии на кнопки

Скриншот экрана iPhone.

Скриншот экрана iPhone c ярлыками

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

Как создать пустой список и пустую строку?

Для создания пустых значений в блоках "create list width" и "create text with" открываем щелчком по пиктограмме шестерёнки контекстную панель настроек и удаляем из блока все опции.

Пустой список и строка

Как сохранять изменения при переключении экранов?

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

При использовании компонентов навигации, экраны в них инициализируются один раз перед своим отображением. При использовании блока "navigate to" экран, на который происходит переход, инициализируется заново и ранее сделанные в нём изменения на сохраняются. Например, если в поле ввода была введена строка, а затем осуществлён переход на другой экран, то по возвращению на этот экран полее ввода будет иметь значение по умолчанию, заданное в поле свойства или блоке инициализации. Для сохранения состояния экрана перед переходом на другой экран необходимо сохранить необходимые параметры в компоненте Local Storage, а в блоке "Screen Starts" - выгрузить их. При этом необходимо создать механизм инициализации по умолчанию, если запрашиваемые параметры в Local Storage отсутствуют.

Как создать список переменных?

Список переменных можно использовать для динамического создания данных и упростить обмен ими между экранами.

Список переменных

Кто-то может заметить, что это не список переменных, а обычный список данных. Да, но в концептуальном смысле это список переменных.

Как создать приложение для прослушивания интернет радио?

Для прослушивания интернет радио необходимо знать ссылку на поток вещания. Для этого в поисковике вбиваем, например, фразу "наше радио ссылка на поток вещания" и вскоре её находим в выдаче "Наше Радио (128 kb\ps) - http://nashe1.hostingradio.ru/nashe-128.mp3". Можно также воспользоваться каким-либо сервисом интернет радио, например, https://www.internet-radio.com. Открываем его, находим интересующую трансляцию и копируем ссылку m3u.

После получения ссылки на поток или плейлист указываем её в свойстве WebViewer.URL - в центре области Web Viewer отобразится простой проигрыватель и начнётся воспроизведение потока. Прервать его можно нажатием на кнопку паузы в проигрывателе, а выключить его посредством перезагрузки страницы, присвоив WebViewer.URL строку "about:blank". Для отсечения выходящего за границы сообщения об ошибке в компоненте Web Viewer установите свойство overflow = hidden.

Снимок экрана в режиме воспроизведения интернет радио.

Снимок экрана в режиме воспроизведения интернет радио

Для простоты используем два списка, полученные путём копирования строк данных из Excel.

Алгоритм работы с интернет радио

Функциональность данного базового примера можно увеличить на свой вкус. Можно, например, разделить все трансляции по музыкальным стилям и сначала выбирать стиль, а затем поток. Можно дать пользователю возможность самому добавлять новые трансляции - создать экран для ввода названия и ссылки на неё с добавлением в список избранных и последующим сохранением в локальном хранилище. Также можно данные хранить в AirTable, создать систему оценки рейтинга трансляции и др.

Как сделать звонок или отправить SMS?

Для этого воспользуемся компонентом Web Viewer.

Код для телефонного звонка

Для отправки sms вместо tel: укажите sms:, а для звонка по скайпу - skype:. Остальные возможности можно посмотреть в справке по URL-протоколам.

Вместо компонента Web Viewer можно использовать блок "open link". При использовании блока "open link" запускается внешний браузер, на экране которого будут отображёны данные ресурса по указанной ссылке.

Как сделать плавающую кнопку действий?

В условиях отсутствия свойств видимости компонентов и некорректной работы редактора вида с позиционированием и отступами, решение данной задачи является настоящим экспериментированием с костылями.

Для создания кнопки и меню добавьте на экран два компонента Columns. В первом будет располагаться плавающая кнопка, а во втором - всплывающее меню.

Выбор режима позиционирования Columns производится на вкладке расширенных свойств Advanced панели свойств в категории Positioning, при открытии которой в поле Position нужно выбрать absolute. После этого выставляем нужные смещения в полях edgeOffsets и задаём значение в поле ZIndex, чтобы меню располагалось выше содержимого экрана..

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

Как сделать кнопку с фоновым изображением?

У кнопки есть свойство для указания в нём фонового изображения, но в Thunkable X это не работает. В качестве альтернативы можно воспользоваться либо html-кнопкой в Web Viewer, либо кнопкой, расположенной над компонентом изображения. Для этого поместите компоненты Image и Button в компоновщик Row с размером по содержимому, а свойство Position для изображения установите в absolute.

Как сделать пользовательский диалог?

Создание пользовательского диалога основывается на абсолютном позиционировании контейнерного элемента, например, Column и инициализации у него свойства zIndex для отображения поверх других элементов на экране. На экран добавляем кнопку для открытия диалога и контейнер Column, внутрь которого добавляется List Viewer (для реализации List Picker).

Код для создания пользовательского диалога

Дополнение диалога тенью не так очевидно, как хотелось бы. Тень добавляется не контейнерному элементу Column, а рамке внутри него. Данная рамка создаётся при помощи пустого компонента Label с абсолютным позиционированием и относительными размерами 100% для того, чтобы она растянулась на всю область диалога. При этом List Viewer должен располагаться поверх Label.

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

Как получить координаты местоположения устройства?

Создайте файл geolocation.html со следующим кодом.

<script>
if (navigator.geolocation) {
	navigator.geolocation.getCurrentPosition(getLocation,getError);
}else{
	alert("Geolocation not supported");
}
function getLocation(position){
    var lat = position.coords.latitude;
    var lng = position.coords.longitude;
	alert("latitude: " + lat+"\nlongitude: "+ lng);
}
function getError(err){
	alert("Error code: " + err.code);
}
</script>

Загрузите этот файл в проект и укажите его имя в свойстве Web Viewer.URL.

Код для определения местоположения устройства

Оглавление  
© 2016 droidscript.ru admin@droidscript.ru