Flex Examples
The following example shows how you can use an embedded font with the MX AdvancedDataGrid control in Flex 4 by setting the embedAsCFF and fontFamily styles.
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/2010/02/24/using-embedded-fonts-with-the-mx-advanceddatagrid-control-in-flex-4/ --> <s:Application name="MX_AdvancedDataGrid_fontFamily_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"> <fx:Style> @namespace s "library://ns.adobe.com/flex/spark"; @namespace mx "library://ns.adobe.com/flex/mx"; @font-face { src: url("C:/Windows/Fonts/comic.ttf"); fontFamily: myEmbeddedFont; fontWeight: normal; embedAsCFF: false; } mx|AdvancedDataGrid { fontFamily: myEmbeddedFont; } </fx:Style> <mx:AdvancedDataGrid id="adg" horizontalCenter="0" verticalCenter="0"> <mx:columns> <mx:AdvancedDataGridColumn dataField="@label" /> <mx:AdvancedDataGridColumn dataField="@data" /> </mx:columns> <mx:dataProvider> <s:XMLListCollection id="dp"> <s:source> <fx:XMLList> <product label="Product 1" data="3" /> <product label="Product 2" data="1" /> <product label="Product 3" data="4" /> <product label="Product 4" data="1" /> <product label="Product 5" data="5" /> <product label="Product 6" data="9" /> </fx:XMLList> </s:source> </s:XMLListCollection> </mx:dataProvider> </mx:AdvancedDataGrid> </s:Application>
View source is enabled in the following example.
If you want to use a CFF/DefineFont4 font, you can set the embedAsCFF style to true and enable Flash Text Engine in MX components by selecting Project > Properties from the main menu and then selecting the “Use Flash Text Engine in MX components” option in the Flex Compiler category.
<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2010/02/24/using-embedded-fonts-with-the-mx-advanceddatagrid-control-in-flex-4/ --> <s:Application name="MX_AdvancedDataGrid_fontFamily_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"> <fx:Style> @namespace s "library://ns.adobe.com/flex/spark"; @namespace mx "library://ns.adobe.com/flex/mx"; @font-face { src: url("C:/Windows/Fonts/comic.ttf"); fontFamily: myEmbeddedFont; fontWeight: normal; embedAsCFF: true; } mx|AdvancedDataGrid { fontFamily: myEmbeddedFont; } </fx:Style> <mx:AdvancedDataGrid id="adg" horizontalCenter="0" verticalCenter="0"> <mx:columns> <mx:AdvancedDataGridColumn dataField="@label" /> <mx:AdvancedDataGridColumn dataField="@data" /> </mx:columns> <mx:dataProvider> <s:XMLListCollection id="dp"> <s:source> <fx:XMLList> <product label="Product 1" data="3" /> <product label="Product 2" data="1" /> <product label="Product 3" data="4" /> <product label="Product 4" data="1" /> <product label="Product 5" data="5" /> <product label="Product 6" data="9" /> </fx:XMLList> </s:source> </s:XMLListCollection> </mx:dataProvider> </mx:AdvancedDataGrid> </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.
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.
Share
This looks really handy, however could you identify which Flash Builder version you are using? I can not find this option in Flash Builder beta 2. Thanks
@Jing,
I’m cheating, I’m using a newer, internal build.
Sorry, I think you can also set the value in the “Additional compiler arguments” section of the same dialog box. Just add the following text:
-theme+=${flexlib}/projects/spark/MXFTEText.cssThat should work (or at least worked for me locally using a recent build), although I’m not sure the .CSS file had the same file name in Beta 2, so you may want to grab a newer nightly build (which you would probably want to do anyways since Beta 2 is a fairly old SDK by now).
Peter
Thanks Peter.
One suggestion, do you think this should be a default compile configuration? Because as a developer I am feeling really strange to turn on an option to enabled embed same font both works in Spark and Halo components.
Cheers,
Jing
No. I think it would potentially cause issues if you had an older app that you were bringing into Flash Builder. Your app may have compiled in Flex 3.x SDK since it was using the old text engine, but once you used the Flex 4 SDK, the text engine would change and your embeds would all be wrong since the default for
embedAsCFFis currently true.Peter
Plus when using MXFTEText.css or Flash Text Engine for MX control support, some MX controls no longer function as expected (for example; mx:TextInput, mx:TextArea, and I believe mx:RichTextEditor).
Peter