Flex Examples
The following example shows how you can use a custom configuration file in a Flex Builder Flex project by specifying an additional compiler argument, -load-config.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/12/21/using-a-custom-flex-configxml-file-in-flex-builder-3/ -->
<mx:Application name="LoadConfig_fonts_test"
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Style>
@font-face {
src: url("assets/ARIAL.TTF");
fontFamily: "ArialEmbedded";
unicodeRange: "englishRange";
}
Text {
fontFamily: "ArialEmbedded";
fontSize: 32;
color: red;
}
</mx:Style>
<mx:ApplicationControlBar dock="true">
<mx:Form styleName="plain">
<mx:FormItem label="alpha:">
<mx:HSlider id="slider"
minimum="0.0"
maximum="1.0"
value="1.0"
snapInterval="0.05"
tickInterval="0.1"
liveDragging="true" />
</mx:FormItem>
</mx:Form>
</mx:ApplicationControlBar>
<mx:Text id="txt" width="300" alpha="{slider.value}">
<mx:text>The quick brown fox jumps over the lazy dog. 1234567890 ©</mx:text>
</mx:Text>
</mx:Application>
Next, create a custom configuration XML file named fontConfig.xml and save it in a /config/ subdirectory in your project’s /src/ directory. The folder structure isn’t important, but it helps keep the source code and configuration files separated. The fontConfig.xml file is a modified version of the flex-config.xml file found in the Flex SDK’s /frameworks/ directory. In this example we simply specify a single named font range which specifies a unicode range of U+0020 (space) to U+007E (~).
<?xml version="1.0"?>
<flex-config>
<compiler>
<fonts>
<!-- Defines ranges that can be used across multiple font-face declarations. -->
<!-- See flash-unicode-table.xml for more examples. -->
<languages>
<language-range>
<lang>englishRange</lang>
<range>U+0020-U+007E</range>
</language-range>
</languages>
</fonts>
</compiler>
</flex-config>
Finally, in Flex Builder, right click on the Flex Project folder in the Flex Navigator and select Properties from the context menu. Select the Flex Compiler section of the dialog menu and in the Additional compiler arguments: text box add the following text:
-load-config+=config/fontConfig.xml
Figure 1. Additional compiler arguments.
View source is enabled in the following example.
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
What could I use this for, I’ve only used the config file for my RPC service gateways. What can custom file do for a Flex dev?
Alan,
I’d use it for specifying a custom unicode range. You may not want to edit the Flex SDK’s flex-config.xml globally so using load-config with a custom config file would let you have an external config file which you could check into an SVN repository and share with other developers on a Flex project if you wanted have a client/project specific compiler settings.
Peter
Hmmmm, useful. Saves a bit of time in the round trip to Flash to make and embed a dynamic font swf. Do you know the syntax for adding individual unicode values to the range node? Is it just commas between values/sets of ranges or do you need to add more nodes?
Hi, I know that this is not the right topic for my problem, I just want to ask how to integrate a file in my application (built using adobe flex builder 3). This is my Problem:
I created an application using adobe flex builder 3.
I already build it and install it in my computer
I created an icon for fileType
and it works… when I double clicked the file with extension name ‘.mjm’ (.mjm is the file type I’ve set on app.xml), the application that I created open, but the file that I clicked din’t load its content on the application.
Is there any code for this problem?
Thanks in advance
Hi Peter,
This really very good example but when i am trying the same example in my Flex builder Workspace its throwing an error like “unable to resolve ‘assets/ARIAL.TTF’ for transcoding” please give me a suggestion on this issue.
Thanks in advance,
Chaitra H.
chaitra,
Make sure you have a assets/ARIAL.TTF in your project. Also, if you are using Mac or Linux, the filenames will be case sensitive, so make make sure that the file name is ARIAL.TTF (uppercase), or change the code to match whatever case the font name is on your machine.
Peter
I wanted to share a few observations relative to the 3.4 sdk and the Eclipse plugin of Flex Builder 3 (Mac OS X) –
Apparently a variant of this bug: https://bugs.adobe.com/jira/browse/SDK-21156 — “Library Project namespaces should be appended by default” exists in this environment. In particular, when using degrafa within a “Flex Library Project” rather than a regular “Flex Project” the following would not compile:
It generated a “Could not resolve to a component implementation. ” error.
Explicitly including the library in a config file, as per your example, fixed the problem. However, I had to include the full rooted path to the config file in the Project Properties Library Compiler settings, as follows:
-load-config+=/Users/username/Documents/workspace/projectname/src/config.xml
Also, since the file was in src, the library file had to be specified in the config.xml as:
<library>../libs/DegrafaLibrary.swc</library>
Shared in the interest of Google helping the next poor soul who hits this problem — and to offer another motivation for using this technique.
Well the pre tags didn’t work — the code that wouldn’t compile is:
<degrafa:GeometryGroup
xmlns:mx=”http://www.adobe.com/2006/mxml”
xmlns:degrafa=”http://www.degrafa.com/2007″
xmlns:geometry=”com.degrafa.geometry.*”>
Are you sure this is working? If I add
400
400
it has no effect. I’ve also tried:
report.xml
and no file is generated. Of course, if I add these options to the project properties, it works.
Am I missing something?
Lol. I guess I should read the big red sign before posting! Let’s try that again…
<default-size>
<width>400</width>
<height>400</height>
</default-size>
<link-report>report.xml</link-report>
Third time is the charm…
<default-size>
<width>400</width>
<height>400</height>
</default-size>
<link-report>report.xml</link-report>
Is there a way to customize the default application file that gets created when you create a new project? For instance, if for every future project I create I’d like to have some custom comments or Application properties (additional namespaces, height, width etc. set to particular defaults ) generated along with the usual look and feel of the Application tag in an initially generated file in the ide (either Flex 3 or Flash Builder) and/or when a New Application menu item is selected?
I have issue with reading xml from another domain, anyone has idea?
Thanks
Thank you very much for your example about custom compiler options.
Do you have any idea about this similar question: how can I insert the current date/time as a compiler option?
E.g. how to insert the contents of the %date% or %time% variable in Windows. This would help me to automatically have a version information in the .swf file like “Compiled: date, time”. Thank you very much!