Flex4 使用状态来控制组件

本文将使用本博客之前的文章中的自定义组件Panel

关于关于一些标签请参见Flex4语言说明文档。

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
  xmlns:s="library://ns.adobe.com/flex/spark"
  xmlns:mx="library://ns.adobe.com/flex/mx"
  xmlns:comp="components.*" width="100%" height="100%">
<fx:Script><![CDATA[
  //状态触发函数，使用三目运算符来进行状态切换
  private function toggleState(newState:String):void {
	//mx.core.UIComponent.currentState 组件的当前视图状态。将其设置为 "" 或 null 可将组件重置回其基本状态。
    currentState = (currentState == newState) ? '' : newState;
  }
]]></fx:Script>
  <s:layout><s:BasicLayout/></s:layout>
  <s:states>
    <s:State name="default"/> <!-- 设置一个默认状态，自定义状态 -->
    <s:State name="state1"
      stateGroups="[nostate2,nostate3]"/> <!-- 将state1 定义成 不显示其他两种状态 -->
    <s:State name="state2"
      stateGroups="[nostate1,nostate3]"/>
    <s:State name="state3"
      stateGroups="[nostate1,nostate2]"/>
  </s:states>
	<!-- 如下自定义组件中，定义了当某一状态时组件的变化-->
  <comp:TestPanel id="state1Panel" title="新闻分类"
    left="10" top="10" width="200" right.state1="10"
    height="100" bottom.state1="10" excludeFrom="nostate1"
    headerClick="toggleState('state1')">
    <s:Label text="体育新闻" fontSize="20"
      fontSize.state1="140"/>
  </comp:TestPanel>
  <comp:TestPanel id="state2Panel" title="新闻来源"
    left="10" bottom="10" top="115" top.state2="10"
    width="200" right.state2="10" excludeFrom="nostate2"
    headerClick="toggleState('state2')">
    <s:Label width="100%" height="100%" fontStyle="italic"
       text="http://cs.sports.163.com/match/report/3941.html"/>
  </comp:TestPanel>
  <comp:TestPanel id="state3Panel" title="新闻内容"
    excludeFrom="nostate3" top="10"
    left="220" left.state3="10" right="10" bottom="10"
    headerClick="toggleState('state3')">
    <s:Label fontSize="50" fontSize.state3="70"
      text="亚冠-埃神穆里奇各2球郜林破门 恒大客场5-1樱花"/>
    <s:TextArea width="100%" height="100%" editable="false"
				text="5月6日18点，2014赛季亚冠联赛1/8决赛首回合的一场焦点大战，在大阪长居陆上竞技场进行，广州恒大客场挑战大阪樱花。经过90分钟的激战，恒大5-1获胜，进入亚冠8强几乎没有悬念，同时这也是恒大本赛季亚冠客场首胜。第22分钟，穆里奇接迪亚曼蒂妙传打破僵局；第30分钟，长谷川将比分追平；第34分钟，埃尔克森将自己创造的点球罚入；第37分钟，迪亚曼蒂任意球助攻埃尔克森梅开二度；第78分钟，替补出场的郜林接穆里奇传中破门；第84分钟，郜林投桃报李助攻穆里奇梅开二度。
				在小组赛中，广州恒大3胜1平2负积10分，以G组头名晋级16强，大阪樱花2胜2平2负积8分，力压山东鲁能以E组第2闯入1/8决赛。首发与小组赛末轮相比，大阪樱花的藤本康太和杉本健勇轮换山下达也和新井场彻，南野拓实解禁进入替补名单，广州恒大的郑智和迪亚曼蒂伤愈顶替荣昊和郜林，解禁复出的廖力生轮换黄博文。
				
				比赛开始后，双方的攻防转换速度较慢。开场4分钟，赵旭日25米外右脚劲射，门将金镇铉奋勇将球扑出。1分钟后，廖力生左路角球传中，金镇铉直接将球摘得。第6分钟，丸桥祐介前场左路任意球斜传禁区，埃尔克森回防将球破坏。1分钟后，卡查尔点球点左侧左脚垫射偏出右侧立柱。第11分钟，迪亚曼蒂右路角球传中，金镇铉直接将球摘得。随后，弗兰大禁区右角处右脚抡射高出门楣。3分钟后，迪亚曼蒂和廖力生主罚的角球均未形成射门。
				
				第17分钟，弗兰前场右路突破，金英权犯规领受本赛季亚冠第2张黄牌。第22分钟，郑智中场头球摆渡，穆里奇前场中路与迪亚曼蒂做出撞墙式二过一配合，巴西猎豹禁区中路单刀面对门将金镇铉，右脚轻松推射球门左下角得分，上赛季亚冠最佳射手终于打破进球荒。广州恒大率先取得领先，1-0。2分钟后，迪亚曼蒂中圈超远距离吊门，金镇铉轻松将球拿到。第26分钟，山口萤前场右路右脚推射被金英权挡出底线。第30分钟，丸桥祐介前场左路似传似射偏出右侧立柱。随后，长谷川前场中路卸球转移，弗兰前场右路低传门前，长谷川禁区中路右脚脚弓推射，球滚入球门左下死角。大阪樱花将比分扳平，1-1。
				
				第34分钟，埃尔克森禁区左侧被染谷悠太铲倒，后者吃到黄牌，广州恒大获得点球良机。埃尔克森亲自操刀主罚点球命中，广州恒大2-1领先。第37分钟，迪亚曼蒂前场左路任意球斜传禁区，埃尔克森点球点左侧无人盯防的情况下头球破门。巴西前锋梅开二度，打入本届亚冠第5球，广州恒大3-1领先。1分钟后，弗兰35米外任意球射门高出横梁。第39分钟，廖力生弧顶前沿右脚低射，球擦着左侧立柱稍稍偏出。2分钟后，大阪樱花左路战术角球毫无威胁。经过1分钟的伤停补时，广州恒大上半场3-1领先大阪樱花。
				
				中场休息过后，大阪樱花连换两人，酒本宪幸和南野拓实替下染谷悠太和藤本康太。第48分钟，南野拓实弧顶左侧右脚劲射被封堵。4分钟后，弗兰开出左路战术角球后，在前场左路右脚弧线球射门被曾诚封出底线。第56分钟，穆里奇禁区右侧穿裆过人后小角度劲射，金镇铉将险情化解。1分钟后，弗兰弧顶前沿右脚弧线球射门险些破门。第58分钟，迪亚曼蒂点球点右侧左脚倒地扫射没有打上力量。1分钟后，柿谷曜一朗前场右路远射打得过正。第60分钟，郑智后场中路踢倒扇原贵宏，拿到本届亚冠第2张黄牌，弗兰35米外任意球重炮轰门偏出左侧立柱。
				
				第61分钟，迪亚曼蒂前场右路左脚突施冷箭打得过正。2分钟后，大阪樱花最后一次换人，杉本健勇替下扇原贵宏。第64分钟，埃尔克森弧顶前沿劲射被山下达也封出底线。2分钟后，埃尔克森在贴身防守下于禁区右侧劲射打偏。第67分钟，迪亚曼蒂禁区中路左脚抢射被挡出底线。5分钟后，迪亚曼蒂前场突破被卡查尔放倒，后者拿到本届亚冠第3张黄牌，迪亚曼蒂弧顶左侧任意球射门击中人墙。第73分钟，广州恒大首次换人，郜林替下埃尔克森。
				
				第76分钟，广州恒大再次换人，黄博文替下赵旭日。第78分钟，迪亚曼蒂中圈左侧送出直传，穆里奇禁区左路在两名防守队员的盯防下横传中路，郜林后点包抄右脚推射，球从门将金镇铉双腿之间窜入球门。郜林打入本届亚冠第3球，广州恒大4-1领先。4分钟后，南野拓实弧顶左侧右脚弧线球射远角稍稍偏出。第83分钟，穆里奇前场右路吊射高出横梁。第84分钟，郜林禁区左侧突破后传中，穆里奇门前7米处包抄鱼跃冲顶，球击中横梁下沿弹入球门。巴西猎豹梅开二度，广州恒大5-1领先。1分钟后，广州恒大最后一次换人，荣昊替下身撞立柱受伤的穆里奇。第87分钟，荣昊被黄牌警告。经过4分钟的伤停补时，最终广州恒大客场5-1大胜大阪樱花。
				
				大阪樱花出场名单(343)：21-金镇铉；4-藤本康太(46’13-南野拓实)、3-染谷悠太(46’17-酒本宪幸)、23-山下达也；14-丸桥祐介、30-卡查尔、2-扇原贵宏(63’20-杉本健勇)、6-山口萤；5-长谷川、10-弗兰、8-柿谷曜一朗
				
				未上场替补：1-武田博行、7-新井场彻、11-楠神顺平、18-尼科尔斯
				
				广州恒大出场名单(433)：19-曾诚；32-孙祥、28-金英权、6-冯潇霆、5-张琳芃；10-郑智、37-赵旭日(76’16-黄博文)、2-廖力生；11-穆里奇(85’33-荣昊)、9-埃尔克森(73’29-郜林)、23-迪亚曼蒂
				
				未上场替补：3-梅方、7-冯俊彦、22-李帅、24-刘海东"/>
  </comp:TestPanel>
</s:Application>