Перейти к содержимому
Для публикации в этом разделе необходимо провести 1 боёв.
MatroseFuchs

Unbound 2.0 (документация)

В этой теме 15 комментариев

Рекомендуемые комментарии

Разработчик
45 публикаций
638 боёв

Системный уровень

Вычисляемые выражения

Unbound предоставляет возможность работать с так называемыми вычисляемыми выражениями (не путать с s-expressions). Это выражения, которые вычисляются на этапе исполнения. Содержимое выражения заключено в " ". Для удобства будем называть их просто expression, если речь будет идти об s-expressions, то это будет явно выделено. 

Выражения предназначены для несложной обработки данных, формирования значения свойств или параметров вызова метода. В выражениях можно использовать variables и events, объявленные в scope, а также числовые, строковые, логические литералы и использовать операторы.

(tf
    (text = "' ' + tankmanName + ' — '")
)
(mc AimForShipIcon_pro
    (gotoAndPlay "isAimed ? 'in' : 'out'")
)

Такие выражения будут вычислены при исполнении верстки, непосредственно при вызове методов. Выражение можно использовать как для вызова метода, как пример gotoAndStop, так и вызове s-expression как пример  (element …)

(def element List(hscroll_bar:str) layout=true
    ...
    (element "hscroll_bar" "name + 'HorScrlBar'")
    
)

 

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

 

Т.к за основу взят синтаксис action script, в выражениях можно использовать соответствующие операторы.

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

(text = "2 + 4")
(text = "name + 'HorScrlBar'") # аналогично: -, /, *, %

(text = "keyCode == 13") # аналогично: >, <, >=, <=, !=

(text = "isFocused && keyCode == 13") # аналогично: !, ||, &, ~, |

(width = "400 >> 1") # аналогично: <<

(scope
    (var testDict:dict = "{
        'up' : 'bitmap:button_black_bg',
        'hover' : 'bitmap:button_black_bg_hover',
        'down' : 'bitmap:button_black_press'
    }")
)
(text = "testDict['up']")

(text = "(count1 + count2) + '/' + (total1 + total2)")

(bind class "currStateClass ? currStateClass.style ? currStateClass.style : [] : []")

(text = "(str)count + '/' + (str)total")

 

 

Грамматика

Скрытый текст
root ternary_expr
ternary_expr logical_or ('?' expression ':' ternar_expr)?
logical_or  logical_and ('||' logical_and)*
logical_and  inclusive_or ('&&' inclusive_or)*
inclusive_or  exclusive_or ('|' exclusive_or)*
exclusive_or  exclusive_or ('|' exclusive_or)*
exclusive_or and ('^' and)*
and equality ('&' equality)*
equality  relational ([== !=] relational)?
shift  additive ([<< >>] additive)?
additive multiplicative ([+ -] multiplicative)*
multiplicative  cast ([* / %] cast)*
cast  '(' TYPE_NAME ')' cast | unary
unary  postfix | [- !] cast
postfix  primary ('[' ternary_expr ']' | '(' ')' | '(' argument_list ')' | '.' IDENTIFIER)*
argument_list assignment (',' assignment)*
assignment IDENTIFIER '=' ternar_expr | ternar_expr
primary IDENTIFIER | constant | '(' expression ')'
constant  IDENTIFIER | TYPE_NAME | STR | NUMBER | HEX | BOOLEAN | LIST | MAP
LIST '[' ']' | '[' ternary_expr (',' ternary_expr)* ']'
MAP '{' '}' | '{' IDENTIFIER ':' ternary_expr (',' IDENTIFIER ':' ternary_expr)* '}'
IDENTIFIER  $?[a-zA-Z]+[a-zA-Z0-9]*
NUMBER  [0-9]+ (.[0-9]+)?
PERCENT  [0-9]+ (.[0-9]+)? '%'
STRING  '/'' .* '/''
BOOL  true | false

 

 

Также в expressions можно вызывать функции.

(bind text "toUpper('Skorpion G')")

 

  • Плюс 1

Рассказать о публикации


Ссылка на публикацию
Поделиться на других сайтах
Разработчик
45 публикаций
638 боёв

Базовая функциональность

 

Базовая функциональность определяет базовые возможности фреймворка:

  • формирование сцены (создание и добавление sprites, textfields, symbols, blocks)
  • scope, bindings system
  • построение definitions - element, css, animation, macro, constant.
  • holders глобальных данных (enums, глобальные константы, глобальные указатели на объекты, глобальные методы)

Build stage

Основной возможностью языка разметки unbound является создание, конфигурация и добавление instance of display objects (DO) в соответствующий target-объект в display list'е . Target-объектом является родительский DO для текущего фрагмента верстки  Все DOs разделяются на 2 группы по наличию/отсутствию layout system. Layout system отвечает за позиционирование DO на сцене.

(block
    (tf
    )
)

где нода block является target-объектом для DO tf.

 

Display objects without layout system

методы верхнего уровня описание
sprite Create empty instance of Sprite
symbol  Create instance of Symbol (MovieClip or Sprite) from library by linkage
bitmap  Create instance of Bitmap from library by linkage
tf Create instance of TextField
element Создание экземпляра элемента описанного в верстке
bitmapImage Create instance of Bitmap with argument BitmapData

 

 

 

 

 

 

 

 

 

 

 

 

 

Определение элемента

Верхнеуровневым DO верстки является element. Element – именованный параметризированный фрагмент верстки на базе спрайта. Element может иметь Scope, который содержит данные, доступные в теле element. Работа с элементом разделяется на 2 стадии: definition и create instance. Для определения элемента используется метод def.

(def element CommanderPersonalInfo() layout=true
)

Создание экземпляра:

(element CommanderPersonalInfo)

Scope

Scope - это хранилище данных и событий, доступных в теле определения элемента. Scope может иметь только Element, остальные DO могут работать только со scope родительского Element.

В scope должны быть объявлены все переменные и события, которые используются в теле element. Попытка обращения к несуществующему свойству или событию вызывает ошибку: access of undefined scope event 'nameEvent'

методы верхнего уровня описание
scope  Метод возвращает scope элемента для дальнейшей работы.

 

 

 

 

(scope
    (var lvlVal:str = '')
    (var title:str = '')
    (var cost:str = '')
    (var text:str = '')
    (var lvlTextColor:number = 0xffcac8c1)
    (var imageUrl:str = '')
)

Байндинги

Общее описание

Байндинги отвечают за простую синхронизацию данных (свойство, вызов метода, диспатч события). Существует три элемента синхронизации

  • свойство
  • вызов метода
  • событие

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

 

методы верхнего уровня описание
scope -> object  
bind запись значения в свойство объекта
bindcall вызов метода у объекта
object -> scope  
sync значение переменной в scope-е синхронизируется с значением свойства объекта
dispatch событие в scope-е синхронизируется с событием у объекта (диспатчится событие в scope-е по событию от объекта)

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Все байндинги имеют общие свойства:

  • watch - следить ли за изменением значения свойств scope-а, которые используются в выражениях
  • init - производить ли действие (соответствующее типу байндинга) при инициализации байндинга
  • on - событие target-объекта, по которому будет срабатывать байндинг
  • enabled - можно использовать для включения и выключения срабатывания, может принимать выражения типа (enabled = "$event.buttonIdx == 1")

и общие методы:

  • event - добавляет произвольное событие в качестве триггера к байндингу

Bind

Синтаксис:

(bind scopeVar|property "scopeVar|$target|$event.field" [init=false|true] [watch=false|true] [on='scopeEventName|flashEventName|cppEventName']|[(event "scopeEventName")] [(enabled "expression")]), по-умолчанию init=true watch=true

Синхронизировать можно как переменную из scope, так и свойство target-объекта. 

  • Для синхронизирования переменной из scope, bind нужно поместить в scope.

    (scope
        (var count:number = 30)
        (var total:number = 100)
        (var percent:number = 0)
        (bind percent "count / total")
    )

     

  • Для синхронизации свойства target-объекта, bind должен вызываться в target-объекте, свойство которого мы синхронизируем.

    (scope
        (var vehicleType:str = 'vehicleHeavy')
    )
    (tf
        (bind text "vehicleType")
    )

     

В обоих случаях изменение любой переменной из выражения приводит к его вычислению, а результат записывается в синхронизируемую переменную или свойство. Управлять этим поведением можно через параметр watch=true|false.

 

Второй способ вызвать синхронизирование выражения - подписаться на событие. Поддерживается 2 способа для подписки на событие

  • Передать в аргумент on имя ивента как строку. Используется для подписки на флешовые события или события, которые распространяются из core c++. Если в этом ивенте есть аргументы, к ним можно получить доступ через объект $event. На момент выполнения выражения в bind все переменные должны уже быть известны. Но в $event аргументы попадут, если распространится событие. Так как события никакого еще не было, но на старте $event не определен, для этого у всех типов биндингов существует параметр init=true|false, которое позволяет настроить выполнение выражения при инициализации.

    (tf
        (class GrandTitleTextStyle)
        (text = 'default text')
        (bind text "$event.localX" init=false on='click')
    )

     

  • Передавать из scope объект event

    (scope
        (event onCustomEvent)
    )
    (tf
        (bind text "$event.localY" (event "onCustomEvent"))
        (dispatch onCustomEvent on='click')
    )

     

Примечание:

Подписаться на событие конкретного экземпляра элемента можно в его скоупе. Тогда передавать event нужно с использованием аргумента on.

Пример:

(element ButtonPrimary
    (scope
        (bind label "$event.localX+ $event.localY" init=false on='evBtnLeftClickEvent')
    )
)

Управлять исполнением синхронизации можно через вложенную конструкцию enabled, которая принимает выражение, результатом которого должно быть булевское значение. В свою очередь, если требуется подписать изменение enabled на event или выражение, нужно использовать bind.

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

