Ok, I re wrote the 1st screen into a component. Here is the code for my
component. When a user selects a client from the data grid I want to
dispatch an event of "clientSelected" My question now is in my main app I
have the following code. How do I tell my main application to listen for
that event? addEventListener("clientSelected",onClientSelect) does not work?
Also all of my "screens" have next and previous buttons and when the app was
all in one file i was able to change states. Now that I am in a component
how can i change the state? Thanks for your help!!
<mx:State name="start">
<mx:AddChild>
<views:ClientSelector id="startPanel"/>
</mx:AddChild>
</mx:State>
<?xml version="1.0" encoding="utf-8"?>
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml";
width="100%" height="100%" layout="vertical"
title="Rogers Image Uploader - Start"
backgroundColor="#000" initialize="init();">
<mx:Script>
<![CDATA[
import mx.rpc.events.ResultEvent;
import mx.collections.ArrayCollection;
import mx.events.ListEvent;
[Bindable]
// clients list pulled from ro
private var _clients:ArrayCollection;
// an object to hold data of the selected client
public var _client:Object;
private function init():void {
// populate the cients grid
Clients.listClients();
// disable the next button until a client is selcted
btnNext.enabled = false;
btnPrevious.enabled = false;
}
// getter/setter for client object; holds client data
public function set client(obj:Object):void {
_client = obj;
dispatchEvent(new Event("clientSelected"));
}
[Bindable(event="clientSelected")]
public function get client():Object {
return _client;
}
private function listClients(event:ResultEvent):void {
_clients = event.result as ArrayCollection;
}
private function onClientSelect(event:ListEvent):void {
client = event.itemRenderer.data;
btnNext.enabled = true;
}
private function onNext(event:MouseEvent):void {
this.currentState = "uploader";
}
// DataGrid Status Label Renderer
private function
statusRenderer(item:Object,column:DataGridColumn):String {
var status:String = "";
if(item.status == "A"){
status = "Active";
} else {
status = "Inactive";
}
return status;
}
// Label function to add row numbers to the grid
private function
rowNumber(item:Object,column:DataGridColumn):String {
var index:int = _clients.getItemIndex(item) + 1;
return String(index);
}
]]>
</mx:Script>
<mx:RemoteObject id="Clients" destination="ColdFusion"
source="src.cfc.Clients" showBusyCursor="true">
<mx:method name="listClients" result="listClients(event)"/>
</mx:RemoteObject>
<mx:DataGrid id="dgClients" dataProvider="{_clients}" width="100%"
height="100%" change="onClientSelect(event)"
textRollOverColor="#ffffff" rollOverColor="#242424"
selectionColor="#242424" textSelectedColor="#ffffff">
<mx:columns>
<mx:DataGridColumn headerText="" labelFunction="rowNumber"
width="40"/>
<mx:DataGridColumn headerText="Client" dataField="client_name"
width="250"/>
<mx:DataGridColumn headerText="City" dataField="city"/>
<mx:DataGridColumn headerText="State" dataField="state"/>
<mx:DataGridColumn headerText="Zip" dataField="zip"/>
<mx:DataGridColumn headerText="Phone" dataField="phone"/>
<mx:DataGridColumn headerText="Status" dataField="status"
labelFunction="statusRenderer"/>
</mx:columns>
</mx:DataGrid>
<mx:ControlBar>
<mx:Button id="btnPrevious" label="Previous"/>
<mx:Spacer width="100%"/>
<mx:Label text="Select a client and click next." color="#ffffff"/>
<mx:Spacer width="100%"/>
<mx:Button id="btnNext" label="Next" click="onNext(event)"/>
</mx:ControlBar>
</mx:Panel>
