Change Image source based on XML result for TileListItem Renderer...

Dear Experts:

I am new to Flex/Air and programming in general but learning everyday through all your efforts.

I have some code from one of the Flex blogs that reads the data from an XML file and renders the images based on the file onto the canvas of the application. That is working fine. The current test XML file I am using lists the image source, the XML I will be working with will not, so I need to change the source of that image based on the data within the tag. The information for the new XML file is below:

<ajax-response>
<response type='object' id='unknown'><generic event='UserEntry' type='Public' objectname='3065'  status='InOffice' /></response>
<response type='object' id='unknown'><generic event='UserEntry' type='Private' objectname='3066'  status='InOffice' /></response>
<response type='object' id='unknown'><generic event='UserEntry' type='Public' objectname='3067'  status='OutOfOffice' /></response>
<response type='object' id='unknown'><generic event='UserEntry' type='Private' objectname='3068'  status=' OutOfOffice ' /></response>
&
&
</ajax-response>


How can I change the source based on the status, so if the status is OutOfOffice the image source would be /assets/OutOffice.png. Conversely if the status is InOffice the image source would be /assets/InOffice.png. Then if no data is present for status then the image source would be /assets/QuestionMark.png.


Thanks,

Joel

##########################Code for Renderer#########################
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/03/29/dynamically-loading-xml-files-using-the-httpservice-tag/ -->
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%">
 
<mx:Script>
		<![CDATA[
			
		    	import mx.controls.Alert;
        	  	
        ]]>
	</mx:Script>
 
	<mx:Image source="{data.@src}"
			horizontalCenter="0"
			verticalCenter="0"
			 />
 
	<mx:Label text="{data.@objectname}"
			fontWeight="bold"
			horizontalCenter="0"
			bottom="0"
			 />
 
</mx:Canvas>
 
 
 
 
 
###############New File that uses above code####################
 
 
 
 
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml"
		layout="vertical"
		verticalAlign="middle"
		backgroundColor="white">
 
	<mx:Script>
		<![CDATA[
			import mx.rpc.events.ResultEvent;
			import mx.rpc.events.FaultEvent;
			import mx.controls.Alert;
 
			private var alert:Alert;
 
			private function loadGallery(src:String):void {
				httpService.url = src;
				httpService.send();
			}
 
			private function httpService_fault(evt:FaultEvent):void {
				var title:String = evt.type + " (" + evt.fault.faultCode + ")";
				var text:String = evt.fault.faultString;
				alert = Alert.show(text, title);
				xmlListColl.removeAll();
			}
 
			private function httpService_result(evt:ResultEvent):void {
				var xmlList:XMLList = XML(evt.result).response.generic;
				xmlListColl = new XMLListCollection(xmlList);
			}
		]]>
	</mx:Script>
 
	<mx:XMLListCollection id="xmlListColl" />
 
	<mx:HTTPService id="httpService"
			resultFormat="e4x"
			fault="httpService_fault(event);"
			result="httpService_result(event)" />
 
	<mx:ApplicationControlBar dock="true">
		<mx:Button label="Group 1"
				click="loadGallery('gallery1.xml');" />
		<mx:Button label="Group 2"
				click="loadGallery('new.xml');" />
	</mx:ApplicationControlBar>
 
	<mx:TileList id="tileList"
			dataProvider="{xmlListColl}"
			itemRenderer="TileListItemRenderer"
			columnCount="3"
			columnWidth="120"
			rowCount="2"
			rowHeight="120"  height="100%" width="100%"/>
</mx:WindowedApplication>
 
 
###################XML File#####################
 
<ajax-response>
<response type='object' id='unknown'><generic event='UserEntry' type='Public' objectname='3065'  status='InOffice' /></response>
<response type='object' id='unknown'><generic event='UserEntry' type='Private' objectname='3066'  status='InOffice' /></response>
<response type='object' id='unknown'><generic event='UserEntry' type='Public' objectname='3067'  status='OutOfOffice' /></response>
<response type='object' id='unknown'><generic event='UserEntry' type='Private' objectname='3068'  status=' OutOfOffice ' /></response>
</ajax-response>

Open in new window

LVL 12
Joel_SiskoAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

evcrCommented:
quick example.. just replace my test xml with your httpservice xml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="init()">
<mx:Script>
<![CDATA[     
import mx.collections.*;
private var xmld:XML = 
<ajax-response>
<response type='object' id='unknown'><generic event='UserEntry' type='Public' objectname='3065'  status='InOffice' /> 
</response><response type='object' id='unknown'><generic event='UserEntry' type='Private' objectname='3066'  status='InOffice' /></response> 
<response type='object' id='unknown'><generic event='UserEntry' type='Public' objectname='3067'  status='OutOfOffice' /></response>
<response type='object' id='unknown'><generic event='UserEntry' type='Private' objectname='3068'  status=' OutOfOffice ' /></response> 
<response type='object' id='unknown'><generic event='UserEntry' type='Private' objectname='3069'  status='' /></response>
</ajax-response>;	
private var xmldList:XMLList=xmld.response.generic;
private var xmlCol:XMLListCollection=new XMLListCollection(xmldList);
]]>
</mx:Script>
	<mx:TileList x="10" y="10" width="694" dataProvider="{xmlCol}" height="232" columnWidth="275" rowHeight="135" >
		<mx:itemRenderer>
			<mx:Component>
				<mx:HBox verticalAlign="top">
					<mx:Image source="{imageSource(data.@status)}"/>
					<mx:Script>
						<![CDATA[
							public function imageSource(source:String):String {
								if (source == '') {
									return "QuestionMark.png";
								}
								else {
									return (source + ".png");
								}
							}
						]]>
					</mx:Script>
					<mx:Label text="{imageSource(data.@status)}" />
				</mx:HBox>
			</mx:Component>
		</mx:itemRenderer>
	</mx:TileList>
</mx:Application>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Joel_SiskoAuthor Commented:
evcr,

How do I reference so that the image is in the folder called "assets"

Joel
0
Joel_SiskoAuthor Commented:
Let me clarify, how can I set it so the images are in a folder called assets.  For the image for QuestionMark that was easy, just added the assets/ in front of the code. But for the other image source how do I this?

Joel
0
evcrCommented:
  return ("assets/" + source + ".png");
0
Joel_SiskoAuthor Commented:
Thanks for all the help. Keep an eye out for some  more questions in the days to come if you can.

Joel
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Adobe Flash

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.