spark Group и визуальные нижестоящие элементы.

[Чеширский Кот]

Здравствуйте.


package
{
import mx.controls.Button;

import spark.components.Group;
import spark.layouts.HorizontalLayout;

public class MyGroup extends Group
{
public function MyGroup()
{
super();

var horizontalLayout:HorizontalLayout = new HorizontalLayout();
horizontalLayout.horizontalAlign = "center";
this.layout = horizontalLayout;

this.addElement(new Button);
}

override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
{
super.updateDisplayList(unscaledWidth, unscaledHeight);

myFunction();
}
}
}


В эту группу добавляются, допустим, еще три таких же (MyGroup).
Они выстраиваются горизонтально, т.е. на экране 3 Button обернутые в каждый в свою группу.
Теперь вручную, при помощи метода myFunction(); меняю координаты X у групп так, что первая группа и третья сместились ко второй, например, на 20.
Суть в том, что теперь ширину группы можно сократить на 40.

Если просто присвоить this.width = this.width - 40,
то т.к. horizontalLayout с "центровкой", то он пересчитает координаты по своему. И переместит группы не так как нужно мне (не так как я задал координаты группам).

Как грамотно изменить ширину группы, чтобы остались мною заданные координаты?

[alatar]

Не использовать HorizontalLayout. Или выкинуть myFunction() и работать с paddingLeft, paddigRight и gap лайаута.

[Чеширский Кот]

Изначально это выглядит так:

29068

Используя MyFunction(), преображается к такому виду:

29069


Код одного элемента:


<classes:TreeGroup id="v_conteiner0" typeLayout="vertical" x="{this.width/2 - v_conteiner0.width/2}" y="80">
<classes:TreeGroup id="gp_relative0" x="{v_conteiner0.width/2-gp_relative0.width/2}" height="36">
<classes:RelativeButton id="relative0" typeLayout="basic" x="0" y="0" width="108" height="36" skinClass="{SkinRelativeButton}" click="openForm(event)"/>
</classes:TreeGroup>
<classes:TreeGroup id="h_conteiner0" typeLayout="horizontal"/>
</classes:TreeGroup>


В h_conteiner0 добавляются такие же элементы.

Цель сократить пространство, занимаемое деревом, за счет смещения "одиночек" - элементы A1, A3 и Ребенок3 в данном примере.

HorizontalLayout очень хорошо работает. Когда добавляю элементы, удаляю, то ширина групп v_conteiner0, h_conteiner0 автоматически меняется.
Мне так же необходимо самому вычислять новые координаты Х каждого v_conteiner0 (именно их двигаю), когда возникает в этом необходимость.

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

Вопрос как мне менять ширину, чтобы не "сбивать" работу HorizontalLayout?
Или если это невозможно, то видимо писать свой Layout? Но решит ли этот вариант поставленную задачу?
Подскажите, как выйти из этой ситуации победителем :)

[alatar]

Либо вы меняете ширину группы и layout располагает элементы с учетом изменившихся размеров, либо вы расставляете элементы самостоятельно (BasicLayout). Третьего не дано.

[Чеширский Кот]

Я правильно понимаю, что выбрав второй вариант (BasicLayout), на меня ложится изменение ширины групп, при добавлении и удалении элементов?

[alatar]

Правильно.

[Чеширский Кот]

Тогда насущный вопрос:

На второй картинке мне нужно будет уменьшить ширину на ширину 2х элементов.

А в этом примере, же на 1 ширину элемента:

29070

Вопрос: как я узнаю, что у меня творится внизу, когда я нахожусь в h_conteiner c элементами A1, A2 и A3.
Находясь в этой группе, я должен сократить на две ширины элементов... Хотя на самом деле только на 1 ширину.
Другими словами, как отслеживать ширину других групп?

[alatar]

Никак. Я бы, в вашем случае, вообще избавился от контейнеров.
Отделите данные от визуализации. Все визуальные элементы (рендереры данных) можно расположить в одном контейнере и при изменении данных передвигать, добавлять или перерисовывать рендереры. Ну и написать свой layout для их расположения.
Для вдохновения можете посмотреть Flare (кликните на Layouts). Исходники (https://github.com/prefuse/Flare/blob/master/flare/src/flare/vis/operator/layout/NodeLinkTreeLayout.as).

[Чеширский Кот]

Спасибо, буду разбираться.

[alatar]

Можно найти и готовые компоненты. Это называется organization chart.

Вот, например (http://live.yworks.com/yfiles-flex/demo/orgchartdemo/). Или вот (http://visunetdemos.demos.ibm.com/webdemos/orgchart/orgchart.html).

[Чеширский Кот]

Интересно у них, но нужно по другому и у них много лишнего.
Мне в любом случае надо свой Layout сделать. Он же отвечает за расположение элементов в контейнере?
В ItemRenderer будет мой элемент в виде кнопки, например. Скин к ней тут же...
А контейнер Group? Если да, то как туда поместить ItemRenderer'ы?

[alatar]

DataGroup (http://help.adobe.com/ru_RU/FlashPlatform/reference/actionscript/3/spark/components/DataGroup.html)

[Чеширский Кот]

Благодарю, картина стала вырисовываться :)