Flex Examples

The following example shows how you can check whether an embedded font has a specific glyph by passing a string to the hasGlyph() method which returns a Boolean value indicating whether the font has the specified character(s).

Full code after the jump.

To filter the fonts by glyph, type a few characters into the “Chars” text input. If a font does not have the specified characters it will be removed from the font list. Each of the fonts have the traditional A-Z, 0-9, so to see the filtering in all its glory, try typing “#” or “$” and the embedded ‘Base 02′ font should disappear from the list.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/01/31/determining-whether-a-font-has-specific-glyphs-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="horizontal"
        verticalAlign="top"
        backgroundColor="white"
        initialize="init();">

    <mx:Style source="fonts.css" />

    <mx:Script>
        <![CDATA[
            import mx.events.ListEvent;

            private const START:uint = 0x0020;
            private const END:uint = 0x007E; 

            private function init():void {
                arr = Font.enumerateFonts(false)
                arrColl.source = arr;

                var str:String = "";
                var idx:uint;
                for (idx = START; idx < END; idx++) {
                    str += String.fromCharCode(idx);
                }
                textArea.text = str;
            }

            private function arrColl_filterFunc(item:Font):Boolean {
                return item.hasGlyphs(textInput.text);
            }

            private function list_rollOut(evt:MouseEvent):void {
                var f:Font = List(evt.currentTarget).selectedItem as Font;
                if (!f) {
                    // No selected item, abort!
                    return;
                }
                textArea.setStyle("fontFamily", f.fontName);
                samplePanel.title = "Sample: " + f.fontName;
            }

            private function list_itemClick(evt:ListEvent):void {
                var f:Font = List(evt.currentTarget).selectedItem as Font;
                if (!f) {
                    // No selected item, abort!
                    return;
                }
                textArea.setStyle("fontFamily", f.fontName);
                samplePanel.title = "Sample: " + f.fontName;
            }

            private function list_rollOver(evt:ListEvent):void {
                var f:Font = evt.itemRenderer.data as Font;
                textArea.setStyle("fontFamily", f.fontName);
                samplePanel.title = "Sample: " + f.fontName;
            }
        ]]>
    </mx:Script>

    <mx:Array id="arr" />

    <mx:ArrayCollection id="arrColl"
            filterFunction="arrColl_filterFunc">
        <mx:sort>
            <mx:Sort>
                <mx:SortField name="fontName"
                        caseInsensitive="true" />
            </mx:Sort>
        </mx:sort>
    </mx:ArrayCollection>

    <mx:Panel id="panel"
            title="Fonts:"
            status="{arrColl.length}/{arr.length}">
        <mx:List id="list"
                dataProvider="{arrColl}"
                labelField="fontName"
                width="100%"
                rowCount="{arr.length}"
                itemClick="list_itemClick(event);"
                itemRollOver="list_rollOver(event);"
                rollOut="list_rollOut(event);">
            <mx:itemRenderer>
                <mx:Component>
                    <mx:Label fontFamily="{data.fontName}" />
                </mx:Component>
            </mx:itemRenderer>
        </mx:List>
        <mx:ControlBar>
            <mx:Label text="Chars:" />
            <mx:TextInput id="textInput"
                    width="90"
                    change="arrColl.refresh();" />
        </mx:ControlBar>
    </mx:Panel>

    <mx:Panel id="samplePanel"
            title="Sample:"
            width="100%"
            height="100%">
        <mx:TextArea id="textArea"
                fontSize="{slider.value}"
                color="black"
                letterSpacing="10"
                width="100%"
                height="100%" />
        <mx:ControlBar>
            <mx:Label text="Font size:" />
            <mx:HSlider id="slider"
                    minimum="10"
                    maximum="60"
                    value="20"
                    snapInterval="1"
                    tickInterval="4"
                    liveDragging="true"
                    width="100%" />
        </mx:ControlBar>
    </mx:Panel>

</mx:Application>

View source is enabled in the following example.