I have a datagrid w/ a custom item renderer, as follows:
<mx:AdvancedDataGridColumn dataField="file">
<mx:itemRenderer>
<fx:Component>
<mx:HBox paddingLeft="2">
<fx:Script>
<![CDATA[
import mx.core.BitmapAsset;
[Embed(source="components/download.png")]
[Bindable]
public var imgCls:Class;
public function IOErrorEventExample():void {
var loader:URLLoader = new URLLoader();
loader.addEventListener(IOErrorEvent.IO_ERROR, ioErrorHandler);
var request:URLRequest=new URLRequest("http://www.site.com/"+data.file);
loader.load(request);
}
private function ioErrorHandler(event:IOErrorEvent):void {
if ( String(event) != null ){
// load the itemrenderer image here if the file exists on our server
var imgObj:BitmapAsset = new imgCls() as BitmapAsset;
myImage.source=imgObj;
}
else {
// don't load the itemrenderer image if the file doesn't exist yet
}}
]]>
</fx:Script>
<mx:Image id="myImage" creationComplete="IOErrorEventExample();"/>
</mx:HBox>
</fx:Component>
</mx:itemRenderer>
</mx:AdvancedDataGridColumn>
So, if I have the actual file on my server, I want to display download.png image ...however, when I compile & run the code above, the .png image appears randomly..regardless of if "file" exists. What am I doing wrong?
You need to close off the ioErrorHandler function by adding one last curly brace before you close the CDATA tag
Can't say for sure that will fix the problem tho, the logic looks correct. You could try adding an Event.COMPLETE event listener to really make sure the file does exist and is being loaded.
EDIT:
You can shorten down this event handler function to just this because:
1. This function is called only when an IOErrorEvent is dispatched, so there is always going to be an event object present when it is called. (The if statement isn't needed)
2. Even if you left the if statement in, there isn't a need to call the else statement since in the event that the file does exist, this function won't be called.
private function ioErrorHandler(event:IOErrorEvent):void
{
var imgObj:BitmapAsset = new imgCls() as BitmapAsset;
myImage.source=imgObj;
}
Related
I have a datagrid within a custom component. This DG accepts a nested object as its dataprovider, and so my datagrid is rendered like this :
<mx:DataGrid id="privilegesDG" dataProvider="{privArray}" width="100%" variableRowHeight="true">
<mx:columns>
<mx:DataGridColumn dataField="Name" />
<mx:DataGridColumn dataField="Alias" />
<mx:DataGridColumn headerText="Roles Assigned" dataField="roles">
<mx:itemRenderer>
<fx:Component>
<mx:VBox creationComplete="box1_creationCompleteHandler(event)">
<fx:Script>
<![CDATA[
import com.pm.modules.events.UpdateDBEvent;
import mx.containers.HBox;
import mx.controls.Label;
import mx.controls.LinkButton;
import mx.events.FlexEvent;
[Bindable]private var prID:int;
protected function box1_creationCompleteHandler(event:FlexEvent):void
{
for each(var temp:Object in data.roles){
prID = temp.rid;
var hgrp:HBox = new HBox();
hgrp.autoLayout = false;
var lbl:Label = new Label();
lbl.text = temp.rname;
var lb:LinkButton = new LinkButton();
lb.label = 'X';
lb.focusEnabled = true;
lb.addEventListener(MouseEvent.CLICK,handleClick);
hgrp.addElement(lbl);
hgrp.addElement(lb);
this.addElement(hgrp);
}
}
protected function handleClick(event:MouseEvent):void{
dispatchEvent(new UpdateDBEvent(UpdateDBEvent.ON_DELETE_PRIVILEGE_ROLE_MAP,0,0,0,prID,0,true));
}
]]>
</fx:Script>
</mx:VBox>
</fx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>
So i have an inline itemrenderer that displays the nested data. Now eveytime an update operation occurs, i call a function to re-populate this datagrid. But the column which gets populated with the nested data dsnt display anything...
I searched the net and found that mayb i shld call the updateDisplayList function for this component ?
So i tried smthing like this :
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void{
super.updateDisplayList(unscaledWidth,unscaledHeight);
}
protected function handleResult(event:ResultEvent):void{
if(event.result.toString() == 'false')
Alert.show("Could not perform operation");
else{
RO.getPrivilegesAndRoles(); //re-populates DG
invalidateDisplayList();
}
}
I really dont know what I shld put inside that function. Should i call the re-populating function inside updateDisplayList. I tried that but it dsnt work ...
The creationComplete event of your item renderer occurs only one time on initialization. As far as item renderers are recycling the new data won't populate in your item renderer.
You can solve it two ways:
Create MXML item renderer. As far as its base class is VBox it is the best option here. So you can get rid of data binding to populate data changes automatically. To populate all the roles use Repeater component instead of your loop using {data.roles} as data provider.
The second option is to use ActionScript and to have UIComponent as the base class. In this case you should override override public function set data(value:Object):void and call invalidateDisplayList() from there as far as subscribing on data.roles's collectionChange event and call invalidateDisplayList() from change handler too. Then in updateDisplayList() you should loop your data and create/populate all the controls. The second option can give you better performance but it is not a good way for novices.
So I recommend you to use MXML version with binding.
I have a List with an ItemRenderer. When I click a button, then a property of the ArrayCollection I bound to the list is changed.
When I click the button, then it does change the property, but the list doesn't change.
How do I solve this.
Here's my code
<fx:Script>
<![CDATA[
[Bindable]
public var controllers:ControllerCollection = new ControllerCollection();
private function hideTheFirstItem(evt:MouseEvent):void
{
(controllers[0] as Controller).meetsRequirements = false;
//these methods don't work unfortunatly
controllers.itemUpdated(controllers[0]);
controllers.refresh();
}
]]>
</fx:Script>
<mx:List id="listControllers" dataProvider="{controllers}">
<mx:itemRenderer>
<fx:Component>
<solutionItems:displaySolutionItem visible="{data.meetsRequirements}" />
</fx:Component>
</mx:itemRenderer>
</mx:List>
<mx:Button label="test" click="hideTheFirstItem(event)" />
(ControllerCollection extends ArrayCollection)
Thanks!
Vincent
Two ways:
collection.refresh()
collection.itemUpdated()
Of course, ControllerCollection is not a standard Flex Collection class; so I am just assuming that it implements the ICollectionView interface.
Update:
I do notice that your code is set to modify the first element of the ArrayCollection
private function hideTheFirstItem(evt:MouseEvent):void
{
(controllers[0] as Controller).meetsRequirements = false;
//these methods don't work unfortunatly
controllers.itemUpdated(controllers[0]);
controllers.refresh();
}
I wanted to be sure to specify that the first element of the collection may not be the first element currently visible in the view. I wonder if that is causing you issues.
Without seeing your item renderer, I need to make some assumptions.
First, I will assume that your item renderer is using data binding to the meetsRequirements property. If that is the case, then the meetsRequirements property needs to notify when that property changes. If you add the [Bindable] tag to that property or the Controller class, then the meetsRequirements property will notify the itemRenderer to update that field based on your data binding.
If my assumptions are wrong, we need to see the code to give you any further thoughts.
First, don't try to create new collections if you don't need to.
I believe your problem lies with this statement: (controllers[0] as Controller).meetsRequirements = false; which should fail on compile because a collection item cannot be retrieved using the square bracket annotation. You need to use getItemAt(index:int) function.
Furthermore, you wouldn't want to set visible to false to an item renderer if you want to 'remove' it because then you'd have an empty spot. What you want to do is filter it out:
<s:Application creationComplete="onCreationComplete()">
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable] public var data:ArrayCollection = new ArrayCollection();
private function onCreationComplete():void
{
// TODO: need to add data here
// Adding filter function
data.filterFunction = filterItems;
}
private function filterItems(item:Object):Boolean
{
return item.meetsRequirements;
}
private function hideFirstItem():void
{
if(data.length > 0)
{
Controller(data.getItemAt(0)).meetsRequirements = false;
}
data.refresh();
}
]]>
</fx:Script>
<mx:List id="listControllers" dataProvider="{data}" />
<mx:Button label="test" click="hideFirstItem()" />
</s:Application>
This should do it. Untested though.
Try this:
<fx:Script>
<![CDATA[
[Bindable(Event="refreshMyList")]
public var controllers:ControllerCollection = new ControllerCollection();
private function hideTheFirstItem(evt:MouseEvent):void
{
(controllers[0] as Controller).meetsRequirements = false;
dispatchEvent(new Event("refreshMyList"));
}
]]>
</fx:Script>
I havent found quite what I want elsewhere or at least am not accomplished enough to adapt
I'm trying to create a project that shows radio stations with logo, listen button etc
The datasource is an xml file with child tags like 'name','image' and 'listen' for each parent, 'station'.
I access this data via the main application with creationComplete="radioService.send()"
I can then use it on the main app via dataProvider="{radioService.lastResult.stations.station}
However, I want to use the results to populate variables in the custom component in both the components themselves
hard coded examples
mx:Image source="Images/BBC5.gif" id="bbc5Logo" "/>
mx:LinkButton id="bbc5Listen" click="bbc5Listen_clickHandler(event)" />
and in the clickhandler
protected function bbc5Listen_clickHandler(event:MouseEvent):void
{
var url:String = "http://www.bbc.co.uk/iplayer/console/bbc_radio_five_live";
var request:URLRequest = new URLRequest(url);
}
Any help, much appreciated
I done something similar before though I am not sure of what look and feel you wish your app to have but it would be possible to create a Datagrid and bind the datasource to that grid.
Then you can add fields to the datasource like ( img field and use the link in the XML by setting the xpath towards that field) , it would also be possible to create a button and place that in the row of the datagrid for listen.
Obviously this is a slightly different implementation but the same principle applys if you have created a custom component then make sure it makes use of DataSource and DataSource fields which will aquire the data from the right part of the XML. Then it would be possible to map that DataSource field to a String for example.
Hope this helps
You can actually use Custom Events, where you can pass values from your main app to your custom component.
http://www.anujgakhar.com/2009/03/04/flex-passing-data-with-custom-events/
Another approach could be to create Value Objects from your XML and bind your components to these objects, this way you would decouple your components from the XML , which can be handy if at some point in the future, you don't want to use XML, but JSON for instance.
Each Value Object would have the properties defined in your question , i.e , imageSource , id , url etc... and each component would be bound to one Value Object
Edit
Have a look at this video training, it covers data retrieval from an XML , ArrayCollections of ValueObjets etc...
http://www.adobe.com/devnet/flex/videotraining.html
there are two ways to accomplish this:
you should wrap your data structure
from xml source to a [Bindable] actionscript
object (not mandatory, but you can
handle it easier), and bind the array of these data instances (let's say RadioChannel.class) as the dataProvider of your grid. Inside your itemRenderer implementation you can access the current row's RadioChannel instance via the data getter/setter:
RadioChannel.as:
[Bindable]
public class RadioChannel {
private var _name: String;
private var _imageUrl: String;
private var _listenUrl: String;
public function RadioChannel()
{
}
public function get name():String {return _name;}
public function set name(value:String):void {_name = value;}
public function get imageUrl():String {return _imageUrl;}
public function set imageUrl(value:String):void {_imageUrl = value;}
public function get listenUrl():String {return _listenUrl;}
public function set listenUrl(value:String):void {_listenUrl = value;}
public function toString():String
{
return 'RadioChannel ' + name + ' - image: ' + imageUrl +
' | listen at ' + listenUrl;
}
}
RadioList.mxml:
<?xml version="1.0" encoding="utf-8"?>
<mx:DataGrid xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx" dataProvider="{radioChannels}">
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
private var _radioChannels:ArrayCollection = new ArrayCollection();
[Bindable]
private function get radioChannels():ArrayCollection {return _radioChannels;}
private function set radioChannels(value:ArrayCollection):void {_radioChannels = value;}
]]>
</fx:Script>
<mx:columns>
<mx:DataGridColumn>
<mx:itemRenderer>
<fx:Component>
<mx:Image source="{data.imageUrl}">
<fx:Script>
<![CDATA[
public override function set data(value:Object):void
{
super.data = value;
trace('current instance: ' + RadioChannel(data).toString());
}
]]>
</fx:Script>
</mx:Image>
</fx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
<mx:DataGridColumn dataField="name" />
<mx:DataGridColumn>
<mx:itemRenderer>
<fx:Component>
<mx:HBox>
<fx:Script>
<![CDATA[
protected function onLinkClicked(event:MouseEvent):void
{
var currentChannel:RadioChannel = RadioChannel(data);
if (data)
{
var request:URLRequest = new URLRequest(currentChannel.listenUrl);
[...]
}
}
]]>
</fx:Script>
<mx:Button click="onLinkClicked(event)" label="Listen" />
</mx:HBox>
</fx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>
The other way is to build up custom
events that deal with an extra
parameter: the url of the channel.
These custom events should cascade back to the list component, where they should be handled.
Since for the second solution you would still need the first's binding as well, i'd choose the first one, and handle the click event locally.
hope this helped.
I think this may be useful, to pass the value from mainApp to custom component you can follow this method.Since you have the value in mainApp,in the custom component you can access the value by using parentDocument object.parentDocument.rootAppVar
I need to bind a property to an edit control and have the control write its value back to the same property. The problem is, I'm setting the source value before the control is created:
<mx:Panel>
<mx:Script>
<![CDATA[
[Bindable] public var editedDocument: XML;
]]>
</mx:Script>
<mx:TextInput id="docLabel" text="{editedDocument.#label}"/>
<mx:Binding source="docLabel.text" destination="editedDocument.#label"/>
</mx:Panel>
I call this like so:
var xmlDoc: XML = <document label="some label" />;
var myPanel: MyPanel = new MyPanel();
myPanel.editedDocument = xmlDoc;
parent.addChild(myPanel);
What happens is this:
the docLabel text field ends up blank (equal to "")
the xmlDoc's #label attribute is set to ""
What I want is this:
the docLabel text field should contain "some label"
the xmlDoc's #label attribute should change only when the docLabel's text property changes.
How do I accomplish this, using Flex 3?
Edit
I have also tried this:
<mx:Panel>
<mx:Script>
<![CDATA[
[Bindable] public var editedDocument: XML;
]]>
</mx:Script>
<mx:TextInput id="docLabel"/>
<mx:Binding source="editedDocument.#label" destination="docLabel.text"/>
<mx:Binding source="docLabel.text" destination="editedDocument.#label"/>
</mx:Panel>
The result is the same.
You can try using BindingUtils to programmatically create the binding after the class has been created:
http://life.neophi.com/danielr/2007/03/programmatic_bindings.html
There are many variations of this that I've used to tackle similar problems. If you can't figure it out from the link post a comment and I'll dig through my source code and see what I can find.
private function init():void
{
var xmlDoc: XML = <document label="some label" />;
var myPanel: MyPanel = new MyPanel();
myPanel.editedDocument = xmlDoc;
parent.addChild(myPanel);
BindingUtils.bindProperty(docLabel, "text", editedDocument, "label");
//or maybe it should be one of these, I have not done binding to an XML attribute before
BindingUtils.bindProperty(docLabel, "text", editedDocument, "#label");
BindingUtils.bindProperty(docLabel, "text", editedDocument, "{#label}");
}
Take a look at Two-way data binding.
Take a look at the part of the text:
In Flex 3, if you want to set
two-way binding using the
mx:Binding
tag you need to set it twice:
mx:Binding source="a.property" destination="b.property"/>
mx:Binding source="b.property" destination="a.property"/>
which becomes:
mx:Binding source="a.property" destination="b.property" twoWay="true"/>
In Flex 3 you would be better of doing something like this. Also not sure you can bind directly to XML?
Instead do something like this:
[Bindable] public var tmpString: String;
public var onChange():void {
tmpString = docLabel.text;
//set the XML string, etc.
}
]]>
</mx:Script>
<mx:TextInput id="docLabel" text="{tmpString}" change="onChange()" />
I think bidirectional data binding is a new feature in Flex 4.
This is straight from Adboe http://opensource.adobe.com/wiki/display/flexsdk/Two-way+Data+Binding, and it's Flex 3 too!
I created custom controls that programmatically create two-way bindings when given a provider object that has a suitable property whose name matches the control's id. Here's an example for a TextInput:
public class BoundTextInput extends TextInput
{
// some code omitted for brevity:
// Create getter / setter pair, call invalidateProperties()
// and set internal flag for efficiency
// create bindings in commitProperties:
override protected function commitProperties():void
{
if (this._fProviderChanged) {
this._fProviderChanged = false;
if (null != this._provider && this._provider.hasOwnProperty(this.id) && this._provider[this.id] is String) {
// this is the core bit
BindingUtils.bindProperty(this, "text", this._provider, this.id);
BindingUtils.bindProperty(this._provider, this.id, this, "text");
}
}
// Normally, you call the overridden method first,
// but we want to see the values initialized by the new
// binding right away, so we first create the bindings
// and then commit all inherited properties
super.commitProperties();
}
}
This is an example of how I use it inside one of my other components (a popup dialog). The data property is set to an instance of the appropriate model class, which is always a dumb, [Bindable] container.
<?xml version="1.0" encoding="utf-8"?>
<PopUp xmlns="com.econemon.suite.gui.components.*" xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Form width="100%" height="100%" >
<mx:FormHeading label="Server-URL" />
<mx:FormItem label="URL" >
<!--
If it is available, and of type String, data.urlServer
is bound to the text property of this TextInput
-->
<BoundTextInput id="urlServer" provider="{this.data}"/>
</mx:FormItem>
<mx:FormItem>
<mx:Button label="OK" click="this.submit(event)" />
</mx:FormItem>
</mx:Form>
</PopUp>
I have many buttons in Main.mxml. I'm trying to move the button functionality into a Class and have Event Listeners inside the class respond to Click and call other functions. I have written:
Main.mxml
<mx:Button x="23.5" y="10" label="checker" click="{goListen()}" />
<mx:Button id="btnT1" x="252.5" y="10" label="t1" />
<mx:Button id="btnT2" x="309" y="10" label="t2"/>
<mx:Button id="btnT3" x="366" y="10" label="t3"/>
Main.as
private function goListen():void
{
var t:ButtonListener = new ButtonListener(btnT1, btnT2, btnT3);
}
ButtonListener.mxml
package com.util
{
import flash.events.EventDispatcher;
import flash.events.MouseEvent;
import mx.controls.Alert;
import mx.controls.Button;
public final class ButtonListener extends EventDispatcher
{
private var __btnArray:Array;
public function ButtonListener(...btnList)
{
__btnArray = new Array();
for each (var item:Button in btnList)
{
__btnArray.push(item);
}
buildListeners();
}
private function buildListeners():void
{
for each (var item:Button in __btnArray)
{
item.addEventListener(MouseEvent.CLICK, traceMe, false, 0, true);
}
}
private function traceMe(event:MouseEvent):void
{
trace(event.target.label + " was clicked");
}
}
}
so when I debug, I see the array filling up with the buttons, but the traceMe() function won't work. Not sure how I can get this to work. Or do I just have to have 30 event listeners and corresponding functions in the main class.
It looks like you have two different options or problems. If you change the last parameter in:
item.addEventListener(MouseEvent.CLICK, traceMe, false, 0, true);
to false, then everything should work because your event listener will stick around to handle the mouse clicks. Of courses, this means that if you click on your "checker" button a second time, you'll then have two sets of listeners responding to mouse clicks of buttons one, two, and three.
So, it's likely that the real solution you're interested in is leaving the line quoted above the same and instead changing the following line:
var t:ButtonListener = new ButtonListener(btnT1, btnT2, btnT3);
If you change the above line to store your button listener as a part of your class it will be available to respond to the mouse clicks, rather than having been garbage collected:
_buttonListener = new ButtonListener(btnT1, btnT2, btnT3);
That, of course, assumes that you have defined _buttonListener within an mx:script block:
<mx:Script><![CDATA[
var _buttonListener:ButtonListener;
]]></mx:Script>
EDIT per comment:
In the code provided, t, the ButtonListener, goes out of scope. When it does, it is garbage collected unless you use strong references, which you do not per the last parameter in your addEventListener call.
Thus, make the button listener a member of the main class:
Main.mxml would then read:
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Button x="23.5" y="10" label="checker" click="{goListen()}" />
<mx:Button id="btnT1" x="252.5" y="10" label="t1" />
<mx:Button id="btnT2" x="309" y="10" label="t2"/>
<mx:Button id="btnT3" x="366" y="10" label="t3"/>
<mx:Script>
<![CDATA[
private var _buttonListener:ButtonListener;
private function goListen():void
{
_buttonListener = new ButtonListener(btnT1, btnT2, btnT3);
}
]]>
</mx:Script>
</mx:Application>
Since the event listener will no longer go out of scope, the weak references used by the event listeners will work as expected, being garbage collected when __buttonListener goes out of scope.
Since the click event of Button bubbles, you can just listen for a click event on the main application file and delegate to a handler function in a class.
Or you can call the handler directly on the click of your button.
private var controller:ButtonListener = new ButtonListener();
<mx:Button id="btnT1" x="252.5" y="10" label="t1" click="controller.handleClick(event)"/>