royale-dev mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From Alex Harui <aha...@adobe.com.INVALID>
Subject Re: TypeNames vs ClassName
Date Wed, 28 Feb 2018 19:31:42 GMT
On 2/28/18, 10:44 AM, "Harbs" <harbs.lists@gmail.com> wrote:

>If it’s not public, I don’t see how a utility method could call it though.

I didn't think the utility methods like addClassName/removeClassName would
need to alter computeFinalClassNames().

AIUI, for most UIBase subclasses, the final element.className is a mix of
the className property and the typeNames.  The typenames are thought to be
"fixed" and the space-delimited list of names in className are the ones
the user wants to manipulate in their code.  So, I would expect them to
write:

  org.apache.royale.utils.addClassName(myComponent, "pinkStyles");


addClassName should just do something like:

  myComponent.className += value;

That will call the className setter that will run:

  element.className = computeFinalClassNames();

If you call

  org.apache.royale.utils.removeClassName(myComponent, "pinkStyles");

removeClassName should just do something like:

  Var s:String = myComponent.className;
  Var c:int = s.indexOf(nameToRemove + " ");
  If (c != -1)
     s = s.substr(0, c) + s.substr(c + nameToRemove.length + 1);
  Else
  {
     c= s.indexOf(" " + nameToRemove);
     if (c != -1)
       s = s.substr(0, c);  // remove last item
  }
  myComponent.className = s;



It seems like it should be that simple.  What am I missing?

-Alex


