[FlexJS] Probable design to support runtime update to DataGrid component

[sankar <sa...@gmail.com>]

/I reported this requirement to Apache JIRA
(https://issues.apache.org/jira/browse/FLEX-35197) sometime back and also
discussed here in mailing-list
(apache-flex-flexjs-0.8.0-bin\frameworks\js\FlexJS\libs)./

I spent sometime to make the DataGrid component updates at runtime based on
it's collection change, which was missing in present FlexJS due to it's PAYG
nature; But as a Flex developer I feel it's quite an important feature to
update the DataGrid component at runtime upon collection change. I worked on
this by looking not to hurt it's present PAYG manner but a feature available
that can be added per requirement. 

I've added the full source of the POC project (demonstrating this
implementation) and modified/compiled SWCs that can be use in FlexJS SDK, at
https://issues.apache.org/jira/browse/FLEX-35197. (Note: the changes done
with latest FlexJS 0.8.0 nightly build)

I've also included my new and changed source to the JIRA issue, for review.

Following is some details to the changes to the source.

*PNDataProviderChangeNotifier:* I extended DataProviderChangeNotifier with
custom event listening to dataProvider/ArrayList class as the existing
"itemAdded", "itemRemoved" and "itemUpdated" event wasn't sufficient for
this of our needs. The newer event listening is based on
HTML/flex/org/apache/flex/events/ItemAddedEvent.as class which also has an
item field that meets our requirement. This is the very initiation point to
make the DataGrid works per it's collection change at runtime - if the bead
not added the DataGrid continue to work as PAYG.

*PNArrayList:* We found that existing ArrayList class wasn't sufficient for
our needs; It do tells when an item being updated or added or removed by
it's "itemUpdated", "itemAdded" or "itemRemoved" respectively, but it has no
way to tell which item being updated or added or removed. PNArrayList
extended by ArrayList class, dispatches that piece of information which is
critical for our needs to update particular indexed item in DataGrid without
re-creating whole list components it has every time. The events are listened
by PNDataProviderChangeNotifier which eventually informs the
DataItemRendererFactoryForArrayListData with specific information to
update/delete/add an item.

*DataItemRendererFactoryForArrayListData:* For some unknown reason I
couldn't able to extend this class. Even there were no errors and SWF also
ran pretty fine if I extend it, HTML output always found distorted. I do not
know why, maybe there are other classes which directly referring
DataItemRendererFactoryForArrayListData instead of
PNDataItemRendererFactoryForArrayListData class. I found the following
distortion when ran as HTML in browser:
<http://apache-flex-development.2333347.n4.nabble.com/file/n57626/distortedui.png> 

Thus, I choose to modify the original
DataItemRendererFactoryForArrayListData class only and adds my piece of
codes; suggestions are welcome to make it a custom class resolving the UI
issue in HTML output.

The DataItemRendererFactoryForArrayListData class is now listens to the
events that fired by PNDataProviderChangeNotifier and therefore reacts to
update or add or remove any particular row in it's DataGroup with custom
functions. (In original FlexJS design,
DataItemRendererFactoryForArrayListData only listens to "itemAdded",
"itemRemoved" and "itemUpdated" events and re-creates all the list
components it has which we found maybe costly in HTML run)

*PNDataGroup:* Extended by DataGroup class. I require to extend it because
the class didn't had any addItemAt method in original source. Directly
calling addItemAt method (without overriding it in DataGroup) we found some
UI problems; thus we choose to extend the class and add our own addItemAt
method.

*PNListSingleSelectionMouseController:* Extended by
ListSingleSelectionMouseController. I noticed the original class was setting
rollover-index and selected-index property by an static value stored in
index property. This was anyway Okay for PAYG, but when a row been removed
or added in-between in runtime update scheme, the stored index property to
each row property became wrong. Thus I extended the class to update the
rollover-index and selected-index property based upon it's data index in the
dataProvider collection.

Except above classes, ItemAddedEvent.as also added in Core package so
PNArrayList class can access it from it's location. 

With my POC project, I tested following things were working fine with these
new implementation, and I confirm recreation of complete list (inside
DataGroup or DataItemRendererFactoryForArrayListData never fires when
updating, too):

<http://apache-flex-development.2333347.n4.nabble.com/file/n57626/testMatrix.png> 

Any suggestion or review to the code is welcome.



--
View this message in context: http://apache-flex-development.2333347.n4.nabble.com/FlexJS-Probable-design-to-support-runtime-update-to-DataGrid-component-tp57626.html
Sent from the Apache Flex Development mailing list archive at Nabble.com.

Re: [FlexJS] Probable design to support runtime update to DataGrid component

[piotrz <pi...@gmail.com>]

As for 1: Even if they in original source - we should probably unregister
them once we get what we want. 
Definately Peter will know better.

Piotr



-----
Apache Flex PMC
piotrzarzycki21@gmail.com
--
View this message in context: http://apache-flex-development.2333347.n4.nabble.com/FlexJS-Probable-design-to-support-runtime-update-to-DataGrid-component-tp57626p57657.html
Sent from the Apache Flex Development mailing list archive at Nabble.com.

Re: [FlexJS] Probable design to support runtime update to DataGrid component

[sankar <sa...@gmail.com>]

Hi Piotr,


piotrz wrote
> I have questions to this class: "DataItemRendererFactoryForArrayList":
> 
> 1) You are registering for events "beadsAdded" and "initComplete" - Is it
> possible that both event will call "finishSetup" handler ? Maybe you
> should unregister once you get what you want ?
> 2) Is it possible that IDataProviderModel will be null ?

1) I did not registers those events, those were there already in the
original source. I noticed that it is always 'initComplete' which gets to
the 'finishSetup', I never seen the handler caused by 'beadsAdded' in my
tests. But anyway I rather concentrated to my part of interest than
fine-tuning original source. 
2) At this point (DataItemRendererFactoryForArrayList) so far I never see
IDataProviderModel is null. If you seen, there are some places where null
check already applied, i.e. beads. Probably
DataItemRendererFactoryForArrayList not supposed to have a null
IDataProviderModel. But of course Alex/Peter can advise on this better.



--
View this message in context: http://apache-flex-development.2333347.n4.nabble.com/FlexJS-Probable-design-to-support-runtime-update-to-DataGrid-component-tp57626p57645.html
Sent from the Apache Flex Development mailing list archive at Nabble.com.

Re: [FlexJS] Probable design to support runtime update to DataGrid component

[piotrz <pi...@gmail.com>]

Hi Sankar,

First of all Big Thank You for this work! 

I have questions to this class: "DataItemRendererFactoryForArrayList":

1) You are registering for events "beadsAdded" and "initComplete" - Is it
possible that both event will call "finishSetup" handler ? Maybe you should
unregister once you get what you want ?
2) Is it possible that IDataProviderModel will be null ?

Additional just my thoughts - 
Maybe will be better if you make a pull request on github - if we decide
take it to the FlexJS it may be easier for us apply it to the source.

Piotr



-----
Apache Flex PMC
piotrzarzycki21@gmail.com
--
View this message in context: http://apache-flex-development.2333347.n4.nabble.com/FlexJS-Probable-design-to-support-runtime-update-to-DataGrid-component-tp57626p57628.html
Sent from the Apache Flex Development mailing list archive at Nabble.com.