Using FTE in MX controlsThe 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 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>
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:
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:
|
|
