Input

Компонент с кастомным пикером

Принцип работы: Этот компонент ведёт себя как обычный TextBox, но позволяет назначить кастомный picker для ввода данных. Пикер появляется в нижней части экрана.

Код использования инпута:

    Input i0: {{this.day}}-{{this.month}}-{{this.year}} // отображаем дату в формате ДД-МММММММ-ГГГГ
        label: Мой инпут дня начала
        picker: MyWheels //имя пикера
        day: 19
        month: Сентября
        year: 2017

Код определения пикера MyWheels:

def UIComponent MyWheels
    public Number year: {{w3}}
    public String month: {{w2}}
    public Number day: {{w1}}

    Calendar cal
        day: {{day}}
        month: {{month}}
        year: {{year}}
        minYear: 1937
        maxYear: 2100

    HBox
        flexDefinition: 150px 550px 300px
        Wheel w1
            value: {{day}}
            data: {{cal.days}}
        Wheel w2
            value: {{month}}
            data: {{cal.months}}
        Wheel w3
            value: {{year}}
            data: {{cal.years}}

При активации поля - инстанциируется MyWheels и помещается в нижнюю область ввода.

После этого происходит установка всех экспортированных публичных свойств пикера.

В данном случае year, month и day перезаписываются текущими значениями инпута:

• year: 2017
• month: Сентября
• day: 19

Компонент Input подписывается на изменение этих свойств у пикера и при наступлении - выставляет новое значение себе.

Это значит что мы создали Input i0 и можем использовать его свойства в коде. {{i0.day}} отдаст день.

---

Отдельный пример чисто показать мастерство:

Инпут с бинарным представлением числа

    Input: {{this.v1+this.v2*2+this.v3*4+this.v4*8+this.v5*16}}
        label: Охуенный инпут числа
        picker: Digital
        v1: 0
        v2: 0
        v3: 1
        v4: 0
        v5: 1

Пикер с пятью свитчами для выбора числа:

def UIComponent Digital
  HBox
    padding: 20px
    height: 110px
    public String label: Охуенный инпут числа {{tt.counter}} // Да, мы можем изменять все свойства инпута, в том числе `лэйбл`, паддинги, высоту
    public Switch v1
    public Switch v2
    public Switch v3
    public Switch v4
    public Switch v5
    Timer tt
        enabled: true
        interval: 300