On 2/28/18, 10:44 AM, "Harbs" <[email protected]> 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 <[email protected]>
>>wrote:
>>
>>
>>
>> On 2/28/18, 9:50 AM, "Piotr Zarzycki" <[email protected]
>><mailto:[email protected]>> 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 <[email protected]>:
>>>
>>>> I think that in the shadow setter, it would change _shadow and call
>>>> setClassName(computeFinalClassNames());
>>>>
>>>> On 2/28/18, 9:33 AM, "Piotr Zarzycki" <[email protected]>
>>>>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 <[email protected]>:
>>>>>
>>>>>> 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" <[email protected]>
>>>>>> 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 <[email protected]>:
>>>>>>>
>>>>>>>> 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" <[email protected]>
>>>>>> 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
>>>>>> <[email protected]>:
>>>>>>>>>
>>>>>>>>>> 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 <[email protected]>:
>>>>>>>>>>
>>>>>>>>>>> ExpandableSearch broke too.
>>>>>>>>>>>
>>>>>>>>>>>> On Feb 25, 2018, at 6:15 PM, Piotr Zarzycki
>>>>>>>>>>> <[email protected]>
>>>>>>>>>>> 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
>>>> *
>
