[UB2] UI Виджеты

[MatroseFuchs]

UI Widgets

Symbol

Добавление на сцену MovieClip по его имени (linkage). Используется в объявлениях элемента с параметром layout=false. Т.е. создается display object без layout system'ы.

Пример использования:

(def element TestView() layout=false
    (symbol 'linkageName')
)

(symbol " 'torpedo_markers_ally_c' ")

Sprite

Добавление на сцену экземпляра класса Sprite. Используется в объявлениях элемента с параметром layout=false.

Пример использования:

Скрытый текст

(def element TestView() layout=false
    (sprite
        (y = 140)
        (tf
            (text = 'hello unbound')
        )
    )
)

 

 

MC

Добавление на сцену экземпляра класса MovieClip по его имени (linkage). Используется в объявлениях элемента с параметром layout=true. (т.е. поддержка layout system и styles)

Пример использования:

(def element TestView() layout=true
    (mc 'FWCloseButtonSlimMC'
        (name = 'closeBtnCrossAnim')
        (bindcall gotoAndPlay "stateFrame")
    )
)

TextField

Добавление на сцену экземпляра класса TextField. Поддерживается во всех элементов с layout=true|false. Для задания текста используется свойство text или htmlText. Если будет задан text и htmlText, применится только последнее действие.

Пример использования:

(tf
    (text = 'Hello world!')
)

 

Скрытый текст

(tf
    (style
        (width = 400)
        (height = 100)
        (textColor = 0xff0000)
        (fontFamily = $TitleFont)
        (fontSize = 56)
        (textAlign = "right")
        (leading = 10)
        (letterSpacing = 10)
    )
    (multiline = true)
    (autoSize = 'left')
    (selectable = false)
    (text = 'Hello unbound!!!')
)

 

 

Для случая когда текст слишком большой и не влазит в текстовое поле, существует свойство elideMode. Если elideMode=true, то текст обрезается под размер всего блока и последние 3 символа заменяются на ".". При каждом обрезании текста генерируются event textElideStatus в аргументе передается статус: обрезан текст или нет.

Скрытый текст

(tf
    (class HeroTitleTextStyle)
    (style
        (width = 200)
        (elideMode = true)
    )
    (text = 'Any long text')
    (trace "$event.value" init=false on='textElideStatus')
)

 

substitute

substitute - метод textblock'а, который позволяет заменять подстроки на картинки.

init=true - обязательный аргумент

(tf
    (class $TextDefault19NM)
    (bindcall substitute imageOffset="_frameTextCount"
                        substitutionMap={'[test_icon]' : 'icon_ground_radar_ally' }
                        sourceText='radar: [test_icon] mouse: [KEY_LEFTMOUSE]'
                        postfix='_bg'
                        init=true
    )
)

 

Element

Block

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

Для block существуют aliases:

• block - вертикальный блок, дочерние элементы расположены сверху вниз
• hblock - горизонтальный блок, дочерние элементы расположены слева направо
• vtile - вертикальный tile блок, дочерние элементы расположены сверху вниз, оборачиваются на нижней границе родителя
• htile - горизонтальный tile блок, дочерние элементы расположены слева направо, оборачиваются на правой границе родителя
• reverse - вертикальный блок с обратным порядком элементов в блоке, дочерние элементы расположены снизу вверх
• hreverse - горизонтальный блок с обратным порядком элементов в блоке, дочерние элементы расположены справа налево

 

Пример:

Скрытый текст

(hblock
    (block
        (style
            (height = 100px)
            (width = 100px)
            (backgroundColor = "0xFF00FF00")
        )
    )
  
    (block
        (style
            (height = 100px)
            (width = 100px)
            (marginLeft = 10px)
            (backgroundColor = "0xFFFFFFFF")
        )
    )
)

 

 

backgroundImage

Добавляет на сцену экземпляр класса Bitmap.

• передать путь до файла (для этого используется R-class - ресурсный менеджер)
• передать текстуру из атласа - экземпляр класса BitmapData
• url адрес до изображения в сети

 

Если блоку не заданы размеры в style, то после загрузки изображения размеры блока станут такими же как размеры изображения.

(bind backgroundImage "markerIcon")
----------------
(style
	(bind backgroundImage "'bitmap:' + toLower(markerIcon)")
)
----------------
(block
	(style
		(backgroundImage = 'url:../aircraft/icon_lock.png')
	)
)

 

Slider

Компонент, предоставляющий собой обычный Slider.

Имеет ряд переменных скоупа для настройки:

• value (number) - текущее значение слайдера в единицах (не процент);
• minimum (number) - минимальное значение;
• maximum (number) - максимальное значение.
• enabled (true/false) - доступен ли слайдер.

 

Может отправлять событие:

• evValueChanged  - изменилось значение слайдера.

 

Значения параметров по умолчанию указаны в примере ниже:

Скрытый текст

(def element Slider (_value:number, _min:number, _max:number, _enabled:bool=true) layout=true
    (scope
        (var enabled:bool = "_enabled")

        (event evValueChanged)
        (var value:number = "$event.value" init=false watch=false (event "evValueChanged"))
    )

    (mc slider_default
        (bind minimum "_min")
        (bind maximum "_max")
        (bind value "_value")
        (bind enabled "enabled")
        (dispatch evValueChanged args="{value: $event.value}" dir=1 on='valueChange')
    )
)