首先是一个运算符。?:conditional
用法:expression1?expression2:expression3
计算expression1,如果值为true,则结果为expression2,如果值为false,则结果为expression3
(currentState == newState) ? ' ':newState
这里是一个状态转换的判断条件。
stateGroup,当组件定义的状态比较多的时候,我们可能希望将针对某几种状态做统一的设置,这个时候可以用到状态组。一个状态组可以包含多个状态,一个状态可以隶属于多个状态组。excludeFrom排除在状态组外,还有includeIn包含在某一个状态组。
以下是flex一学就会的代码,值得学习
<?xml version="1.0" encoding="utf-8"?> <s:Panel xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" creationComplete="onCreationComplete()"> <fx:Metadata> [Event(name="headerClick")] </fx:Metadata> <fx:Script> <![CDATA[ import spark.skins.spark.PanelSkin; private function onCreationComplete():void{ var panelSkin:PanelSkin = skin as PanelSkin; if (panelSkin == null) return; panelSkin.addEventListener(MouseEvent.CLICK,onHeaderClick); } private function onHeaderClick(event:MouseEvent):void{ if (event.currentTarget is PanelSkin){ var ps:PanelSkin = PanelSkin(event.currentTarget); if(event.localY<30){ dispatchEvent(new Event("headerClick")); } } } ]]> </fx:Script> <s:layout> <s:VerticalLayout paddingLeft="10" paddingTop="10" paddingBottom="10" paddingRight="10"/> </s:layout> </s:Panel>
主程序
<?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" minWidth="955" minHeight="600" xmlns:components="components.*"> <fx:Declarations> <!-- 将非可视元素(例如服务、值对象)放在此处 --> </fx:Declarations> <fx:Script> <![CDATA[ private function toggleState(newState:String):void{ currentState = (currentState == newState) ? '':newState; } ]]> </fx:Script> <s:layout> <s:BasicLayout/> </s:layout> <s:states> <s:State name="default"/> <s:State name="stateOne" stateGroups="[noStateTwo,noStateThree]"/> <s:State name="stateTwo" stateGroups="[noStateOne,noStateThree]"/> <s:State name="stateThree" stateGroups="[noStateOne,noStateTwo]"/> </s:states> <!--excludeFrom排除在状态组外,还有includeIn包含在某一个状态组。 --> <components:HPanel id="stateOnePanel" title="State One Panel" left="10" top="10" width="200" right.stateOne="10" height="100" bottom.stateOne="10" excludeFrom="noStateOne" headerClick="toggleState('stateOne')"> <s:Label text="松尾 芭蕉" fontSize="20" fontSize.stateOne="140"/> </components:HPanel> <components:HPanel id="stateTwoPanel" title="State Two Panel" left="10" bottom="10" top="115" top.stateTwo="10" width="200" right.stateTwo="10" excludeFrom="noStateTwo" headerClick="toggleState('stateTwo')"> <s:Label width="100%" height="100%" fontStyle="italic" text="(I am trusting that the following pages http://en.wikipedia.org/wiki/Matsuo_Bash%C5%8D and http://en.wikisource.org/wiki/Frog_Poem have the Kanji of Matsuo Bashō's name and famous poem correct.)"/> </components:HPanel> <components:HPanel id="stateThreePanel" title="State Three Panel" excludeFrom="noStateThree" top="10" left="220" left.stateThree="10" right="10" bottom="10" headerClick="toggleState('stateThree')"> <s:Label fontSize="50" fontSize.stateThree="70" text="古池や 蛙飛びこむ 水の音"/> <s:Label text="--Matsuo Bashō The ancient pond A frog leaps in The sound of the water. --Donald Keene"/> </components:HPanel> </s:Application>