flex-issues mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From "Devsena (JIRA)" <j...@apache.org>
Subject [jira] [Updated] (FLEX-35227) [FlexJS] Data-binding partially working between class and components
Date Thu, 22 Dec 2016 17:50:58 GMT

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

Devsena updated FLEX-35227:
---------------------------
    Description: 
Bracketed data binding to UI component do not works properly in FlexJS 0.8.0 nightly build
SDK. 

*Works*
{code}
<js:Label id="lbl" text="{anyClass.fieldA}" width="300"/>
{code}

*Do not works*
{code}
<js:Label text="{anyClass.fieldB.fieldC}" width="300"/>
{code}

Binding to UI component seems do not works when there are multiple reference, i.e. _class.field.field_.
Following are the snippets of the codes which I used in this test:

*InitialView MXML file*
{code}
[Bindable] private var anyClass:ClassA = new ClassA();
protected function onTextInputChangeA(event:org.apache.flex.events.Event):void
{
	anyClass.fieldA = myTI1.text;
}
			
protected function onTextInputChangeB(event:org.apache.flex.events.Event):void
{
	anyClass.fieldB.fieldC = myTI2.text;
}
...
<js:VContainer width="500">
	...
	<js:TextInput id="myTI1" text="Change Value.." change="onTextInputChangeA(event)"/>
	<js:Label id="lbl" text="{anyClass.fieldA}" width="300"/>
</js:VContainer>
<js:VContainer width="500">
	...
	<js:TextInput id="myTI2" text="Change Value.." change="onTextInputChangeB(event)"/>
	<js:Label text="{anyClass.fieldB.fieldC}" width="300"/>
</js:VContainer>
{code}

*ClassA*
{code}
public class ClassA extends EventDispatcher
{
	[Bindable] public var fieldB:ClassB = new ClassB("Change Value..");
		
	public function ClassA() { }
	
	private var _fieldA:String = "Change Value..";

	[Bindable("fieldAChanged")]
	public function get fieldA():String
	{
		return _fieldA;
	}
		
	public function set fieldA(value:String):void
	{
		if (value != _fieldA)
		{
			_fieldA = value;
			dispatchEvent(new Event("fieldAChanged"));
		}
	}
}
{code}

*ClassB*
{code}
[Bindable] public class ClassB extends EventDispatcher
{
	public function ClassB(fieldC:String)
	{
		this.fieldC = fieldC;
	}
		
	private var _fieldC:String;
		
	[Bindable(event="fieldCChanged")]
	public function get fieldC():String
	{
		return _fieldC;
	}
		
	public function set fieldC(value:String):void
	{
		if (value != _fieldC)
		{
			_fieldC = value;
			dispatchEvent(new Event("fieldCChanged"));
		}
	}
}
{code}

I've attached herewith the source to the test project. Please, take a look.

  was:
While testing data-binding feature with FlexJS 0.8.0 nightly build SDK, I found it's partially
working between class and components. My component hierarchy looks like this:

!hierarchy.png!

In above image, 
- *component* is my _initialView_ to my FlexJS project
- *class* is just an actionScript class 
- *fieldA* is a _String_ type of field with it's _get/set_ methods inside *class*
- *fieldB* is another class type of object inside *class*
- *image* is a _String_ type of field with it's _get/set_ methods inside *fieldB* class

When running my test project (source attached) it suppose to look like this in browser HTML:

!poc.png!

- The first part *Change text in AnotherClass.fieldA field* has two components - button and
label
- Clicking on the button it changes value of *class.fieldA*
- The label component _text_ property is bindable to *class.fieldA*
- Second part of the POC *Change value in AnotherClass.fieldB.image* also has two components
- text input and label
- Text input _change_ method updates it's value to *class.fieldB.image* field
- The label component's _text_ property is bindable to *class.fieldB.image*

h3. Output when running as HTML in browser

- First part's label does changes it's text when clicking the button - binding seems works
fine
- Changing text in second part's text input component do not cause updating to this part's
label - although everything has requisite _[Bindable]_ metadata - binding not works


So in a nutshell, binding to a component *works* when it bind to {{class.field}}; but it *do
not works* when it bind to {{class.field.childField}}.


> [FlexJS] Data-binding partially working between class and components
> --------------------------------------------------------------------
>
>                 Key: FLEX-35227
>                 URL: https://issues.apache.org/jira/browse/FLEX-35227
>             Project: Apache Flex
>          Issue Type: Bug
>    Affects Versions: Apache FlexJS 0.8.0
>            Reporter: Devsena
>         Attachments: POCSource.zip
>
>
> Bracketed data binding to UI component do not works properly in FlexJS 0.8.0 nightly
build SDK. 
> *Works*
> {code}
> <js:Label id="lbl" text="{anyClass.fieldA}" width="300"/>
> {code}
> *Do not works*
> {code}
> <js:Label text="{anyClass.fieldB.fieldC}" width="300"/>
> {code}
> Binding to UI component seems do not works when there are multiple reference, i.e. _class.field.field_.
Following are the snippets of the codes which I used in this test:
> *InitialView MXML file*
> {code}
> [Bindable] private var anyClass:ClassA = new ClassA();
> protected function onTextInputChangeA(event:org.apache.flex.events.Event):void
> {
> 	anyClass.fieldA = myTI1.text;
> }
> 			
> protected function onTextInputChangeB(event:org.apache.flex.events.Event):void
> {
> 	anyClass.fieldB.fieldC = myTI2.text;
> }
> ...
> <js:VContainer width="500">
> 	...
> 	<js:TextInput id="myTI1" text="Change Value.." change="onTextInputChangeA(event)"/>
> 	<js:Label id="lbl" text="{anyClass.fieldA}" width="300"/>
> </js:VContainer>
> <js:VContainer width="500">
> 	...
> 	<js:TextInput id="myTI2" text="Change Value.." change="onTextInputChangeB(event)"/>
> 	<js:Label text="{anyClass.fieldB.fieldC}" width="300"/>
> </js:VContainer>
> {code}
> *ClassA*
> {code}
> public class ClassA extends EventDispatcher
> {
> 	[Bindable] public var fieldB:ClassB = new ClassB("Change Value..");
> 		
> 	public function ClassA() { }
> 	
> 	private var _fieldA:String = "Change Value..";
> 	[Bindable("fieldAChanged")]
> 	public function get fieldA():String
> 	{
> 		return _fieldA;
> 	}
> 		
> 	public function set fieldA(value:String):void
> 	{
> 		if (value != _fieldA)
> 		{
> 			_fieldA = value;
> 			dispatchEvent(new Event("fieldAChanged"));
> 		}
> 	}
> }
> {code}
> *ClassB*
> {code}
> [Bindable] public class ClassB extends EventDispatcher
> {
> 	public function ClassB(fieldC:String)
> 	{
> 		this.fieldC = fieldC;
> 	}
> 		
> 	private var _fieldC:String;
> 		
> 	[Bindable(event="fieldCChanged")]
> 	public function get fieldC():String
> 	{
> 		return _fieldC;
> 	}
> 		
> 	public function set fieldC(value:String):void
> 	{
> 		if (value != _fieldC)
> 		{
> 			_fieldC = value;
> 			dispatchEvent(new Event("fieldCChanged"));
> 		}
> 	}
> }
> {code}
> I've attached herewith the source to the test project. Please, take a look.



--
This message was sent by Atlassian JIRA
(v6.3.4#6332)

Mime
View raw message