下面首先来分析下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
简单的理解就是这个skin参照的是spark.components.Button的基本外观,然后对此再进行一些自定义的修改(PS:在FLEX4.6中利用”新建“>>"mxml外观"的方式可建立外观,其中在新建的窗口中需要设置”主机组件“,例如这里的spark.components.Button)。不过实践之后发现新建的外观里的初始代码很多,看起来挺麻烦的,还是需要查找很多相关资料。<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>
2、四个事件:mouseMove、toolTipCreate、toolTipShow和click
其中前三个事件查看代码后都是和ToolTip有关,用来建立tooltip,设置tooltip的过渡效果和初始位置以及鼠标跟随坐标。看起来挺好理解的。
click事件是鼠标点击事件,按实现的效果倒推,就是点击该按钮后实现state场景转换到diary。关键的代码就是前一篇解析【三】中第二点的代码区域行号45中有提到:利用已注册的自定义事件navChanged,并dispatch广播出去,然后在HOME中捕获并根据传递的value来控制state场景的改变。
那我们下面就需要来研究下HOME(Home.mxml)中的diary场景
当我们利用页面标签下的”源代码“、”设计“两个切换按钮边上的”显示状态“下拉列表切换到diary场景后发现上面的这个mx:ModuleLoader为高亮,其他几个Module为灰色,也就是说diary场景主要靠这个模块来实现。在这个模块组件中,主要的几个事件:ready、loading、progress都是用来做预加载及加载进度相关等内容,暂略。<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"/>
我们主要去找到包net/shangle/modules/下的diaryModule.mxml。
【待续……】
Flex实例【Shangle.net】解析【四】
最新推荐文章于 2015-04-29 20:25:57 发布