Comments on: Skinning A Button in Flex 4 Using FXG http://blog.smartlogicsolutions.com/2008/07/16/skinning-button-flex-4-fxg/ News and updates from the people at SmartLogic Solutions Fri, 12 Mar 2010 02:06:34 -0800 http://wordpress.org/?v=2.8.6 hourly 1 By: Greg Jastrab http://blog.smartlogicsolutions.com/2008/07/16/skinning-button-flex-4-fxg/comment-page-1/#comment-2410 Greg Jastrab Mon, 25 May 2009 04:34:55 +0000 http://blog.smartlogicsolutions.com/2008/07/16/skinning-button-flex-4-fxg/#comment-2410 @greg - Did you not try the code that is posted in the comment immediately preceeding this? @greg – Did you not try the code that is posted in the comment immediately preceeding this?

]]> By: Greg Lafrance http://blog.smartlogicsolutions.com/2008/07/16/skinning-button-flex-4-fxg/comment-page-1/#comment-2408 Greg Lafrance Mon, 25 May 2009 04:30:57 +0000 http://blog.smartlogicsolutions.com/2008/07/16/skinning-button-flex-4-fxg/#comment-2408 The Flex 4 sample apps I have tried in this blog have not compiled for me thus far. Would it be possible for you to bring them up to speed with the current SDK so they work without having to change anything? The Flex 4 sample apps I have tried in this blog have not compiled for me thus far. Would it be possible for you to bring them up to speed with the current SDK so they work without having to change anything?

]]> By: Greg Jastrab http://blog.smartlogicsolutions.com/2008/07/16/skinning-button-flex-4-fxg/comment-page-1/#comment-937 Greg Jastrab Wed, 13 May 2009 01:17:00 +0000 http://blog.smartlogicsolutions.com/2008/07/16/skinning-button-flex-4-fxg/#comment-937 @steed I tried to update the following files to as closely match the examples, but run under the latest SDK (I built it from revision 6860 from the Flex SDK trunk. This example is a good demonstration of using the new CSS3 namespace styling. <b>NOTE:</b> This isn't necessarily how I'd recommend to properly skin the buttons, but it will at least get the example above to run so you can see it in action. NewSkinning.mxml <pre lang="xml"><?xml version="1.0" encoding="utf-8"?> <s:Application xmlns="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" backgroundColor="gray"> <Style> @namespace s "library://ns.adobe.com/flex/spark"; s|Button { skinClass: ClassReference("MyButtonSkin"); } .otherButton { skinClass: ClassReference("OtherSkin"); } </Style> <s:layout> <s:VerticalLayout /> </s:layout> <s:Button label="Hello World" /> <s:Button styleName="otherButton" label="Hello World 2" /> </s:Application></pre> MyButtonSkin.mxml <pre lang="xml"><?xml version="1.0" encoding="utf-8"?> <s:SparkSkin xmlns="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" minHeight="20"> <Metadata> [HostComponent("spark.components.Button")] </Metadata> <s:states> <s:State name="up" /> <s:State name="over" /> <s:State name="down" /> <s:State name="disabled" /> </s:states> <s:Rect left="0" right="0" top="0" bottom="0" minWidth="100" minHeight="10"> <s:fill> <s:SolidColor color="white" color.over="gray" color.down="#ff0562" /> </s:fill> <s:stroke> <s:SolidColorStroke color="#020202" color.over="#ff00ff" /> </s:stroke> </s:Rect> <s:SimpleText id="labelElement" fontFamily="Arial" fontSize="12" color="#ff0000" color.over="#0000ff" color.down="#00ff00" horizontalCenter="0" verticalCenter="0" /> </s:SparkSkin></pre> OtherSkin.mxml <pre lang="xml"><?xml version="1.0" encoding="utf-8"?> <s:SparkSkin xmlns="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"> <Metadata> [HostComponent("spark.components.Button")] </Metadata> <s:states> <s:State name="up" /> <s:State name="over" /> <s:State name="down" /> <s:State name="disabled" /> </s:states> <s:Ellipse width="50" height="30"> <s:fill> <s:SolidColor color="blue" color.over="red" color.down="white" /> </s:fill> </s:Ellipse> </s:SparkSkin></pre> @steed I tried to update the following files to as closely match the examples, but run under the latest SDK (I built it from revision 6860 from the Flex SDK trunk.

