Flex Examples
The following example shows how you can change the horizontal alignment of tabs within a TabNavigator container so that the tabs are left, center, or right aligned within the container.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/09/09/changing-tab-alignment-within-a-flex-tabnavigator-container/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Array id="arr">
<mx:Object label="left" />
<mx:Object label="center" />
<mx:Object label="right" />
</mx:Array>
<mx:ApplicationControlBar dock="true">
<mx:Label text="horizontalAlign:" />
<mx:ComboBox id="comboBox"
dataProvider="{arr}" />
</mx:ApplicationControlBar>
<mx:TabNavigator id="tabNavigator"
width="100%"
height="100%"
horizontalAlign="{comboBox.selectedItem.label}">
<mx:VBox label="Tab 1">
<mx:Label text="The quick brown fox..." />
</mx:VBox>
<mx:VBox label="Tab 2">
<mx:Label text="The quick brown fox..." />
</mx:VBox>
<mx:VBox label="Tab 3">
<mx:Label text="The quick brown fox..." />
</mx:VBox>
</mx:TabNavigator>
</mx:Application>
View source is enabled in the following example.
Essentially, what the previous code snippet is doing is using binding to detect when the selected item in the ComboBox changes, and then sets the horizontalAlign style to the selected value. So, for example, if you selected “center” from the ComboBox control’s drop down menu, Flex would interpret it as:
<mx:TabNavigator id="tabNavigator"
width="100%"
height="100%"
horizontalAlign="center">
<VBox />
</mx:TabNavigator>
You could also set the horizontalAlign style within a <mx:Style /> block using the following snippet:
<mx:Style>
TabNavigator {
horizontalAlign: center;
}
</mx:Style>
The above snippet sets the style globally for all TabNavigator containers. If you wanted to set the style on a single TabNavigator container you could change the “TabNavigator” style name to something like “.MyTabNavigator” (with a leading period), and then set the styleName property witin the desired TabNavigator container to “MyTabNavigator” (with no leading period).
Also note that you could use either the “horizontalAlign” style name or “horizontal-align” style name in the CSS.
Finally, you could also set the horizontalAlign style in ActionScript using the setStyle() method, as seen in the following snippet:
<mx:Script>
<![CDATA[
private function init():void {
tabNavigator.setStyle("horizontalAlign", "center");
}
]]>
</mx:Script>
For the previous snippet to work, you’d need to call the init() method from somewhere in your MXML, such as your main <mx:Application /> tag’s creationComplete event handler.
Peter deHaan
Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.
Share
I’m loocking for this example: large text which flows in multiples size definites texFields columns (like newspaper).
Tank’you in advance.
FlexLover,
I’ve never tried the example, but I believe the Programming ActionScript 3.0 book has an example of wrapping text between text fields. For more information, see: http://livedocs.adobe.com/flash/9.0/main/00000236.html
Hope that helps,
Peter
Hello Peter
Your examples are very helpful.To be frank, I was looking for a TabNavigator with tabs on the right hand side instead of above. Can you help me on this.
Hello Peter
Your examples are very helpful.To be frank, I was looking for a TabNavigator with tabs on the right hand side instead of above. Can you help me on this.
Forgot to mention one thing. The tab should be turned 90 degree.
Sathyan,
You may want to look into using a TabBar control and a ViewStack container, something like the following:
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"> <mx:HBox> <mx:TabBar direction="vertical" dataProvider="{vs}" /> <mx:ViewStack id="vs" width="400" height="300"> <mx:VBox label="One" backgroundColor="haloSilver"> <mx:Label text="One..." /> </mx:VBox> <mx:VBox label="Two" backgroundColor="haloOrange"> <mx:Label text="Two..." /> </mx:VBox> <mx:VBox label="Three" backgroundColor="haloBlue"> <mx:Label text="Three..." /> </mx:VBox> </mx:ViewStack> </mx:HBox> </mx:Application>Or you may also want to look at Doug McCune’s SuperTabNavigator control: http://dougmccune.com/flexlib/keynote/ and http://dougmccune.com/blog/2007/02/07/quest-for-the-perfect-tabnavigator-part-3-with-source/.
Peter