>
>> On Feb 28, 2018, at 8:21 PM, Alex Harui <aharui@adobe.com.INVALID>
>>wrote:
>> 
>> 
>> 
>> On 2/28/18, 9:50 AM, "Piotr Zarzycki" <piotrzarzycki21@gmail.com
>><mailto:piotrzarzycki21@gmail.com>> wrote:
>> 
>>> Ok Understand, but do you agree that  computeFinalClassNames - is
>>> something
>>> which is in the UIBase ?
>> 
>> Yes, and probably protected instead of public.  The one in UIBase just
>> appends typenames to className.  It gets overridden in MDL where needed
>> for shadow and other attributes.
>> 
>> My 2 cents,
>> -Alex
>>> 
>>> 2018-02-28 18:47 GMT+01:00 Alex Harui <aharui@adobe.com.invalid>:
>>> 
>>>> I think that in the shadow setter, it would change _shadow and call
>>>> setClassName(computeFinalClassNames());
>>>> 
>>>> On 2/28/18, 9:33 AM, "Piotr Zarzycki" <piotrzarzycki21@gmail.com>
>>>>wrote:
>>>> 
>>>>> Alex,
>>>>> 
>>>>> So we are getting back to the idea where you proposed to have
>>>>>function
>>>>> which computes everything.
>>>>> 
>>>>> override public function computeFinalClassNames():String
>>>>> {
>>>>> return super.computeFinalClassNames() + " " + _shadow;
>>>>> }
>>>>> 
>>>>> Where does that function should be placed ? Does that function should
>>>> be
>>>>> called in addedToParent plus whenever someone change _shadow ? -
>>>>> 
>>>>> Because I really don't know how to handle scenario where you have
>>>>>some
>>>>> property isActive = true/false and I need to add/remove class. - In
>>>>>the
>>>>> first launch I use  computeFinalClassNames, but how to handle
>>>>>changing
>>>> ?
>>>>> 
>>>>> Thanks, Piotr
>>>>> 
>>>>> 
>>>>> 2018-02-28 18:26 GMT+01:00 Alex Harui <aharui@adobe.com.invalid>:
>>>>> 
>>>>>> Hi Piotr,
>>>>>> 
>>>>>> I think am I not communicating the principles effectively.
>>>>>> 
>>>>>> First, IMO, addClassName and removeClassName should not be in
>>>>>>UIBase.
>>>>>> Lots of apps can be written without needing these methods.  I think
>>>> they
>>>>>> can be written as utility functions.
>>>>>> 
>>>>>> Second, the computation of the final element.className should
>>>> represent
>>>>>> the state of the component, so I don't get why you need an
>>>>>> _internalClassName or should ever set it to "".  The computation
for
>>>> a
>>>>>> component with a shadow would be to check the shadow property and
if
>>>> it
>>>>>> is
>>>>>> true, add a className for the shadow to the list.  Then I think you
>>>>>> wouldn't have the problem you showed in the animated GIF.  When the
>>>>>> classname property is set from the outside by MXMLDataInterpreter
or
>>>>>> even
>>>>>> user-written code, those classNames are added to the list with the
>>>>>> typeNames and the shadow className if shadow is true and then set
on
>>>> the
>>>>>> element.
>>>>>> 
>>>>>> Finally, for addClassName and removeClassName, and all other Royale
>>>>>> code,
>>>>>> we don't want to do much if any parameter checking.  That is also
>>>>>> just-in-case code.  The production code should not be passing in
>>>> null or
>>>>>> other bad values.  And once you fix that, then the checks that you
>>>> have
>>>>>> written do not add value.  I have proposed that there are debug-only
>>>>>> code
>>>>>> that does parameter checking.  There is a goog.DEBUG flag you can
>>>>>>use
>>>>>> for
>>>>>> that.
>>>>>> 
>>>>>> HTH,
>>>>>> -Alex
>>>>>> 
>>>>>> On 2/28/18, 12:40 AM, "Piotr Zarzycki" <piotrzarzycki21@gmail.com>
>>>>>> wrote:
>>>>>> 
>>>>>>> Hi Alex,
>>>>>>> 
>>>>>>> Sorry about that. Let me show you code and I recorded GIF with
>>>> problem
>>>>>>> debugging.
>>>>>>> 
>>>>>>> *Code in UIBase which I have implemented:*
>>>>>>> addClassName and removeClassName [1].
>>>>>>> addedToParent what is happen with internal field which I have
added
>>>> [2]
>>>>>>> 
>>>>>>> *Code for Testing* [3] - I'm adding first className, than shadow.
>>>>>>> 
>>>>>>> *GIF* [4] We are starting from the constructor. Pay attention
to
>>>>>>>the
>>>>>>> moment
>>>>>>> where className is being wiped out, later I have to use my internal
>>>>>>> variable to get it back.
>>>>>>> 
>>>>>>> Does that more clean now ?
>>>>>>> 
>>>>>>> [1]
>>>>>>> https://na01.safelinks.protection.outlook.com/?url=
>>>>>> https%3A%2F%2Fpaste.apa
>>>>>>> che.org%2FEumG&data=02%7C01%7Caharui%40adobe.com%
>>>>>> 7Cee5c84b4e3ff4ddb578008d
>>>>>>> 57e87046f%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%
>>>>>> 7C636554040718214998&
>>>>>>> sdata=cDT88OF63TdBMPxYY2vwMSIRxD%2FP3DvwHupj%2BQHsofw%3D&reserved=0
>>>>>>> [2]
>>>>>>> https://na01.safelinks.protection.outlook.com/?url=
>>>>>> https%3A%2F%2Fpaste.apa
>>>>>>> che.org%2FArmU&data=02%7C01%7Caharui%40adobe.com%
>>>>>> 7Cee5c84b4e3ff4ddb578008d
>>>>>>> 57e87046f%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%
>>>>>> 7C636554040718214998&
>>>>>>> sdata=m6whImrP70u7kzRxCbErlxCHWef8TKNejwm4Sr7bw7g%3D&reserved=0
>>>>>>> [3]
>>>>>>> https://na01.safelinks.protection.outlook.com/?url=
>>>>>> https%3A%2F%2Fpaste.apa
>>>>>>> che.org%2FKrxq&data=02%7C01%7Caharui%40adobe.com%
>>>>>> 7Cee5c84b4e3ff4ddb578008d
>>>>>>> 57e87046f%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%
>>>>>> 7C636554040718214998&
>>>>>>> sdata=tpeUYSQIXGXtES8hyr7zSeet528ZTczSltcNccqRGDo%3D&reserved=0
>>>>>>> [4]
>>>>>>> https://na01.safelinks.protection.outlook.com/?url=
>>>>>> https%3A%2F%2F1drv.ms%2
>>>>>>> Fu%2Fs!ApVpLyjpHDC2hPtoCi65kIZZPwjSpQ&data=02%7C01%7Caharui%40adobe
>>>> .com
>>>>>> %7C
>>>>>>> ee5c84b4e3ff4ddb578008d57e87046f%7Cfa7b1b5a7b34438794aed2c178de
>>>>>> cee1%7C0%7C
>>>>>>> 0%7C636554040718214998&sdata=eX%2FgZ0MA%2BdQJjcpYtMkk1pw3r0iVkdRa%
>>>>>> 2F6TWRTG
>>>>>>> 10OY%3D&reserved=0
>>>>>>> 
>>>>>>> Thanks,
>>>>>>> Piotr
>>>>>>> 
>>>>>>> 2018-02-27 23:31 GMT+01:00 Alex Harui <aharui@adobe.com.invalid>:
>>>>>>> 
>>>>>>>> Hi Piotr,
>>>>>>>> 
>>>>>>>> I could not understand this explanation. Might be better
to show
>>>>>> actual
>>>>>>>> code.  For example in #3, there is a cssClass variable that
I
>>>> don't
>>>>>> know
>>>>>>>> about.  Also you mention at the bottom setting something
as empty,
>>>>>> but
>>>>>>>> I'm
>>>>>>>> not sure what that is.
>>>>>>>> 
>>>>>>>> However, IMO, this code should be in utility functions, not
in
>>>>>> UIBase.
>>>>>>>> I
>>>>>>>> think plenty of useful applications can be built without
changing
>>>>>>>> classNames at runtime.
>>>>>>>> 
>>>>>>>> I'm off-line for the next several hours so we can pick this
up
>>>> again
>>>>>> in
>>>>>>>> your morning.
>>>>>>>> 
>>>>>>>> Thanks for working on it,
>>>>>>>> -Alex
>>>>>>>> 
>>>>>>>> On 2/27/18, 2:21 PM, "Piotr Zarzycki" <piotrzarzycki21@gmail.com>
>>>>>> wrote:
>>>>>>>> 
>>>>>>>>> Here is how I'm thinking to resolve that issue. I would
take
>>>> Harb's
>>>>>>>>> proposition and add to UIBase  addClassName() and
>>>> removeClassName().
>>>>>>>> Next
>>>>>>>>> I
>>>>>>>>> would add internal field _internalClassName:String.
>>>>>>>>> 
>>>>>>>>> addClassName(value):
>>>>>>>>> 1) Will check if provided class name exits in _className
and in
>>>>>>>>> _internalClassName.
>>>>>>>>> 2) Will add to _internalClassName += value
>>>>>>>>> 3) Assign to the element.className in the following way:
>>>>>>>> element.className
>>>>>>>>> = cssClass + " " + _className + " " + typeNames;
>>>>>>>>> 
>>>>>>>>> removeClassName(value)
>>>>>>>>> 1) Will check if provided classs name exists in  _className
or in
>>>>>>>>> _internalClassName
>>>>>>>>> 2) Make a replace to empty string if css class name exists.
>>>>>>>>> _className.replace(value, "");
>>>>>>>>> 3) Assign to the element.className: element.className
=
>>>> _className
>>>>>> + "
>>>>>>>> " +
>>>>>>>>> typeNames;
>>>>>>>>> 
>>>>>>>>> In added to parent we are computing _internalClassName
with
>>>>>> _className
>>>>>>>> and
>>>>>>>>> typeNames. Then it's being set as empty.
>>>>>>>>> 
>>>>>>>>> element.className =  _internalClassName  + " " + _className
+ "
>>>> " +
>>>>>>>>> typeNames;
>>>>>>>>> 
>>>>>>>>> I have implemented it and it seems to be working. Waiting
for
>>>> your
>>>>>>>>> thoughts
>>>>>>>>> on that solution. The last step where we are adding all
three
>>>>>> fields is
>>>>>>>>> the
>>>>>>>>> most important. Points 3 in addClassName and removeClassName
are
>>>>>>>>> necessary,
>>>>>>>>> because user may want to more dynamically manipulate
classes once
>>>>>>>>> component
>>>>>>>>> is created. Ex. "is-active" class is removed and added
on demand.
>>>>>>>>> 
>>>>>>>>> Thanks, Piotr
>>>>>>>>> 
>>>>>>>>> 
>>>>>>>>> 2018-02-27 13:38 GMT+01:00 Piotr Zarzycki
>>>>>> <piotrzarzycki21@gmail.com>:
>>>>>>>>> 
>>>>>>>>>> I think I have analyzed everything and have some
implementation
>>>>>>>>>> proposition. I will try to provide it later today.
>>>>>>>>>> 
>>>>>>>>>> Thanks, Piotr
>>>>>>>>>> 
>>>>>>>>>> 2018-02-27 13:35 GMT+01:00 Harbs <harbs.lists@gmail.com>:
>>>>>>>>>> 
>>>>>>>>>>> ExpandableSearch broke too.
>>>>>>>>>>> 
>>>>>>>>>>>> On Feb 25, 2018, at 6:15 PM, Piotr Zarzycki
>>>>>>>>>>> <piotrzarzycki21@gmail.com>
>>>>>>>>>>> wrote:
>>>>>>>>>>>> 
>>>>>>>>>>>> Harbs,
>>>>>>>>>>>> 
>>>>>>>>>>>> If you are using something more than MDL
Dialog in your
>>>>>>>> application
>>>>>>>>>>> it
>>>>>>>>>>>> would be great to get feedback whether I
didn't break for
>>>> you
>>>>>>>>>>> anything.
>>>>>>>>>>> :)
>>>>>>>>>>> 
>>>>>>>>>>> 
>>>>>>>>>> 
>>>>>>>>>> 
>>>>>>>>>> --
>>>>>>>>>> 
>>>>>>>>>> Piotr Zarzycki
>>>>>>>>>> 
>>>>>>>>>> Patreon:
>>>>>>>>>> *https://na01.safelinks.protection.outlook.com/?url=
>>>>>>>> https%3A%2F%2Fwww.pat
>>>>>>>>>> reon.com%2Fpiotrzarzycki&data=02%7C01%7Caharui%40adobe.com
>>>>>>>> %7C45a065853ba1
>>>>>>>>>> 4a295d9d08d57e3082b9%7Cfa7b1b5a7b34438794aed2c178de
>>>>>>>> cee1%7C0%7C0%7C6365536
>>>>>>>>>> 69427477536&sdata=tOlZF%2FWAGhqn1toqJCCqjc14NZU56MnZZK
>>>>>>>> 9liXcy%2BPg%3D&rese
>>>>>>>>>> rved=0
>>>>>>>>>> 
>>>>>>>>>> <https://na01.safelinks.protection.outlook.com/?url=
>>>>>>>> https%3A%2F%2Fwww.pat
>>>>>>>>>> reon.com%2Fpiotrzarzycki&data=02%7C01%7Caharui%40adobe.com
>>>>>>>> %7C45a065853ba1
>>>>>>>>>> 4a295d9d08d57e3082b9%7Cfa7b1b5a7b34438794aed2c178de
>>>>>>>> cee1%7C0%7C0%7C6365536
>>>>>>>>>> 69427477536&sdata=tOlZF%2FWAGhqn1toqJCCqjc14NZU56MnZZK
>>>>>>>> 9liXcy%2BPg%3D&rese
>>>>>>>>>> rved=0>*
>>>>>>>>>> 
>>>>>>>>> 
>>>>>>>>> 
>>>>>>>>> 
>>>>>>>>> --
>>>>>>>>> 
>>>>>>>>> Piotr Zarzycki
>>>>>>>>> 
>>>>>>>>> Patreon:
>>>>>>>>> *https://na01.safelinks.protection.outlook.com/?url=
>>>>>>>> https%3A%2F%2Fwww.patr
>>>>>>>>> eon.com%2Fpiotrzarzycki&data=02%7C01%7Caharui%40adobe.com%
>>>>>>>> 7C45a065853ba14a
>>>>>>>>> 295d9d08d57e3082b9%7Cfa7b1b5a7b34438794aed2c178de
>>>>>>>> cee1%7C0%7C0%7C6365536694
>>>>>>>>> 27477536&sdata=tOlZF%2FWAGhqn1toqJCCqjc14NZU56MnZZK
>>>>>>>> 9liXcy%2BPg%3D&reserved
>>>>>>>>> =0
>>>>>>>>> <https://na01.safelinks.protection.outlook.com/?url=
>>>>>>>> https%3A%2F%2Fwww.patr
>>>>>>>>> eon.com%2Fpiotrzarzycki&data=02%7C01%7Caharui%40adobe.com%
>>>>>>>> 7C45a065853ba14a
>>>>>>>>> 295d9d08d57e3082b9%7Cfa7b1b5a7b34438794aed2c178de
>>>>>>>> cee1%7C0%7C0%7C6365536694
>>>>>>>>> 27477536&sdata=tOlZF%2FWAGhqn1toqJCCqjc14NZU56MnZZK
>>>>>>>> 9liXcy%2BPg%3D&reserved
>>>>>>>>> =0>*
>>>>>>>> 
>>>>>>>> 
>>>>>>> 
>>>>>>> 
>>>>>>> --
>>>>>>> 
>>>>>>> Piotr Zarzycki
>>>>>>> 
>>>>>>> Patreon:
>>>>>>> *https://na01.safelinks.protection.outlook.com/?url=
>>>>>> https%3A%2F%2Fwww.patr
>>>>>>> eon.com%2Fpiotrzarzycki&data=02%7C01%7Caharui%40adobe.com%
>>>>>> 7Cee5c84b4e3ff4d
>>>>>>> db578008d57e87046f%7Cfa7b1b5a7b34438794aed2c178de
>>>>>> cee1%7C0%7C0%7C6365540407
>>>>>>> 18214998&sdata=VYtgB8rsurZAHpO%2FVs%2FqOkmxROz58p7VvQ%2B0EK8VPPc%
>>>>>> 3D&reserv
>>>>>>> ed=0
>>>>>>> <https://na01.safelinks.protection.outlook.com/?url=
>>>>>> https%3A%2F%2Fwww.patr
>>>>>>> eon.com%2Fpiotrzarzycki&data=02%7C01%7Caharui%40adobe.com%
>>>>>> 7Cee5c84b4e3ff4d
>>>>>>> db578008d57e87046f%7Cfa7b1b5a7b34438794aed2c178de
>>>>>> cee1%7C0%7C0%7C6365540407
>>>>>>> 18214998&sdata=VYtgB8rsurZAHpO%2FVs%2FqOkmxROz58p7VvQ%2B0EK8VPPc%
>>>>>> 3D&reserv
>>>>>>> ed=0>*
>>>>>> 
>>>>>> 
>>>>> 
>>>>> 
>>>>> --
>>>>> 
>>>>> Piotr Zarzycki
>>>>> 
>>>>> Patreon:
>>>>> *https://na01.safelinks.protection.outlook.com/?url=
>>>> https%3A%2F%2Fwww.patr
>>>>> eon.com%2Fpiotrzarzycki&data=02%7C01%7Caharui%40adobe.com%
>>>> 7Cda0fd75922c94d
>>>>> cb789208d57ed16c9f%7Cfa7b1b5a7b34438794aed2c178de
>>>> cee1%7C0%7C0%7C6365543602
>>>> 
>>>>> 
>>>>>95549968&sdata=rypScmQqTsmVcrUIZRNnaoZP5VMbI0oJqA6J42ZuhcA%3D&reserved
>>>>>=0
>>>>> <https://na01.safelinks.protection.outlook.com/?url=
>>>> https%3A%2F%2Fwww.patr
>>>>> eon.com%2Fpiotrzarzycki&data=02%7C01%7Caharui%40adobe.com%
>>>> 7Cda0fd75922c94d
>>>>> cb789208d57ed16c9f%7Cfa7b1b5a7b34438794aed2c178de
>>>> cee1%7C0%7C0%7C6365543602
>>>>> 95549968&sdata=rypScmQqTsmVcrUIZRNnaoZP5VMbI0
>>>> oJqA6J42ZuhcA%3D&reserved=0>*
>>>> 
>>>> 
>>> 
>>> 
>>> -- 
>>> 
>>> Piotr Zarzycki
>>> 
>>> Patreon: 
>>> 
>>>*https://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fwww.pa
>>>tr 
>>><https://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fwww.pa
>>>tr>
>>> eon.com 
>>><https://na01.safelinks.protection.outlook.com/?url=http%3A%2F%2Feon.com
>>>%2F&data=02%7C01%7Caharui%40adobe.com%7C75519f53f52b4fde36b108d57edb5903
>>>%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636554402926763835&sdata=G
>>>P3kiCe4imGL1d5mLcQcEGLxLCNgLGK2RheJkPCJgQY%3D&reserved=0>%2Fpiotrzarzyck
>>>i&data=02%7C01%7Caharui%40adobe.com
>>><https://na01.safelinks.protection.outlook.com/?url=http%3A%2F%2F40adobe
>>>.com%2F&data=02%7C01%7Caharui%40adobe.com%7C75519f53f52b4fde36b108d57edb
>>>5903%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636554402926763835&sda
>>>ta=r5UrAyOXUfffdyTWxankNj%2F5knjssVb9oxg4tY5sThY%3D&reserved=0>%7Cf25dbf
>>>20138f47
>>> 
>>>186d4808d57ed4a8fb%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C63655437
>>>41
>>> 
>>>87322476&sdata=bVfz%2BNfVCmLjO4LzijRozHXQoN1VfVRQSetW7oghI4s%3D&reserved
>>>=0
>>> 
>>><https://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fwww.pa
>>>tr 
>>><https://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fwww.pa
>>>tr>
>>> eon.com 
>>><https://na01.safelinks.protection.outlook.com/?url=http%3A%2F%2Feon.com
>>>%2F&data=02%7C01%7Caharui%40adobe.com%7C75519f53f52b4fde36b108d57edb5903
>>>%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636554402926763835&sdata=G
>>>P3kiCe4imGL1d5mLcQcEGLxLCNgLGK2RheJkPCJgQY%3D&reserved=0>%2Fpiotrzarzyck
>>>i&data=02%7C01%7Caharui%40adobe.com
>>><https://na01.safelinks.protection.outlook.com/?url=http%3A%2F%2F40adobe
>>>.com%2F&data=02%7C01%7Caharui%40adobe.com%7C75519f53f52b4fde36b108d57edb
>>>5903%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636554402926763835&sda
>>>ta=r5UrAyOXUfffdyTWxankNj%2F5knjssVb9oxg4tY5sThY%3D&reserved=0>%7Cf25dbf
>>>20138f47
>>> 
>>>186d4808d57ed4a8fb%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C63655437
>>>41
>>> 
>>>87322476&sdata=bVfz%2BNfVCmLjO4LzijRozHXQoN1VfVRQSetW7oghI4s%3D&reserved
>>>=0
>>>> *
>

Mime
View raw message