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

7 thoughts on “Calling Spark components from MX components in flex4

  1. I was suggested this web site by my cousin. I am not sure whether this post is written by him as no one else know such detailed about
    my difficulty. You’re incredible! Thanks!

  2. You know most people don’t seriously know the benefits of blogging and site-building. Or perhaps just how much work that goes into setting up a blog. In all honesty blogging is generally a lot of fun and a smart way to improve a brand or company.

  3. I do consider all the concepts you have offered on your post.
    They’re really convincing and can definitely work. Nonetheless, the posts are very brief for newbies. May you please prolong them a bit from subsequent time? Thank you for the post.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s