Displaying different fonts in a Spark List control in Flex 4

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 trial, see www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.

For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.

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

7 thoughts on “Displaying different fonts in a Spark List control in Flex 4

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

  2. Would you mind sharing what you did to get rid of the “Access of undefined property selectionColor” error with the newer 4.0.0 sdk? I’m currently porting something and getting the same error.

    Thanks,
    -V

    1. @A V,

      I just compiled the above example with Flex 4.0 and Flex 4.1 beta and didn’t get any errors. Were you using the above code, or something slightly different?

      Peter

      1. Thanks for the quick response. I was doing something a little different (a custom ItemRenderer) but was getting the identical error. I found the solution, however. Moving to 4.0.0 release compiler from the beta 2 sdk, the default styles (selectionColor, contentBackgroundColor, etc.) are no longer directly referencable from within my extending class, as in:

        <s:fill>
            <s:SolidColor color.normal="{contentBackgroundColor)}"
                    color.normalAndShowsCaret="{contentBackgroundColor}"
                    color.hovered="{rollOverColor}"
                    color.hoveredAndShowsCaret="{rollOverColor}"
                    color.selected="{selectionColor)}"
                    color.selectedAndShowsCaret="{selectionColor)}" />
        </s:fill>

        I was required to call getStyle() to access the styles, as below:

        <s:fill>
            <s:SolidColor color.normal="{getStyle('contentBackgroundColor')}"
                    color.normalAndShowsCaret="{getStyle('contentBackgroundColor')}"
                    color.hovered="{getStyle('rollOverColor')}"
                    color.hoveredAndShowsCaret="{getStyle('rollOverColor')}"
                    color.selected="{getStyle('selectionColor')}"
                    color.selectedAndShowsCaret="{getStyle('selectionColor')}" />
        </s:fill>

        More info here: https://opensource.adobe.com/wiki/display/flexsdk/Item+Renderer+Changes

      2. @A V,

        I may be wrong, but I thought that the Boolean ItemRenderer autoDrawBackground property handles all that for you and you could probably just use something like this for an item renderer and have the rollOverColor and selectionColor styles applied to the item renderer:

        <?xml version="1.0" encoding="utf-8"?>
        <s:ItemRenderer name="CustomItemRenderer"
                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">
         
            <s:Label text="{data.label}"
                    left="2" right="2" top="4" bottom="4" />
         
        </s:ItemRenderer>

        In fact, I would probably advise against a lot of data binding in your item renderers due to possible performance problems.

        Peter

Comments are closed.