(scope
    # Объявляем event
    (event changedToogle)
  
  
    # Объявляет булевскую переменную - условие для отключения/включение условия выполнения конструкции bind   
    (var toogleFlag:bool = true)     
    (bind toogleFlag "!toogleFlag" watch=false init=false (event "changedToogle"))
)
# Создаем кнопку, по клику которой будем выводить координату мыши
(element ButtonPrimary
    (scope
        # Подписываем переменную скоупа label на синхронизацию по клику на кнопку. Условие выполнения подписки - если toogleFlag имеет значение true
        (bind label "'localX: ' + $event.localX" init=false on='evBtnLeftClickEvent' (bind enabled "toogleFlag"))
    )
)
# Создаем кнопку, по клику которой диспатчится событие, которое переключает флаг toogleFlag.
(element ButtonPrimary
    (scope
        (bind label "'toogleFlag: ' + toogleFlag")
        (dispatch changedToogle on='evBtnLeftClickEvent')
    )
)

 

 

Bindcall

Синтаксис:

(bindcall functionName "scopeVar|$target"* [init=false|true] [watch=false|true] [on='scopeEventName|flashEventName|cppEventName']|[(event "scopeEventName")] [(enabled "expression")]), по умолчанию init=false watch=true

Используется для вызова метода у target-объекта по условиям (событие, изменение аргумента).

Пример использования при подписке вызов метода у DO:

(mc 'CloseBtnCrossAnim'
    (bindcall gotoAndPlay "stateFrame")
)

 

Таким образом, при изменении переменной stateFrame будет вызван метод gotoAndPlay. 

Другой пример - вызов методов у контроллеров:

(controller $Animation
    (bindcall play duration=0.2 from={alpha:0} to={alpha:0.5} (event "evBtnOverEvent") (bind enabled "_isPressed"))
)

Поведение параметров eventenabled такое же, как у конструкции bind.

Dispatch

Синтаксис:

(dispatch scopeEventName on='flashEventName|scopeEventName|cppEventName'|[(event "scopeEventName")] [args="{key1: value1, ...}"] [dir=0|1|2] [(enabled "expression")]), по умолчанию dir=0

Рассылка события по событию, которое генерируется scaleform или core c++ unbound. Перед тем как рассылать событие, его нужно объявить в scope.

(scope
    (event onClick)
)
(dispatch onClick on='click')

Передача аргументов

При рассылке события можно передавать аргументы. Аргументы передаются как dict. По умолчанию если не задан параметр args, то все свойства исходного event'a (тот ивент, который выступает тригером) передаются в рассылаемый event.

(scope
    (event onClick)
) 
(element ButtonPrimary
    (dispatch onClick on='click')
)
(trace "$event" init=false (event "onClick"))

Результат в ub_player_errors.log:

========================================================================
-------------------------------------------
UBTRACE: {altKey:false,bubbles:true,buttonDown:false,buttonIdx:0,cancelable:false,clickCount:0,commandKey:false,controlKey:false,ctrlKey:false,currentTargetFЧ',delta:0,eventPhase:2,localX:41,localY:18,mouseIdx:0,nestingIdx:0,relatedObject:[null],shiftKey:false,stageX:41,stageY:18,target:°FЧ',type:click}

Если же передать аргументы, то передача свойств исходного ивента не происходит.

Направление распространения события

Направлением распространения event можно управлять параметром dir. Поддерживаются 3 значения:

  • 0 - event распространяется внутри element. По умолчанию dir=0.
  • 1 - event распространяется от ребенка к родителю.
    Скрытый текст
    
    (def element TestView() layout = true  
        (scope
           (event onClick)
        )
      
        (element ChildElement)
      
        (tf
            (class HeroTitleYellowTextStyle)
            (text = 'default text')
            (bind text "$event.key" init=false (event "onClick"))
        )
    )
      
    (def element ChildElement() layout=true
        (scope
            (event onClick)
        )
        (element ButtonPrimary
            (dispatch onClick args={key: 100} dir=1 on='click')
        )
    )

     

    Примечание:

Важно помнить о том, что прежде чем использовать event, он должен быть объявлен в scope. Даже несмотря на то, что в scope определении element ChildElement event уже объявлен, его нужно также объявить и в TestView.

  • 2 - event распространяется от родителя к ребенку.
    Скрытый текст
    
    (def element TestView() layout = true  
        (scope
           (event onClick)
        )
      
        (element ChildElement)
      
        (element ButtonPrimary
            (dispatch onClick args={key: 100} dir=2 on='click')
        )
    )
      
    (def element ChildElement() layout=true
        (scope
            (event onClick)
        )
      
        (tf
            (class HeroTitleYellowTextStyle)
            (text = 'default text')
            (bind text "$event.key" init=false (event "onClick"))
        )
    )

     

     

Разделение событий

В приведенных примерах вложенный элемент распространяет событие и на сцене в родителе был только один экземпляр. Но часто бывают случаи, когда несколько одинаковых элементов лежат на одном уровне вложенности. Тогда отличить, от кого именно пришло событие, будет сложно. Рассмотрим пример:

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

(def element TestView() layout = true  
    (scope
       (event onClick)
    )
  
    (element ChildElement id=0)
    (element ChildElement id=1)
    (element ChildElement id=2)
    (element ChildElement id=3)
  
    (tf
        (class HeroTitleYellowTextStyle)
        (text = 'default text')
        (bind text "'click button id=' + $event.buttonId" init=false (event "onClick"))
    )
)
  
(def element ChildElement(id:number) layout=true
    (scope
        (event onClick)
    )
    (element ButtonPrimary
        (scope
            (label = "'button_' + id")
        )
        (dispatch onClick args="{buttonId: id}" dir=1 on='click')
    )
)

 

 

на сцене 4 экземпляра ChildElement, и каждый из них распространяет событие onClick. Текстовый блок будет ловить события от каждого элемента. Конечно, можно проверять id кнопки в выражении bind. Но также для этого можно передиспатчивать события из scope вложенного элемента в уникальное событие родителя.

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

(def element TestView() layout = true  
    (scope
       (event onClickChild1)
    )
  
    (element ChildElement id=0
        (scope
            (dispatch onClickChild1 on='onClick')
        )
    )
    (element ChildElement id=1)
    (element ChildElement id=2)
    (element ChildElement id=3)
  
    (tf
        (class HeroTitleYellowTextStyle)
        (text = 'default text')
        (bind text "'click button id=' + $event.buttonId" init=false (event "onClickChild1"))
    )
)
  
(def element ChildElement(id:number) layout=true
    (scope
        (event onClick)
    )
    (element ButtonPrimary
        (scope
            (label = "'button_' + id")
        )
        (dispatch onClick args="{buttonId: id}" dir=1 on='click')
    )
)

 

 

Т.е. событие onClickChild1 синхронизируется с событием onClick только у кнопки с id=0, поэтому поле text у текстового блока будет обновляться только при клике на эту кнопку.

Dispatch при enabled=true

Не срабатывает событие при переключении enabled в true, но продолжает срабатывать при переключении trigger в true.

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

(def element MainTestElement() layout=true
    (scope
        (event evMouseClick)
        (event evTestEvent)
        (event evTestTriggerEvent)
  
        (var count:number = "0")
        (bind count "count+1" watch=false init=false (event "evMouseClick"))
  
        (var testCount:number = "count" watch=false init=false (event "evTestEvent"))
        (var testTriggerCount:number = "count" watch=false init=false (event "evTestTriggerEvent"))
    )
    (style
        (width = 500px)
        (height = 300px)
        (backgroundColor = 0x88FF00FF)
    )
  
    (dispatch evMouseClick on='click')
  
    (dispatch evTestEvent (bind enabled "count%2 == 0" )) # не будет срабатывать
    (dispatch evTestTriggerEvent (bind trigger "count" )) # будет срабатывать
  
    (macro trace "'count: ' + count")
    (macro trace "'must always be zero:' + testCount")
    (macro trace "'must be triggered:' + testTriggerCount")
)

 

 

Контроллеры

Сontroller  - это атомарная функциональность над target-объектом. Позволяет расширить функционал за счет выполнения кастомной логики над объектом. 

Controller реализуется на С++. 

 

методы верхнего уровня описание
controller Метод возвращает style текущего DO для дальнейшей работы

 

 

 

 

(controller $Animation
    (play duration=0.2 to="{
    alpha:(isMouseOver ? 1.0 : 0.0),
    visible:(isMouseOver ? true : false)
    }")
)

Стилизация display object.

Elements и blocks имеют Style, что позволяет настраиваить их визуальное представление, например, изменять размеры, накладывать фильтры и т.д.

top-level methods  
style Метод возвращает style текущего DO для дальнейшей работы

 

 

 

 

У каждого блока свой набор пропертей style. Так, например, блоку tf можно задавать font, size и color.

(tf
    (style
        (fontFamily = $TitleFont)
        (fontSize = 36)
        (textColor = 0xf5eed5)
    )
)

Также через изменение свойств style: paddings, margins, position, flow и т.п, - можно управлять позиционированием блока.

(block
    (style
        (position = "absolute")
        (bottom = 18px)
        (paddingLeft = 24px)
        (paddingRight = 24px)
    )
)

Style обладают только объекты с layout-system, а именно element с параметром layout=true и различного рода блоки, унаследованные от BaseBlock в c++. Обращение к свойством style у DO без layout system приводит к ошибке: access of undefined method 'style' through a reference with type element 

 

  • Плюс 2

Рассказать о публикации


Ссылка на публикацию
Поделиться на других сайтах
Разработчик
45 публикаций
638 боёв

Декларативный язык разметки и S-выражения

 

Верстка состоит из S-выражений. Существует 4 вида s-выражения, каждый из которых предназначен для конкретного действия:

  • Call method
    (<method name> <positional argument value>* <named argument>*
        <nested s-expression>+
    )
    <named argument> := <argument name> = <argument value>
    (bind isEnabled "$event.enabled" init=false
        (event "isEnableChanged")
    )

    bind - <method name>

    isEnabled, "$event.enabled" - <positional argument value>*

    init=false - <named argument>*

    (event "isEnableChanged") - <nested s-expression>+

  • Add definition
    (def <definition type> <difinition name> (<declaration argument>*) <named argument>*
        <nested s-expression>+
    )
    <declaration argument> := <argument name> : <argument type> [ = <default value> ]
    <named argument> := <argument name> = <argument value>
    По сути является частным случаем s-выражения-метода и введен только ради особого синтаксиса декларации параметров.
    (def element TestView(name:str = '', count:number) layout=true
        (block      
        )
    )

     

  • задать значение свойства
    (<property name> = <property value>)
    (style
        (width = 100px)
    )
      
    (tf
        (text = 'Hello world!')
    )
  • взять значение свойства
    (.<property name>
        <nested s-expression>+
    )
    (.graphics
        (lineStyle 1 0xffffdc84 1)
        (beginFill "0xff414141" "0")
        (drawRect 0 0 450 64)
        (endFill)
    )

На этих 4 типах выражений и строится вся разметка.

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

# definition
(def element CommanderPersonalInfo(name:str = '') layout=true
    (mc 'ResearchPageBGFlags'
        # set property
        (name = 'flags')
  
  
        # call method with argument
        (gotoAndStop "nation")
    )
  
    (block
        # get property
        (.graphics
            # nested s-expressions
            (beginFill "0xFF0000" "1")
            (drawCircle 40 40 10)
            (endFill)
        )
    )
)

 

 

Макросы 

Макрос - именованный параметризированный фрагмент верстки, который подставляется в место вызова на этапе парсинга.

Макросы реализованы на уровне AST (Abstract syntax tree). 

Определение макроса:

(def macro <macro name> (<declaration argument>*)
    <nested s-expression>+
)
<declaration argument> := <argument name> : <argument type> [ = <default value> ]
(def macro StatusesVehicleTypes(width:number=100%, height:number=100%, renderer:str='VehicleTypeItem', name:str='statusesVehicleTypes')
    (element List "name" "renderer" "width" "height"
        (scope
            (containerFlow = "Flow.HORIZONTAL")
            (listVscrollPolicy = 'off')
            (listHscrollPolicy = 'off')
        )
    )
)

Использовать макрос можно с помощью ключевого слова macro. 

(macro <macro name> <positional argument value>* <named argument>*)
(macro StatusesVehicleTypes 160 height=32)

Несмотря на то что это выглядит как обычный вызов метода, это не так. Подстановка макроса происходит на этапе парсинга.

В определении макроса можно использовать макросы, определенные ранее. Подстановка происходит рекурсивно. 

(def macro ComponentStateBase (statesDict:expression)
    (macro ComponentStateBaseScope "statesDict")
    (macro ComponentStateBaseContent)
)

 

Исполнение верстки

Движок, исполняющий верстку, максимально абстрагирован от каких-либо конкретных функциональностей. В нем нет знания о спрайтах, скоупах и т д.

Здесь есть такое понятие, как таргет-объект. Это текущий объект, над которым выполняются действия, описанные s-выражениями. S-выражения различаются по типам (метод, сеттер, геттер) и не более (даже definition на этом уровне будет просто методом).

Первое исполнение верстки происходит после загрузки текста файла в фреймворк. После парсинга файла - мы имеем список s-выражений, которые содержатся в файле (как правило, это дефенишины, задания глобальных констант). Для исполнения этого списка s-выражений создается фейковый объект (хотя по факту этим методам он не нужен).

Другим частым случаем запуска движка на исполнение списка s-выражений является построение дефинишина, здесь создается соответствующий дефинишину объект и s-выражения, которые содержатся в теле дефинишина, исполняются над ним.

По ходу исполнения s-выражений таргет-объект меняется. Это происходит при исполнении вложенных s-выражений, для них таргет-объектом будет объект, который вернуло родительское s-выражение. Если s-выражение ничего не вернуло или вернуло не объект, то вложенные s-выражения исполняться не будут. Возвращать значения (в том числе объекты) могут методы и геттеры.

 

На примере подробно расписано, как меняется таргет-объект:

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

