[flexcoders] How do I create in ActionScript what MXML lets me do?

[Raymond Brown]

Data can be found at http://www.silenttrace.com/deviceData.xml

Question one - How can I create my list, "onList" in pure actionscript vice 
mxml?  The reason I want to do this is because I get a null exception 
otherwise.  I imagine its because I am instantiating the itemrenderer before I 
have any data in my arraycollection since a http service call needs to get the 
data.  So I thought if I wait till line 35 and then instantiate the list in 
pure actionscript I am golden.  Can someone let me know if that is possible or 
how I could achieve this?  Things like setting itemChangeEffect and such seem 
to be only in mxml.

Question two ignore the itemRenderer of "onList" and you will see that I get an 
error ever time I select the zero Item in the list on the left and click the 
addToOffBtn.

here is main code

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplicationxmlns:mx="http://www.adobe.com/2006/mxml"; 
layout="absolute"
 creationComplete="init()" width="800" height="600">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.collections.ArrayCollection;
import mx.rpc.events.ResultEvent;
import mx.effects.easing.*;
import listItemRenderer;
[Bindable] private var devicesOnList:ArrayCollection;
[Bindable] private var devicesOffList:ArrayCollection = new ArrayCollection();
private var indexOfOnList:int = 999;
private var indexOfOffList:int = 999;
[Embed(source="tmbdwnbox.png")] private var downIcon:Class;
[Embed(source="tmbupbox.png")] private var upIcon:Class;
private function init():void {
deviceXML.send();
}
private function setIcon(value:*):Class {
 if (value.CURRENTCONDITION == true) {
return upIcon;
} else {
return downIcon;
} 
}
public function getDeviceDataRequest(event:ResultEvent):void {
devicesOnList = event.result.DEVICES.PROPERTIES;
}
private function addSelectedItemToOffList():void {
if (indexOfOnList != 999) {
trace("index of On list" + indexOfOnList);
devicesOffList.addItem(devicesOnList.getItemAt(indexOfOnList));
trace("length off list" + devicesOffList.length);
trace("length on list" + devicesOnList.length);
devicesOnList.removeItemAt(indexOfOnList);
trace("length off list" + devicesOffList.length);
trace("length on list" + devicesOnList.length);
moveOffToOnBtn.enabled = true;
if (devicesOnList.length == 1)
moveOnToOffBtn.enabled = false;
}
indexOfOnList = 999;
}
private function addSelectedItemToOnList():void {
if (indexOfOffList != 999) {
trace("index of Off list" + indexOfOffList);
devicesOnList.addItem(devicesOffList[indexOfOffList]);
trace("length on list" + devicesOffList.length);
trace("length on list" + devicesOnList.length);
devicesOffList.removeItemAt(indexOfOffList);
trace("length on list" + devicesOffList.length);
trace("length on list" + devicesOnList.length);
moveOnToOffBtn.enabled = true;
if (devicesOffList.length == 0)
moveOffToOnBtn.enabled = false;
}
indexOfOffList = 999;
}
private function onListSelectedItemClick(event:Event):void {
//alwas maintain at least one device to listen too.
if (devicesOnList.length != 1) {
indexOfOnList = event.currentTarget.selectedIndex;
}
this.status = "Selected on: " + indexOfOnList;
}
private function offListSelectedItemClick(event:Event):void {
indexOfOffList = event.currentTarget.selectedIndex;
this.status = "Selected off: " + indexOfOffList;
}
]]>
</mx:Script>
<mx:HTTPService 
id="deviceXML" 
url="http://www.silenttrace.com/deviceData.xml"; 
result="getDeviceDataRequest(event)"/>

<mx:HBox width="100%" height="100%">
<mx:List itemRenderer="listItemRenderer" dataProvider="{devicesOnList}" 
id="onList" width="100%" 
selectionColor="blue"
 iconFunction="setIcon" itemsChangeEffect="{itemsChangeEffect}"
 itemClick="onListSelectedItemClick(event)"/>
 <mx:VBox>
 <mx:Button id="moveOnToOffBtn" label="Turn Device Off" 
click="addSelectedItemToOffList()"/>
 <mx:Button id="moveOffToOnBtn" label="Turn Device On" 
click="addSelectedItemToOnList()" enabled="false"/>
</mx:VBox>
 <mx:List id="offList" width="100%" selectionColor="blue" labelField="TITLE" 
dataProvider="{devicesOffList}"
 iconFunction="setIcon" itemsChangeEffect="{itemsChangeEffect}"
 itemClick="offListSelectedItemClick(event)"/>
</mx:HBox> 
<!-- why does this effect cause an error when I select the first item in the 
list on the left
every time and click the moveOnToOffBtn.-->
<mx:Sequenceid="itemsChangeEffect">
<mx:WipeDown duration="500"/>
<mx:Parallel>
<mx:Move duration="750" easingFunction="{Elastic.easeOut}" 
perElementOffset="20"/>
<mx:Blur startDelay="210" blurXFrom="18" blurYFrom="18" blurXTo="0" blurYTo="0" 
duration="500" filter="addItem"/>
</mx:Parallel>
</mx:Sequence>
</mx:WindowedApplication>


Here is itemRenderer

<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"; width="100%" height="65" 
cornerRadius="10" 
borderStyle="solid" backgroundAlpha=".3" backgroundColor="#000000">

<mx:Script>
<![CDATA[
[Bindable] private var aliveDead:Class;
[Embed(source="tmbdwnbox.png")] private var downIcon:Class;
[Embed(source="tmbupbox.png")] private var upIcon:Class;

override public function set data(value:Object):void {
//why is value null??????
if (value.CURRENTCONDITION)
aliveDead = upIcon;
else
aliveDead = downIcon;
}
]]>
</mx:Script>
<mx:Label text="{data.TITLE}" 
fontSize="16" 
fontWeight="bold" 
left="75" top="10" 
color="#FFFFFF" id="deviceNameLabel"/>

<mx:Image top="5" left="10" id="image" source="{aliveDead}"/>

<mx:Labelid="lastHeardText" 
htmlText="{data.LASTHEARD}" 
color="#FFFFFF"
left="75" top="35"/>

<mx:VBox width="20" top="10" right="10" bottom="10">
<mx:Button id="turnOffOnBtn" label="Turn Off/On" width="15" height="15"/>
<mx:Button id="pingNowBtn" label="{data.IP}, {data.PORT}" width="15" 
height="15"/>
</mx:VBox>

</mx:VBox>