here is the xml data :
<root>
<recommendedMaterials>
<value label="Aluminium" data="0" />
<value label="Iron" data="0" />
</recommendedMaterials>
</root
My code :
<mx:Script>
<![CDATA[
public function populateRecommendedMaterials(xml_val:XML)
{
materials_Cmb.dataProvider=(xml_val.recommendedMaterials);
}
]]>
</mx:Script>
<mx:ComboBox x="212" y="164" id="materials_Cmb" dataProvider="materialsCmb_Dp"></mx:ComboBox>
</mx:Canvas>
The problem is that the whole xml gets populated. I just want the labels. :(
There are two approaches here, depending on what you need. In either case the data you want are the children of the recommendedMaterials node, not the node itself (which is what you did).
materials_Cmb.dataProvider =
new XMLListCollection(xml_val.recommendedMaterials.children());
This should already do the trick. Note that I wrapped the XMLList in an XMLListCollection: this is not strictly necessary with the mx:ComboBox, because it will do the same internally, but for Spark components it would be mandatory.
Another more concise solution would be to just find all the 'value' nodes, but I don't know whether that approach fits your bill.
materials_Cmb.dataProvider =
new XMLListCollection(xml_val..value);
Also don't forget to assign the correct 'labelField' in the ComboBox:
<s:ComboBox labelField="#label" />
The # sign represents an XML attribute.
First of all I wanted to thank in advance to everyone that reads this post.
I'm having a problem when adding a child to a VBox component. Is it not the same thing?:
List Item:
<mx:Script>
<![CDATA[
public function addChildren():void {
var f:FaqItem=new FaqItem();
f.id="newUsersAssistance";
this.cont.addChild(f);
}
]]>
</mx:Script>
<mx:VBox id="cont" width="100%" borderThickness="0" verticalGap="0"/>
and:
<mx:VBox id="cont" width="100%" borderThickness="0" verticalGap="0">
<view:FaqItem id="newUsersAssistance" />
</mx:VBox>
I am injecting two properties (question and answer) to the FaqItem component from an auxiliar file (using BabelFX) that depends on the id of the FaqItem, but it is only working when I choose the second option. If I use the first option, I get a child but with the text in question and answer fields is empty. I need to use the first option.
Is there anything I am doing wrong?
Thanks again for everything
Kind Regards
i don't think you will be able use the id property of the dynamically added component to do Injection. I suggest you keep some bindable variables to bind the value to the dynamic FaqItem.
<mx:DataGrid x="10" y="10" width="180" height="302" id="dgActions" dataProvider="{actionCollection}">
<mx:columns>
<mx:DataGridColumn headerText="Action" dataField="name"/>
<mx:DataGridColumn headerText="" dataField="setting" width="30" rendererIsEditor="true">
<mx:itemRenderer >
<mx:Component>
<mx:Box width="100%" height="100%" horizontalAlign="center" verticalAlign="middle">
<mx:CheckBox selected="{data.setting}" click="setActionSetting()">
<mx:Script>
<![CDATA[
private function setActionSetting(){
data.setting = String(this.selected);
}
]]>
</mx:Script>
</mx:CheckBox>
</mx:Box>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>
For some reason I'm getting an error at the data.setting= String(this.selected) line which says "Access to possibly indefined property selected through a reference with static type".
[edit] The solution to the above problem (albeit not the entire mess) was that once you're inside a <mx:Component> tag you are within the scope of said component. To get access to the script and nodes outside this component you have to use the outerDocument object.
[end edit]
I'm not sure what it's expecting, I'm assuming that it's going to pass the true/false value of the selected(ness) of the checkbox into the method, but it appears not to understand what "this" is, in this context.
Am I doing something obviously wrong? All I want is for the data source to reflect the change in the status that it initially fed into the checkbox.
EDIT:
I just noticed that when I add trace('foo') to the function, it never writes anything back to the console. Is the checkbox's native behavior (and event capture) preventing it from bubbling past to my function?
Additionally, when I add references to objects outside in the rest of the document, it tells me it doesn't recognize them. I'm totally confused as to how Flex scopes things... any additional guidance or links to reference would be really handy.
this in this (ha) case is referring to the component renderer and not the surrounding class (or the checkbox, datagridcolumn, datagrid, etc). You are really better off breaking the renderer out into a real component so you won't be obfuscating the scope as much as when the inline component approach is used.
Peter Ent's series on itemRenderers is extremely useful and should explain everything you want to know on the subject.
If I had to guess "this" is the mx:Script element, try "parent.selected".
CheckBox.selected requires a Boolean value. The fact that you're setting data.setting to a String value tells me that data.setting is NOT a Boolean.
So, after a great deal of agony I have finally figured out how this all works....
Joel is on the right track, this doesn't refer to what you would hope it would refer to (namely the checkbox). Additionally, even if you pass this into the method FROM the checkbox node, it refers to the parent wrapper class and not the checkbox itself. So, the solution is to pass in the event, and then access its target, which FINALLY is the checkbox. And then you're home.
In other words...
<mx:CheckBox selected="{data.setting}" click="setActionSetting(event)">
<mx:Script>
<![CDATA[
private function setActionSetting(e:Event):void{
data.setting = e.target.selected;
trace("n=" + data.name + " set to " + data.setting);
//the name is the other piece of the data that I omitted for clarity
}
]]>
</mx:Script>
</mx:CheckBox>
I actually wanted to create an itemrenderer which will contain below code :
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" width="0" height="0" >
<mx:Label text="{data.xval}" />
<mx:Spacer width="100%" />
<mx:Image source="edit.gif" width="16" toolTip="Edit" />
</mx:HBox>
Now when i click on the image datgrid column should be editable, for that i am using a textinput as an itemeditor. Now i also want to highlight all those cell for this datagrid column which are having data more than 8 characters. I am able to do this separately using 2 different itemrenderers. but i want to get this all together. Can anyone pls help me to do this? Can we have multiple itemrenderer for any datagrid column?
Please let me know if my question is not clear to you?
Thanking you in advance.
One way to do it is to create a function that returns the name of the style that you want to use for highlighting, and call that function by databinding to the style property of your HBox. For example, if you had one css class named highlight and one named normal, you could use this function:
public function highlight(data:String):String
{
if(data.length >= 8)
{
return "highlight";
}
return "normal";
}
And call it like this:
<mx:HBox styleName="{highlight(data.xval)}">
...
</mx:HBox>
I've got an object that contains a dozen or so fields I want to bind to form elements, so that I can use that object to send the data back to the server to be saved.
Definition of my container object:
private static const emptyLink:Object = {
id: -1, title:'',
trigger1:'',trigger2:'',trigger3:'',trigger4:'',trigger5:'',
linkTitle:'', linkBody:'',
answer1:'',answer2:'',answer3:'',answer4:'',answer5:''
};
[Bindable] public var currentLink:Object = emptyLink;
currentLink is assigned at runtime to a specific index from an ArrayCollection, I'm just using the emptyLink object for initialization purposes, mostly.
<mx:Panel id="triggerPanel" title="Trigger" width="33%">
<mx:VBox id="tpBoxes" width="100%" paddingBottom="5" paddingLeft="5" paddingRight="5" paddingTop="5">
<mx:TextInput id="trigger1" width="100%" textAlign="left" text="{currentLink.trigger1}" />
<mx:TextInput id="trigger2" width="100%" textAlign="left" text="{currentLink.trigger2}" />
<mx:TextInput id="trigger3" width="100%" textAlign="left" text="{currentLink.trigger3}" />
<mx:TextInput id="trigger4" width="100%" textAlign="left" text="{currentLink.trigger4}" />
<mx:TextInput id="trigger5" width="100%" textAlign="left" text="{currentLink.trigger5}" />
</mx:VBox>
</mx:Panel>
Of course, this compiles and displays just fine, but there are runtime warnings for each instance:
warning: unable to bind to property 'trigger1' on class 'Object' (class is not an IEventDispatcher)
warning: unable to bind to property 'trigger2' on class 'Object' (class is not an IEventDispatcher)
warning: unable to bind to property 'trigger3' on class 'Object' (class is not an IEventDispatcher)
warning: unable to bind to property 'trigger4' on class 'Object' (class is not an IEventDispatcher)
warning: unable to bind to property 'trigger5' on class 'Object' (class is not an IEventDispatcher)
And the currentLink object is not updated when the TextInput fields are changed.
The obvious answer is that my object needs to be an instance of a class that implements IEventDispatcher. What that answer doesn't tell me is the particulars of implementing that interface (what's required? what's not?), and if there is a simpler way to do this -- like a built in class that will gladly accept my custom properties and allow for binding, without me having to worry about the particulars of implementing the interface.
Does such a class exist? If not, what's the bare minimum and/or accepted standard for accomplishing this task?
You need to use ObjectProxy (as Chetan mentions) - but you also need to use valueCommit to get the text you enter in the input BACK into your object:
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
import mx.utils.ObjectProxy;
private static const emptyLink:Object = {
id: -1, title:'',
trigger1:'',trigger2:'',trigger3:'',trigger4:'',trigger5:'',
linkTitle:'', linkBody:'',
answer1:'',answer2:'',answer3:'',answer4:'',answer5:''
};
[Bindable] public var currentLink:ObjectProxy = new ObjectProxy(emptyLink);
private function handleClick():void
{
trace(currentLink.trigger1);
}
]]>
</mx:Script>
<mx:Panel id="triggerPanel" title="Trigger" width="33%">
<mx:VBox id="tpBoxes" width="100%" paddingBottom="5" paddingLeft="5" paddingRight="5" paddingTop="5">
<mx:TextInput id="trigger1" width="100%" textAlign="left" text="{currentLink.trigger1}" valueCommit="{currentLink.trigger1 = trigger1.text;}"/>
<mx:Button label="Click" click="handleClick()"/>
</mx:VBox>
</mx:Panel>
</mx:WindowedApplication>
Object doesn't dispatch events. Although you have made the variable Bindable, the properties of the object referenced by the variable currentLink can not be bound.
Use ObjectProxy instead.
[Bindable] public var currentLink:ObjectProxy = new ObjectProxy(emptyLink);
The first thing you'll want to know is that binding in Flex 3 is not bidirectional. The binding expression will ensure that if the source of the binding expression (currentLink.trigger1) changes that the target (TextInput) will receive notification of the change and update accordingly. If you want the binding to go in the other direction, there are at least two ways to do this:
Use the mx:Binding tag to direct TextInput.text back to the object
Use BindingUtils to do this programmatically instead.
In Flex 4 they are introducing a new syntax for bidirectional binding #{some.binding.expression} but it's not available in Flex 3.
On the 2nd part: the error that you're receiving is because you are binding to a "generic" prototype Object. When you apply the [Bindable] metadata tag to a property or class, the MXMLC compiler generates AS code that includes use of binding utilities and property change watchers to do make the binding happen. However you can't make the prototype Object do this since it's a built-in. You can create a custom ActionScript class which is bindable (or has certain properties bindable). The MXMLC compiler will generate a class which implements IEventDispatcher and therefore supports binding. This has the advantage of being faster than prototype objects and also gives you compile-time checking, i.e. you will receive a compiler error if you reference an invalid property.
The other alternative is to wrap your prototype in ObjectProxy as one of the other SO members has suggested.
Just a tip on how to find out the offending code in a larger project - put a breakpoint on the two
trace("warning: unable to bind to property '"
lines in the SDK's PropertyWatcher class (Navigate > Open Type > ...). Stacktrace will then help you find the ui component that holds the broken binding.
In general, the reason why you get "unable to bind to property foo on a class, is because you are either missing a getter or setter for foo. You could also make foo scoped to a public variable, (although this breaks encapsulation)
So you need Both of these to make it go away:
public function set foo (o:FooObject) : void {
...
}
or
public function get foo() : FooObject {
...
}
Here's the livedocs reference for the interface. It's pretty much what would be obvious.
To quote:
In general, the easiest way for a user-defined class to gain event dispatching capabilities is to extend EventDispatcher.
Hence,
private static const emptyLink:EventDispatcher = {
I haven't been using Flex for very long, and this might not fit your requirements, but why not use XML? I believe you can set the TextInput text value to attributes in the XML.
I'm using pseudo-code, but something like this makes sense to me:
[Bindable] private static const currentLink:XML = <root>
<trigger1 value=""/>
<trigger2 value="" />
</root>;
...
<mx:TextInput id="trigger1" width ... text="{currentLink.trigger1.#value}" />
Something like this, perhaps?