flex-issues mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From "DarkStone (JIRA)" <j...@apache.org>
Subject [jira] [Updated] (FLEX-34689) By setting the styleName property to change the SkinnableComponent's skin does not work in certain circumstances
Date Wed, 17 Dec 2014 10:01:15 GMT

     [ https://issues.apache.org/jira/browse/FLEX-34689?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel
]

DarkStone updated FLEX-34689:
-----------------------------
    Description: 
[Step to reproduce the bug]
1. Create a subclass of SkinnableComponent named TestComponent.
package test
{
	import spark.components.supportClasses.ButtonBase;
	import spark.components.supportClasses.SkinnableComponent;
	import spark.core.IDisplayText;
	
	public class TestComponent extends SkinnableComponent
	{
		[SkinPart]
		public var textDisplay:IDisplayText;
		
		[SkinPart]
		public var testButton:ButtonBase;
		
		public function TestComponent()
		{
			super();
		}
	}
}

2. Create 2 different skins for TestComponent:
TestComponentASkin.mxml (see the attachment)
TestComponentBSkin.mxml (see the attachment)

3. Create a CSS file named TestStyle.css

@namespace s "library://ns.adobe.com/flex/spark";

s|SkinnableComponent.testComponentB
{
	skinClass: ClassReference("test.TestComponentBSkin");
}

4. In the main Application.mxml, do the following:

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication frameRate="30" showStatusBar="false" xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark" xmlns:test="test.*">

	<fx:Style source="test/TestStyle.css"/>

	<test:TestComponent id="tc" skinClass="test.TestComponentASkin" horizontalCenter="0" top="10"/>

	<s:Button label="Change Skin" click="tc.styleName='testComponentB'" horizontalCenter="0"
bottom="10"/>
</s:WindowedApplication>

5. Run the application, click the "Change Skin" button, then you'll see the bug, which is
the TestComponent's skin won't change!



[Solution]
I have already solved this bug, it's very eazy to fix:

Just modify the source code of SkinnableComponent.as, and a line clearStyle("skinClass") to
the styleChanged() function (add at line 552):

override public function styleChanged(styleProp:String):void
{
    var allStyles:Boolean = styleProp == null || styleProp == "styleName";

    if (allStyles || styleProp == "skinClass" || styleProp == "skinFactory")
    {
        clearStyle("skinClass"); //This will fix the bug
        skinChanged = true;
        invalidateProperties();

        if (styleProp == "skinFactory")
        skinFactoryStyleChanged = true;
    }

    super.styleChanged(styleProp);
}

clearStyle("skinClass"); //This will fix the bug
That's the only line needs to be added, in order to fix this bug.


I have trouble connecting to the Flex Git, the network right now is very crappy, may someone
review this, if passed, may he commit this change to the Git, that will be very nice : - )


DarkStone
2014-12-16

  was:
[Step to reproduce the bug]
1. Create a subclass of SkinnableComponent named TestComponent.
package test
{
	import spark.components.supportClasses.ButtonBase;
	import spark.components.supportClasses.SkinnableComponent;
	import spark.core.IDisplayText;
	
	public class TestComponent extends SkinnableComponent
	{
		[SkinPart]
		public var textDisplay:IDisplayText;
		
		[SkinPart]
		public var testButton:ButtonBase;
		
		public function TestComponent()
		{
			super();
		}
	}
}

2. Create 2 different skins for TestComponent:
TestComponentASkin.mxml (see the attachment)
TestComponentBSkin.mxml (see the attachment)

3. Create a CSS file named TestStyle.css

@namespace s "library://ns.adobe.com/flex/spark";

s|SkinnableComponent.testComponentB
{
	skinClass: ClassReference("test.TestComponentBSkin");
}

4. In the main Application.mxml, do the following:

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication frameRate="30" showStatusBar="false" xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark" xmlns:test="test.*">

	<fx:Style source="test/TestStyle.css"/>

	<test:TestComponent id="tc" skinClass="test.TestComponentASkin" horizontalCenter="0" top="10"/>

	<s:Button label="Change Skin" click="tc.styleName='testComponentB'" horizontalCenter="0"
