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.
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>
I have a following issue:My task is to style a datatip for two charts in Flex 4.5.Both charts reside in two different <Group> based components which are added to the <Application>
So after a thorough research here is what I tried to do.First applying a css descending selectors:
#container#chart1 chartClasses|DataTip{
backgroundColor:white;
backgroundAlpha:0.01;
fontSize: 12;
fontWeight:bold;
fontStyle:italic;
}
So the component with Id=container and inside it a chart with id="chart1"
It doesn't work despite the fact that Adobe docs say it should.
Another approach which I believed was supposed to solve it was to put this CSS style
chartClasses|DataTip{
backgroundColor:white;
backgroundAlpha:0.01;
fontSize: 12;
fontWeight:bold;
fontStyle:italic;
}
inside each of these components but guess what,chart DataTip class selector work only on <Application> level(and then it applies the same style to all chart datatips found in the application.So putting it in each of the two components containing the charts has no effect.
Next ,I created a class that is fed into dataTipRenderer style of the chart.Then inside the class called MyCustomDataTipRenderer I set the class selector :
.dataTip{
backgroundColor:white;
backgroundAlpha:0.01;
fontSize: 12;
fontWeight:bold;
fontStyle:italic;
}
And yes ,it works.But let's say I want to be able to set different styles for the custom datatip renderer based on the hosting chart.How can I do it ? It seems the Flex SDK has not exposed in any way thr datatipRenderer.So If I effectively set the custom datatip renderer like this:
columnchart1.setStyle("dataTipRenderer",CustomDataTip);
Then I would like to be able to get access to the instance of the CustomDataTip class.But I can't .So currently the only thing I can do is to create a distinct custom datatip renderer class for each chart.That could be fine if you have only a couple of charts you want to style but what can we do if we have many of them?
Try adding the following to the starting of the css file(Assuming that the name of the file is chartStyles.css)
#namespace s "library://ns.adobe.com/flex/spark";
#namespace mx "http://www.adobe.com/2006/mxml";
mx|#container#chart1 chartClasses|DataTip{
backgroundColor:white;
backgroundAlpha:0.01;
fontSize: 12;
fontWeight:bold;
fontStyle:italic;
}
s|#container#chart1 chartClasses|DataTip{
backgroundColor:white;
backgroundAlpha:0.01;
fontSize: 12;
fontWeight:bold;
fontStyle:italic;
}
Incase the css styles are put in a style tag right in the main applications mxml , then there is no need for a #namespace tag in the beginning.You can directly add mx| and s| as prefixes to your styles.
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)
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