Динамические стили(ver. 2.6)

Начиная с релиза 2.5 платформы BitMobile появилась возможность изменять стили визуальных компонентов без перезагрузки стилей. Теперь доступно редактирование свойства CssClass, доступного в каждом визуальном компоненте, из контроллера. После применения изменений достаточно вызвать Refresh изменяемого объекта.

Пример:

 <c:Button Id="button" CssClass="blue"/>

 function RefreshButton() {
	$.button.CssClass = "red";
	$.button.Refresh();
}

В таком случае, кнопка будет перерисована в соответствие со стилем red.

Изменение стилей в нескольких объектах

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

Пример:

<?xml version="1.0" encoding="utf-8" ?>
<c:Screen xmlns:c="BitMobile.Controls" xmlns:s="BitMobile.ValueStack">
	<c:VerticalLayout>
		...
		<c:DockLayout Id="root" CssClass="root">
			<c:Button Id="button1" CssClass="red"/>
			<c:Button Id="button2" CssClass="green"/>
		</c:DockLayout>
		...
	</c:VerticalLayout>
</c:Screen>

 function RefreshButtons() {
	$.button1.CssClass = "yellow";
	$.button2.CssClass = "white";
	$.root.Refresh();
}

Under the hood

Так как при изменении стилей, возможно изменение размеров и положения компонента в контейнере, метод Refresh вызывает перерисовку не только собственно компонента, но и его родителя со всем содержимым. Так же, если контейнер содержит size-to-content размеры, команда Refresh передается его контейнеру. Исходя из вышеперечисленного, для повышения производительности, метод Refresh необходимо вызывать не в общем контейнере для всех измененных объектов, а в компоненте, для которого общий контейнер является прямым родителем. Например для предыдущего примера, для улучшения производительности, можно переделать метод RefreshButtons так:

 function RefreshButtons() {
	$.button1.CssClass = "yellow";
	$.button2.CssClass = "white";
	$.button1.Refresh();
}