Flex 4中如何创建特定显示效果Spark Panel的例子

By Minidxer | October 31, 2009

接下来的例子演示了Flex 4中如何通过showEffect和hideEffect，创建特定显示，隐藏效果Spark Panel。

让我们先来看一下Demo（可以点击这里察看源代码）：


下面是完整代码(或点击这里察看)：
下面是main.mxml：

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <s:Application name="Spark_Panel_showEffect_test"
  3.         xmlns:fx="http://ns.adobe.com/mxml/2009"
  4.         xmlns:s="library://ns.adobe.com/flex/spark"
  5.         xmlns:mx="library://ns.adobe.com/flex/halo">
  6.     <s:layout>
  7.         <s:VerticalLayout />
  8.     </s:layout>
  9.  
  10.     <fx:Declarations>
  11.         <s:Parallel id="showEff">
  12.             <s:Rotate3D angleYFrom="-90" angleYTo="0" />
  13.             <s:Fade alphaFrom="0.0" alphaTo="1.0" />
  14.         </s:Parallel>
  15.  
  16.         <s:Parallel id="hideEff">
  17.             <s:Rotate3D angleYFrom="0" angleYTo="-90" />
  18.             <s:Fade alphaFrom="1.0" alphaTo="0.0" />
  19.         </s:Parallel>
  20.     </fx:Declarations>
  21.  
  22.     <mx:ApplicationControlBar width="100%" cornerRadius="0">
  23.         <s:Button id="btn"
  24.                 label="Toggle Panel visibility"
  25.                 click="panel.visible = !panel.visible;" />
  26.     </mx:ApplicationControlBar>
  27.  
  28.     <s:Group width="100%" height="100%">
  29.         <s:Panel id="panel"
  30.                 title="Panel title"
  31.                 showEffect="{showEff}"
  32.                 hideEffect="{hideEff}"
  33.                 horizontalCenter="0" verticalCenter="0">
  34.             <s:layout>
  35.                 <s:VerticalLayout />
  36.             </s:layout>
  37.             <mx:Form>
  38.                 <mx:FormItem label="From:" width="100%">
  39.                     <s:DropDownList id="fromEmail"
  40.                             requireSelection="true"
  41.                             width="100%">
  42.                         <s:ArrayList source="me@me.com" />
  43.                     </s:DropDownList>
  44.                 </mx:FormItem>
  45.                 <mx:FormItem label="To:" width="100%">
  46.                     <s:TextInput id="toEmail" width="100%" />
  47.                 </mx:FormItem>
  48.                 <mx:FormItem label="Message:" width="100%">
  49.                     <s:TextArea id="message" width="100%" />
  50.                 </mx:FormItem>
  51.                 <mx:FormItem horizontalAlign="right" width="100%">
  52.                     <s:Button label="Send" />
  53.                 </mx:FormItem>
  54.             </mx:Form>
  55.         </s:Panel>
  56.     </s:Group>
  57.  
  58. </s:Application>
代码：Peter deHaan 翻译/整理/编译：中文Flex例子

Topics: Gumbo, Panel | No Comments » | Tags: , ,

你可能还对下列文章感兴趣:

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

Categories

Archives

Blogroll