9 Slice Scaling with Spark Skinning
Doing 9 Slice Scaling in Flex 4 Skins is actually very very easy however there were a few hurdles you had to be ready for if you want to do it right. Luckily the Flex team made some much requested changes to 9 Slice Scaling and now it is super easy.
Let’s start by making a Spark Button in our Application and resizing it a few times:
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Script>
<![CDATA[
import com.unitedmindset.skins.ScalableSkin;
]]>
</fx:Script>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:layout>
<s:VerticalLayout gap="20" paddingBottom="20" paddingLeft="20" paddingRight="20" paddingTop="20"/>
</s:layout>
<s:Button skinClass="com.unitedmindset.skins.ScalableSkin" width="20" height="20"/>
<s:Button skinClass="com.unitedmindset.skins.ScalableSkin" width="100" height="100"/>
<s:Button skinClass="com.unitedmindset.skins.ScalableSkin" width="300" height="100"/>
</s:Application>
You’ll notice I already have made my ScalableSkin, but right now it’s empty. This is just a stripped out version of the ButtonSkin created when using the “New > MXML Skin” Command.
The file current looks like this:
<!--
ADOBE SYSTEMS INCORPORATED
Copyright 2008 Adobe Systems Incorporated
All Rights Reserved.
NOTICE: Adobe permits you to use, modify, and distribute this file
in accordance with the terms of the license agreement accompanying it.
-->
<!--- The default skin class for the Spark Button component.
@see spark.components.Button
@langversion 3.0
@playerversion Flash 10
@playerversion AIR 1.5
@productversion Flex 4
-->
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:fb="http://ns.adobe.com/flashbuilder/2009" minWidth="10" minHeight="10" alpha.disabled="0.5">
<!-- host component -->
<fx:Metadata>
<![CDATA[
/**
* @copy spark.skins.spark.ApplicationSkin#hostComponent
*/
[HostComponent("spark.components.Button")]
]]>
</fx:Metadata>
<!-- states -->
<s:states>
<s:State name="up" />
<s:State name="over" />
<s:State name="down" />
<s:State name="disabled" />
</s:states>
<!-- text -->
<s:Label id="labelDisplay"
textAlign="center"
verticalAlign="middle"
maxDisplayedLines="1"
horizontalCenter="0" verticalCenter="1"
left="10" right="10" top="2" bottom="2">
</s:Label>
</s:SparkSkin>
Just a blank skin with the label.
My Problem with Early Beta Builds
When I first got into 9 Slice Scaling I thought that all you had to do is make a s:Group – which has scale9 build into it. However at the time if you didn’t include a background element that engulfed the entirety of the scaled item, then the skin came out horribly wrong.
Current Solution
The Flex team has since listened to our pain and updated the 9 Slice Scaling process. Now my current solution looks as such:
<!--
ADOBE SYSTEMS INCORPORATED
Copyright 2008 Adobe Systems Incorporated
All Rights Reserved.
NOTICE: Adobe permits you to use, modify, and distribute this file
in accordance with the terms of the license agreement accompanying it.
-->
<!--- The default skin class for the Spark Button component.
@see spark.components.Button
@langversion 3.0
@playerversion Flash 10
@playerversion AIR 1.5
@productversion Flex 4
-->
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:fb="http://ns.adobe.com/flashbuilder/2009" minWidth="10" minHeight="10" alpha.disabled="0.5">
<!-- host component -->
<fx:Metadata>
<![CDATA[
/**
* @copy spark.skins.spark.ApplicationSkin#hostComponent
*/
[HostComponent("spark.components.Button")]
]]>
</fx:Metadata>
<!-- states -->
<s:states>
<s:State name="up" />
<s:State name="over" />
<s:State name="down" />
<s:State name="disabled" />
</s:states>
<s:Group left="0" right="0" top="0" bottom="0" scaleGridLeft="2" scaleGridRight="8" scaleGridTop="2" scaleGridBottom="8">
<s:Path data="M 0 2 L 2 0 H 8 L 10 2 V 8 L 8 10 H 2 L 0 8 V 0 2">
<s:fill>
<s:SolidColor color="0x000000"/>
</s:fill>
</s:Path>
</s:Group>
<!-- text -->
<s:Label id="labelDisplay"
textAlign="center"
verticalAlign="middle"
maxDisplayedLines="1"
horizontalCenter="0" verticalCenter="1"
left="10" right="10" top="2" bottom="2">
</s:Label>
</s:SparkSkin>
And we get the result that we see from the above image. The Group defines the Left/Right/Bottom/Top scale slices and the s:Path defines the shape to scale within the Group.
Again, this is a huge improvement to skinning with 9 Slice Scaling in Flex 3.
If you want more information on Spark Skinning check out some of my other posts:
Flex 4 Spark Skinning
New Spark Skinning Workflow
Spark Skinning with Flash Catalyst
If you’re using BitmapImage for embedded backgrounds, the embed for images includes built-in support for 9 slice scaling. Just set top, left, right, and bottom to 0 on the BitmapImage and set the source to something like:
@Embed(source=’/assets/images/image.png’, scaleGridTop=’2′, scaleGridBottom=’35′, scaleGridLeft=’10′, scaleGridRight=’256′)
Very true, and a place you definitely don’t need to do an entire custom skin.
[...] This post was mentioned on Twitter by CT and MojoGeeks, tony murphy. tony murphy said: Latest Adobe News – 9 Slice Scaling with Spark Skinning http://feedproxy.google.com/~r/TheWorldInAStateOfFlex/~3/eNsOZl9GIf8/ [...]
This was interesting. Thanks for posting.
At first I wasn’t familiar with the syntax for drawing a path. After some googling I found this which might help others understand as well:
http://saturnboy.com/2009/06/svg-primer-for-flex/
Sorry that I didn’t include the path information. Here is a link to the Path Livedocs.