Using special characters in your Flex applications

Another good question/dilemma came up on FlexCoders the other day. A curious poster asked how you could embed a copyright symbol, ©, into a Flex application since using © did not seem to work. As it turns out, an easy way to do this is to use a character’s numeric value (©) instead of its code name (©).

Well, at any rate, here’s a handy little chart thing-a-ma-jig to hopefully help out if you’re looking for some specific codes. Granted, you could have probably found it on Google in a fraction of the time, but what fun would that be?

Full code after the jump.

Clicking on a row in the DataGrid control will display both the numeric and string values, for easy copy-paste goodness. Changing the values of the Slider control will change which characters are displayed. By default characters from   to Ȁ are displayed.

Download source (ZIP, 1K) | View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/08/02/using-special-characters-in-your-flex-applications/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        creationComplete="init()">

    <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;

            [Bindable]
            private var charCodes:ArrayCollection;

            private function init():void {
                charCodes = new ArrayCollection();
                var i:int;
                for (i = slider.values[0]; i <= slider.values[1]; i++) {
                    charCodes.addItem({charCodeNum:i, charCodeValue:"&#" + formatString(i) + ";",  charCodeStr:String.fromCharCode(i)});
                }
            }

            private function formatString(str:Object, minLength:int = 4):String {
                return ("000000000" + str.toString()).substr(-minLength);
            }
        ]]>
    </mx:Script>

    <mx:VBox>
        <mx:DataGrid id="dataGrid" dataProvider="{charCodes}" width="300">
            <mx:columns>
                <mx:DataGridColumn dataField="charCodeStr" />
                <mx:DataGridColumn dataField="charCodeValue" />
            </mx:columns>
        </mx:DataGrid>

        <mx:HBox width="100%">
            <mx:HSlider id="slider" minimum="32" maximum="512" thumbCount="2" values="[0, 512]" liveDragging="true" snapInterval="1" tickInterval="32" dataTipPrecision="0" change="init()" />
            <mx:Label text="`{dataGrid.selectedItem.charCodeStr}` = {dataGrid.selectedItem.charCodeValue}" selectable="true" />
        </mx:HBox>
    </mx:VBox>

    <mx:Label text="&#169; {new Date().fullYear} Flex Examples" />

</mx:Application>

View source is enabled in the following example.

Update 2007/09/01: I just discovered another trick today. You can use custom XML entities which allow you to use “©” from within your Flex applications instead of “©” or “©”:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/08/02/using-special-characters-in-your-flex-applications/ -->
<!DOCTYPE example[
    <!ENTITY copy "&#xA9;">
]>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Label text="&copy;" fontSize="64" />

</mx:Application>

Update 2008/08/19: You can also use special characters in your Flex applications using the following syntax: © (MXML), © (MXML), and \u00A9 (ActionScript), as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/08/02/using-special-characters-in-your-flex-applications/ -->
<mx:Application name="Button_label_Unicode_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="horizontal"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            private function init():void {
                btn3.label = "\\\\u00A9 - \\u00A9 (ActionScript)";
            }
        ]]>
    </mx:Script>

    <mx:Button id="btn1" label="&#169; - © (MXML)" />
    <mx:Button id="btn2" label="&#xA9; - © (MXML)" />
    <mx:Button id="btn3" creationComplete="init();" />

</mx:Application>

View source is enabled in the following example.

Tagged as: fromCharCode(), String.fromCharCode()