Calling Spark components from MX components in flex4

This post is moved to http://srinichekuri.com/2011/04/05/spark-itemrenderer-for-mx-components-in-flex4/

**********************************************************************

Flex4 is still in adolescent stage of transition from flex3 architecture to spark architecture. Anyone that has worked on flex4 would know that while many components are completely migrated to spark architecture, there are few that are only available as mx components. So to address the scenario of spark components being used in conjunction with mx components, Adobe has come up with some components that help bridge the gap. One of such components is MXIterator.

I have an example here that will help us understand the problem I am talking about. I have a simple mx Combobox that uses a itemrenderer called NameRenderer. NameRenderer is using the tag <s:Iterator>. If we running the code we get a big error that says
“Type Coercion failed: cannot convert renderer::NameRenderer@6bf4c29 to mx.controls.listClasses.IListItemRenderer”. This is because we tried to use a spark component from mx component. The correct way is to use  <s:MXIterator> for NameRenderer.

Test.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="955" minHeight="600">

 <fx:Script>
 <![CDATA[
 import mx.collections.ArrayCollection;

 [Bindable]
 private var ac:ArrayCollection = new ArrayCollection([
 {employeeid:"001",firstname:"Mike",lastname:"Hallinger"},
 {employeeid:"002",firstname:"Tom",lastname:"Flemin"}
 ]);

 private function labelForCombo(value:Object):String{
	 return value.firstname+" "+value.lastname;
 }

 ]]>
 </fx:Script>

 <mx:Form>
	 <mx:ComboBox dataProvider="{ac}" itemRenderer="renderer.NameRenderer" 
	text="Employee" width="150" labelFunction="labelForCombo"/>

 </mx:Form>

</s:Application>

NumberRenderer(Wrong)

<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"  
xmlns:s="library://ns.adobe.com/flex/spark" 
 xmlns:mx="library://ns.adobe.com/flex/mx" 
 autoDrawBackground="true">
 <mx:Label text="{data.employeeid+'('+data.firstname + ' '+data.lastname+')'}"/>
</s:ItemRenderer>

This is the error you will see:

NumberRenderer(Correct)

<?xml version="1.0" encoding="utf-8"?>
<s:MXItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
 xmlns:s="library://ns.adobe.com/flex/spark" 
 xmlns:mx="library://ns.adobe.com/flex/mx" 
 autoDrawBackground="true">
 <mx:Label text="{data.employeeid+'('+data.firstname + ' '+data.lastname+')'}"/>
</s:MXItemRenderer>

These are set of components that are given by adobe that act as bridges. Few other components that fall into the same category are <s:MXAdvancedDataGridItemRenderer>, <s:MXDataGridItemRenderer>, <s:MXFTETextInput> and <s:MXTreeItemRenderer>.

Advertisements