RE: [flexcoders] Component Questions

[Alex Harui]

I seem to be in the minority opinion on this topic, and you must also
know that I develop framework components and not full-fledged production
applications, but if you are headed to MVC, there should be a central
model class that contains the data, and the UI should only reference the
model's data and not really "own" it, or the services that fetch the
data, and when the UI is manipulated, the UI should update the model,
and not really dispatch events for other UI to manage.

 

________________________________

From: flexcoders@yahoogroups.com [mailto:[EMAIL PROTECTED] On
Behalf Of Dan Vega
Sent: Saturday, July 12, 2008 2:45 PM
To: flexcoders@yahoogroups.com
Subject: Re: [flexcoders] Component Questions

 

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
<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>