# метод def не возвращает ничего, поэтому его вложенные s-выражения не будут исполнены
# метод def их сохранит для дальнейшего использования при построении дефинишина
# s-выражения в теле дефинишина CommanderPersonalInfo будут исполнены над объектом sprite
# при построении элемента CommanderPersonalInfo
(def element CommanderPersonalInfo (command:str, toggle:bool = false) layout=true
    # target-object - Sprite
    # метод tf создаст TextField, добавит его в display list к текущему target-объекту
    # вернет созданный объект
    (tf
        # target-object - TextField, который вернул метод tf
        # style возвращает StylePreset для target-object
        # у style будет задано значение 100 свойству width
        (style
            (width = 100px)
        )
    )
  
  
    # метод mc создаст объект класса ResearchPageBGFlags из библиотеки по linkage,
    # добавит его в display list к текущему target-объекту, которым сейчас является Sprite
    # вернет созданный объект
    (mc 'ResearchPageBGFlags'
        # target-object - ResearchPageBGFlags (унаследованый от MovieClip)
        # вызван метод gotoAndStop c строковым аргументом 'ussr'
        (gotoAndStop 'ussr')
    )

 

 

Типы данных

В верстке введена строгая типизация (параметры definitions, свойства скоупа), проверка типов происходит на этапе исполнения (кроме макросов, для них на этапе подстановки, т е на этапе парсинга)

Введение типизации позволяет лучше контролировать ошибки.

тип описание синтаксис комментарии
number number 12.34 для типа number можно уточнить единицы
  percent 12.34%  
  pixels 12px  
bool boolean expression true / false  
str string 'text123' single quotes
dict dictionary {a : 1, b: 2}  
array array [1, 2, 3]  
expression вычиляемое выражение "a ? 1 : 2"

в двойных кавычках

константа не может быть определена внутри выражения

gfx указатель на любой GFx::Value нет константа не может быть определена в верстке и в выражениях
object указатель на оперируемый объект нет константа не может быть определена в верстке и в выражениях

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Примечание:

Важной особенностью при работе со строковыми литералами и переменными является то, что одинарные кавычки можно не использовать, т.к. парсер при разборе интерпретирует значения как строку. Поэтому существует двойственность при объявлении строковых переменных.

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

# Инициализация строкой переменной переменной
(var vehicleName:str = Skorpion)
  
  
# Объявление ключа в dict'e
(var testDict:dict = "{
    up : 'bitmap:button_black_bg',
    hover : 'bitmap:button_black_bg_hover',
    down : 'bitmap:button_black_press'
}")
(trace "toUpper(testDict['up'])")

 

 

Эта особенность проявляется и при использовании bindings конструкций (bind, bindcall, sync, dispatch), например:

# Dispatch события evBtnUpEvent
(dispatch evBtnUpEvent on=mouseUp)

Первым аргументом toplevel функция dispatch ожидает строку, но явно обозначать, что это строка, не требуется.

 

Enums

В выражениях можно использовать перечисления, которые заданы в core c++ части Unbound.

enum name свойства описание пример комментарии
Flow

HORIZONTAL

VERTICAL - значение по умолчанию

TILE_HORIZONTAL

TILE_VERTICAL

REVERSE_HORIZONTAL

REVERSE_VERTICAL

Свойства определяют то, как будут выстраиваться вложенные display objects.
(block 
    (style
        (flow = "Flow.HORISONTAL")
    )
)
  
  
# Эквивалент записи выше
(hblock
)

Для block с выставленным в стиле свойством flow существуют алиасы:

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

У block параметр flow = Flow.VERTICAL

Easing

line

elastic_in

elastic_out

bounce_in

bounce_out

back_in

back_out

cubic_in

cubic_out

quint_in

quint_out

expo_in

expo_out

expo_in_out

sine_in

sine_out

sine_in_out

Types of easing for animation.
(controller $Animation
    (play duration=0.3 to={alpha:0} easing="Easing.cubic_out")
)
 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

  • Плюс 2

Рассказать о публикации


Ссылка на публикацию
Поделиться на других сайтах
Разработчик
45 публикаций
638 боёв

Конструкции языка разметки

Constant

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

В unbound можно использовать 2 типа constant:

  • Глобальные констатнты
    Для объявления глобальной константы используется функция (def. В поле аргумента передается содержимое, которое может принимать переменная при объявлении.

    (def constant C_ALLY 0xFF80c0ff)
    # Далее в любом вычисляемом выражении можно использовать объявленную константу
    (style
        (width = "32px")
        (height = "32px")
        (backgroundColor = "C_ALLY")
    )
    Скрытый текст
    
    (def constant ModuleNames   [  
                                'engine',
                                'maingun',
                                'atba',
                                'aviation',
                                'airdefence',
                                'none',
                                'torpedoes',
                                'wheel',
                                'none',
                                'none',
                                'fire',
                                'flood'
                    ]
    )
      
      
    (var damagedModuleName:str = "(moduleState == 3 ? 'module_dead_' : 'module_crit_') + ModuleNames[moduleIndex]")

     

    Скрытый текст
    
    (def constant BTN_PRIMARY {
            up : {font: ButtonTextStyle, image: {source: 'bitmap:button_normal_bg', scale9: "Rect(15, 7, 135, 5)"} },
            hover : {font: ButtonTextStyle, image: {source: 'bitmap:button_normal_bg_hover', scale9: "Rect(15, 7, 135, 5)"} },
            down : {font: ButtonTextStyle, image: {source: 'bitmap:button_normal_bg_press', scale9: "Rect(15, 7, 135, 5)"} },
            disabled : {font: ButtonTextDisabledStyle, image: {source: 'bitmap:button_normal_bg_disabled', scale9: "Rect(15, 7, 135, 5)"} },
            disabledOverlay : {style: 'BtnNormalDisabledOverlayStyle'},
            focusOverlay : {image: {source: 'bitmap:button_normal_focus', scale9: "Rect(15, 7, 135, 5)"}},
            upSelected : {font: ButtonTextStyle, image: {source: 'bitmap:button_normal_bg_press', scale9: "Rect(15, 7, 135, 5)"} },
            hoverSelected : {font: ButtonTextStyle, image: {source: 'bitmap:button_normal_bg_press', scale9: "Rect(15, 7, 135, 5)"} },
            downSelected : {font: ButtonTextStyle, image: {source: 'bitmap:button_normal_bg_press', scale9: "Rect(15, 7, 135, 5)"} }
        }
    )
    (macro ComponentStateBase "BTN_PRIMARY")

     

     

  • Локальные константы
    Эти константы объявляются в scope element и могут быть использованы только в element'е.

    Скрытый текст
    
    (def element TestView() layout = true
        (scope
            (const STATE_AVAILABLE:number = 0)
            (const STATE_UNAVAILABLE:number = 1)
            (const STATE_LOCKED:number = 2)
      
      
            (var currentState:number = 1)
        )
      
        (tf
            (bind class "currentState == STATE_AVAILABLE ? 'EpicTitleYellowTextStyle' : 'GrandTitleYellowTextStyle'")
            (text = 'Hello Unbound!!!')
        )
    )

     

     

 

  • Плюс 2

Рассказать о публикации


Ссылка на публикацию
Поделиться на других сайтах
Разработчик
45 публикаций
638 боёв

Controllers

Контроллер -- сущность, выполняющая один тип действий с заданным объектом. У контроллеров $Instance, $FxInstance и $Repeat - объект указывается в поле renderer; контроллер $Animation направлен на родительский объект; контроллер $Sector сам является объектом.

$Instance

Добавляет на сцену экземляр element'a.

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

(controller $Instance renderer='PlayerListTextLine' layout=false
    (args entityId="13123")
    (exprs
        (scope
            (bind width "290")
            (bind isAlive "isAlive")
            (bind isSelf "isSelf")
        )
    )
    (bind enabled "isBoolTrue")
)

 

 

  • renderer задаёт элемент, с которым контроллер будет производить операции. Доступен для биндинга.
  • layout отвечает за то, будет ли работать layout система. Значение по умолчанию false
  • args при вызове передаёт в рендерер значение из скоупа, в котором находится.
  • exprs выполняется на стороне рендерера, но имеет доступ к родительскому скоупу. Может содержать выражения и биндинги. Через этот атрибут позволяет слушать в ребенке переменные из родительского скоупа.
  • enabled задаёт выражение для срабатывания контроллера. Контроллер сработает, если выражение == true.
  • trigger задаёт выражение для срабатывания контроллера. Контроллер сработает, если выражение изменит значение.
  • event, аналог enabled, но реагирует на Events

 

В некоторых случаях не требуется выделять отдельный элемент, тогда блоки можно вложить в атрибут (exprs и выставить layout=true у контроллера.

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

(controller $Instance layout=true
    (exprs
        (tf
            (name = 'level')
            (class HeroTitleTextStyle)
            (selectable = false)
            (bind text "parentLevel")
        )
    )
)

 

 

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

(controller $Instance renderer='OwnHealthBar'
       (args _entityId="entityId")
       (bindcall recreate (bind trigger "entityId"))        
)

 

recreate - метод, который пересоздает инстанс

$FxInstance

Временно добавляет на сцену экземпляр элемента, который будет удалён со сцены через «lifetime» секунд.

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

(controller $FxInstance renderer='DamageDangerFX' lifetime=5
    (args data="$event")
    (bindcall create (event "$datahub.getEntity(entityId).damageDanger.evDamage"))
)

 

 

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

(controller $FxInstance renderer='LevelView' lifetime=2
    (args textStyle='HeroTitleTextStyle')
    (exprs
        (scope
            (level = "parentLevel")
            (radius = 40)
        )
    )
    (bindcall create (event "onClick"))
)

 

 

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

(def element LevelView(textStyle:str = 'MainTextStyle') layout=true
    (scope
        (event __onParamChange)
        (var radius:number = 13              
            (dispatch __onParamChange on='evChanged')
        )
        (var color:number = 0xfff2ad
            (dispatch __onParamChange on='evChanged')
        )
  
  
        (var index:number = "$index")
    )
  
    (style
        (bind width "radius * 2")
        (bind height "radius * 2")
        (align = "center|middle")
    )
    (.graphics
        (bindcall clear init=true (event "__onParamChange"))
        (bindcall lineStyle 1 "color" 0.3 init=true watch=false (event "__onParamChange"))
        (bindcall drawCircle "radius" "radius" "radius" init=true watch=false (event "__onParamChange"))
        (bindcall endFill init=true (event "__onParamChange"))
    )
    (scope
        (var level:number = 0)
    )
    (tf
        (name = 'level')
        (bind class "textStyle")
        (bind text "level" init=false)
        (selectable = false)
    )
)

 

 

  • renderer, args, exprs, enabled, layout - поведение аналогично поведению в $Instance контроллере
  • create - метод контроллера который создает экземпляр элемента.  Вызов этого метода можно подписать на событие в scope. 
  • lifetime определяет время жизни элемента на сцене. Если не задано - значение по умолчанию  15 секунд.

$Repeat

Создает указанное число копий рендерера.

(controller $Repeat renderer='MapMarkerItem'
    (bind count "collection.items.length" (event "collection.evAdded"))
    (args size="size" mapScale="mapScale" scaleRatio="scaleRatio")
)

 

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

(scope
    (event onClick)
    (var countRenderers:number = 5)
)
  
(controller $Repeat layout=true
    (bind count "countRenderers")
    (exprs
        (element ButtonPrimary
            (scope
                (label = "'button_' + $index")
            )
            (dispatch onClick args="{index : $index}" on='click')
        )  
    )
  
    (bindcall removeChildAt "$event.index" init=false (event "onClick"))
)

 

  • renderer, args, exprs, enabled, layout - поведение аналогично поведению в $Instance контроллере
  • count задаёт число копий рендерера. Может быть любым expression'ом. В примере выше -- counter равен количеству элементов в коллекции collection.
  • removeChildAt(index) - удаляет со сцены рендерер по index
  • $index - целое число, номер ребенка по порядку от 0 до конечного элемента. У первого созданного элемента будет $index=0 и т.д. Автоматически находится в скоупе ребенка с момента создания.

 

$Animation

Анимирует значения свойств target display object, переменных в scope или стилей.

Доступные методы контроллера  с примерами заполнения параметров

  • play - запуск одной анимации
    Скрытый текст
    
    (play
        duration=1.0  # продолжительность анимации в секундах. Обязательный параметр и должен быть больше ноля.
        to={ alpha:1, y:0, visible:true }  # финальные значения анимации. Обязательный параметр, если не передано имя анимации name(см. ниже), в противном случае пустой по умолчанию.
        from={ alpha:0, y:50, visible:false }  # стартовые значения анимации. Если не указать -- анимация начнется с тех значений, которые находятся в скоупе. Параметр пустой по умолчанию.
        name='AnimX'  # имя заранее объявленной анимации. Например: (def animation AnimX() from={x:0} to={x:300}). Пустое по умолчанию.
        delay=2.0  # указывает задержку перед проигрыванием анимации. По умолчанию равно 0.0.
        easing="Easing.quint_out"  # функция изменения анимации. Параметр пустой по умолчанию (соответсвует Easing.line).
        repeatCount=1  # количество повторений анимаций. Внимание! Параметр задает количество дополнительныйх повторений, т.е. если repeatCount=0, анимация проиграется один раз. -1 - анимация будет проигрываться постоянно. По умолчанию равно 0.
        reverse=false  # условия отыгрывания анимации в обратную сторону, to  from (при условии наличия обоих полей, либо наличии name). По умолчанию равно false.
        callbacks="{  # коллбеки анимаици. По умолчанию коллбеки не заданы.
            onComplete: onCompleteEvent,  # срабатывает, когда анимация закончилась
            onStart: onStartEvent,  # срабатывает, когда анимация стартует
            onRepeat: onRepeatEvent,  # срабатывает каждый раз, когда анимация начинается с начала. В коллбек передается параметр repeatCount - количество оставшихся повторений.
            onUpdate: onUpdateEvent,  # срабатывает каждый раз, когда анимация меняет значение параметра. В коллбек передается dict с текущими значениями параметров переданных в 'to' и 'from'.
        }"
        id='anmId'  # id анимации, по которому ее можно будет остановить через метод stop. По умолчанию id="".
    )

     

    Скрытый текст
    
    (scope
        (var longTapArc:number = 0)
        (controller $Animation
            (bindcall play  duration= 0.5
                            from    = { longTapArc:0 }
                            to      = { longTapArc:360 }
                            (bind enabled "keyState == Key.DOWN")
            )
        )
    )

     

    Скрытый текст
    
    (block
        (visible = "tacticalMap")
        (style 
            (height = 100)
            (width = 100)
            (backgroundColor = C_ALLY)
        )
    
        (controller $Animation
            (bindcall play 
                duration=0.15
                delay="tacticalMap ? 0.1 : 0"
                killAll=true
                easing="Easing.cubic_out" 
                from={ alpha:0, y:50, visible:false } 
                to={ alpha:1, y:0, visible:true } 
                reverse="!tacticalMap"
                (bind trigger "tacticalMap")
            )
        )
    )

     

     

    • bindcall указывает, что запустить анимацию следует в соответствии с условиями, указанными в bind enabledbind trigger или event.
    • duration указывает длительность анимации в секундах.
    • delay указывает задержку перед проигрыванием анимации.
    • from стартовые значения анимации. Если не указать - анимация начнется с тех значений, которые находятся в скоупе.
    • to финальные значения анимации. Обязательное поле.
    • reverse условия отыгрывания анимации в обратную сторону, to → from (при условии наличия обоих полей).
    • trigger условия срабатывания анимации, когда значение условия меняется. Отличие от enabled в том, что enabled срабатвает только когда выражение == toBoolean(true). ВАЖНО! На момент запуска delay -- контроллер уже принял в себя значения всех переменных на всех позициях. Если на момент окончания задержки значения переменных изменились - контроллер об этом не узнает.
    • killAll - свойство, при старте анимации уничтожает все активные анимации у объекта.
  • playSeq - запуск последовательности анимации
    Скрытый текст
    
    (playSeq
        "[  # основной обязательный параметр, без имени, идет первым в списке, задает последовательность анимаций. Синтаксис задания анимаций аналогичный методу play. Доступные параметры: duration, to, from, name, delay, easing, repeatCount, reverse, callbacks
             {duration:1.0, to:{scale:2.0, alpha: 0.5}}, delay: 0.4},
             {duration:2.0, to:{scale:1.0, alpha: 1.0}, callbacks: "{onStart: onAnmStart}"},
             .....
        ]"
        delay=2.0  # указывает задержку перед проигрыванием анимации. По умолчанию равно 0.0.
        repeatCount=1  # количество повторений последовательности анимаций. Внимание! Параметр задает количество дополнительныйх повторений, т.е. если repeatCount=0, последовательность проиграется один раз. -1 - последовательность будет проигрываться постоянно. По умолчанию равно 0.
        callbacks="{  # коллбеки последовательности анимаиций. По умолчанию коллбеки не заданы.
            onComplete: onCompleteEvent,  # срабатывает, когда анимация закончилась
            onStart: onStartEvent,  # срабатывает, когда анимация стартует
            onStartItem: onStartEvent # вызывается, когда стартует элемент последовательности. В коллбек передается параметр itemIndex - индекс стартующей анимации.
            onRepeat: onRepeatEvent,  # срабатывает каждый раз, когда анимация начинается с начала. В коллбек передается параметр repeatCount - количество оставшихся повторений.
        }"
        id='anmId'  # id последовательнсти анимаций, по которому ее можно будет остановить через метод stopSeq. По умолчанию id="".
    )

     

  • stop - остановка анимации
    (stop
        id="anmId"  # id анимации, которую необходимо остановить. Если id не задан, а по умолчанию он не задан, то будут остановлены все анимации, запущенные с помощью этого контроллера.
    )
  • stopSeq - остановка последовательности анимаций
    (stopSeq
        id="anmId"  # id последовательности, которую необходимо остановить. Если id не задан, а по умолчанию он не задан, то будут остановлены все анимации, запущенные с помощью этого контроллера.
    )

