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
Related
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 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 trying to extend the TextItem class in Flex 4 but I keep getting the following error:
Could not resolve <custom:txtIdNumber> to a component implementation.
My txtIdNumber.as is as follows
package custom {
import spark.components.TextInput;
public class txtIdNumber extends TextInput {
public function txtIdNumber()
{
super();
}
override protected function width():void
{
super.width();
this.width = 100;
}
}
}
and the module I want to use it in looks like this
<?xml version="1.0" encoding="utf-8"?>
<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:custom="../custom.*"
layout="absolute" width="100%" height="100%">
<s:BorderContainer width="100%" height="100%" >
<custom:txtIdNumber />
</s:BorderContainer>
</mx:Module>
Initially I thought that I might be extending the class in the wrong way, but all the examples I found look the same.
Without knowing the structure of your source tree, my hunch is that the compiler is not able to parse the namespace you set for custom. Try it without the "../" and if that still doesn't work, post more details about your source tree structure, specifically where does your custom component live and where does the module code live relative to the top level "src" package. Your namespace should be relative to "src".
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