Начиная с релиза 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(); }
Добавить комментарий