Дані

Тут ви підключаєте екран до даних застосунку: показуєте значення з бекенду замість сталого тексту, форматуєте дати й гроші, складаєте речення довкола чисел, показуєте віджет лише за умовою й малюєте список із записів.

Відео: Data on a screen (4 хв; відео англійською, субтитри українською).

Звідки беруться дані#

Редактор не знає вашого бекенду. Він знає словник даних проєкту — перелік полів, які бекенд обіцяє кожному екрану; кожне має тип, підпис і зразок значення. Ви прив'язуєте віджет до поля словника, а справжнє значення підставляє застосунок.

Зразки — це те, що ви бачите на полотні й у прев'ю. Це приклади, а не те, що побачить користувач.

Новий проєкт користується типовим словником. Як описати власні дані — див. Словник даних нижче.

Прив'яжіть текст до даних#

Кожне текстове поле віджета має три режими:

Щоб показати значення з даних:

1. Виділіть віджет і перемкніть його текст на Прив’язка.
2. Оберіть Поле даних. У списку — поля словника, тип яких годиться для цього місця; набрати шлях руками не можна.
3. Заповніть Запасне значення — текст, який застосунок покаже, коли даних немає.

На полотні прив'язане значення показує зразок зі словника. Які значення беруться з даних, видно на виділеному віджеті — за позначкою ⛁; щоб позначити всі одразу — крапковим підкресленням і позначкою ⛁ на кожному віджеті, — увімкніть Прив’язки до даних у меню Показати над телефоном або натисніть Shift+B.

Формати#

Показати як вирішує, як значення буде написане. Список пропонує формати, що годяться для типу поля.

Для чисел і грошей Знак числа дає показати плюс перед додатним числом. Для числа Вигляд числа зі значенням Компактно (48,2 тис.) пише великі значення коротко — 48 200 як «48,2 тис.» українською й «48.2K» англійською, з однією цифрою після коми; значення до 1 000 лишаються всіма цифрами. Слово, узгоджене з числом, і далі узгоджується з повним значенням.

Запасне значення показується так, як ви його набрали, — його не форматують.

Відлік, що цокає#

Відлік — це шаблон із значенням на кожну частину: «Лишилося {d} дн {h} год {m} хв». Додайте те саме поле дати тричі, поставте кожному Частина відліку й оберіть у полі Яка частина Дні, Години (0–23) і Хвилини (0–59). Слова довкола чисел — ваші, і перекладаються разом із реченням; слово може узгоджуватися з частиною, як із будь-яким числом. На телефоні відлік перемальовується щосекунди, коли показує секунди, і щохвилини в решті випадків; минула дата дає нулі. Полотно стоїть у миті зразків, прев'ю відлічує від неї.

Число, що перелічується#

Плавно, коли дані змінюються на тексті, смузі чи кільці прогресу змушує телефон перелічити від старого значення до нового, коли дані змінилися, поки екран показано: баланс після оплати рахує вгору, а кільце доростає, а не стрибає. Перший показ екрана переходу не має, як і телефон з увімкненим Зменшенням руху. Полотно стоїть; у прев'ю перемкніть сценарій даних, щоб побачити. На набраному руками тексті чи шкалі панель каже, що налаштування зараз не діє: змінюються лише дані, поки екран показано.

Число, що росте при показі#

Рости від нуля, коли показано на тексті, смузі чи кільці прогресу змушує телефон вирощувати значення від нуля щоразу, коли екран показано, — на першому екрані, після «назад» і при перемиканні розділу. Смуга заповнюється від порожньої до 87 %, баланс рахує вгору до свого значення з тією самою швидкістю, що й зміна даних; усі елементи екрана починають разом. На смузі чи кільці значення може бути набране руками; текстові потрібне число з даних — інакше панель каже, що налаштування зараз не діє. Коли ввімкнено обидва налаштування, значення росте при показі, а далі перелічується від показаного, коли змінюються дані. Телефон зі Зменшенням руху показує значення одразу; полотно стоїть, прев'ю вирощує його при кожному показі.

Текст зі значеннями#

Шаблон — це речення з місцями для значень: «У вас {points} балів». Перекладається воно цілим, тож кожна мова ставить значення у своєму порядку.