Доступные изинги:

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

Easing.line
Easing.elastic_in
Easing.elastic_out
Easing.bounce_in
Easing.bounce_out
Easing.back_in
Easing.back_out
Easing.quad_in
Easing.quad_out
Easing.cubic_in
Easing.cubic_out
Easing.quint_in
Easing.quint_out

 

 

Примеры:

  1. Пример запуска анимации по клику на кнопку и отображение в текстовом блоке изменяющихся значений. Анимация переменной в scope :
    Скрытый текст
    
    (scope
        # Объявить переменную, которую хотим анимировать
        (var animationVariable:number = 0)
      
      
        # Event для вызова метода play
        (event playAnimationEvent)
      
        # Контроллер обязательно должен быть расположен в scope
        (controller $Animation
            (bindcall play
                duration = 10
                from     = "{animationVariable:0}"
                to       = "{animationVariable:360}"
                easing   = "Easing.cubic_out"
                (event "playAnimationEvent")
            )
        )
    )
      
    (tf
        (class HeroTitleYellowTextStyle)
        (bind text "animationVariable")
    )
      
    (element ButtonPrimary
        (scope
            (label = 'Play')
            (dispatch playAnimationEvent on='evBtnLeftClickEvent')
        )
    )

     

     

  2. Пример анимации свойств стилей
    Скрытый текст
    
    (scope
        (event playAnimationEvent)
        (var triggerAnimation:bool = false)
        (bind triggerAnimation "!triggerAnimation" init=false watch=false (event "playAnimationEvent"))
    )
      
    (block
        (style
            (position = "absolute")
            (width = 50)
            (height = 30)
            (top = 100)
            (left = 100)
            (backgroundColor = 0xFFFF0000)
            (alpha = 0)
        )
      
        (controller $Animation
            (bindcall play
                duration=2
                easing="Easing.cubic_out"
                from="{alpha:0, top:100, width: 50, height: 30}"
                to="{ alpha:1, top:200, width: 100, height: 50 }"
                reverse="!triggerAnimation"
                (bind trigger "triggerAnimation")
            )
        )
    )
      
    (element ButtonPrimary
        (scope
            (label = 'Play')
            (dispatch playAnimationEvent on='evBtnLeftClickEvent')
        )
    )

    trigger - условие срабатывания анимации, когда значение условия меняется на противоположное. Отличие от enabled в том, что enabled срабатывает только когда выражение true.

  3. Trigger vs Enabled
    (controller $Animation
            (bindcall play  duration = "HEALTH_ANI_MIN"
                            enabled="isEnabled"
    .....
    )
     
    (controller $Animation
            (bindcall play  duration = "HEALTH_ANI_MIN"
                            trigger="isTarget == 'ally'"
    .....
    )

    trigger - условие срабатывания анимации, когда значение условия меняется на противоположное. Отличие от enabled в том, что enabled срабатывает только когда выражение true.

 

Внимание!

Особенность работы контроллера с параметром delay. Значения анимируемых переменных в параметре to вычитываются контроллером без учета delay. Поэтому если на момент окончания задержки значения переменных изменились контроллер об этом не узнает.

$Sector

Рисует сектор используя flash.display.Graphics target объекта

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

(def element SectorControllerSample() layout=true
    (x = 10)
    (y = 10)
    (scope
        (var _circOffset:number = 30)
        (var _circArc:number = 60)
        (var _circRad:number = 200)
        (var _circInRad:number = 50)
        (var _circColor:number = 0xffff0000)
        (var _circGradient:array = [0xffff0000, 0xffff00ff, 0xffffff00])
        (var _circAlphas:array = [1, 0.5, 0.5])
        (var _circRatios:array = [0, 127, 255])
        (var _lineThickness:number = 10)
        (var _lineColor:number = 0xffffffff)
        (var _lineAlpha:number = 0.5)
    )
  
    (block
        (mc 'flash.display.Sprite'
            (controller $Sector
                (offset="_circOffset")
                (color="_circColor" )
                (arc="_circArc" )
                (radius="_circRad" )
                (colors="_circGradient" )
                (alphas="_circAlphas")
                (ratios="_circRatios")
                (lineThickness="_lineThickness")
                (lineColor="_lineColor")
                (lineAlpha="_lineAlpha")
                (innerRadius="_circInRad")
            )
        )
    )
)

 

 

 

  • Плюс 2

Рассказать о публикации


Ссылка на публикацию
Поделиться на других сайтах
Разработчик
45 публикаций
638 боёв

Element

Объект высшего уровня. Имеет собственное имя, может быть вызван (в том числе извне документа, в котором находится) и переиспользован (с помощью Controllers или прямого объявления). Имеет свой обособленный scope, в который может принимать извне присланные значения. Элемент может быть 2 видов: участвовать в layout (иметь стили) и не участвовать. Это регулируется свойством layout=true или использование алиаса def layout:

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

(def element PlaneMarker() layout=true
    (element PlaneIcon)
)
  
#или
  
#(def layout PlaneMarker()
#    (element PlaneIcon)
#)
  
(def element PlaneIcon()
    (symbol "(isConsumable ? 'catapult': 'fighter') + '_c'"
        (scaleX = 1)
        (scaleY = 1)
    )  
)
(horizontalSlider
      (element "hscroll_bar" "name + 'HorScrlBar'")
)

 

 

 

  • Плюс 1

Рассказать о публикации


Ссылка на публикацию
Поделиться на других сайтах
Разработчик
45 публикаций
638 боёв

Event

Событие - объект который генерируется и рассылается по какому-либо действию пользователя (например клик мыши, нажатие клавиши и т.п.). Для распространения события используется метод dispatch

События объявляются в scope.

(event valChanged)
(event evKilled)
...
(dispatch evKilled args={} dir="EventDirection.DOWN" (event $datahub.getEntity(entityId).health.evKilled))

dir задаёт направление события по иерархии. По умолчанию dispatch отсылает событие только в рамках самого элемента. Чтобы отправить событие в родителя - нужно в dir указать EventDirection.UP. В ребёнка - EventDirection.DOWN. В сиблингов - достаточно просто объявить эвент в нужном сиблигне, а dir можно не указывать. Для dir в hud_replaces заведён dict со значениями. По умолчанию dir=0.

(def constant EventDirection {  NONE:  0,
                                UP:    1,
                                DOWN:  2
})

 

События в unbound могут генерироваться:

  • Из core C++ части. Например в блоке slider генерируется event valueChanged когда изменяется его value.
    (dispatch valChanged on='valueChanged' dir=1)

     

  • Из Scaleform части. Например событие клика по display object'у
    (block
        (style
            (width = 100)
            (height = 100)
            (backgroundColor = 0xff00ff00)
        )
        (bind alpha "0.5" init=false on='click')
    )

Различия использования подписки на события с помощью on и event

Биндинг-конструкции могут подписываться на события двумя способами:

  • Передача имени события в аргумент on.
    (bind eventArgs "$event" init=false on='eventScope')
  • Передача вложенного объекта event
    (trace "$event" init=false (event "eventScope"))

Событие может быть сгенерировано:

  • в scalefom, например событие мыши click или событие клавиатуры keyDown
  • в core c++ части unbound, например блок slider генерирует событие sliderPositionChanged когда изменятся положение ползунка
  • в верстке, т.е. событие объявлено в scope элемента и генерируется в его определении.
    (def element TestView() layout = true entrance=true
        (scope
            (event eventScope)
        )
      
        (element Button
            (dispatch eventScope on='click')
        )
    )

    Но по сути своей это не генерация события, а превращение из события scalefom/core c++ (в данном примере 'click')  в событие скоупа (в данном пример eventScope)

Рассмотрим различия между этими двумя способами

Если событие генерируется в scaleform или в core c++ unbound, то подписаться можно только с использованием аргумента on. 

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

(def element TestView() layout = true entrance=true
    (scope
        (event eventScope)
    )
  
    (block
        (style
            (width = 100px)
            (height = 100px)
            (backgroundColor = 0xffff0000)
        )
        (bind alpha "0.5" init=false on='click')
    )
  
    (video original_widht=1920 original_height=1080
        (style
            (width = 320px)
            (height = 180px)
        )
  
        (source = "R.videos.Logo_All" )
        (trace "$event" init=false on='metaDataChanged')
    )
)

 

 

Если событие объявлено в scop'e элемента, то существует 2 случая подписки в зависимости от расположения подписки. 

  • Подписку в scope можно осуществлять и через on и через event
    Скрытый текст
    
    (def element TestView() layout = true entrance=true
        (scope
            (event eventScope)
      
            (var eventArgs:dict = null)
            (bind eventArgs "$event" init=false (event "eventScope"))
            # (bind eventArgs "$event" init=false on='eventScope')
        )
      
        (element Button
            (scope
                (label = 'dispatch scope event')
            )
            (dispatch eventScope on='click')
        )
      
        (trace "eventArgs" init=false)
    )

     

  • Подписку вне скоупа можно осуществлять только через event
    Скрытый текст
    
    (def element TestView() layout = true entrance=true
        (scope
            (event eventScope)
        )
      
        (element Button
            (scope
                (label = 'dispatch scope event')
            )
            (dispatch eventScope on='click')
        )
      
        (trace "$event" init=false (event "eventScope"))
    )

     

 

Таким образом подписываться через аргумент on можно на те события которые генерирует target-объект

Отдельно рассмотрим случай подписки на события scop'а при создании элемента.

(element Button
    (scope
        (label = 'default text')
        (bind label 'leftClick' init=false on='evBtnLeftClickEvent')
        (bind label 'rightClick' init=false on='evBtnRightClickEvent')
    )
)

События 'evBtnLeftClickEvent' и 'evBtnRightClickEvent' генерируются в определении element'а Button.

Если использовать конструкцию event, то события должны быть объявлены в родительском скоупе

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

(def element TestView() layout = true entrance=true
    (scope
        (event eventScope)
    )
  
    (element Button
        (scope
            (label = 'default text')
            (bind label "'keyCode: ' + $event.keyCode" init=false (event "eventScope"))
        )
    )
  
    (dispatch eventScope on='stageKeyUp')
)

 

 

 

  • Плюс 2

Рассказать о публикации


Ссылка на публикацию
Поделиться на других сайтах
Разработчик
45 публикаций
638 боёв

Функции для вычисляемых выражений

Список глобальных функцией представлен в таблице.

Функция Описание Пример
abs(number) Математический модуль  
ceil(number) Наибольшее цело число от данного  
countdownFormat(numberSeconds, numberOfDigits, isShowMinutes)

Форматирует переданное число секунд в формат min:secongs

Если минут 0, отображается 00

"countdownFormat(125, 0, true)"
floor(number) Наименьшее цело число от данного  
formatFloatingPoint(number, numberOfDigits=1)

Округление дробной части до numberOfDigits знака после запятой. По умолчанию numberOfDigits = 1

Не учитывает региональные настройки формата.

Нет разделителя разрядов.

"formatFloatingPoint(1.193454334123)" # result 1.2

"formatFloatingPoint(0.423456, 3)" # result 0.423

formatSeparator(number)

Группировка целочисленной части на группы по 3 цифры, разделенных пробелами. Округление дробной части до второго знака.

Не учитывает региональные настройки формата.

Целые числа отображаются без дробной части, а дробные - с 2 знаками после запятой.

"formatSeparator(1103569353.789254232)" # result 110 123 123 123.79

Примеры:

999.595 => "999.60"

999.59 => "999.59"

1000.5 => "1 000.50"

999 => "999"

1 999.0 => "1 999"

999.001 => "999.00"

max(x, y) Максимальное из двух чисел. return x > y ? x : y (var test: number  = "max(smth, smth2)")
min(x, y) Минимальное из двух чисел. return x < y ? x : y (var test:number = "min(smth, smth2)")
pow(basis, exponent) Возведение числа basis в степень exponent  
radToGrad(radNumber) Перевод из радиан в градусы  
round(number) Математическое округление до целого числа "round(0.423456)" # 0
subst(str, array_values, dict_values) Подстановка переданных аргументов в плейсхолдеры

"subst('first number is %d, second is %d', [50, 51])"

subst('%(min)d - %(max)d', [], {min:1, max:2})

tan(radNumber) Тангенс угла в радианас  
toLower(str) Преобразует прописные символы в строчные  
toUpper(str) Преобразует строчные символы в прописные  
tr Локализация строк по IDS  

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

  • Плюс 2

Рассказать о публикации


Ссылка на публикацию
Поделиться на других сайтах
Разработчик
45 публикаций
638 боёв

Layout

Unbound имеет layout system, которая занимается позиционированием блоков, расположенных в одном контейнере по определенным параметрам. Для включения layout system используется атрибут layout=true|false определения element'a. Описание element c атрибутом layout=true эквивалентно def layout

Параметры layout'а описываются в style.

Пример:

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

(def element TestView() layout = true
    (block
        (style
            (width = 1024px)
            (height = 768px)
            (backgroundColor = 0xff191711)
            (marginLeft = 200px)
        )
        (tf
            (style
                (textColor = 0xffffffff)
            )
            (text = 'SandBox')
        )
    )
)
  
#or
  
(def layout TestView()
    (block
        (style
            (width = 1024px)
            (height = 768px)
            (backgroundColor = 0xff191711)
            (marginLeft = 200px)
        )
        (tf
            (style
                (textColor = 0xffffffff)
            )
            (text = 'SandBox')
        )
    )
)

 

 

Позиционирование блоков

Layout system'a позиционирует блоки согласно значения свойства position. Position может принимать следующие значения:

  • flow - layout system'а позиционирует вложенные блоки один за другим (положение одного блока зависит от положения предыдущего), по умолчанию position="flow"

  • absolute - layout system'а исключает блок из потока (списка позиционирования).

Для позиционирования блоков относительно друг друга при position="flow" можно использовать следующие свойства стиля:

  • paddingLeft / paddingRight / paddingTop / paddingBottom - отступ слева / справа / сверху/ снизу для вложенных блоков.
    Скрытый текст
    
    (def element TestView() layout = true
        (style
            (width = 1024px) # ширина элемента
            (height = 768px) # высота элемента
            (backgroundColor = 0xff191711)
            (paddingLeft = 20px) # отступ слева в пикселях для вложенного блока
            (paddingTop = 10%)   # отступ сверху в процентах от текущей высоты для вложенного блока
        )
      
      
        # Координаты вложенного блока равны x:20px (paddingLeft родительского блока), y: 768 * 0.1 = 76.8 (10% от высоты родительского блока)  
        (block
            (style
                (width = 100px)
                (height = 100px)
                (backgroundColor = 0xff0000ff)
            )
        )
          
        # Координаты вложенного блока равны x:20px (paddingLeft родительского блока), y: 76.8 (y-координата блока выше) + 100 (высота блока выше) = 176.8
        (block
            (style
                (width = 100px)
                (height = 100px)
                (backgroundColor = 0xffff0000)
            )
        )
    )

     

    Если нужно задать сразу все 4 параметра можно использовать следующую конструкцию:

    (style
        (padding = [5, 10, 15, 20]) # [paddingLeft, paddingTop, paddingRight, paddingBottom]
    )

     

  • marginLeft / marginRight / marginTop / marginBottom - отступ слева / справа / сверху/ снизу для текущего блока

    Скрытый текст
    
    (def element TestView() layout = true
        (style
            (width = 1024px)
            (height = 768px)
            (backgroundColor = 0xff191711)
        )
          
        # Координаты блока x:10px (marginLeft текущего блока), y:20px (marginTop текущего блока)
        (block
            (style
                (width = 100px)
                (height = 100px)
                (backgroundColor = 0xff0000ff)
                (marginLeft = 10px)
                (marginTop = 20px)
            )
        )
      
        # Координаты блока x:20px (marginLeft текущего блока), y:20px (y-координата блока выше) + 100px (высота блока выше) + 5px (margineTop текущего блока) = 125px
        (block
            (style
                (width = 50px)
                (height = 50px)
                (backgroundColor = 0xffff0000)
                (marginLeft = 20px)
                (marginTop = 5px)
            )
        )
    )

     

    Если нужно задать сразу все 4 параметра можно использовать следующую конструкцию

    (style
        (margin = [5, 10, 15, 20]) # [marginLeft, marginTop, marginright, bottom]
    )
    Примечание:
    Главное отличие margins от paddings в том, что параметры paddings устанавливаются в родительском блоке и влияют на позиционирование вложенных блоков. Margins же влияют на позиционирование текущего блока.

     

  • gap, hgap, vgap - отступ по горизонтали / вертикали между каждым вложенным блоком

    Скрытый текст
    
    (def element TestView() layout = true
        (style
            (width = 1024px)
            (height = 768px)
            (backgroundColor = 0xff191711)
            (vgap = 20px)
            (paddingTop = 40px)
            (paddingLeft = 40px)
        )
          
        # Координаты блока x:40px (paddingLeft родительского блока), y: 40px (paddingTop родительского блока)
        (block
            (style
                (width = 20px)
                (height = 20px)
                (backgroundColor = 0xffff0000)
            )
        )
      
        # Координаты блока x:40px (paddingLeft родительского блока), y: 40px (y-координата блока выше) + 20px (высота блока выше) + 20px (vgap) = 80px
        (block
            (style
                (width = 30px)
                (height = 30px)
                (backgroundColor = 0xff00ff00)
            )
        )
          
        # Координаты блока x:40px (paddingLeft родительского блока), y: 80px (y-координата блока выше) + 30px (высота блока выше) + 20px (vgap) = 130px
        (block
            (style
                (width = 40px)
                (height = 40px)
                (backgroundColor = 0xff0000ff)
            )
        )
    )

     

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

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

    Скрытый текст
    
    (def element TestView() layout = true
        (style
            (width = 1024px)
            (height = 768px)
            (backgroundColor = 0xff191711)
            (paddingLeft = 100px)
            (paddingTop = 100px)
        )
          
        # Блок в котором layout system располагает элементы по горизонтали друг за другом, если следующий блок не влазит, то блок переносится на ниже.
        # Ширина блока 80px, суммарная ширина всех вложенных блоков 20px + 30px + 40px = 90px, поэтому третий блок будет расположен ниже остальных.
        # Параметр gap=10px поэтому, расстояние между блоками по вертикали и горизонтали будет 10px
        (htile
            (style
                (width = 80px)
                (gap = 10px)
                (backgroundColor = 0x44ffffff)
            )
            (block
                (style
                    (width = 20px)
                    (height = 20px)
                    (backgroundColor = 0xffff0000)
                )
            )
      
            (block
                (style
                    (width = 30px)
                    (height = 30px)
                    (backgroundColor = 0xff00ff00)
                )
            )
      
            (block
                (style
                    (width = 40px)
                    (height = 40px)
                    (backgroundColor = 0xff0000ff)
                )
            )
        )
    )

     

    В результате получим:

    unbound2_htile_gap.PNG

  • align - позиционирование всех вложенных блоков как единого блока. Может принимать следующие значения: 
    left  - выравнивание контента по левому краю
    right - выравнивание контента по правому краю
    top - выравнивание контента по верхнему краю 
    bottom - выравнивание контента по нижнему краю
    center - выравнивание контента по центру по горизонтали
    middle - выравнивание контента по центру по вертикали

    Пример выравнивания блока по левому краю:

    Скрытый текст
    
    (def element TestView() layout = true
        (style
            (width = 1024px)
            (height = 768px)
            (backgroundColor = 0xff191711)
            (align = "left")
        )
          
        (block
            (style
                (width = 20px)
                (height = 20px)
                (backgroundColor = 0xffff0000)
            )
        )
    )

     

    Можно использовать несколько значений одновременно разделенных "|". Например если требуется выровнять по центру и по вертикали и по горизонтали. Пример:

    (align = "center | middle")

     

Для позиционирования блоков при position="absolute" вышеперечисленные свойства не применяются, нужно использовать следющие:

  • left / right / top / bottom - отступ от левого / правого / верхнего / нижнего края контейнера, в котором находится блок

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

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

(def element TestView() layout = true
    (style
        (width = 400px)
        (height = 200px)
        (backgroundColor = 0xff191711)
        (align = "center|middle")
    )
  
    (block
        (style
            (width = 20px)
            (height = 20px)
            (backgroundColor = 0xffff0000)
        )
    )
  
    # Удаляем из списка позиционирования layout system. Блок имеет координаты x:40px (параметр left текущего блока), y:50px (параметр top текущего блока)
    (block
        (style
            (position = "absolute")
            (width = 30px)
            (height = 30px)
            (left = 40px)
            (top = 50px)
            (backgroundColor = 0xff00ff00)
        )
    )
  
    (block
        (style
            (width = 40px)
            (height = 40px)
            (backgroundColor = 0xff0000ff)
        )
    )
)

 

 

В результате получим

unbound2_position_absolute.PNG

 

  • hcenter  / vcenter- отступ от центра по горизонтали / по вертикали
    Скрытый текст
    
    (def element TestView() layout = true
        (style
            (width = 400px)
            (height = 200px)
            (backgroundColor = 0xff191711)
        )
      
        (block
            (style
                (width = 20px)
                (height = 20px)
                (backgroundColor = 0xffff0000)
            )
        )
      
        # Удаляем из списка позиционирования layout system. Отступы от центра по вертикали и горизонтали равны 0, поэтому блок расположен точно по центру
        (block
            (style
                (position = "absolute")
                (width = 30px)
                (height = 30px)
                (hcenter = 0px)
                (vcenter = 0px)
                (backgroundColor = 0xff00ff00)
            )
        )
      
        (block
            (style
                (width = 40px)
                (height = 40px)
                (backgroundColor = 0xff0000ff)
            )
        )
    )

     

     

В результате получим

unbound2_position_absolute_center.png

 

Примечание:

Размер блока у которого параметр position="flow" равны размерам вложенных в него блоков.

Размер блока у которого параметр position="absolute" по умолчанию равны 0.

 

  • Плюс 2

Рассказать о публикации


Ссылка на публикацию
Поделиться на других сайтах
Разработчик
45 публикаций
638 боёв

Macro

Макрос - именованный параметризированный фрагмент верстки, который место вызова заменяет на содержимое макроса на этапе разбора. Позволяет переиспользовать фрагмент верстки несколько раз.

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

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

# Определение макроса
(def macro trace(expr:expression)
    (block
        (style
            (backgroundColor = "0x50000000")
        )
        (tf
        (class $TextHUD16Bold)
            (style (textColor = "0xFFFF00FF"))
            (autoSize='left')
            (bind text "expr")
        )
    )
)

 

 

После того как макрос был определен, его можно вызывать в любом месте.

Пример:

# Вызов макроса
(macro trace expr="variable")

Этот механизм используется для автогенерации scope, который будет связан с python.

Пример:

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

# This file was generated using wgpygen from the templates/macro.unbound.jinja2 template.
# Please, don't edit this file manually.
(def macro ButtonModel()
    (scope
        (event onClicked)
  
        (var rawLabel:str = '')
        (var label:str = '')
        (var isEnabled:bool = true)
        (var icon:gfx = null)
        (var iconAfterText:bool = true)
    )
)

 

 

  • Плюс 1

Рассказать о публикации


Ссылка на публикацию
Поделиться на других сайтах
Разработчик
45 публикаций
638 боёв

Scope

Scope - это хранилище данных, находящихся в распоряжении элемента. Не наследуетcя от родительских элементов. В разметке используется строгая типизация - все используемые переменные и их типы, а также events должны быть объявлены до момента использования в вычисляемом выражении, либо переданы из внешнего scope при вызове элемента.

Может содержать

  • переменные (var)
  • константы (const)
  • объявление события
  • вызов bind
  • dispatch события
  • $Animation контроллер для анимации переменных в scope

 

Пример:

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

# Объявление элемента с аргументом level
(def element LevelView(textStyle:str = 'MainTextStyle') layout=true
    (scope
        # Объявление эвента
        (event __onParamChange)
  
  
        # Объявление переменных со значением по умолчанию и dispatch события '__onParamChange' на изменение значения.
        # Событие 'evChanged' - внутреннее события core unbound.
        (var radius:number = 13              
            (dispatch __onParamChange on='evChanged')
        )
        (var color:number = 0xfff2ad
            (dispatch __onParamChange on='evChanged')
        )
    )
  
  
    (style
        (bind width "radius * 2")
        (bind height "radius * 2")
        (align = "center|middle")
    )
    (.graphics
        (bindcall clear init=true (event "__onParamChange"))
        (bindcall lineStyle 1 "color" 0.3 init=true watch=false (event "__onParamChange"))
        (bindcall drawCircle "radius" "radius" "radius" init=true watch=false (event "__onParamChange"))
        (bindcall endFill init=true (event "__onParamChange"))
    )
    (scope
        # Объявление переменной со значением по умолчанию
        (var level:number = 0)
    )
    (tf
        (name = 'level')
        (class "textStyle")
        (bind text "level" init=false)
        (selectable = false)
    )
)

 

 

Scope можно описывать в разных частях элемента (пример: переменная level). В итоге при исполнении все части объединятся в один scope. Отображение содержимого scope:

(trace "$scope")

UBTRACE: Scope:
        Events: __onParamChange
        Vars:
                color : 1.67738e+07
                level : 0
                radius : 13

Примечание:

Переменные, переданные в элемент как аргументы определения, НЕ попадают в scope. В примере выше переменной textStyle нет в scope.

 

При создании экземпляра элемента можно изменять его значения переменных scope:

Создание экземляра элемента

(element LevelView 'PromoTitleTextStyle'
    (scope
        (level = 10)
        (radius = 40)
    )
)

Переменные scope при вызове элемента можно синхронизировать с переменными родительского scope

Создание экземляра элемента

(scope
    (var parentLevel:number = 15)
)
  
(element LevelView 'PromoTitleTextStyle'
    (scope
        (bind level "parentLevel")
    )
)

 

 

  • Плюс 2

Рассказать о публикации


Ссылка на публикацию
Поделиться на других сайтах
Разработчик
45 публикаций
638 боёв

toplevel def

(def) или Definition

Конструкция (def object Name)  позволяет объявить глобальный объект, доступный для вызова из всей области в рамках рабочих каталогов.

 

Внимание!

Имя объекта должно быть уникальным. Не важно в одном или разных файлах эти объявления сделаны. Иначе будет ошибка и только первый объект будет создан

(def element TestView())
  
(def element TestView())
  
  
ERROR: Duplicate element definition: 'TestView'

 

  • Плюс 1

Рассказать о публикации


Ссылка на публикацию
Поделиться на других сайтах
Разработчик
45 публикаций
638 боёв

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.

Имеет 2 реализации: SliderNormalH (горизонтальный) и  SliderNormalV (вертикальный).

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

  • 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')
    )
)

 

 

 

  • Плюс 1

