royale-dev mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From Carlos Rovira <carlosrov...@apache.org>
Subject Re: Experiment with UIBase change to classList
Date Tue, 13 Mar 2018 07:23:22 GMT
Hi Piotr,

I'll try it in a while, and sure it will need some adjustments, just
yesterday was too late. This is only a sneak peak of something that seems
more easy and convenient

2018-03-13 0:21 GMT+01:00 Piotr Zarzycki <piotrzarzycki21@gmail.com>:

> Carlos,
>
> I don't see in your examples things which I've asked you in the previous
> thread. Let me ask you once again. Please test with your code following
> example.
>
> 1) Create custom style.
>
> .myCustomStyle
> {
>    fontSize: 12px;
>    /// some style whatever
> }
>
> 2. Set in your example
>
>
> <j:TextButton text="PRIMARY" className="myCustomStyle" primary="true"/>
> Compile and check whether custom class is setup, along with typeNames and
> primary in output html. Let me know. Thanks, Piotr
>
>
>
> 2018-03-13 0:04 GMT+01:00 Carlos Rovira <carlosrovira@apache.org>:
>
> > 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
> > http://about.me/carlosrovira
> >
>
>
>
> --
>
> Piotr Zarzycki
>
> Patreon: *https://www.patreon.com/piotrzarzycki
> <https://www.patreon.com/piotrzarzycki>*
>
> --
> Carlos Rovira
> http://about.me/carlosrovira
>
>
>

Mime
  • Unnamed multipart/alternative (inline, None, 0 bytes)
View raw message