Flex之TabNavigator

最新推荐文章于 2021-03-24 23:54:48 发布

转载最新推荐文章于 2021-03-24 23:54:48 发布 · 2.2k 阅读

文章标签：

#flex #datagrid #user #encoding #warnings #string

Flex 专栏收录该内容

69 篇文章

订阅专栏

TabNavigator默认是只初始化第一个TAB的，设一下属性，设了后会初始化其他TAB，creationPolicy="all"

补充下tab里面的容器是Canvas

动态生成TabNavigator tab页面

var canvas: Canvas = new Canvas();
canvas.label = "new Tab";
tabNavigator.addChild(canvas);

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

TabNavigator不仅可以支持Canvas作为子tab,也支持VBox作为子tab

我们想设置其样式,纯粹设置TabNavigator样式是不够的,它设置的只是内容容器的样式,而头部Tab的样式还是需要单独设置Tab的样式!

程序代码

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute" width="600" height="500" showFlexChrome="true" showStatusBar="false">
<mx:Style>

    TabNavigator{
        cornerRadius:0;
        tabWidth: 100;
        tabHeight: 30;
        borderStyle:solid;
        borderColor:red;
        selectedTabTextStyleName: "selectedTab";
    }


     .selectedTab{
        fontSize:14;
        fontWeight:bold;
        color:blue;
    }

     Tab{
        cornerRadius:5;
        fillAlphas:1,1;
        fillColors:#FFFFFF,#EEEEEE;
        borderColor:red;
        textRollOverColor:#CCCCCC;
        themeColor:#3370ce;
    }
</mx:Style>
    <mx:TabNavigator x="119" y="102" width="405" height="236">
         <mx:Canvas label="Tab 1" width="100%" height="100%"></mx:Canvas>
        <mx:Canvas label="Tab 1" width="100%" height="100%"></mx:Canvas>
        <mx:Canvas label="Tab 1" width="100%" height="100%"></mx:Canvas>
         <mx:Canvas label="Tab 1" width="100%" height="100%"></mx:Canvas>

    </mx:TabNavigator>
    <mx:TabNavigator id="tn" width="500" height="300"  creationPolicy="auto"    >

         <mx:VBox id="vb1" label="Column Chart Module">

            <mx:Label id="l1" text="ColumnChartModule.swf"/>
            <mx:ModuleLoader url="ColumnChartModule.swf"/>

        </mx:VBox>

        <mx:VBox id="vb2" label="Pie Chart Module">

            <mx:Label id="l2" text="piehchartmodule.swf"/>
            <mx:ModuleLoader url="piechartmodule.swf"/>

        </mx:VBox>

         <mx:VBox id="vb3" label="Line Chart Module">

            <mx:Label id="l3" text="linehchartmodule.swf"/>
            <mx:ModuleLoader url="linechartmodule.swf"/>

        </mx:VBox>

    </mx:TabNavigator>
</mx:WindowedApplication>

From：

http://www.gold98.net/blog/article.asp?id=967

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

TabNavigator的一个效果：

<mx:Style>

TabNavigator {

backgroundColor: black;

cornerRadius: 0;

tabStyleName: "MyTabs";

firstTabStyleName: "MyFirstTab";

lastTabStyleName: "MyLastTab";

selectedTabTextStyleName: "MySelectedTab";

}

.MyTabs {

backgroundColor: black;

cornerRadius: 0;

color: black;

}

.MyFirstTab,

.MyLastTab {

backgroundColor: black;

cornerRadius: 0;

color: black;

background-image:Embed('assets/longblue.png');

}

.MySelectedTab {

backgroundColor: haloBlue;

color: haloBlue;

textRollOverColor: haloBlue;

background-image:Embed('assets/longblue.png');

}

</mx:Style>

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

Flex中给TabNavigator控件增加Icons图标的例子：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white" viewSourceURL="srcview/index.html">

    <mx:XML id="model">
        <records>
            <record uuid="1" status="check" name="User 1" data="Data 1" />
            <record uuid="2" status="warning" name="User 2" data="Data 2" />
            <record uuid="3" status="warning" name="User 3" data="Data 3" />
            <record uuid="4" status="critical" name="User 4" data="Data 4" />
            <record uuid="5" status="check" name="User 5" data="Data 5" />
            <record uuid="6" status="check" name="User 6" data="Data 6" />
            <record uuid="7" status="warning" name="User 7" data="Data 7" />
            <record uuid="8" status="critical" name="User 8" data="Data 8" />
        </records>
    </mx:XML>

    <mx:Script>
        <![CDATA[
            [Bindable]
            [Embed(source="assets/bulletCheck.png")]
            private var BulletCheck:Class;

            [Bindable]
            [Embed(source="assets/bulletWarning.png")]
            private var BulletWarning:Class;

            [Bindable]
            [Embed(source="assets/bulletCritical.png")]
            private var BulletCritical:Class;

            private const CHECK:String = "check";
            private const WARNING:String = "warning";
            private const CRITICAL:String = "critical";
        ]]>
    </mx:Script>

    <mx:TabNavigator width="400" height="200">
        <mx:VBox label="Check" icon="{BulletCheck}">
            <mx:DataGrid id="gridCheck"
                    width="100%"
                    height="100%">
                <mx:columns>
                    <mx:DataGridColumn dataField="@name" />
                    <mx:DataGridColumn dataField="@data" />
                </mx:columns>
                <mx:dataProvider>
                    {model.record.(@status == CHECK)}
                </mx:dataProvider>
            </mx:DataGrid>
        </mx:VBox>

        <mx:VBox label="Warnings" icon="{BulletWarning}">
            <mx:DataGrid id="gridWarning"
                    width="100%"
                    height="100%">
                <mx:columns>
                    <mx:DataGridColumn dataField="@name" />
                    <mx:DataGridColumn dataField="@data" />
                </mx:columns>
                <mx:dataProvider>
                    {model.record.(@status == WARNING)}
                </mx:dataProvider>
            </mx:DataGrid>
        </mx:VBox>

        <mx:VBox label="Errors" icon="{BulletCritical}">
            <mx:DataGrid id="gridCritical"
                    width="100%"
                    height="100%">
                <mx:columns>
                    <mx:DataGridColumn dataField="@name" />
                    <mx:DataGridColumn dataField="@data" />
                </mx:columns>
                <mx:dataProvider>
                    {model.record.(@status == CRITICAL)}
                </mx:dataProvider>
            </mx:DataGrid>
        </mx:VBox>
    </mx:TabNavigator>

</mx:Application>

From：

http://blog.minidx.com/2008/07/23/1125.html