Рассказать о публикации


Ссылка на публикацию
Поделиться на других сайтах
Разработчик
45 публикаций
638 боёв

Styles and CSS

Общее описание

Блоки поддерживают настройку параметров layout'а через style. Каждый блок обладает своим набором параметров стиля.

Настройка стиля у блока tf:

(tf
    (style
        (fontSize = 32)
        (textColor = 0xFFFFFFFF)
    )
    (text = 'Hello world!!!')
)

Настройка стиля у блока block:

(block
    (style
        (backgroundColor = 0xffff0000)
        (width = 100px)
        (height = 100px)
    )
)

Настройка стиля у блока mc:

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

(mc 'Window_BG'
    (style
        (width=100)
        (height=50)
        ...
    )
)

 

 

Стили можно описывать в отдельном определении. И передавать как параметр в блок в свойство class.

(def element TestView() layout = true
    (block
        (class BlockStyle)
    )
)
  
(def css BlockStyle()
    (backgroundColor = 0xffff0000)
    (width = 100px)
    (height = 100px)
)

Значение для свойства class может быть вычислено в выражении, таким образом можно стилизовать блоки в зависимости от условий.

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

(def element TestView() layout = true
    (scope
        (event onClick)
        (var switcher:bool = false)
        (bind switcher "!switcher" init=false watch=false (event "onClick"))
    )
      
    (block
        (bind class "switcher ? 'BlockStyle_1' : 'BlockStyle_2'")
    )
  
    (element ButtonPrimary
        (scope
            (label = 'change style')
        )
        (dispatch onClick on='click')
    )
)
  
