Displaying different fonts in a dropdown menu on a ComboBox control in Flex

by Peter deHaan on July 31, 2008

in ComboBox, Component

The following example shows how you can set different fonts for different items in a Flex ComboBox control’s dropdown menu by using a custom item renderer.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/07/31/displaying-different-fonts-in-a-dropdown-menu-on-a-combobox-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="top"
        backgroundColor="white">

    <mx:ArrayCollection id="arrColl"
            source="{Font.enumerateFonts(true)}">
        <mx:sort>
            <mx:Sort>
                <mx:fields>
                    <mx:SortField name="fontName" />
                </mx:fields>
            </mx:Sort>
        </mx:sort>
    </mx:ArrayCollection>

    <mx:ComboBox id="comboBox"
            dataProvider="{arrColl}"
            labelField="fontName"
            fontSize="14"
            open="comboBox.dropdown.variableRowHeight = true;">
        <mx:itemRenderer>
            <mx:Component>
                <mx:Label fontFamily="{data.fontName}"
                        toolTip="{data.fontName}" />
            </mx:Component>
        </mx:itemRenderer>
    </mx:ComboBox>

</mx:Application>

View source is enabled in the following example.

For an example of doing this in the Flex 4 SDK, see “Displaying different fonts in a Spark List control in Flex 4″.

{ 14 comments… read them below or add one }

1 George September 23, 2008 at 9:47 am

I cannot seem to figure out how to pull the selected font to a textbox so I can see what is selected. I have tried all kinds of things:
{myFont.labelField}
{myFont.selectedItem.label}

The comboBox id is myFont

Any insight would be great

Thanks
G.

Reply

2 peterd September 23, 2008 at 5:44 pm

George,

<mx:Label text="{comboBox.selectedItem.fontName}" />

Peter

Reply

3 Chris October 20, 2008 at 6:53 am

Love the site, lots of good nuggets.

Building upon this topic, any ideas how to add an embedded font to a Rich Text Editor? Not just assign the embedded font, but append multiple to the RTE. I’ve always been able to push a fontName to the fontFamilyArray, but the font never renders in the RTE, I always get a default font to render.

Example:

<mx:Style>
    @font-face {
        src:url("AABIGFICTION.swf");
        fontFamily: "AABIGFICTION";
    }
</mx:Style>

<mx:Script>
    RTE.fontFamilyArray.push('AABIGFICTION');
</mx:Script>

<mx:RichTextEditor fontAntiAliasType="advanced" x="134" y="21" id="RTE" title="Title" width="440" height="368" enabled="true"></:RichTextEditor>

Reply

4 peterd October 20, 2008 at 8:16 am

Chris,

I don’t believe you can mix embedded fonts and non-embedded fonts in a text field (but of course, I could be wrong). I did a quick test and it seems my text was disappearing after selecting some text and changing the font family.

That said, if I only use embedded fonts in the RichTextEditor, then this code seems to work:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Style>
        @font-face {
            src: local("Verdana");
            fontFamily: "VerdanaEmbedded";
        }
        @font-face {
            src: local("Arial");
            fontFamily: "ArialEmbedded";
        }
        @font-face {
            src: local("Comic Sans MS");
            fontFamily: "ComicSansMSEmbedded";
        }
    </mx:Style>

    <mx:Script>
        <![CDATA[
            private function init():void {
                richTextEditor.fontFamilyArray = ["VerdanaEmbedded", "ArialEmbedded", "ComicSansMSEmbedded"];
            }
        ]]>
    </mx:Script>

    <mx:RichTextEditor id="richTextEditor"
            creationComplete="init();" />

</mx:Application>

Of course, since the RichTextEditor control allows users to change the text to bold or italic (or both), you’d want to embed the regular font face as well as the combination of bold, italic, and bold+italic font faces (so embed four font faces per font family).

Hope that helps,

Peter

Reply

5 Chris October 20, 2008 at 8:50 am

Peter,

You are right, you cant’ mix device and embedded fonts in a text field. If I embed a device font like you did in your example, I get the same result, it works perfectly.

