Style on custom component isn't being inherited by labels

classic Classic list List threaded Threaded
6 messages Options
Reply | Threaded
Open this post in threaded view
|

Style on custom component isn't being inherited by labels

kamcknig
I'm not very good with styles in flex but I'm attempting to add a style to a
component and have the labels as children inherit the style.
In my external style sheet I have the following.
@namespace s "library://ns.adobe.com/flex/spark";@namespace controlbars
"com.accesso.views.controlbars.*";controlbars|BottomControlBar{    color:
#424242;    font-family: openSansRegular;    fontSize: 10;}s|Label{
fontFamily: openSansRegular; fontSize: 14; textAlign: "left"; lineHeight:
"125%"; color: #212121;}
BottomControlBar inherits from Group and has a style defined in its Metadata
tag. Its content contains multiple labels (which are themselves children of
other component such as other Groups). Below is a simplified example of the
structure. The custom component itself has a custom skin class made up of
two Labels. In this example both the Group->HGroup->Label and the
Group->HGroup->custom:Component Labels do not have the styling that I've
declared in my CSS. They do however, have the styling that was applied as
the base Label style via the s|Label selector
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009"        
xmlns:s="library://ns.adobe.com/flex/spark">    <fx:Metadata>      
[Style(name="fontFamily", type="String", inherit="yes")]  
</fx:Metadata>    <s:Group>        <s:HGroup>          
<s:Label />            <custom:Component />      
</s:HGroup>    </s:Group></s:Group>
I have added an override in BottomControlBar and the getStyle method returns
the correct 'openSansRegular' fontFamily and 10 for fontSize so the style is
getting applied to BottomControlBar, it's just not being inherited by it's
children from what I can tell
override public function stylesInitialized():void{  
super.stylesInitialized();    trace("BottomControlBar", "stylesInitialized",
getStyle('fontFamily'));    trace("BottomControlBar", "stylesInitialized",
getStyle('fontSize'));}
I'm unsure how to debug this, could anyone help point me in the right
direction?Kyle



--
Sent from: http://apache-flex-users.2333346.n4.nabble.com/
Reply | Threaded
Open this post in threaded view
|

Re: Style on custom component isn't being inherited by labels

kamcknig
Wow. I wrote that as HTML and the preview was fine. Here is an image of what
I originally wrote hah! As further information: IF within my custom skin for
the custom component I bind fontFamily/fontSize to
hostComponent.getStyle('fontFamily/fontStyle')  the Labels do update there,
though I feel this should not be necessary.

However, the Labels that are children of the BottomControlBar still don't
have the style so my overall problem is still not solved

<http://apache-flex-users.2333346.n4.nabble.com/file/t871/2019-04-18_14_19_32-Apache_Flex_Users_-_Post_New_Message.png>



--
Sent from: http://apache-flex-users.2333346.n4.nabble.com/
Reply | Threaded
Open this post in threaded view
|

Re: Style on custom component isn't being inherited by labels

kamcknig
So after more research it appears that using getStyle within the skin is the
accepted way actually, according to  the old 4.6 using flex documentation
https://help.adobe.com/archive/en_US/flex/using/flex_4.6_help.pdf.

However, I still am not sure why my Labels within BottomControlBar are not
inheriting the styles from BottomControlBar. Is this because they are within
Groups?

Kyle



--
Sent from: http://apache-flex-users.2333346.n4.nabble.com/
Reply | Threaded
Open this post in threaded view
|

Re: Style on custom component isn't being inherited by labels

Alex Harui-2
In reply to this post by kamcknig
That was hard to read.  Maybe use pastebin and post a link.  I'm going to guess at an answer assuming I've read the code correctly.

I think in Flex, the type-selector will override inheriting behavior.  If you don't specify font-family in s|Label, then does it pick it up from the BottomControlBar?

I think you can set the styleName property of the Label to the instance of BottomControlBar and then the Label will pick up the styles from the bottom control bar.

-Alex

´╗┐On 4/18/19, 11:16 AM, "kamcknig" <[hidden email]> wrote:

    I'm not very good with styles in flex but I'm attempting to add a style to a
    component and have the labels as children inherit the style.
    In my external style sheet I have the following.
    @namespace s "library://ns.adobe.com/flex/spark";@namespace controlbars
    "com.accesso.views.controlbars.*";controlbars|BottomControlBar{    color:
    #424242;    font-family: openSansRegular;    fontSize: 10;}s|Label{
    fontFamily: openSansRegular; fontSize: 14; textAlign: "left"; lineHeight:
    "125%"; color: #212121;}
    BottomControlBar inherits from Group and has a style defined in its Metadata
    tag. Its content contains multiple labels (which are themselves children of
    other component such as other Groups). Below is a simplified example of the
    structure. The custom component itself has a custom skin class made up of
    two Labels. In this example both the Group->HGroup->Label and the
    Group->HGroup->custom:Component Labels do not have the styling that I've
    declared in my CSS. They do however, have the styling that was applied as
    the base Label style via the s|Label selector
    &lt;s:Group xmlns:fx="https://nam04.safelinks.protection.outlook.com/?url=http%3A%2F%2Fns.adobe.com%2Fmxml%2F2009&amp;data=02%7C01%7Caharui%40adobe.com%7C76f90750eb4f4e41fce408d6c42a01c7%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C1%7C636912082033905502&amp;sdata=Kl3RZKoip%2FKM3U1vCC%2BZg4A3bw678htsy4BLtVDEbr0%3D&amp;reserved=0"        
    xmlns:s="library://ns.adobe.com/flex/spark"&gt;    &lt;fx:Metadata&gt;      
    [Style(name="fontFamily", type="String", inherit="yes")]  
    &lt;/fx:Metadata&gt;    &lt;s:Group&gt;        &lt;s:HGroup&gt;          
    &lt;s:Label /&gt;            &lt;custom:Component /&gt;      
    &lt;/s:HGroup&gt;    &lt;/s:Group&gt;&lt;/s:Group&gt;
    I have added an override in BottomControlBar and the getStyle method returns
    the correct 'openSansRegular' fontFamily and 10 for fontSize so the style is
    getting applied to BottomControlBar, it's just not being inherited by it's
    children from what I can tell
    override public function stylesInitialized():void{  
    super.stylesInitialized();    trace("BottomControlBar", "stylesInitialized",
    getStyle('fontFamily'));    trace("BottomControlBar", "stylesInitialized",
    getStyle('fontSize'));}
    I'm unsure how to debug this, could anyone help point me in the right
    direction?Kyle
   
   
   
    --
    Sent from: https://nam04.safelinks.protection.outlook.com/?url=http%3A%2F%2Fapache-flex-users.2333346.n4.nabble.com%2F&amp;data=02%7C01%7Caharui%40adobe.com%7C76f90750eb4f4e41fce408d6c42a01c7%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C1%7C636912082033905502&amp;sdata=rlZ%2Fc%2FDG%2FM7jvtDr7ncEXDdi7l0use%2F1wrTm8kg4ZMI%3D&amp;reserved=0
   

Reply | Threaded
Open this post in threaded view
|

Re: Style on custom component isn't being inherited by labels

kamcknig
Ah good idea on pastebin *slaps forehead.

Here it is in pastebin,

https://pastebin.com/1y9yJvxu

So are you saying that the Label within BottomControlBar would be something
like:

<s:Label styleName={this} />

Thank you for taking the time,
Kyle



--
Sent from: http://apache-flex-users.2333346.n4.nabble.com/
Reply | Threaded
Open this post in threaded view
|

Re: Style on custom component isn't being inherited by labels

kamcknig
Setting styleName to "{this}" on Labels within the BottomControlBar did
indeed set the proper styles on the Label!

And you were also right it looks like about inheriting, if I remove the
selector for the spark Label in my css file and do /not/ use styleName on
the Labels, then the Labels do inherit from BottomControlBar

Thank you for your help,
Kyle



--
Sent from: http://apache-flex-users.2333346.n4.nabble.com/