Re: [FlexJS] Setting background colour at run time fails

[Justin Mclean]

Hi,

> The XXXDataBinding classes handle the {} data binding statements in MXML.
> They set up watchers and binding instances that react to change events,
> which are the key piece in data binding.
> 
> More verbose, but now the compiler won't let you mis-type fontWeight.
> SimpleCSSStyles only contains the most common styles I could think of.
> Folks can create their own versions for their own purposes.  However,
> these classes are, because of PAYG, simple bags of properties and do not
> dispatch change events.  BindableCSSStyles dispatches change events.

Thanks for that, that clears some of my confusion up.

It does seem rather heavy weight just to change a background colour but lets go 
with it.

One thing I noticed in the FlexJS store that seems a little odd:

    <js:beads>
        <js:ContainerDataBinding />
        <js:LayoutChangeNotifier watchedProperty="{borderStyles.borderColor}" 
initialValue="#FFFFFF" />
    </js:beads>
    <js:style>
        <js:BindableCSSStyles id="borderStyles" borderStyle="solid" 
borderWidth="1"
                               borderColor="#FFFFFF" backgroundColor="#FFFFFF"/>
    </js:style>

Why is the LayoutChangeNotifier needed here?

So I changed my approach to this:

<?xml version="1.0" encoding="utf-8"?>
<js:Application xmlns:fx="http://ns.adobe.com/mxml/2009";
               xmlns:js="library://ns.apache.org/flexjs/basic">

    <js:beads>
        <js:ContainerDataBinding />
    </js:beads>
    
   <fx:Script><![CDATA[
       public function clicked():void {
           bg.backgroundColor = "red";
       }
       ]]></fx:Script>

   <js:valuesImpl>
       <js:SimpleCSSValuesImpl/>
   </js:valuesImpl>

   <js:initialView>
       <js:View>
           <js:VContainer>
               <js:Container id="box" width="100" height="100">
                   <js:style>
                       <js:BindableCSSStyles id="bg" backgroundColor="grey" />
                   </js:style>
               </js:Container>
               
               <js:TextButton text="Click me" click="clicked()" />
           </js:VContainer>
       </js:View>
   </js:initialView>

</js:Application>


But it still fails to work. I can see the ValueChangeEvent being despatched but 
nothing seem to catch it.

The ContainerDataBinding is probably not needed in this case.

Thanks,
Justin