Updating external Flex components from an action

Question

Hello, I'm new to Flex and am having trouble understanding Events. I think Events are what I want to use for my situation. I have 2 components, addUser.mxml and listUsers.mxml. I access these from a ViewStack in my main application. When I load listUsers.mxml it shows a list of current users in a datagrid via a HTTPService call. When I add a user using the form on addUser.mxml I would like the datagrid in listUsers.mxml to refresh when I return to that view to show the new user. I've tried several different things with addEventListener and dispatchEvent but can't seem to get it working. Can someone help me with this logic?

--

Sample code for comment, I've parsed out the non-relative stuff.

adduser look like this:

<mx:HTTPService id="httpService" 
        url="{'http://someurl.com'}" 
        useProxy="false" 
        method="POST"
        fault="faultHandler()"      
        result="resultHandler(event)"
         />


public function addUser():void{  
            if(validateForm()){
                params = {};
                params['action'] = 'adduser';
                params['firstName'] = firstName.text;           
                params['lastName'] = lastName.text;
                params['email'] = email.text;
                params['isActive'] = isActive.selected;

                httpService.cancel();   
                httpService.addEventListener("result", addUserResult);                      
                httpService.send(params);
            }
}

public function addUserResult(event:ResultEvent):void{
            var result:Object = event.result;

            //reset fields if add user was successful
            if(result.returnXML.action=='adduser'){

                var m:String = result.returnXML.message.toString();                                 
                    if(result.returnXML.status=='fail'){                        
                        Alert.show(m, null, Alert.OK, null, null, Application.application.IconError);
                    }
                    if(result.returnXML.status=='success'){                     
                        firstName.text = "";            
                        lastName.text = "";
                        email.text = "";
                        isActive.selected = true;

                        Alert.show(m, null, Alert.OK, null, null, Application.application.IconSuccess);
                    }                   
            }                   
}   


<mx:Button id="addButton" label="Add" click="addUser();" />

listUsers looks like this:

<mx:HTTPService id="httpListService" 
        url="{'http://someurl.com'}" 
        useProxy="false" 
        method="POST"
        fault="faultHandler()"      
        result="resultHandler(event)"
         />


<mx:DataGrid id="dgUsers"                         
                itemClick="dgClickEvent(event);"                          
                width="85%" 
                maxHeight="500"             
                >

                <mx:columns>
                    <mx:DataGridColumn headerText="First Name" dataField="fn" />
                    <mx:DataGridColumn headerText="Last Name" dataField="ln" />
                    <mx:DataGridColumn headerText="Email" dataField="email"  />
                    <mx:DataGridColumn headerText="Active" dataField="active" />
                </mx:columns>
            </mx:DataGrid>

Answer 1

I don't think event listeners are necessarily the way to go. You use an event listener to do something upon detection of something else. ie) listening for a mouse down on a ui component = detect mouse down, do drag operation.

Given your example I think you just need to chain your functions together. It looks like your addUser function saves the user to the same source as your list users gets data from, so in your position I would call the listUsers httpService at the end of the add user result to refresh your data populating the datagrid.

httpListService.send()

I don't see your result handler for httpListService but that's where you update the data in your dataGrid.

good luck, and please post back with any complications.

Answer 2

Got it working. Here's what i did - basically everytime the parent viewstack brings the listUsers view into focus, it sends the httpListService and refreshes the datagrid regardless of any events (or non events) in the addUser component or any other component. it adds to the network traffic but, for the scope of my project, that is acceptable.

in listUsers.mxml:

<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="init()">

...

public function init():void{
    //vsUsers is my view stack on the main application component
    Application.application.vsUsers.addEventListener(IndexChangedEvent.CHANGE, refreshUsersGrid);           
}

...

public function refreshUsersGrid(e:IndexChangedEvent):void{     
    //if the new viewable child is the list users view, then refresh the datagrid   
    if(Application.application.vsUsers.getChildAt(e.newIndex).name=='viewListUsers'){               
        //the sendListUsersRequest method fires the HTTPService send method and binds the results to the datagrid
        sendListUsersRequest();
    }
}