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。

【待续……】

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值