Using FTE in MX controls

The controls that support FTE include all Spark components in the spark.components.* package. This includes the Spark text controls such as Label, RichText, and RichEditableText. This also includes Spark versions of the TextInput and TextArea controls. This does not include MX controls in the mx.controls.* package.

The reason that MX controls do not support FTE is that in previous versions of Flex, they used the UITextField subcomponent to render text. This subcomponent does not support FTE. Spark controls, on the other hand, use FTE-compatible classes to render text.

The Flex SDK provides the mx.core.UIFTETextField and mx.controls.MXFTETextInput classes that support FTE for MX text controls. You can use these classes in some MX controls so that those controls can use CFF versions of embedded fonts. As a result, those controls can use the same embedded fonts that you also use with the Spark controls. You do this by setting the textFieldClass and textInputClass styles to use these classes.

The easiest way to use the MXFTETextInput and UIFTETextField classes with your MX text controls is to apply the MXFTEText.css theme file to your application. This theme causes your MX controls to use the MXFTETextInput and UIFTETextField classes for text rendering. The MXFTEText.css theme file is a convenience theme that is set up to apply only FTE-supporting classes to MX controls.

The following excerpt from the MXFTEText.css theme file shows that the textInputClass and textFieldClass style properties are set to classes that support FTE:
DateField { 
    textInputClass: ClassReference("mx.controls.MXFTETextInput"); 
} 
Label { 
    textFieldClass: ClassReference("mx.core.UIFTETextField"); 
}

On the command line, you specify the MXFTEText.css theme file by using the theme compiler option, as the following example shows:

mxmlc -theme+=themes/MXFTEText.css MyApp.mxml

Note that instead of setting theme=filename, this example uses theme+=filename. This is so that the MXFTEText.css file is used as a theme, in addition to the default theme, not as a replacement of the default theme.

In Flash Builder, you can use the MXFTEText.css theme file in your application by selecting Project > Properties > Flex Compiler. Then select the Use Flash Text Engine in MX Components option.

The following example is compiled with the the MXFTEText.css theme. Because this theme is used, the MX text controls can use the same embedded font as the Spark embedded font. If you compile this example without the theme option, the label for the MX Button does not render.
<?xml version="1.0"?>
<!-- fonts/UseTLFTextTheme.mxml -->
<!-- Compile this example by setting theme=MXFTEText.css for a compiler argument. -->
<s:Application 
    xmlns:fx="http://ns.adobe.com/mxml/2009"    
    xmlns:mx="library://ns.adobe.com/flex/mx"     
    xmlns:s="library://ns.adobe.com/flex/spark">

    <s:layout> 
        <s:VerticalLayout/> 
    </s:layout>

  <fx:Style>
     @font-face {
        src:url("../assets/MyriadWebPro.ttf");
        fontFamily: myCFFFont;
        embedAsCFF: true;
     }

     .myCFFStyle {
        fontSize: 32;
        fontFamily: myCFFFont;
     }
  </fx:Style>

  <s:Panel title="Spark and MX Buttons"> 
    <s:VGroup>
        <s:Button label="Spark Button" styleName="myCFFStyle"/> 
        <mx:Button label="MX Button" styleName="myCFFStyle"/>
    </s:VGroup>
  </s:Panel>

</s:Application>

The executing SWF file for the previous example is shown below:

The MX DataGrid control has a special class, FTEDataGridItemRenderer, that you can use for custom item renderers. The MXFTEText.css theme file specifies it as follows:
defaultDataGridItemRenderer: ClassReference("mx.controls.dataGridClasses.FTEDataGridItemRenderer");

Some controls are not affected by the MXFTEText.css theme. This is because some MX controls have Spark equivalents, such as Button or ComboBox. As a result, you should use the Spark version of the control instead of the MX version where possible.

