Simple datagroup with itemrenderer not working in flex mobile
I am using a datagroup for displaying XML data. When I am using default item renderer the nodes are displaying, but when I try with my own itemrenderer, it fails. Here is the code:
<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark" title="HomeView">
<s:layout>
<s:VerticalLayout paddingBottom="10" paddingLeft="10" paddingRight="10" paddingTop="10"/>
</s:layout>
<fx:Script>
<![CDATA[
import mx.collections.XMLListCollection;
]]>
</fx:Script>
<fx:Declarations>
<fx:XML id="DataXml" source="Data.xml"/>
</fx:Declarations>
<s:Label text="Start"/>
<s:Scroller>
<s:DataGroup width="100%" height="100%" itemRenderer="views.DataItemRenderer"
dataProvider="{new XMLListCollection(DataXml.children())}" >
<s:layout>
<s:VerticalLayout/>
</s:layout>
</s:DataGroup>
</s:Scroller>
<s:Label text="end"/>
</s:View>
Item renderer::::
<?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"
width="100%" >
<fx:Declarations>
<s:HGroup width="100%">
<s:Label id="txtFirstName" text="Name::"/>
<s:Label id="locationTxt" text="LOcation::"/>
<s:Label id="packTxt" text="Package::"/>
<s:Label id="experienceTxt" text="Experience::"/>
<s:Label id="designationTxt" text="Designation::"/>
</s:HGroup>
</fx:Declarations>
<fx:Script>
<![CDATA[
override public function set data(value:Object):void {
txtFirstName.text += value.firstName;
locationTxt.text += value.location;
packTxt.text += value.pack;
experienceTxt.text += value.experience;
designationTxt.text += value.designation;
}
]]>
</fx:Script>
</s:ItemRenderer>
XML File::
<?xml version="1.0" encoding="UTF-8"?>
<data>
<employee>
<firstname>Bujji</firstname>
<location>Hyderabad</location>
<pack>28000</pack>
<experience>1year</experience>
<designation>ASE</designation>
</employee>
<employee>
<firstname>Tanuja</firstname>
<location>Hyderabad</location>
<pack>25000</pack>
<experience>2Year</experience>
<designation>ASE</designation>
</employee>
<employee>
<firstname>Sarath</firstname>
<location>Banglore</location>
<pack>12000</pack>
<experience>1Year</experience>
<designation>JSE</designation>
</employee>
</data>
The issue is in the ItemRenderer file. You've got your s:HGroup inside the fx:Declerations tag. Place it outside and it should be fine.
<?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"
width="100%" >
<s:HGroup width="100%">
<s:Label id="txtFirstName" text="Name::"/>
<s:Label id="locationTxt" text="LOcation::"/>
<s:Label id="packTxt" text="Package::"/>
<s:Label id="experienceTxt" text="Experience::"/>
<s:Label id="designationTxt" text="Designation::"/>
</s:HGroup>
</s:ItemRenderer>
NB: The declerations tag is for non-visual elements. (See adobe docs)
The following item renderer works for me:
<?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"
width="100%" height="20">
<s:HGroup width="100%">
<s:Label id="txtFirstName"/>
<s:Label id="locationTxt"/>
<s:Label id="packTxt"/>
<s:Label id="experienceTxt"/>
<s:Label id="designationTxt"/>
</s:HGroup>
<fx:Script>
<![CDATA[
override public function set data(value:Object):void {
super.data = value;
trace("Name: " + value.firstname);
txtFirstName.text = "Name: " + value.firstname;
locationTxt.text = "Location: " + value.location;
packTxt.text = "Package: " + value.pack;
experienceTxt.text = "Experience: " + value.experience;
designationTxt.text = "Designation: " + value.designation;
}
]]>
</fx:Script>
</s:ItemRenderer>