Mailing-List: contact issues-help@flex.apache.org; run by ezmlm
Precedence: bulk
Reply-To: dev@flex.apache.org
Date: Sat, 17 Dec 2016 08:53:58 +0000 (UTC)
From: "Devsena (JIRA)" <jira@apache.org>
To: issues@flex.apache.org
Message-ID: <JIRA.13025664.1480952522000.545346.1481964838441@Atlassian.JIRA>
In-Reply-To: <JIRA.13025664.1480952522000@Atlassian.JIRA>
References: <JIRA.13025664.1480952522000@Atlassian.JIRA> <JIRA.13025664.1480952522265@arcas>
Subject: [jira] [Commented] (FLEX-35197) [FlexJS] Data-binding is broken or
 not implemented in DataGrid component
MIME-Version: 1.0
Content-Type: text/plain; charset=utf-8
Content-Transfer-Encoding: 7bit
archived-at: Sat, 17 Dec 2016 08:54:00 -0000


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

Devsena commented on FLEX-35197:
--------------------------------

[~panli@prominic.net] Although it may looks like it suppose to work but it won't. My given example codes already shown this in _updateEntry_ method:
{code}
// 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"));

	...				
}
{code}

> [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: 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)