Элементы управления

Второй шаг в создании калькулятора — построение формы с помощью элементов управления.

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

Поля элементов управления

Каждый элемент можно настроить с помощью следующих параметров:

Основные свойства

  • Название
    Имя, отображаемое для пользователи (например, "Ширина", "Тип").

  • Переменная
    Внутреннее имя переменной. Должно начинаться с $ и включать буквы, цифры и подчеркивания (например, $width, $material_type). Эта переменная будет доступна в расчетах.

  • Тип
    Тип поля ввода. Доступные типы:

    • Текст – однострочное текстовое поле
    • Текстовое поле – многосрочное текстовое поле
    • Число – числовое значение (поддержка десятичных)
    • Выбор – выпадающий список с вариантами

  • Ширина поля
    Ширина поля в колонках сетки (например, 6/12). Используется для управления макетом и позволяет располагать поля в адаптивных макетах.

Настройка типа числа

Для элементов типа Число можно настроить:

  • Значение по умолчанию
    Значение, которое будет предварительно заполнено в поле (например, 700).

  • Минимальное значение
    Минимально допустимое значение (например, 350).

  • Максимальное значение
    Максимально допустимое значение (например, 900).

  • Шаг изменения
    Шаг увеличения/уменьшения при использовании стрелок (например, 10).

Пример формы управления с числом

Настройка типа выбора

Для элементов типа Выбор нужно настроить Источник значений:

  • Источник значений
    Определяет, откуда берутся опции в списке:
    • YAML – вручную введенные значения в формате YAML
    • JSON – вручную введенные значения в формате JSON
    • Группа материалов – формирует список материалов из выбранной группы
    • Свойство групп материалов – использует определенное свойство материалов из группы
    • Свойство материала – использует свойство из конкретного выбранного материала

Пример формы управления с выбором

Варианты источника значений

В зависимости от выбранного Источника значений появляются дополнительные поля:

  • Группа материалов
    Обязательно, если Источник значений равен Группа материалов. Указывает, из какой группы брать материалы.

  • Свойство группы
    Обязательно, если Источник значений равен Свойство групп материалов. Указывает, какое свойство извлекать из каждого материала группы.

  • Свойство материала
    Обязательно, если Источник значений равен Свойство материала. Указывает, какое свойство использовать из выбранного материала.

  • YAML / JSON
    Обязательно, если Источник значений равен YAML или JSON. Указывает список доступных значений вручную.

Примеры ручного ввода значений

Формат YAML:

- Oak
- Birch
- Pine
- Maple

Формат JSON:

[
  "Oak",
  "Birch",
  "Pine",
  "Maple"
]

Советы по использованию

  1. Имена переменных: Используйте описательные имена переменных, ясно указывающие их назначение (например, $board_width вместо $w).

  2. Планирование макета: Используйте размеры полей для создания интуитивных форм. Рассматривайте групповое расположение связанных полей.

  3. Значения по умолчанию: Устанавливайте разумные значения по умолчанию для улучшения пользовательского опыта и снижения необходимости ручного ввода.

  4. Источники значений: Выбирайте подходящий источник значений в зависимости от структуры данных. Используйте динамические источники на основе материалов для значений, которые могут меняться со временем.

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