flex-issues mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From "Santanu Karar (JIRA)" <j...@apache.org>
Subject [jira] [Updated] (FLEX-35197) [FlexJS] Data-binding is broken or not implemented in DataGrid component
Date Tue, 06 Dec 2016 05:11:58 GMT

     [ https://issues.apache.org/jira/browse/FLEX-35197?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel
]

Santanu Karar updated FLEX-35197:
---------------------------------
    Description: 
(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()"
rowHeight="30">
		<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? 

  was:
(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 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}
// Upon a button click I tried to change collection data at run-time to make effect in DataGrid
UI
private function onButtonClicked():void
{
	// 1. This part not working or updating to DataGrid UI
	/*var tmp:Product = ProductsModel(applicationModel).productList.getItemAt(1) as Product;
	tmp.image = "Modified Text";*/
			
	// 2. This part not working or updating to DataGrid UI either
	/*ProductsModel(applicationModel).productList.source[1] = tmp;
	ProductsModel(applicationModel).dispatchEvent(new Event("propertyChange"));*/
			
	// 3. Only this part worked when *SimpleBinding used instead of ConstantBinding*
	ProductsModel(applicationModel).productList = new ArrayList([new Product("ps220","Weejets",35,190,"assets/smallorangerect.jpg")]);
}

...

// DataGrid ConstantBinding bead replaced with SimpleBinding
<js:DataGrid id="dataGrid" x="20" y="30" width="400" height="300" change="dataGridChange()"
rowHeight="30">
		<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? 


> [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: Santanu Karar
>         Attachments: 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()"
rowHeight="30">
> 		<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
(v6.3.4#6332)

Mime
View raw message