You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@flex.apache.org by After24 <vi...@after24.net> on 2014/03/14 17:29:43 UTC
Skinning issue
Hello,
I have an issue with a component I'm working on which extends TitleWindow :
If I call setStyle("skinClass", TheNewSkinClass) on this component after its
initialization, the contentGroup of the new skin is empty.
Is it a normal behavior ?
Thank you.
--
View this message in context: http://apache-flex-users.2333346.n4.nabble.com/Skinning-issue-tp5522.html
Sent from the Apache Flex Users mailing list archive at Nabble.com.
Re: Skinning issue
Posted by After24 <vi...@after24.net>.
My bad,
The problem was due to a design flaw in the custom component.
Thank you Mark and Om.
--
View this message in context: http://apache-flex-users.2333346.n4.nabble.com/Skinning-issue-tp5522p5559.html
Sent from the Apache Flex Users mailing list archive at Nabble.com.
Re: Skinning issue
Posted by After24 <vi...@after24.net>.
Ok,
Will check.
Thank you Om.
--
View this message in context: http://apache-flex-users.2333346.n4.nabble.com/Skinning-issue-tp5522p5545.html
Sent from the Apache Flex Users mailing list archive at Nabble.com.
Re: Skinning issue
Posted by OmPrakash Muppirala <bi...@gmail.com>.
I dint realize that you are changing skins. The existing contentGroup's
mxmlContent should be carried over to the new skin. This works fine for me:
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955"
minHeight="600">
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
protected function
titleWindow1_initializeHandler(event:FlexEvent):void
{
titleWindow1.setStyle("skinClass",NewTitleWindowSkin);
}
]]>
</fx:Script>
<s:TitleWindow id="titleWindow1" width="500" height="500"
initialize="titleWindow1_initializeHandler(event)">
<s:Button label="Hello" />
</s:TitleWindow>
</s:Application>
You mentioned you are extending TitleWindow. Perhaps you are missing some
"super" calls somewhere?
Thanks,
Om
On Fri, Mar 14, 2014 at 4:41 PM, After24 <vi...@after24.net> wrote:
> Hi OmPrakash,
>
>
> So this is a normal behavior for a component that inherits from
> SkinnableContainer ?
>
> When a new skin is applied to that type of component the childrens of the
> old skin contentGroup are not automatically added to the one from the new
> skin ?
>
> Thank you.
>
>
>
> --
> View this message in context:
> http://apache-flex-users.2333346.n4.nabble.com/Skinning-issue-tp5522p5543.html
> Sent from the Apache Flex Users mailing list archive at Nabble.com.
>
Re: Skinning issue
Posted by After24 <vi...@after24.net>.
Hi OmPrakash,
So this is a normal behavior for a component that inherits from
SkinnableContainer ?
When a new skin is applied to that type of component the childrens of the
old skin contentGroup are not automatically added to the one from the new
skin ?
Thank you.
--
View this message in context: http://apache-flex-users.2333346.n4.nabble.com/Skinning-issue-tp5522p5543.html
Sent from the Apache Flex Users mailing list archive at Nabble.com.
Re: Skinning issue
Posted by OmPrakash Muppirala <bi...@gmail.com>.
The contentGroup of the skin is empty :-) Anything you add as the child of
the TitleWindow, will get added to this contentGroup.
Hope that helps.
Thanks,
Om
2014-03-14 16:13 GMT-07:00 After24 <vi...@after24.net>:
> Sure,
>
>
>
>
>
> <?xml version="1.0" encoding="utf-8"?>
>
> <s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009"
> xmlns:s="library://ns.adobe.com/flex/spark"
> xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
> xmlns:components="fr.after24.tests.components.*"
> blendMode="normal" mouseEnabled="false"
> minWidth="150" minHeight="100"
> alpha.disabled="0.5"
> alpha.disabledWithControlBar="0.5"
> rollOut="hideControls()"
> xmlns:mx="library://ns.adobe.com/flex/mx">
>
> <fx:Metadata>
>
> </fx:Metadata>
>
>
> <fx:Declarations>
> <s:Fade id="fade" targets="{controls}" duration="250" />
> <mx:Resize id="resize" targets="{this}" duration="250" />
> </fx:Declarations>
>
>
> <fx:Script fb:purpose="styling">
>
> </fx:Script>
>
>
> <s:states>
>
> <s:State name="inactive" stateGroups="inactiveGroup" />
> <s:State name="disabled" />
>
> <s:State name="normal" />
> <s:State name="updating" />
> <s:State name="updatingAndMaximized" />
> <s:State name="normalAndMaximized" />
>
>
> <s:State name="normalWithControlBar"
> stateGroups="withControls" />
> <s:State name="inactiveWithControlBar"
> stateGroups="withControls,
> inactiveGroup" />
> <s:State name="disabledWithControlBar"
> stateGroups="withControls" />
>
> </s:states>
>
>
>
> <s:Group left="0" right="0" top="0" bottom="0">
>
> <s:Rect id="background" left="0" top="0" right="0"
> bottom="0">
> <s:fill>
> <s:SolidColor id="backgroundFill"
> alpha="0"/>
> </s:fill>
> </s:Rect>
>
>
>
>
> <s:Group id="contents" left="0" right="0" top="0"
> bottom="0">
>
> <s:layout>
> <s:VerticalLayout gap="0"
> horizontalAlign="justify" />
> </s:layout>
>
>
>
>
> <s:Group id="topGroup">
>
> <s:Group id="controlsRollOverGroup"
> left="0" right="0" height="35"
> mouseEnabledWhereTransparent="false"
>
> rollOver="{showControls()}" >
>
> <s:Rect left="{width +
> titleDisplay.width >> 1}" top="0" right="0"
> bottom="0">
> <s:fill>
> <s:SolidColor
> color="#FF0000" alpha="0.0"/>
> </s:fill>
> </s:Rect>
>
> <s:Rect left="0" top="0" bottom="0"
> width="{width +
> (hostComponent.editable ? - titleDisplay.width : +
> titleDisplay.width) >> 1}" >
>
> <s:fill>
> <s:SolidColor
> color="#FF0000" alpha="0.0"/>
> </s:fill>
> </s:Rect>
>
> </s:Group>
>
>
>
> <s:Label id="titleDisplay"
> maxDisplayedLines="1" mouseEnabled="true"
> minHeight="25" top="5"
> horizontalCenter="0"
> verticalAlign="middle"
> fontWeight="bold" fontSize="15" />
>
> <s:RichEditableText id="titleEditor"
> fontWeight="bold" fontSize="15"
>
> horizontalCenter="0" top="9"
>
> minHeight="25" verticalAlign="middle"
>
> focusSkin="{NoFocusSkin}" lineBreak="explicit"/>
> </s:Group>
>
> <s:Group id="contentGroup" width="100%"
> height="100%" minWidth="0"
> minHeight="0" />
>
> </s:Group>
>
> </s:Group>
>
>
>
>
> <s:PopUpAnchor id="popUp" popUpPosition="topLeft"
> popUpWidthMatchesAnchorWidth="false" >
>
> <s:Group id="controls" width="100%"
> height="{topGroup.height - 2.5}"
> alpha="0"
> mouseEnabledWhereTransparent="false"
> rollOut="{hideControls()}"
> rollOver="checkRollOverTimeout(event)" >
>
> <s:Rect left="{width + titleDisplay.width >> 1}"
> right="0"
>
> height="{controlsRollOverGroup.height}" minWidth="{width -
> titleDisplay.width >> 1}"
> >
> <s:fill>
> <s:SolidColor color="#0000FF"
> alpha="0.0" />
> </s:fill>
>
> </s:Rect>
>
> <s:Rect width="{width + (hostComponent.editable ?
> - titleDisplay.width :
> + titleDisplay.width) >> 1}"
>
> height="{controlsRollOverGroup.height}" >
>
> <s:fill>
> <s:SolidColor color="#0000FF"
> alpha="0.0" />
> </s:fill>
> </s:Rect>
>
> <s:HGroup id="controlsGroup"
> verticalAlign="middle" verticalCenter="0"
> left="{width +
> titleDisplay.width >> 1}" paddingLeft="7">
>
> <s:Group id="dragArea" buttonMode="true"
> useHandCursor="true"
> mouseEnabled="true" width="10" height="10">
> <s:BitmapImage
> source="@Embed(source='fr/after24/tests/assets/moveArea.png')" />
> </s:Group>
>
> <components:BitmapButton id="updateButton"
> buttonMode="true"
> useHandCursor="true"
>
> imageSource="@Embed(source='fr/after24/tests/assets/updateButton.png')"
>
> enabled="{!hostComponent.isUpdating}" />
>
> <components:BitmapButton
> id="maximizeButton" buttonMode="true"
> useHandCursor="true"
>
> excludeFrom="normalAndMaximized,updatingAndMaximized"
>
> imageSource="@Embed(source='fr/after24/tests/assets/maximizeButton.png')"
> />
>
> <components:BitmapButton
> id="minimizeButton" buttonMode="true"
> useHandCursor="true"
>
> includeIn="normalAndMaximized, updatingAndMaximized"
>
> imageSource="@Embed(source='fr/after24/tests/assets/minimizeButton.png')"
> />
>
> <components:BitmapButton id="closeButton"
> buttonMode="true"
> useHandCursor="true"
>
> imageSource="@Embed(source='fr/after24/tests/assets/closeButton.png')" />
>
> </s:HGroup>
>
> </s:Group>
>
> </s:PopUpAnchor>
>
> </s:SparkSkin>
>
>
>
>
> --
> View this message in context:
> http://apache-flex-users.2333346.n4.nabble.com/Skinning-issue-tp5522p5540.html
> Sent from the Apache Flex Users mailing list archive at Nabble.com.
>
Re: Skinning issue
Posted by After24 <vi...@after24.net>.
Sure,
<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
xmlns:components="fr.after24.tests.components.*"
blendMode="normal" mouseEnabled="false"
minWidth="150" minHeight="100" alpha.disabled="0.5"
alpha.disabledWithControlBar="0.5" rollOut="hideControls()"
xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Metadata>
</fx:Metadata>
<fx:Declarations>
<s:Fade id="fade" targets="{controls}" duration="250" />
<mx:Resize id="resize" targets="{this}" duration="250" />
</fx:Declarations>
<fx:Script fb:purpose="styling">
</fx:Script>
<s:states>
<s:State name="inactive" stateGroups="inactiveGroup" />
<s:State name="disabled" />
<s:State name="normal" />
<s:State name="updating" />
<s:State name="updatingAndMaximized" />
<s:State name="normalAndMaximized" />
<s:State name="normalWithControlBar" stateGroups="withControls" />
<s:State name="inactiveWithControlBar" stateGroups="withControls,
inactiveGroup" />
<s:State name="disabledWithControlBar" stateGroups="withControls" />
</s:states>
<s:Group left="0" right="0" top="0" bottom="0">
<s:Rect id="background" left="0" top="0" right="0" bottom="0">
<s:fill>
<s:SolidColor id="backgroundFill" alpha="0"/>
</s:fill>
</s:Rect>
<s:Group id="contents" left="0" right="0" top="0" bottom="0">
<s:layout>
<s:VerticalLayout gap="0" horizontalAlign="justify" />
</s:layout>
<s:Group id="topGroup">
<s:Group id="controlsRollOverGroup" left="0" right="0" height="35"
mouseEnabledWhereTransparent="false"
rollOver="{showControls()}" >
<s:Rect left="{width + titleDisplay.width >> 1}" top="0" right="0"
bottom="0">
<s:fill>
<s:SolidColor color="#FF0000" alpha="0.0"/>
</s:fill>
</s:Rect>
<s:Rect left="0" top="0" bottom="0"
width="{width + (hostComponent.editable ? - titleDisplay.width : +
titleDisplay.width) >> 1}" >
<s:fill>
<s:SolidColor color="#FF0000" alpha="0.0"/>
</s:fill>
</s:Rect>
</s:Group>
<s:Label id="titleDisplay" maxDisplayedLines="1" mouseEnabled="true"
minHeight="25" top="5" horizontalCenter="0"
verticalAlign="middle" fontWeight="bold" fontSize="15" />
<s:RichEditableText id="titleEditor" fontWeight="bold" fontSize="15"
horizontalCenter="0" top="9"
minHeight="25" verticalAlign="middle"
focusSkin="{NoFocusSkin}" lineBreak="explicit"/>
</s:Group>
<s:Group id="contentGroup" width="100%" height="100%" minWidth="0"
minHeight="0" />
</s:Group>
</s:Group>
<s:PopUpAnchor id="popUp" popUpPosition="topLeft"
popUpWidthMatchesAnchorWidth="false" >
<s:Group id="controls" width="100%" height="{topGroup.height - 2.5}"
alpha="0"
mouseEnabledWhereTransparent="false" rollOut="{hideControls()}"
rollOver="checkRollOverTimeout(event)" >
<s:Rect left="{width + titleDisplay.width >> 1}" right="0"
height="{controlsRollOverGroup.height}" minWidth="{width -
titleDisplay.width >> 1}"
>
<s:fill>
<s:SolidColor color="#0000FF" alpha="0.0" />
</s:fill>
</s:Rect>
<s:Rect width="{width + (hostComponent.editable ? - titleDisplay.width :
+ titleDisplay.width) >> 1}"
height="{controlsRollOverGroup.height}" >
<s:fill>
<s:SolidColor color="#0000FF" alpha="0.0" />
</s:fill>
</s:Rect>
<s:HGroup id="controlsGroup" verticalAlign="middle" verticalCenter="0"
left="{width + titleDisplay.width >> 1}" paddingLeft="7">
<s:Group id="dragArea" buttonMode="true" useHandCursor="true"
mouseEnabled="true" width="10" height="10">
<s:BitmapImage
source="@Embed(source='fr/after24/tests/assets/moveArea.png')" />
</s:Group>
<components:BitmapButton id="updateButton" buttonMode="true"
useHandCursor="true"
imageSource="@Embed(source='fr/after24/tests/assets/updateButton.png')"
enabled="{!hostComponent.isUpdating}" />
<components:BitmapButton id="maximizeButton" buttonMode="true"
useHandCursor="true"
excludeFrom="normalAndMaximized,updatingAndMaximized"
imageSource="@Embed(source='fr/after24/tests/assets/maximizeButton.png')" />
<components:BitmapButton id="minimizeButton" buttonMode="true"
useHandCursor="true"
includeIn="normalAndMaximized, updatingAndMaximized"
imageSource="@Embed(source='fr/after24/tests/assets/minimizeButton.png')" />
<components:BitmapButton id="closeButton" buttonMode="true"
useHandCursor="true"
imageSource="@Embed(source='fr/after24/tests/assets/closeButton.png')" />
</s:HGroup>
</s:Group>
</s:PopUpAnchor>
</s:SparkSkin>
--
View this message in context: http://apache-flex-users.2333346.n4.nabble.com/Skinning-issue-tp5522p5540.html
Sent from the Apache Flex Users mailing list archive at Nabble.com.
Re: Skinning issue
Posted by Lee Burrows <su...@leeburrows.com>.
Can you post the code for the skin?
]On 14/03/2014 22:10, After24 wrote:
> Hi Mark, thank you for your response.
>
> No the width and height of the component are not percent based.
>
>
>
>
> --
> View this message in context: http://apache-flex-users.2333346.n4.nabble.com/Skinning-issue-tp5522p5536.html
> Sent from the Apache Flex Users mailing list archive at Nabble.com.
>
--
Lee Burrows
ActionScripter
Re: Skinning issue
Posted by mark goldin <ma...@gmail.com>.
Try it.
On Fri, Mar 14, 2014 at 5:10 PM, After24 <vi...@after24.net> wrote:
> Hi Mark, thank you for your response.
>
> No the width and height of the component are not percent based.
>
>
>
>
> --
> View this message in context:
> http://apache-flex-users.2333346.n4.nabble.com/Skinning-issue-tp5522p5536.html
> Sent from the Apache Flex Users mailing list archive at Nabble.com.
>
Re: Skinning issue
Posted by After24 <vi...@after24.net>.
Hi Mark, thank you for your response.
No the width and height of the component are not percent based.
--
View this message in context: http://apache-flex-users.2333346.n4.nabble.com/Skinning-issue-tp5522p5536.html
Sent from the Apache Flex Users mailing list archive at Nabble.com.
Re: Skinning issue
Posted by mark goldin <ma...@gmail.com>.
Did you set width and height to 100%?
On Fri, Mar 14, 2014 at 11:29 AM, After24 <vi...@after24.net> wrote:
> Hello,
>
> I have an issue with a component I'm working on which extends TitleWindow :
>
> If I call setStyle("skinClass", TheNewSkinClass) on this component after
> its
> initialization, the contentGroup of the new skin is empty.
>
> Is it a normal behavior ?
>
> Thank you.
>
>
>
> --
> View this message in context:
> http://apache-flex-users.2333346.n4.nabble.com/Skinning-issue-tp5522.html
> Sent from the Apache Flex Users mailing list archive at Nabble.com.
>