Skinning A Button in Flex 4 Using FXG « SmartLogic Solutions Blog

Skinning A Button in Flex 4 Using FXG

July 16th, 2008 by Greg Jastrab

In yesterday’s post I walked through how I got the Flex 4 SDK setup, compiled, and ran the first Hello World application in Flex 4. I said I would follow up today with skinning a Button using the new declarative graphics tags known as FXG (previously referred to as MXML-G), so here we are.

Today I want to explore using the new layout property as well as using a Skin file to describe how the button should look. Let’s get started…

This project will have 3 files:

NewSkinning.mxml - main application containing 2 buttons
MyButtonSkin.mxml - first custom button skin
OtherSkin.mxml - circular button skin

NewSkinning.mxml

UPDATE: Removed xmlns:mx="library:adobe/flex/halo" and changed <mx:Style> to <Style> as pointed out by Peter.

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

Two things to note here are that you cannot include two language namespaces in the same file. If you replace “library:adobe/flex/halo” with “http://www.adobe.com/2006/mxml” you will get an error when trying to compile the application:

/Developer/Applications/Flex/test4/new_skinning/NewSkinning.mxml(5): col: 28
Error: Only one language namespace must be specified per document.
Found 'http://ns.adobe.com/mxml/2009' and 'http://www.adobe.com/2006/mxml'.

UPDATE: You can ignore this if you’re using the updated code, but I’ll leave this in here in case people search for the compiler error above.

Secondly, you’ll notice a new attribute from my code from yesterday: layout, which is assigned a new class value. Layout in Flex 4 can be handled separately from the view if you don’t want to use absolute positioning. The layout="flex.layout.VerticalLayout" will tell the Application to use the flex.layout.VerticalLayout class to layout the children.

At first, this may not seem like a big deal, since you could define vertical or horizontal layout in an Application in Flex 3, but this now carries through to all classes, and it is easy to simply write a new layout class and assign that to the layout property if you want to write some custom layout code yourself. Notice the skinZZ property in the CSS is used to assign the view class for the Button components. Now let’s check out the Skin files.

MyButtonSkin.mxml

<?xml version="1.0" encoding="utf-8"?>
<Skin xmlns="http://ns.adobe.com/mxml/2009">
 
    <states>
        <State name="up" />
        <State name="over" />
        <State name="down" />
        <State name="disabled" />
    </states>
 
    <content>
 
        <Rect left="0" right="0" top="0" bottom="0" minWidth="100" minHeight="40">
            <stroke>
                <SolidColorStroke color="0x020202" color.over="0xFF00FF" />
            </stroke>
            <fill>
                <SolidColor color="white" color.over="gray" color.down="0xFF0562" />
            </fill>
        </Rect>
 
        <TextBox text="{data.label}" fontFamily="Arial" fontSize="12"
                 color="0xFF0000" color.disabled="0xC0C0C0"
                 color.over="0x0000FF" color.down="0x00FF00"
                 left="10" right="10" top="4" bottom="2"
                 textAlign="center" verticalAlign="middle" />
 
    </content>
 
</Skin>

OtherSkin.mxml

<?xml version="1.0" encoding="utf-8"?>
<Skin xmlns="http://ns.adobe.com/mxml/2009">
 
    <states>
        <State name="up" />
        <State name="over" />
        <State name="down" />
        <State name="disabled" />
    </states>
 
    <content>
        <Ellipse width="50" height="30">
            <fill>
                <SolidColor color="blue" color.over="red" color.down="white" />
            </fill>
        </Ellipse>
    </content>
 
</Skin>

Compile and run the app and you should see:

NewSkinning Screenshot

NOTE: If you are on Windows and having problems compiling, look at the comment that Sherif left in my previous post.

This entry was posted on Wednesday, July 16th, 2008 at 1:01 am by Greg Jastrab. Greg Jastrab joined SmartLogic Solutions in June 2006. He is now the Technical Project Manager and oversees all Flash/Flex/AIR development. Follow @gjastrab on twitter

This post is filed under FXG, Flex 4, Greg Jastrab, Gumbo. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

14 Responses to “Skinning A Button in Flex 4 Using FXG”

Peter Farland says:

July 16, 2008 at 11:38 am

Great to see you getting started with Flex 4! One quick point, the tag above should be in the language namespace of MXML 2009 as simply … the halo namespace really only covers actual Flex 3 components and it’s a bug right now that it allows special language tags like to resolve in it too.
Sherif says:

July 17, 2008 at 12:03 pm

How are you not getting VerifyError: Error #1014: Class flash.text.engine::TextElement could not be found. Everything works with the TextBox tag.
Greg Jastrab says:

July 17, 2008 at 12:47 pm

I was only compiling on the command line. For anyone else who got this error, head over to Sherif’s page on how he got around this: http://sherifabdou.com/2008/07/if-you-are-trying-to-compile-gumbo-flex-4-and-getting-a-verify-error/
RichApps » Blog Archive » FXG kicks ass! says:

July 23, 2008 at 5:10 pm

[...] Skinning A Button in Flex 4 Using FXG [...]
lakshmikanthreddy says:

August 19, 2008 at 1:31 am

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 .
Greg Jastrab says:

August 19, 2008 at 1:46 am

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.
Flash tutorials | Flex Skin roundup | Lemlinh.com says:

September 7, 2008 at 3:34 am

[...] 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 [...]
mani says:

September 19, 2008 at 9:31 pm

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~
Steed says:

May 12, 2009 at 6:11 pm

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.
Steed says:

May 12, 2009 at 6:14 pm

Other question:

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

My code:
Greg Jastrab says:

May 12, 2009 at 6:20 pm

@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.

Greg Jastrab says:

May 12, 2009 at 9:17 pm

@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>

Greg Lafrance says:

May 25, 2009 at 12:30 am

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?
Greg Jastrab says:

May 25, 2009 at 12:34 am

@greg - Did you not try the code that is posted in the comment immediately preceeding this?

SmartLogic Solutions Blog