On 2/13/17, 1:49 PM, "Justin Mclean" <jus...@classsoftware.com> wrote:
>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.
That's on purpose. PAYG is going to be more verbose because things are
loosely coupled and there are "static" versions that don't dispatch events
and heavier ones for dynamic apps. What would be fun is if we could erase
your memory in a few months and have you start over again using the
Express package. We want to make the Express package have enough
functionality baked in that most or all of these "gotchas" you are hitting
that aren't just bugs are built-in to Express.
Peter is going to try to look over these things you are hitting and put
more of them in Express, but I think he could use help from others.
>
>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?
Because BindableCSSStyles just generates change events. The component
itself is not looking for changes.
>
>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.
Yep. I think because of PAYG, nobody is watching for the event, so you
have to add code to wire the event to some code that will re-draw the
background. And whatever pattern of code that is could go in a new bead
similar to LayoutChangeNotifier and be baked into the Express package.
HTH,
-Alex
