Flex4: issues creating CSS file to use with application

Question

I use a file for declaring CSS styles:

/* CSS file */
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
@namespace view "com.myviews.*";
@namespace comp "com.myviews.mycomponents.*"; 

@font-face {
    font-family:arial_s;
    src:url("Fonts/Arial.ttf");
    embed-as-cff:true;
    font-weight:normal;
    font-style:normal
}

@font-face {
    font-family:arial_mx;
    src:url("Fonts/Arial.ttf");
    embed-as-cff:false;
    font-style:normal;
    font-weight:normal;
}

global {
    font-family:arial_s; font-size:12.5;  
}

s|DropDownList {
    cornerRadius:0;
}

Q1: I get this warning on the line above for s|DropDownList:

The CSS type selector 'spark.components.DropDownList' was not processed, because the type was not used in the application.

But it IS used in the application, and changing its value here DOES have an effect. Any idea why I'm getting this warning?

Q2: When I run the application in debug mode, I get the warning:

warning: incompatible embedded font 'arial_s' specified for mx.core::UITextFormat. This component requires that the embedded font be declared with embedAsCFF=false.

The warning is coming because I've used the global attribute for spark components above, and this causes it to be applied to all components including some mx components. The component of interest here is text in a DataGrid cell. I just need to figure out how to separately define the style for mx.core::UITextFormat. Any idea what the syntax is for this? I tried:

mx|UITextFormat {
    font-family:arial_mx;
}  

but it doesn't work. Not sure what to do. http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/core/UITextFormat.html

Answer 1

The docs for UITextFormat don't include any CSS styles.

This is just a hunch, but since UITextFormat is really just a format that is applied to a UITextField, maybe you can just apply the font style to the UITextField object:

mx|UITextField {
    font-family:arial_mx;
}

In regards to the first question regarding the DropDownList, is it possible that the DownDownList is in a library project and not actually in the application project? If so, you can create a defaults.css for the library project.

[EDIT]

The font issue was bothering me :) I looked at DefaultGridItemRenderer: it extends UITextField. So for it to use an embedded font, it has to have it's embedFonts property set to true. It then also needs a UITextFormat object that refers to the embedded font.

You could extend the DefaultGridItemRenderer to do this, but I thought Adobe might have made this easier, and looked at the following DataGrid styles. For non-mobile apps, the DataGrid docs point you to ITextLayoutFormat, which is what I've linked to here:

• fontLookup
• cffHinting (optional)
• renderingMode

I'm wondering if the embedded font is actually being used in your DataGrid, as it seems the default renderer won't use them (unless the DataGrid instructs it to).

In fact, your css is embedding the font twice (?) and I think you should only have to do that once -- by setting the styles appropriately on the DataGrid:

s|DataGrid {
    font-family:arial_s;
    fontLookup: embeddedCFF;
    renderingMode: cff; 
}

Answer 2

I've run into this as well. I think you may need to use the Flash Text Engine in the MX component set. You can do this in the compiler options:

In Flash Builder go into Project Properties > Flex Compiler and check "Use Flash Text Engine in MX components".

Answer 3

In my case the following setup fixes all the embedded font issues:

1. " Use Flash Text Engine in MX components " checked in " Project Properties > Flex Compiler "

2. Add the following Line inside your styles.css:

    global { textFieldClass: ClassReference("mx.core.UIFTETextField"); }