Hi Carlos, classList was not used earlier because Arrays are cumbersome in MXML.
In MXML, folks can add more than one class using space delimited list of strings: <js:Label id="myLabel" className="BigFont SuperScript" label="some Big SuperScript" /> In AS, folks can delete classnames via: myLabel.className="SmallFont"; I don't believe your proposal takes these scenarios into account. Thanks, -Alex On 3/12/18, 4:04 PM, "[email protected] on behalf of Carlos Rovira" <[email protected] on behalf of [email protected]> wrote: >Hi, > >I made a branch from jewel branch to try UIBase for you to check >(feature/uibase-classlist). > >My thinking is that classList simplifies all a lot since is a managed list >with steroids that is made for you to use. >I suppose that when FlexJS was started this API was not known or known but >can't be used due to IE limittations. > >To make the experiment I copied UIBase to Jewel library *as is* and make >the changes. > >For me the change is as simple as this: > >private var _className:String; > >/** >* The classname. Often used for CSS >* class selector lookups. >* >* @langversion 3.0 >* @playerversion Flash 10.2 >* @playerversion AIR 2.6 >* @productversion Royale 0.0 >*/ >public function get className():String > { > return _className; > } > >/** >* @private >*/ >public function set className(value:String):void >{ >if (_className !== value) >{ >_className = value; > >COMPILE::JS >{ >setClassName(_className); >} >dispatchEvent(new Event("classNameChanged")); >} >} > >COMPILE::JS >protected function setClassName(value:String):void >{ >element.classList.add(value); >} > >this is a first iteration, maybe things can be do better, even simpler. >no more tricky complex things with typenames and classnames > > >you simply add to classlist, or if want to remove call directly >"element.classList.remove", or toggle, or contains. > >I have it working my example in that branch and code simplifies greatly. > >(only buttons, since the rest of controls are still without changes) > >this even made what Alex want with "typeNames" since, If I added a class >"Button", when I extend, it remains without do nothing > >to add "primary" or remove, I only need one line of code: > >element.classList.toggle("primary", value); > >So, what do you think? I know this can be a huge change in Royale, but is >something cumbersome in the actual state, or I had to fight with it in >MDL, >now Harbs, Piotr and all people going that is having trouble and wasting >time. > >Maybe it could be better to just make this change and make Royale more >easy >to change styles without not much hassle. > >All I see are benefits: > >* API is in the browser build-in, so I think it will be performant >* removes lots of inefficient code that is cumbersome >* makes API more easy >* removes the need to have typeNames and classNames since we have >persistent class just out-of-the-box >* we get all the api without the need to add it >(add/remove/contains/toggle) >* it's supported in all browsers we target >* is totaly PAYG > >Please, let me know what do you think. I'll read it tomorrow since I'm >closing for today > >Thanks > > >-- >Carlos Rovira >https://na01.safelinks.protection.outlook.com/?url=http%3A%2F%2Fabout.me%2 >Fcarlosrovira&data=02%7C01%7Caharui%40adobe.com%7C3c0a0cd0210e45ecbae208d5 >886dacbc%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636564926990512873&s >data=4sznARhAbaYEIF60rTmfSOsj9gSU1BZhYE18cUgIELU%3D&reserved=0
