Responses inline:

> On Mar 13, 2018, at 2:20 PM, Carlos Rovira <carlosrov...@apache.org> wrote:
> 
> Hi Piotr,
> 
> that's one of the advantages of a collection, order doesn't matter! :)
> 
> <j:TextButton text="PRIMARY" className="myCustomStyle" primary="true"/>
> 
> output:
> 
> *<button type="button" class="jewel button textbutton myCustomStyle
> primary" style="margin: 10px 0px 0px; display: block;">PRIMARY</button>*
> 
> this is one of the reason to change, since you'll end trying to figure what
> comes in first or not.
> 
> Do you need more evidence?
> 
> Thanks
> 

I don’t think you understood what Piotr was saying.

The order of setting the *property* and *className* matters. He was not talking 
about the order of class names in a class list.


> I'm referring with this to "the theme feature" effort, where we want to
> easily change appearance in a Royale UI set.
> Right now we need to implement for each control 2 methods like the
> followings (code from MDL)
> 
> COMPILE::JS
> private function addOrRemove(classNameVal:String,add:Boolean):void
> {
> add ? _classList.add(classNameVal) : _classList.remove(classNameVal);
> }
> COMPILE::JS
> override protected function computeFinalClassNames():String
> {
> return _classList.compute() + super.computeFinalClassNames();
> }
> 
> and use
> 
> COMPILE::JS
> {
> addOrRemove("mdl-js-ripple-effect",value);
> setClassName(computeFinalClassNames());
> }
> 
> In my Jewel class I only do this (no additional methods or overrides)
> 
> COMPILE::JS
> {
> element.classList.toggle("primary", value);
> }
> 
> and that's all :)

Again, part of the strength of Royale is that we control the properties. 
Setting the DOM properties directly causes us to lose that.

You can probably optimize the code even more than it was already optimized:


COMPILE::JS
private function addOrRemove(classNameVal:String,add:Boolean):void
{
add ? _classList.add(classNameVal) : _classList.remove(classNameVal);
setClassName(computeFinalClassNames());
}
COMPILE::JS
override protected function computeFinalClassNames():String
{
return _classList.compute() + super.computeFinalClassNames();
}

and use

COMPILE::JS
{
addOrRemove("mdl-js-ripple-effect",value);
}

Which is pretty close to your:
COMPILE::JS
{
element.classList.toggle("primary", value);
}

If you use this a lot, you can probably factor out the boilerplate code from 
your classes.

Harbs

Reply via email to