Using an embedded font with the TabBar control in Flex

The following example shows how you can use an embedded font with the Flex TabBar control by setting the fontFamily and fontWeight styles.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/06/07/using-an-embedded-font-with-the-tabbar-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        @font-face {
            src: local("Base 02");
            fontFamily: EmbeddedBase02;
            fontWeight: bold;
        }
    </mx:Style>

    <mx:VBox id="vBox"
            verticalGap="0"
            width="320"
            height="200">
        <mx:TabBar id="tabBar"
                dataProvider="{viewStack}"
                fontFamily="EmbeddedBase02"
                width="100%" />
        <mx:ViewStack id="viewStack"
                width="100%"
                height="100%"
                backgroundColor="white">
            <mx:VBox label="One">
                <mx:Label text="one..." />
            </mx:VBox>
            <mx:VBox label="Two">
                <mx:Label text="two..." />
            </mx:VBox>
            <mx:VBox label="Three">
                <mx:Label text="three..." />
            </mx:VBox>
            <mx:VBox label="Four">
                <mx:Label text="four..." />
            </mx:VBox>
            <mx:VBox label="Five">
                <mx:Label text="five..." />
            </mx:VBox>
        </mx:ViewStack>
    </mx:VBox>

</mx:Application>

View source is enabled in the following example.

You can also set the fontFamily style in an external .CSS file or <mx:Style /> block, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/06/07/using-an-embedded-font-with-the-tabbar-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        @font-face {
            src: local("Base 02");
            fontFamily: EmbeddedBase02;
            fontWeight: bold;
        }

        TabBar {
            fontFamily: EmbeddedBase02;
        }
    </mx:Style>

    <mx:VBox id="vBox"
            verticalGap="0"
            width="320"
            height="200">
        <mx:TabBar id="tabBar"
                dataProvider="{viewStack}"
                width="100%" />
        <mx:ViewStack id="viewStack"
                width="100%"
                height="100%"
                backgroundColor="white">
            <mx:VBox label="One">
                <mx:Label text="one..." />
            </mx:VBox>
            <mx:VBox label="Two">
                <mx:Label text="two..." />
            </mx:VBox>
            <mx:VBox label="Three">
                <mx:Label text="three..." />
            </mx:VBox>
            <mx:VBox label="Four">
                <mx:Label text="four..." />
            </mx:VBox>
            <mx:VBox label="Five">
                <mx:Label text="five..." />
            </mx:VBox>
        </mx:ViewStack>
    </mx:VBox>

</mx:Application>

Or, you can set the fontFamily style using ActionScript, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/06/07/using-an-embedded-font-with-the-tabbar-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        @font-face {
            src: local("Base 02");
            fontFamily: EmbeddedBase02;
            fontWeight: bold;
        }
    </mx:Style>

    <mx:Script>
        <![CDATA[
            private function init():void {
                tabBar.setStyle("fontFamily", "EmbeddedBase02");
            }
        ]]>
    </mx:Script>

    <mx:VBox id="vBox"
            verticalGap="0"
            width="320"
            height="200">
        <mx:TabBar id="tabBar"
                dataProvider="{viewStack}"
                width="100%"
                initialize="init();" />
        <mx:ViewStack id="viewStack"
                width="100%"
                height="100%"
                backgroundColor="white">
            <mx:VBox label="One">
                <mx:Label text="one..." />
            </mx:VBox>
            <mx:VBox label="Two">
                <mx:Label text="two..." />
            </mx:VBox>
            <mx:VBox label="Three">
                <mx:Label text="three..." />
            </mx:VBox>
            <mx:VBox label="Four">
                <mx:Label text="four..." />
            </mx:VBox>
            <mx:VBox label="Five">
                <mx:Label text="five..." />
            </mx:VBox>
        </mx:ViewStack>
    </mx:VBox>

</mx:Application>

Due to popular demand, here is the “same” example in a more ActionScript friendly format:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/06/07/using-an-embedded-font-with-the-tabbar-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        xmlns:comps="comps.*"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <comps:MyComp />

</mx:Application>

comps/MyComp.as

package comps {
    import mx.containers.VBox;
    import mx.containers.ViewStack;
    import mx.controls.Label;
    import mx.controls.TabBar;
    import mx.core.Container;

    public class MyComp extends VBox {
        [Embed(systemFont="Base 02",
                fontName="EmbeddedBase02",
                fontWeight="bold",
                advancedAntiAliasing="true",
                mimeType="application/x-font")]
        private var EmbeddedBase02:Class;

        public var tabBar:TabBar;
        public var viewStack:ViewStack;
        public var child1:Container;
        public var child2:Container;
        public var child3:Container;
        public var child4:Container;
        public var child5:Container;

        public function MyComp() {
            super();
            init();
        }

        private function init():void {
            setStyle("verticalGap", 0);
            width = 320;
            height = 240;

            var label1:Label;
            var label2:Label;
            var label3:Label;
            var label4:Label;
            var label5:Label;

            label1 = new Label();
            label1.text =  "one...";

            label2 = new Label();
            label2.text =  "two...";

            label3 = new Label();
            label3.text =  "three...";

            label4 = new Label();
            label4.text =  "four...";

            label5 = new Label();
            label5.text =  "five...";

            child1 = new VBox();
            child1.label = "One";
            child1.addChild(label1);

            child2 = new VBox();
            child2.label = "Two";
            child2.addChild(label2);

            child3 = new VBox();
            child3.label = "Three";
            child3.addChild(label3);

            child4 = new VBox();
            child4.label = "Four";
            child4.addChild(label4);

            child5 = new VBox();
            child5.label = "Five";
            child5.addChild(label5);

            viewStack = new ViewStack();
            viewStack.percentWidth = 100;
            viewStack.percentHeight = 100;
            viewStack.setStyle("backgroundColor", "white");
            viewStack.addChild(child1);
            viewStack.addChild(child2);
            viewStack.addChild(child3);
            viewStack.addChild(child4);
            viewStack.addChild(child5);
            addChild(viewStack);

            tabBar = new TabBar();
            tabBar.dataProvider = viewStack;
            tabBar.percentWidth = 100;
            tabBar.setStyle("fontFamily", "EmbeddedBase02");
            addChildAt(tabBar, 0)
        }
    }
}

And finally, if you wanted to use a normal font weight instead of the default bold font weight, you could use the following snippet:

<mx:Style>
    @font-face {
        src: local("Base 02");
        fontFamily: EmbeddedBase02;
        fontWeight: normal;
    }

    TabBar {
        fontFamily: EmbeddedBase02;
        tabStyleName: normalTabStyleName;
        selectedTabTextStyleName: normalTabStyleName;
    }

    .normalTabStyleName {
        fontWeight: normal;
    }
</mx:Style>

Base 02 font by http://www.stereo-type.net/.

Tagged as: fontFamily, fontWeight