The following example shows how you can use a CFF embedded font with a Halo Label control and Spark Label control by setting the textFieldClass style on the Halo Label control to the mx.core.UIFTETextField class.
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/06/14/using-a-cff-embedded-font-with-a-halo-label-control-in-flex-4/ --> <s:Application name="Halo_Label_textFieldClass_test" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/halo"> <fx:Style> @namespace mx "library://ns.adobe.com/flex/halo"; @namespace s "library://ns.adobe.com/flex/spark"; @font-face { src: url("fonts/ArnoPro-Regular.otf"); fontFamily: ArnoEmbedded; embedAsCFF: true; } mx|Label, s|Label { fontFamily: ArnoEmbedded; fontSize: 24; } </fx:Style> <s:VGroup horizontalCenter="0" verticalCenter="0"> <mx:Label id="hLbl" text="The quick brown fox jumps over the lazy dog. [mx|Label]" textFieldClass="mx.core.UIFTETextField" width="100%" /> <s:Label id="sLbl" text="The quick brown fox jumps over the lazy dog. [s|Label]" width="100%" /> </s:VGroup> </s:Application>
View source is enabled in the following example.
You can also set the textFieldClass style using an external .CSS file or <Style/> block, as seen in the following example:
<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2009/06/14/using-a-cff-embedded-font-with-a-halo-label-control-in-flex-4/ --> <s:Application name="Halo_Label_textFieldClass_test" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/halo"> <fx:Style> @namespace mx "library://ns.adobe.com/flex/halo"; @namespace s "library://ns.adobe.com/flex/spark"; @font-face { src: url("fonts/ArnoPro-Regular.otf"); fontFamily: ArnoEmbedded; fontWeight: bold; embedAsCFF: true; } mx|Label { fontFamily: ArnoEmbedded; fontSize: 24; fontWeight: bold; textFieldClass: ClassReference("mx.core.UIFTETextField"); } s|Label { fontFamily: ArnoEmbedded; fontSize: 24; fontWeight: bold; } </fx:Style> <s:VGroup horizontalCenter="0" verticalCenter="0"> <mx:Label id="hLbl" text="The quick brown fox jumps over the lazy dog. [mx|Label]" width="100%" /> <s:Label id="sLbl" text="The quick brown fox jumps over the lazy dog. [s|Label]" width="100%" /> </s:VGroup> </s:Application>
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.
{ 4 comments… read them below or add one }
Will we be able to use the same css on a datagrid? I noticed the datagrid component also has the textFieldClass attribute. Applying similar css, as in your example, makes the text in the datagrid disappear.
NBiehl,
I haven’t tried this with the Halo DataGrid yet. Can you please file a bug at http://bugs.adobe.com/flex/ and include a simple test case and myself or somebody else can take a look at it.
Thanks,
Peter
Is there any reason why you would not want to automatically set the textFieldClass to the new TLF one? It seems like you would always want to do it in the stylesheet for all Labels (and Text too?) so that you can forget about the difference in the rest of the app.
I’d probably recommend using the new UITLFTextField class wherever possible. Although I’m semi-certain that they do not work with all Halo controls, so you may not be able to set the
textFieldClassstyle globally.Peter