This example is a good demonstration of using the new CSS3 namespace styling.

NOTE: This isn’t necessarily how I’d recommend to properly skin the buttons, but it will at least get the example above to run so you can see it in action.

NewSkinning.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns="http://ns.adobe.com/mxml/2009"
			 xmlns:s="library://ns.adobe.com/flex/spark"
			 backgroundColor="gray">
 
	<Style>
		@namespace s "library://ns.adobe.com/flex/spark";
		s|Button { skinClass: ClassReference("MyButtonSkin"); }
		.otherButton { skinClass: ClassReference("OtherSkin"); }
	</Style>
 
	<s:layout>
		<s:VerticalLayout />
	</s:layout>
 
	<s:Button label="Hello World" />
 
	<s:Button styleName="otherButton" label="Hello World 2" />
 
</s:Application>

MyButtonSkin.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin xmlns="http://ns.adobe.com/mxml/2009"
			 xmlns:s="library://ns.adobe.com/flex/spark"
			 minHeight="20">
 
	<Metadata>
		[HostComponent("spark.components.Button")]
	</Metadata>
 
	<s:states>
		<s:State name="up" />
		<s:State name="over" />
		<s:State name="down" />
		<s:State name="disabled" />
	</s:states>
 
	<s:Rect left="0" right="0" top="0" bottom="0" minWidth="100" minHeight="10">
		<s:fill>
			<s:SolidColor color="white" color.over="gray" color.down="#ff0562" />
		</s:fill>
		<s:stroke>
			<s:SolidColorStroke color="#020202" color.over="#ff00ff" />
		</s:stroke>
	</s:Rect>
 
	<s:SimpleText id="labelElement" fontFamily="Arial" fontSize="12"
				  color="#ff0000" color.over="#0000ff" color.down="#00ff00"
				  horizontalCenter="0" verticalCenter="0" />
 
</s:SparkSkin>

OtherSkin.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin xmlns="http://ns.adobe.com/mxml/2009"
			 xmlns:s="library://ns.adobe.com/flex/spark">
 
	<Metadata>
		[HostComponent("spark.components.Button")]
	</Metadata>
 
	<s:states>
		<s:State name="up" />
		<s:State name="over" />
		<s:State name="down" />
		<s:State name="disabled" />
	</s:states>
 
	<s:Ellipse width="50" height="30">
		<s:fill>
			<s:SolidColor color="blue" color.over="red" color.down="white" />
		</s:fill>
	</s:Ellipse>
 
</s:SparkSkin>
]]> By: Greg Jastrab http://blog.smartlogicsolutions.com/2008/07/16/skinning-button-flex-4-fxg/comment-page-1/#comment-936 Greg Jastrab Tue, 12 May 2009 22:20:46 +0000 http://blog.smartlogicsolutions.com/2008/07/16/skinning-button-flex-4-fxg/#comment-936 @steed this was an old post and the latest Gumbo development has significantly changed since then. I'll try to post a follow up soon to demonstrate how this code should be altered to be inline w/ the current Flex 4 source. @steed this was an old post and the latest Gumbo development has significantly changed since then. I’ll try to post a follow up soon to demonstrate how this code should be altered to be inline w/ the current Flex 4 source.

]]> By: Steed http://blog.smartlogicsolutions.com/2008/07/16/skinning-button-flex-4-fxg/comment-page-1/#comment-935 Steed Tue, 12 May 2009 22:14:27 +0000 http://blog.smartlogicsolutions.com/2008/07/16/skinning-button-flex-4-fxg/#comment-935 Other question: My FxButton don’t show Chinese in normal. in fact ,My all Gumbo components are same. My code: Other question:

