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
Related
In the Label class there's a property named styleSheet, but I'm getting a compilation error when trying to use it, although I'm using Flex 3 and Flash Player 9. What am I missing?
Here's my code:
<mx:Label xmlns:mx="http://www.adobe.com/2006/mxml" selectable="true">
<mx:Script>
override public function set data(value:Object):void
{
super.data=value;
var labelStyleSheet:StyleSheet=styleSheet;
Error: Type was not found or was not a compile-time constant: styleSheet
I can't understand what are you trying to do.
If you want to just set the style of the component you should use the styleName property.
For example to set the color red you can use:
<fx:Style>
#namespace s "library://ns.adobe.com/flex/spark";
#namespace mx "library://ns.adobe.com/flex/mx";
.test{
color:red;
}
</fx:Style>
<mx:Label styleSheet="{StyleManager.getStyleDeclaration('test').getStyle()}">
</mx:Label>
If you are trying to loading and set an existing CSS runtime you can use the StyleSheet.
See the example in the documentation .
Anyway you are getting the compile error simply because the variable is not defined.
Davide
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>
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>
I found these properties:
selectionIndicatorSkin="..."
todayIndicatorSkin="..."
Which skins the DateChooser Selected and todays item.
Oddly enough I didn't find a way where I can specifiy the skin for regular days! I found this property:
weekDayStyleName="..."
so I created a style
.myStyle{
skin-class: ClassReference("com.mySkin");
}
then used it: weekDayStyleName="myStyle" But it didn't work! Any ideas?
Extra Code:
<mx:DateChooser id="date1"
todayStyleName="myTodayStyle"
headerStyleName="myHeaderStyle"
selectionIndicatorSkin="com.skins.calendar.SelectionIndicatorSkin"
todayIndicatorSkin="com.skins.calendar.TodayIndicatorSkin1"
focusSkin="com.skins.calendar.TodayIndicatorSkin1"
rollOverIndicatorSkin="com.skins.calendar.SelectionIndicatorSkin"
weekDayStyleName="weekdayStyle"
borderColor="#FFFFFF"
todayColor="#FFFFFF"
width="275" height="275" />
<fx:Style >
#namespace s "library://ns.adobe.com/flex/spark";
#namespace mx "library://ns.adobe.com/flex/mx";
#namespace vld "com.lal.validators.*";
#namespace effect "com.lal.effects.*";
#namespace components "com.lal.components.*";
.weekdayStyle{
skin-class: ClassReference("com.lal.skins.calendar.TodayIndicatorSkin1");
vertical-align: middle;
font-size: 18;
}
</fx:Style>
I'm pretty sure that all the days in a DateChooser class are UITextFields.
UITextFields do not have a style named skin-class. Check out all styles for the UITextField class.
As such, your style is probably ignored.
Many Flex 4 Spark components have a style named skinClass which you use to set the skin class of the component, but I didn't think such a thing existed for MX Components.
You should be able to customize the look and feel of days by creating your own custom class that implements the IUITextField and then set that as a style with the textFieldClass style.
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)