[UB] Документация по Unbound framework

MedvedevTD · 10 сен 2018, 07:50:44

Байндинги

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

Объявляются байндинги так: (bind %binding_name% "binding_expression1; binding_expression2; ..."). Синтаксис binding expressions - это ограниченное подмножество синтаксиса JS / AS3 - поддерживаются строки, числа, true, false, null, арифметические, логические операции, операторы сравнения, обращения к элементам массива через [], обращения к свойствам объекта через . и тернарный оператор. Вычисляются binding expressions относительно текущего scope (т.е. "player.name" на самом деле есть "scope.player.name").

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

public class NewWindowController extends UbController

{

public var gameInfoHolder:GameInfoHolder;

override public function init(... params):void

{

scope.playerName = ... // grab player name from GameInfoHolder

}

Для того, чтобы контроллер не обрезался линкером (or whatever this thing is called in SWF's compilation), в главном классе окна следует импортировать его и объявить приватную переменную соответствующего типа.

При инстанциации в контроллеры инжектятся нужные зависимости - фреймворк делает это для каждого публичного поля. Все публичные методы контроллера импортируются в scope, к которому он привязывается.

Контроллер можно объявить так:

(bind controller "lesta.dialogs.new_window.NewWindowController; arg1; arg2; ...")

Вычисленные arg1, arg2, arg3, ... передаются в метод init контроллера.

Часто используемые контроллеры

Показать содержимое

EntitySingletonController

Создаёт в scope ссылку на синглтон (объект с данными, существующий в единственном экземпляре) из GameInfoHolder и обновляет scope при обновлении данных в этом синглтоне.

Единственный аргумент - id синглтона.

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

(bind controller "lesta.dialogs.controllers.EntitySingletonController; 'serverState' ")

После чего в scope станет доступно свойство serverState - это объект класса lesta.structs.ServerState с единственным свойством "hasFreePreBattles".

Иногда в одном и том же элементе данные из синглтона могут требоваться не всегда. Например, в кнопке выбора типа боя требуются данные об отряде только если это кнопка тренировочной комнаты. Она должна быть недоступна если игрок в отряде. Состояние кнопок случайного и кооперативного боя от отряда не зависит. В этом случае вместо id синглтона можно передать null - тогда импорта данных и подписки на их обновление не произойдёт.

В случае с кнопкой выбора боя это будет выглядеть так:

(bind controller "lesta.dialogs.controllers.EntitySingletonController; type == BattleTypes.TRAINING_BATTLE ? 'divisionData' : null")

CollectionController

Создаёт в scope ссылку на коллекцию или один элемент коллекции из GameInfoHolder и обновляет scope при обновлении этой коллекции. Поведение зависит от количества переданных аргументов.

Импорт всей коллекции.

(bind controller "lesta.dialogs.controllers.CollectionController; 'collection_id'; 'scope_key'")

Создаёт в scope свойство "scope_key" со значением в виде массива всех элементов коллекции 'collection_id'.

Импорт одного элемента коллекции.

(bind controller "lesta.dialogs.controllers.CollectionController; 'collection_id'; 'element_id'; 'scope_key'")

Создаёт в scope свойство "scope_key" со значением в виде элемента с id element_id' из коллекции 'collection_id'.

Фильтрация коллекции.

(bind controller "lesta.dialogs.controllers.CollectionController; 'collection_id'; 'property_name'; 'required_value'; 'scope_key'")

Создаёт в scope свойство "scope_key" со значением в виде массива тех элементов коллекции 'collection_id', у которых свойство 'property_name' равно 'required_value'

MatroseFuchs · 14 дек 2018, 08:26:17

Список доступных байндингов

UbChildBinding

Показать содержимое

(bind child "someExpression; 'elementName0'; 'elementName1'; ..."

Определяет дочерний display object блока. Выражение someExpression (обычно это просто поле) вычисляет относительно скоупа индекс. По индексу из elementClass0, elementClass1, etc (не забудьте заключить имена в одинарные кавычки!) выбирается класс сына, после чего тот инстанциируется фреймворком и прикрепляется к элементу. В байндингах сына становятся доступными свойства скоупа родителя посредством обращения к $parent.

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

(bind child "someExpression; {scopeKey : value, scopeKey : value}; 'elementName0'; 'elementName1'; ..."

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

(bind child "someExpression; {scopeKey : value, scopeKey : value}; {key1: 'elementName0', key2: 'elementName1'}")

или

(bind child "someExpression; {key1: 'elementName0', key2: 'elementName0'}")

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

(bind child

"reward.type; {subtype : reward.subtype, amount : reward.amount}; {Ship: 'ShipRewardElement', Exterior: 'ExteriorRewardElement', Resource: 'ResourceRewardElement'}"

)

Где в reward.type лежит строка "Ship", "Exterior" или "Resource"

UbInstanceBinding

Показать содержимое

UbEventBinding

Показать содержимое

UbSyncBinding

Показать содержимое

UbRepeatBinding

Показать содержимое

UbGeneratorBinding

Показать содержимое

UbDraggableBinding

Показать содержимое

UbClikListBinding

Показать содержимое

UbStyleBinding

Показать содержимое

UbStyleClassBinding

Показать содержимое

UbAppearBinding

Показать содержимое

UbTransitionBinding

Показать содержимое

UbTooltipBinding

Показать содержимое

UbSequenceBinding

Показать содержимое

UbPropertyBinding

Показать содержимое

UBVariablesBinding

Показать содержимое

UbCatchEventBinding

Показать содержимое

UbDispatchBinding

Показать содержимое

UbDispatchDelayResetBinding

Показать содержимое

UbChangeDispatchBinding

Показать содержимое

UbCountdownBinding

Показать содержимое

Байндинг для визуализации текста обратного отсчёта.

(bind countdown "server_time_stamp; 'scope_field'; format")

Байндинг вычисляет время, оставшееся до момента server_time_stamp. Значение server_time_stamp - момент в серверном времени, в секундах, в формате Unix Timestamp. Байндинг пишет текущее значение отсчёта в поле scope_field строкой, в формате из параметра format. Если format не указан, пишет в HH:MM:SS.

Поддерживаемые форматы (регистр важен):

yyyy - год полностью

yy - год, последние 2 цифры

M - месяц, (1 или 2 цифры)

MM - месяц, всегда 2 цифры

d - день, (1 или 2 цифры)

dd - день, всегда 2 цифры

H - часы, (1 или 2 цифры)

HH -часы, всегда 2 цифры

m - минуты, (1 или 2 цифры)

mm - минуты, всегда 2 цифры

s - секунды, (1 или 2 цифры)

ss - секунды, всегда 2 цифры

Также в качестве параметра format можно указать 'HIGHEST'. Тогда будет выводить только одно число разницы во времени, наивысшее начиная с месяца, с округлением в ближайшую сторону, с указанием размерности. Например, если осталось 4 дня, 21 час, 10 минут, то выведет "5 дн.", если 2 часа 20 минут - то "2 ч.", если 45 минут 40 секунд - то "46 мин."

Байндинг учитывает разницу серверного и клиентского времени. Для стабильной работы НЕ требуются какие либо апдейты.

Не рекомендуется использовать (bind text "scope_field") для отображения строки обратного отсчёта, так как это приводит к ежесекундным обновлениям трансформаций блоков (часто лавинообразным) и трате ресурса производительности. По возможности следует использовать (bind pureText "scope_field") - это позволяет установить значения текстового поля, избежав обновления трансформаций блока.

UbClockBinding

Показать содержимое

UbContainsBinding

Показать содержимое

Проверяет, содержит ли массив или словарь элементы, соответствующие заданному условию.

(bind contains "collection; condition; 'resultFieldName'; returnIndex; listOfPropertiesToView")

collection - массив или словарь, в котором осуществляется поиск

condition - условие

resultFieldName - строка, задающая имя поля, в которое будет записан результат

returnIndex - необязательный четвёртый параметр. По-умолчанию false. Если передать true - то вместо true/false будет записывать в scope индекс первого удовлетворяющего требованиям элемента.

Байндинг производит обход элементов collection и проверяет выполнение условия condition на каждом элементе. Если условие принимает значение true хотя бы на одном элементе, то в поле resultFieldName записывается значение true , в противном случае - false.

Обратиться к текущему элементу итерации можно посредством идентификатора $item.

(bind controller "lesta.dialogs.controllers.EntitySingletonController; 'exteriorConfigSingleton'")

...

# Проверяем, содержит ли словарь _exteriors вечные камуфляжи. Результат проверки записываем в поле _hasInstalledPermoflages текущего объекта scope.

# _exteriors содержит элементы PlayerShipInfoExterior вида {id:String, goldAutorecharge:Boolean}

# exteriorConfigSingleton.config содержит конфигурации экстерьеров ExteriorConfig вида {..., type:String, ..., isPermanent:Boolean, ...}

# $item указывает на текущий элемент PlayerShipInfoExterior

# по $item.id находим конфигурацию экстерьера в exteriorConfigSingleton.config и проверяем значения полей конфигурации type и isPermanent

(bind contains

"_exteriors; (exteriorConfigSingleton.config[$item.id].type == ExteriorTypes.CAMOUFLAGE) && (exteriorConfigSingleton.config[$item.id].isPermanent); '_hasInstalledPermoflages'"

)

UbFileBinding

Показать содержимое

UbEventSequenceBinding

Показать содержимое

UbTimeFormatBinding

Показать содержимое

UbRestrictFeedbackBinding

Показать содержимое

UbIndexOfBinding

Показать содержимое

UBAccountLevelBinding

Показать содержимое

(bind feature "param; event")

Связывает элемент интерфейса с ревардами\анлоками, получаемыми при достижении определенного уровня

param - если элемент добавляется посредством repeat binding, то поле в data, обозначающее номер фичи для этого элемента, иначе номер фичи
event - событие, по которому из элеемента удаляеся значок isNew

Примеры (bind feature "3; 'click'") - обычный элемент, (bind feature "'featureId'; 'click'") - элемент списка

Фичи и их индексы:

															BATTLE_TUTORIAL  = 0x00000001
														
															BATTLE_COOP      = 0x00000002 feature_1
														
															BATTLE_JUNIOR    = 0x00000004
														
															BATTLE_SENIOR    = 0x00000008 feature_3
														
															RESEARCH_USE     = 0x00000010
														
															FREE_EXP_USE     = 0x00000020 feature_5
														
															FREE_EXP_TRANSIT = 0x00000040
														
															SKILL_TREE_USE   = 0x00000080
														
															DAILYQUESTS_USE  = 0x00000100 feature_8
														
															SSE_USE          = 0x00000200 feature_9
														
															GOLD_USE         = 0x00000400
														
															CHAT_USE         = 0x00000800
														
															MODERNIZATIONS   = 0x00001000 feature_12
														
															CREWS            = 0x00002000 feature_13
														
															EXT_SIGNALS      = 0x00004000 feature_14
														
															EXT_CAMOUFLAGE   = 0x00008000 feature_15
														
															RANK_BATTLES     = 0x00010000 feature_16
														
															NATIONS_TREE     = 0x00020000 feature_17
														
															SSE              = 0x00040000
														
															CLUBS            = 0x00080000 feature_19
														
															ARMOR_VISIBLE    = 0x00100000

SFMRequestBinding и SFMActionBinding

Показать содержимое

FocusBinding

Показать содержимое

InputMappingBinding

Показать содержимое

UbSubstituteBinding

Показать содержимое

(bind substitute "<imageOffset>; <substitutionMap>; <sourceText>; <prefix>")

Биндинг который заменяет подстроки на картинки в текстовых полях.

Параметры:

ВАЖНО В случае использования биндинга запрещено использовать bind text.

ВАЖНО На один текстовый блок может быть только один bind substitute

<imageOffset> - смещение картинки по вертикали относительно бейзлайна текста;

<substitutionMap> - необязательный параметр в виде

														{
													
														    'key1':'icon_bitmap_1',
													
														    'key2':'icon_bitmap_2'
													
														}

задающий соответствие подстроки в тексте определенной картинке

ВАЖНО Для substitution могут быть использованы ТОЛЬКО Bitmap - статические картинки. Попытка использовать Shape или MovieClip будет приводить к падению.

<soureText> - исходный текст, в который будут подставляться картинки.

<prefix> - строка, которая добавляется в конец тегов командмаппинга перед получением картинки по ключу.

Примеры:

Заменить все упоминания кнопок на картинки, со смещением 5 по вертикали:

(bind substitute "5; null; 'Press [KEY_LEFTMOUSE]'")

Подставить вместо текста "[DOUBLECLK]" иконку двойного нажатия мышкой

(bind substitute "5; {'[DOUBLECLK]':'[LEFTMOUSE_DOUBLE]'}; _externalText")

UbSubstituteBinding

Показать содержимое

(bind soundOn "event; sound_name[; set_name]")

Связывает события элемента интерфейса или скоупа со проигрыванием звука.

event - событие, по которому должен проигрываться звук;
sound_name - имя звука из пресета;
set_name- имя soundSet, из которого выбирается звук, по умолчанию используется soundSet из текущего компонента если он UbBlock. Параметр является необязательным только если биндинг относится к UbBlock, иначе является обязательным и будет вызывать падения если параметр не задан;

Имена звуков, которые вызываются автоматически по событиям интерфейса:

Sound	Action	UIComponent	UIButton	UbBlock
State события
show	Visible -> true	Y	Y	Y
hide	Visible -> false	Y	Y	Y
Мышиные события
out	mouse out		Y	Y
click	mouse button up over control		Y	Y
over	mouse over		Y	Y
press	mouse button down		Y	Y
select	custom logic		Y
unselect	custom logic		Y
Прочие события
press_hotkey	(hotkey manager)
release_hotkey	(hotkey manager)
list_expend	(CLIK dropdown menu)
index_change	(CLIK list, dropdown menu)
change	(CLIK slider, textinput)
focused	(FocusHandler)	Y	Y
scroll	(JellyScrollbar, Scrollindicator)
enter	(FocusHandler textInput)

Разница между press и click в том что press проигрывается при нажатии мыши над контролом, а click - при отпускании.

Доступные soundSet:

default_component
default_button, hard_button, pause_login
default_checkbox
default_dropmenu
default_list
default_textinput, hard_textinput
default_listitem
default_listitem
dropmenu_button
weapon_control_button

Биндинг работает в связке с (bind soundSet) и (bind enabled).

(bind soundSet 'preset_name')

устанавливает soundSet значение в строчку 'preset_name'

ВАЖНО По умолчанию soundSet установлен в пустую строку, никаких звуков не издает, и не подписан ни на какие мышиные события.

ВАЖНО При установке soundSet UbBlock подписывается на 5 мышиных событий: ROLL_OVER, ROLL_OUT, MOUSE_DOWN, CLICK, DOUBLE_CLICK что может и будет сказываться на производительности, если таких блоков достаточно много.

примечание В случае когда у UbBlock нужно только одно событие, лучше использовать (bind soundOn).

(bind enabled "condition")

устанавливает значение enabled (true/false) для включения/выключения событий по click/press.

DesignerCollectionBinding

Показать содержимое

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

На вход принимает либо датахабовскую коллекцию, либо такую же дизайнерскую коллекцию (которые нужно объявить перед использованием). Есть возможность расширить класс принимаемых коллекций, дописав код в actionscript

(bind collectionDesign "'DES_' + parentCollectionNameInScope; designCollectionNameInScope; filterObject")

filterObject это объект, состоящий из 3 полей:

filter - функция, содержащая переменные из скоупа, константы и $entity - элемент коллекции. Пример:

$entity.crew.nationIndex + $entity.crew.level >= maxLevel + 5

sort - список полей у энтити, по которым идет сортировка
sortOrder - список параметров сортировки - SortType.DESCENDING - обратная сортировка, SortType.CASEINTESITIVE - обратная сортировка, 0 - отсутствие флага

Полный пример:

(bind collectionDesign "'DES_' + someScopeName; designCollectionNameInScope; { 'filter':$entity.crew.nationIndex + $entity.crew.level >= maxLevel + 5,

'sort':['crew.nationIndex', 'crew.level', 'crew.name'],

'sortOrder':[SortType.DESCENDING, 0, SortType.CASEINTESITIVE]}")

Поля в объекте filter могут отсутствовать, то есть если нужна только сортировка, то поле 'filter' пропускается.

Если источник - датахабовская коллекция - не является сортировкой или фильтрацией, а зависит только от компонента, то можно использовать replace вида

DESIGN_COLLECTION_COMPONENT("CC.crew", "'crewsCollection'", "{'filter':!$entity.crew.isHistory, 'sort':['crew.nationIndex', 'crew.recentIndex', 'crew.level']}")

ConcatBinding

Показать содержимое

ClipboardBinding

Показать содержимое

ColorTransformBinding

Показать содержимое

SliceBinding

Показать содержимое

Позволяет разбивать коллекцию на части, создаёт срезы коллекции.

(bind slice "'outputCollectionNameInScope'; sourceCollectionNameInScope; startIndex; endIndex")

outputCollectionNameInScope - Имя свойства в scope, куда запишется результат.
sourceCollectionNameInScope - Коллекция, из которой требуется выделить часть. Если коллекция из datahub, то нужно указывать имя в формате DES_collectionName.
startIndex - Число, указывающее на индекс начальной позиции среза. По умолчанию имеет значение 0.

Если startIndex — отрицательное число, начальной позицией становится конец массива, последнему элементу которого присваивается позиция «-1».

endIndex - Число, указывающее на индекс конечной позиции среза. Если этот параметр пропустить, срез включает все элементы от начальной позиции до конца массива.

Если endIndex — отрицательное число, конечная позиция указывается с конца массива, последнему элементу которого присваивается позиция «-1».

Example:

(bind collectionDH "CC.ownShip; 'playerShips'")

(bind slice "'sample1'; DES_playerShips; 0; 4") # срез коллекции playerShips, состоящий из элементов playerShips[0], playerShips[1], playerShips[2], playerShips[3]

(bind slice "'sample2'; sample1; -1") # срез коллекции sample1, состоящий из одного последнего элемента sample1[sample1.length - 1]

(bind slice "'sample3'; sample1") # копия коллекции sample1

ResourceBinding

Показать содержимое

entityDH

Показать содержимое

firstEntityDH

Показать содержимое

primaryEntityDH

Показать содержимое

DHCollectionGeneratorBinding

Показать содержимое

Аналог UbRepeatBinding, но для коллекций из DataHub.
Поддерживает динамическую загрузку и выгрузку элементов, отрисовывая лишь то, что действительно влезает в родительский контейнер.

(bind generatorDH "DataHubCollectionName; 'ItemRenderer'; 'sortBy'; {propertyName: propertyValue, ...}")

где:

DataHubCollectionName — имя коллекции в DataHub;
ItemRenderer — имя класса, который будет использоваться для отображения (аналогично UbRepeatBinding);
sortBy — поле, по которому данные должны быть отсортированы. Если сортироввка не требуется, нужно передать пустую строку '';
{propertyName: propertyValue, ...} — Набор переменных, которые будут прокинуты в область видимости (scope). Может быть пустым.

Рекомендуется использовать, если количество выводимых элементов может быть любым (больше 10). Хороший пример — список повторов:

(bind generatorDH "CC.replayMetadata; 'ReplaysTableRow'; ''; {_data: data, selectedTabIndex: selectedTabIndex}")

Обязательное условие!

Этот биндинг должен быть помещён в контейнер, для которого обязательно должны быть заданы следующие стили:

															(overflow scroll)
														
															(layout "<layout>")
														
															(wheelScrollSpeed 45)
														
															(itemWidth <number>px)
														
															(itemHeight <number>px)

где <layout> — один из описанных в пакете lesta.unbound.layout.measure.

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

(layout "lesta.unbound.layout.measure.CarouselLayout")

Если хотя бы один из этих стилей не задать, генератор не сработает (данные не будут отображены).

GSTimelineBinding

Показать содержимое

Запускает анимацию с помощью GreenSock TimelineMax: создаёт Timeline с твинами и управляет ими.

(bind timeline "startEvents; timelineProps; tweensArray; (optional)timelineEvents; (optional)timelineSettings")

где:

startEvents — события старта анимации. Можно задать тремя способами:

В виде строки:

(bind timeline "'rollOver'; {}; [0.2, {colorMatrixFilter: {saturation: 1}}]")

Анимация начнётся при срабатывании события с заданным именем.

В виде массива строк:

(bind timeline "['addedToStage', 'rollOut']; {}; [0.2, {colorMatrixFilter: {saturation: 0}}]")

Анимация начнётся при срабатывании любого из заданных событий.

В виде объекта с соответствием "событие - функция":

(bind timeline

"{addedToStage: 'play', rollOver: ['reverse', 0], rollOut: ['play', [0]]};   {}; [0.2, {colorMatrixFilter: {index: 0, saturation: 0}}]; [] "

)

timelineProps — свойства таймлайна, те же, что можно указать в конструкторе TimelineMax по документации GreenSock.

																(bind timeline "'addedToStage';
															
																                {repeat: -1, repeatDelay: 2, yoyo: true};
															
																                [3, {x: 1000, radius:70, ease:Easing.Bounce.easeOut}, 5, {x: 1500, radius:20, ease:Easing.Bounce.easeIn}]
															
																            ")
															
																В числе параметров можно указывать и коллбеки: onStart, onUpdate, onComplete, onReverseComplete, onRepeat. В их значении указываем имена событий, которые должны быть отправлены при вызове соотвтествующих коллбеков.

tweensArray - массив твинов, где идут чередуясь время твина и его параметры (то есть длина массива всегда чётная). Длительность указывается в секундах, параметры анимации - как для обычного твина GreenSock. Для изингов прокинуты гринсоковские константы.

timelineEvents - необязательный параметр, задающий события, которые надо отправить в Scope при проигрывании какого-то места на таймлайне.

																(bind timeline "'addedToStage';
															
																                {};
															
																                [3, {x: 1000, radius:70, ease:Easing.Bounce.easeOut}, 5, {x: 1500, radius:20, ease:Easing.Bounce.easeIn}];
															
																                [5, 'frameEvent1', {animState: 'A'}, 7, 'frameEvent2', {animState: 'C'}]
															
																            ")
															
																Это массив из чередующихся позиции, имени события и данных для события (то есть его длина кратна трём).

timelineSettings - необязательный параметр, биндящий к свойствам scope свойства-сеттеры таймлайна, такие как delay, duration, paused, reversed, timeScale и totalDuration. Это объект из соответствий свойство таймлайна → имя в scope (строкой).

WowsResizeBinding

Показать содержимое

UbPluralTextBinding

Показать содержимое

UbContextMenuBinding

Показать содержимое

UbWatchBinding

Показать содержимое

ActionIsDisplayBinding

Показать содержимое

UbRepeatWithScopeHoldBinding

Показать содержимое

UBServerTimeBinding

Показать содержимое

UbFeatureCheckBinding

Показать содержимое

UbGeneratorBinding

Показать содержимое

UbInOutActionBinding

Показать содержимое

UbIMEEnableBinding

Показать содержимое

UbFadeBinding

Показать содержимое

UbBlurLayerBinding, UbBlurMapBinding

Показать содержимое

UbStageSizeBinding

Показать содержимое

UBClickSplitBinding

Показать содержимое

UbLinearChartBinding

Показать содержимое

MatroseFuchs · 14 дек 2018, 11:59:01

Список байндингов DataHub 2.0

DHCollectionRepeatBinding

Показать содержимое

DHCollectionGeneratorBinding

Показать содержимое

DHCollectionBinding

Показать содержимое

DHEntityBinding

Показать содержимое

DHHandleEventBinding

Показать содержимое

DHWatchBinding

Показать содержимое

DHDataRefBinding

Показать содержимое

MatroseFuchs · 14 дек 2018, 12:59:23

Список поддерживаемых событий (events) для мыши

Unbound поддерживает лишь часть мышиных событий из ActionScript 3.0.

Пример:

(bind dispatch "'click'; 'eventName'; {}")

событие	описание
click	Щелчок левой кнопкой мыши
mouseDown	Срабатывает в момент нажатия левой кнопки мыши
mouseUp	Срабатывает в момент отпускания левой кнопки мыши
mouseWheel	Прокрутка колёсика мыши в любом направлении
mouseOver	Наведение указателя на элемент
mouseOut	Срабатывает в момент ухода указателя мыши с элемента
mouseMove	Срабатывает в момент движения указателя над элементом
rollOver	Аналогично mouseOver, но не сработает над дочерними элементами
rollOut	Аналогично mouseOut, но не сработает над дочерними элементами

Примечание

В ActionScript есть разница между mouseOver/rollOver и mouseOut/rollOut, в Unbound она сохраняется.
Это значит, что событие mouseOver сработает как над родителем, так и над детьми, в отличие от rollOver, который сработает один раз над родителем и не сработает над детьми.

MatroseFuchs · 17 дек 2018, 07:53:19

Блоки

Элемент — это независимый корневой блок самого верхнего уровня, внутри которого задаются остальные дочерние блоки. Пример описания корневого блока в XML файле:

<block className="SomeClassName">

Объявление элемента нужно в двух случаях:

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

При этом, элемент может создаваться как динамически (на основе выполнения логических условий), так и статически.
Пример динамического появления блока — кнопка «Забрать награду» в календаре:

Дочерние блоки бывают следующих типов:

block — спрайтовый блок;

<block>

...

</block>
tf — текстоый блок;

<block type="text">
mc — блок типа Movie Clip, определённый в каком-либо флэшовом *.fla-файле и экспортированный в ActionScript;

<block className="some_class_name" type="native">

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

MatroseFuchs · 17 дек 2018, 08:15:15

Стили

Облик элемента задаётся набором атомарных стилевых свойств, таких как высота, ширина, цвет, расположение и так далее.

Показать содержимое

Свойство	Значения	Описание	Единица измерения	Пример
Стили, определяющие поведение блока
flow	vertical horizontal htile vtile По умолчанию: vertical	Порядок расположения дочерних блоков внутри родительского. vertical — дочерние элементы располагаются вертикально, сверху вниз; horizontal — слева направо; htile — мощение слева направо, сверху вниз; vtile — мощение сверху вниз, слева направо.	—	(flow htile)
overflow	scroll hidden	Поведение блока, когда содержимое в него не помещается. scroll — появляется полоса прокрутки; hidden — то, что не влезло, обрезается границами элемента.	—	(overflow hidden)
hitTest	true / false По умолчанию: true	Разрешать ли коллизию с курсором мыши		(hitTest false)
Стили, определяющие расположение блока и его размеры
position	relative absolute	Тип позиционирования элемента. По умолчанию — относительный. Если абсолютный, то все остальные блоки не	—	(position absolute)
top	Численное значение + единица измерения		пиксели (px), проценты (%), проценты от ширины экрана (sw), проценты от высоты экрана (sh), адаптивные проценты (%f)	(top 16px)
bottom	Число + единица измерения		px, %, sw, sh, %f
left	Число + ед. изм.	X-координата положения левого края элемента относительно родителя. По умолчанию — 0.	px, %, sw, sh, %f
right	Число + ед. изм.	X-координата положения правого края элемента относительно родителя. Используется для выравнивания по правому краю родителя. По умолчанию — 0.	px, %, sw, sh, %f
width	Число + ед. изм.	Ширина элемента. По умолчанию — 0.	px, %, sw, sh, %f
height	Число + ед. изм.	Высота элемента. По умолчанию — auto, т.е. вычисляется на основе высоты содержимого.	px, %, sw, sh, %f
maxWidth	Число	Максимальная ширина По умолчанию — auto.	только число!	(maxWidth 256) Баг: если указать размерность, например, (maxWidth 256px), то работать не будет.
maxHeight	Число	Максимальная высота. По умолчанию — auto.	только число!	см. выше
Стили, определяющие отступы элемента от соседей внутри родителя
marginLeft	Число + ед. изм.	Отступ слева	px, %, sw, sh, %f	(marginLeft 16px)
marginRight	Число + ед. изм.	Отступ справа	px, %, sw, sh, %f
marginTop	Число + ед. изм.	Отступ сверху	px, %, sw, sh, %f
marginBottom	Число + ед. изм.	Отступ снизу	px, %, sw, sh, %f
margin	Строка	Составной отступ. Принимает четыре параметра через вертикальный разделитель. Два варианта использования: (margin left\|right\|top\|bottom) или (margin leftAndRight\|topAndBottom)	px, %, sw, sh, %f	(margin 16px\|8px\|16px\|8px) (margin 32px\|24px)
Стили, определяющие отступы для дочерних элементов внутри самого элемента
paddingLeft	Число + ед. изм.	Сдвиг содержимого элемента от его левой границы	px, %, sw, sh, %f	(paddingLeft 16px)
paddingRight	Число + ед. изм.	... от правой границы	px, %, sw, sh, %f
paddingTop	Число + ед. изм.	... от верхней границы	px, %, sw, sh, %f
paddingBottom	Число + ед. изм.	... от нижней границы	px, %, sw, sh, %f
padding	Строка	Составной сдвиг дочерних элементов	px, %, sw, sh, %f
Стили, определяющие заливку
alpha	Число в диапазоне [0; 1]	Уровень непрозрачности. 0 — полностью прозрачный, 1 — полностью непрозрачный. По умолчанию 1.	—	(alpha 0.9)
backgroundColor	Число в шестнадцатеричном формате с прозрачностью	Цвет фона. По умолчанию 0x0	—	(backgroundColor 0x33000000)
backgroundImage	Строка	Путь к фоновой картинке. Используется только через (bind style)	—	(bind style "'backgroundImage'; 'url:../events/british_event/icons_rules/icons_rule_operation_battle.png' )
backgroundRepeatX	true / false	Повторять ли картинку по горизонтали	—	(backgroundRepeatX true)
backgroundRepeatY	true / false	Повторять ли картинку по вертикали	—
backgroundStretchX	true / false	Разрешать ли растягивать картинку по горизонтали	—
backgroundStretchY	true / false	Разрешать ли растягивать картинку по вертикали	—
Текстовые стили
fontSize		Кегль шрифта
textColor		Цвет шрифта в шестнадцатеричном формате без альфа-канала. По умолчанию 0x000000
textAlign	left / right / center	Выравнивание текста по левому или правому краю По умолчанию — left.
marginText		Отступ текста от границы текстового блока
multiline	true / false	Разрешать ли перенос текста на следующую строку
leading		Интерлиньяж (относительное расстояние между строками текста)
Прочие стили
widthByChildren
heightByChildren
itemWidth
itemHeight
selectable
focusable
mouseEnabled
mouseChildren
backgroundSprite
backgroundSize
scrollbar
dropShadowFilter
glowFilter
blurFilter
layout
wheelScrollSpeed

Отдельные стилевые свойства можно объединять в стилевые классы

class — стилевой класс;
style — выражение, задающее стиль элемента в конкретно этом блоке (так называемый inline-стиль) через перечисление стилевых свойств.
атомарные стилевые свойства,

По аналогии с HTML, применяется то стилевое свойство, которое применено к элементу последним:

Показать содержимое

MatroseFuchs · 17 дек 2018, 08:55:01

Типографика

Шрифт

Основной шрифт, используемый в игре, это Warhelios Condensed. Он бывает в двух начертаниях — обычном (WarheliosCondC) и жирном (WarheliosCondCBold).

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

Следует избегать использование своих стилей текста, и вместо этого использовать готовые стилевые классы:

Класс	Для чего используется
$TextDefault13NM	второстепенный (вспомогательный) текст
$TextDefault15NM	основной класс, используйте его в большинстве случаев
$TextDefault17NM	заголовки 4 уровня
$TextDefault19NM	заголовки 3 уровня
$TextDefault21NM	заголовки 2 уровня
$TextDefault23NM	заголовки 1 уровня

$TextDefaultBoldNM	имя корабля и его уровень, шапки таблиц, заголовки разворачиваемых списков, заголовки групп характеристик
$TextDefaultBold17NM	заголовки параграфов
$TextDefaultBold19NM	заголовки 3 уровня повышенной значимости
$TextDefaultBold21NM	заголовки 2 уровня повышенной значимости
$TextDefaultBold23NM	заголовки 1 уровня повышенной значимости, заголовки окон

Пример стилизации текста

Исходный текст:

											<block type="text"">
										
											    <bind name="text" value="'Hello, world!'"/>  # этот текст будет чёрного текста и в гарнитуре Arial
										
											</block>

Теперь добавим стандартный стилевой класс, использующий белый цвет по умолчанию:

											<block type="text"">
										
											    <styleClass value="$TextDefaultNM/>  # теперь текст стал белым, с кеглем 15px, в гарнитуре Warhelios Condensed
										
											    <bind name="text" value="'Hello, world!'"/>
										
											</block>

Теперь поменяем текст, переопределив текст из класса своим, добавив атрибут (textColor) в блок (style):

											<block type="text"">
										
											    <styleClass value="$TextDefaultNM/>
										
											    <style>
										
											        <textColor value="0xFFCC66"/>    # золотистый цвет премиумных кораблей
										
											    </style>
										
											    <bind name="text" value="'Hello, world!'"/>
										
											</block>

MatroseFuchs · 29 янв 2019, 07:17:58

Цвета

Ограниченная палитра специальных цветов используется в игре для текстов и иконографики:

В общем случае, цвета можно выбирать из палитры так называемых безопасных Web-цветов:

[UB] Документация по Unbound framework

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

MedvedevTD

Байндинги

EntitySingletonController

CollectionController

Импорт всей коллекции.

Импорт одного элемента коллекции.

Фильтрация коллекции.

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

Ссылка на публикацию

MatroseFuchs

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

Ссылка на публикацию

MatroseFuchs

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

Ссылка на публикацию

MatroseFuchs

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

Ссылка на публикацию

MatroseFuchs

Блоки

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

Ссылка на публикацию

MatroseFuchs

Стили

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

Ссылка на публикацию

MatroseFuchs

Типографика

Пример стилизации текста

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

Ссылка на публикацию

MatroseFuchs

Цвета

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

Ссылка на публикацию

Сообщество

Публикации