You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@flex.apache.org by kamcknig <ka...@gmail.com> on 2019/04/18 18:16:31 UTC
Style on custom component isn't being inherited by labels
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/
Re: Style on custom component isn't being inherited by labels
Posted by kamcknig <ka...@gmail.com>.
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/
Re: Style on custom component isn't being inherited by labels
Posted by kamcknig <ka...@gmail.com>.
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/
Re: Style on custom component isn't being inherited by labels
Posted by Alex Harui <ah...@adobe.com.INVALID>.
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" <ka...@gmail.com> 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
<s:Group xmlns:fx="https://nam04.safelinks.protection.outlook.com/?url=http%3A%2F%2Fns.adobe.com%2Fmxml%2F2009&data=02%7C01%7Caharui%40adobe.com%7C76f90750eb4f4e41fce408d6c42a01c7%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C1%7C636912082033905502&sdata=Kl3RZKoip%2FKM3U1vCC%2BZg4A3bw678htsy4BLtVDEbr0%3D&reserved=0"
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: https://nam04.safelinks.protection.outlook.com/?url=http%3A%2F%2Fapache-flex-users.2333346.n4.nabble.com%2F&data=02%7C01%7Caharui%40adobe.com%7C76f90750eb4f4e41fce408d6c42a01c7%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C1%7C636912082033905502&sdata=rlZ%2Fc%2FDG%2FM7jvtDr7ncEXDdi7l0use%2F1wrTm8kg4ZMI%3D&reserved=0
Re: Style on custom component isn't being inherited by labels
Posted by kamcknig <ka...@gmail.com>.
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/
Re: Style on custom component isn't being inherited by labels
Posted by kamcknig <ka...@gmail.com>.
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/