My FxButton don’t show Chinese in normal.
in fact ,My all Gumbo components are same.

My code:

]]> By: Steed http://blog.smartlogicsolutions.com/2008/07/16/skinning-button-flex-4-fxg/comment-page-1/#comment-934 Steed Tue, 12 May 2009 22:11:33 +0000 http://blog.smartlogicsolutions.com/2008/07/16/skinning-button-flex-4-fxg/#comment-934 In comple up code,I have the ERROR: Could not resolve to a component implementation. I remove the is OK , but have new ERROR: data no defined in label="{data.label}" Can tall me WHY ? thanks. In comple up code,I have the ERROR:

Could not resolve to a component implementation.

I remove the is OK , but have new ERROR:

data no defined in label=”{data.label}”

Can tall me WHY ? thanks.

]]> By: mani http://blog.smartlogicsolutions.com/2008/07/16/skinning-button-flex-4-fxg/comment-page-1/#comment-320 mani Sat, 20 Sep 2008 02:31:33 +0000 http://blog.smartlogicsolutions.com/2008/07/16/skinning-button-flex-4-fxg/#comment-320 Hello, thanks for the wonderful artical. But, anybody could tell me , where to merge the namespace together? In flex-configure.xml? But it doesn't work@_@, If anybody know that, please email me, thanks very much~ Hello, thanks for the wonderful artical.
But, anybody could tell me , where to merge the namespace together? In flex-configure.xml? But it doesn’t work@_@, If anybody know that, please email me, thanks very much~

]]> By: Flash tutorials | Flex Skin roundup | Lemlinh.com http://blog.smartlogicsolutions.com/2008/07/16/skinning-button-flex-4-fxg/comment-page-1/#comment-287 Flash tutorials | Flex Skin roundup | Lemlinh.com Sun, 07 Sep 2008 08:34:56 +0000 http://blog.smartlogicsolutions.com/2008/07/16/skinning-button-flex-4-fxg/#comment-287 [...] on the Adobe Open Source site, watching Ely Greenfield’s video on Adobe TV and reading some blog posts I thought I’d jump right into learning how to skin components in Flex [...] [...] on the Adobe Open Source site, watching Ely Greenfield’s video on Adobe TV and reading some blog posts I thought I’d jump right into learning how to skin components in Flex [...]

]]> By: Greg Jastrab http://blog.smartlogicsolutions.com/2008/07/16/skinning-button-flex-4-fxg/comment-page-1/#comment-206 Greg Jastrab Tue, 19 Aug 2008 06:46:54 +0000 http://blog.smartlogicsolutions.com/2008/07/16/skinning-button-flex-4-fxg/#comment-206 Since the states syntax has drastically changed, I'm not surprised that design view won't work for Flex 4 in Flex Builder 3. When using Flex Builder 3 not everything is going to be guaranteed to work with the Gumbo SDK, so you're going to have to live with some of these issues I think. Since the states syntax has drastically changed, I’m not surprised that design view won’t work for Flex 4 in Flex Builder 3. When using Flex Builder 3 not everything is going to be guaranteed to work with the Gumbo SDK, so you’re going to have to live with some of these issues I think.

]]> By: lakshmikanthreddy http://blog.smartlogicsolutions.com/2008/07/16/skinning-button-flex-4-fxg/comment-page-1/#comment-204 lakshmikanthreddy Tue, 19 Aug 2008 06:31:34 +0000 http://blog.smartlogicsolutions.com/2008/07/16/skinning-button-flex-4-fxg/#comment-204 even i am getting the same error , the application is running fine with Gumbo SDK but it is unable to open in the Design mode , can anyone help me out . even i am getting the same error , the application is running fine with Gumbo SDK but it is unable to open in the Design mode , can anyone help me out .

]]>