bottom="10"/>
</s:WindowedApplication>

5. Run the application, click the "Change Skin" button, then you'll see the bug, which is
the TestComponent's skin won't change!



[Solution]
I have already solved this bug, it's very eazy to fix:

Just modify the source code of SkinnableComponent.as, and add the following code to the class:

override public function set styleName(value:Object):void
{
	clearStyle("skinClass");
	super.styleName = value;
}

This will solve this bug, and I've tested it in different scenarios, it works correctly!


I have trouble connecting to the Flex Git, the network right now is very crappy, may someone
review this, if passed, may he commit this change to the Git, that will be very nice : - )


DarkStone
2014-12-16


> By setting the styleName property to change the SkinnableComponent's skin does not work
in certain circumstances
> ----------------------------------------------------------------------------------------------------------------
>
>                 Key: FLEX-34689
>                 URL: https://issues.apache.org/jira/browse/FLEX-34689
>             Project: Apache Flex
>          Issue Type: Bug
>          Components: Spark: SkinnableComponent
>    Affects Versions: Apache Flex 4.13.0
>            Reporter: DarkStone
>            Priority: Minor
>              Labels: easyfix, easytest
>         Attachments: TestComponent.as, TestComponentASkin.mxml, TestComponentBSkin.mxml,
TestStyle.css
>
>   Original Estimate: 0h
>  Remaining Estimate: 0h
>
> [Step to reproduce the bug]
> 1. Create a subclass of SkinnableComponent named TestComponent.
> package test
> {
> 	import spark.components.supportClasses.ButtonBase;
> 	import spark.components.supportClasses.SkinnableComponent;
> 	import spark.core.IDisplayText;
> 	
> 	public class TestComponent extends SkinnableComponent
> 	{
> 		[SkinPart]
> 		public var textDisplay:IDisplayText;
> 		
> 		[SkinPart]
> 		public var testButton:ButtonBase;
> 		
> 		public function TestComponent()
> 		{
> 			super();
> 		}
> 	}
> }
> 2. Create 2 different skins for TestComponent:
> TestComponentASkin.mxml (see the attachment)
> TestComponentBSkin.mxml (see the attachment)
> 3. Create a CSS file named TestStyle.css
> @namespace s "library://ns.adobe.com/flex/spark";
> s|SkinnableComponent.testComponentB
> {
> 	skinClass: ClassReference("test.TestComponentBSkin");
> }
> 4. In the main Application.mxml, do the following:
> <?xml version="1.0" encoding="utf-8"?>
> <s:WindowedApplication frameRate="30" showStatusBar="false" xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark" xmlns:test="test.*">
> 	<fx:Style source="test/TestStyle.css"/>
> 	<test:TestComponent id="tc" skinClass="test.TestComponentASkin" horizontalCenter="0"
top="10"/>
> 	<s:Button label="Change Skin" click="tc.styleName='testComponentB'" horizontalCenter="0"
bottom="10"/>
> </s:WindowedApplication>
> 5. Run the application, click the "Change Skin" button, then you'll see the bug, which
is the TestComponent's skin won't change!
> [Solution]
> I have already solved this bug, it's very eazy to fix:
> Just modify the source code of SkinnableComponent.as, and a line clearStyle("skinClass")
to the styleChanged() function (add at line 552):
> override public function styleChanged(styleProp:String):void
> {
>     var allStyles:Boolean = styleProp == null || styleProp == "styleName";
>     if (allStyles || styleProp == "skinClass" || styleProp == "skinFactory")
>     {
>         clearStyle("skinClass"); //This will fix the bug
>         skinChanged = true;
>         invalidateProperties();
>         if (styleProp == "skinFactory")
>         skinFactoryStyleChanged = true;
>     }
>     super.styleChanged(styleProp);
> }
> clearStyle("skinClass"); //This will fix the bug
> That's the only line needs to be added, in order to fix this bug.
> I have trouble connecting to the Flex Git, the network right now is very crappy, may
someone review this, if passed, may he commit this change to the Git, that will be very nice
: - )
> DarkStone
> 2014-12-16



--
This message was sent by Atlassian JIRA
(v6.3.4#6332)

Mime
View raw message