1. Перемкніть текст на Шаблон.
2. Наберіть ім'я в полі Ім’я нового значення і натисніть Додати значення з даних. Ім'я починається з малої латинської літери, і змінити його згодом не можна.
3. Оберіть поле даних для значення і те, що показати, коли даних немає.
4. У полі Текст із місцями для значень напишіть речення й поставте ім'я у фігурних дужках там, де має стати значення: {points}.

У шаблоні може бути до восьми значень. Панель підкаже, якщо текст називає значення, якого немає, або якщо значення в тексті не вжито.

Слово, що узгоджується з числом#

«1 день», «2 дні», «5 днів» — українська має три форми, інші мови дві або більше. Щоб вийшло правильно:

1. Додайте число значенням із даних.
2. Натисніть Додати слово при числі, назвіть слово й оберіть число в полі Узгоджується з.
3. Заповніть форми, яких потребує мова документа. Форми для інших мов пишуть у розділі Мови.

Для цього документ мусить назвати свою мову: спершу ввімкніть мови, див. Мови.

Частина власним стилем#

У розділі Частини власним стилем кожне значення шаблону може мати власний шрифт, колір, вагу, нахил і лінію — велика сума у звичайному реченні. Решта рядка тримає стиль тексту.

Покажіть віджет за умовою#

1. Виділіть віджет і знайдіть у властивостях розділ Видимість.
2. Перемкніть з Показувати завжди на За умовою.
3. Оберіть поле даних і умову. Поле «так/ні» буває увімкнено чи вимкнено; текст і число можна порівняти зі значенням; будь-яке поле й будь-який список можна перевірити умовами порожньо і не порожньо.
4. Щоб порівняти не з набраним значенням, а з тим, що лежить в іншому полі, оберіть у Порівняти з пункт Іншим полем даних і саме поле — «категорія нагороди дорівнює обраній категорії». Коли в тому полі нічого немає, умова не справджується.

Умову застосунок перевіряє на власних даних. У редакторі ви обираєте, на яких даних дивитися, — це сценарій, про нього нижче. Віджет, чия умова в сценарії не справдилася, полотно не малює, як і застосунок; позначка на ньому каже, що він умовний.

Ті самі умови керують станами стилю і вимкненим станом кнопок та полів.

Список із даних#

Список із даних малює свою єдину дитину по разу на кожен запис списку.

1. Додайте Список із даних і оберіть Джерело — один зі списків словника.
2. Покладіть усередину один віджет, наприклад Рядок списку чи контейнер. Це шаблон рядка.
3. Прив'яжіть тексти й зображення рядка до полів запису.

Колонок розкладає записи сіткою. Список, розкладений у рядок, можна зробити каруселлю — розділ Карусель.

Щоб показати повідомлення, коли список порожній, покладіть поруч віджет з умовою «список порожньо».

Фільтр списку#

Показувати лише у властивостях списку з даних малює тільки ті записи, для яких справджується умова. Перемкніть його з Усі записи на За умовою й складіть умову так само, як для видимості, з полів запису: «категорія дорівнює іншому полю даних — категорії, обраній угорі». Записи, що не пройшли, не малюються зовсім: сітка стуляється без дірок, карусель рахує лише показані картки. Коли поле, з яким порівнюють, порожнє, показано всі записи — тож плашка «Усі», що пише порожнє значення, показує весь список.

Для плашок над списком дайте кожній дію Записати значення, що пише її категорію в те саме поле, і стан стилю для обраної. Для повідомлення «у цій категорії поки нічого» покладіть віджет з умовою «список порожньо» й позначте Рахувати лише записи, що пройшли фільтр: тоді він рахує тільки записи, що проходять той самий фільтр, що й список.

Коли рядок відкриває інший екран, той екран дістає запис цього рядка: екран деталей, прив'язаний до тих самих полів, показує саме той елемент, який натиснули.

Цей запис лишається живим. Коли застосунок дістає нові дані, поки екран відкритий, — крок місії виконано, задача переїхала до виконаних, — екран показує нові значення на місці, без повернення до списку; значення з плавною зміною перелічуються до нового числа. Застосунок знаходить запис за полем id: спершу в списку, з якого прийшов рядок, далі в інших списках записів того самого виду, ужитих у документі. Запис без id лишається таким, яким був, коли екран відкрили, а запис, якого в даних більше немає, тримає останні значення. У прев'ю перемкніть сценарій даних, коли такий екран відкритий, — і побачите це.

Зображення з даних#

