Hopefully this quick post will be a bit of a time saver for Flex Developers developing Flex 4 SDK projects with Flash Builder or other tools…

Over the last year or 2 I’ve really got comfortable with reskinning Flex 3 applications. For me the quickest, simlest way has usually been to cut up the designer’s photoshop file and implement Scale 9 and syntax in my Flex css files – an example of a recent Flex 3 button skin looked like this:

.answerButton
{
fontSize    : 44px;
fontWeight    : bold;
paddingLeft    : 15px;
paddingRight: 15px;

upSkin        : Embed(source=”assets/images/new/buttons/answerButtonUp.png”,scaleGridTop=”20″, scaleGridLeft=”19″, scaleGridRight=”145″,  scaleGridBottom=”99″);
overSkin    : Embed(source=”assets/images/new/buttons/answerButtonOver.png”,scaleGridTop=”20″, scaleGridLeft=”19″, scaleGridRight=”145″,  scaleGridBottom=”99″);
downSkin    : Embed(source=”assets/images/new/buttons/answerButtonOver.png”,scaleGridTop=”20″, scaleGridLeft=”19″, scaleGridRight=”145″,  scaleGridBottom=”99″);
disabledSkin: Embed(source=”assets/images/new/buttons/answerButtonUp.png”,scaleGridTop=”20″, scaleGridLeft=”19″, scaleGridRight=”145″,  scaleGridBottom=”99″);
selectedDisabledSkin: Embed(source=”assets/images/new/buttons/answerButtonUp.png”,scaleGridTop=”20″, scaleGridLeft=”19″, scaleGridRight=”145″,  scaleGridBottom=”99″);

}

Luckily for me the Flex 4 SDK is backwards compatible for the most part so you can still skin an mx.controls.Button component with the CSS above.

However… one of the reasons I’ve been migrating my Flex 3 project to Flex 4 is to make use of some of the skinning improvements it offers with it’s new Spark components built on top of the Flex 3 halo components.

The code above does not work on a spark.components.Button. I assumed it would… Here’s how I got the example below to work:

https://www.nickkuh.com/demos/gumbo/scale_nine/

Step 1) Create a new Flex Project in Flash Builder

Step 2) You can still customize the label colours and states but you’ll need to implement the new namespaces in CSS introduced in Flex 4 to avoid warnings and errors – see the gumbo_scale_nine.css file.

Step 3) You’ll also notice within the gumbo_scale_nine.css file that I’m pointing a custom style (‘answerButton’) to an MXML skin file in the location com.nickkuh.skins.AnswerButtonSkin.mxml. This is the file that I’ve used to custom skin the spark button component. I copied the ButtonSkin.mxml file that comes with Flex 4, stipped out a load of fills and strokes I didn’t require and add these important lines:

<s:BitmapImage left=”0″ right=”0″ top=”0″ bottom=”0″ source=”@Embed(source=’assets/answerButtonUp.png’,scaleGridTop=’20’, scaleGridLeft=’19’, scaleGridRight=’145′,  scaleGridBottom=’99’)” resizeMode=”scale” includeIn=”up” />

<s:BitmapImage left=”0″ right=”0″ top=”0″ bottom=”0″ source=”@Embed(source=’assets/answerButtonOver.png’,scaleGridTop=’20’, scaleGridLeft=’19’, scaleGridRight=’145′,  scaleGridBottom=’99’)” resizeMode=”scale” excludeFrom=”up” />

By default the resizeMode parameter will just tile and repeat your graphic which wasn’t the desired functionality.

So that’s it. Although it took more step to reskin than a Flex 3 component I can certainly see the benefits of the separate FXG skin file. Next step is to change that SimpleText labelElement into a RichEditableText component and enable multilines and imline images into my Spark buttons. Wish me luck!



6 Comments

  1. Jethro

    Good post mate.

    I gotta say though, what a lot of extra code to skin a button with a PNG!
    With Flex 3 easy.

    Also, can you not subclass a skin (really haven’t looked to see if this is possible)?? That way your FXG could override states. Eg not have to define the label or exclusions for colourizing.

  2. Nick Kuh

    My guess from looking at the default skin MXMLs is that you can’t subclass them but I could be wrong…

  3. fishman

    thany you , verty muth!

  4. Maria

    I’m a PNG citizen cernurtly studying at Lincoln University in Cnhristchurch,NZ, and I have three more years to completed my full course , however, my passport will expire next year October. Therefore, I would like to apply online to renew..Thank you,Regards;Butkim Berot

  5. Aww happy birthday stud #2! Way to go on tackling that baby weight. I honestly don't know how you runner mom's do it all.Good luck selling the house, it's such a hard time right now. We're on the other looking for a house but with Mr. Pi unemployed we are just LOOKING.Definitely take the day to rest, sounds like you had a crazy weekend.Mine was great, I got to ride OUTSIDE on Saturday but my Sunday run was miserable since it was pouring and cold.

  6. http://www.blrimages.net/

    LomumbaThis is really a great program. A friend send the link to but little late to register. Is there anyway I can register for the next session? Thanks, Lomumba  


Leave a reply