Hello,Flex4之Panel动态切换效果

 

双击Panel的标题可以实现最大化: 

 

HPanel.mxml: 
<?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 flash.events.Event; 

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> 

FlexTest.mxml 

<?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 
{ 
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> 
<comp: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"/> 
</comp:HPanel> 

<comp: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.)"/> 
</comp:HPanel> 
<comp:HPanel id="stateThreePanel" title="State Three Pane" 
  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"/> 
</comp:HPanel> 
</s:Application>