flex day 8 视图状态

首先是一个运算符。？：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="古池や&#13;蛙飛びこむ&#13;水の音"/>
		<s:Label text="--Matsuo Bashō&#13;&#13;
				 The ancient pond&#13;A frog leaps in&#13;The sound of the water.
				 &#13;--Donald Keene"/>
	</components:HPanel>
</s:Application>