Flex实例【Shangle.net】解析【三】

重点介绍views:ControlBar

组件分析：

一、

<fx:Metadata>
	[Event(name="navChanged",type="net.shangle.events.NavEvent")]
</fx:Metadata>

相当于注册一个新的自定义事件，事件类型查找到包net.shangle.events下的NavEvent。

二、

<fx:Script>
	<![CDATA[
	//导入包略
        //变量声明略
        private function init() : void
        {
		getMusicList();
	}

	private function createToolTips(event : ToolTipEvent) : void
	{
		//创建按钮ToolTip并设置过渡效果
	}

	private function mouseMoveHandler(event : MouseEvent) : void
	{
		//鼠标移动时ToolTip的坐标
	}

	private function positionToolTips(event : ToolTipEvent) : void
	{
		//ToolTip显示时的定位
	}

	private function getMusicList() : void
	{
		//设置音乐播放列表并播放
	}

	private function randomMusic() : String
	{
		//随机播放音乐列表中的某条
	}

	private function musicToggle() : void
	{
		//音乐的关闭和开启
	}

	private function playMusic(event : Event) : void
	{
		//音乐播放事件实现
	}

	private function clickHandler(event : MouseEvent,value : String) : void
	{
		//按钮的CLICK事件响应，根据传进来的value进行不同的处理
                //以下两行代码比较重要，根据前面fx:MetaData的事件注册来生成新的事件，并做了dispatchEvent广播该事件，用来在Home.mxml中响应
                //Home.mxml的对应代码是：private function navChangedHandler(event : NavEvent) : void
                var e : NavEvent = new NavEvent("navChanged",value);
		dispatchEvent(e);
	}

	private function screenToggle() : void
	{
		//根据当前屏幕状态来设定新的屏幕状态
	}

	private function qMe() : void
	{
		//发起QQ对话
	}

	private function screenHandler(event : FullScreenEvent) : void
	{
		//全屏按钮相关
	}

	private function mouseDownOutsideHandler(event : MouseEvent) : void
	{
		//鼠标点在登陆弹窗的外部并且不在登陆按钮上则渐隐
	}

	private function closePopUp() : void
	{
		//关闭登陆窗
	}

	private function closePopUpHandler(event : Event) : void
	{
		//登陆弹窗渐隐，该函数事件在views:LoginDialog中注册声明
	}
	]]>
</fx:Script>

三、

<fx:Declarations>
	<!-- 将非可视元素（例如服务、值对象）放在此处 -->
	<s:Fade id="fadeIn" alphaFrom="0" alphaTo="1" duration="200"/>
	<s:Fade id="fadeOut" alphaFrom="1" alphaTo="0" duration="200"/>
	<s:Parallel id="loginFadeIn" target="{loginDialog}">
		<s:Fade alphaFrom="0" alphaTo="1" duration="1000"/>
		<s:Move yFrom="0" yTo="80" duration="1000"/>
	</s:Parallel>
	<s:Parallel id="loginFadeOut" target="{loginDialog}">
		<s:Fade alphaFrom="1" alphaTo="0" duration="1000"/>
		<s:Move yFrom="80" yTo="0" duration="1000"/>
	</s:Parallel>
</fx:Declarations>

主要设置一些过渡特效，其中s:Parallel主要设定效果组合。通过id、target等来与下面的组件视图来进行关联

四、主要是一些常规的组件，如图像（LOGO）、按钮（日记、相册、视频...）等，这里关注两个组件s:ToggleButton和s:PopUpAnchor，在官网中的两个组件的说明分别如下：

ToggleButton 组件定义切换按钮。单击该按钮会在弹起状态和按下状态之间进行切换【详细】

PopUpAnchor 组件用于定位布局中的弹出控件或下拉控件【详细】

其中在s:PopUpAnchor组件中加载了一个views:LoginDialog（见views包中的LoginDialog.mxml），该组件视图就是登陆窗口。

【待续……】