Для віджета Зображення — чи зображення рядка списку — оберіть З даних і текстове поле, що несе адресу картинки. Заглушка малюється, коли адреси немає.

Сценарії: екран на різних даних#

Над полотном, на панелі перегляду поруч із темою екрана, стоїть список Сценарій: Зразкові дані, Даних немає і Налаштувати значення…. Він каже, на яких даних намальовано екран, і полотно та вкладка Прев’ю ділять його: змініть в одному місці — зміниться в обох. Налаштувати значення… відкриває під списком вікно зі значеннями кожного поля; у вкладці Прев’ю ті самі списки стоять у панелі.

Сценарій складено з умов самого екрана. Кожне поле даних, від якого на екрані щось залежить, — видимість віджета, стан стилю, вимкнена кнопка, обов'язкове поле форми, список із даних, — має власний список із назвою поля над ним:

Перший варіант кожного списку — зразок зі словника даних. Зразкові дані й Даних немає перемикають усе, чого сценарій не називає: з Даних немає прив'язані тексти показують запасні значення, а списки порожні. Щойно ви назвали значення якогось поля, список над полотном каже Власні значення; вибір там Зразкові дані чи Даних немає — або Скинути сценарій у вікні — прибирає названі значення.

Поля запису всередині списку з даних у сценарій не входять: кожен рядок читає свій запис. У прев'ю рядки показують зразки списку; на полотні живий лише перший рядок, а решта — сірі заготовки, бо документ містить один шаблон рядка.

На полотні віджет, схований у сценарії, не малюється. Щоб дотягнутися до нього, відкрийте меню Показати над телефоном і ввімкніть Сховане на цій ширині / у цьому сценарії: сховані віджети з'являться приглушеними, а екран і далі намальовано даними сценарію. Якщо виділити схований віджет у дереві, полотно скаже, коли його видно, і запропонує Перемкнутися туди, де видно; коли жоден сценарій його не покаже — наприклад, він залежить від поля запису списку, — кнопка зветься Показати сховане.

Щоб побачити всі стани одразу, виберіть у списку Сценарій пункт Усі стани. Тоді полотно показує той самий екран на кількох телефонах поруч, по одному на стан: Зразкові дані, Даних немає і кожен варіант кожного поля, що міняє екран, поверх зразків. Кожен телефон підписано тими самими словами, що в списках сценарію; він показує готовий екран до межі першого екрана, а стани, що виглядають так само, як уже показаний, пропущено. Поруч уміщається до восьми телефонів; решту названо числом у рядку під ними, який відкриває Налаштувати значення…. Клацніть телефон — його стан стане сценарієм полотна, і повернеться один телефон. Коли в якомусь стані список порожній, а на екрані нічого не з'являється саме тоді, телефон каже про це під собою: порожній стан ще не налаштовано. Сховане на цій ширині / у цьому сценарії в меню Показати тут не діє.

Перед публікацією подивіться на Даних немає. Лише так видно ваші повідомлення про порожній список і кожен запасний текст.

Збережені сценарії#

Налаштований сценарій можна зберегти під назвою: «Новий учасник», «Серія триває», «Усе виконано». Збережений сценарій належить проєктові, а не документу: його пропонує список Сценарій на кожному екрані кожного документа проєкту і кожній людині з команди. Це нотатка для тих, хто збирає й перевіряє екрани: телефони в застосунку про нього нічого не знають, а документи не змінюються.

Зберегти. Задайте потрібні значення в Налаштувати значення… і натисніть Зберегти поточний як сценарій… у блоці Збережені сценарії цього вікна (той самий пункт стоїть унизу списку Сценарій). Впишіть назву — до 60 символів, і в проєкті не повинно бути сценарію з такою самою назвою, — і натисніть Зберегти. Збережений сценарій — це відправна точка (Зразкові дані чи Даних немає) і названі вами значення; він зберігається таким, яким є, на якому б екрані ви не були.

Вибрати. Збережені сценарії стоять у списку Сценарій над зразковими варіантами. Виберіть один — і полотно та вкладка Прев’ю покажуть екран із його значеннями. Сценарій, що нічого не міняє на цьому екрані, не ховається, а підписаний на цьому екрані без змін. Якщо потім змінити значення, список скаже змінено, а вікно покаже позначку змінено: Зберегти зміни запише значення поверх сценарію, Зберегти як новий сценарій… лишить оригінал і додасть ще один.

