<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Jozef Chúťka&#039;s blog &#187; binding</title>
	<atom:link href="http://blog.yoz.sk/tag/binding/feed/" rel="self" type="application/rss+xml" />
	<link>http://blog.yoz.sk</link>
	<description>My life, my work</description>
	<lastBuildDate>Tue, 31 Jan 2012 12:40:53 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>Binding in flex 3 magic in curly brackets</title>
		<link>http://blog.yoz.sk/2009/11/binding-in-flex-3-magic-in-curly-brackets/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=binding-in-flex-3-magic-in-curly-brackets</link>
		<comments>http://blog.yoz.sk/2009/11/binding-in-flex-3-magic-in-curly-brackets/#comments</comments>
		<pubDate>Wed, 18 Nov 2009 16:50:55 +0000</pubDate>
		<dc:creator>Jozef Chúťka</dc:creator>
				<category><![CDATA[ActionScript]]></category>
		<category><![CDATA[Best Practices]]></category>
		<category><![CDATA[Flash / Flex]]></category>
		<category><![CDATA[Array]]></category>
		<category><![CDATA[ArrayCollection]]></category>
		<category><![CDATA[Bindable]]></category>
		<category><![CDATA[binding]]></category>
		<category><![CDATA[BindingUtils]]></category>
		<category><![CDATA[bindProperty]]></category>
		<category><![CDATA[ChangeWatcher]]></category>
		<category><![CDATA[mxml]]></category>
		<category><![CDATA[object]]></category>
		<category><![CDATA[unbind]]></category>

		<guid isPermaLink="false">http://blog.yoz.sk/?p=667</guid>
		<description><![CDATA[A lot of things have been said about binding (read basics). But to really understad what is going on behind the scenes lets do some experiments&#8230; First to mention is, the curly brackets magic does not work as BindingUtils does. BindingUtils lets you bind only one setter, but curly brackets lets you bind whole logic. [...]]]></description>
			<content:encoded><![CDATA[<p>A lot of things have been said about binding (<a href="http://www.adobe.com/devnet/flex/quickstart/using_data_binding/">read basics</a>). But to really understad what is going on behind the scenes lets do some experiments&#8230; First to mention is, the curly brackets magic does not work as BindingUtils does. BindingUtils lets you bind only one setter, but curly brackets lets you bind whole logic.</p>
<ul>
<li><strong>test1</strong> &#8211; notice constant C1 in (binding constants is valid, and is working without Binding meta tag) and some plus inside expression <em>&#8220;Working: {C1 + &#8216; &#8216; + v2}&#8221;</em></li>
<li><strong>test2</strong> &#8211; you can use more curly brackets expressions within one attribute <em>&#8220;Working: {C1} {v2.toUpperCase()}&#8221;</em></li>
<li><strong>test3</strong> &#8211; even if you expect function result from your bindable variable it will work <em>&#8220;Working: {C1} {uberFunc(v2)}&#8221;</em></li>
<li><strong>test4</strong> &#8211; notice some math functions here <em>&#8220;Working: {v3 + v3}, {Math.pow(v3, 2)}&#8221;</em></li>
<li><strong>test5</strong> &#8211; simple Object and Array is not working (nor ArrayCollection using brackets) <em>&#8220;Not working: {v4.v}, {v5[0]}, {v6[0]}&#8221;</em></li>
<li><strong>test6</strong> &#8211; getItemAt() on ArrayCollection  works just smooth <em>&#8220;Working: {v6.getItemAt(0)}&#8221;</em></li>
<li><strong>test7</strong> &#8211; once you use curly brackets you can not remove binding, but binding can be unbinded when binded by BindingUtils. (both getter and setter in bindProperty must be public!)</li>
<li><strong>test8</strong> &#8211; binding works when correct event is dispatched <em>&#8220;{foo.gimmeSometing()}&#8221;</em></li>
<li><strong>test9</strong> &#8211; binding with ternary operator is super powerful <em>&#8220;{v2 == &#8216;world&#8217; ? &#8216;is world&#8217; : &#8216;not world&#8217;}&#8221;</em></li>
</ul>
<p><span id="more-667"></span></p>
<p>Take a look at the test application:</p>
<pre class="brush: xml; title: ; notranslate">&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;
&lt;mx:Application xmlns:mx=&quot;http://www.adobe.com/2006/mxml&quot; layout=&quot;vertical&quot;
    applicationComplete=&quot;init()&quot;&gt;
&lt;mx:Script&gt;
&lt;![CDATA[
    import mx.binding.utils.ChangeWatcher;
    import mx.binding.utils.BindingUtils;
    import mx.collections.ArrayCollection;

    private static const C1:String = &quot;Hallo&quot;;

    [Bindable]
    private var v1:String = &quot;hallo&quot;;

    [Bindable]
    public var v2:String = &quot;world&quot;;

    [Bindable]
    private var v3:Number = 1;

    [Bindable]
    private var v4:Object = {v:1};

    [Bindable]
    private var v5:Array = [1];

    [Bindable]
    private var v6:ArrayCollection = new ArrayCollection([1]);

    [Bindable]
    private var foo:Foo = new Foo();

    private var changeWatcher:ChangeWatcher;

    private function uberFunc(value:String):String
    {
        return &quot;(&quot; + value + &quot;)&quot;;
    }

    private function clickHandler():void
    {
        v2 = v2 == &quot;world&quot; ? &quot;dolly&quot; : &quot;world&quot;;
        v3 *= 2;
        v4.v += 1;
        v5[0] += 1;
        v6[0] += 1;
        foo.somevar = v2;
    }

    private function init():void
    {
        // easy to remember parameters test7.text = this.v2 (notice order)
        changeWatcher = BindingUtils.bindProperty(test7, &quot;text&quot;, this, &quot;v2&quot;);
    }

    private function unbindHandler():void
    {
        if(changeWatcher)
        {
            changeWatcher.unwatch();
            changeWatcher = null;
        }
        test6.text = &quot;removed? (not really, try click change)&quot;;
        test7.text = &quot;removed&quot;;
    }
]]&gt;
&lt;/mx:Script&gt;
&lt;mx:Text id=&quot;test1&quot; text=&quot;Working: {C1 + ' ' + v2}&quot; /&gt;
&lt;mx:Text id=&quot;test2&quot; text=&quot;Working: {C1} {v2.toUpperCase()}&quot; /&gt;
&lt;mx:Text id=&quot;test3&quot; text=&quot;Working: {C1} {uberFunc(v2)}&quot; /&gt;
&lt;mx:Text id=&quot;test4&quot; text=&quot;Working: {v3 + v3}, {Math.pow(v3, 2)}&quot; /&gt;
&lt;mx:Text id=&quot;test5&quot; text=&quot;Not working: {v4.v}, {v5[0]}, {v6[0]}&quot; /&gt;
&lt;mx:Text id=&quot;test6&quot; text=&quot;Working: {v6.getItemAt(0)}&quot; /&gt;
&lt;mx:Text id=&quot;test7&quot; text=&quot;Removable: &quot;/&gt;
&lt;mx:Text id=&quot;test8&quot; text=&quot;{foo.gimmeSometing()}&quot;/&gt;
&lt;mx:Text id=&quot;test9&quot; text=&quot;{v2 == 'world' ? 'is world' : 'not world'}&quot;/&gt;
&lt;mx:Button label=&quot;change&quot; click=&quot;clickHandler()&quot; /&gt;
&lt;mx:Button label=&quot;unbind&quot; click=&quot;unbindHandler()&quot; /&gt;
&lt;/mx:Application&gt;</pre>
<p>Click change to see how values really changes. Click unbind button to see how unbinding on test7 works and on test6 not (click on change button again after unbind).</p>
<p>Foo.as class</p>
<pre class="brush: as3; title: ; notranslate">package
{
    import flash.events.Event;
    import flash.events.EventDispatcher;
    import flash.events.IEventDispatcher;

    public class Foo extends EventDispatcher
    {
        private var _somevar:String = &quot;hello&quot;;

        public function Foo(target:IEventDispatcher=null)
        {
            super(target);
        }

        public function set somevar(value:String):void
        {
            _somevar = value;
            dispatchEvent(new Event(&quot;somevarChanged&quot;));
        }

        [Bindable(event=&quot;somevarChanged&quot;)]
        public function gimmeSometing():String
        {
            return _somevar;
        }
    }
}</pre>
]]></content:encoded>
			<wfw:commentRss>http://blog.yoz.sk/2009/11/binding-in-flex-3-magic-in-curly-brackets/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Quick tip: invalidating properties on bindables changed</title>
		<link>http://blog.yoz.sk/2009/10/quick-tip-invalidating-properties-on-bindables-changed/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=quick-tip-invalidating-properties-on-bindables-changed</link>
		<comments>http://blog.yoz.sk/2009/10/quick-tip-invalidating-properties-on-bindables-changed/#comments</comments>
		<pubDate>Tue, 27 Oct 2009 15:25:27 +0000</pubDate>
		<dc:creator>Jozef Chúťka</dc:creator>
				<category><![CDATA[ActionScript]]></category>
		<category><![CDATA[Best Practices]]></category>
		<category><![CDATA[Flash / Flex]]></category>
		<category><![CDATA[Bindable]]></category>
		<category><![CDATA[binding]]></category>
		<category><![CDATA[commitProperties]]></category>
		<category><![CDATA[event]]></category>
		<category><![CDATA[invalidateProperties]]></category>
		<category><![CDATA[PropertyChangeEvent]]></category>
		<category><![CDATA[PROPERTY_CHANGE]]></category>

		<guid isPermaLink="false">http://blog.yoz.sk/?p=512</guid>
		<description><![CDATA[By default, flex bindable properties fires event PropertyChangeEvent.PROPERTY_CHANGE. Sure, those events can be listened thus you can play with them. This can be useful when you have a lot of bindable properties in your classes and you do not want to make getter and setter for each just to be able to catch the moment [...]]]></description>
			<content:encoded><![CDATA[<p>By default, flex <a href="http://livedocs.adobe.com/flex/3/html/help.html?content=databinding_8.html">bindable</a> properties fires event PropertyChangeEvent.PROPERTY_CHANGE. Sure, those events can be listened thus you can play with them. This can be useful when you have a lot of bindable properties in your classes and you do not want to make getter and setter for each just to be able to catch the moment of update:</p>
<pre class="brush: xml; title: ; notranslate">&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;
&lt;mx:Application xmlns:mx=&quot;http://www.adobe.com/2006/mxml&quot; layout=&quot;horizontal&quot;
    creationComplete=&quot;creationCompleteHandler()&quot;&gt;
&lt;mx:Script&gt;
&lt;![CDATA[
    import mx.events.PropertyChangeEvent;

    [Bindable] private var bVar:uint = 0;
    [Bindable] private var btnLabel:String = &quot;&quot;;

    private function creationCompleteHandler():void
    {
        addEventListener(PropertyChangeEvent.PROPERTY_CHANGE, propertyChangedHandler);
    }

    private function propertyChangedHandler(event:PropertyChangeEvent):void
    {
        if(event.property == &quot;bVar&quot;)
            invalidateProperties();
    }

    override protected function commitProperties():void
    {
        super.commitProperties();
        btnLabel = bVar.toString();
    }
]]&gt;
&lt;/mx:Script&gt;
&lt;mx:Button click=&quot;bVar++&quot; label=&quot;{btnLabel}&quot;/&gt;
&lt;/mx:Application&gt;
</pre>
]]></content:encoded>
			<wfw:commentRss>http://blog.yoz.sk/2009/10/quick-tip-invalidating-properties-on-bindables-changed/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

