[Flex4] have any idea how to set the layout?

Question

hi all:

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 dataProvider="{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.

Answer 1

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>

Answer 2

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.