Начиная с релиза 2.5 платформы появилась возможность добавления и удаления визуальных компонентов без перезагрузки экрана. Для этого добавлены методы append, prepend, after, before. Каждый из этих методов принимает строку xml разметки или ссылку на компонент. Помимо прочего, для того, что бы применить изменения необходимо вызвать метод refresh (подробности см. Динамические стили(ver. 2.6)).
append
Добавляет один и более визуальных компонентов в начало контейнера.
<?xml version="1.0" encoding="utf-8" ?> <c:Screen xmlns:c="BitMobile.Controls" xmlns:s="BitMobile.ValueStack" StyleSheet="DynamicContainers_HorizontalLayout.css"> <c:VerticalLayout Id="vl"> ... <c:HorizontalLayout Id="layout" CssClass="root"> ... </c:HorizontalLayout> </c:VerticalLayout> </c:Screen>
function Append() {
$.layout.append("<c:TextView Text=\"0\"/><c:TextView Text=\"1\"/>").append(
"<c:VerticalLayout CssClass=\"child\">"
+ "<c:TextView Text=\"2\"/><c:TextView Text=\"3\"/>"
+ "</c:VerticalLayout>").append(
"\\DynamicContainers\\Component.xml").refresh();
}
Как видно из примера, поле вызова функции Append в layout будут находиться, в порядке очередности, два TextView, потом VerticlLayout c TextView, потом содержимое Component.xml. Обратите внимание, что для применения изменений необходимо вызвать refresh.
prepend
Добавляет один и более визуальных компонентов в конец контейнера.
<?xml version="1.0" encoding="utf-8" ?> <c:Screen xmlns:c="BitMobile.Controls" xmlns:s="BitMobile.ValueStack" StyleSheet="DynamicContainers_HorizontalLayout.css"> <c:VerticalLayout Id="vl"> ... <c:HorizontalLayout Id="layout" CssClass="root"> ... </c:HorizontalLayout> </c:VerticalLayout> </c:Screen>
function Prepend() {
$.layout
.prepend("<c:TextView Text=\"0\"/><c:TextView Text=\"1\"/>")
.prepend(
"<c:VerticalLayout CssClass=\"child\">"
+ "<c:TextView Text=\"2\"/><c:TextView Text=\"3\"/>"
+ "</c:VerticalLayout>").prepend(
"\\DynamicContainers\\Component.xml").refresh();
}
Как видно из примера, поле вызова функции Prepend в layout будут находиться, в порядке очередности, содержимое Component.xml, потом VerticlLayout c TextView, потом два TextView. Обратите внимание, что для применения изменений необходимо вызвать refresh.
after
Добавляет визуальный компонент в родительский контейнер после текущего компонента
<?xml version="1.0" encoding="utf-8" ?> <c:Screen xmlns:c="BitMobile.Controls" xmlns:s="BitMobile.ValueStack" StyleSheet="DynamicContainers_HorizontalLayout.css"> <c:VerticalLayout Id="vl"> ... <c:HorizontalLayout Id="layout" CssClass="root"> <c:HorizontalLine Id="anchor" CssClass="anchor"/> </c:HorizontalLayout> </c:VerticalLayout> </c:Screen>
function After() {
$.anchor.after("<c:TextView Text=\"0\"/><c:TextView Text=\"1\"/>").after(
"<c:VerticalLayout CssClass=\"child\">"
+ "<c:TextView Text=\"2\"/><c:TextView Text=\"3\"/>"
+ "</c:VerticalLayout>").after(
"\\DynamicContainers\\Component.xml").refresh();
}
Как видно из примера, поле вызова функции After в layout после anchor будут находиться, в порядке очередности, HorizontalLine, два TextView, потом VerticlLayout c TextView, потом содержимое Component.xml. Обратите внимание, что для применения изменений необходимо вызвать refresh.
before
Добавляет визуальный компонент в родительский контейнер до текущего компонента
<?xml version="1.0" encoding="utf-8" ?> <c:Screen xmlns:c="BitMobile.Controls" xmlns:s="BitMobile.ValueStack" StyleSheet="DynamicContainers_HorizontalLayout.css"> <c:VerticalLayout Id="vl"> ... <c:HorizontalLayout Id="layout" CssClass="root"> <c:HorizontalLine Id="anchor" CssClass="anchor"/> </c:HorizontalLayout> </c:VerticalLayout> </c:Screen>
function Before() {
$.anchor.before("<c:TextView Text=\"0\"/><c:TextView Text=\"1\"/>").before(
"<c:VerticalLayout CssClass=\"child\">"
+ "<c:TextView Text=\"2\"/><c:TextView Text=\"3\"/>"
+ "</c:VerticalLayout>").before(
"\\DynamicContainers\\Component.xml").refresh();
}
Как видно из примера, поле вызова функции After в layout после anchor будут находиться, в порядке очередности, содержимое Component.xml, потом VerticlLayout c TextView, потом два TextView, потом HorizontalLine. Обратите внимание, что для применения изменений необходимо вызвать refresh.
Добавить комментарий