Hi,
I just pushed a new bead to the HTML project:
SolidBackgroundWithChangeListenerBead. It is designed to work with
BindableCSSStyles to make change to the background color.
Use it like this (SWF or JS):
<js:Container …>
<js:style>
<js:BindableCSSStyles id="boxStyle" backgroundColor="#0000DD" />
</js:style>
<js:beads>
<js:SolidBackgroundWithChangeListenerBead style="{boxStyle}" />
</js:beads>
</js:Container>
When you want to change the background color of this Container, you do:
boxStyle.backgroundColor = 0xCC0000;
or
boxStyle.backgroundColor = "#CC0000";
Either uint or String works. The SolidBackgroundWithChangeListenerBead
replaces the SolidBackgroundBead (for SWF) and listens for a change in the
style's (boxStyle) backgroundColor property. When it detects the change it
resets its background color.
Since this needs to work on the JS side as well, the new bead simply looks
at the new value and sets the element's style's backgroundColor to the new
value.
I will now update Express to change the express:Container components to
use this new bead as its background and try to make it much easier and
less verbose to use from the Express package.
—peter
On 2/14/17, 5:05 PM, "Peter Ent" <p...@adobe.com> wrote:
>Yes, writing a special bead for detecting changes to the styles and
>applying them does work. I have a SolidBackgroundWithChangeListenerBead
>that listens for the valueChange event and applies it. It needs some error
>handling and packaging into the HTML framework so I will do that tomorrow.
>I will also do beads for a couple of other things like border.
>
>Once that's done I'll compose something in Express that uses these so you
>would not have to spell everything out as much as you do when using the
>basic set.
>
>—peter
>
>On 2/14/17, 4:49 PM, "Alex Harui" <aha...@adobe.com> wrote:
>
>>Yes, there are bugs and missing pieces.
>>
>>BindableCSSStyles lets you use binding expressions to detect changes in
>>styles.
>>
>><js:LayoutChangeNotifier watchedProperty="{borderStyles.borderColor}"
>>initialValue="#FFFFFF" />
>><js:style>
>>
>> <js:BindableCSSStyles id="borderStyles" borderColor="#FFFFFF" />
>></js:style>
>>
>>BindableCSSStyles emits binding events when a value changes. Then you
>>have to trigger the right reaction to the event.
>>
>>In FlexJSStore, there is a LayoutChangeNotifier hooked up to re-layout if
>>borderColorChanges. But for backgroundColor, a layout doesn't refresh
>>the
>>backgroundColor. So we need another bead that can detect the changes and
>>do the right thing as discussed upthread. I think a call to applyStyles
>>is needed, especially on the JS side and on the SWF side the
>>BackgroundBead needs to be notified.
>>
>>-Alex
>>
>>On 2/14/17, 1:31 PM, "Peter Ent" <p...@adobe.com> wrote:
>>
>>>I had to figure it out as well and looked at FlexJSStore. You use
>>><js:style> to add this to a component, like a Container:
>>>
>>><js:style>
>>> <js:BindableCSSStyles id="borderStyles" borderStyle="solid"
>>>borderWidth="1"
>>> borderColor="#FFFFFF"
>>>backgroundColor="#FFFFFF"/>
>>></js:style>
>>>
>>>
>>>Then you use the id to change it: borderStyles.backgroundColor =
>>>"#CCCCCC";
>>>
>>>I can't get it to work, though.
>>>
>>>I'm not sure what the "Bindable" part is yet. Doing
>>>backgroundColor="{someColor}" doesn't do an initial set either. There
>>>must
>>>be a bug.
>>>
>>>‹peter
>>>
>>>On 2/14/17, 3:52 PM, "piotrz" <piotrzarzyck...@gmail.com> wrote:
>>>
>>>>I'm reading and reading this thread and still cannot understand how
>>>>actually
>>>>BindableCSSStyles should be used ? Can someone show me working example
>>>>?
>>>>
>>>>Another thing let say that I have this working example -
>>>>BindableCSSStyles
>>>>emits ValueChange event and how it is possible that UIBase is listening
>>>>those event ? styleChangeHandler is not used anywhere.
>>>>
>>>>Piotr
>>>>
>>>>
>>>>
>>>>-----
>>>>Apache Flex PMC
>>>>piotrzarzyck...@gmail.com
>>>>--
>>>>View this message in context:
>>>>http://apache-flex-development.2333347.n4.nabble.com/FlexJS-Setting-bac
>>>>k
>>>>g
>>>>r
>>>>ound-colour-at-run-time-fails-tp59273p59397.html
>>>>Sent from the Apache Flex Development mailing list archive at
>>>>Nabble.com.
>>>
>>
>
