Just wondering if it's possible to apply a *.css to a spark TextArea? If so, how?
<fx:Style>
#namespace s "library://ns.adobe.com/flex/spark";
#namespace mx "library://ns.adobe.com/flex/mx";
#namespace local "*";
s|Label
{
color:#33494A;
fontFamily: "ApexNew";
fontSize: 14pt;
}
s|TextArea
{
color:#33494A;
fontFamily: "ApexNew";
fontSize: 14pt;
}
#font-face
{
fontFamily: "ApexNew";
src:url('font/ApexNew-Medium.otf');
}
</fx:Style>
or
<fx:Style source="something.css"/>
[something.css]
#namespace s "library://ns.adobe.com/flex/spark";
#namespace mx "library://ns.adobe.com/flex/mx";
#namespace local "*";
s|Label
{
color:#33494A;
fontFamily: "ApexNew";
fontSize: 14pt;
}
s|TextArea
{
color:#33494A;
fontFamily: "ApexNew";
fontSize: 14pt;
}
#font-face
{
fontFamily: "ApexNew";
src:url('font/ApexNew-Medium.otf');
}
Related
Here is my CSS (flex4.6)
/* CSS file */
#namespace mx "library://ns.adobe.com/flex/mx";
#namespace s "library://ns.adobe.com/flex/spark";
#font-face {
src:url("assets/MyriadWebPro.ttf");
fontFamily: myCFFFont;
embedAsCFF: true;
}
#font-face {
src:url("assets/MyriadWebPro.ttf");
fontFamily: myFontNoCFF;
embedAsCFF: false;
}
mx|Application{
fontFamily: myFontNoCFF;
}
mx|Button {
fontFamily: myFontNoCFF;
}
mx|Label{
fontFamily: myFontNoCFF;
}
s|Application {
fontFamily: myCFFFont;
}
s|FormItem {
fontFamily: myCFFFont;
fontStyle:normal;
fontWeight:normal;
}
global {
fontFamily: myCFFFont;
}
This is ok for labels, buttons etc... except for formitems:
<s:FormItem width="346" label="{lang.msg_enter_nickname}">
These formItem render with not embed fonts.
What do I am doing wrong ?
Regards
I encountered this problem, it's a bug in SDK (https://issues.apache.org/jira/browse/FLEX-26380). I tried to find workaround but didn't. Use mx:FormItem instead spark.
I am trying to embed a custom font to all elements of my mobile app.
Only the Action Bar and Buttons are changed meanwhile the Tabbars and ListItems doesn't change.
Here's my style.css code
/* CSS file */
#namespace s "library://ns.adobe.com/flex/spark";
/* StyleableTextField, regular */
#font-face {
src: url("assets/fonts/Roboto-Light.ttf");
fontFamily: "robotoLight";
fontWeight: bold;
embedAsCFF: false;
}
/* Label, regular */
#font-face {
src: url("assets/fonts/Roboto-Light.ttf");
fontFamily: "robotoLightCFF";
fontWeight: normal;
embedAsCFF: true;
}
s|Label {fontFamily: "robotoLightCFF";}
s|ActionBar {fontFamily: "robotoLight";}
s|LabelItemRenderer {fontFamily: "robotoLight";}
s|Button {fontFamily: "robotoLight";}
s|TabbedViewNavigator #tabBar {fontFamily: "robotoLight";}
s|TextInput {fontFamily: "robotoLight";}
s|View {fontFamily: "robotoLight";}
global
{
text-align: left;
content-background-color: #FFFFFF;
content-background-alpha: 0.59;
fontFamily: "robotoLight";
}
/** this is the bar the top of the app **/
s|ActionBar{
chromeColor:#4D99E0; /* more like background color */
titleAlign:center;
textShadowAlpha: 0;
}
/* This is the styling of the tabbed navigator */
s|TabbedViewNavigator #tabBar {
chromeColor: #4D99E0; /* color of background on buttons */
color: #ffffff; /* color of text on tab names */
}
.playButton,.pauseButton,.resumeButton,.initButton {
chromeColor: #4D99E0;
color: #fff;
}
And here's a screenshot of how it appears:
screenshot http://samzkingdom.com/wp-content/uploads/2014/01/Capture.png
How do I do this? Or what am I doing wrong?
[EDIT]
It is totally my mistake that I just tested on the emulator on my Desktop. It works perfectly on the Android device.
Try this for tab navigator. Just replace the font family okay..
.tabNavigator
{
font-family: "Helvetica Neue";
font-weight:normal;
horizontal-gap:1;
tab-style-name:"myTabs";
corner-radius:0;
selected-tab-text-style-name: "myselectedTabs";
border-color:#D6D6D6;
}
.myTabs
{
font-size:13;
font-family: "Helvetica Neue";
font-weight:normal;
fill-colors:"#e5e5e5","#f6f6f6";
fill-alphas:1,1;
color:#000000;
corner-radius:0;
text-selected-color:#000000;
text-roll-over-color:#000000;
border-color:#D6D6D6;
}
.myselectedTabs
{
font-size:13;
font-family: "Helvetica Neue";
font-weight:normal;
fill-colors:"#FFFFFF","#FFFFFF";
fill-alphas:1,1;
color:#0d7dbd;
corner-radius:0;
text-selected-color:#0d7dbd;
text-roll-over-color:#0d7dbd;
}
For StyleableTextField (used in many UI elements in mobile Flex, for example in ListItemRenderer) you should use embedAsCFF: false; as explained in Adobe's blog Embedding Fonts in Flex Mobile Projects
For example the following works for me (for the Lists):
#namespace s "library://ns.adobe.com/flex/spark";
#namespace mx "library://ns.adobe.com/flex/mx";
s|ActionBar {
chromeColor: #0066CC;
color: #FFFFFF;
titleAlign: center;
/* textShadowAlpha: 0; */
textShadowColor: #000000;
}
#font-face {
src: url("/assets/fonts/arial.ttf");
fontFamily: embFont;
embedAsCFF: false; /* required for StyleableTextField */
unicodeRange:
U+0020-U+0040, /* Punctuation, Numbers */
U+2660-U+2666, /* Card suits */
U+0041-U+005A, /* Upper-Case A-Z */
U+0061-U+007A, /* Lower-Case a-z */
U+0410-U+0451; /* Cyrillic */
}
s|LabelItemRenderer {
fontFamily: embFont;
}
My flex (4.5) application uses MX and Spark components.
I want to embed Arial fonts and I a mgetting crazy: it works for either Spark components, either for MX components but never for both.
Sometimes some components just diseappear, or both are bold etc !
<?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%" layout="absolute" xmlns:s="library://ns.adobe.com/flex/spark">
<mx:Style>
#namespace mx "library://ns.adobe.com/flex/mx";
#namespace s "library://ns.adobe.com/flex/spark";
#font-face {
src: url("c:/windows/fonts/arial.ttf");
fontFamily: Arial;
fontWeight:normal;
embed-as-cff: true;
}
#font-face {
src: local("Arial");
font-weight: normal;
fontFamily: Arial;
fontStyle:normal;
embed-as-cff:false;
}
#font-face {
src: local("Arial");
fontFamily: Arial;
fontWeight:bold;
fontStyle: normal;
embed-as-cff:false;
}
</mx:Style>
<mx:Label x="177" y="160" text="mx|normal"/>
<mx:Label x="177" y="201" fontWeight="bold" text="mx|bold"/>
<s:Label x="182" y="235" text="S|normal"/>
<s:Label x="182" y="278" text="S|bold" fontWeight="bold"/>
Remove the font styles that say: embedAsCFF: false and add the following:
mx|global {
textFieldClass: ClassReference("mx.core.UIFTETextField");
}
This will force all mx components that render text to use a textfield that can handle the CFF embedded fonts. It also has the advantage that you don't have to embed the same font twice.
Short example to describe the problem. Set up a usual Flex mobile project with the following files (and OpenSans font).
Main.mxml
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
applicationDPI="160">
<s:layout><s:VerticalLayout/></s:layout>
<fx:Style source="style.css"/>
<s:Label text="Static Label"/>
<s:Button label="Static Button" skinClass="MyButtonSkin"/>
</s:Application>
style.css
#namespace s "library://ns.adobe.com/flex/spark";
#font-face {
src: url("fonts/opensans/OpenSans-Bold.ttf");
fontFamily: OpenSansBoldEmbedded;
embedAsCFF: true;
}
s|Label,
s|Button
{
fontFamily: OpenSansBoldEmbedded;
font-lookup: embeddedCFF;
}
MyButtonSkin.mxml
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark">
<!-- host component -->
<fx:Metadata>
[HostComponent("spark.components.Button")]
</fx:Metadata>
<s:Label id="labelDisplay" />
</s:Skin>
The result is that the simple label is styled with the embedded font, but the label in the button isn't. So it looks like this: http://img813.imageshack.us/img813/44/skinningtest.png
I've tried other CSS properties like color and font-size and it works for both. Only the embedded fonts won't work in Spark skins.
What do I miss to style the label in the button with the embedded font?
Solution
Use the attributes fontWeight and fontStyle at the import (#font-face) and on usage (.OpenSansEmbeddedBold). It's not enough to embed the bold font and use it.
/* Import the different font weights and styles */
#font-face {
src: url("fonts/opensans/OpenSans-Regular.ttf");
fontFamily: OpenSansEmbedded;
}
#font-face {
src: url("fonts/opensans/OpenSans-Bold.ttf");
fontFamily: OpenSansEmbedded;
fontWeight: bold;
}
#font-face {
src: url("fonts/opensans/OpenSans-Italic.ttf");
fontFamily: OpenSansEmbedded;
fontStyle: italic;
}
#font-face {
src: url("fonts/opensans/OpenSans-BoldItalic.ttf");
fontFamily: OpenSansEmbedded;
fontWeight: bold;
fontStyle: italic;
}
/* Register fonts as styleNames for further use */
.OpenSansEmbedded
{
fontFamily: OpenSansEmbedded;
}
.OpenSansEmbeddedBold
{
fontFamily: OpenSansEmbedded;
fontWeight: bold;
}
.OpenSansEmbeddedItalic
{
fontFamily: OpenSansEmbedded;
fontStyle: italic;
}
.OpenSansEmbeddedBoldItalic
{
fontFamily: OpenSansEmbedded;
fontWeight: bold;
fontStyle: italic;
}
Use the defined classes as styleName in your MXML
<s:Label text="Static Label" styleName="OpenSansEmbeddedBold"/>
I don't know exactly why, but try adding fontWeight: normal; in your css and this will help. I came to this conclusion after changing fontFamily to Verdana and seeing that button label was bold.
for the button you should use embedAsCFF: false
#namespace s "library://ns.adobe.com/flex/spark";
#font-face {
src: url("fonts/opensans/OpenSans-Bold.ttf");
fontFamily: OpenSansBoldEmbedded;
embedAsCFF: true;
}
#font-face {
src: url("fonts/opensans/OpenSans-Bold.ttf");
fontFamily: OpenSansBoldEmbeddedForBtn;
embedAsCFF: false;
}
s|Label
{
fontFamily: OpenSansBoldEmbedded;
font-lookup: embeddedCFF;
}
s|Button
{
fontFamily: OpenSansBoldEmbeddedForBtn;
}
Good morning,
I face a curious bug as I try to set a fontstyle in a mx:Panel object in Flex.
<?xml version="1.0" encoding="utf-8"?>
<mx:Panel xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
layout="absolute" title="Test"
titleStyleName="titleAssumed" >
<mx:Label x="0" y="-5" styleName="othersAssumed" />
<mx:Label x="0" y="16" styleName="othersAssumed"/>
The associated CSS file contains the following relevant styles:
/* CSS file */
#namespace s "library://ns.adobe.com/flex/spark";
#namespace mx "library://ns.adobe.com/flex/mx";
#font-face{
src: url("ttf\\ControlSign Bold.ttf");
fontFamily: ControlSign;
fontWeight: bold;
}
#font-face{
src: url("ttf\\ControlMono Regular.ttf");
fontFamily: ControlMono;
}
.titleAssumed
{
fontFamily: ControlSign;
font-weight: bold;
font-size: 12;
color: #FFFFFF;
}
.othersAssumed
{
fontFamily: ControlMono;
font-size: 15;
color: #ADADAD;
}
With this configuration, and once I have set the compiler properties in Eclipse for the compiler to use the Flash text engine for MX components, I can see the two labels of the Panel in the correct font and style ; but the Panel's title will not show up. Even if I add the "embedAsCff: false" line to my style .titleAssumed, the title refuses to show up.
Any idea about what could be causing the trouble? Thanks !
EDIT: syntax error fixed.
You need to set embedAsCFF: true in your font. Also you have a syntax error where you are not closing your curly brackets on the fonts. Below is an example and here are some more.
#font-face{
src: url("ttf\\ControlSign Bold.ttf");
fontFamily: ControlSign;
fontWeight: bold;
embedAsCFF: true;
}