Flex detect CollectionEvent change - apache-flex

On one PC, I have a datagrid with dataprovider being an arraycollection populated by a collection of records retrieved from MySQL DB. On another PC, another component retrieve the same collection of records and update them. Instanly, the datagrid in PC one reflected the changes that were made in PC two which is nice because it pushes the changes to all affected controls online. However, I want to detect the the arraycollection changes to do some other things but such CollectionEvent.COLLECTION_CHANGE is not detected. Can you help please? Here is the code:
protected function doInit():void
{
acLeave.addEventListener(CollectionEvent.COLLECTION_CHANGE, onAcLeaveChange);
}
protected function onAcLeaveChange(event:CollectionEvent):void
{
do something
}
I am using lcds and the data management service handled the data synchronization already. That is why the first pc with the data grid data provider acLeave changed automatically. Somehow it is because lcds knows there is a client (pc one) online, then it pushes the changes to it. My question is that the datagrid data changed, I want to detect there is a data change occur so that I can do some other updates. Normally, to detect datagrid change, I can use datagrid datachange or simply addlistener to the data provider for collectionEvent.COLLECTION_CHANGE but in this case even though I can see the ac acLeave changed, the event did not fire. Please help!
Hi, me again and thanks for your advise. I have added the setter to acLeave but still unable to listen the collectionEvent change. Here is the modified code:
private var _acLeave:ArrayCollection = new ArrayCollection();
[Bindable]
public function get acLeave():ArrayCollection
{
return _acLeave;
}
public function set acLeave(value:ArrayCollection):void
{
_acLeave = value;
}
protected function doInit():void
{
acLeave.addEventListener(CollectionEvent.COLLECTION_CHANGE, onAcChange);
}
protected function dataGrid_creationCompleteHandler(event:FlexEvent):void
{
getAllResult.token = leaverequestService.getAll();
getAllResult.addEventListener(ResultEvent.RESULT, onGotResult);
}
protected function onGotResult(event:ResultEvent):void
{
acLeave = getAllResult.lastResult;
}
protected function onAcChange(event:CollectionEvent):void
{
// this never executed because unable to detect a change on acLeave
Alert.show("acLeave Changed !");
}

If your collection change handler is not firing, I am guessing something like this is happening:
pc1 adds collection change listener
pc2 changes the collection
LCDS sends pc1 a brand new ArrayCollection object (not just the element that changed) to use
The original ArrayCollection you are listening for the collectionChange is not necessarily getting changed, it is getting replaced. So no collection change event ocurrs.
If you add a setter method for this ArrayCollection (acLeave in your example), then you will know if this ever happens. Technically, you should use both the collection change event and this setter to be able to detect all the cases when the array could be changed.

Related

How to pass data from one component to another component in flex

I have one class named as EmployeeResult where I am getting the response from the service. Inside the resulthandler I am getting an array of employees like name, id, age etc. I have one dataGrid inside the employeeView.mxml file. Inside the employeeView.mxml file I have an ArrayCollection which is the dataprovider to the datagrid. I want to update that arraycollection from inside the EmployeeResult file. When working with Cairngorm framework I have used the arraycollection inside the singleton to achieve the goal. In case of mate framework I have used the propertyinjector tags. But how do I achieve this objective in my case without any framework. How to achieve property injection without using ane framework or singleton class.
Continuing on your previous question: How to listen to events inside the child component dispatched by the parent component, you can simply dispatch a custom event containing that list of employees and notify the entire application of its arrival.
Something like this:
private function handleMyEmployeeResults(event:ResultEvent):void {
var employees:IList = EmployeeResult(event.result).employeeList;
dispatchEvent(new EmployeeEvent(EmployeeEvent.LIST_LOADED, employees, true));
}
Since this is a service result handler, we may assume that its class instance is not a view and hence it is not on the display list, which is why the event can't bubble. To address this we can dispatch the event directly on the stage.
FlexGlobals.topLevelApplication.stage.dispatchEvent(
new EmployeeEvent(EmployeeEvent.LIST_LOADED, employees)
);
Any view in your application can now listen for this event and set its properties accordingly:
//inside View1
stage.addEventListener(EmployeeEvent.LIST_LOADED, handleEmployeesLoaded);
private function handleEmployeesLoaded(event:EmployeeEvent):void {
myDataGrid.dataProvider = event.employees;
}
//inside View2
stage.addEventListener(EmployeeEvent.LIST_LOADED, handleEmployeesLoaded);
private function handleEmployeesLoaded(event:EmployeeEvent):void {
myOtherKindOfList.dataProvider = event.employees;
myFirstEmployeeLabel.text =
event.employees[0].firstname + event.employees[0].lastname;
}
Another more straightforward approach is to use your Application as a singleton. Create a bindable property employeeList on your main application. Now set its value when the results come in:
private function handleMyEmployeeResults(event:ResultEvent):void {
var employees:IList = EmployeeResult(event.result).employeeList;
FlexGlobals.topLevelApplication.employeeList = employees;
}
Now you can bind to this property from anywhere in your application.
<View1>
<s:DataGrid dataProvider="{FlexGlobals.topLevelApplication.employeeList}" />
</View1>
<View2>
<s:List dataProvider="{FlexGlobals.topLevelApplication.employeeList}" />
</View2>
Though this approach has the merit of being very easy to implement, it has all the downsides of a Singleton (e.g. poorly testable).
Given the types of questions you've been asking, you really should be considering a Framework such as Robotlegs or Mate. They give you the tools to wire your application together without horrible hacks that will limit your flexibility or complicate maintenance long-term.
Check out my previous answer here for links to the same project done without a framework, with Mate, and with Robotlegs.

