О Custom State простыми словами
Автор: Ваня
Оглавление:
Что такое Custom state?
Это переменная, содержимое которой сбрасывается до значения по умолчанию, когда вы перезагружаете страницу.
Представьте ящик, который пуст всегда, когда открываете его. Например, открыли ящик - он пуст. Положили конфетку, закрыли. Открыли во второй раз - пуст.
При открытом ящике вы можете складывать и вынимать конфеты. Однако как только ящик будет закрыт - все содержимое исчезнет.
Ящик - это кастом стейт.
Перезагрузка страницы - это повторное открытие ящика
Конфета - значение, которое кладем в кастом стейт
Кастом стейт (список)
Поставите галочку “list”, и кастом стейт сможет умещать не одно значение, а несколько [список значений].
Чтобы в ящик положить не 1 конфетку, а несколько, нужно поставить галочку list.
Типы данных у Custom state
Каждый кастом стейт имеет определенный тип данных: text, number, data type, date, option sets и т.д. Значения, с таким же типом данных, можно положить в кастом стейт.
Перед тем, как пользоваться ящиком, на него нужно повесить какую-либо надпись [выбрать тип данных], . После того, как выбрали надпись, можем класть значения, которые ей соответствуют.
Например, если на ящик повесить надпись “Конфеты”, значит в него можно положить только конфеты и ничего больше.
Значение по умолчанию
Когда страница перезагружается, то содержимое кастом стейта сбрасывается к значению по умолчанию, которое по умолчанию - пустое.
Однако для некоторых типов данных можно изменить значение по умолчанию!
Можем изменить значение по умолчанию для ящика на "леденец".
Теперь будем обнаруживать леденец каждый раз, когда открываем ящик.
Значение по умолчанию можно установить для следующих типов данных:
Если установлена галочка “list”, то значение по умолчанию установить нельзя.
Изменить значение Custom state
Чтобы изменить значение кастом стейта, нужно выбрать action “Set state”
Понял ли ты чо-нибудь?
- выстроить названия с оранжевым фоном (установить надпись, action "set state", ящик, разрешить несколько конфет, переоткрыть ящик) в правильном порядке
- нажать check, чтобы узнать, правильно ли ты все расставил (-a)
- нажать retry, чтобы сбросить результат
Не переживай, если не получается с первого раза! Когда я столкнулся с Custom state впервые, то провел более 20 часов за компьютером, пытаясь разобраться, что же это такое и как работает.
Ты всегда можешь перечитать статью еще раз и нажать кнопочку retry, чтобы сбросить результат и попробовать снова.
P.S. А знали ли вы, что этот тест сделан с помощью custom state?
Как использовать Custom state на практике?
Один из вариант - это переключаться между вкладками.
Вы нажимаете на одну вкладку и видите ее содержимое, нажимаете на вторую - видите ее содержимое, нажимаете на третью - видите содержимое третьей вкладки.
Как работает логика на примере ящиков с конфетами?
Столы стоят в темноте, поэтому вы не видите содержимого. Чтобы увидеть, нужно посветить на стол фонариком.
Когда кладем конфету в ящик, наблюдатель видит цифру на конфете и затем светит на стол с этой цифрой фонариком.
Например, положили конфету с цифрой "2", наблюдатель увидел и посветил на второй стол. Теперь положили конфету с цифрой 1, наблюдатель увидел цифру 1 и посветил первый стол.
Как реализовать логику в Bubble?
1. Для начала нужно создать кастом стейт:
- Нажать на значок с буквой i в кружочке
- Кликнуть на Add a new custom state
- Написать название. Я написал “Candy”
- Выбрать тип данных [повесить табличку над ящиком!] В данном примере использую number (число).
Вместо конфет с цифрами использую числа, поэтому тип данных number (число)!
- Добавить на страницу группу (элемент Group)
- Добавить в этот элемент 3 текстовых элемента (элемент Text)
Вкладки как конфетки. С помощью вкладок будем объяснять Bubble, какую цифру нужно положить в ящик.
3. Добавить группы [столы] с содержимым:
- Добавить на страницу группу
- В эту группу добавить еще 3 группы [столики]
- Положить в каждую группу наполнение. Я положил текст и иконки
4. Сделать содержимое групп невидимым по умолчанию:
Пока что видим сразу, что лежит в каждой вкладке, однако это неправильно!
Мы должны видеть содержимое только тогда, когда переключаемся на нужную вкладку.
У нас есть выбор в реализации:
1. делать невидимым каждый элемент внутри группы
2. сделать невидимой группу. Все, что лежит внутри, тоже перестанет отображаться!
Какой вариант эффективнее? Второй! Почему? Внутри группы может лежать тысяча элементов, и отдельно каждый делать невидимым - неэффективно! Проще не отображать саму группу.
Фактически мы делаем невидимым не только содержимое стола, но и сам стол!
- Через shift + левая кнопка мышки, выделить 3 группы [стола]. Содержимое выделять не нужно.
- Убрать галочку “This element is visible on page load”
- Теперь группы невидимые при загрузке страницы
5. Теперь нужно научиться класть значения в кастом стейт:
- Выбрать элемент “Вкладка 1”
- Нажать на кнопку “Add workflow”
- Выбрать действие “Set state” [Element actions -> set state]
- Выбрать элемент, в котором создали “custom state”. В моем случае была страница about_custom_state
- Выбрать нужный Custom state. У меня это “Candy”
- Прописать значение
Теперь когда нажимаем на “Вкладка 1”, то кладем в ящик цифру “1”
- Проделать действия выше для Вкладки 2 и 3. В качестве значения класть цифру “2” для вкладки 2 и цифру “3” для вкладки 3.
6. Теперь нужно научить Bubble заглядывать в Custom state и делать нужные группы видимыми!
В этом шаге объясняем наблюдателю, что нужно делать, когда он видит какую-то цифру. Это делается во вкладке Conditional [Условие]
- Нажать на группу для первой вкладки
- Перейти в настройках элемента во вкладку “Conditional”
- Нажать на кнопку “Define another condition”
- Прописать условие, которое состоит из:
- В моем случае получилось следующее:
Мы написали: “Когда кастом стейт Candy равен 1”
Мы написали только условие. Сейчас наблюдатель может заглянуть в ящик, увидеть там единичку и ничего не сделать. Нужно рассказать ему, что он должен делать, когда видит цифру! Для этого:
- Нажать на поле с надписью “Select a property to change when true”
- Выбрать в списке “This element is visible” - сделать текущий элемент видимым.
Поставьте галочку, если она не стоит!
- Проделать пункт 6 для групп 2 и 3. Помните, что стол 2 должен быть видим, когда в кастом стейте лежит цифра “2”, а стол 3 - когда цифра “3”!