flex positioning a button within a panel

Question

All I'm trying to do is place a button inside of a panel, rotate that button (so it is vertical) and place it on the edge of the panel. I can;t seem to do this correctly. Here is my code:

<mx:Panel id="weekList"  width="260" height="100%" x="-500" title="Weeks" >
        <mx:List id="weekButtonList"  width="260" borderVisible="false"  contentBackgroundAlpha="0"   dataProvider="{_data.mappoints.week.@number}" itemClick="onWeekClick(event);" >
            <mx:itemRenderer>
                <mx:Component>
                    <mx:Button  buttonMode="true" right="20" width="260" height="50" label="Week {data}"  />
                </mx:Component>
            </mx:itemRenderer>
        </mx:List>

        <mx:HBox id="closeButtonHolder" rotation="90" width="100" >
            <mx:Button  label="OPEN" click="weekListToggle()" />    
        </mx:HBox>

    </mx:Panel>

If you look at the part of the script you will see I am trying to rotate it and move it to the left. I am just trying to move it somewhere, and nothing is working. Also, the text seems to dissapear when I rotate it on a 90% axis. Anyone know what I can do for this?

Answer 1

In order to rotate text you have to embed the font. I'll play around and see if I can get you a more complete answer for your other issue.

OK, here are some of your problems.

1) The x of your panel is -500 so it is WAY off the screen, maybe you need that for some reason but in my test it just pushed out of view.

2) rotation requires embedding fonts

3) when you rotate any UI component within another the default pivot is on the upper left hand corner, so when the button rotates, it actually rotates out of view. This is not easy to understand when you read it so here's a visual, consider the upper left hand corner of the container as 0,0 in XY coordinates:

normal hbox/button layout:

0,0_________________________________
| ________________________________ |
| |                              | | <-container outside
| |      UI component            | |
| |______________________________| |
|__________________________________|

rotated layout:

___________0,0__________________________
|          |                           |
|  UI      |        container          |
| component|                           |
|          |                           |
|          |___________________________|
|          |
|          |
|          |
|          |
|__________|

See how the button has rotated outside of the visible area (in your case it is no longer on the panel) Solution would be to use a canvas or something that will allow you to pull the HBox away from the edge of the panel.

Answer 2

Use mx:Canvas and set its width to 100%, like so:

<mx:Canvas width="100%">
  <mx:Button buttonMode="true" right="20" width="260" height="50" label="Week {data}"  />
</mx:Canvas>

InvertedSpear has answered the other part of your question, so I won't repeat that.