mx:Legend fontSize not working - apache-flex

I have a PieChart... now that I'm moving to support tablets as well, I need to make the fontSize of the legend larger. However, the following has no effect:
<mx:Legend dataProvider="{industryChart}"
height="110" bottom="40"
height.groupTablets="220" bottom.groupTablets="80"
fontSize="8" fontSize.groupTablets="16"
markerHeight="10" markerHeight.groupTablets="20"
verticalGap="3"
/>
I know that the state is correct because the other attributes change.
I've also tried adding a style section:
<fx:Style>
.legend {
fontSize:24;
}
</fx:Style>
<mx:Legend dataProvider="{industryChart}"
height="110" bottom="40"
height.groupTablets="220" bottom.groupTablets="80"
markerHeight="10" markerHeight.groupTablets="20"
verticalGap="3"
styleName="legend"
/>
No change. Nor does it work if I move the style to Main.css.
Using this gives a warning: CSS type selectors are not supported in components: 'mx.charts.LegendItem':
<fx:Style>
#namespace mx "library://ns.adobe.com/flex/mx";
mx|LegendItem {
fontSize:24;
}
</fx:Style>
But if I put the same in Main.css, it does work:
#namespace mx "library://ns.adobe.com/flex/mx";
mx|LegendItem {
fontSize:24;
}
The problem I have with that is that I have to be able to make the font larger when in the tablet state, and not just for all states, or the font will be too large on a phone.
Pseudo-selectors don't appear to work:
mx|LegendItem:groupTablets {
fontSize:24;
}
IDs do not work, in either Main.cc or fx:Style:
#pieLegend {
fontSize:24;
}
<mx:Legend id="pieLegend"
dataProvider="{industryChart}"
height="110" bottom="40"
height.groupTablets="220" bottom.groupTablets="80"
markerHeight="10" markerHeight.groupTablets="20"
verticalGap="3"
/>
However, even if that approach worked it would have difficulties when the code behind the mxml needs to reference a particular component by id.
I even got frustrated and tried this in the code:
pieLegend.setStyle("fontSize", 24);
Nope. Grrrr.
Any ideas?

Caught the same issue. Here's from the adobe forum, might have to wait for apache flex for a real fix:
The problem is based on a bug that was deferred ( http://bugs.adobe.com/jira/browse/FLEXDMV-1656). There are several workarounds, but the simplest is to set the fontSize on the LegendItem type selector, like this:
<mx:Style>
LegendItem {
fontSize:24;
}
</mx:Style>

Related

Small text in spark label looks bloor

I spent a few days to find solution to solve this problem. Before using spark label, im use mx label, and text with small size (textSize:11) looks clear. After change component on spark label, text looks blurry, not soo clear. Im embed font from my system. Font name is Tahoma. Changing values like cffHinting dont give me any result. I'm use flashDevelop, but same result in IDEA and FlashBuilder. I cant post screenShot bicouse of my small reputation level. Help me please find right solution.
#namespace s "library://ns.adobe.com/flex/spark";
#namespace mx "library://ns.adobe.com/flex/mx";
#font-face{
src:url("Tahoma.ttf");
font-family:TahomaS;
embedAsCFF: true;
}
#font-face{
src:url("Tahoma.ttf");
font-family:TahomaMX;
embedAsCFF: false;
}
s|Label
{
font-family:TahomaS;
font-size:11;
color: #5c5c5c;
}
mx|Label
{
font-family:TahomaMX;
font-size:11;
color: #5c5c5c;
}
And code from Main.mxml:
<?xml version="1.0" encoding="utf-8"?>
<s:Application 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 source="Fonts.css"/>
<s:Label x="50" y="50" text="XYZ Corporation Directory" cffHinting="none" />
<mx:Label x="50" y="65" text="XYZ Corporation Directory" />
</s:Application>
I think that blurry effect and size label text change is because that your flex compiler can't locate the specified font, so it use the default font.
1 - use local() to locate local font like this :
#font-face {
src: local("Tahoma");
fontFamily: "TahomaS";
embedAsCFF: true;
}
s|Label {
fontFamily: "TahomaS";
fontSize: 44;
}
2 - create a flex config file local-font-config.xml in your src/ folder and specify your font path :
<?xml version="1.0" encoding="utf-8"?>
<flex-config>
<compiler>
<fonts>
<local-font-paths>
<path-element>/System/Library/Fonts/</path-element>
</local-font-paths>
</fonts>
</compiler>
</flex-config>
3- give to your flex compiler the location of your config file :
-load-config+=local-font-config.xml
... i think that the best way to use fonts is to use it as a project resources, so you avoid additional configurations
Just create an src/assets/fonts folder in your project and put in your fonts
and in your css file just do this :
#font-face {
src:url("assets/fonts/Tahoma.ttf");
fontFamily: "TahomaS";
embedAsCFF: true;
}
s|Label {
fontFamily: "TahomaS";
fontSize: 44;
}

How to hide axis lines with CSS?

