In previous posts (Spark pains) I expressed my disappointment with Spark’s lack of functionality versus the Flex 3 mx components it came to replace. Like others, I shared the notion that Spark is half baked, and Adobe should have included a more complete solution in version 4.0 or 4.1, at least for the included components like button or image. Let’s see what is in for us in the upcoming Flex 4.5 (“Hero”).

Spark Button: The return of the Icon

Good news – the icon style is back to Spark button!  After spending a lot of time writing custom skins and specialized classes I was glad to see that the spark button now supports icon out of the box, just like the good old mx button. Too bad it came  late for my recent projects, all using spark buttons, cluttered with custom skins only to achieve the trivial task of putting an icon in a button.

By any reasonable standard, we should have had these  in Flex 4.0 release last year.

I can only reiterate the comment in a post in the Flex Examples blog: all that to get what we’ve had for years in Flex 3.  I really am glad these basic features are back, but was it really necessary to wait over a year to have it back (and require Flash 10.2 player)?

Really, Adobe – is that too much to expect?

Spark Bitmap Image

Another source of frustration for me was the spark BitmapImage. Made to replace mx image, it gave similar functionality… well, almost. No support for runtime loading and display of timeline swfs forced me and my team to fall-back to mx image for no other alternative.

Even worse, the overblown security model made image caching almost impossible to implement. Try constantly loading images from services like flikr and facebook and see what I mean. Policy files, trusted or untrusted domains, nothing seems to work properly. To actually make it possible to access bitmapData, everyone uses a PHP script to bypass the flash player security model – not very elegant.

A Hero to the rescue, Flex 4.5 brings the new and improved  BitmapImage with all of mx image features and built it image caching – Hallelujah!  they even threw in smart scaling and letterbox mode.  It’s too soon to comment on how effective it is since it is still in beta, but kudos to Adobe for doing the right thing.

What more can I say? Better late than never.

This is what I needed:

Basic Image List

First of all lets consider the options. A list can be created by either a DataGroup or a spark List. Both components can display a list based on data provider and item renderer, but there are a few differences, summarized here:

1. List is skinnable, DataGroup is not.
2. DataGroup is much lighter
3. List provides  additional  functionality, namely selection and drag-drop

Since I needed the select functionality I decided to go with the List.

<s:List id="lst1"
          dataProvider="{sampleData}"
          itemRenderer="cc.ImageRenderer"
          rollOverColor="#cccccc" selectionColor="#eeee00"
          width="100%">
       <s:layout>
            <s:HorizontalLayout gap="4"/>
       </s:layout>
 </s:List>

The Item Renderer

Start with a basic renderer from a template: ‘New->MXML Item Renderer’. Add an image control as the main display object, and optionally some background. If you try to run you’ll get a list with static images.

<s:states>
    <s:State name="normal" />
    <s:State name="hovered" />
    <s:State name="selected" />
</s:states>
 
<s:Rect left="0" right="0" top="0" bottom="0">
    <s:fill>
        <s:SolidColor
            color.normal="0x808080"
            color.hovered="{getStyle('rollOverColor')}"
            color.selected="{getStyle('selectionColor')}"
            />
    </s:fill>
</s:Rect>
 
<mx:Image id="img"
          verticalAlign="middle" horizontalAlign="center"
          left="4" right="4" top="4" bottom="4" />

Note that I took advantage of the styles for selection and rollover colors.
Now we add the effect, using the postLayoutTransformOffsets property of the item renderer.

<!--       The Zoom effect      -->
<s:postLayoutTransformOffsets>
    <s:TransformOffsets id="tOffsets"
                        scaleX="1" scaleY="1"
                        scaleX.hovered="1.5" scaleY.hovered="1.5"
                        scaleX.selected="1.1" scaleY.selected="1.1" />
</s:postLayoutTransformOffsets>
 
<!--       Transitions          -->
<s:transitions>
    <s:Transition toState="hovered" autoReverse="true">
        <s:Animate target="{tOffsets}" duration="200">
            <s:SimpleMotionPath property="scaleX" />
            <s:SimpleMotionPath property="scaleY" />
        </s:Animate>
    </s:Transition>
    <s:Transition fromState="hovered" autoReverse="true">
        <s:Animate target="{tOffsets}" duration="200">
            <s:SimpleMotionPath property="scaleX" />
            <s:SimpleMotionPath property="scaleY" />
        </s:Animate>
    </s:Transition>
</s:transitions>

To make the scale work from the center, simply set transformX and transformY to half the size of the renderer. Run the code and see the nice zoom effect on rollover. Works nice overall, but there is one problem – since the items are scaled during the effect, the area for the list is based on the normal scale, clipping the oversized item on the edges of the list. Simply put, we need some more space between the list and its container – which brings us to skinning.

Skinning the list

The default skin for spark list is basically a DataGroup enclosed within a scroll component. Simply adding margins between the list and the scroller will not do – the images would still get clipped. We need to wrap the list in a group, so that clipping can be controlled. Replacing the scroller block with the following code will do the trick.

<!--- The Scroller component to add scroll bars to the list. -->
<s:Scroller left="0" top="0" right="0" bottom="0" id="scroller" >
 
    <s:Group left="0" top="0" right="0" bottom="10">
        <s:DataGroup id="dataGroup"
                     left="22" top="26" right="22" bottom="26"
                     itemRenderer="spark.skins.spark.DefaultItemRenderer">
        </s:DataGroup>
    </s:Group>
 
</s:Scroller>

Final Result

The demo app contains the three different lists to compare the effect of the skin and rederer.
Looking at the final result, we got a slightly modified skin for the list and the item renderer. Most of the effort went on skinning – not bad, considering the list itself and the effect are used almost out of the box.

UPDATE:  The new Flex 4.5 Hero has this feature built in, as described in this recent post.

Well, the old Button class used to have an icon style (it was called skin or upSkin) so I decided to bring back the icon style so I’d be able to reuse the same skin and pass a different icon to each instance.

Usage:

The IconButton class:

package cs
{
        // icon style
	[Style(name="icon",type="*")]
 
	public class IconButton extends Button
	{
	}
}

Now the generic icon button skin (IconBtnSkin):

	<fx:Metadata>
		[HostComponent("cc.IconButton")] 
	</fx:Metadata>
 
	<s:states> 
		<s:State name="up" /> 
		<s:State name="over" /> 
		<s:State name="down" /> 
		<s:State name="disabled" /> 
	</s:states>  
 
	<!-- icon -->
	<s:BitmapImage source="{hostComponent.getStyle('icon')}" />

To use, just use the skin with the IconButton class, and set the icon style to the asset of choice:

	<cc:IconButton skin="IconBtnSkin" icon="myAsset">

You can also couple the skin with the IconButton class explicitly by setting the skinClass from the constructor:

	setStyle("skinClass", "skins.IconBtnSkin");

Easy tab navigation

For anyone who used SuperTabBar from flexlib, the functionality is more-or-less the same. However, while the SuperTab is based on mx components, mine is derived from spark TabBar. To make it light and compact, I did not implement dragging of tabs, and focused on easy to use ‘tab close’ functionality.

Features:

• Adjustable gap through ‘gap’ style
• Easy access to Tab skin from the TabBar via the ‘tabSkin’ style
• Global and individual close policy
• Default skins are supplied, used if no other skin is set

Usage:

	<plus:TabBarPlus id="bar" gap="2" cornerRadius="4"
			styleName="barStyle"  closePolicy="always"
			dataProvider="{mainStack}"/>

Let me know about any problems or bugs.