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) How to correctly set default skinClass for custom SkinnableComponent?
Date Fri, 19 Dec 2014 08:13:13 GMT

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

DarkStone updated FLEX-34689:
-----------------------------
    Description: 
This issue has been resolved, here is the right way to set default skinClass for the custom
SkinnableComponent, which is to use the Type Selector:

package test
{
	import flash.utils.getQualifiedClassName;
	
	import mx.styles.CSSStyleDeclaration;
	
	import spark.components.supportClasses.SkinnableComponent;
	
	public class TestComponent extends SkinnableComponent
	{
		public function TestComponent()
		{
			super();
			var css:CSSStyleDeclaration = new CSSStyleDeclaration();
			css.setStyle("skinClass", skin.DefaultTestComponentSkin);
			styleManager.setStyleDeclaration(getQualifiedClassName(this).replace(/::/g, "."), css,
true);
		}
	}
}


DarkStone
2014-12-19

  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, add the following codes to the class:

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


I've already fixed the bug, and pushed it to the develop branch of the Flex SDK git.


DarkStone
2014-12-18


> How to correctly set default skinClass for custom SkinnableComponent?
> ---------------------------------------------------------------------
>
>                 Key: FLEX-34689
>                 URL: https://issues.apache.org/jira/browse/FLEX-34689
>             Project: Apache Flex
>          Issue Type: Question
>          Components: Spark: SkinnableComponent
>    Affects Versions: Apache Flex 4.13.0
>            Reporter: DarkStone
>            Assignee: DarkStone
>            Priority: Minor
>              Labels: easyfix, easytest
>         Attachments: TestComponent.as, TestComponentASkin.mxml, TestComponentBSkin.mxml,
TestStyle.css
>
>   Original Estimate: 0h
>  Remaining Estimate: 0h
>
> This issue has been resolved, here is the right way to set default skinClass for the
custom SkinnableComponent, which is to use the Type Selector:
> package test
> {
> 	import flash.utils.getQualifiedClassName;
> 	
> 	import mx.styles.CSSStyleDeclaration;
> 	
> 	import spark.components.supportClasses.SkinnableComponent;
> 	
> 	public class TestComponent extends SkinnableComponent
> 	{
> 		public function TestComponent()
> 		{
> 			super();
> 			var css:CSSStyleDeclaration = new CSSStyleDeclaration();
> 			css.setStyle("skinClass", skin.DefaultTestComponentSkin);
> 			styleManager.setStyleDeclaration(getQualifiedClassName(this).replace(/::/g, "."),
css, true);
> 		}
> 	}
> }
> DarkStone
> 2014-12-19



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

Mime
View raw message