Data binding across multiple objects in Flex 3

I am new to Flex (got assigned to maintain an old project at work) and am having some trouble getting data binding to work correctly. I have a popup form class, AddOffer.mxml which uses a model AddOfferModel.as. On my popup form, I have the following component:
<mx:FormItem label="{getResource('addOffer.form.OFFER_DATE')}:"
labelWidth="90">
<views:OfferWindowDatesFragment
id="offerWindowField"
start="{model.offerStartDate}"
stop="{model.offerStopDate}" />
</mx:FormItem>
My AddForm.mxml file also has some embedded actionscript where I define my 'model' variable:
[Bindable]
public var model:AddOfferModel;
The model variables I am trying to bind to are standard getters/setters and look like this inside AddOfferModel.as:
[Bindable]
public function set offerStartDate(val:EditableInstant):void
{
_offerStartDate = val;
}
public function get offerStartDate():EditableInstant
{
return _offerStartDate;
}
private var _offerStartDate:EditableInstant;
[Bindable]
public function set offerStopDate(val:EditableInstant):void
{
_offerStopDate = val;
}
public function get offerStopDate():EditableInstant
{
return _offerStopDate;
}
private var _offerStopDate:EditableInstant;
Inside the OfferWindowDatesFragment component class, the start and stop variables look like this:
[Bindable]
public function set start(val:EditableInstant):void
{
_start = val;
}
public function get start():EditableInstant
{
return _start;
}
private var _start:EditableInstant;
[Bindable]
public function set stop(val:EditableInstant):void
{
_stop = val;
}
public function get stop():EditableInstant
{
return _stop;
}
private var _stop:EditableInstant;
Basically, I just want to bind the start and stop variables in my OfferWindowDatesFragment class to the offerStartDate and offerStopDate variables in the AddOfferModel.as file. Whenever I access the start/stop variables in functions inside the OfferWindowDatesFragment class, they are null.
I have an event listener function that gets triggered in OfferWindowDatesFragment anytime a user selects a new date, it looks like this:
private function changeOfferDate():void
{
start.currentValue = offerDateEditor.start;
stop.currentValue = offerDateEditor.stop;
}
Every time I reach this function, it throws up an error because 'start' and 'stop' are both null ... but should have been initialized and bound already. If I look at the variables in the debugger, I can confirm that values on the right side of the assignment expression are valid, and not what is causing the error.
I am not real familiar with how initialization works in Flex, and I assumed as long as I instantiated the component as seen in the first code snippet at the top of my post, it would initialize all the class variables, and setup the bindings. Am I missing something? Perhaps I am not properly initializing the model or class data for AddForm.mxml or AddFormModel.as, thereby binding null references to the start/stop fields in my OfferWindowDatesFragment class?
Any help would be greatly appreciated. Thanks!
EDIT:
I looked into this further and tried using Mate to inject the 'model' variable inside AddOffer.mxml with a valid AddOfferModel object:
<Injectors target="{AddOffer}" debug="{debug}">
<ObjectBuilder generator="{AddOfferModel}" constructorArguments="{scope.dispatcher}" cache="local"/>
<PropertyInjector targetKey="model" source="{lastReturn}" />
</Injectors>
I load the AddOffer.mxml dialog as the result of a button click event on another form. The function that pops it up looks like this:
public function addOffer():void
{
var addOfferDialog:AddOffer = new AddOffer();
addOfferDialog.addEventListener("addOffer", addOfferFromDialog);
modalUtil.popup(addOfferDialog);
}
It doesn't seem to be assigning anything to the 'model' variable in AddOffer.mxml. Does loading a view/dialog this way not trigger an injection from Mate by chance? (I realize this last part might belong in the Mate forums, but I'm hoping somebody here might have some insight on all of this).
In AddOffer.mxml, you have this code:
[Bindable]
public var model:AddOfferModel;
Is there something outside AddOffer.mxml that is setting this to a valid AddOfferModel? There should be. The nature of how the Flex component life cycle means that you can expect that things may be null at times as a View builds. So you should build your components to be able to "right themselves" after receiving bad data, if the data eventually comes good.
Data binding is one way to do this, but it may not paper over everything depending on what else is going on.
Have you verified that the model value you're getting is not null at the point where the user selects the date and that its offerStartDate and offerEndDate properties have been populated with valid EditableInstants? If both of those are correct, I'd start looking for pieces of the Views that expect to have stuff at a given instant and then don't recover if it is provided later.

