?
Solved

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

Posted on 2008-11-12
5
Medium Priority
?
720 Views
Last Modified: 2013-11-11
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

0
Comment
Question by:Joel_Sisko
  • 3
  • 2
5 Comments
 
LVL 7

Accepted Solution

by:
evcr earned 2000 total points
ID: 22952245
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
 
LVL 12

Author Comment

by:Joel_Sisko
ID: 22953187
evcr,

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

Joel
0
 
LVL 12

Author Comment

by:Joel_Sisko
ID: 22953291
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
 
LVL 7

Expert Comment

by:evcr
ID: 22953661
  return ("assets/" + source + ".png");
0
 
LVL 12

Author Comment

by:Joel_Sisko
ID: 22953742
Thanks for all the help. Keep an eye out for some  more questions in the days to come if you can.

Joel
0

Featured Post

Receive 1:1 tech help

Solve your biggest tech problems alongside global tech experts with 1:1 help.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

First things first - Preparation We need all the part for this install and it's much nicer to have them all on hand when you need them so here's what's required. Download Eclipse 3.5 32 bit (I like the Classic flavour) from here. (http://www.e…
While working over numerous projects I often had the requirement for doing a screen capture in AS3.0. Unfortunately I found no "ready made" solutions in google search that suited my requirements. But I did come across some great resources which help…
In this tutorial viewers will learn how to create a basic shape tween animation in Flash including shape hints for smooth animation Open a new document in Flash: Draw a shape: Select another frame (how long you want the tween to be): Right click and…
The goal of the tutorial is to teach the user how to set there setting in Adobe Flash Media Live Encoder and YouTube for optimal video and audio quality.
Suggested Courses
Course of the Month8 days, 5 hours left to enroll

615 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question