Flex SuperTabNavigator Tab标签图片不显示或图片显示不完全

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
               xmlns:mdi="http://code.google.com/p/flexlib/"
               creationComplete="applicationCreationComplete(event)">
    <fx:Declarations>
    </fx:Declarations>
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/mx";
        @namespace mdi "http://code.google.com/p/flexlib/";
        @namespace tab "flexlib.controls.tabBarClasses.*";
        
        mx|ProgressBar
        {
            fontSize:10;
            trackHeight:15;
            paddingRight:20;
        }
        
        tab|SuperTab{ 
            tabCloseButtonStyleName:SuperTabButtonStyle;  
        }
        
        .SuperTabButtonStyle{
            icon:Embed(source="com/xyw/sys/image/close.png");
            downSkin:Embed(source="com/xyw/sys/image/close.png");
            overSkin:Embed(source="com/xyw/sys/image/close.png");
            upSkin:Embed(source="com/xyw/sys/image/close.png");
        }
        
        mdi|SuperTabNavigator{
            tabStyleName:myTab;
            firstTabStyleName:myTab;
            lastTabStyleName:myTab;
        }
        
        .myTab{
            contentBackgroundColor:#FF0000;
            fontFamily:宋体;
            fontSize:15;
            fontWeight:bold;
            up-skin:ClassReference("com.xyw.sys.custom.skin.SuperTabNavigator");
            down-skin:ClassReference("com.xyw.sys.custom.skin.SuperTabNavigator");
            over-skin:ClassReference("com.xyw.sys.custom.skin.SuperTabNavigator");
            disabled-skin:ClassReference("com.xyw.sys.custom.skin.SuperTabNavigator");
            selected-up-skin:ClassReference("com.xyw.sys.custom.skin.SelectedSuperTabNavigator");
            selected-down-skin:ClassReference("com.xyw.sys.custom.skin.SelectedSuperTabNavigator");
            selected-over-skin:ClassReference("com.xyw.sys.custom.skin.SelectedSuperTabNavigator");
            selected-disabled-skin:ClassReference("com.xyw.sys.custom.skin.SelectedSuperTabNavigator");
        }
        mx|DividedBox
        {
            /*fontWeight:bold*/
            fontWeight:normal;
        }
    </fx:Style>
    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            import mx.controls.Image;
            import mx.controls.LinkButton;
            import mx.events.DividerEvent;
            import mx.events.FlexEvent;
            
            import spark.components.NavigatorContent;
            import spark.layouts.VerticalLayout;
            
            [Bindable]
            private var arrayCollection:ArrayCollection = new ArrayCollection([  
                {neName:"教工路文一路路口相机_4", neType:"相机" , neAlarmType:"设备告警" , removeStatus:"未清除" , confirmStatus:"未确认" , neAlarmGrade:"2级"},  
                {neName:"学院路文一路路口相机_3", neType:"相机" , neAlarmType:"环境告警" , removeStatus:"未清除" , confirmStatus:"未确认" , neAlarmGrade:"3级"},  
                {neName:"文一路莫干山路路口相机_1", neType:"相机" , neAlarmType:"连接通信告警" , removeStatus:"未清除" , confirmStatus:"未确认" , neAlarmGrade:"1级"},  
                {neName:"文一路莫干山路路口相机_3", neType:"相机" ,  neAlarmType:"性能告警" , removeStatus:"未清除" , confirmStatus:"未确认" , neAlarmGrade:"4级"}  
            ]);   

            
            private var menusString:String = "<menus><menuitem label='系统维护'><menuitem label='系统用户管理'></menuitem><menuitem label='系统权限管理'></menuitem><menuitem label='系统角色管理'></menuitem></menuitem><menuitem label='信息申请'><menuitem label='农村低保申请'><menuitem label='家庭基本信息登记'></menuitem><menuitem label='房产信息登记'></menuitem><menuitem label='车辆信息登记'></menuitem><menuitem label='保险信息登记'></menuitem><menuitem label='工商信息登记'></menuitem><menuitem label='税务信息登记'></menuitem><menuitem label='经济信息登记'></menuitem></menuitem><menuitem label='城市低保申请'><menuitem label='家庭基本信息登记'></menuitem><menuitem label='房产信息登记'></menuitem><menuitem label='车辆信息登记'></menuitem><menuitem label='保险信息登记'></menuitem><menuitem label='工商信息登记'></menuitem><menuitem label='税务信息登记'></menuitem><menuitem label='经济信息登记'></menuitem></menuitem><menuitem label='综合信息申请'><menuitem label='家庭基本信息登记'></menuitem></menuitem></menuitem><menuitem label='信息初审'></menuitem><menuitem label='信息审核'></menuitem><menuitem label='信息审批'></menuitem><menuitem label='信息查询'></menuitem></menus>";
            private var menusXML:XML = new XML(menusString);
            
            [Bindable]
            [Embed('com/xyw/sys/image/account.gif')]
            private var accountIcon:Class;
            
            [Bindable]
            [Embed('com/xyw/sys/image/manage.gif')]
            private var manageIcon:Class;
            
            [Bindable]
            [Embed('com/xyw/sys/image/manager.gif')]
            private var managerIcon:Class;
            
            [Bindable]
            [Embed('com/xyw/sys/image/other.gif')]
            private var otherIcon:Class;
            
            [Bindable]
            [Embed('com/xyw/sys/image/people.gif')]
            private var peopleIcon:Class;
            
            private function applicationCreationComplete(event:FlexEvent):void
            {
                this.tree.showRoot = false;
                this.tree.dataProvider = this.menusXML;
                this.alarmGrid.dataProvider = this.arrayCollection;
            }
            
            
            public function deleteAlarmRecord():void{  
                this.arrayCollection.removeItemAt(alarmGrid.selectedIndex);  
            }  

            public function confirmAlarmInfo():void{  
                this.arrayCollection.getItemAt(alarmGrid.selectedIndex).confirmStatus = "已确认";  
                this.alarmGrid.dataProvider = this.arrayCollection;  
            }  

        ]]>
    </fx:Script>
    
    <s:Panel id="loginPanle" width="350" title="系统登录" height="150" chromeColor="#2088c7" horizontalCenter="0" verticalCenter="0">
        <s:VGroup width="100%" horizontalCenter="0" verticalCenter="0">
            <s:HGroup width="100%" paddingLeft="30">
                <s:Label text="用户名:" paddingTop="3" fontSize="16"/><s:TextInput id="username" width="160"/><s:Button label="重置"/>
            </s:HGroup>
            <s:HGroup width="100%" paddingLeft="30">
                <s:Label text="密    码:" paddingTop="3" fontSize="16"/><s:TextInput id="password" width="160"/><s:Button label="登录"/>
            </s:HGroup>
        </s:VGroup>
    </s:Panel>
    
    <mdi:MDICanvas visible="false" id="mdiCanvas" backgroundColor="#2088c7" horizontalScrollPolicy="off" verticalScrollPolicy="off" width="100%" height="100%">
        <s:VGroup width="100%" height="100%" gap="0">
            <s:Group width="100%" height="70">
                <s:layout>
                    <s:HorizontalLayout horizontalAlign="right" verticalAlign="bottom"/>
                </s:layout>
                <s:Rect width="100%" height="100%">
                    <s:fill>
                        <s:LinearGradient rotation="90">
                            <s:GradientEntry color="#cbe5ea"/>
                            <s:GradientEntry color="#429edd"/>
                        </s:LinearGradient>
                    </s:fill>
                </s:Rect>
            </s:Group>
            <s:Group width="100%" height="8">
                <s:Rect width="100%" height="100%">
                    <s:fill>
                        <s:SolidColor color="#2088c7"/>
                    </s:fill>
                </s:Rect>
            </s:Group>
            <s:HGroup width="100%" height="100%" gap="0">
                <s:Group width="8" height="100%">
                    <s:Rect width="100%" height="100%">
                        <s:fill>
                            <s:SolidColor color="#2088c7"/>
                        </s:fill>
                    </s:Rect>
                </s:Group>
