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".
Related
In my Mobile Flex project I declare a HTTPService :
<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark" title="" >
<fx:Style>
.myClass { color: Red }
</fx:Style>
<fx:Declarations>
<fx:HTTPService id="userRequest" url="http://localhost/tabletteNR/NR.php" useProxy="false" method="POST"> // it causes an error "Impossible to resolve <fx:HTTPService> as a component implementation"
<fx:request xmlns="">
<username>a</username>
<emailaddress>b</emailaddress>
</fx:request>
</fx:HTTPService>
</fx:Declarations>
...
When I change the "fx" prefix to "s" then the error disappeared ! So why is "s" the right prefix ? However I looked the package explorer and I did not find the HHTPService inside the spark.swc folder, but I saw it inside the rpc.swc -> mx.rpc.http package. So why is it "s" the right prefix ?
The HTTPService class is in the "library://ns.adobe.com/flex/spark" library namespace; and at the top of the view tag you gave that namespace a value of s:
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark" title="" >
This is the default, BTW, but you can change it to anything you want. In theory something like this should work:
<s:View xmlns:notfx="http://ns.adobe.com/mxml/2009"
xmlns:fx="library://ns.adobe.com/flex/spark" title="" >
<notfx:Style>
.myClass { color: Red }
</notfx:Style>
<notfx:Declarations>
<fx:HTTPService id="userRequest" url="http://localhost/tabletteNR/NR.php" useProxy="false" method="POST"> // it causes an error "Impossible to resolve <fx:HTTPService> as a component implementation"
<fx:request xmlns="">
<username>a</username>
<emailaddress>b</emailaddress>
</fx:request>
</fx:HTTPService>
</fx:Declarations>
Although it is unusual and seems like a lot of work.
The namespace URLs and the classes inside the namespace are defined in a manifest.xml file which can be created as part of the SWC. Most Flex Developer's I know do not bother to change them.
To use Spark controls, default prefix is s and to use MX controls, default prefix is mx.
xmlns:s = "library://ns.adobe.com/flex/spark"
xmlns:mx = "library://ns.adobe.com/flex/mx"
I am developing one dashboard application in flex which is a replica of the flex dashboard. Here there are multiple Panels which are displaying different contents. What i want is whenever user clicks on any particular panel say for example "Yearly Revenues" then i just want to highlight that particular panel.
So basically all the panels in their initial state would be in "inactive" state but as soon as user clicks on it, it will become active providing user a better experience for knowing that he is working with "xyz" panel and remaining would go in inactive state.
So what i mean by "active" and "inactive" state is, in any HTML page when we hover over any Hyperlink it becomes "blue" ( for example ), so i will call it as active and inactive otherwise.
Now, talking about the panel.
The panel is having a skin which defines its layout. To fulfill my requirement what i tried is applying "css" to the panel. Now i have applied css in this way
public class Pod extends Panel
{
...properties
public function init():void
{
setStyle('styleName',"panelOff");
}
}
Now, in this class itself i am handling the "CLICK" on the panel. So in click event what i am doing basically is ,
setStyle('styleName',"panelOn");
Since, panel is having skin applied i need to change properties of the components contained in the skin. So that i must be able to access the css properties in the skin.
in skin file i am doing something like this
override protected function updateDisplayList(unscaledWidth:Number,
unscaledHeight:Number):void
{
setStyle('border-alpha', hostComponent.getStyle('border-alpha'));
}
So my question is, is it the right way of fulfilling my requirement ?
How can i access the css properties of the hostcomponent in the skin
class ?
Here in my main.mxml i have defined the style file. So if
style file contains a style class named "panelOn" and if i give that
class to the panel so will it be able to access the styles associated
with that class ?
Please don't advice to put each and every css property using setStyle method of the panel because then there would be no advantage of using css file to me and also it would be bad css styling.
If there is any other better solution then please share your views. I hope i am clear. Anykind of help would be appreciated.
Best way for your requirement - use spark states. Panel component and Mxml skin, have two state: active and inactive (or your new states). Panel component has logic to set current skin state. If you want use css for keeping properties, each state apply own stylename for skin.
Main application:
<?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" minWidth="955" minHeight="600"
xmlns:classes="classes.*">
<fx:Style>
#namespace s "library://ns.adobe.com/flex/spark";
#namespace mx "library://ns.adobe.com/flex/mx";
#namespace classes "classes.*";
classes|Pod
{
skinClass : ClassReference("skins.PodSkin");
}
.active
{
backgroundColor: #ff0000;
}
.inactive
{
backgroundColor: #00ff00;
}
</fx:Style>
<classes:Pod x="800" width="300" height="300" />
</s:Application>
Pod component:
package classes
{
import flash.events.MouseEvent;
import spark.components.Panel;
public class Pod extends Panel
{
private var _isActive:Boolean = false;
public function Pod()
{
super();
}
override protected function childrenCreated():void
{
super.childrenCreated();
addEventListener(MouseEvent.CLICK, onClickHandler, false, 0, true);
}
protected function onClickHandler(event:MouseEvent):void
{
_isActive = !_isActive;
invalidateSkinState();
}
override protected function getCurrentSkinState():String
{
if (_isActive) return "active";
return "inactive";
}
}
}
And part of PodSkin mxml skin where you set stylename for each states:
<s:SparkSkin
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
blendMode="normal" mouseEnabled="false"
styleName.active="active" styleName.inactive="inactive"
minWidth="131" minHeight="127" alpha.disabled="0.5" alpha.disabledWithControlBar="0.5">
<s:states>
<s:State name="normal" />
<s:State name="active" />
<s:State name="inactive" />
<s:State name="disabled" />
<s:State name="normalWithControlBar" stateGroups="withControls" />
<s:State name="disabledWithControlBar" stateGroups="withControls" />
</s:states>
Enjoy Flex
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 would like to simplify my code and add the possible to the css file:
<mx:AreaSeries styleName="timeArea" name="A" yField="A" areaStroke="{new Stroke(0x0033CC, 2)}" areaFill="{new SolidColor(0x0033CC, 0.5)}" />
Can I move areaStroke and areaFill to css ? What would be the resulting css ?
thanks
So, while you can't specify the strokes in css, you can specify the properties of the strokes, ie:
<mx:Metadata>
[Style(name="areaFillColor",format="Color",type="Number)]
[Style(name="areaStrokeColor",format="Color",type="Number)]
</mx:Metadata>
<mx:Script>
<![CDATA[
[Bindable]
protected var strokeColor:Number;
[Bindable]
protected var fillColor:Number;
override public function styleChanged(styleProp:String):void{
super.styleChanged(styleProp);
//you really ought to do this in a switch statement
strokeColor = getStyle("areaStrokeColor");
fillColor = getStyle("areaFillColor");
}
]]>
</mx:Script>
<mx:AreaSeries styleName="timeArea" name="A" yField="A" areaStroke="{myStroke}" areaFill="{myFill}" />
<mx:SolidColor id="myFill" color="{fillColor}" alpha=".3"/>
<mx:Stroke id="s1" color="{strokeColor}" weight="2"/>
And your CSS would look like (where myAreaChart is the styleName set on the parent area chart):
.myAreaChart{
areaFillColor: #f3f3f3;
areaStrokeColor: #333333;
}
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)