SmartLogic Logo (443) 451-3001

The SmartLogic Blog

SmartLogic is a web and mobile product development studio based in Baltimore. Contact us for help building your product or visit our website to learn more about what we do.

Skinning A Button in Flex 4 Using FXG

July 16th, 2008 by

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:

  1. NewSkinning.mxml – main application containing 2 buttons
  2. MyButtonSkin.mxml – first custom button skin
  3. 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

NewSkinning Screenshot

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

  • Peter Farland

    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.

  • http://sherifabdou.com Sherif

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

  • http://www.smartlogicsolutions.com/wiki/Greg_Jastrab Greg Jastrab

    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/

  • Pingback: RichApps » Blog Archive » FXG kicks ass!

  • lakshmikanthreddy

    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 .

  • http://www.smartlogicsolutions.com/wiki/Greg_Jastrab Greg Jastrab

    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.

  • Pingback: Flash tutorials | Flex Skin roundup | Lemlinh.com

  • http://www.aiflex.cn mani

    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~

  • http://Couldnotresolvetoacomponentimplementation. Steed

    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.

  • http://www.tubo123.com Steed

    Other question:

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

    My code:

  • http://www.smartlogicsolutions.com/wiki/Greg_Jastrab Greg Jastrab

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

  • http://www.smartlogicsolutions.com/wiki/Greg_Jastrab Greg Jastrab

    @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>
  • http://www.ChikaraDev.com Greg Lafrance

    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?

  • http://www.smartlogicsolutions.com/wiki/Greg_Jastrab Greg Jastrab

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

  • Pingback: iamdeepa on technology » Archive » Speaking about Halo/Gumbo development at MAX 2008

Greg Jastrab was a developer and project manager at SmartLogic from 2006 to 2011. Follow @gjastrab on twitter

Greg Jastrab's posts