You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@flex.apache.org by Carlos Rovira <ca...@apache.org> on 2016/11/06 23:19:42 UTC
[FlexJS] How to manage className correctly
Hi,
className in flexjs translates to class.
There's as well typeNames.
If I write a component that uses some css class (in its definition), but I
want to add some new css rule in app instantiation...what's the recommended
way to manage this situation?
should I override the className UIBase method? (that's the way I'm thinking
right now to use so always reattach the basic css rules needed for the
compoenent) or maybe there's some other trick in flexjs arsenal.
--
Carlos Rovira
http://about.me/carlosrovira
Re: [FlexJS] How to manage className correctly
Posted by Carlos Rovira <ca...@codeoscopic.com>.
filled here: https://issues.apache.org/jira/browse/FLEX-35171
2016-11-10 23:54 GMT+01:00 Carlos Rovira <ca...@codeoscopic.com>:
> Hi Alex,
>
> #ffffff did not work either. I'll fill a bug for this
>
> 2016-11-10 22:25 GMT+01:00 Alex Harui <ah...@adobe.com>:
>
>> The compiler does not copy input CSS text directly to the output CSS file.
>> Instead, it tries to parse it into a data structure and generate the
>> final CSS file from that data structure. The CSS parsing code that we got
>> from Adobe only knew how to parse Flex-compatible CSS. I'm slowly
>> teaching it to parse more complex CSS which is probably why that
>> background rule is being dropped as well.
>>
>> I thought I'd already taught the CSS parser to handle #RGB (in Flex only
>> #RRGGBB is supported), but maybe it is broken somehow. Try using:
>>
>> color:#ffffff
>>
>>
>> If that works, file a bug to remind me to revisit #RGB format.
>>
>> Thanks,
>> -Alex
>>
>> On 11/10/16, 1:13 PM, "carlos.rovira@gmail.com on behalf of Carlos
>> Rovira"
>> <carlos.rovira@gmail.com on behalf of carlos.rovira@codeoscopic.com>
>> wrote:
>>
>> >Hi Alex,
>> >
>> >I refactored MDL class selectors taking account of this and now is
>> working
>> >ok, so now user can decorate with is own selectors.
>> >I only have one strange issue with a simple color style.
>> >
>> >I want to set a color:#fff
>> >If I put in a css class external selector, this is not applied (but rest
>> >of
>> >rules works ok).
>> >If I put in inline style, this is working ok.
>> >
>> >If you want to see the code is in MDLExample, App.mxml line 117:
>> >
>> ><mdl:CardTitle className="cardTitle" style="color: #fff;">. <-- I need
>> >to set the color here to get text inside this component white, if not it
>> >gets black
>> >
>> >The css style is mdl-styles.css
>> >
>> >.cardTitle
>> >{
>> >color: #fff; <--- this rule is not working
>> >height: 176px;
>> >}
>> >
>> >
>> >Some idea of what could be going here?
>> >
>> >Thanks
>> >
>> >
>> >
>> >2016-11-07 6:42 GMT+01:00 Alex Harui <ah...@adobe.com>:
>> >
>> >>
>> >>
>> >> On 11/6/16, 3:19 PM, "carlos.rovira@gmail.com on behalf of Carlos
>> >>Rovira"
>> >> <carlos.rovira@gmail.com on behalf of carlosrovira@apache.org> wrote:
>> >>
>> >> >Hi,
>> >> >
>> >> >className in flexjs translates to class.
>> >> >There's as well typeNames.
>> >> >
>> >> >If I write a component that uses some css class (in its definition),
>> >>but I
>> >> >want to add some new css rule in app instantiation...what's the
>> >> >recommended
>> >> >way to manage this situation?
>> >> >
>> >> >should I override the className UIBase method? (that's the way I'm
>> >> >thinking
>> >> >right now to use so always reattach the basic css rules needed for the
>> >> >compoenent) or maybe there's some other trick in flexjs arsenal.
>> >>
>> >> I think that's what typeNames is for. TypeNames should get appended to
>> >> any classNames specified by the developer.
>> >>
>> >> Or maybe I don't understand the scenario. We could also change they
>> way
>> >> things work now. My thinking was that typeNames contained the list of
>> >> class selectors that should act like type selectors. The type selector
>> >> set is not extensible, so typeNames effectively allows specification of
>> >> things that act like type selectors.
>> >>
>> >> HTH,
>> >> -Alex
>> >>
>> >>
>> >
>> >
>> >--
>> >
>> >Carlos Rovira
>> >Director General
>> >M: +34 607 22 60 05
>> >http://www.codeoscopic.com
>> >http://www.avant2.es
>> >
>> >
>> >Este mensaje se dirige exclusivamente a su destinatario y puede contener
>> >información privilegiada o confidencial. Si ha recibido este mensaje por
>> >error, le rogamos que nos lo comunique inmediatamente por esta misma vía
>> y
>> >proceda a su destrucción.
>> >
>> >De la vigente Ley Orgánica de Protección de Datos (15/1999), le
>> >comunicamos
>> >que sus datos forman parte de un fichero cuyo responsable es CODEOSCOPIC
>> >S.A. La finalidad de dicho tratamiento es facilitar la prestación del
>> >servicio o información solicitados, teniendo usted derecho de acceso,
>> >rectificación, cancelación y oposición de sus datos dirigiéndose a
>> >nuestras
>> >oficinas c/ Paseo de la Habana 9-11, 28036, Madrid con la documentación
>> >necesaria.
>>
>>
>
>
> --
>
> Carlos Rovira
> Director General
> M: +34 607 22 60 05
> http://www.codeoscopic.com
> http://www.avant2.es
>
>
> Este mensaje se dirige exclusivamente a su destinatario y puede contener
> información privilegiada o confidencial. Si ha recibido este mensaje por
> error, le rogamos que nos lo comunique inmediatamente por esta misma vía y
> proceda a su destrucción.
>
> De la vigente Ley Orgánica de Protección de Datos (15/1999), le
> comunicamos que sus datos forman parte de un fichero cuyo responsable es
> CODEOSCOPIC S.A. La finalidad de dicho tratamiento es facilitar la
> prestación del servicio o información solicitados, teniendo usted derecho
> de acceso, rectificación, cancelación y oposición de sus datos dirigiéndose
> a nuestras oficinas c/ Paseo de la Habana 9-11, 28036, Madrid con la
> documentación necesaria.
>
>
--
Carlos Rovira
Director General
M: +34 607 22 60 05
http://www.codeoscopic.com
http://www.avant2.es
Este mensaje se dirige exclusivamente a su destinatario y puede contener
información privilegiada o confidencial. Si ha recibido este mensaje por
error, le rogamos que nos lo comunique inmediatamente por esta misma vía y
proceda a su destrucción.
De la vigente Ley Orgánica de Protección de Datos (15/1999), le comunicamos
que sus datos forman parte de un fichero cuyo responsable es CODEOSCOPIC
S.A. La finalidad de dicho tratamiento es facilitar la prestación del
servicio o información solicitados, teniendo usted derecho de acceso,
rectificación, cancelación y oposición de sus datos dirigiéndose a nuestras
oficinas c/ Paseo de la Habana 9-11, 28036, Madrid con la documentación
necesaria.
Re: [FlexJS] How to manage className correctly
Posted by Carlos Rovira <ca...@codeoscopic.com>.
Hi Alex,
#ffffff did not work either. I'll fill a bug for this
2016-11-10 22:25 GMT+01:00 Alex Harui <ah...@adobe.com>:
> The compiler does not copy input CSS text directly to the output CSS file.
> Instead, it tries to parse it into a data structure and generate the
> final CSS file from that data structure. The CSS parsing code that we got
> from Adobe only knew how to parse Flex-compatible CSS. I'm slowly
> teaching it to parse more complex CSS which is probably why that
> background rule is being dropped as well.
>
> I thought I'd already taught the CSS parser to handle #RGB (in Flex only
> #RRGGBB is supported), but maybe it is broken somehow. Try using:
>
> color:#ffffff
>
>
> If that works, file a bug to remind me to revisit #RGB format.
>
> Thanks,
> -Alex
>
> On 11/10/16, 1:13 PM, "carlos.rovira@gmail.com on behalf of Carlos Rovira"
> <carlos.rovira@gmail.com on behalf of carlos.rovira@codeoscopic.com>
> wrote:
>
> >Hi Alex,
> >
> >I refactored MDL class selectors taking account of this and now is working
> >ok, so now user can decorate with is own selectors.
> >I only have one strange issue with a simple color style.
> >
> >I want to set a color:#fff
> >If I put in a css class external selector, this is not applied (but rest
> >of
> >rules works ok).
> >If I put in inline style, this is working ok.
> >
> >If you want to see the code is in MDLExample, App.mxml line 117:
> >
> ><mdl:CardTitle className="cardTitle" style="color: #fff;">. <-- I need
> >to set the color here to get text inside this component white, if not it
> >gets black
> >
> >The css style is mdl-styles.css
> >
> >.cardTitle
> >{
> >color: #fff; <--- this rule is not working
> >height: 176px;
> >}
> >
> >
> >Some idea of what could be going here?
> >
> >Thanks
> >
> >
> >
> >2016-11-07 6:42 GMT+01:00 Alex Harui <ah...@adobe.com>:
> >
> >>
> >>
> >> On 11/6/16, 3:19 PM, "carlos.rovira@gmail.com on behalf of Carlos
> >>Rovira"
> >> <carlos.rovira@gmail.com on behalf of carlosrovira@apache.org> wrote:
> >>
> >> >Hi,
> >> >
> >> >className in flexjs translates to class.
> >> >There's as well typeNames.
> >> >
> >> >If I write a component that uses some css class (in its definition),
> >>but I
> >> >want to add some new css rule in app instantiation...what's the
> >> >recommended
> >> >way to manage this situation?
> >> >
> >> >should I override the className UIBase method? (that's the way I'm
> >> >thinking
> >> >right now to use so always reattach the basic css rules needed for the
> >> >compoenent) or maybe there's some other trick in flexjs arsenal.
> >>
> >> I think that's what typeNames is for. TypeNames should get appended to
> >> any classNames specified by the developer.
> >>
> >> Or maybe I don't understand the scenario. We could also change they way
> >> things work now. My thinking was that typeNames contained the list of
> >> class selectors that should act like type selectors. The type selector
> >> set is not extensible, so typeNames effectively allows specification of
> >> things that act like type selectors.
> >>
> >> HTH,
> >> -Alex
> >>
> >>
> >
> >
> >--
> >
> >Carlos Rovira
> >Director General
> >M: +34 607 22 60 05
> >http://www.codeoscopic.com
> >http://www.avant2.es
> >
> >
> >Este mensaje se dirige exclusivamente a su destinatario y puede contener
> >información privilegiada o confidencial. Si ha recibido este mensaje por
> >error, le rogamos que nos lo comunique inmediatamente por esta misma vía y
> >proceda a su destrucción.
> >
> >De la vigente Ley Orgánica de Protección de Datos (15/1999), le
> >comunicamos
> >que sus datos forman parte de un fichero cuyo responsable es CODEOSCOPIC
> >S.A. La finalidad de dicho tratamiento es facilitar la prestación del
> >servicio o información solicitados, teniendo usted derecho de acceso,
> >rectificación, cancelación y oposición de sus datos dirigiéndose a
> >nuestras
> >oficinas c/ Paseo de la Habana 9-11, 28036, Madrid con la documentación
> >necesaria.
>
>
--
Carlos Rovira
Director General
M: +34 607 22 60 05
http://www.codeoscopic.com
http://www.avant2.es
Este mensaje se dirige exclusivamente a su destinatario y puede contener
información privilegiada o confidencial. Si ha recibido este mensaje por
error, le rogamos que nos lo comunique inmediatamente por esta misma vía y
proceda a su destrucción.
De la vigente Ley Orgánica de Protección de Datos (15/1999), le comunicamos
que sus datos forman parte de un fichero cuyo responsable es CODEOSCOPIC
S.A. La finalidad de dicho tratamiento es facilitar la prestación del
servicio o información solicitados, teniendo usted derecho de acceso,
rectificación, cancelación y oposición de sus datos dirigiéndose a nuestras
oficinas c/ Paseo de la Habana 9-11, 28036, Madrid con la documentación
necesaria.
Re: [FlexJS] How to manage className correctly
Posted by Alex Harui <ah...@adobe.com>.
The compiler does not copy input CSS text directly to the output CSS file.
Instead, it tries to parse it into a data structure and generate the
final CSS file from that data structure. The CSS parsing code that we got
from Adobe only knew how to parse Flex-compatible CSS. I'm slowly
teaching it to parse more complex CSS which is probably why that
background rule is being dropped as well.
I thought I'd already taught the CSS parser to handle #RGB (in Flex only
#RRGGBB is supported), but maybe it is broken somehow. Try using:
color:#ffffff
If that works, file a bug to remind me to revisit #RGB format.
Thanks,
-Alex
On 11/10/16, 1:13 PM, "carlos.rovira@gmail.com on behalf of Carlos Rovira"
<carlos.rovira@gmail.com on behalf of carlos.rovira@codeoscopic.com> wrote:
>Hi Alex,
>
>I refactored MDL class selectors taking account of this and now is working
>ok, so now user can decorate with is own selectors.
>I only have one strange issue with a simple color style.
>
>I want to set a color:#fff
>If I put in a css class external selector, this is not applied (but rest
>of
>rules works ok).
>If I put in inline style, this is working ok.
>
>If you want to see the code is in MDLExample, App.mxml line 117:
>
><mdl:CardTitle className="cardTitle" style="color: #fff;">. <-- I need
>to set the color here to get text inside this component white, if not it
>gets black
>
>The css style is mdl-styles.css
>
>.cardTitle
>{
>color: #fff; <--- this rule is not working
>height: 176px;
>}
>
>
>Some idea of what could be going here?
>
>Thanks
>
>
>
>2016-11-07 6:42 GMT+01:00 Alex Harui <ah...@adobe.com>:
>
>>
>>
>> On 11/6/16, 3:19 PM, "carlos.rovira@gmail.com on behalf of Carlos
>>Rovira"
>> <carlos.rovira@gmail.com on behalf of carlosrovira@apache.org> wrote:
>>
>> >Hi,
>> >
>> >className in flexjs translates to class.
>> >There's as well typeNames.
>> >
>> >If I write a component that uses some css class (in its definition),
>>but I
>> >want to add some new css rule in app instantiation...what's the
>> >recommended
>> >way to manage this situation?
>> >
>> >should I override the className UIBase method? (that's the way I'm
>> >thinking
>> >right now to use so always reattach the basic css rules needed for the
>> >compoenent) or maybe there's some other trick in flexjs arsenal.
>>
>> I think that's what typeNames is for. TypeNames should get appended to
>> any classNames specified by the developer.
>>
>> Or maybe I don't understand the scenario. We could also change they way
>> things work now. My thinking was that typeNames contained the list of
>> class selectors that should act like type selectors. The type selector
>> set is not extensible, so typeNames effectively allows specification of
>> things that act like type selectors.
>>
>> HTH,
>> -Alex
>>
>>
>
>
>--
>
>Carlos Rovira
>Director General
>M: +34 607 22 60 05
>http://www.codeoscopic.com
>http://www.avant2.es
>
>
>Este mensaje se dirige exclusivamente a su destinatario y puede contener
>información privilegiada o confidencial. Si ha recibido este mensaje por
>error, le rogamos que nos lo comunique inmediatamente por esta misma vía y
>proceda a su destrucción.
>
>De la vigente Ley Orgánica de Protección de Datos (15/1999), le
>comunicamos
>que sus datos forman parte de un fichero cuyo responsable es CODEOSCOPIC
>S.A. La finalidad de dicho tratamiento es facilitar la prestación del
>servicio o información solicitados, teniendo usted derecho de acceso,
>rectificación, cancelación y oposición de sus datos dirigiéndose a
>nuestras
>oficinas c/ Paseo de la Habana 9-11, 28036, Madrid con la documentación
>necesaria.
Re: [FlexJS] How to manage className correctly
Posted by Carlos Rovira <ca...@codeoscopic.com>.
Hi Alex,
I refactored MDL class selectors taking account of this and now is working
ok, so now user can decorate with is own selectors.
I only have one strange issue with a simple color style.
I want to set a color:#fff
If I put in a css class external selector, this is not applied (but rest of
rules works ok).
If I put in inline style, this is working ok.
If you want to see the code is in MDLExample, App.mxml line 117:
<mdl:CardTitle className="cardTitle" style="color: #fff;">. <-- I need
to set the color here to get text inside this component white, if not it
gets black
The css style is mdl-styles.css
.cardTitle
{
color: #fff; <--- this rule is not working
height: 176px;
}
Some idea of what could be going here?
Thanks
2016-11-07 6:42 GMT+01:00 Alex Harui <ah...@adobe.com>:
>
>
> On 11/6/16, 3:19 PM, "carlos.rovira@gmail.com on behalf of Carlos Rovira"
> <carlos.rovira@gmail.com on behalf of carlosrovira@apache.org> wrote:
>
> >Hi,
> >
> >className in flexjs translates to class.
> >There's as well typeNames.
> >
> >If I write a component that uses some css class (in its definition), but I
> >want to add some new css rule in app instantiation...what's the
> >recommended
> >way to manage this situation?
> >
> >should I override the className UIBase method? (that's the way I'm
> >thinking
> >right now to use so always reattach the basic css rules needed for the
> >compoenent) or maybe there's some other trick in flexjs arsenal.
>
> I think that's what typeNames is for. TypeNames should get appended to
> any classNames specified by the developer.
>
> Or maybe I don't understand the scenario. We could also change they way
> things work now. My thinking was that typeNames contained the list of
> class selectors that should act like type selectors. The type selector
> set is not extensible, so typeNames effectively allows specification of
> things that act like type selectors.
>
> HTH,
> -Alex
>
>
--
Carlos Rovira
Director General
M: +34 607 22 60 05
http://www.codeoscopic.com
http://www.avant2.es
Este mensaje se dirige exclusivamente a su destinatario y puede contener
información privilegiada o confidencial. Si ha recibido este mensaje por
error, le rogamos que nos lo comunique inmediatamente por esta misma vía y
proceda a su destrucción.
De la vigente Ley Orgánica de Protección de Datos (15/1999), le comunicamos
que sus datos forman parte de un fichero cuyo responsable es CODEOSCOPIC
S.A. La finalidad de dicho tratamiento es facilitar la prestación del
servicio o información solicitados, teniendo usted derecho de acceso,
rectificación, cancelación y oposición de sus datos dirigiéndose a nuestras
oficinas c/ Paseo de la Habana 9-11, 28036, Madrid con la documentación
necesaria.
Re: [FlexJS] How to manage className correctly
Posted by Alex Harui <ah...@adobe.com>.
On 11/6/16, 3:19 PM, "carlos.rovira@gmail.com on behalf of Carlos Rovira"
<carlos.rovira@gmail.com on behalf of carlosrovira@apache.org> wrote:
>Hi,
>
>className in flexjs translates to class.
>There's as well typeNames.
>
>If I write a component that uses some css class (in its definition), but I
>want to add some new css rule in app instantiation...what's the
>recommended
>way to manage this situation?
>
>should I override the className UIBase method? (that's the way I'm
>thinking
>right now to use so always reattach the basic css rules needed for the
>compoenent) or maybe there's some other trick in flexjs arsenal.
I think that's what typeNames is for. TypeNames should get appended to
any classNames specified by the developer.
Or maybe I don't understand the scenario. We could also change they way
things work now. My thinking was that typeNames contained the list of
class selectors that should act like type selectors. The type selector
set is not extensible, so typeNames effectively allows specification of
things that act like type selectors.
HTH,
-Alex