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

下面首先来分析下ControlBar中的第一个按钮btnDiary

<s:Button id="btnDiary" skinClass="net.shangle.skins.btns.BtnDiarySkin" toolTip="日 记" mouseMove="mouseMoveHandler(event)"
	toolTipCreate="createToolTips(event)" toolTipShow="positionToolTips(event)" click="clickHandler(event,'diary')" buttonMode="true"
	tabFocusEnabled="false"/>

这里主要关注以下内容：

1、skinClass：这个就涉及到自定义外观的问题，在FLEX中一般使用两种方式来定义外观，一种是前面提到的style（类似CSS），一种就是这里的skin。我们找到这个类BtnDiarySkin

<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" 
             xmlns:fb="http://ns.adobe.com/flashbuilder/2009" minWidth="21" minHeight="21" alpha.disabled="0.5">
    
    <!-- host component -->
    <fx:Metadata>
        <![CDATA[ 
        /** 
         * @copy spark.skins.spark.ApplicationSkin#hostComponent
         */
        [HostComponent("spark.components.Button")]
        ]]>
    </fx:Metadata>
    
    <!-- states -->
    <s:states>
        <s:State name="up" />
        <s:State name="over" />
        <s:State name="down" />
        <s:State name="disabled" />
    </s:states>
	
	<s:Rect height="70" width="70"/>
	
	<s:Rect height="70" width="70" includeIn="over">
		<s:fill>
			<s:BitmapFill source="@Embed('net/shangle/assets/btns/btnBg.png')" fillMode="clip"/>
		</s:fill>
	</s:Rect>
	
	<s:Rect horizontalCenter="0" verticalCenter="0" height="50" width="50">
		<s:fill>
			<s:BitmapFill source="@Embed('net/shangle/assets/btns/btnDiary.png')" fillMode="clip"/>
		</s:fill>
	</s:Rect>
	
    
</s:SparkSkin>

??????? 简单的理解就是这个skin参照的是spark.components.Button的基本外观，然后对此再进行一些自定义的修改（PS：在FLEX4.6中利用”新建“>>"mxml外观"的方式可建立外观，其中在新建的窗口中需要设置”主机组件“，例如这里的spark.components.Button）。不过实践之后发现新建的外观里的初始代码很多，看起来挺麻烦的，还是需要查找很多相关资料。

2、四个事件：mouseMove、toolTipCreate、toolTipShow和click

??????? 其中前三个事件查看代码后都是和ToolTip有关，用来建立tooltip，设置tooltip的过渡效果和初始位置以及鼠标跟随坐标。看起来挺好理解的。

??????? click事件是鼠标点击事件，按实现的效果倒推，就是点击该按钮后实现state场景转换到diary。关键的代码就是前一篇解析【三】中第二点的代码区域行号45中有提到：利用已注册的自定义事件navChanged，并dispatch广播出去，然后在HOME中捕获并根据传递的value来控制state场景的改变。

那我们下面就需要来研究下HOME（Home.mxml）中的diary场景

<mx:ModuleLoader id="diary" ready="readyHandler(event)" loading="loadingHandler(event)" progress="progressHandler(event)"
	horizontalCenter="0" verticalCenter="20" url="net/shangle/modules/DiaryModule.swf" includeIn="diary"/>

??????? 当我们利用页面标签下的”源代码“、”设计“两个切换按钮边上的”显示状态“下拉列表切换到diary场景后发现上面的这个mx:ModuleLoader为高亮，其他几个Module为灰色，也就是说diary场景主要靠这个模块来实现。在这个模块组件中，主要的几个事件：ready、loading、progress都是用来做预加载及加载进度相关等内容，暂略。

??????? 我们主要去找到包net/shangle/modules/下的diaryModule.mxml。

【待续……】