(def css BlockStyle_1()
    (backgroundColor = 0xffff0000)
    (width = 100px)
    (height = 100px)
)
  
(def css BlockStyle_2()
    (backgroundColor = 0xff00ff00)
    (width = 120px)
    (height = 130px)
    (alpha = 0.5)
)

 

 

Если к блоку будет применено несколько стилей с одинаковыми свойствами, то последующие будут перезаписывать значения предыдущих. Важен порядок применения.

(block
    (class BlockStyle_1)
    (class BlockStyle_2)
)

Примечание:

Но если изменить свойство стиля непосредственно в style и передать css как параметр с тем же свойством. То порядок расположения применения стилей не важен. Блок style выполнится последним.

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

(def element TestView() layout = true
    (block
        (style
            (backgroundColor = 0xffff0000)
            (width = 100px)
            (height = 100px)
        )
        (class BlockStyle_2)
    )
)
  
(def css BlockStyle_2()
    (backgroundColor = 0xff00ff00)
    (width = 120px)
    (height = 130px)
    (alpha = 0.5)
)

 

 

Таблица стилей

Виды блоков:

  • базовые блоки: tf, mc, image, text_input.
  • контейнер-блоки (наследуются от базового блока): block (и все алиасы hblock, vtile, gtile, reverse, hreverse), list, view_holder, slider, scroll_bar, progress. scrollArea.

 

