Link to home
Create AccountLog in
Avatar of SDKCompany
SDKCompanyFlag for United States of America

asked on

Displaying return value from function in label

Help!  I am very new to Flex and ActionScript and am following the included example and trying to display some things differently.  For the list control I am trying to display an image and 3 labels.  I need to pass the data to them from an array that is populated from an SQLite Database.  I have included the code.  Could someone please help direct me on how to go about this.

<?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"
		xmlns:c="components.*"
		initialize="view1_initializeHandler(event)"
		currentState="normal">
	
	<fx:Script>		
		<![CDATA[
			import database.Database;
			import database.DatabaseEvent;
			import database.DatabaseResponder;
			
			import model.ModelLocator;
			
			import mx.collections.ArrayCollection;
			import mx.events.FlexEvent;
			
			private var _init_in_progress:Boolean = false;
			protected var goalCollection:ArrayCollection;
			
			private function initDatabase():void
			{
				var ml:ModelLocator = ModelLocator.getInstance();
				if ( ml.db ) return;
				
				_init_in_progress = true;
				
				ml.db = new Database();
				var responder:DatabaseResponder = new DatabaseResponder();
				responder.addEventListener(DatabaseEvent.ERROR_EVENT, onError);
				responder.addEventListener(DatabaseEvent.RESULT_EVENT,onResult);				
				ml.db.init(responder);				
				
				function onError(de:DatabaseEvent):void
				{
					trace("Error while initializing database. HomeDashboard:0005");
					responder.removeEventListener(DatabaseEvent.ERROR_EVENT, onError);
					responder.removeEventListener(DatabaseEvent.RESULT_EVENT, onResult);
				}
				
				function onResult(de:DatabaseEvent):void
				{
					trace("Result event while initializing database. HomeDashboard:0006");
					if ( de.data && de.data == Database.TABLES_CREATED )
					{
						// All tables created						
						responder.removeEventListener(DatabaseEvent.ERROR_EVENT, onError);
						responder.removeEventListener(DatabaseEvent.RESULT_EVENT, onResult);
						_init_in_progress = false;
						getGoalList()
					}		
				}
			}
			
			protected function view1_initializeHandler(event:FlexEvent):void
			{
				initDatabase();
			}
			
			protected function getGoalList():void
			{
				this.goalCollection = new ArrayCollection();
				refreshList();
			}
			
			protected function newGoalButton_clickHandler(event:MouseEvent):void
			{
				navigator.pushView(NewGoal);
			}
			
			protected function homeButton_clickHandler(event:MouseEvent):void
			{
				navigator.popToFirstView();
			}
			
			/* Called by menu */
			protected function editButton_clickHandler(event:MouseEvent):void
			{
				if ( this.currentState != "editMode" ) 
				{
					this.currentState = "editMode";
				}
			}
			
			/**
			 * Gets all goals from the database and updates the list's data provider 
			 **/
			protected function refreshList():void
			{
				var db:Database = ModelLocator.getInstance().db;
				var responder:DatabaseResponder = new DatabaseResponder();
				responder.addEventListener(DatabaseEvent.ERROR_EVENT, onError);
				responder.addEventListener(DatabaseEvent.RESULT_EVENT,onResult);				
				db.getGoals([responder]);
				
				function onError(event:DatabaseEvent):void
				{
					trace("Error while fetching list of goals. AllGoals:0001");
					responder.removeEventListener(DatabaseEvent.ERROR_EVENT, onError);
					responder.removeEventListener(DatabaseEvent.RESULT_EVENT, onResult);
				}
				
				function onResult(event:DatabaseEvent):void
				{
					trace("Successfully fetched list of goals. AllGoals:0002");					
					responder.removeEventListener(DatabaseEvent.ERROR_EVENT, onError);
					responder.removeEventListener(DatabaseEvent.RESULT_EVENT, onResult);
					if ( event.data && event.data is Array ) 
					{
						parseGoals(event.data);
					}
				}
			}
			
			/**
			 * Takes an Array filed with Goal objects (as defined in the SQL schema...see Database.as)
			 *  and converts them into a data provider for the list
			 * 
			 * @param goals An Array of Objects. Contains id, title, why, startDate, endDate, initProg, endGoal, units, imagePath, progress
			 **/
			protected function parseGoals(goals:Array):void
			{				
				for each ( var goal:Object in goals ) 
				{
					var o:Object = new Object();
					o.id = goal.id;
					o.title = goal.title;
					o.why = goal.why;
					o.startDate = new Date(goal.startDate);
					o.endDate = new Date(goal.endDate);
					o.initProg = goal.initprog;
					o.endGoal = goal.endGoal;
					o.units = goal.units;
					o.imagePath = goal.imagePath;
					o.progress = goal.progress;
					this.goalCollection.addItem(o);
				}
				this.goalList.dataProvider = this.goalCollection;
			}
			
			protected function goalSelected():void
			{
				navigator.pushView(GoalDetail,goalList.selectedItem);
			}
			
			
			protected function goalList_clickHandler(event:MouseEvent):void
			{
				goalSelected();
			}
			
		]]>
	</fx:Script>
	
	<s:states>
		<s:State name="normal"/>
		<s:State name="editMode"/>
	</s:states>
	
	<s:layout>
		<s:VerticalLayout/>
	</s:layout>
	
	<s:navigationContent>
		<s:Button id="homeButton" icon="@Embed(source='assets/HomeButton.png')" click="homeButton_clickHandler(event)"/>
	</s:navigationContent>
	<s:actionContent>		
		<s:Button id="newGoalButton" icon="@Embed(source='assets/NewSurvey.png')" click="newGoalButton_clickHandler(event)"/>		
	</s:actionContent>
	
	<s:VGroup width="100%" height="100%">
		<s:List id="goalList"  width="100%" height="100%" click="goalList_clickHandler(event)"
				fontSize="14" fontWeight="bold" borderColor="0x7C7C7C">
			<s:itemRenderer>
				<fx:Component>
					<s:HGroup paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">
					<s:Image source="{getImage}" width="80" height="80"/>
						<s:VGroup paddingTop="5" paddingLeft="5">
						<s:Label text="{getTitle}" fontSize="16" fontWeight="bold" fontFamily="Arial"/>
						<s:Label text="{getWhy}" fontSize="12" fontWeight="normal" fontFamily="Arial"/>
						<s:Label text="{getStartDate}" fontSize="12" fontWeight="normal" fontFamily="Arial"/>
							<fx:Script>
								<![CDATA[
									import utils.DebugUtil;
									private function getImage(item:Object):Object
									{
										if ( item.imagePath )
										{											
											return item.imagePath;
										}
										else 
										{
											return 	"assets/SamplePhoto2.jpg";
										}
										
									}
									
									private function getWhy(item:Object):Object
									{
										var strWhy:String = new String()
										if ( item.why )
										{
											strWhy = "Why: " + item.why;
										}
										else
										{
											strWhy = "(No Why Provided)";
										}
										return strWhy;
									}
									
									private function getTitle(item:Object):Object
									{			
										var strTitle:String = new String()
										if ( item.title )
										{
											strTitle += item.title;
										}
										else
										{
											strTitle = "(No Title Provided)";
										}
										return strTitle;
									}
									private function getStartDate(item:Object):Object
									{			
										return "Start Date: " + new Date(item.startDate).toLocaleString();
									}
								]]>
							</fx:Script>
						</s:VGroup>
					</s:HGroup>
				</fx:Component>
			</s:itemRenderer>
		</s:List>
	</s:VGroup>
</s:View>

Open in new window

Avatar of dgofman
dgofman
Flag of United States of America image

I will recommend to create a new class for Example "ListItemRenderer.as"
All your code under <fx:Component></fx:Component> move to that class
Attached a new itemrenderer to your List component
<s:List id="goalList" itemRenderer="ListItemRenderer"...
override in the ListItemRenderer class data function

override public function set data(value:Object):void

and inside function data you can validate your parameters

You can also override data function under fx:Component tags but your code will be large and more difficult to understand
Avatar of SDKCompany

ASKER

dgofman:

Thanks for the reply.  Please bear with me as I am very green and may ask some silly questions.  I have done what you suggested, but when I save the view with the list that references ItemListRenderer, I get the following error:

1120: Access of undefined property ListItemRenderer.
I took care of that error by adding this into my view code:

import components.ListItemRenderer;

However, now I get this error:

1172: Definition ListItemRenderer could not be found.
Can you attacg your example or copy paste your itemRenderer class
ASKER CERTIFIED SOLUTION
Avatar of dgofman
dgofman
Flag of United States of America image

Link to home
membership
Create a free account to see this answer
Signing up is free and takes 30 seconds. No credit card required.
See answer