Displaying different fonts in a Spark List control in Flex 4

By Peter deHaan On July 17, 2009 · 7 Comments

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 http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://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.

 
Tagged with: • •
 
About The Author

Peter deHaan

Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.

Visit Authors Website →

  • Add Widgets (Content Sidebar)

    This is your Content Sidebar. Edit this content that appears here in the widgets panel by adding or removing widgets in the Content Sidebar area.

Share
Facebook Twitter

7 Responses to Displaying different fonts in a Spark List control in Flex 4

  1. ATD says:
    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. A V says:
    April 22, 2010 at 11:23 am

    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

    Reply
    • Peter deHaan says:
      April 22, 2010 at 2:01 pm

      @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

      Reply
      • A V says:
        April 22, 2010 at 3:29 pm

        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

      • Peter deHaan says:
        April 22, 2010 at 3:58 pm

        @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

Leave a Reply

Your email address will not be published.

You may 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