iconFunction and labelFunction in V2 (Repost)
DIGG IT!
11
Comments
Published
Wednesday, October 06, 2004
at
10:10 PM
.
If you learn these simple functions, what is possible with V2 components grows exponentially.&
In the V2 framework there two functions that can dramatically alter how you use components and dramatically expand your options. In most of the V2 components there are 2 optional callbacks that allow data to be modified as the component is writing data into the component. These two callbacks are iconFunction and labelFunction.
How they work:
When a component is processing data in a dataProvider (source of data) into the component itself, before the data is written to the component, these two callbacks are executed if they exist.
Lets assume I have a Tree and I want to customize the tree based on data within an XML document. Using iconFunction I will modify the icons in the tree and using labelFunction I will modify the label just before the tree is rendered.
Source Code
1. Drop a tree on stage, name the instance "myTree", and position it.
2. Add this code to the keyframe. The code retrieves an XML document from the internet and sets the "myTree" dataProvider. Pretty simple so far.
dx = new XML()
dx.ignoreWhite = true
dx.load("http://www.powersdk.com/sample/treedata.xml?"+Math.random()*10000)
dx.onLoad = function(){
myTree.dataProvider = this.firstChild
}
3. We are going to create 2 functions to modify the tree. When the dataProvider is read and elements in the tree are created, these methods will be called allowing us to change the data at the last second before it is rendered.
Watch carefully this is really difficult. ;)
// whatever you return in this function
// is LinkageID MovieClip the tree will use for the Icon.
myTree.iconFunction = function(node){
return node.attributes.icon
}
// whatever you return in this function
// will be the value of the Label in the Tree.
myTree.labelFunction = function(node){
if(node.attributes.title == undefined){
return node.attributes.name + " (Division)"
}else{
return node.attributes.name + " (" + node.attributes.title + ")"
}
}
4. Done
Basically these two functions allow you to modify how a dataProvider is rendered in the component. With these simple functions you can merge dataProviders and make your view very powerful while your data remains un-fooled-around-with.
Another great technique is swapping these functions to allow for a completely different view with the same dataprovider. Simply swap the functions and execute the refresh() method on the component.
Hopefully it will help you keep your model and view nicely separated. ;)
Result SWF:
Cheers,
Ted ;)
brilliantly simple!
-Dominick
This should work on DataGrids correct? They inherit from List and list has these properties.
When I try this with my datagrid and the dataprovider is modified the labelFunction is not called.
In a dataGrid, the columns are lists and there are applicable functions for processing list data. You also have the option here of using an CellRenderer allowing you to layout the contents of a cell in a custom way per column of data. Here is a simple sample:
1. Add a DataGrid and Call it "myDataGrid"
2. Past the following on the KeyFrame
import mx.controls.gridclasses.DataGridColumn;
gc0 = new DataGridColumn("3Chat")
gc0.labelFunction = function(a,b){
return a.name.slice(0,3)
}
gc1 = new DataGridColumn("name")
gc2 = new DataGridColumn("price")
myDataGrid.addColumn(gc0)
myDataGrid.addColumn(gc1)
myDataGrid.addColumn(gc2)
myDP = new Array({name:"Chris", price:"Priceless"}, {name:"Nigel", price:"Cheap"})
myDataGrid.dataProvider = myDP;
3. Done
Each column of the DataGrid is a List so the labelFunction and iconFunction only apply to the column of data.
too cool eh! I will post some more on this tomorrow.
Cheers,
Ted
I tried this, and the label function works with the data grid, but I can't get the iconfunction to work. I added this to your example, but no luck, I don't even see the trace.
gc0.iconFunction = function(a,b){
trace('Running iconFunction');
return 'myIcon'
}
I also tried looping over the column gc0'properties and this is all I got:
setStyle:[type Function]
__labelFunction:[type Function]
__header:3Chat
columnName:3Chat
I can see the labelFunction, but no iconFunction
The columns in the DataGrid are slightly different than List. They do not support iconFunction but support labelFunction. Use Cell Renderer to put an Icon into the DataGrid.
Sorry for the confusion.
Ted ;)
The __labelFunction is the runtime private data for storing the label method. Also take a look at the DataGid Row class, it only fires labelFunction and uses CellRenderer logic instead.
Works for List, but DataGrid is slightly different.
Ted ;)
Hi Ted,
I find a problem with iconFunction and labelFuncion. This two functions have a very strange behaviour.
To watch this put a trace inside each function(i.e, trace("iconFunction called!"))
It's better to load the XML pushing a button, because you can see the strange behaviour even before load the XML data.
I made a few test commenting one function, testing and then commenting the other...
Have someone a fix for this problem?
Has anyone successfully implemented iconFunction in Flex 2? I'm on the bleeding edge here and kinda wishing I weren't now that I realize there's no documentation for Tree objects in Flex yet.
Please, if you've had any success it'd be a HUGE help.
Is possible to change the icon position with iconFunction?
Hey Ted,
First of all, this 2 functions are great and very handy!!
But what if there are so many posible icons that adding them to your library would just be too much.
Is it possible to load an icon using a URL instead of linkage??
In that way you would only load the necessary ones and avoid having all of them in your library.
Im using a Tree comp. as well but i have close to 16,000 posible icons in the server =) Crazy! isnt it?
I hope there is a way, because im loosing it. Any help or tips would be SUPER-MEGA-NOVA-FANTASTIC!!!!