前面在研究Flex控件与组件的时候研究了下菜单控件的编写,并小有成果。下面献上自己做的Flex的菜单组件(目前只支持2级,有动态效果,数据源为XML,AS代码)。
1.组件源代码:
package com.components.skin { /** * 导航控件栏,数据绑定为XML。 * 作者:pengyaou * The Application container has the following default characteristics: * * * 特征 * 说明 * * * XML * XML文件或者XML字符串 * * * 列宽度 * 默认150px,允许改变大小 * * * 行高度 * 默认60px,允许改变大小 * * * Default skin class * spark.skins.spark.ApplicationSkin * * **/ import com.components.ArrowSkin; import com.events.MenuNavigationEvent; import flash.events.MouseEvent; import mx.collections.XMLListCollection; import mx.events.EffectEvent; import mx.graphics.SolidColor; import spark.components.Group; import spark.components.Label; import spark.effects.Move; import spark.primitives.Rect; public class MenuNavigation extends Group { private var menuXML:XML; public var itemHeight:Number=60; public var itemWidth:Number=150; private var childCount:Number=0; private var fillColor:uint=0xffffff; private var fontColor:uint=0x212121; private var childMouseColor:uint=0xeb3c0f; private var selectIndex:Number=0; private var mMoveIndex:Number; private var cursorGroup:Group; private var mMove:Move; private var isShowChildren:Boolean=false; private var parentIndex:Number=0; private var childrenGroup:Group=new Group(); public function CreateMenu(aMenuXML:XML):void { menuXML=aMenuXML; var aMenuXMLListCollection:XMLListCollection=new XMLListCollection(menuXML.TITLE); childCount=aMenuXMLListCollection.length; width=childCount * itemWidth; height=itemHeight; for (var i:Number=0; i < childCount; i ) { var mTxt:String=aMenuXMLListCollection[i].TITLENAME; CreateMenuButton(i, mTxt); } CursorComplete(); } private function CreateMenuButton(aIndex:Number, aTile:String):void { var mGroup:Group=new Group(); mGroup.width=itemWidth; mGroup.height=itemHeight; mGroup.name=aIndex.toString(); mGroup.id=aTile; var mRect:Rect=new Rect(); mRect.width=itemWidth; mRect.height=itemHeight; var mSolidColor:SolidColor=new SolidColor(fillColor); mRect.fill=mSolidColor; var mLabel:Label=new Label(); mLabel.text=aTile; mLabel.setStyle("color", fontColor); mLabel.verticalCenter=0; mLabel.horizontalCenter=0; mLabel.setStyle("textAlign", "center"); var mLineRightRect:Rect=new Rect(); mLineRightRect.width=1; mLineRightRect.height=itemHeight; mLineRightRect.right=0; var mLineRSolidColor:SolidColor=new SolidColor(0xebebeb); mLineRightRect.fill=mLineRSolidColor; mGroup.addElement(mRect); mGroup.addElement(mLabel); mGroup.addElement(mLineRightRect); if (aIndex == 0) { var mLineLeftRect:Rect=new Rect(); mLineLeftRect.width=1; mLineLeftRect.height=itemHeight; mLineLeftRect.left=0; mLineLeftRect.fill=mLineRSolidColor; mGroup.addElement(mLineLeftRect); } mGroup.left=aIndex * itemWidth; addElement(mGroup); mGroup.addEventListener(MouseEvent.MOUSE_MOVE, OnMenuMousemMove); mGroup.addEventListener(MouseEvent.ROLL_OUT, OnMenuROLL_OUT); mGroup.addEventListener(MouseEvent.CLICK, OnMenuClick); } private function CreateChildren(aIndex:Number):void { childrenGroup.removeAllElements(); var aMenuXMLListCollection:XMLListCollection=new XMLListCollection(menuXML.TITLE); var childrenList:XMLListCollection=new XMLListCollection(aMenuXMLListCollection[aIndex].CHILD.TITLE); childrenGroup.top=itemHeight; childrenGroup.left=aIndex * itemWidth; for (var i:Number=0; i < childrenList.length; i ) { parentIndex=aIndex; var mChildGroup:Group=new Group(); mChildGroup.height=40; mChildGroup.width=itemWidth; var mRect:Rect=new Rect(); mRect.width=itemWidth; mRect.height=40; var mSolidColor:SolidColor=new SolidColor(fillColor); mRect.fill=mSolidColor; mChildGroup.addElement(mRect); var mLabel:Label=new Label(); mChildGroup.top=i * 40; mLabel.text=childrenList[i].TITLENAME; mLabel.setStyle("color", fontColor); mLabel.verticalCenter=0; mLabel.horizontalCenter=0; mLabel.setStyle("textAlign", "center"); mChildGroup.id=childrenList[i].TITLENAME; mChildGroup.addElement(mLabel); childrenGroup.addElement(mChildGroup); mChildGroup.addEventListener(MouseEvent.MOUSE_MOVE, function(event:MouseEvent):void { var currentGroup:Group=event.currentTarget as Group; var currentRect:Rect=currentGroup.getElementAt(0) as Rect; var mLabel:Label=currentGroup.getElementAt(1) as Label; mLabel.setStyle("color", 0xffffff); var currentSolidColor:SolidColor=new SolidColor(childMouseColor); currentRect.fill=currentSolidColor; }); mChildGroup.addEventListener(MouseEvent.ROLL_OUT, function(event:MouseEvent):void { var currentGroup:Group=event.currentTarget as Group; var currentRect:Rect=currentGroup.getElementAt(0) as Rect; var mLabel:Label=currentGroup.getElementAt(1) as Label; mLabel.setStyle("color", fontColor); var currentSolidColor:SolidColor=new SolidColor(fillColor); currentRect.fill=currentSolidColor; }); mChildGroup.addEventListener(MouseEvent.CLICK, function(event:MouseEvent):void { childrenGroup.removeAllElements(); selectIndex=aIndex; dispatchEvent(new MenuNavigationEvent((event.currentTarget as Group).id)); }); } addElement(childrenGroup); childrenGroup.addEventListener(MouseEvent.ROLL_OUT, childRollOut); } private function childRollOut(event:MouseEvent):void { childrenGroup.removeAllElements(); mMoveCursor(selectIndex); } private function CursorComplete():void { var mGroup:Group=new Group(); mGroup.width=itemWidth; mGroup.height=10; var mRect:Rect=new Rect(); mRect.width=itemWidth; mRect.height=10; var mSolidColor:SolidColor=new SolidColor(0xeb3c0f); mRect.fill=mSolidColor; mRect.left=0; mRect.top=0; mGroup.addElement(mRect); this.addElement(mGroup); cursorGroup=mGroup; } private function mMoveCursor(aIndex:Number):void { if (mMove == null) { mMove=new Move(); } else { mMove.stop(); mMove.removeEventListener(EffectEvent.EFFECT_END, mMoveEnd); } mMoveIndex=aIndex; mMove.target=cursorGroup; mMove.xTo=aIndex * itemWidth > cursorGroup.x ? aIndex * itemWidth 30 : aIndex * itemWidth - 30; mMove.duration=500; mMove.play(); mMove.addEventListener(EffectEvent.EFFECT_END, mMoveEnd); } private function mMoveEnd(event:EffectEvent):void { var buffermMove:Move=new Move(); buffermMove.target=cursorGroup; buffermMove.duration=500; buffermMove.xTo=mMoveIndex * itemWidth; buffermMove.play(); buffermMove.addEventListener(EffectEvent.EFFECT_END, function(event:EffectEvent):void { buffermMove.xTo=mMoveIndex * itemWidth; }); } private function OnMenuClick(event:MouseEvent):void { selectIndex=Number((event.currentTarget as Group).name); dispatchEvent(new MenuNavigationEvent((event.currentTarget as Group).id)); } private function OnMenuMousemMove(event:MouseEvent):void { var mCurrentGroup:Group=event.currentTarget as Group; var mIndex:Number=Number(mCurrentGroup.name); if (mMoveIndex != mIndex) { mMoveCursor(mIndex); } CreateChildren(mIndex); } private function OnMenuROLL_OUT(event:MouseEvent):void { var currentIndex:Number=Number((event.currentTarget as Group).name) if (parentIndex != currentIndex) { if (mMoveIndex != selectIndex) { mMoveCursor(selectIndex); } } } } }
2.组件源数据格式(XML):
private var mMenuTitleXML:XML=首页11班级信息11班级活动11班级动态11课题研究11GIS专题1程序开发专题0其他0留言10聊天室10;
3.组件使用方法:
protected function application1_creationCompleteHandler(event:FlexEvent):void { private var mMenuContainerSkin:MenuNavigation=new MenuNavigation(); mMenuContainerSkin.top=0; mMenuContainerSkin.itemHeight=65; mMenuContainerSkin.left=250; mMenuContainerSkin.CreateMenu(mMenuTitleXML); this.addElementAt(mMenuContainerSkin, numElements); mMenuContainerSkin.addEventListener(MenuNavigationEvent.MENUNAVIGATION_CLICK, function(event:MenuNavigationEvent):void { var name:String=event.name; switch (name) { case "首页": var request:URLRequest=new URLRequest("GIS.html"); navigateToURL(request, "_self"); ; break; case "聊天室": NewUrl("Chat.html"); break } }); }
4.组件效果:
演示地址:http://old.pengyaou.com/Example/flash/Test1/GISInfo.html
彭亚欧个人博客原创文章,转载请注明出处
文章关键词:Flex 组件 控件 Flex菜单控件
文章固定链接:https://www.pengyaou.com/homeart/NDk=.html