Rather than use the MXFTEText.css theme file to add FTE support to your MX controls, you can manually replace the non-FTE classes with the FTE classes for text rendering on a MX control. You do this by setting the value of the control’s textFieldClass or textInputClass style properties to the UIFTETextField or MXFTETextInput classes, as the following example shows:
<?xml version="1.0" encoding="utf-8"?>
<!-- fonts/TextFieldClassExample.mxml -->
<s:Application 
    xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark"           
    xmlns:mx="library://ns.adobe.com/flex/mx">

    <s:layout>
        <s:VerticalLayout 
            paddingLeft="20" paddingRight="20"
            paddingTop="20" paddingBottom="20" />
    </s:layout>

    <fx:Style>
        @namespace mx "library://ns.adobe.com/flex/mx";
        @namespace s "library://ns.adobe.com/flex/spark";

        @font-face {
            src:url("../assets/MyriadWebPro.ttf");
            fontFamily: cffFont;
            embedAsCFF: true; 
        }

        mx|Label{
            fontFamily: cffFont;
            fontSize: 22;
            textFieldClass:ClassReference("mx.core.UIFTETextField"); 
        }
        s|Label{
            fontFamily: cffFont;
            fontSize: 22;
        }
    </fx:Style>

    <mx:Label text="Hello World 1234567890 [MX Label]" width="100%"/>
    <s:Label text="Hello World 1234567890 [Spark Label]" width="100%"/>

</s:Application>

The executing SWF file for the previous example is shown below:

You can also specify the value of the textFieldClass or textInputClass style properties inline, as the following example shows:
<mx:Label text="Hello World 1234567890 [Label]" width="100%" textFieldClass="mx.core.UIFTETextField"/>

Do not use the setStyle() method to specify the value of these style properties in ActionScript.

The UIFTETextField class does not support editing, scrolling, selection, linking, or rich text. As a result, you can only use this class on MX controls that do not use these features. The MXFTETextInput class can be edited and is selectable.

The following MX controls support the UIFTETextField and MXFTETextInput classes, which means that you can use CFF fonts with them:
  • Accordion

  • Alert (the text is not selectable)

  • Button

  • ButtonBar

  • CheckBox

  • DateChooser

  • FileSystemComboBox

  • FileSystemHistoryButton

  • FormHeading

  • FormItem

  • FormHeading

  • FormItem

  • HSlider (the labels follow the same rules as the MX Label control)

  • LinkBar

  • LinkButton

  • Menu

  • MenuBar

  • Panel

  • PopUpButton

  • PopUpMenuButton

  • PrintDataGrid

  • ProgressBar

  • RadioButton

  • TabBar

  • TabNavigator

  • TitleWindow

  • ToggleButtonBar

  • ToolTip

  • VSlider (the labels follow the same rules as the MX Label control)

Other MX controls have some limitations when it comes to using the UIFTETextField and MXFTETextInput classes. In some cases, you should use the Spark equivalents. In other cases, you can use the UIFTETextField and MXFTETextInput subcomponents with the MX control, as long as you avoid using advanced text features, such as editability or the htmlText property. The following table describes these limitations:

MX control

Description

List-based components (such as List, FileSystemList, HorizontalList, TileList, DataGrid, and Tree)

Some list-based components have Spark equivalents (including List, HorizontalList, and TileList). You can use the UIFTETextField and MXFTETextInput classes in the other components if you do not use selection, editability, HTML links, or scrolling. Otherwise, you should embed a non-CFF version of the font to support these controls.

Label and Text

Use Spark equivalents such as Label, RichText, and RichEditableText. You can use UIFTETextField with the Label and Text controls if the text is not selectable or you do not use the htmlText property to specify the content of the controls.

Otherwise, you should embed a non-CFF version of the font to support these controls.

TextInput and TextArea

Use the Spark equivalents. Otherwise, you should embed a non-CFF version of the font to support these controls.

RichTextEditor

There is no equivalent class. In this case, you should embed a non-CFF version of the font to support this control.

ColorPicker

There is no equivalent class. In this case, you should embed a non-CFF version of the font to support this control. However, the ColorPicker control only uses the font to display a color value, so in some cases, using an embedded font might not be necessary.

ComboBox

Use the Spark equivalent. If your ComboBox’s text does not need to be editable, you can use the MXFTETextInput class. Otherwise, you should embed a non-CFF version of the font to support this control.

DateField

If you do not use editability, then you can use the MXFTETextInput class. Otherwise, you should embed a non-CFF version of the font to support this control.

NumericStepper

If you do not use editability, then you can use the MXFTETextInput class. Otherwise, you should embed a non-CFF version of the font to support this control.