have any idea how to set the layout?

i want use two button to control list turn left/right one element.

but i got some confuse about how to layout those component.

i use " requestedColumnCount="6" " to set the list width , so in the design model

i only know this list can display 6 element , but i don't know how width it will be.

so i use the "HGroup" to set the layout , the main code is like this way

<s:HGroup x="214"
          y="216">
    <s:Group>
        <s:layout>
            <s:VerticalLayout />
        </s:layout>
        <s:Button label="←"
                  click="button1_clickHandler(event)"/>
    </s:Group>
    <s:Group>
        <component:SmoothScrollingList dataProv开发者_StackOverflow中文版ider="{myProvider}"
                                       itemRenderer="myitemdrender.FriendPageItemRender"
                                       id="friendPageList"
                                       mouseDown="friendPageList_mouseDownHandler(event)">
            <component:layout>
                <s:HorizontalLayout requestedColumnCount="6"
                                    useVirtualLayout="true"/>
            </component:layout>
        </component:SmoothScrollingList>
    </s:Group>
    <s:Group>
        <s:Button label="→"
                  click="button2_clickHandler(event)"/>
    </s:Group>
</s:HGroup>

you can see i use one HGroup and three group to determine where the component should be.

is almost finish , but i still got problem about how to set those two button at the

middle of the position?

i try to use

        <s:layout>
            <s:VerticalLayout horizontalAlign="center"/>
        </s:layout>

in the first group layout , but seem not working.

and my another question is :

is this a good way to use so many group and hgroup to determine the position ? is there

have any other good way to do it ?

thanks a lot.

You should use attributes in those cases, to clean the code a bit more up; then it is also visible where such additional attributes belong to. For example for the first group, just write:

<s:Group layout="VerticalLayout">
    <s:Button label="←" click="button1_clickHandler(event)"/>
</s:Group>

However in your case it makes less sense to use an additional Group element for just one different element inside.

<s:HGroup x="214" y="216" verticalAlign="middle">
    <s:Button label="←" click="button1_clickHandler(event)"/>
    <component:SmoothScrollingList
            id="friendPageList" dataProvider="{myProvider}"
            itemRenderer="myitemdrender.FriendPageItemRender"
            mouseDown="friendPageList_mouseDownHandler(event)">
        <component:layout>
            <s:HorizontalLayout requestedColumnCount="6" useVirtualLayout="true"/>
        </component:layout>
    </component:SmoothScrollingList>
    <s:Button label="→" click="button2_clickHandler(event)"/>
</s:HGroup>

Sorry , maybe my describe is not very clear.

my gold is may some Ui like this one( http://i46.tinypic.com/2nbbxc4.jpg ).

but in the degin model i don't know how heiht/with dose the list will be. and i want the

button is 30% of the list height. i try to use one HGroup contain all 3 componet.

seem not working.

<s:HGroup x="214" y="216" id="parentGroup">
    <s:Group id="childOneGroup">
        <s:Button label="←" top="{parentGroup.height*0.3}"/>
    </s:Group>
    <s:Group>
        <component:SmoothScrollingList dataProvider="{myProvider}"
                    itemRenderer="myitemdrender.FriendPageItemRender"
                    id="friendPageList">
            <component:layout>
                <s:HorizontalLayout requestedColumnCount="6" useVirtualLayout="true"/>
            </component:layout>
        </component:SmoothScrollingList>
    </s:Group>
    <s:Group>
        <s:Button label="→" top="30"/>
    </s:Group>
</s:HGroup>

but if i use three group(each compont belong to one ) and change th button " top "

value to {parentGroup.height*0.3} ,it's working.