Using an embedded font with the ColorPicker control in Flex

The following example shows how you can use an embedded font with the Flex ColorPicker control by setting the fontFamily style.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/06/15/using-an-embedded-font-with-the-colorpicker-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: Base02Embedded;
        }
    </mx:Style>

    <mx:Script>
        <![CDATA[
            private function uintToHex(value:uint):String {
                var prefix:String = "000000";
                var str:String = String(prefix + value.toString(16));
                return "#" + str.substr(-6).toUpperCase();
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:ColorPicker id="colorPicker"
                fontFamily="Base02Embedded"
                editable="false" />
        <mx:Label id="lbl"
                text="{uintToHex(colorPicker.selectedColor)}"
                fontFamily="_typewriter"
                fontSize="16" />
    </mx:ApplicationControlBar>

</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/15/using-an-embedded-font-with-the-colorpicker-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: Base02Embedded;
        }

        ColorPicker {
            fontFamily: Base02Embedded;
        }
    </mx:Style>

    <mx:Script>
        <![CDATA[
            private function uintToHex(value:uint):String {
                var prefix:String = "000000";
                var str:String = String(prefix + value.toString(16));
                return "#" + str.substr(-6).toUpperCase();
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:ColorPicker id="colorPicker"
                editable="false" />
        <mx:Label id="lbl"
                text="{uintToHex(colorPicker.selectedColor)}"
                fontFamily="_typewriter"
                fontSize="16" />
    </mx:ApplicationControlBar>

</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/15/using-an-embedded-font-with-the-colorpicker-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        creationComplete="init();">

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

    <mx:Script>
        <![CDATA[
            private function init():void {
                colorPicker.setStyle("fontFamily", "Base02Embedded");
            }

            private function uintToHex(value:uint):String {
                var prefix:String = "000000";
                var str:String = String(prefix + value.toString(16));
                return "#" + str.substr(-6).toUpperCase();
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:ColorPicker id="colorPicker"
                editable="false"
                initialize="init();" />
        <mx:Label id="lbl"
                text="{uintToHex(colorPicker.selectedColor)}"
                fontFamily="_typewriter"
                fontSize="16" />
    </mx:ApplicationControlBar>

</mx:Application>

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

Tagged as: fontFamily