How do I hide my axis lines with CSS? Shouldn't this work?
<mx:Style>
#namespace mx "library://ns.adobe.com/flex/mx";
mx|ColumnChart {
horizontalAxisStyleName: myAxisStyles;
verticalAxisStyleName: myAxisStyles;
}
.myAxisStyles { showLine: false; }
</mx:Style>
I also tried display: none.
Prior to this I used:
<mx:horizontalAxisRenderers>
<mx:AxisRenderer showLine="false" axis="{someName.horizontalAxis}" />
</mx:horizontalAxisRenderers>
<mx:verticalAxisRenderers>
<mx:AxisRenderer showLine="false" axis="{someName.verticalAxis}" />
</mx:verticalAxisRenderers>
But it produced some annoying warnings:
Data binding will not be able to detect assignments to "horizontalAxis".
Data binding will not be able to detect assignments to "verticalAxis".
Thanks!
In Flex 4.5 ,setting showLine:false thru CSS didn't work for me too. Later I found that the CartesianCharts takes an array not a string as an input for horizontalAxisStyleNames.Note it is not horizontalAxisStyleName, it is horizontalAxisStyleName*s*.I did a quick work around and the showLine property was applied to the chart. It may not seem meaningful, but I had no other choice and this works like a charm!
Code for your reference:
<fx:Style>
#namespace mx "library://ns.adobe.com/flex/mx";
#namespace s "library://ns.adobe.com/flex/spark";
mx|ColumnChart {
horizontalAxisStyleNames:myAxisStyles,myAxisStyles;
}
.myAxisStyles {
showLine:false;
}
</fx:Style>

"Type DataGrid in CSS selector 'DataGrid' must be qualified with a namespace" warning when styling in Flex

I am attempting to style the headers in a flex datagrid and I keep getting the warning:
Type DataGrid in CSS selector 'DataGrid' must be qualified with a namespace
What does this mean? I have gone through a bunch of tutorials and none of them have worked. It seems like changing a the colors in a datagrid should be relatively simple.
Here is a code sample:
<mx:Style>
.headerCustomStyle
{
fontWeight: "bold";
textAlign: "center";
color: #0000FF;
}
DataGrid {
alternating-item-colors: #F4FBFF, #FFFFFF;
}
</mx:Style>
<mx:DataGrid draggableColumns="true" width="100%" id="topTracks" headerStyleName="headerCustomStyle" dataProvider="{_trackData.track}" >
<mx:columns>
<mx:DataGridColumn id="artistName" dataField="artist.name" headerText="Artist" width="250" />
<mx:DataGridColumn id="trackName" dataField="name" headerText="Track" width="250"/>
</mx:columns>
</mx:DataGrid>
If you're using Flex 4, you need to define namespaces like this:
#namespace mx "library://ns.adobe.com/flex/halo";
#namespace s "library://ns.adobe.com/flex/spark";
#namespace tlf "library://ns.adobe.com/flashx/textLayout";
/* Halo DataGrid */
mx|DataGrid
{
...
}
/* Spark Button */
s|Button
{
...
}
They might be referring to that if you're using a new version of Flex/Flash Builder. Not sure if Flex 3 requires namespaces though.
Here's Adobe's doc on CSS Namespace Support
If you're using Flex 4, you normally DO NOT use CSS at all.
You think I'm telling tales?
Well, read this:
http://www.adobe.com/content/dotcom/en/devnet/flex/articles/migrating-flex-apps-part2.html
Port your Flex 4 applications to CSS-free code and you won't have any of these problems.
I'm not sure why its telling you that you need a namespace, but in your CSS, DataGrid is a type.
So try and give it the fully qualified namespace for DataGrid (mx.controls.DataGrid)

Trouble with stylesheets in Flex 4

For the life of me, I can't get stylesheets to work... Something having to do with the namespaces and the way I am setting them. So here is my code:
<mx:Style>
#namespace mx "library://ns.adobe.com/flex/halo";
mx|DataGrid {
headerColors: #0066cc, #00ffff;
borderThickness: 7;
borderColor: #00ff33;
}
</mx:Style>
<mx:DataGrid
styleName="myGridStyle"
wordWrap="true"
id="people"
width="500"
height="350"
dataProvider="{dataArr}"
editable = "false"
itemClick="itemClickEvent(event);" sortableColumns="true"
rollOverColor="0xffffff"
>
What am I doing wrong here? I've tried it many different ways and it seems to work for others in tutorials I have done.
The namespace has recently changed from:
#namespace mx "library://ns.adobe.com/flex/halo";
to
#namespace mx "library://ns.adobe.com/flex/mx";
mx instead of halo.
Let me know if that fixes it.
Lance
try to remove "styleName="myGridStyle"" in your datagrid declaration

Flex: Remove drop shadow from ApplicationControlBar?

Does anyone know how to remove the default drop shadow from ApplicationControlBar?
I tried this but no luck:
<mx:Style>
global
{
dropShadowEnabled:false;
}
</mx:Style>
dropShadowEnabled can only be set in MXML mode but not in design mode. I don't know why it's not documented feature.
This works for me:
<mx:ApplicationControlBar width="80%" dropShadowEnabled="false">
<mx:Button label="Test"></mx:Button>
</mx:ApplicationControlBar>
At runtime:
applicationcontrolbar.setStyle('dropShadowEnabled',"false");

Resources