<!--
                <s:Group width="5" height="100%">
                    <s:Rect width="100%" height="100%">
                        <s:fill>
                            <s:LinearGradient>
                                <s:GradientEntry color="#2088c7"/>
                                <s:GradientEntry color="#ffffff"/>
                            </s:LinearGradient>
                        </s:fill>
                    </s:Rect>
                </s:Group>
-->
<!--
                <s:VGroup width="15%" height="100%" gap="0">
                    <mx:Tree id="tree" labelField="@label" fontWeight="bold" chromeColor="#2088A7" fontSize="15" paddingLeft="5" paddingBottom="5" paddingRight="5" paddingTop="5" borderVisible="false" width="100%" height="100%" borderAlpha="0">
                        
                    </mx:Tree>
                </s:VGroup>
-->
<!--
                <s:Group width="5" height="100%">
                    <s:Rect width="100%" height="100%">
                        <s:fill>
                            <s:LinearGradient>
                                <s:GradientEntry color="#ffffff"/>
                                <s:GradientEntry color="#2088c7"/>
                            </s:LinearGradient>
                        </s:fill>
                    </s:Rect>
                </s:Group>
                <s:Group width="5" height="100%">
                    <s:Rect width="100%" height="100%">
                        <s:fill>
                            <s:SolidColor color="#2088c7"/>
                        </s:fill>
                    </s:Rect>
                </s:Group>
-->
                <mx:HDividedBox width="100%" height="100%" paddingTop="-3">
                    <mx:Tree id="tree" labelField="@label" chromeColor="#2088A7"  fontSize="14"  rowHeight="25" borderVisible="false" width="10%" height="100%" borderAlpha="0"/>
                    <mdi:SuperTabNavigator dragEnabled="false" id="superTabNavigator" width="85%" height="100%" borderAlpha="0">
                        <mx:VBox width="100%" height="100%" label="档案登记" paddingLeft="10" paddingRight="10">
                            <s:DataGrid id="alarmGrid" rowHeight="25" width="100%" height="500" requestedRowCount="4"
                                        skinClass="com.xyw.sys.custom.skin.CustomDataGridSkin" alternatingRowColors="[#FFFFFF,#EEEEEE]">  
                                <s:columns>  
                                    <s:ArrayList>  
                                        <s:GridColumn dataField="neName" headerText="名称"></s:GridColumn>  
                                        <s:GridColumn dataField="neType" headerText="类型"></s:GridColumn>  
                                        <s:GridColumn dataField="removeStatus" headerText="清除状态"></s:GridColumn>  
                                        <s:GridColumn dataField="confirmStatus" headerText="确认状态"></s:GridColumn>  
                                        <s:GridColumn headerText="操作">  
                                            <s:itemRenderer>  
                                                <fx:Component>  
                                                    <s:GridItemRenderer>  
                                                        <s:HGroup>   
                                                            <mx:LinkButton toolTip="清除" label="清除" click="outerDocument.deleteAlarmRecord();" textDecoration="underline" color="#2066CF" fontWeight="normal"/>   
                                                            <mx:LinkButton toolTip="确认" label="确认" click="outerDocument.confirmAlarmInfo()" textDecoration="underline" color="#2066CF" fontWeight="normal"/>   
                                                        </s:HGroup>  
                                                    </s:GridItemRenderer>
                                                </fx:Component>
                                            </s:itemRenderer>
                                        </s:GridColumn>
                                    </s:ArrayList>
                                </s:columns>
                            </s:DataGrid>
                        </mx:VBox>
                        <mx:VBox width="85%" height="100%" label="档案修改">
                            <s:Panel width="100%" height="100%" title="Panel">
                                
                            </s:Panel>
                        </mx:VBox>
                        <mx:VBox width="85%" height="100%" label="信息审核">
                            <s:Panel width="100%" height="100%" title="Panel">
                                
                            </s:Panel>
                        </mx:VBox>
                        <mx:VBox width="85%" height="100%" label="信息审批">
                            <s:Panel width="100%" height="100%" title="Panel">
                                
                            </s:Panel>
                        </mx:VBox>
                    </mdi:SuperTabNavigator>
                </mx:HDividedBox>
                <s:Group width="5" height="100%">
                    <s:Rect width="100%" height="100%">
                        <s:fill>
                            <s:SolidColor color="#2088c7"/>
                        </s:fill>
                    </s:Rect>
                </s:Group>
            </s:HGroup>
            <s:Group contentBackgroundColor="#2088c7" width="100%" height="25">
                <s:Rect width="100%" height="100%" top="0" left="0" right="0" bottom="0">
                    <s:fill>
                        <s:SolidColor color="#2088c7"/>
                    </s:fill>
                </s:Rect>
                <s:HGroup width="100%" height="25" verticalAlign="middle" horizontalAlign="center">
                    <s:Label text="郑州新益旺电子科技有限公司" width="70%" height="100%" textAlign="right" verticalAlign="middle"/>
                    <mx:ProgressBar visible="true" width="30%" height="15" label="加载中..." direction="right" labelPlacement="center"/>
                </s:HGroup>
            </s:Group>
        </s:VGroup>
    </mdi:MDICanvas>
