15
Jun
08

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/.


1 Response to “Using an embedded font with the ColorPicker control in Flex”


  1. 1 Omid Jun 27th, 2008 at 12:23 pm

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

Leave a Reply

This blog is terrible at eating HTML tags. If you plan on posting code/XML, please escape your "<" characters as "&lt;" and your ">" characters as "&gt;".