свойство аналог css кто поддерживает свойство принимаемые значения пример возможных значений
width width все блоки number, %, px 10px; 10%
minWidth min-width все блоки number, %, px 100px; 50%
maxWidth max-width все блоки number, %, px 100px; 50%
height height все блоки number, %, px 10px; 10%
minHeight min-height все блоки number, %, px 100px; 50%
maxHeight max-height все блоки number, %, px 100px; 50%
position position все блоки absolute, flow absolute
left left все блоки number, %, px 10px; 10%
right right все блоки number, %, px 10px; 10%
top top все блоки number, %, px 10px; 10%
bottom bottom все блоки number, %, px 10px; 10%
center смещение от центра все блоки number, %, px -170
hcenter смещение от центра по горизонтали все блоки number, %, px 10px; 10%
vcenter смещение от центра по вертикали все блоки number, %, px 10px; 10%
marginLeft margin-left все блоки number, %, px 10px
marginRight margin-right все блоки number, %, px 10px
marginTop margin-top все блоки number, %, px 10px
marginBottom margin-bottom все блоки number, %, px 10px
paddingLeft padding-left контейнер-блоки number, %, px 10px
paddingRight padding-right контейнер-блоки number, %, px 10px
paddingTop padding-top контейнер-блоки number, %, px 10px
paddingBottom padding-bottom контейнер-блоки number, %, px 10px
padding padding контейнер-блоки number, %, px 10px
backgroundColor background-color контейнер-блоки 0xARGB 0x1000ff00
backgroundImage background-image контейнер-блоки str, 'url: {url}', 'bitmap: {linkage}', 'symbol: {linkage}' backgroundImage = 'url:..\icons\ico.png'
backgroundSize

background-size

background-repeat

контейнер-блоки fill; crop; cover; repeat; autosize backgroundSize = "crop"
flow flex-direction контейнер-блоки Flow.HORISONTAL, Flow.VERTICAL, Flow.TILE_HORIZONTAL, Flow.TILE_VERTICAL flow = "Flow.HORISONTAL"
align

justify-content

align-items

контейнер-блоки left, right, bottom, top, center, middle align = "middle|right"
alpha opacity все блоки number от 0 до 1 1; 0; 0.4
fontSize font-size tf number 36
leading междустрочный интервал tf number  
letterSpacing letter-spacing tf number 2
fontFamily font-family tf str  
textColor color tf 0xRGB 0xCFC7A8
textAlign text-align tf left; right; center textAlign = "center"
multiline white-space tf bool true; false
ubScaleX transform: scaleX() все блоки number

изменяет scale блока по горизонтали

1.25

ubScaleY transform: scaleY() все блоки number

изменяет scale блока по вертикали

1.25

rotation поворот блока если его позиция absolute все блоки с позицией absolute number (значения угла поворота в градусах)
(style
    (rotation = 30)
)
pivotX

нулевая точка по X

используется для поворота, скейла, абсолютной позиции

все блоки с позицией absolute number, %, px
(style
    (pivotX = 50%)
)
или 
(style
    (pivotX = 100px)
)
pivotY

нулевая точка по Y

используется для поворота, скейла, абсолютной позиции

все блоки с позицией absolute number, %, px
(style
    (pivotY = 10%)
)
или 
(style
    (pivotY = 20px)
)
scaleX

масштаб по оси X

может быть отрицательным, применяется к блоку и его чайлдам

все блоки double

(style

    (scaleX = 1.2)
)
scaleY

масштаб по оси Y

может быть отрицательным, применяется к блоку и его чайлдам

все блоки double

(style

    (scaleY = -1.0)
)

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

BackgroundSize

(def element NationFlagsSmall () layout=true
    (style
        (bind backgroundImage "'url:../nation_flags/small/flag_USA.png'" init=false)
        (backgroundSize = "fill")
        (width = 117)
        (height = 72)
    )
)
  • cover - растягиваем текстуру по размеру контейнера с сохранением пропорций текстуры, чтобы она заполняла всю площадь, с обрезанием текстуры за пределами контейнера.
  • crop - обрезаем изображение по размеру контейнера.
  • fill - растягиваем изображение по размеру контейнера без сохранения пропорций.
  • align - позиционируем изображение по центру контейнера с обрезанием текстуры за пределами контейнера.

 

 

  • Плюс 1

Рассказать о публикации


Ссылка на публикацию
Поделиться на других сайтах
Разработчик
45 публикаций
638 боёв

CSS Tips and Tricks

Использование объекта стилей (аналог css-классов)

Создание объекта стилей:

(def css SomeStyleObject()
    (position = "absolute")
    (width = 100%)
    (height = 100%)
)

Вызов:

(block
    (class SomeStyleObject)
)

Пример реализации псевдокласса hover

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

(def element SomeElement() layout=true
    (scope
        # Объявляем ивенты:
        (event evBtnOverEvent)
        (event evBtnOutEvent)
        ...
    )
    ...
    # Привязываем ивенты:
    (dispatch evBtnOverEvent args="{}" on=rollOver)
    (dispatch evBtnOutEvent args="{}" on=rollOut)
    ...
    (block
        (style
            # Привязываем изменение стилей к ивентам:
            (bind alpha 1 (event "evBtnOverEvent"))
            (bind alpha 0.7 (event "evBtnOutEvent"))
        )
    )
)

 

 

Срабарывание ховера при наведении на конкретную область, а не на весь блок

Если нужно задать определенныую область в качестве hitArea, то добавьте block с name='hoverArea' и передайте имя блока в свойство hitArea элемента parentElement с помощью объекта $target.

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

(def element parentElement() layout=true
    (style
        (width = 100px)
        (height = 100px)
        ...
    )
  
  
    (block
        (name = 'hoverArea')
        (style
            (width = 50px)
            (height = 50px)
            ...
        )
    )
    (hitArea = "$target.hoverArea")
    # Ховер на родительском блоке отработает только при наведении на 'hoverArea'
)

 

 

Изменение стилей в зависимости от ширины/высоты экрана (аналог медаизапросов)

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

(def element SomeElement() layout=true
    (scope
        # Записываем значение высоты экрана в переменную
        (var viewSizeHeight:number = "viewSize.height")
        (bind viewSizeHeight "viewSize.height" (event "viewResized"))
    )
    (style
        ...
        # Делаем проверку и задаём нужное значение у свойства
        (bind bottom 0 (bind enabled "viewSizeHeight < 800"))
        (bind bottom 27px (bind enabled "viewSizeHeight > 800"))
    )
)

 

 

 

  • Плюс 1

Рассказать о публикации


Ссылка на публикацию
Поделиться на других сайтах
Гость
Эта тема закрыта для публикации новых ответов.

×