package com.hnisi.screen.common
{
import flash.events.Event;
import flash.events.MouseEvent;
import spark.components.supportClasses.SkinnableComponent;
[SkinState("expand")]
[SkinState("collapse")]
[Event(name="menuChange", type="flash.events.Event")]
[Event(name="autoPlayedChange", type="flash.events.Event")]
public class CollapseMenu extends SkinnableComponent
{
private var _isCollpased:Boolean = false;
private var _index:int = -1;
private var _autoPlayed:Boolean;
public function CollapseMenu()
{
super();
this.doubleClickEnabled = true;
// addEventListener(MouseEvent.DOUBLE_CLICK,onDoubleClick);
addEventListener(MouseEvent.ROLL_OVER,onDoubleClick);
addEventListener(MouseEvent.ROLL_OUT,onDoubleClick);
}
[Bindable(event="autoPlayedChange")]
public function get autoPlayed():Boolean
{
return _autoPlayed;
}
public function set autoPlayed(value:Boolean):void
{
if( _autoPlayed !== value)
{
_autoPlayed = value;
dispatchEvent(new Event("autoPlayedChange"));
}
}
[Bindable]
public function get index():int
{
return _index;
}
public function set index(value:int):void
{
_index = value;
dispatchEvent(new Event("menuChange"));
}
protected function onDoubleClick(event:MouseEvent):void
{
isCollpased = !isCollpased;
}
[Bindable]
public function get isCollpased():Boolean
{
return _isCollpased;
}
public function set isCollpased(value:Boolean):void
{
_isCollpased = value;
invalidateSkinState();
}
override protected function getCurrentSkinState():String{
if(isCollpased){
return "collapse";
}else{
return "expand";
}
}
}
}
皮肤：
<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<!-- host component -->
<fx:Metadata>
[HostComponent("com.hnisi.screen.common.CollapseMenu")]
</fx:Metadata>
<fx:Declarations>
<mx:Sequence id="collapseSequence">
<!--<s:Fade alphaTo="0" duration="150" target="{graphGroup}"/>-->
<s:Resize duration="150" target="{base}"/>
</mx:Sequence>
<mx:Sequence id="expandSequence">
<s:Resize duration="150" target="{base}"/>
<!--<s:Fade alphaTo="1" duration="150" target="{graphGroup}"/>-->
</mx:Sequence>
</fx:Declarations>
<s:transitions>
<mx:Transition effect="{collapseSequence}" fromState="*" toState="collapse"/>
<mx:Transition effect="{expandSequence}" fromState="collapse" toState="*"/>
</s:transitions>
<!-- states -->
<s:states>
<s:State name="expand" />
<s:State name="collapse" />
</s:states>
<s:Group id="base" top="0" bottom="0" left="0" right="0">
<s:Group id="expandGroup" top="0" bottom="0" left="0" right="0" includeIn="expand">
<s:Rect top="0" bottom="0" left="0" right="0" topLeftRadiusX="4" topLeftRadiusY="4"
bottomLeftRadiusX="4" bottomLeftRadiusY="4">
<s:fill>
<s:LinearGradient rotation="90">
<s:GradientEntry color="#007EFF"/>
<s:GradientEntry color="#00BAFF"/>
</s:LinearGradient>
</s:fill>
</s:Rect>
<s:Label text="自动播放" horizontalCenter="0" color="0xffffff"/>
<s:Image source="resource/images/btn_play.png" visible="{hostComponent.autoPlayed}"
horizontalCenter="0" click="{hostComponent.autoPlayed = !hostComponent.autoPlayed}"/>
<s:Image source="resource/images/btn_stop.png" visible="{!hostComponent.autoPlayed}"
horizontalCenter="0" click="{hostComponent.autoPlayed = !hostComponent.autoPlayed}"/>
<s:VGroup top="50" bottom="20" horizontalCenter="0">
<s:HGroup verticalAlign="middle" click="{hostComponent.index=0;}" buttonMode="true">
<s:Image width="20" height="20" source="resource/images/icon_menu01.png"/>
<s:Label text="公司总览">
</s:Label>
</s:HGroup>
<s:VGroup gap="0" width="100%">
<s:Line width="100%">
<s:stroke>
<s:SolidColorStroke color="gray"/>
</s:stroke>
</s:Line>
<s:Line width="100%">
<s:stroke>
<s:SolidColorStroke color="white"/>
</s:stroke>
</s:Line>
</s:VGroup>
<s:HGroup verticalAlign="middle" click="{hostComponent.index=1;}" buttonMode="true">
<s:Image width="20" height="20" source="resource/images/icon_menu05.png"/>
<s:Label text="网络拓扑">
</s:Label>
</s:HGroup>
<s:VGroup gap="0" width="100%">
<s:Line width="100%">
<s:stroke>
<s:SolidColorStroke color="gray"/>
</s:stroke>
</s:Line>
<s:Line width="100%">
<s:stroke>
<s:SolidColorStroke color="white"/>
</s:stroke>
</s:Line>
</s:VGroup>
<s:HGroup verticalAlign="middle" click="{hostComponent.index=2;}" buttonMode="true">
<s:Image width="20" height="20" source="resource/images/icon_menu02.png"/>
<s:Label text="ITM业务系统">
</s:Label>
</s:HGroup>
<s:VGroup gap="0" width="100%">
<s:Line width="100%">
<s:stroke>
<s:SolidColorStroke color="gray"/>
</s:stroke>
</s:Line>
<s:Line width="100%">
<s:stroke>
<s:SolidColorStroke color="white"/>
</s:stroke>
</s:Line>
</s:VGroup>
<s:HGroup verticalAlign="middle" click="{hostComponent.index=3;}" buttonMode="true">
<s:Image width="20" height="20" source="resource/images/icon_menu03.png"/>
<s:Label text="OSS统计视图">
</s:Label>
</s:HGroup>
<s:VGroup gap="0" width="100%">
<s:Line width="100%">
<s:stroke>
<s:SolidColorStroke color="gray"/>
</s:stroke>
</s:Line>
<s:Line width="100%">
<s:stroke>
<s:SolidColorStroke color="white"/>
</s:stroke>
</s:Line>
</s:VGroup>
<s:HGroup verticalAlign="middle" click="{hostComponent.index=4;}" buttonMode="true">
<s:Image width="20" height="20" source="resource/images/icon_menu04.png"/>
<s:Label text="ITSM3.1统计视图">
</s:Label>
</s:HGroup>
<s:VGroup gap="0" width="100%">
<s:Line width="100%">
<s:stroke>
<s:SolidColorStroke color="gray"/>
</s:stroke>
</s:Line>
<s:Line width="100%">
<s:stroke>
<s:SolidColorStroke color="white"/>
</s:stroke>
</s:Line>
</s:VGroup>
</s:VGroup>
</s:Group>
<s:Group id="collapseGroup" top="0" bottom="0" left="0" right="0" includeIn="collapse">
<s:Rect top="0" bottom="0" left="0" right="0" topLeftRadiusX="4" topLeftRadiusY="4"
bottomLeftRadiusX="4" bottomLeftRadiusY="4">
<s:fill>
<s:LinearGradient rotation="0">
<s:GradientEntry color="#00eaff"/>
<s:GradientEntry color="#0091ff"/>
</s:LinearGradient>
</s:fill>
</s:Rect>
<s:VGroup paddingBottom="24" paddingTop="24" paddingLeft="5" paddingRight="5" fontSize="12" color="white">
<s:Label text="导"/>
<s:Label text="航"/>
<s:Label text="菜"/>
<s:Label text="单"/>
<s:filters>
<s:DropShadowFilter color="0" blurX="2" blurY="2" distance="1" angle="0"/>
</s:filters>
</s:VGroup>
<!--<s:Label text="导航菜单" paddingBottom="24" paddingTop="24" paddingLeft="5" paddingRight="5" fontSize="14" rotation="-90" maintainProjectionCenter="true">
</s:Label>-->
</s:Group>
</s:Group>
</s:Skin>
