Using IMorphable interface

This interface allows to define a morphed behavior of the renderer. In fact, if the item renderer is of type IMorphable its behavior is updated according to it's isMorphDirty and clippingShape properties. Also, we can set others properties to change the behavior of the rendrer, for exemple we can set a zoom ratio and according to it, we show a little rectangle or a rectangle with name or a rectangle with name and image or a rectangle with name, image and description. The following example gives you a better understanding of this interface. It represents the code of a spark item renderer implementing IMorphable:
<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
		 xmlns:s="library://ns.adobe.com/flex/spark"
		 xmlns:mx="library://ns.adobe.com/flex/mx" width="100" height="100"
		 implements="fr.kapit.visualizer.renderers.IMorphable"
		 >
		 <s:states>
        <s:State name="small"/>
        <s:State name="simple"/>
        <s:State name="default"/>
        <s:State name="detailed"/>
    </s:states>
	<fx:Script>
		<![CDATA[
            import fr.kapit.visualizer.renderers.IMorphable;
            private var _ratio:Number;
            private var _isMorphDirty:Boolean;

            public function set isMorphDirty(value:Boolean):void
            {
                if (_isMorphDirty != value)
                {
                    _isMorphDirty = value;
                    _ratio = item.visualizer.ratio;
                    invalidateProperties();
                }
            }

            private var _clippingShape:String;

            public function get clippingShape():String
            {
                return _clippingShape;
            }

            public function set clippingShape(value:String):void
            {
                _clippingShape = value;
            }

            override protected function commitProperties():void
            {
                super.commitProperties();
                if (_isMorphDirty)
                {
                    _isMorphDirty = false;
                    if (_ratio < 0.2 && currentState != "small")
                    {
                        currentState = "small";
                    }
                    else
                    {
                        if (_ratio >= 0.2 && _ratio < 1 && currentState != "simple")
                        {
                            currentState = "simple";
                        }
                        else
                        {
                            if (_ratio >= 1 && _ratio < 2 && currentState != "default")
                            {
                                currentState = "default";
                            }
                            else
                            {
                                if (_ratio >= 2 && currentState != "detailed")
                                {
                                    currentState = "detailed";
                                }
                            }
                        }
                    }
                }
            }
		]]>
    <s:HGroup
        height="100%"
        horizontalCenter="0">
        <s:VGroup
            height="100%">
            <s:Image id="image"
                includeIn="withImage"/>
            <s:Label
                height.simple="100%"
                includeIn="withText"/>
        </s:VGroup>
        <s:Label id="details"
            height="100%"
            includeIn="detailed"/>
    </s:HGroup>
</s:Group>