Перейменувати й видалити. Коли сценарій вибрано, у тому самому блоці стоять Перейменувати… і Видалити…. Видалення питає підтвердження: посилання на прототип із цим сценарієм після нього відкриватимуть зразкові дані.

У проєкті не більше 20 сценаріїв; на межі кнопка збереження каже це й вимкнена, доки не видалите один. Якщо значення сценарію більше не пасує до словника даних — поле перейменували чи прибрали, — вікно рахує такі значення, а Прибрати ці значення їх викидає. Сценарій, який зовсім не читається, стоїть у списку недоступним, причина — у вікні, а поруч кнопка Видалити.

В «Усіх станах». Коли в проєкті є збережені сценарії, Усі стани показують їх і Даних немає, кожен підписаний під телефоном; два сценарії, що на цьому екрані виглядають однаково, ділять один телефон. Решта станів — за рядком під телефонами. Назвіть стани, важливі команді, — і це стане переліком того, що дивитися перед кожним релізом.

Хто може. Зберегти, перейменувати й видалити може роль Редактор і вище (див. Команда й ролі). Глядач може лише вибрати сценарій. Якщо сховище відмовило, вікно каже Не збережено, а значення лишаються на екрані. Якщо застосунок-хост не зберігає сценарії для проєкту, список усе одно працює, але вікно попереджає, що вони живуть лише до перезавантаження сторінки.

Коли колега правив той самий сценарій. Якщо поки ви працювали, сценарій змінили чи видалили, вам скажуть словами: на зміну поверх ваших правок вікно покаже, що розійшлося (назва, число значень), і запропонує Взяти їхній чи Лишити мій; на видалення — Зберегти мій як новий збереже ваші значення новим сценарієм, Лишити видаленим прийме видалення. Коли ви видаляєте сценарій, який колега щойно змінив, вибір — Лишити їхню версію чи Все одно видалити. Вибраний сценарій, якого ви не чіпали, просто бере нові значення колеги й каже про це; ваші незбережені правки не затираються.

Ці самі сценарії можна вкласти в посилання — див. посилання на прототип.

Словник даних#

Словник належить проєкту, і правлять його в адмінці: відкрийте проєкт, перейдіть у Налаштування проєкту і в секції Словник даних натисніть Відкрити словник. Змінювати його можуть власник і адміністратор.

• Шляхи — одиничні значення. Шлях має вигляд сутність.поле, наприклад user.firstName. Підпис — те, що ви бачите в редакторі; зразок — те, що показує полотно.
• Списки дають записи однієї сутності: список tasks дає записи task, а їхні поля — це шляхи task.….

Словник узгоджуйте з розробниками бекенду: імена мусять збігатися з тим, що бекенд надсилає.

Заповніть його зі зразка#

Замість набирати кожен шлях, натисніть Імпорт JSON, вставте зразок відповіді вашого бекенду (або оберіть файл словника) і натисніть Прочитати. Типи візьмуться зі значень, зразками стануть самі значення, підписами — назви полів. Сторінка перелічить, що не ввійшло й чому. Нічого не зберігається, доки ви не натиснете Зберегти словник.

Списки, записи яких мають однакові поля, а імена закінчуються тим самим словом, стають однією сутністю: missions, newMissions і doneMissions дають записи з іменем mission, а ім'я сутності беруть від найкоротшого зі списків. Ім'я сутності стоїть у кожному списку в полі Сутність запису. Змініть його там і натисніть Enter або вийдіть з поля: усі шляхи цієї сутності перейменуються разом з нею, а списки, що ділять сутність, переїдуть разом. Якщо під одним іменем опинилися списки з різними полями, поле покаже причину, а Зберегти словник лишиться вимкненим, доки ви не дасте одному зі списків інше ім'я.

Що зламає правка#

Під час збереження HotLayout звіряє документи проєкту з новим словником. Якщо правка ламає прив'язки — шлях прибрано або його тип змінено, — ви побачите зачеплені документи й місця ще до запису й оберете: Назад до правки чи Зберегти все одно.

Якщо, поки ви правили, словник зберіг колега, ви обираєте між Відкрити їхній і Зберегти мій поверх.

Документ, відкритий у редакторі, візьме новий словник після повторного відкриття.

Завантажити data-contract.json вивантажує словник файлом для розробників.

Далі#

• Дії й навігація
• Перегляд і прототип