flex-issues mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From "Devsena (JIRA)" <j...@apache.org>
Subject [jira] [Commented] (FLEX-35197) [FlexJS] Data-binding is broken or not implemented in DataGrid component
Date Thu, 29 Dec 2016 09:56:58 GMT

    [ https://issues.apache.org/jira/browse/FLEX-35197?page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel&focusedCommentId=15784994#comment-15784994

Devsena commented on FLEX-35197:

I spent sometime on this implementing runtime binding updates to DataGrid component started
with Peter's initial suggestion to extend custom _DataItemRendererFactoryForArrayListData_
and _DataProviderChangeNotifier_ classes. My target was to implement runtime binding updates
to DataGrid component (which was missing in FlexJS) but not breaking the PAYG ideology it
has. I started with two said classes (by Peter) as my initiation point.

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

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.

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):
|| Method || Works ||
| arrayList._addItem_ | Ok |
| arrayList._addItemAt_ | Ok |
| arrayList._removeItem_ | Ok |
| arrayList._removeItemAt_ | Ok |
| arrayList._setItemAt_ | Ok |

I've attached herewith the changed classes (*PNSource.zip*) for Apache's review, if we can
incorporate without hurting it's PAYG ideology, or just for suggestion. I'm also attaching
the POC project with compiled SDK SWCs (*DataGridPOC.zip*) for an quick test by anyone.

It'd be good to hear Peter and others' view on this.

> [FlexJS] Data-binding is broken or not implemented in DataGrid component
> ------------------------------------------------------------------------
>                 Key: FLEX-35197
>                 URL: https://issues.apache.org/jira/browse/FLEX-35197
>             Project: Apache Flex
>          Issue Type: Question
>    Affects Versions: Apache FlexJS 0.8.0
>            Reporter: Devsena
>            Assignee: Peter Ent
>            Priority: Critical
>         Attachments: DataGridPOC.zip, distortedui.png, src.zip
> (I've took the _DataGrid_ example that supplied within the nightly build of 0.8.0 FlexJS
SDK bundle, and I tried all my tests in that project only)
> h3.Requirement
> Binding is a strong feature in Flex technology. As an user I also do expect that FlexJS
will also empowers us with the same strength developing projects. While testing _DataGrid_
example that supplies within SDK bundle, I noticed that pay-as-you-go view only available
but no actual run-time data binding (as far I tested); which is the strength that I was talking
about. Is run-time data-binding (by any _beads_ or any other way) to DataGrid component is
at all available yet? 
> In the following tests I tried to update one row object's (_Product_) one particular
field (_image_) value, to see it's change in row renderer, at run-time. 
> I also tried to add or delete an item to it's _dataProvider_ collection to see their
changes in DataGrid UI.
> h3.Actual Result
> Run-time data update to collection list not affecting to DataGrid UI.
> h3.How I Tested
> I've attached the source ZIP that supplied within SDK bundle and I modified few codes
to test my requirement.
> The example consists of a DataGrid, and few buttons as follows:
> - Replace Array - replace the entire model with a new Array
> - Update Entry - Update the image for the first entry
> - Add Entry - Add a new entry to the end of the list
> - Remove Entry - Remove the first entry
> - Refresh - this recreates the array and saves it to the model. This forces the DataGrid
to update by the same method as Replace Array
> "Replace Array" and "Refresh" worked fine. "Refresh" is a possible workaround for data
update to grid UI, but it is inefficient for a real application. The other buttons did not
cause DataGrid UI to update. The places which I've changed as follows. 
> *Product.as*
> {code}
> // since I was trying to update one field at least to DataGrid UI, I added get/set methods
to the _image_ field
> private var _image:String;
> [Bindable(event="imageChanged")]
> public function get image():String
> {
> 	return _image;
> }
> public function set image(value:String):void
> {
> 	if (value != _image)
> 	{
> 		_image = value;
> 		dispatchEvent(new Event("imageChanged"));
> 	}
> }
> {code}
> *MyInitialView.mxml*
> {code}
> // Replacing or recreating the collection list
> private function replaceArray():void
> {	
> 	// Only this part worked when SimpleBinding used rather than ConstantBinding
> 	ProductsModel(applicationModel).productList = new ArrayList([new Product("ps220","Weejets",35,190,"assets/smallorangerect.jpg")]);
> 	writeStatus();
> }
> // Update an entry to the collection
> private function updateEntry():void
> {
> 	// This part not working or updating to DataGrid UI either
> 	/*ProductsModel(applicationModel).productList.source[1] = tmp;
> 	ProductsModel(applicationModel).dispatchEvent(new Event("propertyChange"));*/
> 	// This part not working or updating to DataGrid UI
> 	var tmp:Product = ProductsModel(applicationModel).productList.getItemAt(0) as Product;
> 	tmp.image = "Modified Text";
> 	writeStatus();				
> }
> // Adding an item to the collection list
> private function addEntry():void
> {
> 	// Add a new entry to the list
> 	idCounter++;
> 	ProductsModel(applicationModel).productList.addItem(new Product("product" + idCounter,
"Added" + idCounter, 35, 190, "assets/smallorangerect.jpg"));
> 	writeStatus();
> }
> // Removing an item from the collection list
> private function removeEntry():void
> {
> 	// remove the first item
> 	ProductsModel(applicationModel).productList.removeItemAt(0);
> 	writeStatus();
> }
> // Refreshing the collection to datagrid
> private function refresh():void
> {
> 	// force an update setting the model to the same value it already has.  See replaceArray()
> 	// this was insufficient to trigger the update:
> 	// ProductsModel(applicationModel).productList = ProductsModel(applicationModel).productList;
> 	// Since there was NO refresh logic to ArrayList or DataGrid component, we only do a
brute refresh to the list
> 	var oldArray:ArrayList = ProductsModel(applicationModel).productList;
> 	var newArray:ArrayList = new ArrayList();
> 	var index:int;
> 	for (index = 0; index < oldArray.length; index++) {
> 		newArray.addItem(oldArray.getItemAt(index));
> 	}
> 	ProductsModel(applicationModel).productList = newArray;
> 	writeStatus();
> }
> ...
> // DataGrid ConstantBinding bead replaced with SimpleBinding
> <js:DataGrid id="dataGrid" x="20" y="30" width="400" height="300" change="dataGridChange()"
> 		<js:beads>
> 			<js:SimpleBinding sourceID="applicationModel"
> 							  sourcePropertyName="productList" destinationPropertyName="dataProvider" eventName="propertyChange"/>
> ...
> {code}
> I also created a new MXML based _DataItemRenderer_ component to see if binding is working
anyway: *ProductItemRendererMXML.mxml*; But it didn't worked either. 
> I discussed this at dev mailing-list (http://apache-flex-development.2333347.n4.nabble.com/Why-same-files-exists-in-multiple-places-td56983.html)
where Alex suggested that a chain of specific beads usage may help this feature, but he wasn't
sure if such beads already developed or not. 
> Is there any such beads or procedure already available, or, in-development? 

This message was sent by Atlassian JIRA

View raw message