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.

<?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 name="ColorPicker_fontFamily_test"
        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:

<?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:

<?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>

[Base02]

One thought on “Using an embedded font with the ColorPicker control in Flex

  1. Hi
    I like your flex tutorial and all of them is useful for me . Please place some tutorial about flex and sql interact ;)

Comments are closed.