Displaying different fonts in a Spark List control in Flex 4

by Peter deHaan on July 17, 2009

in List (Spark), beta2

In a previous example, “Displaying different fonts in a dropdown menu on a ComboBox control in Flex”, we saw how you could set different fonts for different items in a Flex ComboBox control’s dropdown menu by using a custom item renderer.

The following example shows you how you can display different fonts for each item in a Spark List control in Flex 4 by creating a custom item renderer.

Full code after the jump.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 beta, check out the Adobe Flash Builder 4 page on the Adobe Labs site. To download the latest build of the Flex 4 SDK, see http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4. For instructions on using the beta Flex 4 SDK in Flex Builder 3, see "Using the beta Flex 4 SDK in Flex Builder 3".

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/07/17/displaying-different-fonts-in-a-spark-list-control-in-flex-4/ -->
<s:Application name="Spark_List_itemRenderer_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx"
        initialize="init();">
 
    <fx:Script>
        <![CDATA[
            private function init():void {
                var fontArr:Array = Font.enumerateFonts(true); /* device fonts only */
                arrList = new ArrayList(fontArr.sortOn("fontName"));
            }
        ]]>
    </fx:Script>
 
    <fx:Declarations>
        <s:ArrayList id="arrList" />
    </fx:Declarations>
 
    <s:List id="fontList"
            dataProvider="{arrList}"
            labelField="fontName"
            itemRenderer="skins.CustomFontItemRenderer"
            fontSize="24"
            useVirtualLayout="true"
            width="200" height="200"
            horizontalCenter="0" verticalCenter="0" />
 
</s:Application>

And the custom item renderer, skins/CustomFontItemRenderer.mxml, is as follows:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/07/17/displaying-different-fonts-in-a-spark-list-control-in-flex-4/ -->
<s:ItemRenderer name="CustomFontItemRenderer"
        xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark" 
        xmlns:mx="library://ns.adobe.com/flex/mx" 
        autoDrawBackground="true">
    <!-- states -->
    <s:states>
        <s:State name="normal" />
        <s:State name="hovered" />
        <s:State name="selected" />
        <s:State name="normalAndShowsCaret" />
        <s:State name="hoveredAndShowsCaret" />
        <s:State name="selectedAndShowsCaret" />
    </s:states>
 
    <s:Label id="labelDisplay"
            fontFamily="{data.fontName}"
            verticalCenter="0"
            left="3" right="3" top="6" bottom="4"/>
 
</s:ItemRenderer>

This entry is based on a beta version of the Flex 4 SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex 4 SDK.

{ 3 comments… read them below or add one }

1 ATD January 28, 2010 at 5:23 pm

Hi Peter,

This doesn’t work in the newest version of the Flex 4 framework.

throws this error: 1120:Access of undefined property selectionColor

I will dig and post if I come up with the fix.

Reply

2 Peter deHaan January 28, 2010 at 6:07 pm

@ATD,

Yeah, a bunch of these posts are out of sync with the latest API changes… I’ll take a look and update the post in a few minutes.

Peter

Reply

3 Peter deHaan January 28, 2010 at 6:09 pm

Done! Updated post to work with Flex SDK 4.0.0.13771.

Peter

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: