Adding icons to a Flex TabBar control

This example is pretty similar to the previous entry “Adding icons to a Flex TabNavigator control” although it uses a TabBar control instead of a TabNavigator control. Well, that and this post doesn’t bother with an XML object and the DataGrid controls.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/08/21/adding-icons-to-a-flex-tabbar-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <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;
        ]]>
    </mx:Script>

    <mx:VBox id="box" width="400" verticalGap="0">
        <mx:TabBar id="tabBar"
                direction="horizontal"
                dataProvider="{viewStack}"
                width="100%" />

        <mx:ViewStack id="viewStack"
                width="100%"
                height="100"
                backgroundColor="white"
                borderSides="left bottom right"
                borderStyle="solid"
                borderThickness="1">

            <mx:Canvas id="child1"
                    label="Success"
                    icon="{BulletCheck}">
                <mx:Label text="one" />
            </mx:Canvas>

            <mx:Canvas id="child2"
                    label="Warning"
                    icon="{BulletWarning}">
                <mx:Label text="two" />
            </mx:Canvas>

            <mx:Canvas id="child3"
                    label="Error"
                    icon="{BulletCritical}">
                <mx:Label text="three" />
            </mx:Canvas>

        </mx:ViewStack>
    </mx:VBox>

</mx:Application>

View source is enabled in the following example.

8 thoughts on “Adding icons to a Flex TabBar control

  1. hi
    i am developing one simple application
    which contains 10 tabs over all but according to the user group
    example:- 1.Admin 2.Developer 3.Tester 4.Trainee
    i want show different tabs means for admin i want to show all
    for tester i want to show 5 tabs
    for developer i want to show 8 tabs
    at the time of loading my application i am inserting all the items in tab bar and then removing the unwanted tabs using remove child but it is working for single time
    if i loge3d in as a admin and then i login as tester and then again tester it is showing the eror
    pls help me to solve this

  2. Hi, I found this example a perfect resources for what I want to do except for one thing: how to declare an icon as a class when creating the tabBar dynamically from a list (that can differ time-to-time) of types of product.

    In another words, I have to deal with different alternatives to show the different types of product available and for design purpose, I decided to opt for a tabBar. Until now everything is fine until I wanted to use the icon option you are proposing. This is agreat feature but I cannot create a public icon-class variable for each possible option – this will not be efficient as the types of product can be added by an admin of the application or can be removed from the same source. Is there any way to create a class to contain the icon dynamically?

    Thank’s!

  3. Hi everybody and this blog owner :)

    i’m totally new to flex.
    currently i am using flex 3.

    And i have some problems and hope u guys can help me and guide me.

    I have one ADG(Advanced DataGrid) control and have several rows and columns.

    My problem is I can’t add icon to other columns except first, tree columns.
    I try and googling but found no example which explain how to do it.

    I only found add icon to list, tab, etc.
    i have tried and failed many times so i just drop a message here and hope u guys can help me.

    thanks.

  4. Hi

    I want to change the icons when it selected and rollover.

    Can you help me out on that?

    Thanks

Comments are closed.