I have this item renderer MyRenderer.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" implements="mx.core.IDataRenderer" >
<mx:Script>
<![CDATA[
[Bindable]
public var greylist : XML;
public function newInstance() : * {
return new MyRenderer();
}
]]>
</mx:Script>
</mx:HBox>
and try to append the item renderer to my datagridcolumn by a classfactory
myRenderer = ClassFactory(MyRenderer);
myRenderer.properties = { greylist: this.greylist };
Now when debugging I get the error that MyRenderer cannot be converted into classfactory.
Can someone please help me?
Thanks in advance
Sebastian
Try this instead:
myRenderer = new ClassFactory(MyRenderer);
Related
I'm facing a strange issue with flex and validator.
Here is the code:
TestMain.xml
<?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:Script>
<![CDATA[
import mx.controls.Alert;
import mx.validators.StringValidator;
import utils.ValidableProperty;
[Bindable] public var nameID:ValidableProperty;
public function start():void {
var nameIDValidator:StringValidator = new StringValidator();
nameIDValidator.required = true;
nameIDValidator.maxLength = 35;
nameID = new ValidableProperty(nameIDValidator);
nameID.validate();
}
]]>
</fx:Script>
<s:applicationComplete>
start();
</s:applicationComplete>
<s:minHeight>600</s:minHeight>
<s:minWidth>955</s:minWidth>
<mx:Form color="0x323232" paddingTop="0">
<s:Label text="See strange behavior of errorString during validator operation with validate."/>
<mx:FormItem label="Name">
<mx:TextInput id="nameInput" width="300" errorString="#{nameID.errorMessage}" text="#{nameID.value}"/>
</mx:FormItem>
</mx:Form>
ValidableProperty.as
package utils
{
import flash.events.EventDispatcher;
import mx.events.PropertyChangeEvent;
import mx.events.ValidationResultEvent;
import mx.validators.Validator;
public class ValidableProperty extends EventDispatcher
{
[Bindable]
public var value:Object;
private var validator:Validator;
[Bindable]
public var isValid:Boolean;
[Bindable]
public var errorMessage:String;
private var statusChangeHandler:Function;
public function ValidableProperty(validator:Validator, statusChangeHandler:Function=null,
target:IEventDispatcher=null) {
super(target);
this.validator = validator;
this.statusChangeHandler = statusChangeHandler;
this.addEventListener(PropertyChangeEvent.PROPERTY_CHANGE, propertyChangeHandler);
}
private function propertyChangeHandler(evt:PropertyChangeEvent):void {
if (evt.property == "value") {
this.validate();
}
}
public function validate():void {
var result:ValidationResultEvent = this.validator.validate(this.value);
this.isValid = (result.type == ValidationResultEvent.VALID);
if (isValid) {
this.errorMessage = null;
}
else {
this.errorMessage = result.message;
}
if (statusChangeHandler != null)
statusChangeHandler();
}
public function set required(required:Boolean):void {
if (validator == null)
return;
validator.required = required;
}
}
}
When you execute this simple code, when writing a value, for example "A", the errorMessage value "this field is required" will disappear but the red color on the inputtext border will still be there with the blue color.
When deleting the A value, this time the blue color will be there with the red one (cannot reproduce all the time) and the error message "this field is required".
What am I missing here? Is it a bug in flex? We cannot have both of red and blue colors on the textinput border.
I am using Eclipse with Flex SDK 4.5.0 (build 20967)
This is not a bug in Flex. This is a bug with how you're coding it all. If you were to follow the example in the documentation, it would work.
<?xml version="1.0" encoding="utf-8"?>
<!-- Simple example to demonstrate StringValidator. -->
<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:Declarations>
<mx:StringValidator source="{nameInput}" property="text"
tooShortError="This string is shorter than the minimum length of 4. "
tooLongError="This string is longer than the maximum allowed length of 35."
minLength="4" maxLength="35"/>
</fx:Declarations>
<s:Form>
<s:FormItem label="Name">
<s:TextInput id="nameInput" width="300" text="{nameID.value}"/>
</s:FormItem>
</s:Form>
</s:Application>
I finally resolve this. I was using mx:TextInput instead of s:TextInput. Thanks J_A_X for your suggestion !
If I execute the code below in FlashBuilder, I get the following error (I translate it)
TypeError: Error #1009: Access to an Attribute or Method of an null-Object is not possible.
at components::NumDisplay()[\src\components\NumDisplay.mxml:39]
This line in NumDisplay.mxml is the problem:
[Bindable]
public var oneled_top:OneDisplay = new OneDisplay(numberData.led_top);
If i change it from the above to:
[Bindable]
public var oneled_top:OneDisplay = new OneDisplay(1);
It is working, because I send a real Number.
So how can I access the value from numberData.led_top?
If I test the access in the samefile NumDisplay.mxml with the line
<s:Label text="{numberData.led_top}" color="#FF0000">
</s:Label>
it accesses the value, the same as if I put it in my component
<components:oneLedDisplay showData="{numberData.led_top}" x="10" y="10" />
I don't get it after searching a couple of hours...
Thanks in advance.
My main method tasachenrechner.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" minWidth="600" minHeight="500" xmlns:components="components.*">
<fx:Script>
<![CDATA[
import components.NumberDisplay;
[Bindable]
protected var firstNumber:NumberDisplay = new NumberDisplay(1);
[Bindable]
protected var secondNumber:NumberDisplay = new NumberDisplay(2);
]]>
</fx:Script>
<components:NumDisplay
numberData="{firstNumber}"
x="10"
y="20"/>
<components:NumDisplay
numberData="{secondNumber}"
x="73"
y="20"/>
</s:Application>
My AS-Class NumberDisplay.as:
package components
{
import flash.display.DisplayObject;
[Bindable]
public class NumberDisplay
{
public var num:Number;
public var led_top:Number=0;
public var led_r1:Number=0;
public var led_r2:Number=0;
public var led_middle:Number=0;
public var led_l1:Number=0;
public var led_l2:Number=0;
public var led_bottom:Number=0;
public function NumberDisplay(num:Number)
{
this.num = num;
switch(this.num)
{
case 0:
trace("ZERo");
break;
case 1:
led_top = 1;
led_r1 = 1;
led_r2 = 1
trace("EINS" + led_top + " num:" + num);
break;
//[... some more cases]
default:
break;
}
}
}
}
My NumDisplay.mxml:
<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" width="45" height="59"
xmlns:components="components.*">
<fx:Style>
#namespace s "library://ns.adobe.com/flex/spark";
#namespace mx "library://ns.adobe.com/flex/mx";
#namespace components "components.*";
</fx:Style>
<fx:Script>
<![CDATA[
import components.NumberDisplay;
import components.OneDisplay;
[Bindable]
public var numberData:NumberDisplay;
[Bindable]
public var oneled_top:OneDisplay = new OneDisplay(numberData.led_top);
// some more init calls of data-objects same type
]]>
</fx:Script>
<s:Label text="{numberData.led_top}" color="#FF0000">
</s:Label>
<components:oneLedDisplay showData="{oneled_top}" x="10" y="10" />
// some more objects of same type
</s:Group>
My AS-Class OneDisplay.as:
package components
{
import flash.display.DisplayObject;
public class OneDisplay
{
[Bindable]
public var show:Number;
[Bindable]
public var value:Number=0;
public function OneDisplay(show:Number)
{
this.show = show;
switch(this.show)
{
case 0:
value = 0.3;
trace(value);
break;
case 1:
value = 1.0;
trace(value);
break;
}
}
}
}
My oneLedDisplay.mxml:
<?xml version="1.0" encoding="utf-8"?>
<s:Group 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:Script>
<![CDATA[
import components.OneDisplay;
[Bindable]
public var showData:OneDisplay;
]]>
</fx:Script>
<s:Rect id="stroke" width="40" height="6" alpha="{showData.value}">
<s:fill>
<s:SolidColor color="#000000"/>
</s:fill>
</s:Rect>
<s:Label text="{showData.value}" color="#FF0000">
</s:Label>
</s:Group>
Remember that you are not only assigning a value, but declaring the member variable oneled_top. At that point, you cannot access numberData because it has not been instantiated (there is no call to new NumberData()! You have to find a way to make your call to new OneDisplay (numberData.led_top) at a later time, when there actually is a value to access.
You provided lots of code which I don't want to reverse engineer.
The answer is that oneled_top is being initialized before numberData. You have no control over initialization of variables when using MXML.
Set default values in the commitProperties() method, or if oneled_Top is supposed to be a skin part, set the default values in the PartAdded method.
You'll benefit from reading up on the Component Lifecycle.
You can use BindingUtils.bindSetter() to detect changes to numberData and then initialize oneled_top
BindingUtils.bindSetter(_setOneLabel_top, this, "numberData");
and setter:
function _setOneLabel_top(disp:NumberDisplay):void
{
/* if(this.oneled_top == null) */
this.oneled_top = new OneDisplay(disp.led_top);
}
But I think, that u're using [Bindable] where you shouldn't have to need it.
I just ran into a strange binding problem. In the mini app below, the Flex Label component is updated when 'someText' changes, but my boundSetter won't be called after the first, initial call.
In short: Why is the boundSetterForSomeText() function not called, while the label does update?
Could anybody please shed some light onto this fundamental issue? Thanks a million!
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" minWidth="1024" minHeight="768"
initialize="onInitialize()"
>
<mx:Panel>
<mx:Label text="{this.someText}" />
<mx:Button label="Set random text" click="generateRandom()" />
</mx:Panel>
<mx:Script>
<![CDATA[
import mx.binding.utils.ChangeWatcher;
import mx.binding.utils.BindingUtils;
[Bindable(event="xxx")]
public var someText : String;
public function onInitialize() : void
{
var cw:ChangeWatcher = BindingUtils.bindSetter(boundSetterForSomeText, this, ['someText']);
}
public function generateRandom() : void
{
this.someText = String( Math.round(Math.random() * 10000) );
this.dispatchEvent(new Event("xxx"));
}
public function boundSetterForSomeText(obj:Object) : void
{
trace( obj );
}
]]>
</mx:Script>
</mx:Application>
You can use this code to create a get/set pair or "property":
private var _someText:String;
[Bindable(event="xxx")]
public function get someText():String
{
return _someText;
}
public function set someText(value:String):void
{
if (_someText != value)
{
_someText = value;
this.dispatchEvent(new Event("xxx"));
}
}
It does work when event is default. (Default event is propertyChange)
[Bindable]
public var someText : String;
I did some debugging and I have no clue why it doesn't work with custom event. I think it should.
I wish to pass many small PNG files as base64 encoded URIs within an XML response, but there seems to be no way to make flex present these images. I was thinking of the data uri scheme, but it appears not to be supported.
Proposed solutions
Use Loader.LoadBytes
Tried it and it doesn't seem to work (none of the events are triggered).
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="1276" height="849" creationComplete="drawImage()">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.utils.Base64Decoder;
private function loaderCompleteHandler(event:Event):void {
Alert.show("loader done");
}
private function errorHandler(e:IOErrorEvent):void {
Alert.show("error" + e.toString());
}
public function drawImage() : void
{
var b64png : String = "iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9YGARc5KB0XV+IAAAAddEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIFRoZSBHSU1Q72QlbgAAAF1JREFUGNO9zL0NglAAxPEfdLTs4BZM4DIO4C7OwQg2JoQ9LE1exdlYvBBeZ7jqch9//q1uH4TLzw4d6+ErXMMcXuHWxId3KOETnnXXV6MJpcq2MLaI97CER3N0vr4MkhoXe0rZigAAAABJRU5ErkJggg==";
var l : Loader = new Loader();
var decoder : Base64Decoder = new Base64Decoder();
decoder.decode(b64png);
var bytes : ByteArray = decoder.flush();
l.addEventListener(Event.COMPLETE, loaderCompleteHandler);
l.addEventListener(IOErrorEvent.IO_ERROR, errorHandler);
l.loadBytes(bytes);
}
]]>
</mx:Script>
<mx:Image x="10" y="10" width="155" height="118" id="image1"/>
</mx:Application>
Can someone please tell me what I did wrong?
If you decode the image data into a ByteArray then you can use Loader.loadBytes(byteArray) to load it as an image.
You could use something this to load the image:
var deco64:Base64Decoder = new Base64Decoder;
deco64.decode("base64StringWithTheImageData");
var arrBytes:ByteArray = deco64.toByteArray();
img.load(arrBytes);
Hope this helps!
You can assign the byte array returned from the decoder directly to the image's source property.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" creationComplete="init()">
<mx:Script>
<![CDATA[
import mx.utils.Base64Decoder;
private function init():void {
var b64png : String = "iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9YGARc5KB0XV+IAAAAddEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIFRoZSBHSU1Q72QlbgAAAF1JREFUGNO9zL0NglAAxPEfdLTs4BZM4DIO4C7OwQg2JoQ9LE1exdlYvBBeZ7jqch9//q1uH4TLzw4d6+ErXMMcXuHWxId3KOETnnXXV6MJpcq2MLaI97CER3N0vr4MkhoXe0rZigAAAABJRU5ErkJggg==";
var decoder : Base64Decoder = new Base64Decoder();
decoder.decode(b64png);
var bytes : ByteArray = decoder.flush();
img.source = bytes;
}
]]>
</mx:Script>
<mx:Image id="img" />
</mx:Application>
I am having a problem with binding values in my ActionScript components. I basically want to set the value of a a variable in my component to a value in the model, and have the component variable automatically update when the model value is updated. I think that I just don't fully understand how data binding works in Flex - this is not a problem when using MXML components, but, when using ActionScript classes, the binding does not work.
This is the code I'm using, where the values are not binding:
package
{
public class Type1Lists extends TwoLists
{
public function Type1Lists()
{
super();
super.availableEntities = super.composite.availableType1Entities;
super.selectedEntities = super.composite.selectedType1Entities;
}
}
}
package
{
public class Type2Lists extends TwoLists
{
public function Type2Lists()
{
super();
super.availableEntities = super.composite.availableType2Entities;
super.selectedEntities = super.composite.selectedType2Entities;
}
}
}
/* TwoLists.mxml */
<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
public var __model:ModelLocator = ModelLocator.getInstance();
public var composite:Composite =
__model.selectedComposite;
[Bindable]
public var availableEntities:ArrayCollection;
[Bindable]
public var selectedEntities:ArrayCollection;
]]>
</mx:Script>
<mx:List id="availableEntitiesList" dataProvider="{availableEntities}" />
<mx:List id="selectedEntitiesList" dataProvider="{selectedEntities}" />
</mx:HBox>
To use binding by code you should use mx.binding.utils.*
Take a look and the BindingUtils.bindProperty and bindSetter methods.
Also, be careful with manual databinding, it could lead you to memory leaks.
To avoid them, save the ChangeWatcher returned by bindProperty and bindSetter and call watcher's unwatch method when is no more used (i.e, in the dipose or destructor method)
You need to add the [Bindable] tag either to the class itself (making all properties bindable) or the properties you want to be [Bindable]. Marking properties or objects as [Bindable] in your MXML is not sufficient.
To fix this, I simply converted the classes to MXML components, and added a private variable for my ModelLocator.
/* Type1Lists.mxml */
<?xml version="1.0" encoding="utf-8"?>
<TwoLists xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns="*"
availableEntities="{__model.selectedComposite.availableType1Entities}"
selectedEntities="{__model.selectedComposite.selectedType1Entities}">
<mx:Script>
<![CDATA[
import model.ModelLocator;
[Bindable]
private var __model:ModelLocator = ModelLocator.getInstance();
</mx:Script>
</TwoLists>
/* Type2Lists.mxml */
<?xml version="1.0" encoding="utf-8"?>
<TwoLists xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns="*"
availableEntities="{__model.selectedComposite.availableType2Entities}"
selectedEntities="{__model.selectedComposite.selectedType2Entities}">
<mx:Script>
<![CDATA[
import model.ModelLocator;
[Bindable]
private var __model:ModelLocator = ModelLocator.getInstance();
</mx:Script>
</TwoLists>