But, if I use a compiled swf containing a whole fontfamily, or embed a true type or open type font, I can’t get the fonts to render right. I can assign a font like in the example below, but if I try to utilize the fontfamilyarray, you get a default font rendering. The underlying html though, shows the correct font selection, the rendering in the RTE only doesn’t show the right font.

I can get a font (AABIGFICTION) to work like this:

<mx:Style>
	@font-face {
		src:url("AABIGFICTION.swf");
		fontFamily: "AABIGFICTION";
		}
		@font-face {
		src:url("Baskerville_Old_Face.swf");
		fontFamily: "Baskerville_Old_Face";
		}

</mx:Style>

<mx:Script>
<![CDATA[
private function returnHandler():void {

RTE.fontFamilyArray = ["AABIGFICTION", "Baskerville_Old_Face"];
}
	]]>
</mx:Script>

<mx:RichTextEditor id="RTE" title="Title" width="440" fontFamily="AABIGFICTION" height="368" creationComplete="returnHandler();">

Reply

6 Chris October 23, 2008 at 11:25 am

I just figured this one out. Make sure that if you embed a font, that every font used by the movie is embedded. Because if flex tries to use a font that is not embedded, Flex will automatically switch to using system fonts. IT WILL IGNORE YOUR EMBEDDED FONTS.

In my project, I was embedding 2 non-system fonts. The Rich Text editor by default uses Verdana to display your text size, font, all the control components that belong to the Rich Text Editor… And since I didn’t embed Verdana, Flex ignored my embedded fonts, and forced the movie to use Verdana. After I embedded the system font (Verdana) everything worked as expected.

Reply

7 Chris M October 28, 2008 at 9:38 am

do you know how to get a combo box in a rich text editor to do this. Trying to do it in AS3 not MXML.

Reply

8 gray21 March 31, 2009 at 2:38 am

Hi,
I would like to know how to create a ComboBox which contains and displays many embedded fonts in a dropdown menu with MXML ?

Thanks for you help.

Reply

9 alfred April 6, 2009 at 5:55 am

My local machine available of some unicode font in chinese character. Once i try with this application inside the drop down list found that unicode font is render inproper appear as “???????”. Any way to resolve this?

Reply

10 gosai kishorgiri keshavgiri July 26, 2009 at 7:06 am

dear sir
i have found code for fomt-family dropdown menu and you give this code in your website that i cant understand in which format should i save it doesn’t run save as html mhtml mxml actually i want to use them in my web page but i cant use it so please kindly tel me what type of file should i create with your code

Reply

11 Peter deHaan July 26, 2009 at 1:25 pm

gosai kishorgiri keshavgiri,

Here’s a quick “how to”:
1) Create a new Flex Project in Flex Builder 3.
2) Copy the code from the post into your new Flex project’s default .MXML file.
3) Run the project from Flex Builder and verify it works.
4) Select Project > Export Release Build from the Flex Builder main menu. This will export all the files to some .HTML, .JS, and a .SWF files.
5) Upload the files from the Flex Project’s /bin-release/ to your website.
6) View the .HTML file on your website.

Peter

Reply

12 Oki August 20, 2009 at 2:14 am

That’s great code, but I am wondering and is there a way to achieve same effect with flash cs3 combobox control and actionscript 3

Reply

13 nidin December 26, 2009 at 8:00 am

hi,
can you please give me the as3 code for flash to do the same !
thanks

Reply

14 Anonymous February 7, 2010 at 12:10 am

Hi,
I have tried this code, but it run incorrectly on flash 10. Weddings, Winding and some simsun-PUA is display incorrectly.
Can you help me to figure out what ’s wrong with it.
Here ’s quick “how to”:
1) 1) Create a new Flex Project in Flex Builder 3.
2) Copy the code from the post into your new Flex project’s default .MXML file.
3) Open your project properties. On the Flex Compiler, input “10.0.10″ for the item “Require Flash Player version” to specify the flash version
3) Run the project from Flex Builder and verify it works.

Reply

Leave a Comment

Sorry, this blog is terrible at eating HTML comments.
If you're pasting any HTML/XML/MXML code, you need to convert your < characters to &lt; and your > characters to &gt; .

You can use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

Anti-Spam Protection by WP-SpamFree

Previous post:

Next post: