flex_tree扩展_时间轴

最初是要做一个时间轴的效果，在网上找到了一个js的，效果很不错，原界面是如下


仿照这个效果写出了下面的效果

由于展开的效果很像树形展开效果，在tree基础上修改也简单，所以修改了tree，自定义了呈示器，由于有引用字体，所以编译的文件很大，
可自行去掉字体的引用。 下面是tree用到的呈示器

<?xml version="1.0" encoding="utf-8"?><s:MXTreeItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"           xmlns:s="library://ns.adobe.com/flex/spark"           xmlns:mx="library://ns.adobe.com/flex/mx"           implements="mx.controls.listClasses.IDropInListItemRenderer"           creationComplete="onCreationComplete()"           dataChange="updateDisplay()">    <fx:Style source="style/style.css" />    <s:states>        <s:State name="top" />        <s:State name="month" />        <s:State name="year" />        <s:State name="contact"  />    </s:states>    <s:HGroup  width="100%" height="100%" paddingLeft="20" includeIn="top" >        <s:HGroup  width="90"  height="60" verticalAlign="middle" >            <mx:LinkButton id="topName"  fontSize="24"                             color="0xffbc00" fontFamily="Lantingh"                           click="disclosureMouseDownHandler(event)"/>                              <mx:Image id="disclosureTopIcon" source="{disclosureOpenIcon}" />        </s:HGroup>         <s:VGroup width="80" height="100%" horizontalAlign="center" >            <mx:Image source="{topIcon}" />            <s:Line height="100%" x="0" y="-1"  >                <s:stroke>                    <s:SolidColorStroke color="0xffbc00" weight="3"/>                </s:stroke>            </s:Line>        </s:VGroup>        <s:HGroup  width="100%" height="100%" verticalAlign="middle">            <s:Label text=" ### 日 志" color="0xffbc00" fontSize="24"/>        </s:HGroup >    </s:HGroup >    <s:HGroup  width="100%" height="100%" paddingLeft="20" includeIn="year" >        <s:HGroup  width="90"  height="60" verticalAlign="middle" >            <mx:LinkButton id="yearName"  fontSize="24"                             color="0xffbc00" fontFamily="Lantingh"                           click="disclosureMouseDownHandler(event)"/>                              <mx:Image id="disclosureIcon" source="{disclosureOpenIcon}" />        </s:HGroup>         <s:VGroup width="80" height="100%" horizontalAlign="center" >            <!--<mx:Image source="{defaultLeafIcon}" />-->            <s:Line height="100%" x="0" y="-1"  >                <s:stroke>                    <s:SolidColorStroke color="0xffbc00" weight="3"/>                </s:stroke>            </s:Line>        </s:VGroup>        <s:HGroup  width="100%" height="100%" verticalAlign="middle">        </s:HGroup >    </s:HGroup >    <s:HGroup  width="100%" height="100%" paddingLeft="20" includeIn="month" >        <s:HGroup  width="90"  height="30" verticalAlign="middle" >            <mx:LinkButton id="monthName"  fontSize="20"                             color="0x58a6fb" fontFamily="Lantingh"                           click="disclosureMouseDownHandler(event)"/>                              <mx:Image id="disclosureMonthIcon" source="{disclosureOpenMonthIcon}" />        </s:HGroup>         <s:VGroup width="80" height="100%" horizontalAlign="center" >                   <s:Line height="100%" x="0" y="-1"  >                <s:stroke>                    <s:SolidColorStroke color="0xffbc00" weight="3"/>                </s:stroke>            </s:Line>        </s:VGroup>        <s:HGroup  width="100%" height="100%" verticalAlign="middle">        </s:HGroup >    </s:HGroup >    <s:HGroup id="contactHg" width="100%" height="100%" paddingLeft="20" includeIn="contact">        <s:HGroup width="90" height="30" verticalAlign="middle" horizontalAlign="right" >            <s:Label id="dateLab" fontSize="18"/>        </s:HGroup>                         <s:VGroup width="80" height="100%" horizontalAlign="center" >            <mx:Image source="{defaultLeafIcon}" />            <s:Line height="100%" x="0" y="-1"  >                <s:stroke>                    <s:SolidColorStroke color="0xffbc00" weight="3"/>                </s:stroke>            </s:Line>        </s:VGroup>        <s:VGroup width="100%" height="100%" paddingTop="5">            <s:Label id="titleLab" fontSize="18" color="0x63d029"/>            <s:Label id="contents" width="460" fontSize="16" height="100%" />        </s:VGroup>                     </s:HGroup>    <fx:Declarations>        <!-- 将非可视元素（例如服务、值对象）放在此处 -->    </fx:Declarations>    <fx:Script>        <![CDATA[            import mx.controls.Tree;            import mx.controls.listClasses.BaseListData;            import mx.controls.listClasses.IDropInListItemRenderer;            import mx.controls.treeClasses.TreeListData;            import mx.events.TreeEvent;            import mx.core.mx_internal;            use namespace mx_internal;             //树形顶部的图片            [Bindable]             [Embed(source="assets/images/timerImg/history.png")]             public var topIcon:Class;            //树形展开时的图片            [Bindable]             [Embed(source="assets/images/timerImg/triangle-down.png")]             public var disclosureOpenIcon:Class;             //月份            [Bindable]             [Embed(source="assets/images/timerImg/triangle-bluedown.png")]             public var disclosureOpenMonthIcon:Class;             //子项用的图片——叶子节点            [Bindable]             [Embed(source="assets/images/timerImg/circle1.png")]             public var defaultLeafIcon:Class;             //树形关闭（收起）时的图片            [Bindable]             [Embed(source="assets/images/timerImg/triangle-right.png")]             public var disclosureClosedIcon:Class;             //树形关闭（收起）时的图片            [Bindable]             [Embed(source="assets/images/timerImg/triangle-blueright.png")]             public var disclosureClosedMonthIcon:Class;             private var _listData:TreeListData;             private var listOwner:Tree;             override public function get listData():BaseListData            {                return _listData;            }            override public function set listData(value:BaseListData):void            {                if(value){                    _listData=value as TreeListData;                     listOwner=Tree(_listData.owner);                }            }            private function onCreationComplete():void             {                 //初始化完成后进行渲染                 updateDisplay();             }             //渲染，如果是第一次创建则通过onCreationComplete方法调用，如果是从缓存中取出的则直接调用             private function updateDisplay():void             {                 //只有具有条目数据并且初始化完成后才允许渲染                 if (!(_listData && initialized)) return;                 if(_listData.hasChildren && _listData.item.@top!=null && _listData.item.@top!=""                     && _listData.item.@top=="1"){                    currentState="top";                     if(disclosureTopIcon && disclosureTopIcon.source!=_listData.disclosureIcon)                     {                         if (_listData.open) {                             disclosureTopIcon.source=disclosureOpenIcon;                         } else {                             disclosureTopIcon.source=disclosureClosedIcon;                         }                     }                     if(topName && topName.label!=_listData.label)                     {                         topName.label=_listData.label;                     }                 }else if(_listData.hasChildren && _listData.item.@top!=null && _listData.item.@top!=""                     && _listData.item.@top=="2"){                    currentState="month";                     if(disclosureMonthIcon && disclosureMonthIcon.source!=_listData.disclosureIcon)                     {                         if (_listData.open) {                             disclosureMonthIcon.source=disclosureOpenMonthIcon;                         } else {                             disclosureMonthIcon.source=disclosureClosedMonthIcon;                         }                     }                     if(monthName && monthName.label!=_listData.label)                     {                         monthName.label=_listData.label;                     }                 }else if (_listData.hasChildren)                 {                     currentState="year";                     if(disclosureIcon && disclosureIcon.source!=_listData.disclosureIcon)                     {                         if (_listData.open) {                             disclosureIcon.source=disclosureOpenIcon;                         } else {                             disclosureIcon.source=disclosureClosedIcon;                         }                     }                     if(yearName && yearName.label!=_listData.label)                     {                         yearName.label=_listData.label;                     }                 }                 else if (!_listData.hasChildren)                 {                     currentState="contact";                     if(dateLab && dateLab.text!=_listData.item.@date)                     {                         dateLab.text=_listData.item.@date;                     }                     if(titleLab && titleLab.text!=_listData.item.@title)                     {                         titleLab.text=_listData.item.@title;                    }                     if(contents && contents.text!=_listData.item.@contents)                     {                         contents.text=_listData.item.@contents;                     }                }             }            private function disclosureMouseDownHandler(event:Event):void             {                 event.stopPropagation();                 if (listOwner.isOpening || !listOwner.enabled) return;                 var open:Boolean=_listData.open;                 _listData.open=!open;                 listOwner.dispatchTreeEvent(TreeEvent.ITEM_OPENING, _listData.item,                      this,                      event,                      !open,                      true,                     true);            }         ]]>    </fx:Script></s:MXTreeItemRenderer>

上述代码运用

<?xml version="1.0" encoding="utf-8"?><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"                pageTitle="时间轴"               width="100%" height="100%"               minWidth="955" minHeight="600">    <s:layout>        <s:HorizontalLayout paddingLeft="200"/>    </s:layout>    <fx:Declarations>        <!-- Place non-visual elements (e.g., services, value objects) here -->    </fx:Declarations>      <fx:Style source="style/style.css" >    </fx:Style>    <fx:Script>        <![CDATA[            import mx.events.FlexEvent;            protected function myTree2_creationCompleteHandler(event:FlexEvent):void            {                var item:XML  = this.myTree2.dataProvider[0];                     this.myTree2.expandChildrenOf(item,true);              }        ]]>    </fx:Script>    <fx:Declarations>        <!-- 将非可视元素（例如服务、值对象）放在此处 -->        <s:XMLListCollection id="treeData">            <fx:XMLList xmlns="">                <group name="2016" top="1">                     <node date="11.24" title="**日志" contents="内容不知道写什么"/>                    <node date="10.24" title="**信息" contents="请确保文件命名总是以字母开头而不是数字。而以特殊字符开头命名的文件，                          一般都有特殊的含义与用处（比如 compass[1] 中的下划线就是用来标记跳过直接编译的文件用的）"/>                    <node date="8.16" title="**信息"                           contents="资源的字母名称必须全为小写，这是因为在某些对大小写字母敏感的操作系统中，                          当文件通过工具压缩混淆后，或者人为修改过后，大小写不同而导致引用文件不同的错误，很难被发现。"/>                    <node date="6.24" title="sss信息" contents="微商城订单成功后，网页将收到新订单通知"/>                    <node name="4月" top="2">                                <node date="4.24" title="##信息" contents="微商城订单成功单通知"/>                        <node date="4.26" title="##信息" contents="不要指定引入资源所带的具体协议"/>                    </node>                </group>                 <group name="2015">                    <node date="11.24" title="##信息" contents="内容不知道写什么"/>                    <node date="10.16" title="**信息" contents="幸运机活动时间延长至三个月等"/>                    <node date="9.24" title="##信息" contents="微商城订单成功后，网页将收到新订单通知"/>                    <node date="6.24" title="##信息" contents="还有一些情况下，需要对文件增加前后缀或特定的扩展名（比如 .min.js, .min.css），                          抑或一串前缀（比如 3fa89b.main.min.css）。这种情况下，建议使用点分隔符来区分这些在文件名中带有清晰意义的元数据。"/>                </group>             </fx:XMLList>        </s:XMLListCollection>    </fx:Declarations>    <mx:Tree id="myTree2" dataProvider="{treeData}" labelField="@name"  styleName="timerInfoTree"             width="100%" x="0"  y="0" height="100%"  borderColor="0xffffff"             itemRenderer="com.itemRenderer.timerInfoTreeItem"  variableRowHeight="true"             creationComplete="myTree2_creationCompleteHandler(event)"/></s:Application>

运行效果

备注：由于引用了字体，所以编译的文件很大，可以删除字体的引用，效果如下：

代码下载地址：flex-时间轴