SDKCompany
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>
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.
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.
ASKER
I took care of that error by adding this into my view code:
import components.ListItemRendere r;
However, now I get this error:
1172: Definition ListItemRenderer could not be found.
import components.ListItemRendere
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
membership
Create a free account to see this answer
Signing up is free and takes 30 seconds. No credit card required.
All your code under <fx:Component></fx:Compone
Attached a new itemrenderer to your List component
<s:List id="goalList" itemRenderer="ListItemRend
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