Adobe Flex迷你教程 — 实现类似新浪微博评论消息容器

       今晚刷微博的时候，发现新浪微博的评论容器挺好玩的，上面有个小三角，用来指示这条评论是上面那条微博的。

正好，在做网络监控的时候，点击一个物理机，底下也可以出现像新浪微博评论这样的容器，用来装这个物理机下面所有

的虚拟机。家里停电了，就来朋友公司简单的写了个demo，欢迎各位朋友给出不同意见。

运行后效果如下：

 主程序：  myApp.mxml

<?xml version="1.0" encoding="utf-8"?>
<!-- 
* Created with IntelliJ IDEA.
* User: DongYang
* Date: 13-3-23
* Time: 下午9:45
* Progress every day a little more -->
<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" 
               minWidth="955" minHeight="600" xmlns:item="item.*">

<item:MySkinnable width="242" height="131" x="100" y="100">
    <s:Label x="31" y="51" width="214" height="34" fontSize="32" fontStyle="italic" fontWeight="bold"
             text="I Love You!"/>
</item:MySkinnable>
</s:Application>

容器：item/MySkinnable.as

/**
 * Created with IntelliJ IDEA.
 * User: DongYang
 * Date: 13-3-23
 * Time: 下午9:41
 * Progress every day a little more.
 */
package item
{
    import spark.components.SkinnableContainer;
    
    public class MySkinnable extends SkinnableContainer
    {
        public function MySkinnable()
        {
            super();
        }
        
        override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
        {
            this.graphics.clear();
            this.graphics.lineStyle(2,0xeff8fe,1);
            this.graphics.beginFill(0xADFF2F,1);
            this.graphics.moveTo(0,0);
            this.graphics.lineTo(20,0);
            this.graphics.lineTo(28,-8);
            this.graphics.lineTo(38,0);
            this.graphics.lineTo(width,0);
            this.graphics.lineTo(width,height);
            this.graphics.lineTo(0,height);
            this.graphics.lineTo(0,0);
            this.graphics.endFill();
            super.updateDisplayList(unscaledWidth, unscaledHeight);
        }
        
        
    }
}