Occurrence of ResultEvent event in remoting a spring Object

In my attempt to learn flex remoting I came across this
flexService.getRules.addEventListener(ResultEvent.RESULT, loadRules);
here flexService is a remote java object .. In above function call can any one help me that when ResultEvent.RESULT will occur. On studying about ResultEvent in AS document it states as
The event that indicates an RPC operation has successfully returned a result
So keeping that in mind my guess is ResultEvent will be fired when flexService.getRules method will successfully return a list of object,where flexService is object of remote class FlexService having getRules function which returns list of object, Can any one please tell how exactly it works..
Also can some one plz tell me how eventListener can be added to a list of object
PS: I am using Spring as backend
Here you set result to arraycollection
private function loadRules(event:ResultEvent):void
{
var list:ArrayCollection = new ArrayCollection();
list = event.result as ArrayCollection;
}
I'll be going on assumptions since you apparently aren't keen on showing more code or giving pertinent information.
I'm assuming that 'flexService' is a RemoteObject that has set all required properties (destination, endpoint, etc)
I'm assuming that 'getRules' is an available function on your java remote class which returns the information needed.
I'm assuming that everything is being sent over using AMF.
in that case, it's as simple as doing this:
var token:ASyncToken = flexService.getRules(arg1, arg2);
token.addResponder(new Responder(yourResultFunction, yourFaultFunction));
private function yourResultFunction(data:Object):void
{
// Do something with data here
}
private function yourFaultFunction(fault:Object):void
{
// do something if a fault happens
}
Of course, this is very basic and you should try to implement a better pattern (commands) around it.

Why change in ArrayCollection's length doesn't invoke Setter on component using it as data source?

I have a component where I expose the property 'questions' with the following code:
private var _questions:ArrayCollection;
private var questionsChanged:Boolean;
[Bindable("questionsChanged")]
public function get questions():ArrayCollection {
return _questions;
}
public function set questions(value:ArrayCollection):void {
if (_questions != value) {
_questions = value;
questionsChanged = true;
invalidateProperties();
dispatchEvent(new Event("questionsChanged"));
}
}
In this component, I use commitProperties() to implement my logic.
I use Cairngorm and the 'questions' is in the model and hence it's defined as a source for data binding.
When the 'questions' ArrayCollection's size changes elsewhere in the application, it is not invoking the setter method in the component that is destination for the data binding.
Could someone help me understand why this is the case?
You'll have to show the code where you are changing the array collection. But, this will fire the setter:
questions = somethingArrayCollection();
This will not:
questions.addItem(newQestion)
The questions variable is, basically, a pointer. Changing the thing that the variable points to does not need the set event.
I suggest you look at the CollectionChangeEvent, which the ArrayCollection fires when items are added to and from that. Listen to the event and perform your 'change' actions in the event handler. ( or tie into the lifecycle and invalidate some flag and perform your changes in commitProperties() )

flex 3 and autoComplete

im trying to getting auto complete working and i can do so fine when i just create an array in my mxml and then just initialize an arrayCollection at the top of the file in the initialize keyword.
However i want to populate the arraycollection from a webservice but i cant seem to get it;
im my application tag i have the following
creationComplete="init()"
initialize="data2 = new ArrayCollection(data1);"
then in my init method;
private function init():void
{
userRequest.loadWSDL(wsdlUrl);
userRequest.getAllCountries();
}
//this is called when i get a result from userRequest.getAllCountries();
private function getAllCountriesResult(e:ResultEvent):void
{
data1 = new Array(e.result);
}
however my text box is not getting any value.
Anyone with ideas?
first off, Array is not Bindable so changing the variable data1 will have no knock on effect.
The arrayCollection is bindable.
So presumming that the result (e.result) is actually an array (you should check this when debugging) then you could do the following
[Bindable]
priavte var ac : ArrayCollection;
then inside you're getAllCountriesResult function.
ac = new ArrayCollection(e.result);
then anything that has is dataprovider set to the var ac will be updated.
If you wish to update a text value inside a textArea or similar then you should listen for the change event in the arrayCollection and take the appropriate action then.
from your additional points below (just edit your original question)
I take it the autocomplete your talking about is the autocomplete text input box from adobe exchange area as a normal text box doesn’t take an arrayCollection.
If you posted some code it may make it easier to help you.
Preinitialize, then initialize, then creationComplete, then applicationComplete (this is the order they get called in).
If your using the component I’m thinking of, check out http://www.websector.de/blog/2008/04/30/quick-tip-avoid-issues-using-adobes-autocomplete-input-component-using-flex-3/
It appears it may have some issues with flex 3, so check out http://blogs.adobe.com/flex/2006/09/component_autocomplete_text_in.html .
Try this:
private function getAllCountriesResult(e:ResultEvent):void
{
data2.source = new Array(e.result); // or data2.source = e.result as Array
}
Make sure data2 is already initialized as a ArrayCollection.
As for AutoComplete, I'm trying to work things out myself.

Resources