</s:Application>

 

名字:SelectedSuperTabNavigator.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/mx" width="400" height="300">
    <fx:Declarations>
    </fx:Declarations>
    
    <s:Rect left="1" right="1" top="1" bottom="0" topLeftRadiusY="6" topRightRadiusY="6" topLeftRadiusX="6" topRightRadiusX="6">
        <s:fill>
            <s:LinearGradient rotation="90">
                <s:GradientEntry color="#FFFFFF" alpha="1" />
                <s:GradientEntry color="#FFFFFF" alpha="1" />
            </s:LinearGradient>
        </s:fill>
    </s:Rect>
        
</s:SparkSkin>

名字:SuperTabNavigator.mxml
<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/mx" width="78" height="66">
    <fx:Declarations>
    </fx:Declarations>
    
    <s:Rect left="1" right="1" top="1" bottom="0" topLeftRadiusY="6" topRightRadiusY="6" topLeftRadiusX="6" topRightRadiusX="6">
        <s:fill>
            <s:LinearGradient rotation="90">
                <s:GradientEntry color="#ffffff" alpha="1"/>
                <s:GradientEntry color="#2088c7" alpha="1"/>
            </s:LinearGradient>
        </s:fill>
    </s:Rect>
</s:SparkSkin>

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

第一个图标显示不完全:

FLex3中弹出窗口包含TabNavigator时标签页的标题显示不完全的问题及解决方法

解决方法有3种：

1.增加样式activeTabStyle并设置字体不加粗。下面的代码为了统一标题的样式，也设置了TabNavigator的tabStyleName样式。

 

<?xml version="1.0" encoding="utf-8"?>
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" width="400" height="300" fontSize="12">
    <mx:Style>
        .tabStyle, .activeTabStyle
        {
            font-weight:normal
        }
    </mx:Style>
    <mx:Script>
        <!--[CDATA[
            import mx.managers.PopUpManager;
        ]]-->
    </mx:Script>
    <mx:TabNavigator width="100%" height="100%" creationPolicy="all" tabStyleName="tabStyle">
        <mx:Canvas label="基本信息" width="100%" height="100%">
            <mx:Button x="39" y="10" label="按钮"/>
        </mx:Canvas>
        <mx:Canvas label="基信本息" width="100%" height="100%">
            <mx:Label id="msgLbl" x="39" y="10" text="标签"/>
        </mx:Canvas>
    </mx:TabNavigator>
    <mx:ControlBar horizontalAlign="right">
        <mx:Button id="closeBtn" label="Close" click="PopUpManager.removePopUp(this)"/>
    </mx:ControlBar>
</mx:Panel>

2.保证最后一个文本控件的字体是加粗的。如以上的代码如果TabNavigator的creationPolicy是默认的auto，则由于closeBtn默认是加粗的，因此可以不设置。如果creationPolicy是all，则必须保证最后一页的最后一个控件的字体是加粗的，也可以放一个不显示的Label，如

<mx:Label includeInLayout="false" visible="false" text="隐藏的Label" fontWeight="bold"/>

3.在第一个标签页的label后加一个空格，如

 

<mx:Canvas label="基本信息 " width="100%" height="100%">

 

 经试验，所需空格的数量标题的长度有关，当标题只有一个字时不用加空格，之后每增加4个字要加一个空格。

如果弹出窗口时不执行PopUpManager.centerPopUp()，或者不用弹出窗口、TabNavigator直接显示在Application中，此时TabNavigator显示出来后会再刷新一次从而显示正确的标题，因此不需做任何改动。